html[data-xh-theme="midnight"] {
  color-scheme: dark;
  --xh-ink: #040a14;
  --xh-navy: #071321;
  --xh-panel: #0a1a2a;
  --xh-control: #0e2437;
  --xh-line: rgba(177, 211, 240, .17);
  --xh-line-strong: rgba(197, 224, 246, .30);
  --xh-ivory: #f3ead9;
  --xh-text: #e8eff5;
  --xh-muted: #8ca0b4;
  --xh-gold: #e5c47a;
  --xh-ice: #9fdcff;
  --mh-night-bg: var(--xh-ink);
  --mh-night-surface: var(--xh-panel);
  --mh-night-control: var(--xh-control);
  --mh-night-border: var(--xh-line);
  --mh-night-text: var(--xh-text);
  --mh-night-muted: var(--xh-muted);
}

html[data-xh-theme="midnight"] body,
html[data-xh-theme="midnight"] #root,
html[data-xh-theme="midnight"] .xh-themed-page,
html[data-xh-theme="midnight"] .mh-workbench-shell,
html[data-xh-theme="midnight"] .mh-workbench-content {
  background-color: var(--xh-ink) !important;
  color: var(--xh-text);
}

html[data-xh-theme="midnight"] body {
  background-image:
    radial-gradient(circle at 72% -10%, rgba(70, 130, 175, .13), transparent 34%),
    linear-gradient(180deg, #040a14, #071321 62%, #050c17) !important;
  background-attachment: fixed !important;
}

html[data-xh-theme="midnight"] .mh-workbench-shell > header,
html[data-xh-theme="midnight"] .xh-script-page > header,
html[data-xh-theme="midnight"] header[class*="fixed"][class*="top-0"] {
  border-color: var(--xh-line) !important;
  background: rgba(4, 10, 20, .90) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(18px) !important;
}

html[data-xh-theme="midnight"] .mh-workbench-shell aside,
html[data-xh-theme="midnight"] .xh-script-page aside {
  border-color: var(--xh-line) !important;
  background: rgba(5, 13, 23, .92) !important;
}

html[data-xh-theme="midnight"] .mh-card,
html[data-xh-theme="midnight"] .mh-user-center-hero,
html[data-xh-theme="midnight"] .mh-user-center-hero-fill,
html[data-xh-theme="midnight"] .mh-points-page section {
  border-color: var(--xh-line) !important;
  background-color: rgba(9, 24, 40, .80) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .20) !important;
}

html[data-xh-route="tasks"] .mh-workbench-content > div,
html[data-xh-route="asset"] .mh-workbench-content > div,
html[data-xh-route="user"] .mh-workbench-content > div,
html[data-xh-route="workflow"] .mh-workbench-content > div,
html[data-xh-route="app"] .mh-workbench-content > div {
  background-color: transparent !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="tasks"] .mh-workbench-content [class~="bg-white"],
html[data-xh-route="tasks"] .mh-workbench-content [class~="bg-slate-50"],
html[data-xh-route="tasks"] .mh-workbench-content [class~="bg-[#f7f9fc]"],
html[data-xh-route="tasks"] .mh-workbench-content [class~="bg-[#1f1f1f]"],
html[data-xh-route="asset"] .mh-workbench-content [class~="bg-white"],
html[data-xh-route="asset"] .mh-workbench-content [class~="bg-[#f8fafc]"],
html[data-xh-route="user"] .mh-workbench-content [class~="bg-white"],
html[data-xh-route="user"] .mh-workbench-content [class~="bg-gray-50"],
html[data-xh-route="user"] .mh-workbench-content [class~="bg-[#edf3f8]"] {
  background-color: rgba(9, 24, 40, .84) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="tasks"] .mh-workbench-content [class~="border-slate-100"],
html[data-xh-route="tasks"] .mh-workbench-content [class~="border-slate-200"],
html[data-xh-route="tasks"] .mh-workbench-content [class~="border-[#383838]"],
html[data-xh-route="asset"] .mh-workbench-content [class~="border-slate-100"],
html[data-xh-route="asset"] .mh-workbench-content [class~="border-slate-200"],
html[data-xh-route="user"] .mh-workbench-content [class~="border-gray-100"],
html[data-xh-route="user"] .mh-workbench-content [class~="border-gray-200"],
html[data-xh-route="user"] .mh-workbench-content [class~="border-gray-300"] {
  border-color: var(--xh-line) !important;
}

html[data-xh-route="tasks"] .mh-workbench-content [class~="text-slate-900"],
html[data-xh-route="asset"] .mh-workbench-content [class~="text-slate-900"],
html[data-xh-route="user"] .mh-workbench-content [class~="text-[#0f172a]"],
html[data-xh-route="user"] .mh-workbench-content [class~="text-[#1f2937]"],
html[data-xh-route="user"] .mh-workbench-content [class~="text-[#101a33]"] {
  color: var(--xh-text) !important;
}

html[data-xh-route="tasks"] .mh-workbench-content [class~="text-[#7890b3]"],
html[data-xh-route="asset"] .mh-workbench-content [class~="text-[#607089]"],
html[data-xh-route="user"] .mh-workbench-content [class~="text-[#4b5d7b]"] {
  color: var(--xh-muted) !important;
}

html[data-xh-route="user"] .mh-user-center-page,
html[data-xh-route="user"] .mh-points-page,
html[data-xh-route="user"] .mh-invite-page,
html[data-xh-route="user"] .mh-recharge-page {
  background-color: transparent !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="user"] .mh-points-page [class~="bg-white"],
html[data-xh-route="user"] .mh-points-page [class~="bg-slate-50"],
html[data-xh-route="user"] .mh-invite-page [class~="bg-[#eef1f5]"],
html[data-xh-route="user"] .mh-invite-page [class~="bg-[#f8f1dc]"],
html[data-xh-route="user"] .mh-invite-page [class~="bg-[#fffbed]"],
html[data-xh-route="user"] .mh-recharge-page [class~="bg-white"],
html[data-xh-route="user"] .mh-recharge-page [class~="bg-slate-50"],
html[data-xh-route="user"] .mh-recharge-modal-panel {
  background-color: rgba(9, 24, 40, .92) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="user"] .mh-points-page [class~="border-slate-100"],
html[data-xh-route="user"] .mh-points-page [class~="border-slate-200"],
html[data-xh-route="user"] .mh-invite-page [class~="border-[#e0e5ed]"],
html[data-xh-route="user"] .mh-invite-page [class~="border-[#edf0f4]"],
html[data-xh-route="user"] .mh-invite-page [class~="border-[#dfe4ec]"],
html[data-xh-route="user"] .mh-recharge-page [class~="border-slate-100"],
html[data-xh-route="user"] .mh-recharge-page [class~="border-slate-200"],
html[data-xh-route="user"] .mh-recharge-modal-panel {
  border-color: var(--xh-line) !important;
}

html[data-xh-route="image"] .xh-themed-page,
html[data-xh-route="video"] .xh-themed-page {
  background-color: transparent !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="image"] [class~="bg-[#fafbfc]"],
html[data-xh-route="image"] [class~="bg-[#eef1f5]"],
html[data-xh-route="image"] [class~="bg-[#eef3ff]"],
html[data-xh-route="image"] [class~="bg-[#f1f4f8]"],
html[data-xh-route="image"] [class~="bg-[#f4f7fb]"],
html[data-xh-route="image"] [class~="bg-[#eff3ff]"],
html[data-xh-route="image"] [class~="bg-[#e8ddff]"],
html[data-xh-route="video"] [class~="bg-[#fafbfc]"],
html[data-xh-route="video"] [class~="bg-[#eef1f5]"],
html[data-xh-route="video"] [class~="bg-[#eef3ff]"],
html[data-xh-route="video"] [class~="bg-[#f1f4f8]"],
html[data-xh-route="video"] [class~="bg-[#f4f7fb]"],
html[data-xh-route="video"] [class~="bg-[#eff3ff]"],
html[data-xh-route="video"] [class~="bg-[#e8ddff]"] {
  background-color: rgba(9, 24, 40, .88) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="image"] [class~="border-[#d7dee9]"],
html[data-xh-route="image"] [class~="border-[#e2e6ee]"],
html[data-xh-route="image"] [class~="border-[#cfd7e4]"],
html[data-xh-route="image"] [class~="border-[#dfe5ee]"],
html[data-xh-route="video"] [class~="border-[#d7dee9]"],
html[data-xh-route="video"] [class~="border-[#e2e6ee]"],
html[data-xh-route="video"] [class~="border-[#cfd7e4]"],
html[data-xh-route="video"] [class~="border-[#dfe5ee]"] {
  border-color: var(--xh-line) !important;
}

html[data-xh-route="image"] [class~="text-[#1d2838]"],
html[data-xh-route="image"] [class~="text-[#1f2a3b]"],
html[data-xh-route="image"] [class~="text-[#0f172a]"],
html[data-xh-route="video"] [class~="text-[#1d2838]"],
html[data-xh-route="video"] [class~="text-[#1f2a3b]"],
html[data-xh-route="video"] [class~="text-[#0f172a]"] {
  color: var(--xh-text) !important;
}

html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) input:is(:not([type]),[type="text"],[type="password"],[type="email"],[type="tel"],[type="search"],[type="url"],[type="number"],[type="date"],[type="datetime-local"],[type="time"]),
html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) textarea,
html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) select {
  border-color: var(--xh-line) !important;
  background-color: rgba(8, 23, 38, .88) !important;
  color: var(--xh-text) !important;
}

html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) input:is(:not([type]),[type="text"],[type="password"],[type="email"],[type="tel"],[type="search"],[type="url"],[type="number"])::placeholder,
html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) textarea::placeholder { color: #72879b !important; }

html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) input:is(:not([type]),[type="text"],[type="password"],[type="email"],[type="tel"],[type="search"],[type="url"],[type="number"],[type="date"],[type="datetime-local"],[type="time"]):focus,
html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) textarea:focus,
html[data-xh-theme="midnight"]:not([data-xh-route="canvas"]) select:focus {
  border-color: rgba(159, 220, 255, .62) !important;
  box-shadow: 0 0 0 3px rgba(112, 192, 238, .10) !important;
  outline: none !important;
}

html[data-xh-theme="midnight"] a:focus-visible,
html[data-xh-theme="midnight"] button:focus-visible {
  outline: 2px solid var(--xh-ice) !important;
  outline-offset: 2px;
}

html[data-xh-route="login"] .xh-login-page {
  background:
    linear-gradient(90deg, rgba(4, 10, 20, .22), rgba(4, 10, 20, .84)),
    radial-gradient(circle at 25% 35%, rgba(58, 121, 164, .20), transparent 36%),
    var(--xh-ink) !important;
}

html[data-xh-route="login"] .xh-login-card {
  border: 1px solid var(--xh-line) !important;
  border-radius: 24px !important;
  background: rgba(8, 22, 37, .88) !important;
  color: var(--xh-text) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(24px);
}

html[data-xh-route="login"] .xh-login-card :is(h1, h2, h3, strong) {
  color: var(--xh-text) !important;
}

html[data-xh-route="login"] .xh-login-card div[class~="bg-white"] {
  border-color: var(--xh-line) !important;
  background: rgba(6, 18, 31, .94) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="login"] .xh-login-card button[class~="bg-white"] {
  border-color: rgba(210, 230, 244, .38) !important;
  background: linear-gradient(135deg, var(--xh-gold), var(--xh-ice)) !important;
  color: #06111d !important;
  box-shadow: 0 8px 24px rgba(91, 182, 224, .16) !important;
}

html[data-xh-route="login"] .xh-login-page [class~="bg-[#f7f8fa]"],
html[data-xh-route="login"] .xh-login-page [class~="bg-[#eef0f3]"],
html[data-xh-route="login"] .xh-login-page [class~="bg-[#1b202a]"] {
  border-color: var(--xh-line) !important;
  background-color: rgba(8, 22, 37, .90) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="login"] .xh-login-page [class~="text-[#12151d]"],
html[data-xh-route="login"] .xh-login-page [class~="text-[#202124]"] {
  color: var(--xh-text) !important;
}

html[data-xh-route="login"] .xh-login-page [class~="border-[#e1e5eb]"],
html[data-xh-route="login"] .xh-login-page [class~="border-[#d8dde5]"],
html[data-xh-route="login"] .xh-login-page [class~="border-[#edf0f4]"] {
  border-color: var(--xh-line) !important;
}

html[data-xh-route="script"] .xh-script-page {
  background-color: transparent !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="script"] .xh-script-page [class~="bg-white/95"],
html[data-xh-route="script"] .xh-script-page [class~="bg-white/94"],
html[data-xh-route="script"] .xh-script-page [class~="bg-white"],
html[data-xh-route="script"] .xh-script-page [class~="bg-[#f7f9fc]/96"],
html[data-xh-route="script"] .xh-script-page [class~="bg-[#f7f9fc]"] {
  background-color: rgba(7, 19, 33, .94) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="script"] .xh-script-page [class~="bg-[#eef1f7]"],
html[data-xh-route="script"] .xh-script-page [class~="bg-[#eef1f6]"],
html[data-xh-route="script"] .xh-script-page [class~="bg-[#f0f3f7]"],
html[data-xh-route="script"] .xh-script-page [class~="bg-[#f3f5f8]"] {
  background-color: rgba(15, 39, 58, .92) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="script"] .xh-script-page [class~="border-[#edf1f6]"],
html[data-xh-route="script"] .xh-script-page [class~="border-[#e3e8ef]"],
html[data-xh-route="script"] .xh-script-page [class~="border-[#e3e8f0]"],
html[data-xh-route="script"] .xh-script-page [class~="border-[#e4e9f0]"],
html[data-xh-route="script"] .xh-script-page [class~="border-[#dfe5ed]"] {
  border-color: var(--xh-line) !important;
}

html[data-xh-route="script"] .xh-script-page [class~="text-[#111827]"],
html[data-xh-route="script"] .xh-script-page [class~="text-[#172033]"],
html[data-xh-route="script"] .xh-script-page [class~="text-[#344054]"] {
  color: var(--xh-text) !important;
}

html[data-xh-route="user"] .mh-user-center-hero,
html[data-xh-route="user"] .mh-user-center-hero-fill {
  background-image: linear-gradient(135deg, rgba(12, 39, 61, .94), rgba(7, 20, 35, .94)) !important;
}

html[data-xh-route="canvas"] .mh-infinite-canvas-ui,
html[data-xh-route="canvas"] .mh-canvas-no-native-selection {
  --background: var(--xh-ink);
  --foreground: var(--xh-text);
  --border: var(--xh-line);
}

/* Canvas chrome: keep the navy shell and graphite work area in one continuous surface. */
html[data-xh-route="canvas"],
html[data-xh-route="canvas"] body,
html[data-xh-route="canvas"] #root {
  background-color: #151a20 !important;
}

html[data-xh-route="canvas"] body {
  background-image: linear-gradient(180deg, #071321 0, #0c1825 88px, #121a21 190px, #151a20 320px) !important;
  background-attachment: fixed !important;
}

html[data-xh-route="canvas"] .mh-infinite-canvas-ui,
html[data-xh-route="canvas"] .mh-canvas-no-native-selection {
  background-color: #151a20 !important;
  background-image: linear-gradient(180deg, rgba(7, 19, 33, .64) 0, rgba(18, 26, 33, .24) 150px, rgba(21, 26, 32, 0) 300px) !important;
}

html[data-xh-route="canvas"] [data-top-shell] {
  min-height: 76px;
  border-bottom-color: rgba(177, 211, 240, .20) !important;
  background: linear-gradient(180deg, rgba(7, 19, 33, .98) 0%, rgba(10, 24, 38, .96) 62%, rgba(18, 29, 38, .90) 100%) !important;
  box-shadow: 0 14px 36px rgba(4, 10, 20, .22) !important;
}

html[data-xh-route="canvas"] [data-top-shell] > div:first-child {
  background: transparent !important;
}

html[data-xh-route="canvas"] [data-bottom-shell] {
  background: rgba(17, 25, 33, .94) !important;
}

html[data-xh-route="canvas"] [data-top-shell],
html[data-xh-route="canvas"] [data-bottom-shell],
html[data-xh-route="canvas"] [data-canvas-sidebar],
html[data-xh-route="canvas"] [data-asset-panel],
html[data-xh-route="canvas"] [data-workflow-panel],
html[data-xh-route="canvas"] [data-history-panel],
html[data-xh-route="canvas"] [data-menu-panel],
html[data-xh-route="canvas"] [data-mini-map-panel],
html[data-xh-route="canvas"] [data-selection-toolbar],
html[data-xh-route="canvas"] [data-shortcut-panel],
html[data-xh-route="canvas"] [data-canvas-context-menu],
html[data-xh-route="canvas"] [data-prompt-model-menu],
html[data-xh-route="canvas"] [data-video-story-panel] {
  border-color: var(--xh-line) !important;
  background-color: rgba(7, 19, 33, .94) !important;
  color: var(--xh-text) !important;
}

html[data-xh-route="canvas"] :is([data-top-shell], [data-bottom-shell]) [class~="bg-white"],
html[data-xh-route="canvas"] :is([data-top-shell], [data-bottom-shell]) [class~="bg-[#34363a]"],
html[data-xh-route="canvas"] :is([data-top-shell], [data-bottom-shell]) [class~="bg-[#2f3033]"],
html[data-xh-route="canvas"] :is([data-top-shell], [data-bottom-shell]) [class~="bg-[#242426]/95"] {
  border-color: var(--xh-line) !important;
  background: rgba(7, 19, 33, .96) !important;
  color: var(--xh-text) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .30) !important;
}

html[data-xh-route="canvas"] :is([data-top-shell], [data-bottom-shell]) :is([class~="text-white"], [class~="text-[#202124]"], [class~="text-[#3c4043]"]) {
  color: var(--xh-text) !important;
}

html[data-xh-route="canvas"] [data-top-shell] #xh-global-brand {
  position: static;
  z-index: auto;
  flex: none;
  height: 40px;
  padding: 0 12px;
}

html[data-xh-theme="midnight"] .payment-qr,
html[data-xh-theme="midnight"] .mh-qr-surface { background: #fff !important; }

html[data-xh-theme="midnight"] .xh-account-panel,
html[data-xh-theme="midnight"] .xh-dialog-panel,
html[data-xh-theme="midnight"] .xh-announcement-dialog,
html[data-xh-theme="midnight"] .xh-points-panel {
  border-color: var(--xh-line) !important;
  background: rgba(7, 19, 33, .97) !important;
  color: var(--xh-text) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52) !important;
}

html[data-xh-theme="midnight"] .xh-account-panel > div,
html[data-xh-theme="midnight"] .xh-dialog-panel > header,
html[data-xh-theme="midnight"] .xh-dialog-panel > footer,
html[data-xh-theme="midnight"] .xh-dialog-panel > aside,
html[data-xh-theme="midnight"] .xh-dialog-panel > main,
html[data-xh-theme="midnight"] .xh-announcement-dialog > header,
html[data-xh-theme="midnight"] .xh-announcement-dialog > footer,
html[data-xh-theme="midnight"] .xh-points-panel > div {
  border-color: var(--xh-line) !important;
  background-color: rgba(10, 27, 44, .86) !important;
  color: var(--xh-text) !important;
}

html[data-xh-theme="midnight"] .xh-account-panel [class~="text-[#7a8495]"],
html[data-xh-theme="midnight"] .xh-account-panel [class~="text-content-tertiary"],
html[data-xh-theme="midnight"] .xh-dialog-panel [class~="text-[#7b8492]"],
html[data-xh-theme="midnight"] .xh-announcement-dialog [class~="text-slate-400"] {
  color: var(--xh-muted) !important;
}

html[data-xh-theme="midnight"] .xh-customer-dialog [aria-label*="二维码"],
html[data-xh-theme="midnight"] .xh-customer-dialog [aria-label*="二维码"] img {
  background: #fff !important;
  color-scheme: normal;
}

html[data-xh-theme="midnight"] .payment-qr,
html[data-xh-theme="midnight"] .mh-qr-surface,
html[data-xh-theme="midnight"] canvas,
html[data-xh-theme="midnight"] video,
html[data-xh-theme="midnight"] img { color-scheme: normal; }

#xh-global-brand {
  position: fixed;
  z-index: 72;
  left: 20px;
  top: 16px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(229, 196, 122, .28);
  border-radius: 999px;
  color: var(--xh-gold, #e5c47a);
  background: rgba(4, 10, 20, .82);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px);
  text-decoration: none;
  pointer-events: none;
  user-select: none;
}

#xh-global-brand i {
  width: 23px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: rotate(-18deg);
}

#xh-global-brand strong {
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  letter-spacing: .12em;
}

@media (max-width: 720px) {
  #xh-global-brand { left: 12px; top: 10px; height: 34px; padding: 0 11px; }
  #xh-global-brand strong { font-size: 15px; }
}