/* style-fix.css
 * 用法：把这个文件放在原 style.css 后面引入：
 * <link rel="stylesheet" href="./style.css">
 * <link rel="stylesheet" href="./style-fix.css">
 *
 * 作用：
 * 1) 修正移动端顶栏按钮样式作用域
 * 2) 统一板块垂直间距
 * 3) 固化套餐页顶部三块说明的最终版样式
 * 4) 修正 section-head 在窄屏下不换行
 * 5) 增强 Max / 不限时 / VIP1 在日夜间模式下的识别度
 * 6) 给主要板块补统一背景质感
 */

/* ===== 1. 修正移动端顶栏作用域 ===== */
@media (max-width: 768px) {
  .appbar .actions .pill {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 999px;
  }

  .appbar .actions .icon-btn,
  #tutorialPill {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  #tutorialPill {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .appbar .actions .icon-btn .ic {
    width: 18px;
    height: 18px;
  }
}

/* 桌面端回到原本尺寸，避免被移动端尺寸污染 */
@media (min-width: 769px) {
  .appbar .actions .icon-btn,
  #tutorialPill {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .appbar .actions .icon-btn .ic {
    width: 22px;
    height: 22px;
  }
}

/* ===== 2. section-head 恢复可换行 ===== */
.section-head {
  flex-wrap: wrap;
}

/* ===== 3. 全站一级 / 二级板块间距统一 ===== */
#panel-home > .card,
#panel-home > .zone-two,
#panel-plans > .card,
#panel-redeem > .card,
#panel-faq > .card,
#panel-contact > .card,
#panel-tutorial > .card {
  margin-top: 12px;
}

#panel-home > .card:first-child,
#panel-home > .zone-two:first-child,
#panel-plans > .card:first-child,
#panel-redeem > .card:first-child,
#panel-faq > .card:first-child,
#panel-contact > .card:first-child,
#panel-tutorial > .card:first-child {
  margin-top: 0;
}

.plan-group-head,
.plan-bottom-note,
.notice-group,
.plan-scene-card,
.plans-grid,
.faq-preview-grid,
.starter-grid,
.scene-strip,
.stack,
.zone-two {
  margin-top: 12px;
}

/* 清掉原先那组 16px 节奏，避免互相打架 */
.panel > .card + .card,
.panel > .plan-scene-card + .plan-group-head,
.panel .inner > .plan-group-head,
.panel .inner > .plans-grid,
.panel .inner > .plan-bottom-note,
.panel .inner > .notice-group,
.panel .inner > .faq-preview-grid,
.panel .inner > .starter-grid,
.panel .inner > .scene-strip,
.panel .inner > .stack,
.panel .inner > .zone-two {
  margin-top: 12px;
}

/* ===== 4. 套餐页顶部三块说明：只保留一套最终版 ===== */
.plan-scene-card {
  margin-top: 12px;
  margin-bottom: 12px;
}

.plan-scene-card .inner {
  padding: 14px;
}

.plan-scene-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.plan-scene-item {
  padding: 16px 18px;
  border-radius: 16px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--surface) 97%, white 3%),
      color-mix(in oklab, var(--surface) 92%, var(--primary) 4%)
    );
  border: 1px solid color-mix(in oklab, var(--glass-stroke) 88%, var(--primary) 12%);
  box-shadow: 0 8px 18px -18px rgba(15, 23, 42, .16);
}

.plan-scene-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--fg);
}

.plan-scene-item span {
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}

@media (min-width: 900px) {
  .plan-scene-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

[data-theme="dark"] .plan-scene-item {
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(30,41,59,.82)),
    linear-gradient(135deg, rgba(99,102,241,.10), rgba(56,189,248,.06));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 10px 20px -18px rgba(2, 6, 23, .45);
}

/* ===== 5. 重点套餐卡增强：Max / 不限时 / VIP1 ===== */
/* HTML 需要对应加类：
 * Max      => class="card plan plan-featured plan-max"
 * 不限时    => class="card plan plan-featured plan-forever"
 * VIP 1    => class="card plan plan-featured plan-vip1"
 */

.plan-max,
.plan-forever,
.plan-vip1 {
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--anim),
    box-shadow var(--anim),
    background var(--anim),
    transform var(--anim);
}

.plan-max::before,
.plan-forever::before,
.plan-vip1::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .95;
  background: radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 36%);
}

/* Max：提高白天/夜间对比度 */
.plan-max {
  border: 1px solid rgba(67, 56, 202, .58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.995), rgba(232,238,255,.995)),
    linear-gradient(135deg, rgba(79,70,229,.18), rgba(37,99,235,.14));
  box-shadow:
    0 20px 40px -24px rgba(67, 56, 202, .34),
    0 12px 28px -18px rgba(37, 99, 235, .20);
}

.plan-max .plan-title { color: #312e81; }
.plan-max .badge {
  border-color: rgba(67, 56, 202, .24);
  background: rgba(79, 70, 229, .10);
  color: #4338ca;
}
.plan-max .plan-note {
  border-color: rgba(67, 56, 202, .26);
  background: rgba(79, 70, 229, .06);
}

/* 不限时 */
.plan-forever {
  border: 1px solid rgba(3, 105, 161, .54);
  background:
    linear-gradient(180deg, rgba(255,255,255,.995), rgba(236,248,255,.995)),
    linear-gradient(135deg, rgba(14,165,233,.14), rgba(6,182,212,.10));
  box-shadow:
    0 20px 40px -24px rgba(3, 105, 161, .28),
    0 12px 28px -18px rgba(8, 145, 178, .18);
}

.plan-forever .plan-title { color: #0c4a6e; }
.plan-forever .badge {
  border-color: rgba(3, 105, 161, .22);
  background: rgba(2, 132, 199, .08);
  color: #0369a1;
}
.plan-forever .plan-note {
  border-color: rgba(3, 105, 161, .24);
  background: rgba(2, 132, 199, .05);
}

/* VIP1 */
.plan-vip1 {
  border: 1px solid rgba(126, 34, 206, .48);
  background:
    linear-gradient(180deg, rgba(255,255,255,.995), rgba(249,242,255,.995)),
    linear-gradient(135deg, rgba(168,85,247,.14), rgba(236,72,153,.08));
  box-shadow:
    0 20px 40px -24px rgba(126, 34, 206, .26),
    0 12px 28px -18px rgba(168, 85, 247, .18);
}

.plan-vip1 .plan-title { color: #6b21a8; }
.plan-vip1 .badge {
  border-color: rgba(126, 34, 206, .22);
  background: rgba(147, 51, 234, .08);
  color: #7e22ce;
}
.plan-vip1 .plan-note {
  border-color: rgba(126, 34, 206, .24);
  background: rgba(147, 51, 234, .05);
}

@media (hover:hover) {
  .plan-max:hover,
  .plan-forever:hover,
  .plan-vip1:hover {
    transform: translateY(-3px);
  }
}

[data-theme="dark"] .plan-max {
  border-color: rgba(165, 180, 252, .72);
  background:
    linear-gradient(180deg, rgba(17,24,39,.98), rgba(30,41,59,.96)),
    linear-gradient(135deg, rgba(99,102,241,.30), rgba(37,99,235,.20));
  box-shadow:
    0 22px 44px -28px rgba(99, 102, 241, .46),
    0 12px 28px -20px rgba(37, 99, 235, .24);
}

[data-theme="dark"] .plan-forever {
  border-color: rgba(103, 232, 249, .64);
  background:
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(20,31,48,.96)),
    linear-gradient(135deg, rgba(14,165,233,.24), rgba(6,182,212,.18));
  box-shadow:
    0 22px 44px -28px rgba(56, 189, 248, .40),
    0 12px 28px -20px rgba(6, 182, 212, .22);
}

[data-theme="dark"] .plan-vip1 {
  border-color: rgba(216, 180, 254, .60);
  background:
    linear-gradient(180deg, rgba(17,24,39,.98), rgba(39,24,56,.96)),
    linear-gradient(135deg, rgba(168,85,247,.22), rgba(236,72,153,.14));
  box-shadow:
    0 22px 44px -28px rgba(168, 85, 247, .38),
    0 12px 28px -20px rgba(236, 72, 153, .18);
}

[data-theme="dark"] .plan-max .plan-title { color: #e0e7ff; }
[data-theme="dark"] .plan-forever .plan-title { color: #cffafe; }
[data-theme="dark"] .plan-vip1 .plan-title { color: #f3e8ff; }

[data-theme="dark"] .plan-max .badge {
  border-color: rgba(165, 180, 252, .38);
  background: rgba(129, 140, 248, .16);
  color: #dbeafe;
}
[data-theme="dark"] .plan-forever .badge {
  border-color: rgba(103, 232, 249, .34);
  background: rgba(56, 189, 248, .14);
  color: #cffafe;
}
[data-theme="dark"] .plan-vip1 .badge {
  border-color: rgba(216, 180, 254, .34);
  background: rgba(168, 85, 247, .16);
  color: #f3e8ff;
}

[data-theme="dark"] .plan-max .plan-note {
  border-color: rgba(165, 180, 252, .30);
  background: rgba(129, 140, 248, .08);
}
[data-theme="dark"] .plan-forever .plan-note {
  border-color: rgba(103, 232, 249, .28);
  background: rgba(56, 189, 248, .08);
}
[data-theme="dark"] .plan-vip1 .plan-note {
  border-color: rgba(216, 180, 254, .26);
  background: rgba(168, 85, 247, .10);
}

/* ===== 6. 全站主板块统一背景质感 ===== */
#panel-home > .card,
#panel-plans > .card,
#panel-redeem > .card,
#panel-faq > .card,
#panel-contact > .card,
#panel-tutorial > .card,
#panel-home .zone-two > .card,
#panel-home .zone-two .stack > .card,
#panel-home .starter-card,
#panel-home .scene-card,
#panel-home .faq-preview-card {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--surface) 98%, white 2%),
      color-mix(in oklab, var(--surface) 92%, var(--primary) 3%)
    );
  border: 1px solid color-mix(in oklab, var(--glass-stroke) 92%, var(--primary) 8%);
  box-shadow:
    0 12px 28px -20px rgba(15, 23, 42, .16),
    0 2px 8px -6px rgba(15, 23, 42, .08);
}

#panel-home .scene-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.96)),
    linear-gradient(135deg, rgba(99,102,241,.06), rgba(56,189,248,.04));
}

#panel-home .starter-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,250,251,.97)),
    linear-gradient(135deg, rgba(99,102,241,.05), rgba(168,85,247,.04));
}

#panel-home .faq-preview-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.97)),
    linear-gradient(135deg, rgba(14,165,233,.05), rgba(99,102,241,.04));
}

#panel-plans > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.97)),
    linear-gradient(135deg, rgba(99,102,241,.04), rgba(14,165,233,.03));
}

#panel-redeem > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,250,255,.97)),
    linear-gradient(135deg, rgba(99,102,241,.06), rgba(168,85,247,.04));
}

#panel-faq > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.97)),
    linear-gradient(135deg, rgba(14,165,233,.05), rgba(99,102,241,.04));
}

#panel-contact > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,250,251,.97)),
    linear-gradient(135deg, rgba(34,197,94,.04), rgba(14,165,233,.04));
}

#panel-tutorial > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.97)),
    linear-gradient(135deg, rgba(99,102,241,.05), rgba(56,189,248,.04));
}

#panel-home .scene-item,
#panel-home .starter-item,
.notice-item {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--surface) 97%, white 3%),
      color-mix(in oklab, var(--surface) 92%, var(--primary) 4%)
    );
  border: 1px solid color-mix(in oklab, var(--glass-stroke) 88%, var(--primary) 12%);
  box-shadow: 0 8px 18px -18px rgba(15, 23, 42, .16);
}

[data-theme="dark"] #panel-home > .card,
[data-theme="dark"] #panel-plans > .card,
[data-theme="dark"] #panel-redeem > .card,
[data-theme="dark"] #panel-faq > .card,
[data-theme="dark"] #panel-contact > .card,
[data-theme="dark"] #panel-tutorial > .card,
[data-theme="dark"] #panel-home .zone-two > .card,
[data-theme="dark"] #panel-home .zone-two .stack > .card,
[data-theme="dark"] #panel-home .starter-card,
[data-theme="dark"] #panel-home .scene-card,
[data-theme="dark"] #panel-home .faq-preview-card {
  background:
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.90)),
    linear-gradient(135deg, rgba(99,102,241,.08), rgba(56,189,248,.05));
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow:
    0 16px 32px -24px rgba(2, 6, 23, .55),
    0 4px 12px -10px rgba(99, 102, 241, .12);
}

[data-theme="dark"] #panel-home .scene-item,
[data-theme="dark"] #panel-home .starter-item,
[data-theme="dark"] .notice-item {
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(30,41,59,.82)),
    linear-gradient(135deg, rgba(99,102,241,.10), rgba(56,189,248,.06));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 10px 20px -18px rgba(2, 6, 23, .45);
}