/* ================= 万应课堂 C端样式 · 深色高级版 ================= */
:root {
  --bg: #0b111e; --bg-soft: #0f1727; --card: #141f33; --card-2: #18243c;
  --line: rgba(255,255,255,.07); --txt: #e8eef8; --sub: #8a97ad;
  --gold: #f6b93b; --gold-2: #ffd479; --blue: #4f8cff; --green: #34c77b;
}
* { margin:0; padding:0; box-sizing:border-box }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--txt) }
a { text-decoration:none; color:inherit }
::selection { background:rgba(246,185,59,.35) }

/* ---------- 顶栏 ---------- */
.header { background:rgba(11,17,30,.86); backdrop-filter:blur(12px); color:#fff; padding:0 36px; height:64px;
  display:flex; align-items:center; gap:30px; position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line) }
.header .logo { font-size:21px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.header a.nav { color:#b9c5da; font-size:15px; padding:6px 14px; border-radius:8px; transition:.2s }
.header a.nav:hover { color:#fff; background:rgba(255,255,255,.08) }
.header a.nav.active { color:var(--gold-2); background:rgba(246,185,59,.12) }
.header .right { margin-left:auto; display:flex; gap:14px; align-items:center; font-size:14px; color:#b9c5da }
.header .right a { color:#b9c5da } .header .right a:hover { color:var(--gold-2) }
.btn-gold { display:inline-block; background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2b1d05 !important;
  font-weight:700; padding:7px 20px; border-radius:20px; font-size:14px; transition:.2s }
.btn-gold:hover { filter:brightness(1.08); transform:translateY(-1px) }

/* ---------- 布局 ---------- */
.container { max-width:1220px; margin:0 auto; padding:0 20px }
.section { margin:44px 0 }
.section-title { display:flex; align-items:baseline; gap:12px; margin-bottom:20px }
.section-title::before { content:""; width:5px; height:22px; border-radius:3px; align-self:center;
  background:linear-gradient(180deg,var(--gold-2),var(--gold)) }
.section-title h2 { font-size:22px; font-weight:800 }
.section-title .sub { color:var(--sub); font-size:13px }
.section-title .more { margin-left:auto; color:var(--sub); font-size:13px; cursor:pointer }
.section-title .more:hover { color:var(--gold-2) }

/* ---------- 首屏轮播 ---------- */
.hero { margin-top:24px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 10px 40px rgba(0,0,0,.45) }
.hero .el-carousel__container, .slide { height:380px }
.slide { position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 7% ; cursor:pointer }
.slide h1 { font-size:40px; font-weight:900; line-height:1.25; margin-bottom:14px; text-shadow:0 2px 18px rgba(0,0,0,.4) }
.slide h1 em { font-style:normal; color:var(--gold-2) }
.slide p { color:rgba(255,255,255,.78); font-size:16px; margin-bottom:28px; max-width:560px }
.slide .btn-gold { align-self:flex-start; padding:11px 34px; font-size:15px }
.slide .deco { position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.14), transparent 60%),
  conic-gradient(from 210deg, rgba(246,185,59,.25), rgba(79,140,255,.22), rgba(255,255,255,.05), rgba(246,185,59,.25));
  filter:blur(2px) }
.slide .deco::after { content:"</>"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:90px; font-weight:900; color:rgba(255,255,255,.16); letter-spacing:-6px }
.slide-1 { background:linear-gradient(115deg,#131f3a 0%,#1d3258 55%,#27497e 100%) }
/* 口播轮播页:真人出镜背景图 + 左侧渐变遮罩保证文字可读 */
.slide-koubo { background:#0b111e url(/student/img/hero-koubo.png) center/cover no-repeat }
.slide-koubo::before { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,17,30,.92) 0%,rgba(11,17,30,.72) 42%,rgba(11,17,30,.12) 75%,transparent 100%) }
.slide-koubo > * { position:relative; z-index:1 }
.slide-koubo .live-tag { position:absolute; right:28px; top:22px; z-index:1; display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 16px; font-size:13px; color:#fff }
.slide-koubo .live-tag i { width:9px; height:9px; border-radius:50%; background:#f56c6c; box-shadow:0 0 8px #f56c6c; animation:pulse 1.2s infinite }
@keyframes pulse { 50% { opacity:.35 } }
.slide-2 { background:linear-gradient(115deg,#241a08 0%,#3c2a0d 55%,#57431a 100%) }
.slide-3 { background:linear-gradient(115deg,#0d2530 0%,#123a4a 55%,#1b5468 100%) }
.slide-1 .deco::after { content:"AI" } .slide-3 .deco::after { content:"$%" }

/* ---------- 特色条 ---------- */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0 }
.feature { background:linear-gradient(160deg,var(--card),var(--bg-soft)); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; display:flex; gap:14px; align-items:center }
.feature .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:rgba(246,185,59,.13) }
.feature b { display:block; font-size:15px; margin-bottom:3px }
.feature span { color:var(--sub); font-size:12.5px }

/* ---------- 课程卡片 ---------- */
.course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px }
.course-card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:.25s; cursor:pointer }
.course-card:hover { transform:translateY(-6px); border-color:rgba(246,185,59,.45); box-shadow:0 14px 34px rgba(0,0,0,.5) }
.course-card .cover { height:158px; background:#223049 center/cover no-repeat; position:relative }
.course-card .cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,15,26,.85)) }
.badge { position:absolute; top:10px; left:10px; z-index:2; font-size:12px; padding:3px 10px; border-radius:6px; font-weight:700;
  background:rgba(11,17,30,.72); color:var(--gold-2); backdrop-filter:blur(4px); border:1px solid rgba(246,185,59,.35) }
.badge.free { color:#7ee2ab; border-color:rgba(52,199,123,.4) }
.course-card .body { padding:14px 16px 16px }
.course-card h3 { font-size:16px; margin-bottom:8px; line-height:1.45; height:46px; overflow:hidden; font-weight:700 }
.course-card .intro { font-size:12.5px; color:var(--sub); line-height:1.6; height:40px; overflow:hidden; margin-bottom:10px }
.course-card .meta { font-size:12px; color:#67758d; display:flex; justify-content:space-between; align-items:center }
.course-card .meta .teacher { display:flex; align-items:center; gap:6px }
.course-card .meta .avatar { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--blue));
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#111; font-weight:800 }

/* ---------- 面板 / 筛选 ---------- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:20px }
.cats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px }
.cat-tag { padding:7px 18px; border-radius:20px; background:var(--bg-soft); border:1px solid var(--line); cursor:pointer;
  font-size:14px; color:#b9c5da; transition:.2s }
.cat-tag:hover { border-color:rgba(246,185,59,.5); color:var(--gold-2) }
.cat-tag.active { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2b1d05; border-color:transparent; font-weight:700 }
.sub-cats { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 16px; padding-left:10px; border-left:3px solid rgba(246,185,59,.5) }
.sub-cats .cat-tag { padding:4px 14px; font-size:13px }
.empty { text-align:center; color:#5f6d85; padding:56px 0 }

/* ---------- 公告 ---------- */
.announce-item { padding:13px 0; border-bottom:1px dashed var(--line); font-size:14px }
.announce-item:last-child { border:none; padding-bottom:2px }
.announce-item b { color:var(--gold-2) }
.announce-item .t { color:#5f6d85; font-size:12px; margin-left:10px }
.announce-item .c { color:var(--sub); margin-top:5px; line-height:1.7 }

/* ---------- 课时列表 ---------- */
.lesson-item { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px; transition:.15s }
.lesson-item:hover { background:rgba(255,255,255,.04) }
.lesson-item.active { background:rgba(246,185,59,.1); color:var(--gold-2) }
.lesson-item.locked { color:#5f6d85; cursor:not-allowed }
.lesson-item .no { width:26px; height:26px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0 }
.lesson-item .tags { margin-left:auto; display:flex; gap:6px; flex-shrink:0 }
.catalog-head { padding:16px; font-weight:800; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px }

/* ---------- 统计 ---------- */
.stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0 20px }
.stat-card { background:linear-gradient(160deg,var(--card),var(--bg-soft)); border:1px solid var(--line); border-radius:14px; padding:22px }
.stat-card .num { font-size:26px; font-weight:800; margin-top:8px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat-card .label { color:var(--sub); font-size:13px }
.bar-chart { display:flex; align-items:flex-end; gap:14px; height:150px; padding:10px 6px 0 }
.bar-chart .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end }
.bar-chart .bar { width:60%; background:linear-gradient(180deg,var(--gold-2),var(--gold)); border-radius:5px 5px 0 0; min-height:2px;
  box-shadow:0 0 14px rgba(246,185,59,.25) }
.bar-chart .lab { font-size:11px; color:#5f6d85 }
.progress-row { display:flex; align-items:center; gap:12px }

/* ---------- 视频页 ---------- */
video { width:100%; background:#000; border-radius:12px; max-height:540px }
.page-title { font-size:20px; margin-bottom:16px }
.back-link { color:var(--sub); font-size:13px; cursor:pointer }
.back-link:hover { color:var(--gold-2) }

/* ---------- 登录 ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  background:radial-gradient(1000px 500px at 80% -10%, rgba(79,140,255,.18), transparent),
  radial-gradient(900px 500px at 10% 110%, rgba(246,185,59,.14), transparent), var(--bg) }
.login-card { width:400px; background:rgba(20,31,51,.75); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px);
  padding:42px 38px 36px; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.5) }
.login-card h2 { text-align:center; margin-bottom:6px; font-size:26px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.login-card .tip { color:var(--sub); text-align:center; font-size:13px; margin-bottom:30px }

/* ---------- 页脚 ---------- */
.site-footer { text-align:center; padding:34px 12px 30px; color:#55617a; font-size:13px; line-height:2; border-top:1px solid var(--line); margin-top:50px }
.site-footer a { color:#55617a; margin-left:12px }
.site-footer a:hover { color:var(--gold-2) }

/* ---------- Element Plus 深色微调 ---------- */
.el-input__wrapper, .el-textarea__inner { background:var(--bg-soft) !important; box-shadow:0 0 0 1px var(--line) inset !important; color:var(--txt) !important }
.el-pagination { --el-pagination-bg-color:transparent; --el-pagination-text-color:#b9c5da;
  --el-pagination-button-color:#b9c5da; --el-pagination-hover-color:var(--gold-2) }
.el-table { --el-table-bg-color:transparent; --el-table-tr-bg-color:transparent; --el-table-header-bg-color:var(--bg-soft);
  --el-table-border-color:var(--line); --el-table-text-color:#c5cfdf; --el-table-header-text-color:var(--sub);
  --el-table-row-hover-bg-color:rgba(255,255,255,.04); background:transparent }
.el-progress-bar__outer { background:var(--bg-soft) !important }
.el-carousel__arrow { background:rgba(11,17,30,.5) }
.el-carousel__indicator--horizontal .el-carousel__button { background:#b9c5da; opacity:.35 }
.el-carousel__indicator.is-active .el-carousel__button { background:var(--gold); opacity:1; width:24px; border-radius:3px }

@media (max-width:900px){
  .features,.stat-cards { grid-template-columns:1fr }
  .header { padding:0 14px; gap:12px }
  .slide h1 { font-size:26px }
  .slide .deco { display:none }
  .hero .el-carousel__container,.slide { height:300px }
}