/* 晓进在线培训 · 演示站公共样式 */
:root{
  --primary:#1f6bff; --primary-d:#0f4fd6; --primary-l:#eaf1ff;
  --accent:#ff7a18; --accent-l:#fff3e8;
  --green:#0fa958; --green-l:#e8f7ef;
  --red:#e5484d; --red-l:#fdecec;
  --yellow:#f5a623; --yellow-l:#fdf6e7;
  --ink:#1f2937; --ink-2:#4b5563; --ink-3:#9aa3af;
  --line:#e6e9ef; --bg:#f4f6fa; --card:#ffffff;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* 顶栏 */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-in{display:flex;align-items:center;gap:18px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;white-space:nowrap}
.logo .lg-ic{width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.logo small{display:block;font-size:11px;color:var(--ink-3);font-weight:400;line-height:1.2}
.main-nav{display:flex;gap:2px;flex:1}
.main-nav a{padding:8px 13px;border-radius:8px;color:var(--ink-2);font-size:14px;white-space:nowrap}
.main-nav a:hover{background:var(--primary-l);color:var(--primary)}
.main-nav a.on{background:var(--primary);color:#fff}
.hd-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.hd-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:20px;padding:0 10px;background:#fafbfc}
.hd-search input{border:0;background:transparent;outline:none;width:150px;padding:7px 4px;font-size:13px}
.hd-search button{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:15px}
.pt-badge{display:flex;align-items:center;gap:5px;background:var(--accent-l);color:var(--accent);font-weight:700;padding:6px 12px;border-radius:20px;font-size:13px;white-space:nowrap}
.userbox{position:relative}
.user-toggle{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);padding:4px 6px;border-radius:8px}
.user-toggle:hover{background:var(--primary-l)}
.user-toggle .uname{font-size:14px;font-weight:600}
.user-toggle .caret{font-size:11px;color:var(--ink-3)}
.udrop{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgba(16,24,40,.10);min-width:130px;display:none;z-index:60;overflow:hidden}
.udrop.show{display:block}
.udrop a{display:block;padding:10px 16px;font-size:14px;color:var(--ink-2);text-decoration:none}
.udrop a:hover{background:var(--primary-l);color:var(--primary)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;white-space:nowrap}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer}

/* 通用 */
.page{padding:20px 0 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.sec-t{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
.sec-t h2{font-size:18px}
.sec-t a{color:var(--primary);font-size:13px}
.tag{display:inline-block;padding:2px 9px;border-radius:5px;font-size:12px;line-height:1.6}
.tag.blue{background:var(--primary-l);color:var(--primary)}
.tag.green{background:var(--green-l);color:var(--green)}
.tag.orange{background:var(--accent-l);color:var(--accent)}
.tag.red{background:var(--red-l);color:var(--red)}
.tag.gray{background:#f1f3f6;color:var(--ink-2)}
.tag.yellow{background:var(--yellow-l);color:#b97a08}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;padding:9px 20px;font-size:14px;cursor:pointer;background:#eef1f5;color:var(--ink-2)}
.btn.pri{background:var(--primary);color:#fff}
.btn.pri:hover{background:var(--primary-d)}
.btn.line{background:#fff;border:1px solid var(--primary);color:var(--primary)}
.btn.warn{background:var(--accent);color:#fff}
.btn.ok{background:var(--green);color:#fff}
.btn.sm{padding:5px 13px;font-size:13px;border-radius:6px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.kv{display:flex;gap:6px;font-size:13px;color:var(--ink-2)}
.kv b{color:var(--ink);font-weight:600}
.prog{height:8px;background:#edf0f5;border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--primary);border-radius:6px}
.prog.g i{background:var(--green)}
.prog.o i{background:var(--accent)}
table.tb{width:100%;border-collapse:collapse}
.tb th{background:#f7f9fc;text-align:left;font-weight:600;color:var(--ink-2);font-size:13px}
.tb th,.tb td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;word-break:break-word}
.empty{text-align:center;color:var(--ink-3);padding:40px 0}

/* 卡片行/列表 */
.row{display:flex;gap:12px;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.list-div>*+*{border-top:1px solid var(--line)}
.mut{color:var(--ink-3);font-size:13px}

/* 首页横幅 */
.hero{border-radius:14px;background:linear-gradient(100deg,#0f4fd6,#1f6bff 55%,#3d86ff);color:#fff;padding:34px 34px;position:relative;overflow:hidden}
.hero h1{font-size:26px;margin-bottom:10px}
.hero p{opacity:.92;max-width:560px}
.hero .hero-nums{display:flex;gap:34px;margin-top:22px}
.hero .hero-nums b{font-size:24px;display:block}
.hero .hero-nums span{font-size:13px;opacity:.85}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.09)}
.hero::before{content:"";position:absolute;right:40px;bottom:-100px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}

/* 课程卡 */
.course-card{overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.course-card:hover{box-shadow:0 8px 24px rgba(16,24,40,.10);transform:translateY(-2px)}
.cc-cover{height:118px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;letter-spacing:1px;position:relative}
.cc-cover .cc-type{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.35);padding:2px 9px;border-radius:5px;font-size:12px;font-weight:400}
.cc-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.cc-title{font-size:15px;font-weight:700}
.cc-meta{display:flex;gap:12px;color:var(--ink-3);font-size:12.5px;flex-wrap:wrap}

/* 步骤/状态流 */
.steps{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.steps .st{display:flex;align-items:center;gap:8px}
.steps .st i{width:26px;height:26px;border-radius:50%;background:#eef1f5;color:var(--ink-3);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:700}
.steps .st.done i{background:var(--green);color:#fff}
.steps .st.now i{background:var(--primary);color:#fff}
.steps .ln{flex:0 0 36px;height:2px;background:var(--line);margin:0 6px}

/* 播放器 */
.player{background:#0d1117;border-radius:12px;color:#fff;overflow:hidden}
.player .pv{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 30% 30%,#1c2740,#0d1117 70%)}
.player .pv .big-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer}
.player .pv .big-play:hover{background:var(--primary);border-color:var(--primary)}
.player .pb{padding:12px 16px;display:flex;align-items:center;gap:12px;background:#161b26}
.player .pb .bar{flex:1;height:6px;background:#2c3446;border-radius:4px;cursor:pointer;position:relative}
.player .pb .bar i{position:absolute;left:0;top:0;height:100%;background:var(--primary);border-radius:4px;width:0%}
.player .ctrl-btn{background:none;border:0;color:#fff;font-size:17px;cursor:pointer;padding:4px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}

/* 证书 */
.cert{border:3px double #d4b46a;background:#fffdf6;border-radius:10px;padding:26px;text-align:center;position:relative}
.cert h3{color:#8a6d1f;font-size:20px;letter-spacing:6px;margin-bottom:14px}
.cert .c-name{font-size:17px;margin:10px 0 4px}
.cert .c-mut{color:#9c8b5a;font-size:13px}
.cert .c-seal{position:absolute;right:24px;bottom:20px;width:64px;height:64px;border:2px solid #c0392b;border-radius:50%;color:#c0392b;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;line-height:1.3;opacity:.8}

/* 弹层/提示 */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:#22293a;color:#fff;padding:11px 22px;border-radius:8px;font-size:14px;z-index:99;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw}
.toast.show{opacity:.95}
.toast.pt{background:var(--accent)}
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.mask.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:560px;width:100%;padding:24px;max-height:86vh;overflow:auto}
.modal h3{margin-bottom:14px}
input[type=text],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=number],select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit;outline-color:var(--primary);background:#fff}
textarea{resize:vertical;min-height:90px}
label.fl{display:block;font-size:13px;color:var(--ink-2);margin:12px 0 6px}

/* 数据大屏 */
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:26px}
.kpi span{color:var(--ink-3);font-size:13px}
.kpi em{font-style:normal;font-size:12px;color:var(--green)}
.chart{height:260px;width:100%}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:22px 0;color:var(--ink-3);font-size:13px;margin-top:30px}

/* 响应式 */
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr) !important}
  .g3{grid-template-columns:repeat(2,1fr) !important}
  .hd-search input{width:90px}
}
@media (max-width:640px){
  .main-nav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:10px;border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .hd-search{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr !important}
  .hero{padding:24px 20px}
  .hero .hero-nums{gap:20px;flex-wrap:wrap}
  .header-in{gap:10px}
  .pt-badge span.lbl{display:none}
}

/* hide platform branding */
#mulepage-bar,#mulepage-footer,[id^="mulepage"],[class*="mulepage"]{display:none !important;}

/* crown badges for top3 */
.crown{display:inline-block;width:15px;height:12px;vertical-align:-1px;margin-right:4px;background:no-repeat center/contain}
.crown.c1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 16h20l2-11-6 4-6-7-6 7-6-4z' fill='%23f5a623'/%3E%3C/svg%3E")}
.crown.c2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 16h20l2-11-6 4-6-7-6 7-6-4z' fill='%239aa3af'/%3E%3C/svg%3E")}
.crown.c3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 16h20l2-11-6 4-6-7-6 7-6-4z' fill='%23b0793d'/%3E%3C/svg%3E")}

/* 钉钉式部门/人员选择器 */
.sp{background:#fff;border-radius:10px;max-width:760px;width:94%;max-height:82vh;display:flex;flex-direction:column}
.sp-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.sp-body{display:flex;flex:1;min-height:0}
.sp-left{flex:1.2;border-right:1px solid var(--line);padding:12px;overflow:auto}
.sp-right{flex:1;padding:12px;overflow:auto;background:#fafbfc}
.sp-tabs{display:flex;gap:10px;margin:10px 0}
.sp-tabs button{flex:1}
.sp-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.sp-item{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:6px}
.sp-item:hover{background:var(--primary-l)}
.sp-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.sp-chip{display:inline-flex;align-items:center;gap:6px;background:#eef4ff;color:var(--primary);border-radius:6px;padding:4px 8px;margin:3px;font-size:13px}
.sp-chip i{cursor:pointer;font-style:normal}
.sp-crumb{font-size:12.5px;color:var(--ink-2);margin:8px 0 4px;line-height:1.8}
.sp-crumb a{color:var(--primary);cursor:pointer}

/* mobile polish */
@media (max-width:640px){
  .page{padding:14px 0 40px}
  .pad{padding:14px}
  .between{flex-wrap:wrap}
  .sec-t{margin:18px 0 10px}
  .sec-t h2{font-size:16px}
  .hero{padding:20px 16px}
  .hero h1{font-size:20px}
  .hero p{font-size:13px}
  .hero .hero-nums{gap:16px}
  .hero .hero-nums b{font-size:19px}
  .stat b{font-size:20px}
  .tb th,.tb td{padding:8px;font-size:12.5px}
  .btn{padding:8px 14px;font-size:13px}
  .btn.sm{padding:4px 10px;font-size:12px}
  .modal{padding:18px 14px}
  .cc-meta{font-size:12px;gap:8px}
  .player .pb{flex-wrap:wrap;gap:8px}
  .player .pb .bar{min-width:120px;flex:1 1 120px}
  .grid{gap:12px}
  .logo small{display:none}
  .steps .ln{flex-basis:14px;margin:0 3px}
  .steps .st{font-size:12px}
  .wiz .wl{width:12px;margin:0 4px}
  .wrap{padding:0 12px}
}
/* 晓进在线培训 · 管理后台样式（复用前台 style.css 变量） */
.admin-wrap{display:flex;min-height:100vh}
.side{width:224px;background:#101a2e;color:#aab6cc;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .s-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;color:#fff;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.side .s-logo .lg-ic{width:32px;height:32px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px}
.side .s-logo small{display:block;font-size:11px;color:#7c8aa5;font-weight:400;line-height:1.2}
.side .s-group{padding:12px 14px 4px;font-size:12px;color:#67748e;letter-spacing:1px}
.side a{display:flex;align-items:center;gap:9px;padding:9px 18px;font-size:14px;color:#aab6cc;border-left:3px solid transparent}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:rgba(31,107,255,.18);color:#fff;border-left-color:var(--primary)}
.side a .dot{width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.55;flex-shrink:0}
.side a .cnt{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;border-radius:9px;padding:0 7px;line-height:18px}
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-top{background:#fff;border-bottom:1px solid var(--line);height:56px;display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:40}
.admin-top h1{font-size:16px}
.admin-top .crumb{color:var(--ink-3);font-size:13px}
.admin-body{padding:20px 22px 60px}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-size:24px}
.stat span{color:var(--ink-3);font-size:13px}
.stat em{font-style:normal;font-size:12px;color:var(--green)}
.stat em.down{color:var(--red)}
.switch{display:inline-block;width:38px;height:21px;border-radius:12px;background:#cdd4de;position:relative;cursor:pointer;vertical-align:middle;transition:background .2s}
.switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on{background:var(--green)}
.switch.on i{left:19px}
.wiz{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin-top:6px}
.wiz .wz{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.wiz .wz i{width:22px;height:22px;border-radius:50%;background:#eef1f5;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px}
.wiz .wz.done{color:var(--green)}
.wiz .wz.done i{background:var(--green);color:#fff}
.wiz .wz.now{color:var(--primary)}
.wiz .wz.now i{background:var(--primary);color:#fff}
.wiz .wl{width:30px;height:2px;background:var(--line);margin:0 8px}
@media (max-width:900px){
  .side{width:64px}
  .side a span,.side .s-group,.side .s-logo .tx,.side a .cnt{display:none}
  .side .s-logo{justify-content:center;padding:16px 8px}
}

/* hide platform branding */
#mulepage-bar,#mulepage-footer,[id^="mulepage"],[class*="mulepage"]{display:none !important;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{width:380px;max-width:92vw}

/* ===== 后台列表自适应：窄屏下表格改卡片式（列名由 data-label 提供） ===== */
@media (max-width:768px){
  .admin-body{padding:14px 12px 40px}
  .card[style*="overflow-x"]{border:0;box-shadow:none;background:transparent}
  table.tb,.tb tbody,.tb tr,.tb td{display:block;width:100%}
  .tb tr:first-child{display:none}
  .tb tr{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
  .tb td{padding:9px 14px;border-bottom:1px solid #f0f2f6;white-space:normal !important;word-break:break-word;text-align:left;font-size:13px}
  .tb tr>td:last-child{border-bottom:0}
  .tb td[data-label]::before{content:attr(data-label);display:block;color:var(--ink-3);font-size:12px;line-height:1.5;margin-bottom:2px}
  .tb td[colspan]{border-bottom:0;padding:16px 10px;text-align:center;color:var(--ink-3)}
  .tb td[colspan]::before{content:none}
  .tb td .btn{margin:2px 6px 2px 0}
}