/* ══ 套餐与权益（我的 → 套餐与权益）════════════════════════════════════════
   入口在「我的」（管理员组），机构端只读。
   2026-09-27 按《新芽迹｜套餐与订阅页面 UI/UX 完整优化规范》重做：
   旧版把「学员/校区/教师/报告/AI/报告导出/品牌定制」混成一排小蓝标签（后台配置感），
   新版拆成两个**独立分组** —— ① 资源额度（数额类，浅蓝网格）② 功能权益（有/无，✓ 绿 / — 灰）。
   配色（规范给定）：Brand #4D82F7 / Purple #6B5CF6 / 主文字 #111827 / 次 #7783A2 / 三 #9BA4BA
   / 页底 #F8FAFF / 浅蓝 #EDF5FF / 浅紫 #F3F1FF / 成功 #27B67C / 禁用 #C6CEDC / 描边 #E7EBF3。
   ⚠️ 渐变只允许出现在三处：试用 CTA、推荐档 CTA、推荐 Badge。其余一律实色。
   阴影统一低透明度（3%–7%）、大模糊半径（18–28px），避免"卡片发黑"。 */
.main:has(.pricing-page){max-width:1840px}
.pricing-page{display:grid;gap:20px;width:100%;max-width:none;margin:0 auto;padding:4px 0 8px}

/* ── Header：标题 + 副标题 + 右上角氛围插画（书本嫩芽只在这里出现，不进套餐卡）── */
.pricing-head{position:relative;padding:2px 0 6px}
.pricing-back{display:grid;place-items:center;width:36px;height:36px;margin:0 0 8px;padding:0;border:1px solid #E7EBF3;border-radius:50%;background:#fff;color:#111827;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.pricing-back:hover{background:#F8FAFF;border-color:#D6DDF0}
.pricing-title{margin:0;color:#111827;font-size:22px;font-weight:800;letter-spacing:-.01em}
.pricing-sub{margin:6px 0 0;color:#7783A2;font-size:13px}
.pricing-art{position:absolute;top:0;right:0;width:108px;height:84px;opacity:.82;pointer-events:none;user-select:none}
@media (max-width:560px){.pricing-art{width:84px;height:66px;opacity:.7}}

/* ── 骨架 / 错误 ── */
.pricing-skeleton{display:grid;gap:12px}
.pricing-skeleton span{display:block;height:132px;border-radius:16px;background:linear-gradient(90deg,#F1F4FA 25%,#E7ECF6 37%,#F1F4FA 63%);background-size:400% 100%;animation:pricing-shimmer 1.3s ease infinite}
@keyframes pricing-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.pricing-error{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #F6DADA;border-radius:14px;background:#FFF5F5;color:#B4403F;font-size:13px}
.pricing-error button{flex:0 0 auto;padding:7px 12px;border:1px solid #E7B9B9;border-radius:9px;background:#fff;color:#B4403F;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}

/* ── 免费试用卡（CTA 允许渐变，是全页唯一的"促销"入口）── */
.pricing-trial{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid #E7EBF3;border-radius:16px;background:#F8FAFF;box-shadow:0 6px 22px rgba(24,45,90,.04)}
.pricing-trial-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F3F1FF;color:#6B5CF6}
.pricing-trial-copy{min-width:0}
.pricing-trial-title{margin:0;color:#111827;font-size:15px;font-weight:750}
.pricing-trial-title em{color:#6B5CF6;font-style:normal}
.pricing-trial-line{margin:3px 0 0;color:#7783A2;font-size:12.5px;line-height:1.6}
.pricing-trial-cta{justify-self:end}
.pricing-trial-state{display:inline-block;padding:6px 12px;border-radius:999px;background:#EDF5FF;color:#4D82F7;font-size:12.5px;font-weight:700;white-space:nowrap}

/* ── 套餐区 ── */
.pricing-section-title{margin:4px 0 0;color:#111827;font-size:15px;font-weight:750}
.pricing-plans{display:grid;gap:20px}
.pricing-plans>.pricing-section-title{grid-column:1/-1}
.pricing-plans{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.pricing-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.main:has(.pricing-page){max-width:none}.pricing-plans{grid-template-columns:1fr}}

.pricing-card{position:relative;display:flex;min-width:0;height:100%;box-sizing:border-box;flex-direction:column;padding:24px;border:1px solid #E7EBF3;border-radius:16px;background:#fff;box-shadow:0 6px 22px rgba(24,45,90,.05)}
.pricing-card.is-recommended{border-color:#D8DEF8;box-shadow:0 10px 28px rgba(107,92,246,.10)}
.pricing-card.is-current{border-color:#B9CDFB;background:#FCFDFF;box-shadow:0 8px 24px rgba(77,130,247,.08)}
.pricing-badge{position:absolute;top:-11px;left:20px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#4D82F7 0%,#6B5CF6 100%);color:#fff;font-size:11.5px;font-weight:700;box-shadow:0 4px 14px rgba(107,92,246,.28)}

.pricing-card-head{margin-bottom:14px}
.pricing-plan-name{margin:0;color:#111827;font-size:17px;font-weight:750}
.pricing-plan-desc{margin:5px 0 0;color:#7783A2;font-size:12.5px;line-height:1.55}

/* 价格：免费 / 年付 / 首年特惠 三形态 */
.pricing-price{display:grid;gap:4px}
.pricing-price-main{display:flex;align-items:baseline;gap:4px}
.pricing-price-main strong{color:#111827;font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.pricing-price-main span{color:#9BA4BA;font-size:13px;font-weight:600}
.pricing-price-month{margin:0;color:#7783A2;font-size:12px}
.pricing-price-pill{justify-self:start;padding:3px 10px;border-radius:999px;background:#EDF5FF;color:#4D82F7;font-size:11.5px;font-weight:700}
.pricing-price.is-promo{gap:2px}
.pricing-price-was{color:#9BA4BA;font-size:12.5px;text-decoration:line-through}
.pricing-price-now{display:flex;align-items:baseline;gap:8px}
.pricing-price-label{padding:2px 8px;border-radius:6px;background:#F3F1FF;color:#6B5CF6;font-size:11px;font-weight:700;white-space:nowrap}
.pricing-price-now strong{color:#111827;font-size:30px;font-weight:800;letter-spacing:-.02em}
.pricing-price-note{color:#9BA4BA;font-size:11.5px}

.pricing-card-split{height:1px;margin:16px 0 14px;background:#E7EBF3}

/* 分组标题：把「资源额度」与「功能权益」在视觉上明确切开（本次改版的关键点） */
.pricing-group-label{margin:0 0 9px;color:#9BA4BA;font-size:11.5px;font-weight:750;letter-spacing:.05em}
.pricing-card-body>.pricing-group-label{margin-top:0}
.pricing-group-label.is-stacked{margin:18px 0 10px}

/* 分组一：资源额度（2 列网格，末项占满整行） */
.pricing-quota{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.pricing-quota>li{display:flex;align-items:center;gap:6px;min-width:0;padding:8px 10px;border:1px solid #EDF1F9;border-radius:10px;background:#F8FAFF}
.pricing-quota>li:last-child{grid-column:1/-1}
.pricing-quota-icon{flex:0 0 auto;display:grid;place-items:center;color:#4D82F7}
.pricing-quota-label{color:#7783A2;font-size:12px;white-space:nowrap}
.pricing-quota-value{margin-left:auto;color:#111827;font-size:12.5px;font-weight:750;white-space:nowrap}

/* 分组二：功能权益（有 / 无） */
.pricing-features{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.pricing-features>li{display:flex;align-items:center;gap:8px;font-size:13px}
.pricing-features>li svg{flex:0 0 auto}
.pricing-features>li.is-on{color:#111827;font-weight:600}
.pricing-features>li.is-on svg{color:#27B67C}
.pricing-features>li.is-off{color:#9BA4BA}
.pricing-features>li.is-off svg{color:#C6CEDC}

/* CTA 区：始终贴卡片底部，保证并排的卡片按钮对齐 */
.pricing-card-cta{margin-top:auto;padding-top:16px}
/* 三档 CTA 一律通栏：否则「当前版本」标记是通栏、普通按钮是自适应宽，并排时视觉不齐。 */
.pricing-card-cta .pricing-btn{width:100%}
.pricing-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:42px;padding:0 18px;border:0;border-radius:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
.pricing-btn:active{transform:translateY(1px)}
.pricing-btn.is-primary{background:#4D82F7;color:#fff;box-shadow:0 6px 18px rgba(77,130,247,.22)}
.pricing-btn.is-primary:hover{background:#3F74E8}
.pricing-btn.is-gradient{background:linear-gradient(135deg,#4D82F7 0%,#6B5CF6 100%);color:#fff;box-shadow:0 8px 22px rgba(107,92,246,.26)}
.pricing-btn.is-gradient:hover{box-shadow:0 10px 26px rgba(107,92,246,.32)}
.pricing-btn.is-wide{width:100%}
.pricing-current-tag{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:12px;background:#EDF5FF;color:#4D82F7;font-size:13.5px;font-weight:700}
.pricing-card-status{margin:10px 0 0;padding-top:10px;border-top:1px dashed #E7EBF3;color:#7783A2;font-size:11.5px;line-height:1.65}

/* 空态 / 提示 */
.pricing-empty{display:grid;gap:12px;justify-items:center;padding:28px;border:1px dashed #E7EBF3;border-radius:16px;color:#7783A2;text-align:center}
.pricing-empty p{margin:0;font-size:13px}
.pricing-notice{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border:1px solid #DCE8FE;border-radius:14px;background:#EDF5FF;color:#2E5AA8;font-size:12.5px;line-height:1.6}
.pricing-notice svg{flex:0 0 auto;margin-top:1px;color:#4D82F7}
.pricing-notice span{flex:1;min-width:0}
.pricing-notice button{flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:#5B84D0;font-size:16px;line-height:1;cursor:pointer}

/* 规则行（折叠） */
.pricing-rules{display:flex;align-items:center;gap:9px;width:100%;padding:13px 15px;border:1px solid #E7EBF3;border-radius:14px;background:#fff;color:#111827;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.pricing-rules>svg:first-child{flex:0 0 auto;color:#4D82F7}
.pricing-rules>span{flex:1;min-width:0;text-align:left}
.pricing-rules>svg:last-child{flex:0 0 auto;color:#9BA4BA;transition:transform .2s ease}
.pricing-rules>svg:last-child.is-open{transform:rotate(90deg)}
.pricing-rules-panel{padding:16px 18px;border:1px solid #E7EBF3;border-radius:14px;background:#F8FAFF}
.pricing-rules-panel dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:0}
.pricing-rules-panel dt{color:#111827;font-size:12.5px;font-weight:700;white-space:nowrap}
.pricing-rules-panel dd{margin:0;color:#7783A2;font-size:12.5px;line-height:1.65}
@media (max-width:560px){
  .pricing-title{font-size:20px}
  .pricing-trial{grid-template-columns:auto minmax(0,1fr)}
  .pricing-trial-cta{grid-column:1/-1;justify-self:stretch}
  .pricing-trial-cta .pricing-btn{width:100%}
  .pricing-rules-panel dl{grid-template-columns:1fr;gap:3px}
  .pricing-rules-panel dt{margin-top:9px}
  .pricing-rules-panel dt:first-of-type{margin-top:0}
}