/* ============================================================
   企业培训 · 在线课程（PC 版与移动版共用）
   依赖两版外壳已有的 CSS 变量：--purple --pink --bg --ink --gray --line --grad
   ============================================================ */
.course-band{margin:34px 0 0;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#f3f0ff 0%,#fdeef6 100%);border:1px solid rgba(124,58,237,.12);}
.course-band-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.course-band h2{font-size:24px;line-height:1.35;color:var(--ink);font-weight:800;margin:0 0 8px;}
.course-band p{font-size:13.5px;line-height:1.85;color:var(--gray);max-width:720px;margin:0;}
.course-band-tag{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:1.5px;color:#fff;background:var(--grad);padding:7px 14px;border-radius:999px;}
.course-fig{margin:18px 0 0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);}
.course-fig img{display:block;width:100%;height:auto;}
.course-fig.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;border:0;}
.course-fig.two>div{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);}
.course-fig.two img{display:block;width:100%;height:auto;}
.course-dirs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 0;}
.course-dir{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 15px;transition:transform .22s ease,box-shadow .22s ease;}
.course-dir:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,32,58,.09);}
.course-dir b{display:block;font-size:14px;color:var(--ink);margin-bottom:6px;}
.course-dir span{font-size:12px;line-height:1.7;color:var(--gray);}
.course-dir i{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--purple);margin-bottom:8px;}
.course-rule{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:#fff;border:1px dashed rgba(124,58,237,.35);border-radius:14px;padding:14px 18px;margin:18px 0 0;}
.course-rule b{font-size:13px;color:var(--ink);}
.course-rule span{font-size:12.5px;color:var(--gray);line-height:1.7;}
.course-rule .course-rule-num{flex:0 0 auto;font-size:17px;font-weight:900;color:#fff;background:var(--grad);border-radius:10px;padding:7px 12px;letter-spacing:.5px;}
.course-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 14px;}
.course-list-head h3{font-size:19px;color:var(--ink);font-weight:800;margin:0;}
.course-list-head span{font-size:12.5px;color:var(--gray);}
.course-sum{font-size:12.5px;color:var(--gray);margin:0 0 12px;line-height:1.8;}

/* 列表 / 三态 */
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.course-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(22,32,58,.05);transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;}
.course-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,32,58,.12);}
.course-cover{position:relative;display:block;width:100%;aspect-ratio:16/10;border:0;padding:0;background:#f2effc;cursor:pointer;overflow:hidden;}
.course-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.course-card:hover .course-cover img{transform:scale(1.04);}
.course-play{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(22,32,58,.2);display:grid;place-items:center;transition:transform .22s ease;}
.course-cover:hover .course-play{transform:translate(-50%,-50%) scale(1.09);}
.course-play svg{width:20px;height:20px;fill:var(--purple);margin-left:2px;}
.course-trial{position:absolute;right:11px;top:11px;font-size:11px;font-weight:800;color:#fff;background:var(--grad);padding:5px 10px;border-radius:999px;}
.course-state{position:absolute;right:11px;bottom:11px;font-size:10.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);padding:4px 9px;border-radius:6px;}
.course-card-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1;min-width:0;}
.course-labels{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px;}
.course-labels span{font-size:10.5px;font-weight:700;color:var(--purple);background:rgba(124,58,237,.09);border-radius:5px;padding:3px 8px;}
.course-labels .muted{color:var(--gray);background:rgba(22,32,58,.05);}
.course-card h4{font-size:16px;line-height:1.45;color:var(--ink);font-weight:800;margin:0 0 8px;}
.course-card p{font-size:12.5px;line-height:1.8;color:var(--gray);margin:0 0 12px;flex:1;}
.course-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--gray);border-top:1px solid var(--line);padding-top:11px;margin-bottom:12px;}
.course-meta b{color:var(--ink);font-weight:700;}
.course-go{align-self:flex-start;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:800;color:#fff;background:var(--grad);border-radius:9px;padding:9px 16px;transition:opacity .2s,transform .2s;}
.course-go:hover{opacity:.9;transform:translateX(2px);}
.course-skel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.course-skel i{display:block;height:230px;border-radius:18px;background:linear-gradient(100deg,#eef1f8 30%,#f8f9fd 50%,#eef1f8 70%);background-size:220% 100%;animation:courseShimmer 1.4s linear infinite;}
.course-empty,.course-error{text-align:center;padding:34px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--gray);line-height:1.9;}
.course-empty b,.course-error b{display:block;font-size:15px;color:var(--ink);margin-bottom:6px;}
.course-retry{margin-top:12px;border:1px solid var(--line);background:#fff;color:var(--purple);font-family:inherit;font-weight:700;font-size:12.5px;border-radius:9px;padding:8px 16px;cursor:pointer;}
@keyframes courseShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ============ 播放器弹层 ============ */
.course-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(16,22,42,.72);backdrop-filter:blur(7px);animation:cmFade .22s ease;}
.device .course-modal{position:absolute;padding:10px;}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
.cm-inner{position:relative;width:min(1020px,100%);max-height:94dvh;overflow-y:auto;background:#fff;border-radius:20px;box-shadow:0 34px 90px rgba(10,16,35,.4);animation:cmUp .3s cubic-bezier(.16,1,.3,1);}
@keyframes cmUp{from{transform:translateY(18px) scale(.98);opacity:.4}to{transform:none;opacity:1}}
.cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 14px;border-bottom:1px solid var(--line);}
.cm-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--purple);}
.cm-head h3{font-size:19px;line-height:1.4;color:var(--ink);font-weight:800;margin:5px 0 0;}
.cm-close{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(22,32,58,.07);color:var(--ink);font-size:21px;line-height:1;cursor:pointer;transition:transform .2s,background .2s;}
.cm-close:hover{background:rgba(22,32,58,.14);transform:rotate(90deg);}
.cm-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;}
.cm-left{padding:20px 20px 22px 24px;min-width:0;}
.cm-right{padding:20px 24px 22px 18px;border-left:1px solid var(--line);min-width:0;}
.cm-stage{position:relative;width:100%;aspect-ratio:16/9;background:#101426;border-radius:12px;overflow:hidden;}
.cm-stage video{width:100%;height:100%;object-fit:contain;display:block;background:#101426;}
.cm-stage video::-webkit-media-controls{display:none!important;}
.cm-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;}
.cm-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:20px;color:#fff;}
.cm-veil b{font-size:19px;font-weight:800;}
.cm-veil p{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.82);max-width:420px;margin:0;}
.cm-veil .cm-veil-ic{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:22px;}
.cm-lock{background:rgba(12,17,34,.9);}
.cm-veil .cm-btn,.cm-book{font-family:inherit;border:0;cursor:pointer;font-size:13px;font-weight:800;color:#fff;background:var(--grad);border-radius:10px;padding:11px 20px;margin-top:6px;transition:opacity .2s,transform .2s;}
.cm-veil .cm-btn:hover,.cm-book:hover{opacity:.9;transform:translateY(-1px);}
.cm-veil .cm-btn.ghost,.cm-again{background:rgba(255,255,255,.15);}
.cm-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.cm-buffering{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);padding:7px 13px;border-radius:8px;pointer-events:none;}
.cm-controls{display:flex;align-items:center;gap:10px;padding:12px 2px 0;}
.cm-cbtn{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;min-width:38px;height:34px;padding:0 9px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .2s;}
.cm-cbtn:hover{background:#f4f7fc;}
.cm-cbtn svg{width:14px;height:14px;fill:var(--ink);vertical-align:middle;display:inline-block;}
.cm-cbtn:disabled{opacity:.45;cursor:not-allowed;}
.cm-track{position:relative;flex:1;min-width:60px;height:7px;border-radius:99px;background:#e8ecf5;cursor:pointer;}
.cm-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:var(--grad);}
.cm-dot{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--purple);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(22,32,58,.2);}
.cm-time{flex:0 0 auto;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;white-space:nowrap;}
.cm-badge{flex:0 0 auto;font-size:10.5px;font-weight:800;color:#fff;background:var(--grad);border-radius:6px;padding:5px 8px;white-space:nowrap;}
.cm-notice{font-size:11.5px;line-height:1.8;color:var(--gray);background:#f7f8fc;border-radius:9px;padding:10px 12px;margin-top:12px;}
.cm-tag{display:inline-block;font-size:10.5px;font-weight:800;color:var(--purple);background:rgba(124,58,237,.09);border-radius:5px;padding:4px 9px;margin-bottom:10px;}
.cm-right h4{font-size:15px;color:var(--ink);font-weight:800;margin:0 0 8px;}
.cm-right>p{font-size:12.5px;line-height:1.85;color:var(--gray);margin:0 0 14px;}
.cm-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.cm-meta div{background:#f7f8fc;border-radius:9px;padding:9px 11px;}
.cm-meta span{display:block;font-size:10.5px;color:var(--gray);}
.cm-meta b{display:block;font-size:12.5px;color:var(--ink);margin-top:2px;}
.cm-outline{margin:0 0 16px;padding-left:19px;font-size:12px;line-height:1.9;color:var(--gray);}
.cm-outline li{margin-bottom:3px;}
.cm-book{width:100%;}
.cm-note{font-size:11px;line-height:1.8;color:var(--gray);margin:9px 0 0;}
.hidden{display:none!important;}

/* 移动版 / 窄屏：单列、紧凑控件 */
@media(max-width:900px){
  .course-dirs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .course-grid,.course-skel{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cm-body{grid-template-columns:1fr;}
  .cm-right{border-left:0;border-top:1px solid var(--line);padding:16px 20px 22px;}
  .cm-left{padding:16px 20px 18px;}
}
@media(max-width:760px){
  .course-band{padding:20px 18px;}
  .course-grid,.course-skel{grid-template-columns:1fr;}
  .course-fig.two{grid-template-columns:1fr;}
  .cm-head{padding:16px 16px 12px;}
  .cm-head h3{font-size:16px;}
  .cm-modal-inner{max-height:96dvh;}
}
.device .course-dirs{grid-template-columns:repeat(2,minmax(0,1fr));}
.device .course-grid,.device .course-skel{grid-template-columns:1fr;}
.device .course-fig.two{grid-template-columns:1fr;}
.device .course-band{padding:18px 15px;}
.device .course-band h2{font-size:20px;}
.device .cm-inner{width:100%;max-height:100%;border-radius:16px;}
.device .cm-body{grid-template-columns:1fr;}
.device .cm-left{padding:14px 14px 16px;}
.device .cm-right{border-left:0;border-top:1px solid var(--line);padding:14px 16px 20px;}
.device .cm-head{padding:14px 14px 11px;}
.device .cm-head h3{font-size:15.5px;}
.device .cm-controls{gap:6px;flex-wrap:wrap;}
.device .cm-badge{order:5;}
.device .cm-time{font-size:11px;}
.device .cm-track{flex-basis:100%;order:4;}
.device .cm-vol{display:none;}
.device .course-modal{padding:8px;}
@media(prefers-reduced-motion:reduce){
  .course-card,.course-dir,.course-cover img,.cm-inner,.course-modal,.cm-close,.cm-book,.cm-veil .cm-btn{animation:none!important;transition:none!important;}
  .course-skel i{animation:none;}
}