/* ===================== 睿学堂云服务 · 全局样式 ===================== */
/* 品牌：睿诚教育 REACH —— 橙旭日(#FF7A1A) + 蓝箭头(#2B6CFF)，平台点缀青绿(#0FB8A0) */
:root{
  --c-orange:#FF7A1A; --c-orange-soft:#FFF1E6;
  --c-blue:#2B6CFF;   --c-blue-soft:#EAF1FF;
  --c-teal:#0FB8A0;   --c-teal-soft:#E6F8F5;
  --c-ink:#1F2937; --c-ink-2:#4B5563; --c-ink-3:#9CA3AF;
  --c-bg:#F4F6FA; --c-card:#FFFFFF; --c-line:#ECF0F5;
  --c-success:#12B886; --c-danger:#E5484D; --c-warn:#F59E0B;
  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow:0 6px 22px rgba(31,41,55,.08);
  --shadow-sm:0 2px 8px rgba(31,41,55,.06);
  --brand-grad:linear-gradient(120deg,#FF7A1A 0%,#FF9A3D 38%,#2B6CFF 100%);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--c-ink); background:var(--c-bg); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%}
ul,li{list-style:none;margin:0;padding:0}
.boot-loading{padding:40px;text-align:center;color:var(--c-ink-3)}

/* ---------- 通用元件 ---------- */
.card{background:var(--c-card);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px;margin:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:14px;
  background:var(--c-blue);color:#fff;transition:.15s; min-height:40px;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--c-orange)}
.btn-ghost{background:#fff;color:var(--c-ink-2);border:1px solid var(--c-line)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:6px 12px;font-size:13px;min-height:32px}
.input,.textarea,select.input{
  width:100%;padding:10px 12px;border:1px solid var(--c-line);border-radius:var(--r-sm);
  font-size:14px;background:#fff;color:var(--c-ink);outline:none;transition:.15s;
}
.input:focus{border-color:var(--c-blue);box-shadow:0 0 0 3px var(--c-blue-soft)}
.textarea{min-height:72px;resize:vertical}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--c-ink-2);margin-bottom:6px;font-weight:600}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--c-blue-soft);color:var(--c-blue)}
.badge-orange{background:var(--c-orange-soft);color:var(--c-orange)}
.badge-teal{background:var(--c-teal-soft);color:var(--c-teal)}
.badge-success{background:#E7F8F1;color:var(--c-success)}
.badge-danger{background:#FDECEC;color:var(--c-danger)}
.badge-warn{background:#FEF3E0;color:var(--c-warn)}
.muted{color:var(--c-ink-3)}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.spin{padding:30px;text-align:center;color:var(--c-ink-3)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:9999;
  background:rgba(31,41,55,.92);color:#fff;padding:10px 18px;border-radius:var(--r-sm);
  font-size:14px;max-width:80%;box-shadow:var(--shadow);animation:toastIn .2s ease;
}
.toast.err{background:rgba(229,72,77,.95)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------- 模态框 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:900;display:flex;align-items:flex-end;justify-content:center}
.modal{
  background:#fff;width:100%;max-width:560px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  max-height:88vh;overflow:auto;padding:20px;animation:modalUp .22s ease;
}
@keyframes modalUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal h3{margin:0 0 14px;font-size:17px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1}

/* ===================== 学员端（移动端优先） ===================== */
.stud-header{
  background:var(--brand-grad);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 18px;
  border-radius:0 0 22px 22px;
}
.stud-header h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.5px}
.stud-header .sub{font-size:12px;opacity:.9;margin-top:2px}
.stud-user{display:flex;align-items:center;gap:10px;margin-top:12px}
.stud-user .avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:700}
.stud-user .name{font-weight:700}
.stud-user .role{font-size:12px;opacity:.85}
/* 我的页：管理后台 / 设置 两个按钮上下分布，文字强制单行不换行 */
.stud-user-acts{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  flex:0 0 auto;
}
.stud-user-acts .btn{
  background:rgba(255,255,255,.22);
  color:#fff;
  white-space:nowrap;
  line-height:1.25;
  padding:6px 12px;
  min-width:76px;
  text-align:center;
}

/* 轮播 */
.banner{margin:12px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);position:relative;height:140px;background:#eee}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;background:var(--brand-grad)}
.banner-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.banner-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.banner-dots i.on{background:#fff;width:18px;border-radius:4px}

/* 课程卡片 */
.section-title{display:flex;align-items:center;justify-content:space-between;padding:4px 18px;margin-top:6px}
.section-title h2{font-size:16px;margin:0}
.section-title .more{font-size:13px;color:var(--c-blue)}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
.course-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.course-card .cover{height:96px;background:var(--c-teal-soft);display:flex;align-items:center;justify-content:center;color:var(--c-teal);font-size:13px;font-weight:700;position:relative}
.course-card .cover img{width:100%;height:100%;object-fit:cover}
.course-card .cover .vis{position:absolute;top:6px;right:6px}
.course-card .body{padding:10px}
.course-card .t{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-card .meta{font-size:12px;color:var(--c-ink-3);margin-top:6px;display:flex;justify-content:space-between;align-items:center}

.stud-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:500;background:#fff;border-top:1px solid var(--c-line);
  display:flex;padding-bottom:var(--safe-b);box-shadow:0 -4px 16px rgba(0,0,0,.04);
}
.stud-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;color:var(--c-ink-3);font-size:11px}
.stud-tabbar a .ic{font-size:20px;line-height:1}
.stud-tabbar a.router-link-active{color:var(--c-orange)}
.stud-main{padding-bottom:calc(64px + var(--safe-b));min-height:100vh;background:var(--c-bg)}

/* 课程详情 */
.detail-hero{background:var(--brand-grad);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 18px}
.detail-hero .back{font-size:22px;display:inline-block;margin-bottom:8px}
.detail-hero h1{margin:0;font-size:19px}
.detail-hero .sum{font-size:13px;opacity:.92;margin-top:6px}
.detail-hero .acts{display:flex;gap:10px;margin-top:14px}
.detail-hero .acts .btn{background:rgba(255,255,255,.2);color:#fff}
.detail-hero .acts .btn.primary{background:#fff;color:var(--c-orange)}
.chapter{display:flex;align-items:flex-start;gap:10px;padding:14px 4px;border-bottom:1px solid var(--c-line)}
.chapter .idx{width:28px;height:28px;border-radius:8px;background:var(--c-blue-soft);color:var(--c-blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.chapter .info{flex:1 1 180px;min-width:0}
.chapter .info .ct{font-weight:600;font-size:15px;word-break:break-word}
.chapter .info .ty{font-size:12px;color:var(--c-ink-3);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chapter .acts{display:flex;gap:6px;flex-wrap:wrap;flex:none;align-items:center}
/* 窄屏：章节行改为「信息一行 + 操作按钮整行换行」，避免标题被挤压成竖排、按钮重叠 */
@media (max-width:640px){
  .chapter{flex-wrap:wrap}
  .chapter .acts{width:100%;margin-left:38px}
}
/* 成员表：部门列加宽（约两倍）、角色列固定宽度，下拉框可完整显示当前角色 */
.tbl .col-dept{min-width:190px;width:220px;word-break:break-all}
.tbl .col-role{min-width:120px;width:130px;white-space:nowrap}
.tbl .col-role .role-select{min-width:112px;width:112px}
.chapter .prog{font-size:12px;color:var(--c-teal);font-weight:700}

/* 文件查看器（双端） */
.viewer{position:fixed;inset:0;z-index:800;background:#0f172a;display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;color:#fff;background:rgba(0,0,0,.35)}
.viewer-bar .tt{font-weight:600;font-size:15px;flex:1;margin:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;position:relative}
.viewer-body video{max-width:100%;max-height:100%}
.viewer-body iframe,.viewer-body embed{width:100%;height:100%;border:none;background:#fff}
.viewer-body img{max-width:100%;max-height:100%}
.viewer-body .doc-ph{color:#cbd5e1;text-align:center;padding:30px}
.viewer-body .doc-ph .big{font-size:48px;margin-bottom:10px}
.watermark{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.watermark span{position:absolute;color:rgba(255,255,255,.16);font-size:13px;transform:rotate(-22deg);white-space:nowrap;font-weight:600}
.viewer-tools{display:flex;gap:10px;padding:12px;background:rgba(0,0,0,.35)}
.viewer-tools .btn{flex:1;background:rgba(255,255,255,.15);color:#fff}
.viewer-tools .btn.primary{background:var(--c-orange);color:#fff}

/* ===================== 管理端（PC 后台） ===================== */
.adm{display:flex;min-height:100vh;background:var(--c-bg)}
.adm-side{width:230px;flex:none;background:#0f1b2d;color:#cbd5e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.adm-side .logo{padding:18px 18px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.adm-side .logo .dot{width:30px;height:30px;border-radius:9px;background:var(--brand-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.adm-nav{padding:10px;overflow:auto;flex:1}
.adm-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:#aab6c8;font-size:14px;margin-bottom:4px}
.adm-nav a .ic{font-size:17px}
.adm-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.adm-nav a.router-link-active{background:var(--brand-grad);color:#fff;font-weight:700}
.adm-nav .grp{font-size:11px;color:#5b6b80;padding:14px 14px 4px;letter-spacing:1px}
.adm-side .me{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.adm-side .me .n{color:#fff;font-weight:700}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-top{height:60px;background:#fff;border-bottom:1px solid var(--c-line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:50}
.adm-top h2{margin:0;font-size:18px}
.adm-top .who{font-size:13px;color:var(--c-ink-2)}
.adm-content{padding:22px;max-width:1100px;width:100%}
.adm-top .menu-btn{display:none}

/* 统计卡片 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm)}
.stat .n{font-size:26px;font-weight:800}
.stat .l{font-size:13px;color:var(--c-ink-3);margin-top:4px}
.stat .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;float:right}
.stat.s1 .ic{background:var(--c-blue-soft);color:var(--c-blue)}
.stat.s2 .ic{background:var(--c-orange-soft);color:var(--c-orange)}
.stat.s3 .ic{background:var(--c-teal-soft);color:var(--c-teal)}
.stat.s4 .ic{background:#FDECEC;color:var(--c-danger)}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);font-size:14px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--c-line)}
.tbl th{background:#F8FAFC;color:var(--c-ink-2);font-weight:700;font-size:13px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#FAFBFE}
.tbl .acts{display:flex;gap:8px}

/* 表单两列 */
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ===================== 响应式 ===================== */
@media (max-width:900px){
  .adm-side{
    position:fixed;left:0;top:0;bottom:0;z-index:600;transform:translateX(-100%);
    transition:transform .2s;width:230px;
  }
  .adm-side.open{transform:translateX(0)}
  .adm-top .menu-btn{display:inline-flex}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .form-2{grid-template-columns:1fr}
  .adm-content{padding:14px}
  .modal-mask{align-items:center}
  .modal{border-radius:var(--r-lg)}
}
@media (min-width:901px){
  .adm-side .close-btn{display:none}
}
@media (max-width:560px){
  .course-grid{grid-template-columns:1fr 1fr}
}

/* 底部导航：选中态整块高亮（不只是橙色文字） */
.stud-tabbar a{
  position:relative;border-radius:12px;margin:4px 6px;padding:6px 0;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.stud-tabbar a.router-link-active{
  color:var(--c-orange);
  background:linear-gradient(180deg, rgba(232,115,12,.14), rgba(232,115,12,.06));
  box-shadow:inset 0 0 0 1px rgba(232,115,12,.28);
  font-weight:700;
}
.stud-tabbar a.router-link-active .ic{transform:scale(1.18)}
.stud-tabbar a.router-link-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--c-orange);
}
.stud-tabbar a:active{transform:scale(.96)}

/* 封面选择 */
.cover-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:280px;overflow:auto;padding:2px}
.cover-opt{border:2px solid var(--c-line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;text-align:center}
.cover-opt img{width:100%;height:56px;object-fit:cover;display:block}
.cover-opt span{display:block;font-size:11px;color:var(--c-ink-3);padding:3px 0}
.cover-opt.on{border-color:var(--c-orange);box-shadow:0 0 0 2px rgba(232,115,12,.18)}
.cover-preview{width:96px;height:54px;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--c-ink-3)}
.cover-preview img{width:100%;height:100%;object-fit:cover}

/* 权限多选 */
.perm-pick{max-height:180px;overflow:auto;border:1px solid var(--c-line);border-radius:8px;padding:6px 8px;background:#fff}
.perm-opt{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:13px;cursor:pointer}
.perm-opt input{width:16px;height:16px}

/* ===== 批量上传队列 ===== */
.up-list{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.up-item{border:1px solid var(--c-line);border-radius:8px;padding:6px 8px;background:#fff}
.up-head{display:flex;align-items:center;gap:8px;font-size:12px}
.up-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.up-size{color:var(--c-ink-3)}
.up-status{color:var(--c-ink-3)}
.up-status.done{color:#16a34a}
.up-status.error,.up-status.skip{color:#dc2626}
.up-status.uploading{color:var(--c-orange)}
.up-bar{height:6px;border-radius:4px;background:#eef2f7;overflow:hidden;margin-top:5px}
.up-bar i{display:block;height:100%;width:0;background:var(--c-orange);transition:width .25s ease}
.up-bar i.done{background:#16a34a}
.up-bar i.error,.up-bar i.skip{background:#dc2626}

/* ===== 转码进度 ===== */
.tc-prog{margin-top:6px}
.tc-prog .up-bar{margin-top:0}

/* ===== 轮播：图片 + 文案 ===== */
.banner-slide{position:relative;width:100%;height:100%}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
.banner-slide .ph{width:100%;height:100%;background:linear-gradient(135deg,#e8730c,#c2410c)}
.banner-cap{position:absolute;left:14px;bottom:12px;right:14px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.banner-cap .bt{font-size:16px;font-weight:800;line-height:1.2}
.banner-cap .bs{font-size:12px;opacity:.92;margin-top:2px;line-height:1.3}

/* ===== 后台：侧边栏「返回学员端」高亮 ===== */
.adm-side .back-student{
  display:block;margin-top:14px;padding:11px 14px;border-radius:10px;
  text-align:center;font-weight:700;font-size:14px;color:#fff;
  background:var(--brand-grad);box-shadow:0 4px 14px rgba(255,122,26,.35);
  border:2px solid rgba(255,255,255,.6);
}
.adm-side .back-student:hover{filter:brightness(1.06)}
.adm-side .back-student:active{transform:scale(.97)}

/* ===== 课程权限：冲突说明条 ===== */
.perm-hint{
  background:#FFF7E6;border:1px solid #FFE0A3;color:#8a5a00;
  border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:10px;
}
.perm-hint.ok{background:var(--c-teal-soft);border-color:#BBEBE3;color:#0a6b5e}
.perm-hint b{color:#b45309}
.perm-hint.ok b{color:#0a6b5e}

/* ===== 后台轮播：默认图预览 + 缩略图 ===== */
.banner-prevs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.banner-prev{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1200/500}
.banner-prev img{width:100%;height:100%;object-fit:cover;display:block}
.banner-prev .bp-cap{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.banner-prev .bp-t{font-size:16px;font-weight:800}
.banner-prev .bp-s{font-size:12px;opacity:.92;margin-top:2px}
.banner-thumb{width:96px;height:44px;object-fit:cover;border-radius:6px;background:var(--c-line)}