/*
 * ZZAPI visual theme override.
 * Loaded by Nginx only; the Sub2API container/backend remains untouched.
 */
:root {
  --zz-light-page:
    radial-gradient(circle at 14% 18%, rgba(96, 165, 250, .26), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(124, 58, 237, .24), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(167, 139, 250, .18), transparent 35%),
    linear-gradient(125deg, #ffffff 0%, #f3f7ff 26%, #f5f0ff 54%, #ffffff 78%, #eef5ff 100%);
  --zz-light-surface:
    linear-gradient(135deg, rgba(255, 255, 255, .94) 0%, rgba(239, 246, 255, .9) 36%, rgba(245, 240, 255, .9) 70%, rgba(255, 255, 255, .96) 100%);
  --zz-light-soft:
    linear-gradient(130deg, rgba(255, 255, 255, .86), rgba(229, 241, 255, .78), rgba(239, 232, 255, .8), rgba(255, 255, 255, .9));
  --zz-light-inverse:
    linear-gradient(125deg, #0d1733 0%, #1e3a8a 34%, #6d28d9 72%, #101827 100%);
  --zz-light-action:
    linear-gradient(110deg, #bfdbfe 0%, #ddd6fe 30%, #ffffff 50%, #c4b5fd 72%, #93c5fd 100%);
  --zz-light-hover:
    linear-gradient(125deg, rgba(239, 246, 255, .98), rgba(245, 240, 255, .96), rgba(255, 255, 255, .98));
  --zz-light-border: rgba(99, 102, 241, .24);
  --zz-light-ring: rgba(124, 58, 237, .24);

  --zz-dark-page:
    radial-gradient(circle at 16% 12%, rgba(132, 64, 255, .42), transparent 32%),
    radial-gradient(circle at 86% 16%, rgba(0, 124, 255, .38), transparent 36%),
    radial-gradient(circle at 54% 92%, rgba(78, 46, 174, .34), transparent 42%),
    linear-gradient(126deg, #050719 0%, #1b1148 30%, #072a75 63%, #160b35 100%);
  --zz-dark-surface:
    linear-gradient(135deg, rgba(16, 18, 52, .94), rgba(48, 31, 118, .88), rgba(9, 47, 122, .9), rgba(14, 17, 48, .94));
  --zz-dark-soft:
    linear-gradient(130deg, rgba(24, 25, 72, .84), rgba(75, 49, 158, .72), rgba(9, 68, 154, .76), rgba(22, 25, 72, .86));
  --zz-dark-action:
    linear-gradient(110deg, #8b5cf6 0%, #3b82f6 42%, #22d3ee 74%, #6d28d9 100%);
  --zz-dark-hover:
    linear-gradient(125deg, rgba(50, 39, 122, .92), rgba(9, 65, 150, .88), rgba(29, 24, 83, .92));
  --zz-dark-border: rgba(153, 185, 255, .23);
  --zz-dark-ring: rgba(129, 140, 248, .34);
}

@keyframes zz-gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes zz-soft-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .74; }
  50% { transform: translate3d(2vw, -1.5vh, 0) scale(1.04); opacity: .95; }
}

html,
body,
#app {
  min-height: 100%;
}

body {
  background: var(--zz-light-page) fixed !important;
  background-size: 260% 260% !important;
  animation: zz-gradient-flow 24s ease-in-out infinite !important;
  color: #101827 !important;
}

html.dark body {
  background: var(--zz-dark-page) fixed !important;
  background-size: 280% 280% !important;
  animation: zz-gradient-flow 22s ease-in-out infinite !important;
  color: #f6f8ff !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 24%, rgba(96, 165, 250, .2), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(139, 92, 246, .2), transparent 30%);
  filter: blur(8px);
  animation: zz-soft-float 18s ease-in-out infinite;
}

html.dark body::before {
  background:
    radial-gradient(circle at 20% 24%, rgba(138, 92, 246, .32), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(35, 129, 255, .3), transparent 31%);
}

#app,
#app main,
#app section,
#app [class~="min-h-screen"],
#app [class~="min-h-dvh"] {
  background-color: transparent !important;
}

.card,
.card-glass,
.stat-card,
.dropdown,
.modal-content,
.toast,
.tabs,
.table th,
.table tbody tr:hover,
.table-wrapper,
.btn-secondary,
.input,
.\!input,
.code,
.\!code,
#app [class~="bg-white"],
#app [class~="bg-white/20"],
#app [class~="bg-white/40"],
#app [class~="bg-white/50"],
#app [class~="bg-white/60"],
#app [class~="bg-white/70"],
#app [class~="bg-white/80"],
#app [class~="bg-white/85"],
#app [class~="bg-white/90"],
#app [class~="bg-gray-50"],
#app [class~="bg-gray-50/30"],
#app [class~="bg-gray-50/40"],
#app [class~="bg-gray-50/50"],
#app [class~="bg-gray-50/70"],
#app [class~="bg-gray-50/80"],
#app [class~="supports-[backdrop-filter]:bg-white/80"] {
  background-color: transparent !important;
  background-image: var(--zz-light-surface) !important;
  background-size: 240% 240% !important;
  background-position: 44% 50% !important;
  animation: none !important;
  border-color: var(--zz-light-border) !important;
  box-shadow: 0 14px 34px rgba(59, 130, 246, .08), 0 2px 10px rgba(124, 58, 237, .06) !important;
  transition: background-position .25s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html.dark .card,
html.dark .card-glass,
html.dark .stat-card,
html.dark .dropdown,
html.dark .modal-content,
html.dark .toast,
html.dark .tabs,
html.dark .table th,
html.dark .table tbody tr:hover,
html.dark .table-wrapper,
html.dark .btn-secondary,
html.dark .input,
html.dark .\!input,
html.dark .code,
html.dark .\!code,
html.dark #app [class~="bg-white"],
html.dark #app [class~="bg-white/20"],
html.dark #app [class~="bg-white/40"],
html.dark #app [class~="bg-white/50"],
html.dark #app [class~="bg-white/60"],
html.dark #app [class~="bg-white/70"],
html.dark #app [class~="bg-white/80"],
html.dark #app [class~="bg-white/85"],
html.dark #app [class~="bg-white/90"],
html.dark #app [class~="bg-gray-50"],
html.dark #app [class~="bg-gray-50/30"],
html.dark #app [class~="bg-gray-50/40"],
html.dark #app [class~="bg-gray-50/50"],
html.dark #app [class~="bg-gray-50/70"],
html.dark #app [class~="bg-gray-50/80"],
html.dark #app [class~="dark:bg-dark-500"],
html.dark #app [class~="dark:bg-dark-600"],
html.dark #app [class~="dark:bg-dark-700"],
html.dark #app [class~="dark:bg-dark-800"],
html.dark #app [class~="dark:bg-dark-900"],
html.dark #app [class~="dark:bg-slate-800"],
html.dark #app [class~="dark:bg-slate-900"],
html.dark #app [class~="supports-[backdrop-filter]:bg-white/80"] {
  background-color: transparent !important;
  background-image: var(--zz-dark-surface) !important;
  background-size: 260% 260% !important;
  background-position: 44% 50% !important;
  animation: none !important;
  border-color: var(--zz-dark-border) !important;
  box-shadow: 0 16px 42px rgba(7, 18, 55, .38), 0 0 22px rgba(94, 92, 246, .1) !important;
}

.sidebar,
header,
nav,
#app [class~="backdrop-blur"],
#app [class~="backdrop-blur-xl"] {
  background-color: transparent !important;
  background-image: var(--zz-light-soft) !important;
  background-size: 250% 250% !important;
  animation: zz-gradient-flow 34s ease-in-out infinite !important;
  border-color: var(--zz-light-border) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}

html.dark .sidebar,
html.dark header,
html.dark nav,
html.dark #app [class~="backdrop-blur"],
html.dark #app [class~="backdrop-blur-xl"] {
  background-image: var(--zz-dark-soft) !important;
  background-size: 260% 260% !important;
  border-color: var(--zz-dark-border) !important;
}

.btn-primary,
.btn-success,
.btn-warning,
.btn-stripe,
.btn-alipay,
.btn-wxpay,
.navigation-progress-bar,
#app [class~="bg-primary-500"],
#app [class~="bg-primary-600"],
#app [class~="bg-blue-500"],
#app [class~="bg-blue-600"],
#app [class~="bg-orange-500"],
#app [class~="bg-orange-600"] {
  background-color: transparent !important;
  background-image: var(--zz-light-action) !important;
  background-size: 300% 300% !important;
  background-position: 45% 50% !important;
  animation: none !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .18), 0 8px 20px rgba(124, 58, 237, .14) !important;
  transition: background-position .25s ease, transform .2s ease, box-shadow .2s ease !important;
}

.btn-primary,
.btn-primary *,
.btn-success,
.btn-success *,
.btn-warning,
.btn-warning *,
#app [class~="bg-primary-500"],
#app [class~="bg-primary-500"] *,
#app [class~="bg-primary-600"],
#app [class~="bg-primary-600"] *,
#app [class~="bg-blue-500"],
#app [class~="bg-blue-500"] *,
#app [class~="bg-blue-600"],
#app [class~="bg-blue-600"] *,
#app [class~="bg-orange-500"],
#app [class~="bg-orange-500"] *,
#app [class~="bg-orange-600"],
#app [class~="bg-orange-600"] * {
  color: #0f172a !important;
}

html.dark .btn-primary,
html.dark .btn-success,
html.dark .btn-warning,
html.dark .btn-stripe,
html.dark .btn-alipay,
html.dark .btn-wxpay,
html.dark .navigation-progress-bar,
html.dark #app [class~="bg-primary-500"],
html.dark #app [class~="bg-primary-600"],
html.dark #app [class~="bg-blue-500"],
html.dark #app [class~="bg-blue-600"],
html.dark #app [class~="bg-purple-500"],
html.dark #app [class~="bg-purple-600"] {
  background-image: var(--zz-dark-action) !important;
  background-size: 300% 300% !important;
  background-position: 45% 50% !important;
  animation: none !important;
  box-shadow: 0 16px 36px rgba(59, 130, 246, .22), 0 0 32px rgba(139, 92, 246, .16) !important;
}

html.dark .btn-primary,
html.dark .btn-primary *,
html.dark .btn-success,
html.dark .btn-success *,
html.dark .btn-warning,
html.dark .btn-warning *,
html.dark #app [class~="bg-primary-500"],
html.dark #app [class~="bg-primary-500"] *,
html.dark #app [class~="bg-primary-600"],
html.dark #app [class~="bg-primary-600"] *,
html.dark #app [class~="bg-blue-500"],
html.dark #app [class~="bg-blue-500"] *,
html.dark #app [class~="bg-blue-600"],
html.dark #app [class~="bg-blue-600"] *,
html.dark #app [class~="bg-purple-500"],
html.dark #app [class~="bg-purple-500"] *,
html.dark #app [class~="bg-purple-600"],
html.dark #app [class~="bg-purple-600"] * {
  color: #ffffff !important;
}

#app [class~="bg-slate-900"],
#app [class~="bg-slate-800"],
#app [class~="bg-gray-900"],
#app [class~="bg-gray-800"],
#app [class~="bg-black"],
#app [class~="bg-dark-700"],
#app [class~="bg-dark-800"],
#app [class~="bg-dark-900"] {
  background-color: transparent !important;
  background-image: var(--zz-light-inverse) !important;
  background-size: 280% 280% !important;
  background-position: 46% 50% !important;
  animation: none !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

html.dark #app [class~="bg-slate-900"],
html.dark #app [class~="bg-slate-800"],
html.dark #app [class~="bg-gray-900"],
html.dark #app [class~="bg-gray-800"],
html.dark #app [class~="bg-black"],
html.dark #app [class~="bg-dark-700"],
html.dark #app [class~="bg-dark-800"],
html.dark #app [class~="bg-dark-900"] {
  background-image: var(--zz-dark-surface) !important;
  background-size: 280% 280% !important;
}

.btn-ghost:hover,
.dropdown-item:hover,
.sidebar-link:hover,
.sidebar-link-active,
.sidebar-link-active:hover,
.table tbody tr:hover,
#app [class~="hover:bg-gray-50"]:hover,
#app [class~="hover:bg-white"]:hover,
#app [class~="hover:bg-gray-50/80"]:hover,
#app [class~="hover:bg-white/60"]:hover {
  background-color: transparent !important;
  background-image: var(--zz-light-hover) !important;
  background-size: 220% 220% !important;
  background-position: 70% 50% !important;
  animation: none !important;
}

html.dark .btn-ghost:hover,
html.dark .dropdown-item:hover,
html.dark .sidebar-link:hover,
html.dark .sidebar-link-active,
html.dark .sidebar-link-active:hover,
html.dark .table tbody tr:hover,
html.dark #app [class~="dark:hover:bg-dark-700"]:hover,
html.dark #app [class~="dark:hover:bg-dark-800"]:hover,
html.dark #app [class~="dark:hover:bg-blue-900/30"]:hover,
html.dark #app [class~="dark:hover:bg-purple-900/30"]:hover {
  background-image: var(--zz-dark-hover) !important;
}

.modal-overlay {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 30% 22%, rgba(99, 102, 241, .22), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(124, 58, 237, .2), transparent 38%),
    linear-gradient(135deg, rgba(10, 18, 36, .4), rgba(10, 18, 36, .28)) !important;
  background-size: 220% 220% !important;
  background-position: 48% 50% !important;
  animation: none !important;
}

html.dark .modal-overlay {
  background-image:
    radial-gradient(circle at 30% 22%, rgba(139, 92, 246, .32), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(37, 99, 235, .3), transparent 38%),
    linear-gradient(135deg, rgba(2, 6, 23, .72), rgba(15, 12, 45, .64)) !important;
}

.input:focus,
.\!input:focus {
  border-color: #6366f1 !important;
  --tw-ring-color: var(--zz-light-ring) !important;
}

html.dark .input:focus,
html.dark .\!input:focus {
  border-color: #8b9dff !important;
  --tw-ring-color: var(--zz-dark-ring) !important;
}

.text-gradient,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.sidebar-link-active {
  color: #4f46e5 !important;
}

html.dark .text-gradient,
html.dark .text-primary-300,
html.dark .text-primary-400,
html.dark .text-primary-500,
html.dark .sidebar-link-active {
  color: #a9b5ff !important;
}

.text-gradient {
  background-image: linear-gradient(110deg, #2563eb 0%, #6366f1 38%, #8b5cf6 72%, #4f46e5 100%) !important;
  background-size: 180% 180% !important;
  background-position: 45% 50% !important;
  animation: none !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  box-shadow: none !important;
}

html.dark .text-gradient {
  background-image: linear-gradient(110deg, #a78bfa 0%, #60a5fa 46%, #22d3ee 76%, #c4b5fd 100%) !important;
}

::-webkit-scrollbar-thumb {
  background-image: var(--zz-light-action) !important;
  background-size: 220% 220% !important;
  background-position: 45% 50% !important;
}

html.dark ::-webkit-scrollbar-thumb {
  background-image: var(--zz-dark-action) !important;
}

::selection {
  background: rgba(99, 102, 241, .24) !important;
  color: #0f172a !important;
}

html.dark ::selection {
  background: rgba(139, 92, 246, .34) !important;
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  .card,
  .card-glass,
  .stat-card,
  .dropdown,
  .modal-content,
  .toast,
  .tabs,
  .table th,
  .table tbody tr:hover,
  .table-wrapper,
  .btn-secondary,
  .input,
  .\!input,
  .code,
  .\!code,
  .sidebar,
  header,
  nav,
  .btn-primary,
  .btn-success,
  .btn-warning,
  .btn-stripe,
  .btn-alipay,
  .btn-wxpay,
  .navigation-progress-bar,
  .modal-overlay {
    animation-duration: 1ms !important;
  }
}

/* 2026-04-29: stronger blue-purple light theme, with less white in gradients. */
:root {
  --zz-light-page:
    radial-gradient(circle at 12% 16%, rgba(37, 99, 235, .32), transparent 31%),
    radial-gradient(circle at 84% 12%, rgba(124, 58, 237, .30), transparent 34%),
    radial-gradient(circle at 52% 88%, rgba(99, 102, 241, .22), transparent 36%),
    linear-gradient(126deg, #dbeafe 0%, #c7d2fe 28%, #e0e7ff 52%, #ddd6fe 76%, #bfdbfe 100%);
  --zz-light-surface:
    linear-gradient(135deg, rgba(224, 231, 255, .94) 0%, rgba(199, 210, 254, .90) 34%, rgba(221, 214, 254, .90) 68%, rgba(191, 219, 254, .92) 100%);
  --zz-light-soft:
    linear-gradient(130deg, rgba(219, 234, 254, .88), rgba(199, 210, 254, .82), rgba(221, 214, 254, .84), rgba(191, 219, 254, .86));
  --zz-light-inverse:
    linear-gradient(125deg, #08152f 0%, #1d4ed8 36%, #6d28d9 72%, #17123d 100%);
  --zz-light-action:
    linear-gradient(110deg, #2563eb 0%, #4f46e5 38%, #7c3aed 72%, #3b82f6 100%);
  --zz-light-hover:
    linear-gradient(125deg, rgba(191, 219, 254, .94), rgba(199, 210, 254, .92), rgba(221, 214, 254, .92));
  --zz-light-border: rgba(79, 70, 229, .34);
  --zz-light-ring: rgba(109, 40, 217, .30);
}

body::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(37, 99, 235, .28), transparent 29%),
    radial-gradient(circle at 82% 18%, rgba(124, 58, 237, .26), transparent 31%) !important;
}

.card,
.card-glass,
.stat-card,
.dropdown,
.modal-content,
.toast,
.tabs,
.table th,
.table tbody tr:hover,
.table-wrapper,
.btn-secondary,
.input,
.\!input,
.code,
.\!code,
#app [class~="bg-white"],
#app [class~="bg-white/20"],
#app [class~="bg-white/40"],
#app [class~="bg-white/50"],
#app [class~="bg-white/60"],
#app [class~="bg-white/70"],
#app [class~="bg-white/80"],
#app [class~="bg-white/85"],
#app [class~="bg-white/90"],
#app [class~="bg-gray-50"],
#app [class~="bg-gray-50/30"],
#app [class~="bg-gray-50/40"],
#app [class~="bg-gray-50/50"],
#app [class~="bg-gray-50/70"],
#app [class~="bg-gray-50/80"],
#app [class~="supports-[backdrop-filter]:bg-white/80"] {
  box-shadow: 0 14px 34px rgba(37, 99, 235, .12), 0 2px 14px rgba(109, 40, 217, .10) !important;
}

.btn-primary,
.btn-success,
.btn-warning,
.btn-stripe,
.btn-alipay,
.btn-wxpay,
.navigation-progress-bar,
.text-gradient,
#app [class~="bg-primary-500"],
#app [class~="bg-primary-600"],
#app [class~="bg-blue-500"],
#app [class~="bg-blue-600"],
#app [class~="bg-purple-500"],
#app [class~="bg-purple-600"],
#app [class~="bg-orange-500"],
#app [class~="bg-orange-600"] {
  background-image: var(--zz-light-action) !important;
  border-color: rgba(224, 231, 255, .52) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .22), 0 8px 22px rgba(124, 58, 237, .18) !important;
}

.btn-primary,
.btn-primary *,
.btn-success,
.btn-success *,
.btn-warning,
.btn-warning *,
.btn-stripe,
.btn-stripe *,
.btn-alipay,
.btn-alipay *,
.btn-wxpay,
.btn-wxpay *,
#app [class~="bg-primary-500"],
#app [class~="bg-primary-500"] *,
#app [class~="bg-primary-600"],
#app [class~="bg-primary-600"] *,
#app [class~="bg-blue-500"],
#app [class~="bg-blue-500"] *,
#app [class~="bg-blue-600"],
#app [class~="bg-blue-600"] *,
#app [class~="bg-purple-500"],
#app [class~="bg-purple-500"] *,
#app [class~="bg-purple-600"],
#app [class~="bg-purple-600"] *,
#app [class~="bg-orange-500"],
#app [class~="bg-orange-500"] *,
#app [class~="bg-orange-600"],
#app [class~="bg-orange-600"] * {
  color: #ffffff !important;
}

.text-gradient {
  background-image: linear-gradient(110deg, #1d4ed8 0%, #4f46e5 38%, #7c3aed 72%, #2563eb 100%) !important;
}

.text-gradient {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 2026-04-29: cover remaining white table header/sticky columns in light theme. */
:root {
  --zz-light-table-cell: linear-gradient(135deg, rgba(209, 218, 255, .95) 0%, rgba(197, 208, 254, .93) 46%, rgba(221, 214, 254, .92) 100%);
  --zz-light-table-head: linear-gradient(135deg, rgba(190, 205, 255, .98) 0%, rgba(203, 213, 255, .96) 48%, rgba(221, 214, 254, .96) 100%);
  --zz-light-table-edge: linear-gradient(135deg, rgba(202, 213, 255, .98) 0%, rgba(218, 211, 254, .96) 55%, rgba(191, 219, 254, .95) 100%);
}

#app table,
#app thead,
#app tbody,
#app tr,
#app .el-table,
#app .el-table__body,
#app .el-table__header,
#app .el-table__body-wrapper,
#app .el-table__header-wrapper,
#app .el-table__fixed,
#app .el-table__fixed-right,
#app .n-data-table,
#app .n-data-table-table,
#app .ant-table,
#app .ant-table-container,
#app .ant-table-content {
  background-color: transparent !important;
}

#app table th,
#app table td,
#app .table th,
#app .table td,
#app .el-table th.el-table__cell,
#app .el-table td.el-table__cell,
#app .el-table__cell,
#app .n-data-table-th,
#app .n-data-table-td,
#app .ant-table-thead > tr > th,
#app .ant-table-tbody > tr > td {
  background-color: transparent !important;
  background-image: var(--zz-light-table-cell) !important;
  border-color: rgba(79, 70, 229, .18) !important;
}

#app table thead th,
#app table thead td,
#app .table thead th,
#app .el-table__header th,
#app .n-data-table-th,
#app .ant-table-thead > tr > th {
  background-color: transparent !important;
  background-image: var(--zz-light-table-head) !important;
}

#app table th:first-child,
#app table td:first-child,
#app table th:last-child,
#app table td:last-child,
#app .table th:first-child,
#app .table td:first-child,
#app .table th:last-child,
#app .table td:last-child,
#app table [class*="sticky"],
#app .table [class*="sticky"],
#app .el-table [class*="fixed"],
#app .n-data-table [class*="fixed"],
#app .ant-table [class*="fix-left"],
#app .ant-table [class*="fix-right"],
#app [style*="position: sticky"] {
  background-color: transparent !important;
  background-image: var(--zz-light-table-edge) !important;
  box-shadow: inset 1px 0 rgba(79, 70, 229, .12), inset -1px 0 rgba(79, 70, 229, .10) !important;
}

html.dark #app table th,
html.dark #app table td,
html.dark #app .table th,
html.dark #app .table td,
html.dark #app .el-table th.el-table__cell,
html.dark #app .el-table td.el-table__cell,
html.dark #app .el-table__cell,
html.dark #app .n-data-table-th,
html.dark #app .n-data-table-td,
html.dark #app .ant-table-thead > tr > th,
html.dark #app .ant-table-tbody > tr > td {
  background-image: var(--zz-dark-surface) !important;
}


/* 2026-04-29: unify table surfaces; no per-cell independent gradients. */
:root {
  --zz-light-table-shell: linear-gradient(135deg, rgba(204, 215, 255, .82) 0%, rgba(213, 207, 252, .78) 54%, rgba(190, 214, 255, .76) 100%);
  --zz-light-table-head-fill: rgba(196, 208, 250, .92);
  --zz-light-table-cell-fill: rgba(219, 226, 255, .56);
  --zz-light-table-edge-fill: rgba(206, 214, 252, .86);
  --zz-light-table-hover-fill: rgba(201, 213, 255, .70);
}

#app table,
#app .table,
#app .table-wrapper,
#app .el-table,
#app .el-table__body-wrapper,
#app .el-table__header-wrapper,
#app .n-data-table,
#app .n-data-table-table,
#app .ant-table,
#app .ant-table-container,
#app .ant-table-content {
  background-color: transparent !important;
  background-image: var(--zz-light-table-shell) !important;
  background-size: 100% 100% !important;
  background-position: 50% 50% !important;
}

#app table th,
#app table td,
#app .table th,
#app .table td,
#app .el-table th.el-table__cell,
#app .el-table td.el-table__cell,
#app .el-table__cell,
#app .n-data-table-th,
#app .n-data-table-td,
#app .ant-table-thead > tr > th,
#app .ant-table-tbody > tr > td {
  background-image: none !important;
  background-color: var(--zz-light-table-cell-fill) !important;
  background-size: auto !important;
  background-position: initial !important;
  border-color: rgba(79, 70, 229, .16) !important;
}

#app table thead th,
#app table thead td,
#app .table thead th,
#app .el-table__header th,
#app .n-data-table-th,
#app .ant-table-thead > tr > th {
  background-image: none !important;
  background-color: var(--zz-light-table-head-fill) !important;
}

#app table th:first-child,
#app table td:first-child,
#app table th:last-child,
#app table td:last-child,
#app .table th:first-child,
#app .table td:first-child,
#app .table th:last-child,
#app .table td:last-child,
#app table [class*="sticky"],
#app .table [class*="sticky"],
#app .el-table [class*="fixed"],
#app .n-data-table [class*="fixed"],
#app .ant-table [class*="fix-left"],
#app .ant-table [class*="fix-right"],
#app [style*="position: sticky"] {
  background-image: none !important;
  background-color: var(--zz-light-table-edge-fill) !important;
  box-shadow: inset 1px 0 rgba(79, 70, 229, .10), inset -1px 0 rgba(79, 70, 229, .10) !important;
}

#app table tbody tr:hover th,
#app table tbody tr:hover td,
#app .table tbody tr:hover th,
#app .table tbody tr:hover td,
#app .el-table__body tr:hover > td.el-table__cell,
#app .n-data-table-tr:hover > .n-data-table-td,
#app .ant-table-tbody > tr:hover > td {
  background-image: none !important;
  background-color: var(--zz-light-table-hover-fill) !important;
}

html.dark #app table,
html.dark #app .table,
html.dark #app .table-wrapper,
html.dark #app .el-table,
html.dark #app .el-table__body-wrapper,
html.dark #app .el-table__header-wrapper,
html.dark #app .n-data-table,
html.dark #app .n-data-table-table,
html.dark #app .ant-table,
html.dark #app .ant-table-container,
html.dark #app .ant-table-content {
  background-image: var(--zz-dark-surface) !important;
}

html.dark #app table th,
html.dark #app table td,
html.dark #app .table th,
html.dark #app .table td,
html.dark #app .el-table th.el-table__cell,
html.dark #app .el-table td.el-table__cell,
html.dark #app .el-table__cell,
html.dark #app .n-data-table-th,
html.dark #app .n-data-table-td,
html.dark #app .ant-table-thead > tr > th,
html.dark #app .ant-table-tbody > tr > td {
  background-image: none !important;
  background-color: rgba(27, 34, 86, .72) !important;
}

/* Hide the custom iframe "open in new window" control when the embedded page is the primary experience. */
#app .custom-embed-shell .custom-open-fab {
  display: none !important;
}