/* 掌玩 Premium UI v5
   统一前台视觉：曜石黑、紫晶与香槟金。此文件应在既有主题之后加载。 */
:root {
  --premium-bg: #070910;
  --premium-surface: #10131d;
  --premium-surface-2: #151925;
  --premium-line: rgba(255, 255, 255, .09);
  --premium-line-strong: rgba(255, 255, 255, .15);
  --premium-text: #f7f5ff;
  --premium-muted: #999fb1;
  --premium-violet: #8b5cf6;
  --premium-violet-2: #a78bfa;
  --premium-gold: #f3c968;
  --premium-gold-2: #e7a938;
  --premium-cyan: #72d8e8;
  --premium-shadow: 0 28px 80px rgba(0, 0, 0, .34);
  --premium-radius-xl: 28px;
  --premium-radius-lg: 20px;
  --premium-radius-md: 14px;
  --bg-0: var(--premium-bg);
  --bg-1: var(--premium-surface);
  --bg-2: var(--premium-surface-2);
  --text: var(--premium-text);
  --text-dim: var(--premium-muted);
  --line: var(--premium-line);
  --accent: var(--premium-violet);
  --accent-2: var(--premium-cyan);
  --gold: var(--premium-gold);
  --grad: linear-gradient(135deg, #9b72ff 0%, #7447e8 100%);
  --grad-gold: linear-gradient(135deg, #f7d982 0%, #e8a63a 100%);
}

html { scroll-behavior: smooth; }

body.zw-site-page {
  color: var(--premium-text);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(121, 72, 230, .16), transparent 62%),
    radial-gradient(780px 520px at 94% 30%, rgba(34, 181, 199, .08), transparent 66%),
    var(--premium-bg);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: -.01em;
}

body.zw-site-page::before,
body.zw-site-page::after {
  opacity: .12 !important;
  filter: blur(150px) !important;
}

.zw-site-page .container {
  width: min(100%, 1380px);
  max-width: 1380px;
  padding-inline: 30px;
}

/* Header */
.zw-site-page .header {
  height: 78px;
  border-bottom: 1px solid var(--premium-line) !important;
  background: rgba(7, 9, 16, .76) !important;
  box-shadow: 0 14px 46px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}

.zw-site-page .header::after { display: none !important; }
.zw-site-page .header.is-scrolled { background: rgba(7, 9, 16, .92) !important; }
.zw-site-page .header .container { height: 78px; }
.zw-site-page .logo { gap: 13px; font-size: 20px; letter-spacing: -.025em; }
.zw-site-page .logo-icon {
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  background: linear-gradient(145deg, #9d78ff, #6c3cda 72%, #40209c) !important;
  box-shadow: 0 10px 28px rgba(104, 57, 210, .32), inset 0 1px rgba(255, 255, 255, .28) !important;
}

.zw-site-page .logo span {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.zw-site-page .nav { gap: 6px; }
.zw-site-page .nav a {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #aaaebe;
  font-size: 14px;
  font-weight: 650;
}

.zw-site-page .nav a:hover,
.zw-site-page .nav a.active {
  color: #fff;
  border-color: var(--premium-line);
  background: rgba(255, 255, 255, .055);
}

.zw-site-page .nav .btn-login {
  color: #e7e1fa;
  border-color: rgba(167, 139, 250, .32);
  background: rgba(139, 92, 246, .06);
}

.zw-site-page .nav .btn-register {
  color: #17101f;
  border-color: rgba(255, 230, 160, .28);
  background: var(--grad-gold) !important;
  box-shadow: 0 8px 24px rgba(224, 161, 49, .16);
}

/* Hero */
.page-home .banner-section { padding: 30px 0 10px; }
.page-home .banner {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  height: clamp(430px, 43vw, 560px) !important;
  min-height: 430px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: var(--premium-radius-xl) !important;
  background: #0d101b;
  box-shadow: var(--premium-shadow), inset 0 1px rgba(255, 255, 255, .07) !important;
}

.page-home .banner::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -100px 150px rgba(4, 5, 10, .24) !important;
}

.page-home .banner-slide { background: #111522 !important; }
.page-home .banner-media-shell { position: absolute; inset: 0; overflow: hidden; }
.page-home .banner-media-backdrop { display: none; }
.page-home .banner-media img {
  filter: none !important;
  transform: scale(1.006);
}

.page-home .banner-slide::before {
  background: linear-gradient(90deg, rgba(5, 6, 12, .94) 0%, rgba(5, 6, 12, .75) 34%, rgba(5, 6, 12, .18) 66%, rgba(5, 6, 12, .03) 100%) !important;
}

/* 图片已经自带标题时不再叠加重色遮罩，保持上传原图的色彩。 */
.page-home .banner-slide.no-text::before {
  background: linear-gradient(180deg, rgba(5, 6, 12, .01) 0%, rgba(5, 6, 12, .02) 72%, rgba(5, 6, 12, .12) 100%) !important;
}

.page-home .banner-slide-content {
  left: clamp(36px, 5vw, 78px) !important;
  max-width: 590px !important;
  padding-right: 24px;
}

.page-home .banner-eyebrow {
  margin-bottom: 18px;
  padding: 7px 12px;
  border-color: rgba(243, 201, 104, .34);
  background: rgba(20, 16, 10, .44);
  color: #f7d982;
  backdrop-filter: blur(12px);
}

.page-home .banner-slide-content h2 {
  max-width: 9em;
  margin-bottom: 14px;
  font-size: clamp(42px, 4.4vw, 66px) !important;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 12px 50px rgba(0, 0, 0, .45);
}

.page-home .banner-slide-content p {
  max-width: 470px;
  margin-bottom: 28px;
  color: rgba(242, 240, 250, .72) !important;
  font-size: 17px !important;
  letter-spacing: .01em;
}

.page-home .banner-btn {
  min-height: 48px;
  padding: 0 22px !important;
  border-radius: 13px !important;
  font-size: 14px;
  letter-spacing: .01em;
}

.page-home .banner-btn.primary {
  color: #201607 !important;
  background: var(--grad-gold) !important;
  box-shadow: 0 14px 32px rgba(222, 157, 42, .25) !important;
}

.page-home .banner-bottom { right: 26px; bottom: 23px; left: auto; }
.page-home .banner-counter { color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.page-home .banner-dot { background: rgba(255, 255, 255, .38) !important; }
.page-home .banner-dot.active { background: var(--premium-gold) !important; }
.page-home .banner-progress { height: 2px; background: transparent; }
.page-home .banner-progress-bar { background: linear-gradient(90deg, var(--premium-gold), var(--premium-violet-2)); }

.page-home .notice-bar {
  margin: 16px 0 0;
  padding: 13px 17px;
  border-color: var(--premium-line) !important;
  border-radius: 14px;
  color: #d8d7e0;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
}

.premium-value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  background: var(--premium-line);
}

.premium-value-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 15px 20px;
  background: rgba(12, 15, 23, .96);
}

.premium-value-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 12px;
  color: var(--premium-violet-2);
  background: rgba(139, 92, 246, .09);
  font-size: 17px;
}

.premium-value-item strong { display: block; margin-bottom: 2px; color: #f6f4fb; font-size: 14px; }
.premium-value-item span { color: var(--premium-muted); font-size: 12px; }

/* Sections and controls */
.page-home .section { padding: 54px 0; }
.page-home #accounts { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .014), transparent); }
.zw-site-page .section-head { margin-bottom: 24px; }
.zw-site-page .section-title {
  gap: 12px;
  color: #f7f5ff;
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 850;
  letter-spacing: -.04em;
}

.zw-site-page .section-title .bar,
.zw-site-page .card-title .bar {
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--premium-gold), var(--premium-violet)) !important;
  box-shadow: none !important;
}

.zw-site-page .section-title .sub { margin-left: 5px; color: var(--premium-muted); font-size: 13px; letter-spacing: 0; }
.zw-site-page .category-tabs { gap: 9px; }
.zw-site-page .category-tab {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--premium-line);
  border-radius: 12px;
  color: #aaafbf;
  background: rgba(255, 255, 255, .027);
  box-shadow: none;
}

.zw-site-page .category-tab:hover { color: #fff; border-color: rgba(167, 139, 250, .34); background: rgba(139, 92, 246, .07); }
.zw-site-page .category-tab.active {
  color: #fff;
  border-color: rgba(167, 139, 250, .42);
  background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(91, 54, 173, .20)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 9px 22px rgba(63, 35, 129, .14) !important;
}

.zw-site-page .game-toolbar,
.zw-site-page .search-bar {
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--premium-line) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}

.zw-site-page .search-input,
.zw-site-page .search-select,
.zw-site-page .form-input,
.zw-site-page .form-select,
.zw-site-page .form-textarea {
  border: 1px solid var(--premium-line) !important;
  border-radius: 12px !important;
  color: #f2eff9 !important;
  background: rgba(5, 7, 12, .62) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .02) !important;
}

.zw-site-page .search-input:focus,
.zw-site-page .search-select:focus,
.zw-site-page .form-input:focus,
.zw-site-page .form-select:focus,
.zw-site-page .form-textarea:focus {
  border-color: rgba(167, 139, 250, .68) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .11) !important;
}

.zw-site-page .search-btn,
.zw-site-page .submit-btn,
.zw-site-page .btn-primary {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #9367f5, #7040df) !important;
  box-shadow: 0 10px 26px rgba(101, 55, 207, .20) !important;
}

.zw-site-page .games-grid,
.zw-site-page .accounts-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }

.zw-site-page .game-card,
.zw-site-page .account-card,
.zw-site-page .home-account-card {
  overflow: hidden;
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius-lg) !important;
  background: linear-gradient(155deg, rgba(20, 24, 35, .97), rgba(10, 12, 19, .99)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18) !important;
}

.zw-site-page .game-card:hover,
.zw-site-page .account-card:hover,
.zw-site-page .home-account-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, .38) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .30), 0 0 0 1px rgba(139, 92, 246, .08) !important;
}

.zw-site-page .game-cover,
.zw-site-page .account-cover { min-height: 0; aspect-ratio: 16 / 9; background: #161a25; }
.zw-site-page .game-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(8, 10, 16, .48)); pointer-events: none; }
.zw-site-page .game-info,
.zw-site-page .account-body { padding: 20px; }
.zw-site-page .game-name { font-size: 20px; letter-spacing: -.025em; }
.zw-site-page .game-title { color: var(--premium-muted); line-height: 1.65; }
.zw-site-page .tag,
.zw-site-page .game-type-tag { border-radius: 8px; }
.zw-site-page .game-btn { min-height: 42px; border-radius: 11px; }
.zw-site-page .game-btn.download { color: #221609; background: var(--grad-gold); }
.zw-site-page .game-btn.detail { border-color: var(--premium-line); background: rgba(255, 255, 255, .045); }

/* Contact and footer */
.zw-site-page .contact-section { padding: 38px 0 72px; background: transparent !important; }
.zw-site-page .contact-card {
  padding: 48px 30px;
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius-xl) !important;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(139, 92, 246, .13), transparent 72%),
    rgba(15, 18, 27, .92) !important;
  box-shadow: var(--premium-shadow) !important;
}

.zw-site-page .contact-wechat { border-color: var(--premium-line); background: rgba(255, 255, 255, .035); }
.zw-site-page .contact-action-btn { border-radius: 12px; background: var(--grad-gold); color: #241708; }
.zw-site-page .contact-action-btn.outline { color: #eee9fb; border-color: rgba(167, 139, 250, .28); background: rgba(139, 92, 246, .07); }
.zw-site-page .footer { border-top: 1px solid var(--premium-line); background: #080a11 !important; }

/* Detail, publishing and user pages */
.zw-site-page .page-wrap,
.zw-site-page .detail-page,
.zw-site-page .publish-page,
.zw-site-page .user-page { padding-top: 34px; }

.zw-site-page .card,
.zw-site-page .game-hero,
.zw-site-page .account-header,
.zw-site-page .profile-card,
.zw-site-page .publish-card {
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius-lg) !important;
  background: linear-gradient(155deg, rgba(20, 24, 35, .96), rgba(10, 12, 19, .98)) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22) !important;
}

.zw-site-page .card-title { color: #f7f5ff; font-size: 17px; letter-spacing: -.02em; }
.zw-site-page .game-hero { padding: 28px; }
.zw-site-page .game-cover-big { border-radius: 16px; }
.zw-site-page .game-title,
.zw-site-page .account-title { color: #faf8ff; letter-spacing: -.03em; }
.zw-site-page .breadcrumb { color: var(--premium-muted); }

/* Auth pages */
.zw-site-page .auth-wrapper { background: var(--premium-bg); }
.zw-site-page .brand-panel {
  background:
    radial-gradient(700px 700px at 25% 80%, rgba(139, 92, 246, .30), transparent 66%),
    linear-gradient(145deg, #111522, #0a0c14 72%) !important;
}

.zw-site-page .brand-grid { opacity: .20; }
.zw-site-page .brand-content { max-width: 610px; }
.zw-site-page .brand-headline { font-size: clamp(40px, 4vw, 62px); line-height: 1.04; letter-spacing: -.055em; }
.zw-site-page .brand-headline em { color: #d8c9ff; background: none; -webkit-text-fill-color: currentColor; }
.zw-site-page .brand-desc { max-width: 530px; color: rgba(226, 224, 236, .62); }
.zw-site-page .brand-feature-icon { border: 1px solid rgba(167, 139, 250, .22); background: rgba(139, 92, 246, .10); }
.zw-site-page .brand-stat-num { color: #d9cdff; }
.zw-site-page .form-panel { background: #090b12 !important; }
.zw-site-page .form-box {
  border: 1px solid var(--premium-line) !important;
  border-radius: 24px !important;
  background: rgba(16, 19, 29, .94) !important;
  box-shadow: var(--premium-shadow) !important;
}

.zw-site-page .form-title { color: #f8f6ff; letter-spacing: -.04em; }
.zw-site-page .form-subtitle,
.zw-site-page .form-label { color: var(--premium-muted); }
.zw-site-page .form-submit { border-radius: 12px; background: linear-gradient(135deg, #9367f5, #7040df) !important; box-shadow: 0 14px 32px rgba(101, 55, 207, .24); }
.zw-site-page .back-home { border-color: var(--premium-line); background: rgba(255, 255, 255, .03); }

/* Floating service */
.zw-site-page .zw-cs-launcher,
.zw-site-page .float-toggle {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: linear-gradient(145deg, #9165ef, #6740d4) !important;
  box-shadow: 0 16px 38px rgba(77, 39, 169, .32) !important;
}

@media (max-width: 968px) {
  .zw-site-page .header,
  .zw-site-page .header .container { height: 66px !important; }
  .zw-site-page .nav.show { top: 74px !important; border: 1px solid var(--premium-line); border-radius: 18px; background: rgba(10, 12, 20, .96) !important; box-shadow: var(--premium-shadow); }
  .zw-site-page .nav.show #navGuest[style*="display: none"],
  .zw-site-page .nav.show #navUser[style*="display: none"],
  .zw-site-page .nav.show #navGuest[style*="display:none"],
  .zw-site-page .nav.show #navUser[style*="display:none"] { display: none !important; }
  .page-home .banner { height: 500px !important; }
  .page-home .banner-slide-content h2 { font-size: 46px !important; }
  .premium-value-strip { grid-template-columns: 1fr; }
  .premium-value-item { min-height: 66px; }
}

@media (max-width: 640px) {
  .zw-site-page .container { padding-inline: 15px !important; }
  .page-home .banner-section { padding-top: 14px !important; }
  .page-home .banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 5 / 6 !important;
    border-radius: 18px !important;
  }
  .page-home .banner-media-shell { background: #0d101b; }
  .page-home .banner-media-backdrop {
    display: block;
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    filter: blur(24px) saturate(.82) brightness(.48);
    transform: scale(1.08);
    opacity: .82;
  }
  .page-home .banner-media { z-index: 1; }
  .page-home .banner-media img {
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  .page-home .banner-slide::before { background: linear-gradient(180deg, rgba(5, 6, 12, .06) 0%, rgba(5, 6, 12, .42) 44%, rgba(5, 6, 12, .96) 100%) !important; }
  .page-home .banner-slide.no-text::before { background: linear-gradient(180deg, rgba(5, 6, 12, .01) 0%, rgba(5, 6, 12, .02) 70%, rgba(5, 6, 12, .16) 100%) !important; }
  .page-home .banner-slide-content { left: 0 !important; max-width: none !important; padding: 16px 16px 42px !important; }
  .page-home .banner-slide-content h2 { max-width: 10em; margin-bottom: 7px !important; font-size: clamp(25px, 7.5vw, 31px) !important; }
  .page-home .banner-slide-content p { margin-bottom: 12px; font-size: 12px !important; -webkit-line-clamp: 1 !important; }
  .page-home .banner-btn { min-height: 38px !important; padding: 8px 13px !important; font-size: 12px !important; }
  .page-home .banner-bottom { right: 14px; bottom: 12px; }
  .premium-value-strip { margin-top: 12px; border-radius: 15px; }
  .premium-value-item { padding: 12px 14px; }
  .premium-value-item:nth-child(n+3) { display: none; }
  .page-home .section { padding: 38px 0 !important; }
  .zw-site-page .section-title { font-size: 25px !important; }
  .zw-site-page .games-grid,
  .zw-site-page .accounts-grid { grid-template-columns: 1fr; gap: 16px !important; }
  .zw-site-page .game-card,
  .zw-site-page .account-card { border-radius: 18px !important; }
  .zw-site-page .contact-card { padding: 34px 18px; border-radius: 22px !important; }
  .zw-site-page .form-box { border-radius: 20px !important; }
  .zw-site-page .brand-headline { font-size: 38px; }
  .zw-site-page .auth-wrapper { display: block; min-height: 100dvh; }
  .zw-site-page .brand-panel { min-height: 300px; padding: 24px 20px 28px !important; }
  .zw-site-page .brand-content { width: 100%; padding: 0 !important; }
  .zw-site-page .brand-logo { margin-bottom: 26px; }
  .zw-site-page .brand-headline { margin-bottom: 14px; font-size: 34px; }
  .zw-site-page .brand-desc { margin-bottom: 0; font-size: 13px; line-height: 1.7; }
  .zw-site-page .brand-features { display: none; }
  .zw-site-page .brand-stats { margin-top: 28px; padding-top: 20px; }
  .zw-site-page .brand-stat-num { font-size: 25px; }
  .zw-site-page .form-panel { min-height: auto !important; padding: 22px 15px 42px !important; flex-direction: column; justify-content: flex-start !important; }
  .zw-site-page .form-panel-inner { width: 100%; }
  .zw-site-page .form-panel > .back-home { position: static !important; align-self: flex-start; margin: 0 0 14px !important; }
  .zw-site-page .form-box { width: 100% !important; max-width: 440px; margin-inline: auto; padding: 24px 18px !important; }
  .zw-site-page .info-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .zw-site-page .info-grid > .card { width: 100% !important; }
  .page-home .filter-swipe-hint { display: flex; }
}

.filter-swipe-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin: -10px 0 12px;
  color: #7f8799;
  font-size: 11px;
}
.filter-swipe-hint::before { content: "↔"; color: #c4b5fd; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v6.0 全站视觉精修：提高层级、可读性、交互反馈与跨页面一致性。 */
:root {
  --premium-bg: #080a11;
  --premium-surface: #11141d;
  --premium-surface-2: #171b27;
  --premium-surface-3: #1d2230;
  --premium-line: rgba(255, 255, 255, .085);
  --premium-line-strong: rgba(255, 255, 255, .16);
  --premium-text: #f5f6fa;
  --premium-muted: #9299aa;
  --premium-violet: #8d67f8;
  --premium-violet-2: #b29cff;
  --premium-gold: #f0c766;
  --premium-gold-2: #dfa13b;
  --premium-cyan: #72d5e5;
  --premium-danger: #ff6d7a;
  --premium-success: #51d39b;
  --premium-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --premium-shadow-soft: 0 14px 38px rgba(0, 0, 0, .20);
  --premium-radius-xl: 26px;
  --premium-radius-lg: 18px;
  --premium-radius-md: 12px;
}

body.zw-site-page {
  min-width: 320px;
  background:
    radial-gradient(900px 540px at 4% -8%, rgba(130, 86, 235, .15), transparent 65%),
    radial-gradient(720px 500px at 100% 28%, rgba(41, 171, 192, .065), transparent 67%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    var(--premium-bg) !important;
  background-size: auto, auto, 64px 64px, 64px 64px, auto !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.zw-site-page ::selection { color: #fff; background: rgba(141, 103, 248, .42); }
.zw-site-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(178, 156, 255, .92) !important;
  outline-offset: 3px;
}
.zw-site-page :where(button, .btn, a, .game-card, .account-card, .home-account-card) {
  -webkit-tap-highlight-color: transparent;
}
.zw-site-page :where(button, .btn, .category-tab, .game-btn, .contact-action-btn) {
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.zw-site-page :where(button, .btn, .category-tab, .game-btn, .contact-action-btn):active:not(:disabled) {
  transform: translateY(1px) scale(.985) !important;
}
.zw-site-page :where(button, .btn):disabled { opacity: .48; cursor: not-allowed; filter: saturate(.6); }

.zw-site-page .container { width: min(100%, 1320px); max-width: 1320px; }
.zw-site-page .header {
  height: 74px;
  background: rgba(8, 10, 17, .78) !important;
  box-shadow: 0 10px 38px rgba(0, 0, 0, .16) !important;
}
.zw-site-page .header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(178,156,255,.44), rgba(240,199,102,.35), transparent);
  pointer-events: none;
}
.zw-site-page .header .container { height: 74px; }
.zw-site-page .logo-icon { position: relative; overflow: hidden; }
.zw-site-page .logo-icon::after {
  content: "";
  position: absolute;
  inset: -65% -35%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-65%) rotate(8deg);
  transition: transform .6s ease;
}
.zw-site-page .logo:hover .logo-icon::after { transform: translateX(65%) rotate(8deg); }
.zw-site-page .nav a { letter-spacing: .005em; }
.zw-site-page .nav a::after { display: none !important; }
.zw-site-page .nav a.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.zw-site-page .nav-toggle {
  width: 42px;
  height: 42px;
  border: 1px solid var(--premium-line) !important;
  border-radius: 12px;
  color: #f5f3fb;
  background: rgba(255,255,255,.035) !important;
}

.page-home .banner-section { padding-top: 26px; }
.page-home .banner {
  height: clamp(420px, 41vw, 548px) !important;
  min-height: 420px !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08) !important;
}
.page-home .banner::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.12);
}
.page-home .banner-slide-content h2 { text-wrap: balance; }
.page-home .banner-slide-content p { text-wrap: pretty; }
.page-home .banner-eyebrow { letter-spacing: .10em; text-transform: uppercase; }
.page-home .banner-bottom {
  z-index: 7;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(4,6,11,.42);
  backdrop-filter: blur(12px);
}
.page-home .notice-bar { position: relative; overflow: hidden; }
.page-home .notice-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(var(--premium-gold), var(--premium-violet));
}
.premium-value-item { transition: background-color .2s ease; }
.premium-value-item:hover { background: rgba(20,24,35,.98); }
.premium-value-icon { box-shadow: inset 0 1px rgba(255,255,255,.07); }

.zw-site-page .section-head { align-items: flex-end; }
.zw-site-page .section-title { text-wrap: balance; }
.zw-site-page .section-title .sub { font-weight: 500; }
.zw-site-page .game-toolbar,
.zw-site-page .search-bar {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(17,20,29,.74) !important;
  backdrop-filter: blur(16px);
}
.zw-site-page :where(input, select, textarea)::placeholder { color: #737b8d !important; }
.zw-site-page :where(.search-input, .search-select, .form-input, .form-select, .form-textarea, .input) {
  min-height: 44px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.zw-site-page :where(.search-input, .search-select, .form-input, .form-select, .form-textarea, .input):hover:not(:focus) {
  border-color: rgba(255,255,255,.16) !important;
}
.zw-site-page select option { color: #f2eff9; background: #11141d; }

.zw-site-page .game-card,
.zw-site-page .account-card,
.zw-site-page .home-account-card {
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .28s ease !important;
}
.zw-site-page :where(.game-card, .account-card, .home-account-card)::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 1px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(178,156,255,.52), transparent);
  pointer-events: none;
}
.zw-site-page :where(.game-cover, .account-cover) img { transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
.zw-site-page :where(.game-card, .account-card, .home-account-card):hover :where(.game-cover, .account-cover) img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02);
}
.zw-site-page .game-info,
.zw-site-page .account-body { position: relative; }
.zw-site-page .tag,
.zw-site-page .game-type-tag,
.zw-site-page :where(.meta-tag, .status-badge, .sponsor-badge, .account-status) {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.zw-site-page .game-actions { gap: 9px; }
.zw-site-page .game-btn:hover,
.zw-site-page .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.055); }

.zw-site-page :where(.card, .game-hero, .account-header, .profile-card, .publish-card) {
  position: relative;
  overflow: hidden;
}
.zw-site-page :where(.card, .game-hero, .account-header, .profile-card, .publish-card)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  pointer-events: none;
}
.zw-site-page .card { padding: clamp(18px, 2.5vw, 28px); }
.zw-site-page .card-title { margin-bottom: 20px; }
.zw-site-page .page-title { color: #f7f6fb; font-weight: 850; letter-spacing: -.045em; }
.zw-site-page .page-subtitle { color: var(--premium-muted); }
.zw-site-page .back-btn,
.zw-site-page .back-home {
  border: 1px solid var(--premium-line);
  border-radius: 11px;
  color: #c9c6d3;
  background: rgba(255,255,255,.03);
}
.zw-site-page :where(.back-btn, .back-home):hover { color: #fff; border-color: rgba(178,156,255,.30); background: rgba(141,103,248,.075); }

.zw-site-page .tabs {
  gap: 5px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--premium-line) !important;
  border-radius: 14px;
  background: rgba(255,255,255,.025) !important;
  scrollbar-width: none;
}
.zw-site-page .tabs::-webkit-scrollbar { display: none; }
.zw-site-page .tab {
  min-height: 40px;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 10px !important;
  color: #9ca3b4;
  background: transparent !important;
}
.zw-site-page .tab.active { color: #fff !important; background: rgba(141,103,248,.20) !important; box-shadow: inset 0 0 0 1px rgba(178,156,255,.20); }
.zw-site-page .profile-avatar { border: 1px solid rgba(178,156,255,.22); background: linear-gradient(145deg, rgba(141,103,248,.22), rgba(114,213,229,.08)) !important; }
.zw-site-page .profile-name { letter-spacing: -.025em; }

.zw-site-page :where(.upload-area, .image-preview, .img-uploader) {
  border-color: rgba(178,156,255,.28) !important;
  border-radius: 14px !important;
  background: rgba(141,103,248,.035) !important;
}
.zw-site-page .upload-area:hover { border-color: rgba(178,156,255,.56) !important; background: rgba(141,103,248,.075) !important; }
.zw-site-page .form-label,
.zw-site-page .label { color: #c2c5d0 !important; font-weight: 650; }
.zw-site-page .form-hint { color: #7f8799; }
.zw-site-page .req { color: #ff8a95; }

.zw-site-page :where(.modal-overlay, .sponsor-modal) { backdrop-filter: blur(10px); background: rgba(2,3,7,.72) !important; }
.zw-site-page :where(.modal-box, .sponsor-modal-box) {
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 20px !important;
  background: linear-gradient(155deg, #181c28, #0e1119) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.52) !important;
}
.zw-site-page .toast {
  max-width: min(420px, calc(100vw - 28px));
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 12px !important;
  color: #f8f7fb !important;
  background: rgba(20,23,33,.94) !important;
  box-shadow: 0 18px 58px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(16px);
}
.zw-site-page :where(.empty, .loading) {
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 16px;
  color: var(--premium-muted);
  background: rgba(255,255,255,.018);
}

.zw-site-page .contact-card h2 { letter-spacing: -.04em; text-wrap: balance; }
.zw-site-page .footer { color: #7f8799; }
.zw-site-page .footer a { color: #a6adbd; }
.zw-site-page .footer a:hover { color: #fff; }
.zw-site-page .zw-backtop {
  width: 44px;
  height: 44px;
  right: 22px;
  bottom: 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(24,28,40,.88);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
}
.zw-site-page .zw-backtop::before { content: "↑"; color: #fff; font-size: 18px; }

/* 登录/注册页继续沿用同一品牌语言，同时减少空旷感。 */
.zw-site-page .auth-wrapper { min-height: 100dvh; }
.zw-site-page .brand-panel { position: relative; overflow: hidden; }
.zw-site-page .brand-panel::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -160px;
  bottom: -190px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255,255,255,.018), 0 0 0 104px rgba(255,255,255,.012);
}
.zw-site-page .brand-feature { border-radius: 14px; transition: background-color .2s ease; }
.zw-site-page .brand-feature:hover { background: rgba(255,255,255,.03); }
.zw-site-page .form-box { box-shadow: 0 28px 90px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04) !important; }
.zw-site-page .input-wrap { border-radius: 12px; }
.zw-site-page .input-wrap:focus-within { box-shadow: 0 0 0 4px rgba(141,103,248,.11); }
.zw-site-page .security-tip { border-radius: 12px; background: rgba(81,211,155,.055); }

@media (max-width: 968px) {
  .zw-site-page .header,
  .zw-site-page .header .container { height: 66px; }
  .zw-site-page .nav.show { right: 14px; left: 14px; padding: 10px !important; }
  .zw-site-page .nav.show a { width: 100%; justify-content: flex-start; }
  .page-home .banner { height: 470px !important; min-height: 0 !important; }
  .zw-site-page .detail-grid { gap: 16px !important; }
}

@media (max-width: 640px) {
  body.zw-site-page { background-size: auto, auto, 44px 44px, 44px 44px, auto !important; }
  .zw-site-page .header .container { padding-inline: 12px !important; }
  .zw-site-page .logo { font-size: 17px; }
  .zw-site-page .logo-icon { width: 38px; height: 38px; border-radius: 11px; }
  .page-home .banner { height: auto !important; aspect-ratio: 5 / 6 !important; }
  .page-home .banner-bottom { padding: 5px 8px; }
  .zw-site-page .section-head { align-items: flex-start; gap: 14px; }
  .zw-site-page .category-tabs { width: calc(100vw - 30px); padding-bottom: 3px; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .zw-site-page .category-tabs::-webkit-scrollbar { display: none; }
  .zw-site-page .category-tab { flex: 0 0 auto; }
  .zw-site-page .game-toolbar,
  .zw-site-page .search-bar { padding: 8px; border-radius: 14px; }
  .zw-site-page :where(.card, .game-hero, .account-header, .profile-card, .publish-card) { border-radius: 16px !important; }
  .zw-site-page .card { padding: 18px 15px; }
  .zw-site-page .profile-card { padding: 18px !important; }
  .zw-site-page .tabs { border-radius: 12px; }
  .zw-site-page :where(input, select, textarea, .input, .form-input, .form-select) { font-size: 16px !important; }
  .zw-site-page .zw-backtop { right: 14px; bottom: 78px; }
}