/* ===== 在线选课页 · 蓝豆仔品牌化 v20260905（IP形象PNG化） ===== */
:root{
  --brand:#1E5BFF; --brand2:#8B5CF6; --orange:#FF6B35; --green:#10B981; --red:#EF4444;
  --grad:linear-gradient(135deg,#1E5BFF 0%,#8B5CF6 100%);
  --title:#1A1A2E; --text:#555; --muted:#999; --line:#E0E0E0;
  --page-bg:#F0F4FF;
  --shadow-card:0 10px 28px rgba(30,91,255,.14);
  --shadow-btn:0 6px 18px rgba(30,91,255,.38);
}
.sc-page{background:var(--page-bg);padding-bottom:24px;}

/* ===== Banner ===== */
.sc-banner{
  position:relative;overflow:hidden;margin:0 0 6px;padding:24px 20px 28px;
  background:linear-gradient(135deg,#1E5BFF 0%,#8B5CF6 100%);
  border-radius:0 0 20px 20px;box-shadow:0 8px 24px rgba(30,91,255,.2);color:#fff;
}
.sc-banner .scb-grid{
  position:absolute;inset:0;opacity:.08;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:30px 30px;
}
.sc-banner .scb-halo{
  position:absolute;top:-40px;left:-30px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.2),transparent 50%);
}
/* Banner 左上角蓝豆仔（透明PNG直出+白色光晕+呼吸缩放） */
.sc-banner .scb-corner{
  position:absolute;top:14px;left:14px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;z-index:2;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.45));
  animation:scbBreath 4s ease-in-out infinite;
}
@keyframes scbBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.sc-banner .scb-ip-big{
  position:absolute;right:-8px;bottom:-12px;width:100px;height:100px;opacity:.12;pointer-events:none;
}
.sc-banner .scb-dot{position:absolute;border-radius:50%;background:#fff;animation:scbFloat 8s ease-in-out infinite;}
@keyframes scbFloat{0%,100%{transform:translateY(0);opacity:.25;}50%{transform:translateY(-16px);opacity:.15;}}
.scb-inner{position:relative;z-index:1;}
.scb-avatar{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.45));
  animation:scbBreath 4s ease-in-out infinite;
}
.scb-title{font-size:32px;font-weight:800;margin-top:12px;letter-spacing:2px;text-shadow:0 2px 10px rgba(23,65,212,.35);}
/* Banner 装饰斜线 */
.sc-banner .scb-line{
  position:absolute;left:-30px;bottom:34px;width:200px;height:3px;border-radius:2px;
  background:#fff;opacity:.1;transform:rotate(-32deg);pointer-events:none;
}
.scb-sub{color:#FF6B35;font-size:16px;font-weight:700;margin-top:4px;}
.scb-slogan{font-size:13px;opacity:.85;margin-top:8px;}
.scb-stats{display:flex;gap:16px;margin-top:16px;}
.scb-stats .st{display:flex;align-items:center;gap:5px;font-size:12px;opacity:.95;font-weight:600;}
.scb-stats .st svg,.scb-stats .st .ld-dot{flex-shrink:0;}

/* ===== 课程卡片 ===== */
.sc-course-list{padding:16px 16px 8px;}
.course-card{
  background:#fff;border-radius:20px;overflow:hidden;margin-bottom:22px;
  box-shadow:0 10px 28px rgba(30,91,255,.14);transition:transform .15s,box-shadow .25s;
  animation:ccIn .4s cubic-bezier(.2,0,.2,1) backwards;
}
/* 仅保留 from 帧：动画结束后回落到基础样式，PC hover 的 transform 才不会被 forwards 填充覆盖 */
@keyframes ccIn{from{opacity:0;transform:translateY(20px);}}
.course-card:active{transform:scale(.96);}

/* 封面（层次增强：装饰层+大IP） */
.cc-cover{height:140px;position:relative;overflow:hidden;}
.cc-deco-grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:20px 20px;}
.cc-deco-halo{position:absolute;top:-30px;left:-20px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 50%);}
.cc-deco-dark{position:absolute;right:-40px;bottom:-50px;width:190px;height:190px;border-radius:50%;background:rgba(0,0,0,.15);}
.cc-deco-line{position:absolute;background:#fff;opacity:.08;transform:rotate(-32deg);}
.cc-deco-line.l1{width:150px;height:3px;left:-24px;top:38px;}
.cc-deco-line.l2{width:110px;height:2px;right:-18px;bottom:30px;transform:rotate(24deg);}
.cc-deco-dot{position:absolute;border-radius:50%;background:#fff;animation:ccDotFloat 6s ease-in-out infinite;}
@keyframes ccDotFloat{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-10px);opacity:.2;}}
.cc-cover .cc-num{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:56px;font-weight:900;color:#fff;opacity:.18;line-height:1;
}
.cc-cover .cc-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.3));
}
.cc-cover .cc-mascot{
  position:absolute;right:10px;bottom:8px;width:44px;height:44px;opacity:.95;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.45)) drop-shadow(0 0 1px #fff);
}
/* 浮动动画作用于内层 img，外层 cc-mascot 只做定位，hover scale 作用其上，二者不冲突 */
.cc-cover .cc-mascot img{animation:ccMascotFloat 3s ease-in-out infinite;}
@keyframes ccMascotFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
/* 蓝豆仔左手旁的课程小装饰（白色半透明圆底） */
.cc-cover .cc-mascot-decor{
  position:absolute;right:56px;bottom:16px;width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.cc-cover .cc-mascot-decor svg{display:block;}
.cc-cover .cc-cat{
  position:absolute;top:12px;left:12px;padding:3px 8px;border-radius:10px;
  background:rgba(255,255,255,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:#fff;font-size:10px;z-index:2;
}
.cc-cover .cc-hot{
  position:absolute;top:12px;right:12px;padding:3px 8px;border-radius:10px;
  background:linear-gradient(135deg,#FF6B35,#FF8F5E);color:#fff;font-size:10px;font-weight:700;z-index:2;
}
.cc-cover .cc-hot img{width:13px;height:13px;object-fit:contain;vertical-align:-2px;}
.cc-cover .cc-hot.gold{background:linear-gradient(135deg,#FFD700,#FF8F00);color:#5B3A00;}

/* 信息区 */
.cc-info{padding:16px 16px 4px;}
.cc-name{font-size:20px;font-weight:800;color:#1A1A2E;letter-spacing:1px;display:flex;align-items:center;flex-wrap:wrap;}
.cc-name-bar{width:4px;height:22px;border-radius:2px;background:linear-gradient(180deg,#1E5BFF,#8B5CF6);margin-right:8px;display:inline-block;box-shadow:0 0 6px rgba(30,91,255,.35);}
.cc-name-cat{font-size:10px;padding:2px 7px;border-radius:8px;margin-left:8px;font-weight:600;background:#EEF2FF;color:#1E5BFF;}
.cc-name-cat.orange{background:#FFF1E8;color:#FF6B35;}
.cc-points{margin-top:10px;}
.cc-points .pt{font-size:13px;color:#555;line-height:1.8;display:flex;align-items:center;}
.cc-points .pt::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#1E5BFF,#8B5CF6);
  box-shadow:0 0 5px rgba(30,91,255,.4);
  display:inline-block;margin-right:8px;flex-shrink:0;
}
.cc-points .pt b{color:#1A1A2E;}
.cc-meta{margin-top:10px;display:flex;align-items:center;font-size:13px;color:#666;}
.cc-meta svg{flex-shrink:0;}

/* 套餐选择 */
.cc-plans{padding:12px 16px 0;}
.plans-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--title);margin-bottom:10px;}
.plans-title .pt-mascot{display:inline-flex;width:24px;height:24px;overflow:hidden;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(30,91,255,.3));}
.plans-title .pt-mascot img{width:24px;height:24px;object-fit:contain;}
.plans-title .pt-tip{margin-left:auto;font-size:12px;color:var(--orange);font-weight:600;}
.plan-opt{
  height:64px;border-radius:14px;padding:0 14px;display:flex;align-items:center;
  cursor:pointer;margin-bottom:8px;border:1px solid var(--line);background:#fff;
  transition:all .25s cubic-bezier(.2,0,.2,1);position:relative;
}
.plan-opt .radio{
  width:22px;height:22px;border-radius:50%;border:2px solid #CCC;background:#fff;
  flex-shrink:0;margin-right:12px;display:flex;align-items:center;justify-content:center;transition:all .25s;overflow:hidden;position:relative;
}
.plan-opt .radio .radio-mascot{opacity:0;transition:opacity .25s,transform .25s;display:flex;transform:scale(.6);}
.plan-opt.selected .radio{border:none;background:#fff;}
.plan-opt.selected .radio .radio-mascot{opacity:1;transform:scale(1);}
.plan-opt .p-body{flex:1;min-width:0;}
.plan-opt .p-name{font-size:14px;font-weight:700;color:var(--title);display:flex;align-items:center;flex-wrap:wrap;}
.plan-opt .p-name .rec-tag{
  background:linear-gradient(135deg,#FF6B35,#FF8F5E);color:#fff;font-size:10px;
  padding:2px 6px;border-radius:8px;margin-left:6px;font-weight:600;
  animation:recPulse 2s ease-in-out infinite;
  box-shadow:0 2px 6px rgba(255,107,53,.35);
}
.plan-opt .p-name .rec-tag .rec-mascot{display:inline-flex;margin-right:2px;vertical-align:-2px;animation:recMascotBreath 1.6s ease-in-out infinite;}
.plan-opt .p-name .rec-tag .rec-mascot img{width:14px;height:14px;object-fit:contain;}
@keyframes recPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes recMascotBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.plan-opt .p-desc{font-size:11px;color:#999;margin-top:2px;display:flex;align-items:center;flex-wrap:wrap;}
.plan-opt .p-desc .save-tag{color:var(--orange);font-weight:700;font-size:11px;margin-left:6px;display:inline-flex;align-items:center;gap:2px;}
.plan-opt .p-price{font-size:20px;font-weight:800;color:#333;transition:color .2s,font-size .2s;}
/* 选中态：渐变描边模拟 */
.plan-opt.selected{
  border:2px solid transparent;background:#F0F4FF;
  background-image:linear-gradient(#F0F4FF,#F0F4FF),linear-gradient(135deg,#1E5BFF,#8B5CF6);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.plan-opt.selected .p-price{color:var(--brand);font-size:24px;font-weight:800;}

/* 白名单竞赛：3档位横排 */
.level-opts{display:flex;gap:8px;margin-top:4px;}
.level-opt{
  flex:1;border-radius:12px;padding:12px 8px 12px;text-align:center;cursor:pointer;
  border:1px solid var(--line);background:#fff;transition:all .2s;position:relative;overflow:visible;
}
.level-opt .lv-medal{display:block;margin-bottom:3px;}
.level-opt .lv-name{font-size:14px;font-weight:700;color:var(--title);}
.level-opt .lv-price{font-size:20px;font-weight:800;color:#333;margin-top:6px;transition:color .2s,font-size .2s;}
.level-opt .lv-desc{font-size:11px;color:#999;margin-top:4px;}
.level-opt.selected{
  border:2px solid transparent;background:#F0F4FF;
  background-image:linear-gradient(#F0F4FF,#F0F4FF),linear-gradient(135deg,#1E5BFF,#8B5CF6);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.level-opt.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(135deg,#1E5BFF,#8B5CF6);border-radius:12px 12px 0 0;}
.level-opt.selected .lv-price{color:var(--brand);font-size:24px;font-weight:800;}
.level-opt .lv-checked{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:9px;padding:2px 8px;border-radius:8px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
}
.level-opt .lv-checked .lvc-mascot{display:inline-flex;flex-shrink:0;}

/* 按钮区 */
.cc-actions{padding:12px 16px 16px;}
.btn-enroll{
  width:100%;height:52px;border-radius:26px;background:var(--grad);color:#fff;
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 6px 18px rgba(30,91,255,.38);transition:transform .15s,box-shadow .2s;border:none;cursor:pointer;
}
.btn-enroll:active{transform:scale(.96);box-shadow:0 3px 10px rgba(30,91,255,.3);}
.btn-enroll .btn-mascot{
  width:24px;height:24px;border-radius:50%;background:#fff;display:inline-flex;
  align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
  box-shadow:0 1px 4px rgba(23,65,212,.25);
}
.btn-enroll .btn-mascot img{width:20px;height:20px;object-fit:contain;}
.btn-enroll .price-strong{font-size:18px;font-weight:800;}
.btn-detail{
  width:100%;height:46px;border-radius:23px;margin-top:8px;background:#fff;
  border:1px solid var(--brand);color:var(--brand);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:transform .15s;
}
.btn-detail:active{transform:scale(.96);}
.btn-detail .arr{display:inline-flex;}
.btn-detail .arr img{width:16px;height:16px;object-fit:contain;}

/* 详情折叠面板（浅蓝紫渐变 + 左侧品牌竖线） */
.cc-detail{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,0,.2,1);background:linear-gradient(135deg,#F0F4FF,#F5F0FF);border-top:1px solid #E8EEFF;}
.cc-detail.open{max-height:640px;overflow-y:auto;}
.cc-detail .cd-inner{position:relative;padding:20px 18px 20px 24px;}
.cc-detail .cd-inner::before{
  content:'';position:absolute;left:12px;top:22px;bottom:22px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,#1E5BFF,#8B5CF6);opacity:.3;
}
.cc-detail .cd-intro{font-size:13px;color:#555;line-height:1.7;display:flex;gap:6px;}
.cc-detail .cd-intro .cd-intro-mascot{flex-shrink:0;margin-top:2px;}
.cc-detail .cd-sec{margin-top:12px;}
.cc-detail .cd-sec h4{font-size:13px;font-weight:700;color:var(--title);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.cc-detail .cd-sec h4 .cd-h-mascot{display:inline-flex;flex-shrink:0;}
.cc-detail .cd-gain{display:flex;align-items:center;gap:7px;font-size:12px;color:#555;line-height:2;}
.cc-detail .cd-gain .cd-check{
  width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#10B981,#34D399);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(16,185,129,.35);
}
.cc-detail .cd-suitable{font-size:12px;color:#555;line-height:1.7;}

/* ===== 确认订单弹窗（成长礼物仪式感版） ===== */
.order-mask{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;animation:omIn .2s;padding:0 12px;
}
@keyframes omIn{from{opacity:0;}to{opacity:1;}}
.order-modal{
  background:#fff;border-radius:16px;overflow:hidden;width:92%;max-width:400px;margin:0 auto;
  animation:omUp .3s ease;max-height:88vh;overflow-y:auto;position:relative;
}
@keyframes omUp{from{transform:translateY(30px) scale(.95);opacity:0;}to{transform:none;opacity:1;}}
/* 顶部品牌区 */
.om-hero{
  position:relative;height:130px;background:var(--grad);color:#fff;overflow:hidden;flex-shrink:0;
}
.om-hero .omh-grid{
  position:absolute;inset:0;opacity:.08;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:24px 24px;
}
.om-hero .omh-halo{
  position:absolute;top:-30px;left:-20px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 50%);
}
.om-hero .omh-dot{position:absolute;border-radius:50%;background:#fff;animation:omhFloat 6s ease-in-out infinite;}
@keyframes omhFloat{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(-12px);opacity:.2;}}
.om-hero .om-close{
  position:absolute;top:12px;right:12px;z-index:10;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.om-hero .omh-inner{position:relative;z-index:1;text-align:center;padding:20px 16px 16px;}
.om-hero .omh-mascot{
  width:72px;height:72px;margin:0 auto;border-radius:50%;background:rgba(255,255,255,.2);
  padding:8px;box-sizing:border-box;filter:drop-shadow(0 0 12px rgba(255,255,255,.3));
}
.om-hero .omh-mascot img{width:56px;height:56px;object-fit:contain;}
.om-hero .omh-title{font-size:18px;font-weight:800;margin-top:12px;letter-spacing:1px;}
.om-hero .omh-sub{font-size:14px;opacity:.9;margin-top:4px;}
/* 课程礼物卡 */
.om-gift{
  margin:16px;background:#fff;border-radius:12px;padding:14px;
  border:1px solid #F0F0F0;box-shadow:0 2px 8px rgba(30,91,255,.06);
}
.om-gift .og-top{display:flex;align-items:center;}
.om-gift .og-icon{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.1);flex-shrink:0;overflow:hidden;
}
.om-gift .og-body{margin-left:12px;flex:1;min-width:0;}
.om-gift .og-name{font-size:16px;font-weight:800;color:var(--title);display:flex;align-items:center;flex-wrap:wrap;}
.om-gift .og-name .og-cat{
  font-size:10px;padding:2px 6px;border-radius:8px;margin-left:6px;font-weight:600;
  background:#EEF2FF;color:var(--brand);
}
.om-gift .og-name .og-cat.orange{background:#FFF1E8;color:var(--orange);}
.om-gift .og-plan{font-size:12px;color:#999;margin-top:3px;display:flex;align-items:center;flex-wrap:wrap;}
.om-gift .og-hours{font-size:11px;color:#bbb;margin-top:2px;}
.om-gift .og-price{margin-top:12px;border-top:1px dashed #E0E0E0;padding-top:10px;font-size:13px;}
.om-gift .og-price .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.om-gift .og-price .row .k{color:#888;}
.om-gift .og-price .row .v{color:#333;}
.om-gift .og-price .row .discount{color:var(--orange);display:flex;align-items:center;font-weight:700;}
.om-gift .og-price .solid{border-top:1px solid #EEE;margin:8px 0;}
.om-gift .og-price .row.total .k{
  color:var(--title);font-weight:700;display:flex;align-items:center;gap:4px;
}
.om-gift .og-price .row.total .v{font-size:24px;color:var(--brand);font-weight:700;}
/* 宝贝信息表单 */
.om-form-title{margin:0 16px 12px;display:flex;align-items:center;justify-content:space-between;}
.om-form-title .oft-left{display:flex;align-items:center;font-size:15px;font-weight:700;color:var(--title);}
.om-form-title .oft-left .mascot-mini{width:20px;height:20px;display:inline-flex;margin-right:6px;}
.om-form-title .oft-left .mascot-mini img{width:20px;height:20px;object-fit:contain;}
.om-form-title .oft-right{font-size:11px;color:#999;}
.om-fields{padding:0 16px;}
.om-fields .fld{margin-bottom:12px;position:relative;}
.om-fields label{display:block;font-size:13px;font-weight:700;color:#333;margin-bottom:6px;}
.om-fields .fld-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#999;
  display:flex;pointer-events:none;transition:color .2s;z-index:1;
}
.om-fields .fld-arrow{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#999;
  display:flex;pointer-events:none;
}
.om-fields input,.om-fields select{
  width:100%;height:44px;border:1px solid #E0E0E0;border-radius:10px;
  padding:0 12px 0 38px;font-size:14px;color:#333;outline:none;background:#fff;
  transition:border-color .2s,box-shadow .2s;font-family:inherit;appearance:none;-webkit-appearance:none;
}
.om-fields input::placeholder{color:#BBB;}
.om-fields input:focus,.om-fields select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,91,255,.1);}
.om-fields .fld:focus-within .fld-icon{color:var(--brand);}
.om-fields .fld.error input,.om-fields .fld.error select{border-color:#FF4D4F;box-shadow:0 0 0 3px rgba(255,77,79,.1);}
.om-fields .err-msg{display:none;font-size:12px;color:#FF4D4F;margin-top:4px;}
.om-fields .fld.error .err-msg{display:block;}
/* 信任保障行 */
.om-trust{
  margin:0 16px 12px;background:#F0F4FF;border-radius:10px;padding:10px 12px;
  display:flex;justify-content:space-around;align-items:center;
}
.om-trust .tr{display:flex;align-items:center;font-size:11px;color:#555;}
.om-trust .tr svg{flex-shrink:0;}
.om-trust .tr span{margin-left:4px;}
/* 协议 + 支付按钮 */
.om-agree{margin:0 16px 8px;text-align:center;font-size:10px;color:#999;}
.om-agree a{color:var(--brand);text-decoration:none;}
.om-pay-btn{
  margin:0 16px 20px;width:calc(100% - 32px);height:50px;border-radius:25px;background:var(--grad);color:#fff;
  font-size:17px;font-weight:700;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;
  box-shadow:0 6px 16px rgba(30,91,255,.35);display:flex;align-items:center;justify-content:center;gap:6px;
}
.om-pay-btn:active{transform:scale(.98);box-shadow:0 3px 8px rgba(30,91,255,.25);}
.om-pay-btn:disabled{opacity:.75;cursor:default;}
.om-pay-btn .price-strong{font-size:18px;font-weight:800;}
.om-pay-btn .spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:omSpin 1s linear infinite;flex-shrink:0;}
@keyframes omSpin{to{transform:rotate(360deg);}}

/* ===== 支付成功页（庆祝仪式版） ===== */
.success-page{
  position:fixed;inset:0;z-index:210;color:#fff;overflow-y:auto;
  background:linear-gradient(135deg,#1E5BFF 0%,#8B5CF6 100%);
  animation:omIn .25s;
}
.success-page .sp-grid{
  position:fixed;inset:0;opacity:.08;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:24px 24px;
}
/* 纸屑 */
.confetti{position:fixed;top:-20px;z-index:1;pointer-events:none;animation:confettiFall 3s ease-in forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1;}
  50%{transform:translateY(45vh) translateX(var(--sway,20px)) rotate(360deg);opacity:1;}
  100%{transform:translateY(105vh) translateX(calc(var(--sway,20px) * -0.6)) rotate(720deg);opacity:0;}
}
.success-page .sp-inner{
  position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 20px 24px;
}
.success-page .sp-mascot{
  width:104px;height:104px;margin:0 auto;border-radius:50%;background:rgba(255,255,255,.95);
  padding:12px;box-sizing:border-box;display:block;filter:drop-shadow(0 0 20px rgba(255,215,0,.4));
  animation:spBounce 1s ease infinite;
}
.success-page .sp-mascot img{width:80px;height:80px;object-fit:contain;}
@keyframes spBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.success-page .sp-title{font-size:28px;font-weight:800;text-align:center;margin-top:20px;letter-spacing:2px;}
.success-page .sp-sub{font-size:16px;opacity:.9;text-align:center;margin-top:8px;}
.success-page .sp-card{
  margin-top:24px;background:#fff;border-radius:16px;padding:18px;width:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.15);color:var(--title);
}
.success-page .sp-card .sc-top{display:flex;align-items:center;}
.success-page .sp-card .sc-mascot{width:24px;height:24px;flex-shrink:0;}
.success-page .sp-card .sc-mascot img{width:24px;height:24px;object-fit:contain;}
.success-page .sp-card .sc-name{font-size:16px;font-weight:800;margin-left:8px;flex:1;min-width:0;}
.success-page .sp-card .sc-cat{font-size:10px;padding:2px 7px;border-radius:8px;background:#EEF2FF;color:var(--brand);font-weight:600;flex-shrink:0;}
.success-page .sp-card .sc-div{border-top:1px solid #F0F0F0;margin:12px 0;}
.success-page .sp-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.success-page .sp-row:last-child{margin-bottom:0;}
.success-page .sp-row .k{color:#999;}
.success-page .sp-row .v{color:var(--title);font-weight:600;max-width:65%;text-align:right;}
.success-page .sp-row .v.price{color:var(--brand);font-weight:800;font-size:15px;}
.success-page .sp-tips{margin-top:20px;text-align:center;font-size:14px;opacity:.9;line-height:1.8;}
.success-page .sp-tips .tip{display:flex;align-items:center;justify-content:center;gap:5px;}
.success-page .sp-btns{margin-top:24px;}
.success-page .btn-p{
  width:100%;height:48px;border-radius:24px;background:#fff;color:var(--brand);
  font-size:16px;font-weight:800;border:none;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s;
}
.success-page .btn-p:active{transform:scale(.98);}
.success-page .btn-g{
  width:100%;height:44px;border-radius:22px;background:rgba(255,255,255,.2);color:#fff;
  font-size:14px;font-weight:600;border:1px solid rgba(255,255,255,.3);margin-top:10px;cursor:pointer;transition:transform .15s;
}
.success-page .btn-g:active{transform:scale(.98);}
.success-page .sp-footer{margin-top:24px;text-align:center;padding-bottom:8px;}
.success-page .sp-footer .sf-mascot{width:32px;height:32px;opacity:.9;display:inline-block;}
.success-page .sp-footer .sf-mascot img{width:32px;height:32px;object-fit:contain;}
.success-page .sp-footer .sf-text{font-size:13px;opacity:.8;margin-top:6px;}

/* ===== 加载骨架 / 空状态 ===== */
.skel-card{height:300px;border-radius:16px;margin:0 16px 16px;background:linear-gradient(90deg,#E8EDF5 25%,#F5F8FF 50%,#E8EDF5 75%);background-size:200% 100%;animation:skShimmer 1.2s infinite;}
@keyframes skShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.load-error{text-align:center;padding:50px 0;}
.load-error img{opacity:.85;}
.load-error button{
  padding:10px 26px;border-radius:22px;background:#fff;border:1.5px solid var(--brand);
  color:var(--brand);font-size:14px;font-weight:600;cursor:pointer;margin-top:12px;
}

/* ===== 蓝豆仔IP动画 ===== */
.ld-dot{display:inline-block;border-radius:50%;flex-shrink:0;vertical-align:middle;}
/* 页面水印漂浮（7s，处于5-8s规范区间） */
.sc-watermark img{animation:scWmFloat 7s ease-in-out infinite;}
@keyframes scWmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}


/* ===== 页面背景装饰（网格+光晕+水印+装饰圆） ===== */
.sc-page{position:relative;}
.sc-page::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:36px 36px;opacity:.35;
}
.sc-page::after{
  content:'';position:fixed;top:-60px;left:-60px;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(30,91,255,.05),rgba(139,92,246,.05) 60%,transparent 70%);
}
.sc-banner,.sc-course-list,.sc-footer{position:relative;z-index:1;}
.sc-watermark{position:fixed;right:12px;bottom:14px;width:150px;height:150px;opacity:.05;pointer-events:none;z-index:0;}
.sc-corner-circle{
  position:fixed;left:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 35% 35%,rgba(30,91,255,.06),rgba(139,92,246,.04) 60%,transparent 75%);
}
.sc-course-list .course-card,.sc-footer{z-index:1;}

/* ===== 底部版权区 ===== */
.sc-footer{margin-top:8px;padding:24px 0 30px;text-align:center;}
.scf-mascot{display:flex;justify-content:center;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(30,91,255,.25));}
.scf-copy{font-size:11px;color:#999;}
.scf-beian{font-size:10px;color:#bbb;margin-top:3px;}
.scf-beian a{color:#bbb;text-decoration:none;}
.scf-divider{width:44px;height:2px;border-radius:1px;background:linear-gradient(90deg,#1E5BFF,#8B5CF6);opacity:.35;margin:10px auto 0;}
.scf-slogan{font-size:10px;color:#999;opacity:.65;margin-top:8px;letter-spacing:1px;}

/* ===== PC端 hover 交互（仅对支持 hover 的设备生效，触屏不受影响） ===== */
@media (hover:hover){
  .course-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(30,91,255,.18);}
  .course-card:hover .cc-mascot{transform:scale(1.1);}
  .cc-mascot{transition:transform .25s;}
}