/* ============================================================
   光影课堂 · 课程体系组件样式（源自《前台UI设计稿》原样提取）
   覆盖页面：全部课程 / 课程详情 / 播放页 / 我的课程
   规则：本文件类名与设计稿一致，禁止在视图中重写同义类
   ============================================================ */

/* ---------- 页面横幅：浏览器视口全宽渐变 + 居中标题与说明 ---------- */
.page-banner{background:linear-gradient(135deg,#0B2E6B 0%,#1E4FD8 45%,#4F46E5 75%,#7C3AED 100%);color:#fff;text-align:center;padding:56px 28px 54px;position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-1px}
.page-banner::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,92,.25),transparent 70%);top:-180px;left:-80px}
.page-banner::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.32),transparent 70%);bottom:-160px;right:-60px}
.page-banner h1{font-size:34px;font-weight:700;letter-spacing:1px;position:relative;z-index:1}
.page-banner .sub{font-size:16px;color:rgba(255,255,255,.85);margin-top:12px;position:relative;z-index:1}
.banner-filter{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:28px auto 0;padding:10px 16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:16px;max-width:880px;position:relative;z-index:1;backdrop-filter:blur(8px)}
.banner-filter .seg{display:flex;gap:4px;background:rgba(255,255,255,.18);border-radius:999px;padding:4px}
.banner-filter .seg a{padding:8px 20px;border-radius:999px;font-size:14px;color:rgba(255,255,255,.92);font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none}
.banner-filter .seg a.on{background:#fff;color:#2563EB;box-shadow:0 2px 8px rgba(22,35,63,.12)}
.banner-filter .search-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border-radius:999px;padding:9px 18px;flex:1;max-width:280px;min-width:210px}
.banner-filter .search-box input{border:none;background:transparent;outline:none;font-size:14px;color:#16233F;width:100%}
.banner-filter .search-box input::placeholder{color:#8B98B5}

/* ---------- 两栏布局 ---------- */
.layout{display:flex;gap:26px;align-items:flex-start}
.side{width:220px;flex-shrink:0;background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:16px;position:sticky;top:80px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.side h4{font-size:15px;color:#8B98B5;padding:8px 12px;font-weight:500}
.side a{display:block;padding:11px 14px;border-radius:10px;font-size:15px;color:#3A4765;margin-bottom:2px;cursor:pointer;text-decoration:none}
.side a:hover{background:#F0F3FA;color:#2563EB}
.side a.on{background:#EDF3FF;color:#2563EB;font-weight:500}
.side a.sub{padding-left:30px;font-size:13.5px;color:#8B98B5}
.main-col{flex:1;min-width:0}

/* ---------- 课程卡片 ---------- */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.course-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid #D3DCEB;transition:all .25s;cursor:pointer;box-shadow:0 2px 14px rgba(22,35,63,.07);text-decoration:none;color:inherit;display:block}
.course-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(22,35,63,.15);border-color:#BFCCE2}
.course-cover{aspect-ratio:4/3;height:auto;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#fff}
/* 真实封面图（cover 字段非空）：底图 + 底部渐变遮罩，保持设计稿文字可读 */
.course-cover.has-img,.detail-cover.has-img,.learn-cover.has-img{background-size:cover;background-position:center}
.course-cover.has-img::before,.detail-cover.has-img::before,.learn-cover.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,33,73,0) 40%,rgba(11,33,73,.78) 100%);z-index:0}
.course-cover.has-img>*,.detail-cover.has-img>*,.learn-cover.has-img>*{position:relative;z-index:1}
/* 有真实封面图时：讲师行加深色蒙版（标题已隐藏靠 body h4 显示） */
.course-cover.has-img .cteacher{background:rgba(11,33,73,.55);padding:3px 10px;border-radius:8px;display:inline-block}
.rel-grid .course-cover.has-img .cteacher{padding:2px 8px;font-size:11px}
.course-cover .badges{display:flex;gap:8px}
.badge{font-size:13px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)}
.badge.hot{background:#FF6B35;border-color:transparent}
.badge.free{background:#0F766E;border-color:transparent}
.course-cover .cname{font-size:21px;font-weight:700;line-height:1.35;display:none}
.course-cover .cteacher{font-size:14px;color:rgba(255,255,255,.85);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cv-1{background:linear-gradient(135deg,#1E3A8A,#3B82F6)}.cv-2{background:linear-gradient(135deg,#4C1D95,#8B5CF6)}.cv-3{background:linear-gradient(135deg,#0F766E,#14B8A6)}.cv-4{background:linear-gradient(135deg,#9A3412,#FB923C)}.cv-5{background:linear-gradient(135deg,#831843,#DB2777)}.cv-6{background:linear-gradient(135deg,#1E40AF,#38BDF8)}.cv-7{background:linear-gradient(135deg,#064E3B,#34D399)}.cv-8{background:linear-gradient(135deg,#7C2D12,#F97316)}
.course-body{padding:16px 20px 18px}
.course-body h4{font-size:17px;font-weight:600;margin-bottom:9px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.course-meta{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.course-meta span{font-size:14px;color:#5B6B8C}
.course-foot{display:flex;align-items:center;justify-content:space-between}
.course-valid{font-size:12px;color:#B45309;margin-top:4px}
.price{font-size:20px;font-weight:700;color:#FF6B35}
.price.free{color:#0F766E}
.price small{font-size:13px;font-weight:400;color:#8B98B5;margin-left:4px}
/* 列表卡展示价：秒杀价（红色+标签） / 券后价（橙色+灰标） */
.price.sk{display:flex;align-items:center;gap:6px;color:#D92D20}
.price.sk .sk-ico{display:inline-flex;align-items:center;gap:2px;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;box-shadow:0 3px 8px rgba(255,107,53,.3);flex-shrink:0}
.price.sk b{font-size:19px}
.price.cp{display:flex;align-items:center;gap:5px;color:#FF6B35}
.price.cp .cp-tag{font-size:11px;font-weight:600;color:#B45309;background:#FFF4E6;padding:2px 7px;border-radius:999px;flex-shrink:0}
.buy-btn{font-size:15px;font-weight:500;color:#2563EB;background:#EDF3FF;padding:8px 20px;border-radius:999px;border:none;cursor:pointer;font-family:inherit}
.buy-btn:hover{background:#2563EB;color:#fff}
.buy-btn.solid{background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff}
.buy-btn.green{background:#E6F7F1;color:#0F766E}
.buy-btn.green:hover{background:#0F766E;color:#fff}

/* ---------- 分页器 ---------- */
.pager{display:flex;gap:8px;justify-content:center;margin-top:30px}
.pager a{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid #D3DCEB;display:flex;align-items:center;justify-content:center;font-size:14px;color:#5B6B8C;cursor:pointer;text-decoration:none}
.pager a.on{background:linear-gradient(135deg,#2563EB,#4F46E5);color:#fff;border-color:transparent}
.pager a.disabled{opacity:.4;pointer-events:none}

/* ---------- 课程详情：三段头部 ---------- */
.detail-top{display:flex;gap:30px;background:#fff;border:1px solid #D3DCEB;border-radius:22px;padding:28px;margin:26px 0 24px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.detail-cover{flex:0 0 460px;aspect-ratio:4/3;border-radius:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:24px;min-width:0;overflow:hidden;position:relative}
.detail-cover h2{font-size:28px;line-height:1.4;font-weight:700;display:none}
.detail-cover .sub2{font-size:15px;color:rgba(255,255,255,.85);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.detail-info{flex:1;min-width:0}
.detail-info h1{font-size:27px;font-weight:700;margin-bottom:12px;line-height:1.4;word-break:break-word;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.detail-info p{word-break:break-all;overflow-wrap:anywhere}
.detail-info .intro{font-size:15px;color:#5B6B8C;line-height:1.9;word-break:break-all;overflow-wrap:anywhere;max-height:7.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.detail-tags{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.detail-stats{display:flex;gap:34px;padding:16px 0;border-top:1px solid #EEF2FA;border-bottom:1px solid #EEF2FA;margin-bottom:16px}
.detail-stats .st b{font-size:19px;display:block;color:#16233F}
.detail-stats .st span{font-size:13px;color:#8B98B5}
.buy-card{background:#fff;border:1px solid #D3DCEB;border-radius:22px;padding:24px;position:sticky;top:80px;box-shadow:0 2px 14px rgba(22,35,63,.07);flex:0 0 280px}
.buy-card .p{font-size:32px;font-weight:700;color:#FF6B35}
.buy-card .p small{font-size:15px;color:#8B98B5;font-weight:400;text-decoration:line-through;margin-left:8px}
.buy-card .p.free{color:#0F766E;font-size:22px}
.buy-card .tip{font-size:13px;color:#B45309;background:#FFF4E6;border-radius:10px;padding:9px 14px;margin:12px 0 18px}
.buy-card .btn{width:100%;margin-bottom:10px;display:flex;align-items:center;justify-content:center;padding:13px 0;border-radius:999px;font-size:16px;font-weight:500;text-decoration:none;font-family:inherit;cursor:pointer;border:none}
.buy-card .btn-coral{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;box-shadow:0 10px 26px rgba(255,107,53,.4)}
.buy-card .btn-outline{background:#fff;color:#2563EB;border:1.5px solid #2563EB}
.buy-card .btn-gray{background:linear-gradient(135deg,#0F766E,#14B8A6);color:#fff;box-shadow:0 8px 20px rgba(15,118,110,.3)}
/* 全站（非 buy-card）的修饰类——给其他页面如 pay-btn 用 */
.btn-coral{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;box-shadow:0 10px 26px rgba(255,107,53,.4)}
.btn-outline{background:#fff;color:#2563EB;border:1.5px solid #2563EB}
.btn-gray{background:linear-gradient(135deg,#0F766E,#14B8A6);color:#fff;box-shadow:0 8px 20px rgba(15,118,110,.3)}
.redeem-link{display:block;text-align:center;font-size:14px;color:#2563EB;margin-top:6px;cursor:pointer;text-decoration:none}

/* ---------- 限时秒杀（详情页购买卡） ---------- */
.sk-tag{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px;margin-bottom:8px;box-shadow:0 4px 10px rgba(255,107,53,.35)}

/* ---------- 课程优惠券领取区（详情页主栏） ---------- */
.coupon-zone{background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:20px 24px;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.coupon-zone h3{font-size:18px;font-weight:600;margin-bottom:4px}
.coupon-zone h3 span{font-size:13px;color:#8B98B5;font-weight:400;margin-left:6px}
.coupon-list{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.coupon-card{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF5EC,#FFEAD8);border:1px dashed #FF9A62;border-radius:14px;padding:12px 18px;min-width:230px}
.coupon-card::before,.coupon-card::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translateY(-50%)}
.coupon-card::before{left:-7px;box-shadow:inset 0 0 0 1px #FF9A62}
.coupon-card::after{right:-7px;box-shadow:inset 0 0 0 1px #FF9A62}
.coupon-card .val{font-size:23px;font-weight:700;color:#FF6B35;white-space:nowrap}
.coupon-card .info{font-size:12px;color:#B45309;line-height:1.5;flex:1}
.coupon-card .claim{flex-shrink:0;padding:7px 18px;border-radius:999px;border:none;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:none;box-shadow:0 4px 10px rgba(255,107,53,.3)}
.coupon-card .claim:hover{opacity:.9}
.coupon-card .claim.done{background:#EDF0F5;color:#8B98B5;box-shadow:none;cursor:default}
.coupon-card .claim.link{display:inline-block;padding:7px 18px;line-height:1.4}
.coupon-card.claimed{opacity:.75}

/* ---------- 章节目录（分组） ---------- */
.chapter-box{background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:24px;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.chapter-box h3{font-size:19px;font-weight:600;margin-bottom:16px}
.chapter-group{margin-bottom:12px}
.chapter-group .cg-title{font-size:15px;font-weight:600;color:#16233F;padding:12px 14px;background:#F8FAFF;border-radius:12px;display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.chapter-group .cg-title span{margin-left:auto;font-size:12px;color:#8B98B5;font-weight:400;flex-shrink:0}
.chapter-item{display:flex;align-items:center;gap:12px;padding:13px 16px 13px;font-size:15px;color:#3A4765;border-bottom:1px solid #F0F3FA;cursor:pointer;text-decoration:none;min-width:0}
.chapter-item:hover{background:#F8FAFF;color:#2563EB}
.chapter-item .chapter-title-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}
.chapter-item .trial{margin-left:auto;font-size:12px;color:#0F766E;background:#E6F7F1;padding:2px 10px;border-radius:999px;flex-shrink:0}
.chapter-item .free{margin-left:auto;font-size:12px;color:#2563EB;background:#EDF3FF;padding:2px 10px;border-radius:999px;flex-shrink:0}
.chapter-item .lock{margin-left:auto;font-size:12px;color:#8B98B5;background:#F1F3F8;padding:2px 10px;border-radius:999px;flex-shrink:0}
.chn-num{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:500;vertical-align:middle;margin-right:4px}
.chn-num.dim{background:#E5E9F2;color:#8B98B5}

/* ---------- 讲师卡片 ---------- */
.teacher-card{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:24px;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.avatar-lg{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:29px;color:#fff;font-weight:700;flex-shrink:0;box-shadow:0 4px 12px rgba(22,35,63,.18)}
.ta-1{background:linear-gradient(135deg,#2563EB,#60A5FA)}.ta-2{background:linear-gradient(135deg,#7C3AED,#A78BFA)}.ta-3{background:linear-gradient(135deg,#0F766E,#2DD4BF)}
.teacher-card h4{font-size:18px;font-weight:600;margin-bottom:3px}
.teacher-card .pos{font-size:14px;color:#2563EB;margin-bottom:7px}
.teacher-card p{font-size:14px;color:#5B6B8C;line-height:1.6;flex:1}
.teacher-card .btn-follow{padding:8px 24px;border-radius:999px;border:none;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:14px;font-weight:500;cursor:pointer;flex-shrink:0;font-family:inherit}

/* ---------- 学员评价 ---------- */
.review-box{background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:24px;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.review-box h3{font-size:18px;font-weight:600;margin-bottom:8px}
.review-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #F0F3FA}
.review-item .av{width:42px;height:42px;border-radius:50%;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;background:linear-gradient(135deg,#2563EB,#7C3AED)}
.review-item b{font-size:15px}
.review-item .stars{color:#F59E0B;font-size:13px;margin:2px 0}
.review-item p{font-size:14px;color:#5B6B8C}
.review-input{display:flex;gap:12px;margin-top:16px}
.review-input input{flex:1;padding:12px 18px;border-radius:999px;border:1px solid #D3DCEB;font-size:15px;outline:none}
.review-empty{text-align:center;color:#8B98B5;font-size:14px;padding:22px 0}

/* ---------- 详情右栏 ---------- */
.aside-r{width:360px;flex-shrink:0;display:flex;flex-direction:column;gap:22px;position:sticky;top:80px}
.aside-panel{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:20px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.aside-panel h3{font-size:17px;font-weight:600;margin-bottom:6px}
.aside-panel .sub3{font-size:12px;color:#8B98B5;margin-bottom:12px}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rel-grid .course-card{border-radius:12px;box-shadow:0 2px 10px rgba(22,35,63,.06)}
.rel-grid .course-cover{padding:12px}
.rel-grid .course-cover .cname{font-size:16px;line-height:1.35}
.rel-grid .course-body{padding:12px 14px}
.rel-grid .price{font-size:16px}
.rel-grid .buy-btn{font-size:13px;padding:6px 14px}
.act-tips li{font-size:14px;color:#3A4765;padding:8px 0;border-bottom:1px dashed #EEF2F9;list-style:none;display:flex;gap:10px}
.act-tips li:last-child{border-bottom:none}
.act-tips li i{font-style:normal;color:#2563EB;font-weight:500}

/* ---------- 播放页 ---------- */
.player-page{display:flex;gap:26px;align-items:flex-start}
.player-main{flex:1.5;min-width:0}
.player-box{background:#0B2149;border-radius:20px;overflow:hidden;position:relative}
.player-screen{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:18px;background:radial-gradient(circle at 50% 40%,#1D3A75,#0B2149 70%)}
.player-screen video{width:100%;height:420px;display:block;background:#000}
.play-btn-lg{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#FF6B35,#FF8A5C);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 12px 30px rgba(255,107,53,.45);cursor:pointer}
.player-controls{display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(255,255,255,.06)}
.pbar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.18);position:relative;cursor:pointer}
.pbar i{position:absolute;left:0;top:0;bottom:0;width:38%;background:linear-gradient(90deg,#FF6B35,#FF8A5C);border-radius:6px}
.pbar i::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#fff}
.player-controls .t{font-size:13px;color:rgba(255,255,255,.7)}
.player-controls .ctrl{font-size:14px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);padding:6px 14px;border-radius:999px;cursor:pointer}
.player-side{flex:1;min-width:0}
.player-chapters{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:16px;max-height:560px;overflow-y:auto;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.player-chapters h4{font-size:16px;font-weight:600;padding:6px 10px 12px}
.pch-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:14px;color:#3A4765;cursor:pointer;text-decoration:none}
.pch-item:hover{background:#F8FAFF}
.pch-item.on{background:#EDF3FF;color:#2563EB;font-weight:500}
.pch-item .done{width:20px;height:20px;border-radius:7px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pch-item .num{width:20px;height:20px;border-radius:7px;background:#E5E9F2;color:#8B98B5;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pch-item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pch-item .trial{margin-left:auto;font-size:11px;color:#0F766E;flex-shrink:0}
.pch-item .lock{margin-left:auto;font-size:11px;color:#8B98B5;flex-shrink:0}
.notes-box{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:18px;margin-top:18px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.player-materials{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:18px;margin-top:18px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.player-materials h4{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.player-materials h4 small{font-size:12px;color:#8B98B5;font-weight:400}
.mat-items{display:flex;flex-wrap:wrap;gap:10px}
.mat-item{display:flex;align-items:center;gap:8px;border:1px solid #E3E9F5;border-radius:10px;padding:8px 14px;background:#FAFBFE;color:#26324D;text-decoration:none;font-size:13px;transition:all .15s;max-width:260px}
.mat-item:hover{border-color:#2563EB;background:#EFF6FF}
.mat-ic{font-size:16px}
.mat-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-sz{font-size:11px;color:#8B98B5;flex-shrink:0}
.notes-box h4{font-size:16px;font-weight:600;margin-bottom:12px}
.note-input{display:flex;gap:10px;margin-bottom:14px}
.note-input input{flex:1;padding:11px 16px;border-radius:12px;border:1px solid #D3DCEB;font-size:14px;outline:none}
.note-input button{padding:10px 24px;border-radius:999px;border:none;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;flex-shrink:0}
.note-item{font-size:14px;color:#3A4765;padding:10px 0;border-bottom:1px dashed #EEF2FA}
.note-item:last-child{border-bottom:none}
.note-item span{font-size:12px;color:#8B98B5;margin-left:8px}
.note-empty{color:#8B98B5;font-size:13px;text-align:center;padding:18px}

/* ---------- 我的课程 ---------- */
.tabs{display:flex;gap:6px;background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:6px;width:fit-content;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.tabs a{padding:10px 26px;border-radius:12px;font-size:15px;color:#5B6B8C;font-weight:500;cursor:pointer;text-decoration:none}
.tabs a.on{background:linear-gradient(135deg,#2563EB,#4F46E5);color:#fff}
.tab-pane{display:none}
.tab-pane.on{display:block}
.learn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.learn-card{background:#fff;border:1px solid #D3DCEB;border-radius:18px;overflow:hidden;transition:all .2s;cursor:pointer;box-shadow:0 2px 14px rgba(22,35,63,.07);text-decoration:none;color:inherit;display:block}
.learn-card:hover{box-shadow:0 20px 46px rgba(22,35,63,.15);border-color:#BFCCE2;transform:translateY(-4px)}
.learn-cover{aspect-ratio:4/3;color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.learn-cover b{font-size:17px;font-weight:600}
.progress{height:8px;border-radius:8px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#FF6B35,#FF8A5C);border-radius:8px}
.learn-body{padding:14px 16px}
.learn-body .pt{display:flex;justify-content:space-between;font-size:13px;color:#8B98B5;margin-bottom:12px}
.learn-body .pt b{color:#FF6B35;font-weight:600}
.learn-body .btn{width:100%;font-size:14px;padding:9px 0;display:block;text-align:center;border-radius:999px;border:none;cursor:pointer;font-family:inherit;text-decoration:none}

/* ---------- 空状态 ---------- */
.empty-box{text-align:center;padding:56px 20px;color:#8B98B5;background:#fff;border:1px dashed #C7D7F5;border-radius:16px;font-size:14px}

/* ============================================================
   首页组件（源自《前台UI设计稿》原样提取）
   ============================================================ */
.hero{background:linear-gradient(135deg,#0B2E6B 0%,#1E4FD8 45%,#4F46E5 75%,#7C3AED 100%);color:#fff;position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-1px;padding:58px 0}
.hero::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,92,.28),transparent 70%);top:-200px;right:-60px}
.hero::after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);bottom:-180px;left:-80px}
.hero-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;gap:48px;align-items:center;position:relative;z-index:1}
.hero-text{flex:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 16px;font-size:13px}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#34D399;display:inline-block}
.hero-text h1{font-size:42px;font-weight:700;line-height:1.35;margin:18px 0 14px;letter-spacing:1px}
.hero-text h1 span{background:linear-gradient(90deg,#FF8A5C,#FFD9A6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-text p{font-size:16px;color:rgba(255,255,255,.85);line-height:1.9;max-width:520px}
.hero-actions{display:flex;gap:14px;margin:28px 0 34px}
.hero-actions .btn{display:inline-block;padding:13px 34px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
.hero-actions .btn-coral{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;box-shadow:0 8px 22px rgba(255,107,53,.4)}
.hero-actions .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.hero-stats{display:flex;gap:44px}
.hero-stats .stat b{font-size:26px;display:block;font-weight:700}
.hero-stats .stat span{font-size:13px;color:rgba(255,255,255,.7)}
.hero-card{flex:0 0 340px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:26px;backdrop-filter:blur(10px)}
.hero-card .tag{display:inline-block;background:#FF6B35;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:600;margin-bottom:14px}
.hero-card h3{font-size:20px;font-weight:700;margin-bottom:16px}
.hero-card .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.18)}
.hero-card .row span{color:rgba(255,255,255,.7)}
.hero-card .quota{font-size:13px;color:#FFD9A6;margin:14px 0 18px}
.hero-card .quota b{color:#fff}
.hero-card .btn{display:block;text-align:center;background:linear-gradient(135deg,#FF6B35,#FF8A5C);border-radius:999px;padding:12px 0;font-size:15px;font-weight:600;text-decoration:none;color:#fff}
.section{padding:44px 0 10px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.section-head h2{font-size:22px;color:#0F1A33;font-weight:700}
.section-head h2 small{font-size:13px;color:#8B98B5;font-weight:400;margin-left:12px}
.section-head .more{font-size:14px;color:#2563EB;text-decoration:none;cursor:pointer}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;transition:all .2s;cursor:pointer;text-decoration:none}
.cat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,35,63,.12);border-color:#AFC4E8}
.cat-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.ci-1{background:linear-gradient(135deg,#2563EB,#60A5FA)}.ci-2{background:linear-gradient(135deg,#0F766E,#2DD4BF)}.ci-3{background:linear-gradient(135deg,#7C3AED,#A78BFA)}.ci-4{background:linear-gradient(135deg,#FF6B35,#FF8A5C)}.ci-5{background:linear-gradient(135deg,#B45309,#F59E0B)}.ci-6{background:linear-gradient(135deg,#1E40AF,#38BDF8)}.ci-7{background:linear-gradient(135deg,#831843,#DB2777)}.ci-8{background:linear-gradient(135deg,#064E3B,#34D399)}
.cat b{font-size:15px;color:#0F1A33;display:block}
.cat span{font-size:12px;color:#8B98B5}
.banban{background:linear-gradient(135deg,#122B5C,#3B4FC9 60%,#7C3AED);border-radius:22px;padding:38px 42px;display:flex;gap:36px;align-items:center;color:#fff;position:relative;overflow:hidden}
.banban::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,92,.3),transparent 65%);top:-90px;right:-40px}
.banban-text{flex:1;position:relative;z-index:1}
.banban-tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 14px;font-size:12px;margin-bottom:14px}
.banban-text h2{font-size:26px;font-weight:700;margin-bottom:10px}
.banban-text p{font-size:14px;color:rgba(255,255,255,.82);line-height:1.8;max-width:560px}
.banban-list{display:flex;gap:32px;margin:20px 0 24px}
.banban-list .item b{font-size:22px;display:block}
.banban-list .item span{font-size:12px;color:rgba(255,255,255,.7)}
.banban-actions{display:flex;gap:12px}
.banban-actions .btn{display:inline-block;padding:11px 28px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
.banban-actions .btn-coral{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff}
.banban-actions .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
.banban-qr{flex:0 0 200px;text-align:center;position:relative;z-index:1}
.qr-box{width:160px;height:160px;background:#fff;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#8B98B5;font-size:13px}
.banban-qr p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.7}
.teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.teacher{background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:22px;display:flex;gap:16px;align-items:flex-start}
.teacher h4{font-size:16px;color:#0F1A33}
.teacher .pos{font-size:12.5px;color:#2563EB;margin:3px 0 6px}
.teacher p{font-size:13px;color:#5B6B8C;line-height:1.7}
.teacher .meta{display:flex;gap:14px;margin-top:10px;font-size:12px;color:#8B98B5}
.article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article{background:#fff;border:1px solid #D3DCEB;border-radius:16px;overflow:hidden;transition:all .2s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.article:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,35,63,.12)}
.article-cover{aspect-ratio:4/3;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.article-body{padding:14px 16px}
.article-body h4{font-size:15px;color:#0F1A33;margin-bottom:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.article-body p{font-size:12.5px;color:#8B98B5;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-body .date{font-size:11.5px;color:#B8C2D8;margin-top:8px}
@media(max-width:1100px){.hero-inner{flex-direction:column}.hero-card{width:100%;flex:none}.cats{grid-template-columns:repeat(2,1fr)}.article-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   M4 交易组件（下单/支付/订单/兑换/私教班，源自设计稿）
   ============================================================ */
/* ---- 兑换中心 ---- */
.redeem-hero{background:linear-gradient(135deg,#0B2E6B,#1E4FD8 55%,#7C3AED);border-radius:20px;padding:40px;color:#fff;margin:26px 0 24px;position:relative;overflow:hidden;text-align:center}
.redeem-hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,92,.35),transparent 65%);top:-90px;right:-50px}
.redeem-hero h1{font-size:28px;position:relative;z-index:1}
.redeem-hero p{font-size:14px;color:rgba(255,255,255,.85);margin:10px 0 24px;position:relative;z-index:1}
.redeem-input{display:flex;gap:12px;max-width:560px;margin:0 auto;position:relative;z-index:1}
.redeem-input input{flex:1;padding:14px 20px;border-radius:999px;border:none;font-size:15px;outline:none;letter-spacing:1px}
.redeem-input button{padding:14px 34px;border-radius:999px;border:none;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.redeem-list{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:22px;box-shadow:0 2px 14px rgba(22,35,63,.07);margin-bottom:30px}
.redeem-list h3{font-size:16px;margin-bottom:6px;color:#0F1A33}
.redeem-item{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid #F0F3FA}
.redeem-item:last-child{border-bottom:none}
.redeem-item b{font-size:14.5px;color:#0F1A33}
.redeem-item .d{font-size:12px;color:#8B98B5;margin-top:3px}
.redeem-item .st{margin-left:auto;flex-shrink:0}
/* ---- 状态标签 ---- */
.status-tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:500}
.st-ok{background:#E6F7F1;color:#0F766E}
.st-pending{background:#FFF4E6;color:#B45309}
.status.vproc{display:inline-flex;align-items:center;gap:4px;animation:vprocPulse 1.4s ease-in-out infinite}
.status.vproc::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF6B35;box-shadow:0 0 0 0 rgba(255,107,53,.7);animation:vprocDot 1.4s ease-out infinite}
@keyframes vprocPulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes vprocDot{0%{box-shadow:0 0 0 0 rgba(255,107,53,.7)}70%{box-shadow:0 0 0 6px rgba(255,107,53,0)}100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}
.st-off{background:#F1F3F8;color:#8B98B5}
.st-no{background:#FEF3F2;color:#E24B4A}
/* ---- 私教班 ---- */
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.activity-card{background:#fff;border:1px solid #D3DCEB;border-radius:18px;overflow:hidden;transition:all .25s;cursor:pointer;text-decoration:none;color:inherit;display:block;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.activity-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,35,63,.14);border-color:#BFCCE2}
.activity-cover{aspect-ratio:16/7;color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.activity-cover h3{font-size:20px;font-weight:700}
.tag2{display:inline-block;width:fit-content;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;font-size:12px}
.tag2.done{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.act-body{padding:16px 18px}
.act-row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px dashed #EEF2FA;color:#5B6B8C}
.act-row b{color:#0F1A33}
.act-foot{display:flex;align-items:center;margin-top:14px}
.quota-bar{height:7px;background:#E9EFF8;border-radius:99px;overflow:hidden}
.quota-bar i{display:block;height:100%;background:linear-gradient(90deg,#FF6B35,#FF8A5C);border-radius:99px}
.quota-bar.full i{background:#D5DCEA}
.op-btn{display:inline-block;padding:8px 20px;border-radius:9px;border:1px solid #DCE4F2;background:#fff;font-size:13px;color:#26324D;cursor:pointer;font-family:inherit;text-decoration:none}
.op-btn:hover{border-color:#2563EB;color:#2563EB}
.op-solid{background:linear-gradient(135deg,#2563EB,#4F46E5);color:#fff;border:none}
.op-solid:hover{color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.3)}
.op-line{background:#fff;color:#3A4765;border:1px solid #D3DCEB}
/* ---- 活动详情 ---- */
.act-detail-hero{background:linear-gradient(135deg,#0B2E6B,#1E4FD8 55%,#7C3AED);border-radius:20px;padding:34px;color:#fff;margin:24px 0;position:relative;overflow:hidden}
.act-detail-hero h1{font-size:26px;margin-bottom:14px}
.act-meta-row{display:flex;gap:28px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.85)}
.act-meta-row b{color:#fff}
.act-price-box{margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.act-price-box .p{font-size:30px;font-weight:700;color:#FFD9A6}
.act-price-box .btn{display:inline-block;padding:12px 34px;border-radius:999px;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px rgba(255,107,53,.4)}
/* ---- 活动详情 · 关注服务号（设计稿 follow-card）---- */
.follow-card{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:22px;display:flex;gap:20px;align-items:center;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.follow-card .qr{width:104px;height:104px;flex-shrink:0;background:repeating-linear-gradient(45deg,#16233F 0 5px,#fff 5px 10px,#16233F 10px 15px,#fff 15px 20px);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.follow-card .qr img{width:100%;height:100%;object-fit:cover}
.follow-card .qr span{background:#fff;font-size:11px;padding:3px 8px;border-radius:6px;color:#16233F}
.follow-card b{font-size:16px;display:block;margin-bottom:5px}
.follow-card p{font-size:14px;color:#5B6B8C}
/* ---- 活动报名（设计稿 signup-box / pay-box / group-qr）---- */
.signup-box{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:24px;margin-bottom:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.signup-box h3{font-size:18px;font-weight:600;margin-bottom:16px}
.signup-success{display:none;background:#E6F7F1;border:1px solid #9FE1CB;border-radius:14px;padding:18px 20px;margin-top:16px}
.signup-success.show{display:block}
.signup-success b{color:#0F766E;font-size:16px}
.pay-box{display:none;margin-top:16px;background:#F8FAFF;border:1px solid #D3DCEB;border-radius:14px;padding:18px}
.pay-box.show{display:block}
.pay-options{display:flex;gap:12px;margin-top:12px}
.pay-opt{flex:1;border:1px solid #E3E9F5;border-radius:14px;padding:16px;cursor:pointer;background:#fff;transition:.2s}
.pay-opt:hover{border-color:#2563EB;box-shadow:0 4px 14px rgba(37,99,235,.12)}
.pay-opt.on{border-color:#2563EB;background:#EDF3FF}
.pay-opt b{font-size:15px;color:#26324D;display:block;margin-bottom:6px}
.pay-opt span{font-size:13px;color:#8B98B5;line-height:1.7;display:block}
.pay-opt .price{font-size:20px;color:#FF6B35;font-weight:700;margin-top:8px}
.pay-body{display:none;margin-top:14px;background:#fff;border:1px dashed #AFC4E8;border-radius:12px;padding:16px}
.pay-body.show{display:block}
.pay-qr{width:130px;height:130px;background:repeating-linear-gradient(45deg,#16233F 0 5px,#fff 5px 10px,#16233F 10px 15px,#fff 15px 20px);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.pay-qr img{width:100%;height:100%;object-fit:cover}
.pay-qr span{background:#fff;font-size:11px;padding:3px 8px;border-radius:6px;color:#16233F}
.pay-account{background:#F8FAFF;border:1px solid #E3E9F5;border-radius:10px;padding:10px 14px;font-size:14px;color:#3A4765;margin-top:10px;line-height:2}
.pay-wait{display:none;margin-top:14px;background:#FFF8F0;border:1px solid #FFD9C2;border-radius:12px;padding:14px 16px;font-size:14px;color:#B45309;line-height:1.8}
.pay-wait.show{display:block}
.group-qr{display:flex;gap:20px;margin-top:14px;align-items:center;flex-wrap:wrap}
.group-qr .qr{width:110px;height:110px;background:repeating-linear-gradient(45deg,#16233F 0 5px,#fff 5px 10px,#16233F 10px 15px,#fff 15px 20px);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.group-qr .qr img{width:100%;height:100%;object-fit:cover}
.group-qr .qr span{background:#fff;font-size:11px;padding:3px 8px;border-radius:6px;color:#16233F}
.group-qr p{font-size:14px;color:#3A4765}
.group-qr p small{display:block;color:#8B98B5;font-size:13px;margin-top:4px}
/* ---- 活动详情内容（设计稿 detail-content）---- */
.detail-content{background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:30px 34px;margin-top:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.detail-content h3{font-size:20px;font-weight:700;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #EEF2F9}
.detail-content h4{font-size:17px;font-weight:600;margin:24px 0 12px}
.detail-content p{font-size:15px;color:#3A4765;line-height:2;margin-bottom:14px}
.detail-content ul{list-style:none}
.detail-content li{font-size:15px;color:#3A4765;padding:9px 0;border-bottom:1px dashed #F0F3FA;display:flex;gap:10px;align-items:center}
.detail-content li:last-child{border-bottom:none}
.detail-content li i{font-style:normal;color:#2563EB;font-weight:500;flex-shrink:0}
/* 详情富文本图片/视频自适应宽度（防止出框） */
.detail-content img,.detail-content video{max-width:100%;height:auto;border-radius:8px}
.detail-content iframe{max-width:100%;border:none}
.content-media{display:flex;gap:18px;margin:16px 0}
.content-img{flex:1;height:210px;border-radius:14px;background:linear-gradient(135deg,#DCE7FB,#EEF3FF);display:flex;align-items:center;justify-content:center;color:#2563EB;font-size:15px}
.content-video{flex:1.2;height:210px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#1D3A75,#0B2149 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:10px;cursor:pointer}
.content-video .play{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#FF6B35,#FF8A5C);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 20px rgba(255,107,53,.35)}
.content-video span{font-size:13px;color:rgba(255,255,255,.7)}
/* ---- 活动报名须知 / 往期回顾（设计稿 act-tips / past-card）---- */
.act-tips{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:22px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.act-tips h3{font-size:17px;font-weight:600;margin-bottom:12px}
.act-tips li{font-size:14px;color:#3A4765;padding:8px 0;border-bottom:1px dashed #EEF2F9;list-style:none;display:flex;gap:10px}
.act-tips li:last-child{border-bottom:none}
.act-tips li i{font-style:normal;color:#2563EB;font-weight:500}
.past-card{background:#fff;border:1px solid #D3DCEB;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(22,35,63,.06);cursor:pointer;transition:all .2s}
.past-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,35,63,.12)}
.past-cover{aspect-ratio:4/3;color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.past-cover .tag2{width:fit-content;font-size:12px;background:rgba(255,255,255,.25);padding:3px 10px;border-radius:999px}
.past-cover b{font-size:16px;font-weight:600;line-height:1.4}
.past-body{padding:12px 14px;font-size:13px;color:#8B98B5}
/* 活动报名表单（详情页第二步） */
.signup-form{display:flex;flex-direction:column;align-items:flex-start}
.signup-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;width:100%}
.signup-row label{font-size:13.5px;color:#3A4765;font-weight:500}
.signup-input{max-width:300px;padding:11px 14px;border:1px solid #D3DCEB;border-radius:10px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.signup-input:focus{border-color:#2563EB}
.signup-submit{display:block;width:100%;max-width:300px;padding:12px 0;border-radius:999px;font-size:15px;font-weight:600;margin-top:4px;cursor:pointer;text-align:center;border:none}
.signup-tip{font-size:13px;color:#8B98B5;margin-top:14px;line-height:1.8}
.signup-form + .signup-form{margin-top:18px}
/* ---- 订单 ---- */
.order-card{background:#fff;border:1px solid #D3DCEB;border-radius:16px;margin-bottom:16px;overflow:hidden;box-shadow:0 2px 12px rgba(22,35,63,.06)}
.order-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#FAFCFF;border-bottom:1px solid #F0F3FA;font-size:12.5px;color:#8B98B5}
.order-body{display:flex;align-items:center;gap:16px;padding:16px 18px}
.order-thumb{width:88px;height:66px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.order-info{flex:1;min-width:0}
.order-info b{font-size:15px;color:#0F1A33;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}
.order-info .d{font-size:12px;color:#8B98B5;margin-top:4px}
.order-price{font-size:19px;color:#FF6B35;font-weight:700;flex-shrink:0}
.order-price s{font-size:12px;color:#B8C2D8;font-weight:400;margin-left:6px}
.order-foot{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border-top:1px solid #F0F3FA}
.order-foot .time{font-size:12px;color:#8B98B5}
/* ---- 下单确认 ---- */
.checkout-card{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:24px;box-shadow:0 2px 14px rgba(22,35,63,.07);margin:24px 0}
.checkout-head{font-size:17px;font-weight:700;color:#0F1A33;padding-bottom:14px;border-bottom:1px solid #F0F3FA;margin-bottom:18px}
.checkout-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed #F0F3FA;font-size:14px;color:#3A4765}
.checkout-row .lb{width:110px;color:#8B98B5;flex-shrink:0}
.checkout-row b{color:#0F1A33}
.checkout-sum{margin-top:18px;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#FFF7F2;border-radius:12px}
.checkout-sum .t{font-size:13px;color:#8B98B5}
.checkout-sum .p{font-size:24px;color:#FF6B35;font-weight:700}
/* ---- 支付页 ---- */
.pay-hero{max-width:640px;margin:40px auto;background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:36px;text-align:center;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.pay-hero h2{font-size:15px;color:#8B98B5;font-weight:400}
.pay-hero .amount{font-size:42px;font-weight:700;color:#FF6B35;margin:12px 0 6px}
.pay-hero .title{font-size:14px;color:#5B6B8C;margin-bottom:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-methods{border:1px solid #E3E9F5;border-radius:14px;overflow:hidden;margin-bottom:22px}
.pay-method{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;border-bottom:1px solid #F0F3FA}
.pay-method:last-child{border-bottom:none}
.pay-method .ic{width:34px;height:34px;border-radius:10px;background:#07C160;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.pay-method b{font-size:14.5px;color:#0F1A33;flex:1}
.pay-method span{font-size:12px;color:#8B98B5}
.pay-method.on{background:#F0FDF4;border-color:#07C160}
.pay-btn{display:block;width:100%;padding:15px 0;border:none;border-radius:999px;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(255,107,53,.35)}
.pay-btn.blue{background:linear-gradient(135deg,#2563EB,#4F46E5);box-shadow:0 8px 22px rgba(37,99,235,.3)}
.pay-tip{font-size:12px;color:#8B98B5;margin-top:14px;line-height:1.8}
.pay-success{max-width:640px;margin:60px auto;background:#fff;border:1px solid #D3DCEB;border-radius:20px;padding:48px;text-align:center;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.pay-success .ok{width:76px;height:76px;border-radius:50%;background:#E6F7F1;color:#0F766E;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.pay-success h2{font-size:22px;color:#0F1A33;margin-bottom:8px}
.pay-success p{font-size:13.5px;color:#8B98B5;margin-bottom:26px}
@media(max-width:1100px){.activity-grid{grid-template-columns:repeat(2,1fr)}.redeem-input{flex-direction:column}}

/* ============================================================
   文章详情组件（源自《前台UI设计稿》p-article 原样提取）
   ============================================================ */
.article-detail{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:26px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.article-detail .art-cover{aspect-ratio:16/6;border-radius:14px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;margin-bottom:22px;background-size:cover;background-position:center}
.article-detail h1{font-size:26px;color:#0F1A33;line-height:1.5;margin-bottom:12px;word-break:break-word}
.article-detail .meta{font-size:13px;color:#8B98B5;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #F0F3FA}
.article-detail .art-content{font-size:15px;color:#3A4765;line-height:2;word-break:break-word}
.article-detail .art-content p{margin:0 0 14px}
.article-detail .art-content img{max-width:100%;border-radius:10px;margin:8px 0}
.article-detail .art-content h3{font-size:19px;color:#0F1A33;margin:22px 0 10px}
.article-detail .art-content blockquote{border-left:4px solid #2563EB;background:#F0F6FF;padding:12px 18px;border-radius:0 10px 10px 0;color:#5B6B8C;margin:14px 0}
.article-detail .art-figure{margin:18px 0;text-align:center}
.article-detail .art-figure .fig-img{aspect-ratio:16/7;border-radius:12px;background:linear-gradient(135deg,#122B5C,#7C3AED);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:16px}
.article-detail .art-figure .fig-cap{font-size:12px;color:#8B98B5;margin-top:8px}
.art-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F3FA;font-size:13.5px;color:#3A4765;text-decoration:none;min-width:0}
.art-line:last-child{border-bottom:none}
.art-line:hover{color:#2563EB}
.art-line .no{width:20px;height:20px;border-radius:6px;background:#F1F4FA;color:#8B98B5;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.art-line .no.top{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff}
.art-line b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.art-line span:last-child{font-size:11px;color:#B8C2D8;flex-shrink:0}

/* ============================================================
   公告栏（容器边框 · 单行显示 · 每 5 秒上下滚动一条）
   ============================================================ */
.announce-box{background:#fff;border:1px solid #D3DCEB;border-radius:16px;box-shadow:0 2px 14px rgba(22,35,63,.07);overflow:hidden}
.announce-box .ann-head{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:none;background:#FAFCFF;text-decoration:none;transition:background .2s}
.announce-box .ann-head:hover{background:#F0F6FF}
.announce-box .ann-ic{font-size:16px;flex-shrink:0}
.announce-box .ann-tag{font-size:13px;color:#1E40AF;background:#DCE9FC;border:1px solid #BFD3F5;border-radius:999px;padding:3px 12px;flex-shrink:0}
.announce-box .ann-title{font-size:13.5px;color:#3A4765;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.announce-box .ann-title i{font-style:normal;transition:opacity .3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.announce-box .ann-more{margin-left:auto;font-size:12.5px;color:#2563EB;flex-shrink:0;text-decoration:none}
.home-banner{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(22,35,63,.12);aspect-ratio:16/5}
.hb-track{display:flex;height:100%;transition:transform .5s ease}
.hb-slide{flex:0 0 100%;height:100%;background:linear-gradient(135deg,#0B2E6B,#1E4FD8 55%,#7C3AED);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:26px;text-decoration:none;position:relative}
.hb-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,33,73,0) 55%,rgba(11,33,73,.6))}
.hb-title{position:relative;z-index:1;color:#fff;font-size:20px;font-weight:700}
.hb-dots{position:absolute;bottom:14px;right:20px;display:flex;gap:8px;z-index:2}
.hb-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.hb-dots i.on{background:#FF8A5C;width:22px;border-radius:99px}

/* ============================================================
   社区广场组件（源自《前台UI设计稿》p-community / p-post 原样提取）
   ============================================================ */
.cm-swiper{position:relative;border-radius:18px;overflow:hidden;margin-bottom:22px;box-shadow:0 8px 24px rgba(22,35,63,.12)}
.cm-slide{display:none;min-height:170px;padding:30px 36px;color:#fff;align-items:center;justify-content:space-between}
.cm-slide.on{display:flex}
.cm-slide h2{font-size:22px;font-weight:700;margin-bottom:8px}
.cm-slide p{font-size:13.5px;color:rgba(255,255,255,.85)}
.cm-btn{display:inline-block;margin-top:16px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:8px 22px;color:#fff;font-size:13px;cursor:pointer}
.cm-art{font-size:64px;font-weight:700;opacity:.35;flex-shrink:0;margin-left:30px}
.cm-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.cm-arrow.left{left:14px}.cm-arrow.right{right:14px}
.cm-dots{position:absolute;bottom:12px;right:20px;display:flex;gap:7px;z-index:2}
.cm-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.cm-dots i.on{background:#FF8A5C;width:22px;border-radius:99px}
.compose{background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:16px 18px;margin-bottom:20px;box-shadow:0 2px 14px rgba(22,35,63,.06)}
.compose-head{display:flex;gap:12px;align-items:center}
.compose-head input{flex:1;padding:11px 16px;border:1px solid #DCE3F0;border-radius:999px;font-size:14px;outline:none;background:#F8FAFF}
.compose-head input:focus{border-color:#7C9BDF}
.compose-tools{display:flex;gap:16px;margin-top:12px;font-size:13px;color:#5B6B8C;cursor:pointer;flex-wrap:wrap}
.compose-tools span:hover{color:#2563EB}
.cm-workwall{margin-bottom:20px}
.cm-wall-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.cm-wall-head h3{font-size:16px;color:#0F1A33}
.cm-wall-head .sub3{font-size:12px;color:#8B98B5}
.cm-scroll{overflow:hidden;border-radius:14px}
.cm-track{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.cm-wcard{flex:0 0 200px;background:#fff;border:1px solid #DCE3F0;border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s}
.cm-wcard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(22,35,63,.12)}
.cm-wcard .wcover{height:90px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:600}
.cm-wcard .wbody{padding:10px 12px}
.cm-wcard .wbody b{font-size:13px;color:#0F1A33;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-wcard .wbody span{font-size:11.5px;color:#8B98B5}
.seg{display:flex;gap:6px;background:#F1F4FA;border-radius:999px;padding:5px;margin:6px 0 20px;width:fit-content;flex-wrap:wrap}
.seg a{padding:7px 20px;border-radius:999px;font-size:13.5px;color:#5B6B8C;cursor:pointer;text-decoration:none}
.seg a.on{background:#fff;color:#0F1A33;font-weight:600;box-shadow:0 2px 8px rgba(22,35,63,.1)}
.feed{display:flex;flex-direction:column;gap:18px}
.feed-card{background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:18px 20px;box-shadow:0 2px 14px rgba(22,35,63,.06)}
.feed-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.feed-top b{font-size:14.5px;color:#0F1A33;display:block}
.feed-top span{font-size:12px;color:#8B98B5}
.feed-tag{background:#EDF3FF;color:#2563EB;border-radius:999px;padding:3px 12px;font-size:11.5px;margin-left:auto;flex-shrink:0}
.feed-text{font-size:14px;color:#3A4765;line-height:1.9;word-break:break-word}
.feed-imgs{display:grid;gap:10px;margin-top:12px}
.fi{aspect-ratio:16/9;border-radius:12px;color:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:13px}
.feed-actions{display:flex;gap:20px;margin-top:14px;padding-top:12px;border-top:1px solid #F0F3FA}
.feed-actions a{font-size:13px;color:#5B6B8C;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:5px}
.feed-actions a:hover{color:#2563EB}
.like-btn.on{color:#E24B4A}
.feed-comments{display:none;margin-top:12px;background:#F8FAFF;border-radius:12px;padding:12px 14px}
.fc-row{font-size:13px;color:#3A4765;padding:4px 0;line-height:1.7}
.fc-row b{color:#0F1A33}
.fc-input{display:flex;gap:10px;margin-top:10px}
.fc-input input{flex:1;padding:8px 14px;border:1px solid #DCE3F0;border-radius:999px;font-size:13px;outline:none;background:#fff}
.fc-input button{padding:8px 18px;border:none;border-radius:999px;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;font-size:13px;cursor:pointer}
.user-card .uc-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.user-card .uc-head b{font-size:15px;color:#0F1A33;display:block}
.user-card .uc-head span{font-size:12px;color:#8B98B5;line-height:1.6}
.uc-stats{display:flex;border-top:1px solid #F0F3FA;border-bottom:1px solid #F0F3FA;margin-bottom:14px}
.uc-stats div{flex:1;text-align:center;padding:12px 0}
.uc-stats b{font-size:18px;color:#0F1A33;display:block}
.uc-stats span{font-size:11px;color:#8B98B5}
.uc-actions{display:flex;gap:8px}
.uc-actions button{flex:1;padding:9px 0;border-radius:9px;font-size:13px;cursor:pointer;font-family:inherit}
.uc-actions .solid{background:linear-gradient(135deg,#2563EB,#4F46E5);color:#fff;border:none}
.uc-actions .line{background:#fff;color:#3A4765;border:1px solid #DCE3F0}
.cm-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F3FA;font-size:13.5px;color:#3A4765;text-decoration:none;min-width:0}
.cm-line:last-child{border-bottom:none}
.cm-line:hover{color:#2563EB}
.cm-line .no{width:20px;height:20px;border-radius:6px;background:#F1F4FA;color:#8B98B5;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cm-line .no.top{background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff}
.cm-line b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cm-line span:last-child{font-size:11px;color:#B8C2D8;flex-shrink:0}
.cm-user{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F3FA}
.cm-user:last-child{border-bottom:none}
.cm-user b{font-size:13.5px;color:#0F1A33;display:block}
.cm-user span{font-size:11.5px;color:#8B98B5}
.cm-user .u-rank{margin-left:auto;font-size:12px;color:#B8C2D8;font-weight:700}
/* ---- 贴子详情 ---- */
.post-card{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:24px 26px;box-shadow:0 2px 14px rgba(22,35,63,.07);margin-bottom:18px}
.post-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.post-head b{font-size:15px;color:#0F1A33;display:block}
.post-head span{font-size:12px;color:#8B98B5}
.btn-follow{margin-left:auto;background:#fff;border:1px solid #2563EB;color:#2563EB;border-radius:999px;padding:7px 20px;font-size:13px;cursor:pointer;flex-shrink:0}
.btn-follow.on{background:#EDF3FF}
.post-title{font-size:22px;color:#0F1A33;margin-bottom:14px;line-height:1.5;word-break:break-word}
.post-text{font-size:14.5px;color:#3A4765;line-height:2;word-break:break-word}
.post-meta{font-size:12px;color:#8B98B5;margin-top:16px;padding-top:14px;border-top:1px solid #F0F3FA}
.comment-panel{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:22px 26px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.cp-head{font-size:15px;color:#0F1A33;font-weight:600;padding-bottom:12px;border-bottom:1px solid #F0F3FA;margin-bottom:6px}
.cp-head span{font-size:12px;color:#8B98B5;font-weight:400;margin-left:8px}
.comment-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F7F9FD}
.comment-item b{font-size:13.5px;color:#0F1A33}
.comment-item .ct{font-size:13.5px;color:#3A4765;line-height:1.8;margin:3px 0}
.comment-item .cm{font-size:11.5px;color:#B8C2D8}
.comment-item .clk{color:#8B98B5;font-size:12px;cursor:pointer;flex-shrink:0;align-self:flex-start}
.comment-item .clk.on{color:#E24B4A}
.comment-input{display:flex;gap:12px;align-items:center;margin-top:16px}
.comment-input input{flex:1;padding:10px 16px;border:1px solid #DCE3F0;border-radius:999px;font-size:13.5px;outline:none;background:#F8FAFF}
.comment-input button{padding:10px 24px;border:none;border-radius:999px;background:linear-gradient(135deg,#2563EB,#4F46E5);color:#fff;font-size:13.5px;cursor:pointer}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0}

/* 社区：分类+发帖按钮 与 标题可点 */
.seg-wrap{display:flex;align-items:center;gap:12px;margin:6px 0 20px}
.seg-wrap .seg{margin:0}
.seg-post{margin-left:auto;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;border:none;border-radius:999px;padding:9px 22px;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(255,107,53,.3);flex-shrink:0;font-family:inherit}
.seg-post:hover{box-shadow:0 6px 16px rgba(255,107,53,.4)}
a.feed-text{display:block;color:#3A4765;text-decoration:none;transition:color .15s}
a.feed-text:hover{color:#2563EB}

/* 社区：发帖框 textarea + 大号发布按钮 + 作品卡链接 + 模态 */
.compose-textarea{flex:1;min-height:100px;max-height:240px;padding:14px 18px;border:1px solid #DCE3F0;border-radius:18px;font-size:14.5px;color:#0F1A33;background:#F8FAFF;outline:none;resize:vertical;font-family:inherit;line-height:1.7;transition:border-color .2s}
.compose-textarea:focus{border-color:#7C9BDF;background:#fff}
.compose-submit{flex-shrink:0;align-self:flex-end;background:linear-gradient(135deg,#FF6B35,#FF8A5C);color:#fff;border:none;border-radius:999px;padding:14px 32px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(255,107,53,.35);font-family:inherit;transition:all .2s}
.compose-submit:hover{box-shadow:0 8px 22px rgba(255,107,53,.5);transform:translateY(-1px)}
a.cm-wcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.cm-wcard.on{outline:2px solid #FF6B35;outline-offset:2px;transform:scale(1.02)}
/* 作品大图模态 */
.work-modal-mask{position:fixed;inset:0;background:rgba(11,33,73,.55);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}
.work-modal-mask.show{display:flex}
.work-modal{background:#fff;border-radius:20px;width:min(560px,92vw);max-height:88vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.work-modal .wm-img{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;background:linear-gradient(135deg,#2563EB,#7C3AED)}
.work-modal .wm-body{padding:24px 28px}
.work-modal .wm-body h3{font-size:20px;color:#0F1A33;margin-bottom:10px}
.work-modal .wm-body .meta{font-size:13px;color:#8B98B5;margin-bottom:14px}
.work-modal .wm-body p{font-size:14px;color:#5B6B8C;line-height:1.8}
.work-modal .wm-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;font-size:18px;color:#0F1A33;box-shadow:0 2px 8px rgba(0,0,0,.15);font-family:inherit}
.work-modal .wm-close:hover{background:#FEF3F2;color:#E24B4A}

/* ============================================================
   微信扫码支付弹层（M8 微信支付真实对接）
   ============================================================ */
.wxqr-mask{position:fixed;inset:0;background:rgba(11,33,73,.55);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}
.wxqr-mask.show{display:flex}
.wxqr-box{background:#fff;border-radius:20px;width:min(360px,92vw);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.28);animation:wxqrIn .22s ease}
@keyframes wxqrIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.wxqr-head{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#07C160,#0F9D58);color:#fff;padding:16px 20px;font-size:16px;font-weight:600}
.wxqr-head b{font-size:19px;margin-left:auto}
.wxqr-close{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;margin-left:10px}
.wxqr-body{padding:26px 26px 20px;text-align:center}
.wxqr-body #wxqrCanvas{width:210px;height:210px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:1px solid #EEF2FA;border-radius:14px;padding:12px;box-sizing:content-box}
.wxqr-body #wxqrCanvas img,.wxqr-body #wxqrCanvas canvas{max-width:210px;max-height:210px}
.wxqr-tip{font-size:13px;color:#5B6B8C;line-height:1.9}
.wxqr-tip b{color:#0F1A33}
.wxqr-status{font-size:12.5px;color:#07C160;margin-top:10px;min-height:18px}
.wxqr-foot{background:#F7FAF8;border-top:1px solid #E8F0EB;padding:12px;text-align:center;font-size:12px;color:#8B98B5}

/* ============================================================
   移动端适配（M8 打磨上线 · 手机/平板访问）
   桌面 1400px 布局保持不变，仅在此断点内缩放
   ============================================================ */
@media (max-width: 900px){
  /* 导航 */
  .nav-inner{gap:14px;padding:0 16px}
  .nav-links{overflow-x:auto;scrollbar-width:none;gap:2px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:8px 12px;font-size:13.5px;white-space:nowrap}
  main{padding:0 16px}
  /* 双栏 → 单栏 */
  .layout{flex-direction:column}
  .aside-r{width:100%;position:static;order:2}
  .detail-top{flex-direction:column;padding:20px}
  .detail-cover{flex:none;width:100%;aspect-ratio:16/8}
  .player-page{flex-direction:column}
  .player-side{width:100%}
  .player-main{width:100%}
  .banban{flex-direction:column;padding:28px 24px;text-align:center;gap:22px}
  .banban-actions{justify-content:center}
  .banban-qr{margin:0 auto}
  /* 首页轮播高度 */
  .home-banner{aspect-ratio:16/6}
  .hb-slide{padding:18px}
  .hb-title{font-size:16px}
  /* 网格收缩 */
  .course-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .learn-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .teacher-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .activity-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .article-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .rel-grid{grid-template-columns:1fr 1fr;gap:12px}
  /* 活动详情 */
  .act-detail-hero{padding:24px 20px}
  /* 支付收银台 */
  .pay-hero{padding:24px 18px;margin:24px auto}
  /* 社区 */
  .cm-wcard{flex:0 0 150px}
  .compose{padding:14px}
  .seg-wrap{flex-direction:column;align-items:stretch}
  .seg{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .seg a{white-space:nowrap}
  .seg-post{margin-left:0;align-self:center}
  /* 文章详情 */
  .article-detail{padding:20px 16px}
  .article-detail h1{font-size:21px}
  /* 兑换 */
  .redeem-input{flex-direction:column}
  .redeem-input button{width:100%}
}
@media (max-width: 600px){
  /* 导航：隐藏次要文字，保留核心 */
  .logo{font-size:16px}
  .logo i{width:28px;height:28px;font-size:12px}
  .nav-user .u span{display:none}
  .nav-user .out{font-size:12px}
  .nav-user .btn{padding:7px 14px;font-size:12px}
  /* Hero 缩放 */
  .hero{padding:36px 16px}
  .hero-text h1{font-size:26px}
  .hero-stats{gap:14px}
  .hero-card{padding:22px 18px}
  /* 网格 → 单列 */
  .course-grid{grid-template-columns:1fr;gap:14px}
  .learn-grid{grid-template-columns:1fr;gap:14px}
  .teacher-grid{grid-template-columns:1fr;gap:14px}
  .activity-grid{grid-template-columns:1fr;gap:14px}
  .article-grid{grid-template-columns:1fr;gap:14px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .rel-grid{grid-template-columns:1fr;gap:12px}
  /* 详情 */
  .detail-top{padding:14px;border-radius:16px;gap:16px}
  .detail-cover{aspect-ratio:16/10;padding:16px}
  .detail-info h1{font-size:20px}
  .detail-stats{flex-wrap:wrap}
  .player-screen video{height:230px !important}
  .player-title b{font-size:15px}
  .player-nav{flex-direction:column}
  .player-nav .btn{width:100%}
  /* 首页 */
  .home-banner{aspect-ratio:16/9}
  .hb-slide{padding:14px}
  .announce-box .ann-head{padding:12px 14px}
  .ann-title{font-size:12px}
  /* 社区 */
  .compose-head{flex-direction:column;align-items:stretch}
  .compose-submit{width:100%;align-self:stretch;padding:12px}
  .feed-card{padding:14px 14px}
  .cm-wcard{flex:0 0 130px}
  .cm-track{gap:10px}
  .cm-slide{padding:22px 18px}
  .post-card,.comment-panel{padding:18px 14px}
  .comment-input{flex-direction:column}
  .comment-input button{width:100%}
  /* 收银台 */
  .pay-hero h2{font-size:13px}
  .pay-hero .amount{font-size:34px}
  .pay-method{padding:12px 14px}
  .pay-btn{width:100%}
  /* 文章 */
  .article-detail .art-cover{aspect-ratio:16/7}
  /* 我的课程/订单 */
  .checkout-card{padding:18px 14px}
  .checkout-sum{flex-direction:column;gap:8px;align-items:flex-start}
  /* 私教班列表卡 */
  .activity-card .activity-cover{aspect-ratio:16/7}
  /* 播放器章节 */
  .pch-item{padding:9px 12px}
  .notes-box{padding:16px 14px}
  .note-input{flex-direction:column}
  .note-input button{width:100%}
  /* 兑换中心 */
  .redeem-input input{font-size:14px;padding:12px 16px}
  /* 通用按钮行 */
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{text-align:center}
}

/* ============================================================
   课程详情页：详情/章节目录 Tab（M8.2 用户需求）
   ============================================================ */
.course-tabs{display:flex;gap:6px;background:#F1F4FA;border-radius:999px;padding:5px;width:fit-content;margin-bottom:20px;flex-wrap:wrap}
.course-tabs a{padding:9px 26px;border-radius:999px;font-size:14px;color:#5B6B8C;cursor:pointer;text-decoration:none;white-space:nowrap}
.course-tabs a:hover{color:#0F1A33}
.course-tabs a.on{background:#fff;color:#0F1A33;font-weight:600;box-shadow:0 2px 8px rgba(22,35,63,.1)}
.course-pane{display:none}
.course-pane.on{display:block}
.course-detail{background:#fff;border:1px solid #D3DCEB;border-radius:18px;padding:26px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.course-detail{font-size:15px;color:#3A4765;line-height:2;word-break:break-word}
.course-detail p{margin:0 0 14px}
.course-detail img{max-width:100%;border-radius:10px;margin:8px 0}
.course-detail h1,.course-detail h2,.course-detail h3{color:#0F1A33;margin:22px 0 10px;line-height:1.5}
.course-detail h1{font-size:22px}.course-detail h2{font-size:20px}.course-detail h3{font-size:18px}
.course-detail blockquote{border-left:4px solid #2563EB;background:#F0F6FF;padding:12px 18px;border-radius:0 10px 10px 0;color:#5B6B8C;margin:14px 0}
.course-detail ul,.course-detail ol{padding-left:22px;margin:10px 0}
.course-detail li{margin:4px 0}
.course-detail a{color:#2563EB}
.course-detail table{width:100%;border-collapse:collapse;margin:12px 0}
.course-detail td,.course-detail th{border:1px solid #E3E9F5;padding:8px 12px}
@media (max-width:600px){
  .course-tabs{width:100%}
  .course-tabs a{flex:1;text-align:center;padding:10px 8px;font-size:13.5px}
  .course-detail{padding:18px 14px}
}

/* ============================================================
   专栏课程（前台列表/详情，复用 course-card/detail-top 组件）
   ============================================================ */
.chapter-item .ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-item .ct-sub{font-size:12px;color:#8B98B5;flex-shrink:0}
.chapter-item .ct + .ct-sub{margin-right:6px}

/* 社区：帖子图片卡可点（a.fi 兼容） */
a.fi{text-decoration:none}

/* ==================== 课程列表页：分类横向条 + 放大卡片 ==================== */
.list-wrap .cat-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid #D3DCEB;border-radius:16px;padding:14px 18px;box-shadow:0 2px 14px rgba(22,35,63,.07)}
.list-wrap .cat-bar .cat-label{font-size:14px;color:#8B98B5;flex:none;margin-right:6px}
.list-wrap .cat-bar a{padding:8px 18px;border-radius:999px;font-size:14.5px;color:#3A4765;text-decoration:none;background:#F4F7FC;border:1px solid transparent;transition:all .2s;white-space:nowrap}
.list-wrap .cat-bar a:hover{color:#2563EB;background:#EDF3FF}
.list-wrap .cat-bar a.on{background:#EDF3FF;border-color:#BFD3F5;color:#2563EB;font-weight:600}
.list-wrap .cat-bar a.parent{font-weight:500}
.list-wrap .cat-bar a.sub{font-size:13px;color:#8B98B5;background:transparent;padding:6px 12px}
.list-wrap .cat-bar a.sub:hover{color:#2563EB}
.list-wrap .cat-bar a.sub.on{color:#2563EB;font-weight:600;background:#EDF3FF;border-color:#BFD3F5}
.list-wrap .cat-bar .cat-sep{width:1px;height:18px;background:#E4EAF5;margin:0 4px;flex:none}
/* 一行四张 · 卡片放大（列表页专用，不影响首页/专栏/我的课程） */
.list-grid{gap:26px}
.list-grid .course-cover{padding:20px}
.list-grid .course-cover .cteacher{font-size:14.5px}
.list-grid .course-body{padding:18px 22px 20px}
.list-grid .course-body h4{font-size:18px;margin-bottom:10px}
.list-grid .course-meta{margin-bottom:14px}
.list-grid .course-meta span{font-size:14.5px}
.list-grid .price{font-size:15px}
.list-grid .buy-btn{font-size:15px;padding:9px 22px}