/* Dark cinematic application theme shared by /portal and /user. */
html.site-app.site-theme-dark {
  color-scheme: dark;
  --site-ink: #f2f8fb;
  --site-ink-soft: rgba(226, 240, 247, .72);
  --site-ink-faint: rgba(209, 230, 239, .43);
  --site-accent: #55dcff;
  --site-accent-strong: #9cecff;
  --site-gold: #e7bb68;
  --site-line: rgba(177, 226, 242, .16);
  --site-surface: rgba(5, 16, 27, .67);
  --site-surface-strong: rgba(5, 17, 29, .86);
  background: #02060c;
}

html.site-theme-dark.site-portal {
  --site-background: url("/site/assets/demo/night-seascape.webp?v=7ea6ceb4e7eac796");
  --portal-ink: var(--site-ink);
  --portal-soft: var(--site-ink-soft);
  --portal-muted: var(--site-ink-faint);
  --portal-cyan: var(--site-accent);
  --portal-cyan-bright: var(--site-accent-strong);
  --portal-gold: var(--site-gold);
  --portal-paper: #02060c;
  --portal-line: var(--site-line);
  --portal-glass: var(--site-surface);
}

html.site-theme-dark.site-user {
  --site-background: url("/site/assets/demo/night-seascape.webp?v=7ea6ceb4e7eac796");
  --primary: var(--site-accent);
  --primary-hover: var(--site-accent-strong);
  --black: var(--site-ink);
  --text-2: var(--site-ink-soft);
  --text-primary: var(--site-ink);
  --text-secondary: var(--site-ink-soft);
  --text-muted: var(--site-ink-faint);
  --gold: var(--site-gold);
  --gold-bright: #ffdca0;
  --border: var(--site-line);
  --border-in-light: var(--site-line);
}

html.site-app.site-theme-dark body {
  color: var(--site-ink);
  background: #02060c;
}

html.site-app.site-theme-dark body::before {
  opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(2, 6, 12, .98) 0%, rgba(3, 10, 18, .9) 40%, rgba(3, 12, 22, .38) 73%, rgba(2, 7, 13, .72) 100%),
    linear-gradient(180deg, rgba(2, 6, 12, .08), rgba(2, 6, 12, .35) 58%, #02060c 100%),
    var(--site-background);
  filter: saturate(.96) contrast(1.06) brightness(.82);
  transform-origin: 66% 34%;
}

html.site-theme-dark.site-user body::before {
  filter: saturate(.82) contrast(1.08) brightness(.62);
}

html.site-app.site-theme-dark body::after {
  background:
    linear-gradient(90deg, rgba(6, 14, 27, .74), rgba(6, 14, 27, .3) 65%, rgba(6, 14, 27, .18)),
    linear-gradient(180deg, rgba(6, 14, 27, .08), rgba(6, 14, 27, .2) 60%, rgba(6, 14, 27, .5));
}

#site-ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

html.site-theme-dark body.has-webgl #site-ocean { opacity: 1; }
html.site-app.site-theme-dark body.has-webgl::before { opacity: 0; background-image: none; }

@media (prefers-reduced-motion: reduce) {
  #site-ocean { transition: none; }
}

html.site-app.site-theme-dark ::selection {
  color: #021018;
  background: var(--site-accent-strong);
}

html.site-app.site-theme-dark .site-app-nav {
  color: var(--site-ink);
}

html.site-app.site-theme-dark.site-app-scrolled .site-app-nav {
  border-color: rgba(197, 234, 247, .11);
  background: rgba(2, 8, 15, .72);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

html.site-app.site-theme-dark .site-app-nav .brand,
html.site-app.site-theme-dark .site-app-nav .brand-cn {
  color: var(--site-ink);
}

html.site-app.site-theme-dark .site-app-nav .brand-star {
  color: var(--site-gold);
  filter: drop-shadow(0 0 10px rgba(231, 187, 104, .44));
}

html.site-app.site-theme-dark .site-app-nav .brand-en,
html.site-app.site-theme-dark .site-page-index {
  color: var(--site-ink-faint);
}

html.site-app.site-theme-dark .site-app-nav .nav-links a,
html.site-app.site-theme-dark .site-app-nav .nav-ghost {
  color: var(--site-ink-soft);
}

html.site-app.site-theme-dark .site-app-nav .nav-links a::after,
html.site-app.site-theme-dark .site-page-line i {
  background: var(--site-accent);
}

html.site-app.site-theme-dark .site-app-nav .nav-links a:hover,
html.site-app.site-theme-dark .site-app-nav .nav-links a[aria-current='page'] {
  color: var(--site-accent-strong);
}

html.site-app.site-theme-dark .site-app-nav .nav-ghost,
html.site-app.site-theme-dark .site-app-nav .nav-account {
  color: var(--site-ink-soft);
  border-color: rgba(214, 240, 248, .16);
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
}

html.site-app.site-theme-dark .site-app-nav .nav-ghost:hover,
html.site-app.site-theme-dark .site-app-nav .nav-account:hover {
  color: var(--site-accent-strong);
  border-color: rgba(85, 220, 255, .36);
  background: rgba(85, 220, 255, .08);
}

html.site-app.site-theme-dark .site-app-nav .nav-primary {
  color: #031018;
  border-color: rgba(232, 249, 254, .72);
  background: rgba(241, 251, 254, .94);
  box-shadow: 0 11px 30px rgba(0, 0, 0, .2);
}

html.site-app.site-theme-dark .site-app-nav .nav-primary:hover {
  border-color: var(--site-accent-strong);
  background: var(--site-accent-strong);
}

html.site-app.site-theme-dark .site-app-nav .nav-avatar {
  color: #06131b;
  border-color: rgba(156, 236, 255, .28);
  background: linear-gradient(145deg, rgba(156, 236, 255, .96), rgba(231, 187, 104, .9));
  box-shadow: 0 0 20px rgba(85, 220, 255, .14);
}

html.site-app.site-theme-dark .site-app-nav .nav-username {
  color: var(--site-ink);
}

html.site-app.site-theme-dark .site-app-nav .nav-points,
html.site-app.site-theme-dark .sidebar-points {
  color: #ffdca0;
}

html.site-app.site-theme-dark .site-app-nav .theme-switch {
  color: rgba(243, 251, 253, .9);
  border-color: rgba(156, 236, 255, .27);
  background: linear-gradient(120deg, rgba(219, 244, 250, .13), rgba(94, 169, 197, .1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 10px 28px rgba(0, 0, 0, .16);
}

html.site-app.site-theme-dark .site-app-nav .theme-switch:hover {
  color: #fff;
  border-color: rgba(156, 236, 255, .55);
  background: linear-gradient(120deg, rgba(225, 247, 252, .2), rgba(85, 169, 201, .16));
  box-shadow: 0 12px 32px rgba(20, 163, 204, .14), 0 0 24px rgba(211, 243, 250, .09);
}

html.site-app.site-theme-dark .site-page-number,
html.site-app.site-theme-dark .site-page-name {
  color: var(--site-ink-soft);
}

html.site-app.site-theme-dark .site-page-line {
  background: rgba(177, 226, 242, .14);
}

html.site-theme-dark.site-portal .portal-eyebrow,
html.site-theme-dark.site-user .account-eyebrow {
  color: var(--site-accent-strong);
}

html.site-theme-dark.site-portal .portal-eyebrow::before,
html.site-theme-dark.site-user .account-eyebrow::before {
  background: linear-gradient(90deg, var(--site-accent), transparent);
}

html.site-theme-dark.site-portal .site-portal-hero,
html.site-theme-dark.site-portal .group-title-row,
html.site-theme-dark.site-portal .portal-directory-nav a {
  border-color: var(--site-line);
}

html.site-theme-dark.site-portal .site-portal-hero .portal-title,
html.site-theme-dark.site-portal .group-title-row h2,
html.site-theme-dark.site-portal .portal-card-name {
  color: var(--site-ink);
}

html.site-theme-dark.site-portal .portal-directory-nav a,
html.site-theme-dark.site-portal .group-title-row p,
html.site-theme-dark.site-portal .portal-card-desc {
  color: var(--site-ink-soft);
}

html.site-theme-dark.site-portal .portal-directory-nav span,
html.site-theme-dark.site-portal .portal-domain,
html.site-theme-dark.site-portal .group-index {
  color: var(--site-ink-faint);
}

html.site-theme-dark.site-portal .portal-directory-nav i,
html.site-theme-dark.site-portal .portal-directory-nav a:hover,
html.site-theme-dark.site-portal .portal-icon {
  color: var(--site-accent-strong);
}

html.site-theme-dark.site-portal .portal-grid {
  border-color: var(--site-line);
  background: var(--site-line);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .14);
}

html.site-theme-dark.site-portal .portal-card {
  color: var(--site-ink);
  background: rgba(4, 15, 26, .76);
}

html.site-theme-dark.site-portal .portal-card::before {
  opacity: .7;
  background:
    radial-gradient(circle at 100% 0%, rgba(85, 220, 255, .07), transparent 44%),
    linear-gradient(145deg, rgba(156, 236, 255, .035), transparent 54%);
}

html.site-theme-dark.site-portal .portal-card:hover {
  background: rgba(7, 23, 38, .94);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .25);
}

html.site-theme-dark.site-portal .portal-arrow {
  color: rgba(209, 230, 239, .42);
}

html.site-theme-dark.site-portal .private-card::after {
  color: rgba(209, 230, 239, .24);
}

html.site-theme-dark.site-portal .footer {
  color: var(--site-ink-soft);
  border-top-color: var(--site-line);
  background: rgba(2, 8, 15, .78);
  box-shadow: none;
}

html.site-theme-dark.site-user .account-heading h2,
html.site-theme-dark.site-user .sidebar-profile-info h3,
html.site-theme-dark.site-user .profile-info h3,
html.site-theme-dark.site-user .section-title,
html.site-theme-dark.site-user .promo-card-title {
  color: var(--site-ink);
}

html.site-theme-dark.site-user .account-heading p,
html.site-theme-dark.site-user .profile-info p,
html.site-theme-dark.site-user .form-label,
html.site-theme-dark.site-user .order-date,
html.site-theme-dark.site-user .order-meta,
html.site-theme-dark.site-user .empty-state,
html.site-theme-dark.site-user .promo-card-desc {
  color: var(--site-ink-soft);
}

html.site-theme-dark.site-user .sidebar-card,
html.site-theme-dark.site-user .main-card {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: rgba(4, 14, 24, .76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
  backdrop-filter: blur(24px) saturate(1.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.06);
}

html.site-theme-dark.site-user .main-card {
  background: rgba(4, 15, 26, .88);
}

html.site-theme-dark.site-user .sidebar-profile,
html.site-theme-dark.site-user .profile-header {
  border-color: var(--site-line);
}

html.site-theme-dark.site-user .sidebar-avatar,
html.site-theme-dark.site-user .profile-avatar {
  border-color: rgba(231, 187, 104, .76);
  box-shadow: 0 0 0 5px rgba(231, 187, 104, .08), 0 0 28px rgba(85, 220, 255, .08);
}

html.site-theme-dark.site-user .nav-item {
  color: var(--site-ink-soft);
}

html.site-theme-dark.site-user .nav-item:hover,
html.site-theme-dark.site-user .nav-item.active {
  color: var(--site-accent-strong);
  background: transparent;
}

html.site-theme-dark.site-user .logout-btn {
  color: #ffaaa2;
  background: rgba(191, 76, 69, .1);
}

html.site-theme-dark.site-user .widgets-grid {
  border-color: var(--site-line);
  background: var(--site-line);
}

html.site-theme-dark.site-user .widget,
html.site-theme-dark.site-user .widget:first-child,
html.site-theme-dark.site-user .promo-card {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: rgba(7, 24, 39, .72);
}

html.site-theme-dark.site-user .promo-card:hover {
  border-color: rgba(85, 220, 255, .3);
  background: rgba(9, 31, 49, .86);
}

html.site-theme-dark.site-user .widget:first-child .widget-label,
html.site-theme-dark.site-user .widget:first-child .widget-sub,
html.site-theme-dark.site-user .widget-label,
html.site-theme-dark.site-user .widget-sub {
  color: var(--site-ink-faint);
}

html.site-theme-dark.site-user .widget:first-child .widget-value,
html.site-theme-dark.site-user .widget-value,
html.site-theme-dark.site-user .order-amount {
  color: var(--site-accent-strong);
}

html.site-theme-dark.site-user .promo-card-icon {
  color: #031018;
  background: linear-gradient(145deg, var(--site-accent-strong), var(--site-gold));
}

html.site-theme-dark.site-user .promo-card-badge {
  color: #031018;
  background: var(--site-accent-strong);
}

html.site-theme-dark.site-user .form-input,
html.site-theme-dark.site-user .topup-amount-btn,
html.site-theme-dark.site-user .order-row,
html.site-theme-dark.site-user #wechat-bind-card {
  color: var(--site-ink);
  border-color: var(--site-line) !important;
  background: rgba(7, 24, 39, .75) !important;
  box-shadow: none;
}

html.site-theme-dark.site-user .form-input::placeholder {
  color: var(--site-ink-faint);
}

html.site-theme-dark.site-user .form-input:focus {
  border-color: var(--site-accent) !important;
  background: rgba(9, 31, 49, .94) !important;
  box-shadow: 0 0 0 4px rgba(85, 220, 255, .1);
}

html.site-theme-dark.site-user .btn-submit,
html.site-theme-dark.site-user .topup-amount-btn.active {
  color: #031018;
  border-color: rgba(232, 249, 254, .78);
  background: rgba(241, 251, 254, .94) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

html.site-theme-dark.site-user .btn-submit:hover:not(:disabled) {
  color: #021018;
  background: var(--site-accent-strong) !important;
  box-shadow: 0 12px 34px rgba(85, 220, 255, .12);
}

html.site-theme-dark.site-user .topup-modal-overlay {
  background: rgba(0, 4, 9, .72);
}

html.site-theme-dark.site-user .topup-modal {
  color: var(--site-ink);
  border-color: var(--site-line);
  background: rgba(4, 15, 26, .98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46);
}

@media (max-width: 760px) {
  html.site-app.site-theme-dark body::before {
    inset: -1%;
    background-image:
      linear-gradient(180deg, rgba(2, 6, 12, .42) 0%, rgba(2, 6, 12, .78) 43%, #02060c 86%),
      linear-gradient(90deg, rgba(2, 6, 12, .78), rgba(2, 6, 12, .24)),
      var(--site-background);
    background-position: center top;
    filter: saturate(.9) contrast(1.06) brightness(.72);
  }

  html.site-theme-dark.site-user body::before {
    filter: saturate(.78) contrast(1.08) brightness(.56);
  }

  html.site-app.site-theme-dark body::after {
    background: linear-gradient(180deg, rgba(2, 6, 12, .08), rgba(2, 6, 12, .62));
  }
}