/* ========================================================================== 
   三款重点套餐视觉主题
   基础卡片布局仍在 style.css；这里只维护配色、强调样式和“可开通”状态动画。
   ========================================================================== */

/* 共同结构：平整的双色表面、细顶部色带，不使用右上角光圈或光晕。 */
:is(.plan-max, .plan-vip1, .plan-luxury2) {
  --plan-accent: var(--primary);
  --plan-accent-2: var(--primary-strong);
  --plan-surface-start: color-mix(in srgb, var(--plan-accent) 8%, var(--surface));
  --plan-surface-middle: var(--surface);
  --plan-surface-end: color-mix(in srgb, var(--plan-accent-2) 3%, var(--surface));
  --plan-neutral-shadow: rgba(15, 23, 42, .11);
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--plan-accent) 45%, var(--line));
  background: linear-gradient(145deg, var(--plan-surface-start) 0%, var(--plan-surface-middle) 56%, var(--plan-surface-end) 100%);
  box-shadow: 0 18px 42px var(--plan-neutral-shadow);
}

:is(.plan-max, .plan-vip1, .plan-luxury2)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--plan-accent), var(--plan-accent-2));
}

:is(.plan-max, .plan-vip1, .plan-luxury2)::after { content: none; }

:is(.plan-max, .plan-vip1, .plan-luxury2) > .inner {
  position: relative;
  z-index: 1;
}

:is(.plan-max, .plan-vip1, .plan-luxury2):hover {
  border-color: color-mix(in srgb, var(--plan-accent) 62%, var(--line));
  box-shadow: 0 22px 48px color-mix(in srgb, var(--plan-neutral-shadow) 92%, transparent);
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .plan-icon {
  border-color: color-mix(in srgb, var(--plan-accent) 28%, var(--line));
  color: var(--plan-accent);
  background: color-mix(in srgb, var(--plan-accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plan-accent) 5%, transparent);
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .plan-code {
  color: color-mix(in srgb, var(--plan-accent) 76%, var(--muted));
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .plan-spec-grid {
  border-color: color-mix(in srgb, var(--plan-accent) 16%, var(--line));
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .badge-featured {
  border-color: color-mix(in srgb, var(--plan-accent) 25%, transparent);
  color: #fff;
  background: linear-gradient(110deg, var(--plan-accent), var(--plan-accent-2));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--plan-accent) 15%, transparent);
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .buy-btn {
  border-color: var(--plan-accent);
  color: #fff;
  background: linear-gradient(110deg, var(--plan-accent), var(--plan-accent-2));
  box-shadow: 0 11px 24px color-mix(in srgb, var(--plan-accent) 21%, transparent);
}

:is(.plan-max, .plan-vip1, .plan-luxury2) .buy-btn:hover {
  border-color: var(--plan-accent-2);
  background: linear-gradient(110deg, var(--plan-accent-2), var(--plan-accent));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--plan-accent) 24%, transparent);
}

/* 配色恢复为用户原始文件中的蓝 / 紫 / 橙方案；仅取消原有右上角放射光晕。 */

/* 进阶版：原始高亮蓝。 */
.plan-max {
  --primary: #1769ff;
  --primary-strong: #0b52cc;
  --primary-soft: #eaf2ff;
  --plan-accent: #1769ff;
  --plan-accent-2: #0b52cc;
  --plan-surface-start: color-mix(in srgb, #eaf2ff 76%, var(--surface));
  --plan-surface-middle: var(--surface);
  --plan-surface-end: color-mix(in srgb, #eaf2ff 42%, var(--surface));
}

/* 长期高速版：原始紫色。 */
.plan-vip1 {
  --primary: #7c3aed;
  --primary-strong: #6424c7;
  --primary-soft: #f2ebff;
  --plan-accent: #7c3aed;
  --plan-accent-2: #6424c7;
  --plan-surface-start: color-mix(in srgb, #f2ebff 76%, var(--surface));
  --plan-surface-middle: var(--surface);
  --plan-surface-end: color-mix(in srgb, #f2ebff 42%, var(--surface));
}

/* 长期尊享版：原始橙色。 */
.plan-luxury2 {
  --primary: #f06b16;
  --primary-strong: #d65300;
  --primary-soft: #fff0e5;
  --plan-accent: #f06b16;
  --plan-accent-2: #d65300;
  --plan-surface-start: color-mix(in srgb, #fff0e5 76%, var(--surface));
  --plan-surface-middle: var(--surface);
  --plan-surface-end: color-mix(in srgb, #fff0e5 42%, var(--surface));
}

html[data-theme="dark"] .plan-max {
  --primary: #4388ff;
  --primary-strong: #2d70e8;
  --primary-soft: rgba(45, 112, 232, .18);
  --plan-accent: #4388ff;
  --plan-accent-2: #2d70e8;
  --plan-surface-start: #10294c;
  --plan-surface-middle: #0e1b2d;
  --plan-surface-end: #0c1625;
}

html[data-theme="dark"] .plan-vip1 {
  --primary: #9867ff;
  --primary-strong: #7e49e8;
  --primary-soft: rgba(126, 73, 232, .18);
  --plan-accent: #9867ff;
  --plan-accent-2: #7e49e8;
  --plan-surface-start: #281a49;
  --plan-surface-middle: #181528;
  --plan-surface-end: #101522;
}

html[data-theme="dark"] .plan-luxury2 {
  --primary: #ff812e;
  --primary-strong: #e76511;
  --primary-soft: rgba(231, 101, 17, .18);
  --plan-accent: #ff812e;
  --plan-accent-2: #e76511;
  --plan-surface-start: #402310;
  --plan-surface-middle: #241911;
  --plan-surface-end: #111721;
}

html[data-theme="dark"] :is(.plan-max, .plan-vip1, .plan-luxury2) {
  --plan-neutral-shadow: rgba(0, 0, 0, .30);
  border-color: color-mix(in srgb, var(--plan-accent) 58%, var(--line));
  background: linear-gradient(145deg, var(--plan-surface-start) 0%, var(--plan-surface-middle) 52%, var(--plan-surface-end) 100%);
  box-shadow: 0 22px 50px var(--plan-neutral-shadow);
}

html[data-theme="dark"] :is(.plan-max, .plan-vip1, .plan-luxury2):hover {
  border-color: color-mix(in srgb, var(--plan-accent) 70%, var(--line));
  box-shadow: 0 26px 56px rgba(0, 0, 0, .36);
}

/* “可开通”只让状态标记呼吸，不移动文字与卡片。 */
.plan-status {
  --plan-status-color: var(--success);
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--plan-status-color) 0%, transparent);
  animation: plan-status-breathe 3.2s ease-in-out infinite;
}

.plan-status-special { --plan-status-color: var(--danger); }

.plan-status i {
  position: relative;
  background: var(--plan-status-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-status-color) 14%, transparent);
}

.plan-status i::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid color-mix(in srgb, var(--plan-status-color) 52%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.55);
  animation: plan-status-radar 2.4s ease-out infinite;
}

.plan:nth-child(2n) .plan-status,
.plan:nth-child(2n) .plan-status i::after { animation-delay: -.8s; }
.plan:nth-child(3n) .plan-status,
.plan:nth-child(3n) .plan-status i::after { animation-delay: -1.45s; }

@keyframes plan-status-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--plan-status-color) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--plan-status-color) 9%, transparent), 0 0 18px color-mix(in srgb, var(--plan-status-color) 14%, transparent); }
}

@keyframes plan-status-radar {
  0% { opacity: .72; transform: scale(.55); }
  72%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .plan-status,
  .plan-status i::after { animation: none !important; }
}