/* 《跨境电商视觉营销设计》数字课程平台 · 统一样式 */
:root{
  --brand:#0b5aa8;
  --brand2:#0a4a8a;
  --brand3:#e8f1fb;
  --soft:#f4f8fd;
  --line:#dbe5f0;
  --ink:#1d2b3a;
  --ink2:#5a6b7d;
  --ok:#1a9c6b;
  --err:#d94a3d;
  --warn:#c98a00;
  --gold:#e08a1e;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#eef3f9;line-height:1.75;font-size:15px;
}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 60px;}

/* 顶部导航 */
.topbar{background:linear-gradient(135deg,#0b5aa8,#0a3f76);color:#fff;box-shadow:0 2px 14px rgba(10,60,110,.18);position:sticky;top:0;z-index:50;}
.topbar .inner{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.topbar .logo{font-weight:700;font-size:17px;letter-spacing:.5px;}
.topbar .logo small{display:block;font-weight:400;font-size:11.5px;opacity:.82;letter-spacing:0;}
.topbar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.topbar nav a{color:#eaf2fb;padding:6px 12px;border-radius:8px;font-size:14px;}
.topbar nav a:hover{background:rgba(255,255,255,.16);text-decoration:none;}
.topbar nav a.on{background:#fff;color:var(--brand2);font-weight:600;}

/* 通用卡片 */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:16px 0;box-shadow:0 1px 3px rgba(20,50,90,.04);}
.card h2{margin:.2em 0 .7em;font-size:19px;color:var(--brand2);border-left:4px solid var(--brand);padding-left:10px;}
.card h3{margin:1.2em 0 .5em;font-size:16px;color:var(--brand2);}
.lead{color:var(--ink2);}

/* 首页 hero */
.hero{background:linear-gradient(135deg,#0b5aa8,#12518f 60%,#0a3f76);color:#fff;border-radius:16px;padding:34px 34px 30px;margin:22px 0;box-shadow:0 10px 30px rgba(10,60,110,.2);}
.hero h1{margin:.1em 0 .3em;font-size:27px;line-height:1.35;}
.hero p{margin:.3em 0;color:#dbe9f8;font-size:14.5px;}
.hero .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}
.hero .tags span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:4px 12px;border-radius:20px;font-size:12.5px;}

/* 网格 */
.grid{display:grid;gap:14px;}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;}}

.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:.18s;color:inherit;}
.tile:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(11,90,168,.12);transform:translateY(-2px);text-decoration:none;}
.tile .tno{display:inline-block;background:var(--brand3);color:var(--brand2);font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px;margin-bottom:8px;}
.tile b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;}
.tile span{font-size:12.5px;color:var(--ink2);}

/* 表格 */
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px;background:#fff;}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;}
th{background:var(--brand3);color:var(--brand2);font-weight:600;}
tr:nth-child(even) td{background:#fafcff;}

/* 标签 */
.chip{display:inline-block;background:var(--soft);border:1px solid var(--line);color:var(--ink2);font-size:12px;padding:2px 9px;border-radius:6px;margin:2px 4px 2px 0;}

/* 页脚 */
.foot{text-align:center;color:#8a9bad;font-size:12.5px;padding:26px 10px 10px;}

/* 答题系统 */
.quiz-layout{display:flex;gap:18px;align-items:flex-start;}
@media(max-width:900px){.quiz-layout{flex-direction:column;}}
.qnav{flex:0 0 210px;position:sticky;top:78px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;}
@media(max-width:900px){.qnav{position:static;width:100%;flex:none;}}
.qnav h4{margin:.2em 0 .7em;font-size:14px;color:var(--brand2);}
.qnav button{display:block;width:100%;text-align:left;background:var(--soft);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 11px;margin-bottom:6px;font-size:13.5px;cursor:pointer;font-family:inherit;}
.qnav button:hover{border-color:var(--brand);}
.qnav button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;}
.qmain{flex:1;min-width:0;}

.qhead{background:linear-gradient(135deg,#0b5aa8,#0a3f76);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:16px;}
.qhead h1{margin:.1em 0 .3em;font-size:21px;}
.qhead p{margin:.2em 0;font-size:13px;color:#d8e8f8;}

.qsec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;}
.qsec>.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.qsec>.sec-h b{font-size:16px;color:var(--brand2);}
.qsec>.sec-h em{font-style:normal;font-size:12px;color:#fff;background:var(--brand);padding:2px 9px;border-radius:20px;}
.qsec>.sec-h s{text-decoration:none;margin-left:auto;font-size:12.5px;color:var(--ink2);}

.q{margin:16px 0;padding-bottom:14px;border-bottom:1px dashed var(--line);}
.q:last-child{border-bottom:none;}
.q>.qt{font-weight:600;margin-bottom:8px;}
.q>.qt .no{color:var(--brand);margin-right:6px;}
.opts{display:flex;flex-direction:column;gap:6px;}
.opt{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fdfefe;transition:.15s;}
.opt:hover{border-color:var(--brand);background:var(--soft);}
.opt input{margin-top:4px;flex:none;}
.opt .k{font-weight:700;color:var(--brand2);flex:none;}
.opt.sel{border-color:var(--brand);background:var(--brand3);}
.opt.ok{border-color:var(--ok);background:#eaf9f2;}
.opt.bad{border-color:var(--err);background:#fdeeec;}
.opt.locked{cursor:default;}

textarea.ans{width:100%;min-height:96px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;line-height:1.7;resize:vertical;background:#fdfefe;}
textarea.ans:focus{outline:none;border-color:var(--brand);background:#fff;}

.exp{margin-top:10px;border-left:3px solid var(--brand);background:var(--soft);border-radius:0 9px 9px 0;padding:9px 13px;font-size:13.5px;color:#31465c;display:none;}
.exp.show{display:block;}
.exp b{color:var(--brand2);}
.exp .ref{color:#0a6b4a;}
.exp ul{margin:6px 0 2px;padding-left:20px;}

.qbar{position:sticky;bottom:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 -3px 14px rgba(20,50,90,.07);margin-top:8px;}
.qbar .score{margin-left:auto;font-size:14px;color:var(--ink2);}
.btn{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:9px 20px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:600;}
.btn:hover{background:var(--brand2);}
.btn.ghost{background:#fff;color:var(--brand2);border:1px solid var(--brand);}
.btn.ghost:hover{background:var(--brand3);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.result{display:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:16px 0;}
.result.show{display:block;}
.result .big{font-size:34px;font-weight:700;color:var(--brand);}
.result .row{display:flex;gap:26px;flex-wrap:wrap;margin:10px 0;}
.result .row div{font-size:13.5px;color:var(--ink2);}
.result .row div b{display:block;font-size:20px;color:var(--ink);}
.badge-ok{color:var(--ok);font-weight:700;}
.badge-bad{color:var(--err);font-weight:700;}

.note{background:#fff8e8;border:1px solid #f0dcae;border-radius:10px;padding:12px 16px;color:#7a5a12;font-size:13.5px;margin:12px 0;}
.note b{color:#a06a00;}

/* 待补充占位（红色字体） */
.ph{color:#d94a3d;font-weight:700;}
/* 文档正文排版 */
.doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 36px;margin:16px 0;}
.doc h1{font-size:24px;text-align:center;color:var(--brand2);margin:.2em 0 .1em;letter-spacing:2px;}
.doc h2{font-size:17px;color:var(--brand2);border-left:4px solid var(--brand);padding-left:10px;margin:1.6em 0 .6em;}
.doc h3{font-size:15px;color:#0a4a8a;margin:1.1em 0 .4em;}
.doc p,.doc li{font-size:14.5px;color:#243546;}
.doc ul,.doc ol{padding-left:22px;}
.doc .subtitle{text-align:center;color:var(--ink2);font-size:13px;margin-bottom:18px;}
@media(max-width:640px){.doc{padding:20px 18px;}}

/* ============================================================
   以下为「登录版」新增：用户信息栏 / 登录页 / 管理后台 / 模态框
   ============================================================ */

/* 顶部用户信息栏 */
.userbox{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid rgba(255,255,255,.22);}
.uavatar{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--brand2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none;}
.uinfo{display:flex;flex-direction:column;line-height:1.25;}
.uinfo b{font-size:13.5px;color:#fff;}
.uinfo em{font-style:normal;font-size:11.5px;color:#cfe2f6;}
.ubtn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:5px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;}
.ubtn:hover{background:rgba(255,255,255,.3);}
@media(max-width:680px){.uinfo{display:none;}}

/* 登录页 */
.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#0b5aa8,#0a3f76 55%,#082f5b);}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:18px;padding:34px 34px 26px;box-shadow:0 18px 50px rgba(4,30,60,.35);}
.login-brand{text-align:center;margin-bottom:22px;}
.login-brand .mark{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#0b5aa8,#0a3f76);color:#fff;font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.login-card h1{font-size:18.5px;margin:0 0 6px;color:var(--brand2);letter-spacing:.5px;text-align:center;}
.login-card .sub{font-size:12.5px;color:var(--ink2);text-align:center;margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px;}
.field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);background:#fbfdff;}
.field input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(11,90,168,.1);}
.login-btn{width:100%;padding:12px;font-size:15px;border-radius:10px;margin-top:6px;}
.login-msg{min-height:20px;font-size:13px;color:var(--err);margin:8px 0 4px;text-align:center;}
.login-msg.ok{color:var(--ok);}
.login-tip{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink2);line-height:1.9;}
.login-foot{text-align:center;color:#b9cde2;font-size:12px;margin-top:18px;}

/* 管理后台 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tabs button{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 16px;font-size:14px;cursor:pointer;font-family:inherit;}
.tabs button:hover{border-color:var(--brand);}
.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar input,.toolbar select{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--brand);}
.toolbar .spacer{margin-left:auto;}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff;}
table.grid-tbl{margin:0;border:none;font-size:13.5px;}
table.grid-tbl th{background:var(--brand3);}
table.grid-tbl th,table.grid-tbl td{border:none;border-bottom:1px solid var(--line);padding:9px 12px;white-space:nowrap;}
table.grid-tbl tr:last-child td{border-bottom:none;}
table.grid-tbl tr:nth-child(even) td{background:#fafcff;}
.badge{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:20px;font-weight:600;}
.badge.admin{background:#fde8e6;color:#b5342a;}
.badge.teacher{background:#e6f0fd;color:#0b5aa8;}
.badge.student{background:#e9f7f0;color:#137a52;}
.badge.on{background:#e9f7f0;color:#137a52;}
.badge.off{background:#f0f2f5;color:#7a8798;}
.mini{background:#fff;border:1px solid var(--line);color:var(--brand2);border-radius:7px;padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;margin-right:5px;}
.mini:hover{border-color:var(--brand);background:var(--brand3);}
.mini.danger{color:var(--err);border-color:#f3c9c4;}
.mini.danger:hover{background:#fdeeec;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.stat b{display:block;font-size:24px;color:var(--brand2);line-height:1.3;}
.stat span{font-size:12.5px;color:var(--ink2);}
.empty{text-align:center;color:var(--ink2);padding:34px 10px;font-size:14px;}
.msg{font-size:13.5px;padding:9px 13px;border-radius:9px;margin-bottom:12px;display:none;}
.msg.show{display:block;}
.msg.ok{background:#eaf9f2;color:#137a52;border:1px solid #bfe8d5;}
.msg.bad{background:#fdeeec;color:#b5342a;border:1px solid #f3c9c4;}
textarea.import{width:100%;min-height:130px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.7;resize:vertical;background:#fbfdff;}
textarea.import:focus{outline:none;border-color:var(--brand);background:#fff;}
.myscore{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:800px){.myscore{grid-template-columns:repeat(2,1fr);}}

/* 模态框 */
.modal-mask{position:fixed;inset:0;background:rgba(15,35,60,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:16px;padding:26px 28px;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(6,25,50,.35);}
.modal h3{margin:0 0 16px;font-size:17px;color:var(--brand2);}
.modal label{display:block;font-size:13px;color:var(--ink2);margin-bottom:12px;}
.modal input,.modal select,.modal textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px;font-family:inherit;margin-top:5px;background:#fbfdff;color:var(--ink);}
.modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--brand);background:#fff;}
.modal label .hint{display:block;font-size:11.5px;color:#8797a8;margin-top:4px;}
.modal-msg{min-height:20px;font-size:13px;color:var(--err);}
.modal-msg.ok{color:var(--ok);}
.modal-act{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.modal-note{display:none;font-size:12.5px;line-height:1.6;color:#8a5a12;background:#fff7e6;border:1px solid #f4dcae;border-radius:9px;padding:9px 12px;margin-bottom:14px;}
.audit-tag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:20px;background:#eef4fb;color:var(--brand2);border:1px solid #d8e6f6;white-space:nowrap;}
.audit-tag.fail{background:#fdeeee;color:#b3261e;border-color:#f6d3d0;}
.audit-tag.warn{background:#fff7e6;color:#8a5a12;border-color:#f4dcae;}
.audit-tag.ok{background:#eaf7ef;color:#1b7f4b;border-color:#cbe9d8;}