/* Shared VIP surface for read-only and lightweight pages. */
body.vip-member-active {
  --vip-gold: #a66a00;
  --vip-gold-text: color-mix(in srgb, var(--vip-gold) 46%, var(--ink));
  --vip-gold-border: color-mix(in srgb, var(--vip-gold) 28%, var(--line));
  --vip-gold-surface: color-mix(in srgb, var(--vip-gold) 3%, var(--panel));
  --vip-gold-hover-text: color-mix(in srgb, var(--vip-gold) 64%, var(--ink));
  --vip-gold-hover-border: color-mix(in srgb, var(--vip-gold) 52%, var(--line));
}

html[data-theme="dark"] body.vip-member-active,
body.theme-dark.vip-member-active {
  --vip-gold: #e5ad50;
}

body.vip-member-active main,
body.vip-member-active .request-area,
body.vip-member-active .pick,
body.vip-member-active .auth-panel,
body.vip-member-active .snapshot {
  border-color: var(--vip-gold-border);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--vip-gold) 3%, var(--shadow));
}

body.vip-member-active .back,
body.vip-member-active .home,
body.vip-member-active .refresh,
body.vip-member-active .market,
body.vip-member-active .review-tab,
body.vip-member-active .export,
body.vip-member-active .btn:not(.primary),
body.vip-member-active .theme-toggle,
body.vip-member-active .unlock,
body.vip-member-active .scope-chip:not(.scope-direct):not(.scope-cross):not(.scope-global) {
  border-color: var(--vip-gold-border);
  background: var(--vip-gold-surface);
  color: var(--vip-gold-text);
}

body.vip-member-active a:not(.scope-direct):not(.scope-cross):not(.scope-global),
body.vip-member-active .detail-link,
body.vip-member-active .version {
  color: var(--vip-gold-text);
  border-color: var(--vip-gold-border);
}

body.vip-member-active .back:hover,
body.vip-member-active .back:focus-visible,
body.vip-member-active .home:hover,
body.vip-member-active .home:focus-visible,
body.vip-member-active .refresh:hover,
body.vip-member-active .refresh:focus-visible,
body.vip-member-active .market:hover,
body.vip-member-active .market:focus-visible,
body.vip-member-active .review-tab:hover,
body.vip-member-active .review-tab:focus-visible,
body.vip-member-active .export:hover,
body.vip-member-active .export:focus-visible,
body.vip-member-active .btn:not(.primary):hover,
body.vip-member-active .btn:not(.primary):focus-visible,
body.vip-member-active .theme-toggle:hover,
body.vip-member-active .theme-toggle:focus-visible,
body.vip-member-active .unlock:hover,
body.vip-member-active .unlock:focus-visible,
body.vip-member-active a:not(.scope-direct):not(.scope-cross):not(.scope-global):hover,
body.vip-member-active a:not(.scope-direct):not(.scope-cross):not(.scope-global):focus-visible {
  border-color: var(--vip-gold-hover-border);
  color: var(--vip-gold-hover-text);
}

body.vip-member-active .request-actions > button,
body.vip-member-active #verifyCode,
body.vip-member-active .btn.primary {
  border-color: var(--vip-gold);
  background: var(--vip-gold);
  color: #fff;
}

body.vip-member-active .request-area.is-loading {
  border-color: var(--vip-gold-hover-border);
  animation-name: vipPanelBreath;
}

body.vip-member-active textarea:focus {
  border-color: var(--vip-gold-hover-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vip-gold) 18%, transparent);
}

body.vip-member-active .reason-list li::before {
  background: var(--vip-gold-text);
}

body.vip-member-active .review-tab.active {
  border-color: var(--vip-gold-hover-border);
  background: var(--vip-gold-surface);
  color: var(--ink);
}

@keyframes vipPanelBreath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vip-gold) 5%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--vip-gold) 12%, transparent); }
}