body.pc-app[data-page=vip] .workspace {
  background: linear-gradient(115deg, var(--hero-blue), var(--white) 55%, var(--hero-violet));
}
body[data-page=vip] .page-container {
  padding-top: var(--section-space);
}
.membership-heading { text-align: left; margin-bottom: calc(var(--space-xxl) * 1.5); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
.membership-heading h1 { margin-bottom: var(--space-md); }
.membership-heading p { color: var(--muted); margin: var(--space-md) 0 0; font-size: var(--font-lg); }
.membership-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 0 var(--space-xxl); padding: var(--space-xs); gap: var(--space-sm); background: var(--white); border-radius: var(--radius-btn); }
.membership-tab { padding: var(--space-md) var(--space-xxl); border-radius: var(--radius-btn); font-size: var(--font-lg); text-align: center; color: var(--text); white-space: nowrap; }
.membership-tab[aria-selected=true] { color: var(--white); background: var(--primary); }
.membership-tab:not([aria-selected=true]):hover { color: var(--primary); background: var(--primary-light); }
body[data-page=vip] .package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
body[data-page=vip] .membership-package { position: relative; min-width: 0; padding: var(--space-xxl); border: thin solid transparent; border-radius: var(--radius-xl); background: var(--white); box-shadow: none; gap: var(--space-lg); }
body[data-page=vip] .membership-package--recommended { border-color: var(--primary); }
.membership-package .badge { position: absolute; top: 0; right: var(--space-xl); padding: var(--space-xs) var(--space-md); color: var(--white); background: var(--primary); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
body[data-page=vip] .membership-package h2 { margin: var(--space-md) 0 0; font-size: var(--font-xl); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.membership-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-md); }
.membership-price .price { font-size: calc(var(--font-xxl) * 1.5); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.membership-price small { font-size: var(--font-xl); }
.membership-price del { font-size: var(--font-base); }
.membership-benefits { flex: 1; padding-top: var(--space-lg); border-top: thin solid var(--border); }
.membership-benefits p { margin: 0 0 var(--space-sm); }
.membership-benefits .muted { font-size: var(--font-base); }
body[data-page=vip] .membership-package .button { width: 100%; margin-top: var(--space-md); border-radius: var(--radius-btn); background: var(--primary-light); color: var(--primary); box-shadow: none; }
body[data-page=vip] .membership-package--recommended .button,
body[data-page=vip] .membership-package .button:not(:disabled):hover { color: var(--white); background: var(--primary); }
body[data-page=vip] .membership-package .button:disabled { cursor: not-allowed; }
body[data-page=vip] [role=tabpanel] .notice { border-radius: var(--radius-md); margin-bottom: var(--space-xl); }
body[data-page=vip] [role=tabpanel] .empty { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-xxl); }
.membership-tab:focus-visible { outline: solid var(--primary); outline-offset: var(--space-xs); }
.membership-notice { display: flex; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-xl); padding: var(--space-lg) var(--space-xxl); border-radius: var(--radius-lg); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gold%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22translate(-0.001%2C%200.51)%22%3E%3Cstop%20stop-color%3D%22%23f2c399%22%20stop-opacity%3D%221%22%20offset%3D%220.04%22%2F%3E%3Cstop%20stop-color%3D%22%23fde4ce%22%20stop-opacity%3D%221%22%20offset%3D%220.5%22%2F%3E%3Cstop%20stop-color%3D%22%23f2c399%22%20stop-opacity%3D%221%22%20offset%3D%220.93%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23gold)%22%2F%3E%3C%2Fsvg%3E"); background-size: 100% 100%; }
.membership-notice-art { width: calc(var(--space-xxl) * 3); height: calc(var(--space-xxl) * 3); flex-shrink: 0; object-fit: contain; }
.membership-notice-content { flex: 1; min-width: 0; }
.membership-notice h2 { margin: 0 0 var(--space-sm); font-size: var(--font-lg); color: var(--text); }
.membership-notice p { margin: 0; color: var(--text); font-size: var(--font-base); }
.membership-notice .button { flex-shrink: 0; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-btn); background: var(--text); color: var(--white); box-shadow: none; }
.membership-notice .button:hover { background: var(--text); opacity: .9; }
.membership-notice .button svg { width: var(--font-md); height: var(--font-md); }
@media (max-width: 600px) {
  .membership-notice { flex-wrap: wrap; gap: var(--space-md); padding: var(--space-lg); }
  .membership-notice-art { width: calc(var(--space-xxl) * 2); height: calc(var(--space-xxl) * 2); }
  .membership-notice h2 { font-size: var(--font-md); }
  .membership-notice .button { width: 100%; }
}
@media (max-width: 900px) {
  body[data-page=vip] .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .membership-heading { margin-bottom: var(--space-xxl); }
}
@media (max-width: 600px) {
  body[data-page=vip] .page-container { padding: var(--space-xxl) var(--page-gutter); }
  .membership-heading p { font-size: var(--font-base); }
  .membership-tabs { width: 100%; }
  .membership-tab { flex: 1; padding: var(--space-md); font-size: var(--font-base); }
  body[data-page=vip] .package-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page=vip] .membership-package { padding: var(--space-xl); }
}