/* ==========================================================================
   小星云课程中心 —— 样式（在官网 style.css 之后加载，沿用同一套深空配色）
   ========================================================================== */
:root{
  --bg:#060a14; --bg2:#0a1120; --bg3:#0d1426;
  --text:#e6ecf7; --muted:#9fb0c8; --dim:#8296b3;
  --accent:#7dd3fc; --accent2:#818cf8;
  --line:rgba(96,165,250,.15);
  --grad:linear-gradient(135deg,#0ea5e9,#6366f1);
  --cardbg:linear-gradient(165deg,rgba(30,41,59,.5),rgba(13,20,38,.7));
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
}
.cn { font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:var(--text); background:var(--bg); line-height:1.75; }
.cn a { color:inherit; text-decoration:none; }
.cn * { -webkit-tap-highlight-color:transparent; }

/* 移动端导航：官网默认隐藏，课程页改为可横滑 */
@media (max-width:900px){
  .nav nav { display:flex !important; gap:16px; overflow-x:auto; max-width:62vw; scrollbar-width:none; }
  .nav nav::-webkit-scrollbar{ display:none; }
  .nav nav a { font-size:13.5px; white-space:nowrap; }
  .nav .cta { display:none; }
  .nav .wrap { height:58px; }
}

/* 容器 */
.cn-wrap { max-width:1120px; margin:0 auto; padding:0 18px; }

/* 页头 */
.cn-hero { padding:56px 0 40px; position:relative; overflow:hidden; }
.cn-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(560px 300px at 20% 10%,rgba(56,189,248,.14),transparent 62%),
             radial-gradient(620px 340px at 84% 20%,rgba(129,140,248,.13),transparent 62%); }
.cn-hero .cn-wrap{ position:relative; z-index:2; }
.cn-hero h1{ font-size:34px; font-weight:800; letter-spacing:.5px; line-height:1.3; }
.cn-hero .hl{ background:linear-gradient(115deg,#38bdf8 10%,#818cf8 60%,#c084fc 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-hero p{ margin-top:14px; color:var(--muted); font-size:15px; max-width:680px; }
@media (max-width:700px){ .cn-hero{ padding:34px 0 26px } .cn-hero h1{ font-size:24px } }

/* 区块标题 */
.cn-sec{ padding:34px 0 }
.cn-sec-t{ font-size:20px; font-weight:800; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.cn-sec-t::before{ content:""; width:4px; height:18px; border-radius:2px; background:var(--grad); }
.cn-sec-d{ color:var(--dim); font-size:14px; margin-bottom:20px; }

/* 课程网格 */
.cn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:920px){ .cn-grid{ grid-template-columns:repeat(2,1fr); gap:14px } }
@media (max-width:600px){ .cn-grid{ grid-template-columns:1fr } }

.cn-course{ background:var(--cardbg); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; transition:.26s; display:flex; flex-direction:column; cursor:pointer; }
.cn-course:hover{ border-color:rgba(125,211,252,.45); box-shadow:0 10px 34px rgba(14,116,233,.16); transform:translateY(-4px); }
.cn-cover{ position:relative; width:100%; aspect-ratio:16/9; background:
   linear-gradient(135deg,#12213c,#0b1424); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cn-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.cn-cover .ph{ font-size:30px; font-weight:800; letter-spacing:1px;
   background:linear-gradient(120deg,#38bdf8,#818cf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-cover .tag{ position:absolute; left:10px; top:10px; font-size:11.5px; padding:3px 9px; border-radius:6px;
   background:rgba(6,10,20,.72); border:1px solid var(--line); color:var(--accent); backdrop-filter:blur(6px); }
.cn-course .bd{ padding:16px 16px 18px; flex:1; display:flex; flex-direction:column; }
.cn-course h3{ font-size:16.5px; font-weight:700; line-height:1.5; color:#dbe7fa; }
.cn-course .st{ font-size:13px; color:var(--muted); margin-top:7px; flex:1; }
.cn-course .mt{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.cn-price{ font-size:17px; font-weight:800; background:linear-gradient(120deg,#7dd3fc,#a5b4fc);
   -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-price.free{ background:linear-gradient(120deg,#34d399,#7dd3fc); -webkit-background-clip:text; background-clip:text; }
.cn-lessons{ font-size:12.5px; color:var(--dim); }

/* 按钮 */
.cn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:13px 26px; border-radius:26px; font-size:15px; font-weight:600; border:none;
  cursor:pointer; transition:.22s; font-family:inherit; }
.cn-btn.primary{ background:var(--grad); color:#fff; box-shadow:0 4px 22px rgba(56,120,248,.36); }
.cn-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(56,120,248,.5); }
.cn-btn.ghost{ border:1.5px solid rgba(125,211,252,.45); color:var(--accent); background:transparent; }
.cn-btn.ghost:hover{ background:rgba(56,189,248,.09); border-color:var(--accent); }
.cn-btn.wide{ width:100%; }
.cn-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none; }
.cn-btn.sm{ padding:9px 16px; font-size:13.5px; border-radius:20px; }
.cn-btn.danger{ background:rgba(248,113,113,.14); color:#fca5a5; border:1px solid rgba(248,113,113,.3); }

/* 通用卡片 */
.cn-card{ background:var(--cardbg); border:1px solid var(--line); border-radius:16px; padding:22px; }
.cn-card + .cn-card{ margin-top:14px }

/* 面包屑/返回 */
.cn-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; padding:16px 0 6px; }
.cn-back:hover{ color:var(--accent) }

/* 课程详情 */
.cn-dhead{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; padding:8px 0 26px; }
@media (max-width:860px){ .cn-dhead{ grid-template-columns:1fr; gap:16px } }
.cn-dhead h1{ font-size:28px; font-weight:800; line-height:1.36; }
.cn-dhead .sub{ color:var(--muted); font-size:15px; margin-top:12px; }
.cn-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cn-chip{ font-size:12.5px; padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  color:var(--muted); background:rgba(30,41,59,.4); }
.cn-buybox{ background:var(--cardbg); border:1px solid var(--line); border-radius:16px; padding:22px; }
.cn-buybox .p{ font-size:30px; font-weight:800;
  background:linear-gradient(120deg,#7dd3fc,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-buybox .pl{ font-size:12.5px; color:var(--dim); margin-top:4px }
.cn-buybox .rows{ margin:16px 0 }
.cn-buybox .row{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:6px 0; }

/* 课时列表 */
.cn-lesson{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(13,20,38,.5); margin-bottom:9px; transition:.2s; }
.cn-lesson:hover{ border-color:rgba(125,211,252,.35); background:rgba(20,32,56,.66); }
.cn-lesson .idx{ width:29px; height:29px; flex:none; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; color:var(--accent);
  background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.22); }
.cn-lesson .ti{ flex:1; font-size:14.5px; color:#dbe7fa; min-width:0; }
.cn-lesson .du{ font-size:12.5px; color:var(--dim); flex:none; }
.cn-lesson .lk{ font-size:12px; color:var(--dim); flex:none; }
.cn-lesson.free .idx{ color:var(--ok); background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.25) }
.cn-badge-free{ font-size:11px; padding:2px 8px; border-radius:5px; color:var(--ok);
  background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.24); flex:none }
.cn-locked{ opacity:.55 }

/* 表单 */
.cn-field{ margin-bottom:16px }
.cn-field label{ display:block; font-size:13.5px; color:var(--muted); margin-bottom:7px; }
.cn-inp, .cn-ta, .cn-sel{ width:100%; background:rgba(9,15,28,.85); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px; font-size:14.5px; color:var(--text);
  font-family:inherit; outline:none; transition:.2s; }
.cn-inp:focus, .cn-ta:focus, .cn-sel:focus{ border-color:rgba(125,211,252,.55); background:rgba(13,21,38,.95); }
.cn-inp::placeholder, .cn-ta::placeholder{ color:#5b6b83 }
.cn-ta{ min-height:92px; resize:vertical; line-height:1.7 }
.cn-sel option{ background:#0d1426 }
.cn-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:600px){ .cn-row2{ grid-template-columns:1fr } }
.cn-hint{ font-size:12.5px; color:var(--dim); margin-top:7px; line-height:1.7 }

/* 播放页 */
.cn-player{ background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.cn-player video{ width:100%; display:block; max-height:74vh; background:#000; }
.cn-player .empty{ padding:70px 20px; text-align:center; color:var(--dim); font-size:14px; }
.cn-playgrid{ display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start; }
@media (max-width:900px){ .cn-playgrid{ grid-template-columns:1fr } }
.cn-plist{ max-height:520px; overflow-y:auto; }
@media (max-width:900px){ .cn-plist{ max-height:none } }
.cn-plist .cn-lesson{ padding:12px 14px }
.cn-lesson.cur{ border-color:rgba(125,211,252,.6); background:rgba(14,80,150,.24) }

/* 我的 */
.cn-me{ display:flex; align-items:center; gap:16px; }
.cn-ava{ width:56px; height:56px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:19px; font-weight:800; color:#fff; background:var(--grad); }
.cn-tabs{ display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.cn-tab{ padding:11px 16px; font-size:14.5px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.cn-tab.on{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600 }
.cn-empty{ text-align:center; padding:48px 20px; color:var(--dim); font-size:14px; line-height:1.9 }
.cn-empty .ic{ font-size:34px; opacity:.4; display:block; margin-bottom:10px }

/* 订单 */
.cn-order{ display:flex; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
.cn-order:last-child{ border-bottom:none }
.cn-order .l{ min-width:0; flex:1 }
.cn-order .t{ font-size:14.5px; color:#dbe7fa }
.cn-order .m{ font-size:12.5px; color:var(--dim); margin-top:5px }
.cn-order .r{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none }
.cn-st{ font-size:12px; padding:3px 10px; border-radius:6px; flex:none; height:fit-content }
.cn-st.pending{ color:var(--warn); background:rgba(251,191,36,.13); border:1px solid rgba(251,191,36,.26) }
.cn-st.paid{ color:var(--ok); background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.26) }
.cn-st.canceled{ color:var(--dim); background:rgba(130,150,179,.12); border:1px solid rgba(130,150,179,.22) }

/* 提示条 */
.cn-note{ border-radius:12px; padding:13px 15px; font-size:13px; line-height:1.75; border:1px solid; }
.cn-note.info{ color:#bae6fd; background:rgba(56,189,248,.09); border-color:rgba(56,189,248,.22) }
.cn-note.warn{ color:#fde68a; background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.22) }
.cn-note.ok{ color:#a7f3d0; background:rgba(52,211,153,.09); border-color:rgba(52,211,153,.22) }
.cn-note.bad{ color:#fecaca; background:rgba(248,113,113,.09); border-color:rgba(248,113,113,.22) }

/* 底部 */
.cn-foot{ border-top:1px solid var(--line); margin-top:60px; padding:30px 0 46px; text-align:center;
  color:var(--dim); font-size:13px; line-height:2 }
.cn-foot a{ color:var(--muted) }

/* Toast */
#cn-toast{ position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(20px);
  background:rgba(13,21,38,.96); border:1px solid var(--line); color:var(--text);
  padding:12px 20px; border-radius:12px; font-size:14px; z-index:9999; opacity:0;
  transition:.28s; pointer-events:none; max-width:88vw; text-align:center; backdrop-filter:blur(10px); }
#cn-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* 弹层 */
.cn-modal{ position:fixed; inset:0; background:rgba(3,7,15,.78); z-index:900; display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px) }
.cn-modal.show{ display:flex }
.cn-modal .box{ background:linear-gradient(165deg,#101a2e,#0a1120); border:1px solid var(--line);
  border-radius:18px; padding:26px; width:100%; max-width:440px; max-height:88vh; overflow-y:auto }
.cn-modal h3{ font-size:19px; font-weight:800; margin-bottom:16px }

/* 后台 */
.cn-adminbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 0; border-bottom:1px solid var(--line); margin-bottom:22px }
.cn-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:26px }
.cn-kpi{ background:var(--cardbg); border:1px solid var(--line); border-radius:14px; padding:17px }
.cn-kpi b{ display:block; font-size:25px; font-weight:800;
  background:linear-gradient(120deg,#7dd3fc,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-kpi span{ font-size:12.5px; color:var(--dim) }
.cn-table{ width:100%; border-collapse:collapse; font-size:13.5px }
.cn-table th{ text-align:left; color:var(--dim); font-weight:600; font-size:12.5px;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap }
.cn-table td{ padding:12px; border-bottom:1px solid rgba(96,165,250,.08); vertical-align:middle }
.cn-table tr:hover td{ background:rgba(30,41,59,.32) }
.cn-tw{ overflow-x:auto }
.cn-prog{ height:7px; border-radius:4px; background:rgba(96,165,250,.16); overflow:hidden; margin-top:9px }
.cn-prog i{ display:block; height:100%; width:0; background:var(--grad); transition:.25s }

/* 移动端底部固定条 */
.cn-stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(6,10,20,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom)); display:flex; gap:12px; align-items:center }
.cn-stickybar .p{ flex:1; min-width:0 }
.cn-stickybar .p b{ font-size:18px; display:block;
  background:linear-gradient(120deg,#7dd3fc,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-stickybar .p span{ font-size:11.5px; color:var(--dim) }
.cn-has-sticky{ padding-bottom:96px }
@media (min-width:901px){ .cn-stickybar{ display:none } .cn-has-sticky{ padding-bottom:0 } }

/* ============ 引流视频 + 解锁转化条 + 课件 ============ */
.cn-unlockbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px; padding:14px 18px; border-radius:14px;
  background:linear-gradient(135deg, rgba(45,212,191,.10), rgba(59,130,246,.10));
  border:1px solid rgba(45,212,191,.35);
}
.cn-unlockbar .t b{ display:block; color:#e8f2ff; font-size:15px; }
.cn-unlockbar .t span{ color:var(--dim); font-size:13px; }
.cn-unlockbar .t i{ font-style:normal; color:var(--ok); font-weight:700; }
@media (max-width:640px){ .cn-unlockbar{ flex-direction:column; align-items:stretch; text-align:center; } }

.cn-files{ display:flex; flex-direction:column; gap:8px; }
.cn-file{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02);
}
.cn-file .ic{ font-size:17px; flex:none; }
.cn-file .ti{ flex:1; color:#dbe7f5; font-size:14px; line-height:1.5; word-break:break-all; }
.cn-file .du{ font-size:12.5px; color:var(--dim); flex:none; }
.cn-file .lk{ font-size:12px; color:var(--dim); flex:none; }
.cn-file .cn-badge-free{ flex:none; }
.cn-file .cn-btn{ flex:none; }

/* ---- 条款页（terms.html） ---- */
.ts{ color:#c3d2e6; font-size:14px; line-height:1.95; }
.ts h4{ margin:20px 0 8px; font-size:15px; color:#e8f2ff; font-weight:800; }
.ts h4:first-child{ margin-top:0; }
.ts p{ margin:0 0 8px; }
.ts b{ color:#e8f2ff; }

/* ---- 下单前勾选同意条款 ---- */
.cn-agree{
  display:flex; align-items:flex-start; gap:9px; margin-top:13px;
  font-size:12.5px; color:var(--muted,#8296b3); line-height:1.7; cursor:pointer;
}
.cn-agree input{ width:16px; height:16px; margin:1px 0 0; flex:none; accent-color:#38bdf8; cursor:pointer; }
.cn-agree a{ color:#7dd3fc; text-decoration:underline; }
.cn-agree.need{ color:#fde68a; }
.cn-agree.need a{ color:#fde68a; }