/* ==========================================================================
   lx.css · 「乐柠 / DBE Cloud 风格」主题层（覆盖在 app.css 之上）
   --------------------------------------------------------------------------
   设计语言对标：
     · 浅粉紫渐变底 + 纯白卡片 + 极细描边 + 柔和投影
     · 左侧 64px 图标导航栏（白色，选中项洋红），顶部页签（细底线）
     · 主色洋红（#e11d48），辅助紫（#7c5cff），成功绿（#12b886）
     · 数字统一等宽（能力值 / 薪资 / 进度 / 得分）
   全部原生 CSS，零外部依赖。
   ========================================================================== */

:root{
  --lx-bg-a:#f8f0fa;
  --lx-bg-b:#efe7fb;
  --lx-bg-c:#fdf1f4;
  --lx-panel:#ffffff;
  --lx-line:#f0e9f3;
  --lx-line2:#f7f2f9;
  --lx-ink:#2b2340;
  --lx-ink2:#5f5875;
  --lx-ink3:#9a93ad;
  --lx-red:#e11d48;
  --lx-red2:#f43f5e;
  --lx-red-soft:#fff1f4;
  --lx-violet:#7c5cff;
  --lx-violet-soft:#f3efff;
  --lx-green:#12b886;
  --lx-green-soft:#ecfdf5;
  --lx-amber:#e8901b;
  --lx-amber-soft:#fff8ec;
  --lx-r:10px;
  --lx-r-sm:8px;
  --lx-r-lg:14px;
  --lx-sh:0 1px 2px rgba(80,40,90,.04), 0 6px 18px rgba(80,40,90,.05);
  --lx-sh-hover:0 2px 6px rgba(80,40,90,.06), 0 14px 34px rgba(80,40,90,.10);
  --lx-num:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;

  /* 让旧视图也吃到新主色（原设计系统用 --c-primary 等） */
  --c-primary:#e11d48;
  --c-primary-d:#be123c;
  --primary:#e11d48;
  --primary-600:#be123c;
  --primary-50:#fff1f4;
  --brand:#be123c;
  --bg:#f8f0fa;
  --t1:#2b2340;
  --t2:#5f5875;
  --t3:#9a93ad;
  --line:#f0e9f3;
}

/* ==========================================================================
   一、登录页（对标：左插画 + 右白卡，验证码 + 记住密码）
   ========================================================================== */
.lx-login{
  position:fixed; inset:0; display:grid; grid-template-columns:1fr;
  background:
    radial-gradient(900px 520px at 12% 8%, #fde7f3 0%, transparent 62%),
    radial-gradient(760px 520px at 88% 92%, #e9e2ff 0%, transparent 60%),
    linear-gradient(135deg, var(--lx-bg-a) 0%, var(--lx-bg-b) 52%, var(--lx-bg-c) 100%);
  overflow:auto; z-index:30;
}
.lx-login::before{
  /* 极细网格，压住大面积渐变的“糊”感 */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(120,80,150,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,80,150,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
}
.lx-login__brand{
  position:absolute; left:38px; top:30px; display:flex; align-items:center; gap:11px; z-index:3;
}
.lx-login__brand .mk{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,#f43f5e,#be123c); color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 6px 16px rgba(225,29,72,.28); letter-spacing:-.5px;
}
.lx-login__brand .nm{font-size:14.5px; font-weight:700; color:var(--lx-ink); letter-spacing:.2px}
.lx-login__brand .sub{font-size:11.5px; color:var(--lx-ink3); margin-top:1px}

.lx-login__stage{
  width:min(1180px, 100%); margin:auto; padding:96px 40px 36px;
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(392px, .82fr);
  gap:0; align-items:stretch; position:relative; z-index:2;
}
/* 左 3D 面板与右侧登录卡必须等高：两块拼成一个整体卡片，
   高度不一致时中间会露出页面底色，看着像布局错位。 */

/* 左侧：3D 场景（canvas）+ 文案 */
.lx-hero{position:relative; height:auto; min-height:560px; border-radius:20px 0 0 20px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  background:
    radial-gradient(60% 60% at 40% 40%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(150deg,#f9eaf6,#efe6fb 55%,#fdeef2);
}
.lx-hero canvas{display:block; width:100%; height:100%; outline:none}
/* 底部渐隐：让文案压在柔和的白雾上，不与岛台几何打架 */
.lx-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:176px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,249,252,.62) 46%,rgba(255,250,253,.86) 100%);
}
.lx-hero__copy{
  position:absolute; left:34px; bottom:30px; right:34px; z-index:2;
}
.lx-hero__copy h2{
  margin:0 0 8px; font-size:25px; line-height:1.32; letter-spacing:-.2px;
  color:#241a35; font-weight:800;
}
.lx-hero__copy h2 em{font-style:normal; color:var(--lx-red)}
.lx-hero__copy p{margin:0; font-size:12.5px; color:#6b6382; letter-spacing:.3px}
.lx-hero__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.lx-hero__tags i{
  font-style:normal; font-size:11.5px; padding:4px 10px; border-radius:99px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  color:#5d5473; backdrop-filter:blur(6px);
}
.lx-hero__badge{
  position:absolute; right:20px; top:20px; z-index:2;
  font-size:11px; color:#7b6f92; background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9); border-radius:99px; padding:4px 11px;
  display:flex; align-items:center; gap:6px; backdrop-filter:blur(6px);
}
.lx-hero__badge b{color:var(--lx-red)}

/* 右侧：登录卡 */
.lx-card{
  background:#fff; border-radius:0 20px 20px 0; padding:40px 44px 30px;
  box-shadow:0 24px 60px rgba(90,50,110,.13);
  border:1px solid #f6eef8; border-left:none; position:relative;
  min-height:560px; display:flex; flex-direction:column; justify-content:center;
}
.lx-card__logo{display:flex; align-items:center; gap:9px; margin-bottom:16px}
.lx-card__logo .mk{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(140deg,#f43f5e,#be123c); color:#fff; font-weight:800; font-size:13px;
}
.lx-card__logo span{font-size:12.5px; color:#8b849c; font-weight:600}
.lx-card h1{
  font-size:24px; margin:0 0 6px; letter-spacing:-.3px; color:#221a33; font-weight:800;
}
.lx-card .lead{font-size:12.5px; color:var(--lx-ink3); margin-bottom:22px}
.lx-tabsline{display:flex; gap:24px; border-bottom:1px solid var(--lx-line); margin-bottom:22px}
.lx-tabsline b{
  position:relative; font-size:13.5px; color:var(--lx-red); padding-bottom:10px; font-weight:700;
}
.lx-tabsline b::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--lx-red); border-radius:2px;
}
.lx-tabsline i{font-style:normal; font-size:13.5px; color:var(--lx-ink3); padding-bottom:10px}

.lx-field{margin-bottom:14px}
.lx-field > label{display:block; font-size:12px; color:#8a8299; margin-bottom:6px}
.lx-inp{
  display:flex; align-items:center; gap:8px; height:42px; padding:0 12px;
  border:1px solid #ece5f1; border-radius:var(--lx-r-sm); background:#fdfbfe;
  transition:.18s;
}
.lx-inp:focus-within{border-color:#f5b8c8; background:#fff; box-shadow:0 0 0 3px rgba(225,29,72,.07)}
.lx-inp svg{flex:none; color:#b3aac2}
.lx-inp input{
  border:0; outline:0; background:transparent; width:100%; font-size:13.5px; color:#2b2340;
  font-family:inherit;
}
.lx-inp input::placeholder{color:#bcb4c9}
.lx-inp .eye{border:0; background:transparent; padding:0; cursor:pointer; color:#b3aac2; display:grid; place-items:center}
.lx-inp .eye:hover{color:var(--lx-ink2)}
.lx-vcode{display:flex; gap:10px; align-items:stretch}
.lx-vcode .lx-inp{flex:1}
.lx-vcode canvas{
  width:104px; height:42px; border-radius:var(--lx-r-sm); border:1px solid #ece5f1;
  background:linear-gradient(135deg,#fff6f9,#f6f0ff); cursor:pointer;
}
.lx-row{display:flex; align-items:center; justify-content:space-between; margin:6px 0 18px; font-size:12.5px}
.lx-check{display:flex; align-items:center; gap:7px; color:#7b7390; cursor:pointer; user-select:none}
.lx-check input{width:14px; height:14px; accent-color:var(--lx-red); cursor:pointer}
.lx-row a{color:#8b849c; text-decoration:none}
.lx-row a:hover{color:var(--lx-red)}
.lx-btn{
  height:44px; border:0; border-radius:var(--lx-r-sm); cursor:pointer; font-size:14.5px;
  font-weight:700; letter-spacing:.6px; color:#fff; font-family:inherit;
  background:linear-gradient(135deg,#f43f5e,#e11d48 60%,#be123c);
  box-shadow:0 8px 20px rgba(225,29,72,.26);
  transition:.18s;
}
.lx-btn:hover{filter:brightness(1.04); box-shadow:0 10px 24px rgba(225,29,72,.32)}
.lx-btn:active{transform:translateY(1px)}
.lx-btn[disabled]{opacity:.72; cursor:progress; box-shadow:none}
.lx-err{
  font-size:12.5px; color:#c2185b; background:#fff5f7; border:1px solid #ffe0e8;
  border-radius:7px; padding:8px 11px; margin-bottom:12px; display:none; line-height:1.6;
}
.lx-err.on{display:block}
.lx-card__foot{
  margin-top:auto; padding-top:22px; font-size:11px; color:#aaa2b8; line-height:1.85;
}
.lx-card__foot .tech{color:#8a8299}
.lx-card__foot .tech b{color:#6f6785; font-weight:600}
.lx-card__foot .legal{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px}
.lx-card__foot .legal span{white-space:nowrap}

@media (max-height:860px){
  .lx-login__stage{padding:82px 32px 26px}
  .lx-hero, .lx-card{min-height:520px}
  .lx-card{padding:32px 40px 24px}
  .lx-card h1{font-size:22px}
  .lx-field{margin-bottom:11px}
  .lx-card .lead{margin-bottom:16px}
  .lx-tabsline{margin-bottom:16px}
  .lx-card__foot{padding-top:14px}
}
@media (max-width:1080px){
  .lx-login__stage{grid-template-columns:1fr; padding:96px 22px 28px; gap:18px}
  .lx-hero{height:280px; border-radius:18px 18px 0 0}
  .lx-hero__copy{display:none}
  .lx-card{border-radius:0 0 18px 18px; border-left:1px solid #f6eef8; min-height:0; padding:30px 26px 24px}
}

/* ==========================================================================
   二、应用外壳（左侧图标栏 + 顶部页签）
   ========================================================================== */
body.lx-body{background:linear-gradient(135deg,var(--lx-bg-a),var(--lx-bg-b) 55%,var(--lx-bg-c)) fixed}

.lx-shell{display:flex; min-height:100vh; align-items:stretch}
/* #app-root 在旧样式里是 grid（左侧 248px 侧栏 + 内容），
   新外壳自带 70px 图标栏，必须用同权重选择器改回 flex，否则会多出 178px 空列 */
#app-root.lx-shell{display:flex; height:100vh; overflow:hidden; background:transparent}
#app-root.lx-shell > .lx-main{height:100vh; overflow:hidden}

/* —— 左：图标栏 —— */
.lx-rail{
  width:70px; flex:none; background:#fff; border-right:1px solid var(--lx-line);
  display:flex; flex-direction:column; align-items:center; padding:12px 0 10px;
  position:sticky; top:0; height:100vh; z-index:12;
}
.lx-rail__logo{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,#f43f5e,#be123c); color:#fff; font-weight:800; font-size:14px;
  box-shadow:0 6px 16px rgba(225,29,72,.28); margin-bottom:16px; cursor:pointer;
}
.lx-rail__nav{display:flex; flex-direction:column; gap:2px; width:100%; align-items:center; flex:1}
.lx-rbtn{
  position:relative; width:56px; padding:8px 0 6px; border-radius:9px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; color:#8b849c;
  border:0; background:transparent; font-family:inherit; transition:.16s;
}
.lx-rbtn span{font-size:10.5px; letter-spacing:.2px}
.lx-rbtn:hover{background:#fbf7fc; color:var(--lx-ink2)}
.lx-rbtn.on{color:var(--lx-red); background:var(--lx-red-soft)}
.lx-rbtn.on::before{
  content:''; position:absolute; left:-7px; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--lx-red);
}
.lx-rbtn.on span{font-weight:700}
.lx-rail__foot{
  margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:4px;
}
.lx-rail__av{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(140deg,#8b5cf6,#6366f1);
}
.lx-rail__av.t{background:linear-gradient(140deg,#f59e0b,#ea580c)}
.lx-rail__av.a{background:linear-gradient(140deg,#0ea5e9,#2563eb)}
.lx-rail__ico{
  width:28px; height:28px; border-radius:7px; display:grid; place-items:center;
  color:#a49cba; cursor:pointer; border:0; background:transparent;
}
.lx-rail__ico:hover{background:#fbf7fc; color:var(--lx-ink2)}

/* —— 右：主区 —— */
.lx-main{flex:1; min-width:0; display:flex; flex-direction:column}
.lx-top{
  height:56px; flex:none; background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lx-line); display:flex; align-items:center;
  padding:0 22px; gap:18px; position:sticky; top:0; z-index:11;
}
.lx-top__name{font-size:14px; font-weight:700; color:#2b2340; letter-spacing:.2px; white-space:nowrap}
.lx-top__name i{
  font-style:normal; font-size:11.5px; color:#9a93ad; font-weight:500; margin-left:8px;
  padding-left:9px; border-left:1px solid #ece5f1;
}
.lx-top__tabs{display:flex; gap:2px; align-items:center; overflow:auto; scrollbar-width:none}
.lx-top__tabs::-webkit-scrollbar{display:none}
.lx-tab{
  position:relative; padding:0 13px; height:36px; display:flex; align-items:center;
  font-size:13px; color:#6f6785; cursor:pointer; border:0; background:transparent;
  font-family:inherit; border-radius:8px; white-space:nowrap; transition:.16s;
}
.lx-tab:hover{background:#fbf7fc; color:#3b3352}
.lx-tab.on{color:var(--lx-red); font-weight:700; background:var(--lx-red-soft)}
.lx-top__sp{flex:1}
.lx-top__acts{display:flex; align-items:center; gap:6px}
.lx-ico{
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  border:1px solid transparent; background:transparent; color:#8b849c; cursor:pointer;
}
.lx-ico:hover{background:#fbf7fc; color:var(--lx-ink2); border-color:#f4eef7}
.lx-who{display:flex; align-items:center; gap:9px; padding-left:10px; margin-left:4px; border-left:1px solid #f0e9f3}
.lx-who .nm{text-align:right; line-height:1.25}
.lx-who .nm b{display:block; font-size:12.5px; color:#2b2340; font-weight:700}
.lx-who .nm i{font-style:normal; font-size:10.5px; color:#a49cba}
.lx-who .av{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-size:12px; font-weight:700; background:linear-gradient(140deg,#8b5cf6,#6366f1);
}
.lx-who .av.teacher{background:linear-gradient(140deg,#f59e0b,#ea580c)}
.lx-who .av.admin{background:linear-gradient(140deg,#0ea5e9,#2563eb)}

/* 内容区 */
.lx-content{
  flex:1; padding:20px 24px 46px; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
}
.lx-content > *{animation:lxIn .28s ease both}
@keyframes lxIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* 顶部横幅（面包屑替代） */
.lx-crumb{
  display:flex; align-items:center; gap:8px; font-size:12px; color:#a49cba; margin-bottom:14px;
}
.lx-crumb b{color:#5f5875; font-weight:600}
.lx-crumb .sep{color:#d6cfe2}

/* ==========================================================================
   三、通用卡片 / 统计 / 标签
   ========================================================================== */
.lx-panel{
  background:var(--lx-panel); border:1px solid var(--lx-line); border-radius:var(--lx-r);
  box-shadow:var(--lx-sh); padding:18px 20px; margin-bottom:16px;
}
.lx-panel--flat{box-shadow:none}
.lx-panel__hd{
  display:flex; align-items:center; gap:10px; margin:-2px 0 14px;
}
.lx-panel__hd h3{
  margin:0; font-size:14px; font-weight:800; color:#2b2340; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.lx-panel__hd h3::before{
  content:''; width:3px; height:14px; border-radius:2px; background:var(--lx-red);
}
.lx-panel__hd .sp{flex:1}
.lx-panel__hd .more{font-size:12px; color:#a49cba; cursor:pointer; border:0; background:none; font-family:inherit}
.lx-panel__hd .more:hover{color:var(--lx-red)}

.lx-grid{display:grid; gap:16px}
.lx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lx-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .lx-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .lx-grid--2,.lx-grid--3,.lx-grid--4{grid-template-columns:1fr} }

.lx-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px;
  border-radius:5px; font-weight:600; line-height:1.6; white-space:nowrap;
}
.lx-tag--red{background:var(--lx-red-soft); color:#be123c}
.lx-tag--vio{background:var(--lx-violet-soft); color:#6d4bd8}
.lx-tag--green{background:var(--lx-green-soft); color:#0b8f6b}
.lx-tag--gray{background:#f6f4f9; color:#8b849c}
.lx-tag--amber{background:var(--lx-amber-soft); color:#b8720e}

.lx-num{font-family:var(--lx-num); font-variant-numeric:tabular-nums}

/* 进度条 */
.lx-bar{height:6px; border-radius:99px; background:#ece4f3; overflow:hidden; flex:1;
  box-shadow:inset 0 1px 2px rgba(90,60,110,.06)}
.lx-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#fb7185,#e11d48)}
.lx-bar.big{height:8px}
.lx-bar i.vio{background:linear-gradient(90deg,#a78bfa,#7c5cff)}
.lx-bar i.green{background:linear-gradient(90deg,#34d399,#12b886)}

/* ==========================================================================
   四、学生工作台
   ========================================================================== */
.lx-hello{
  position:relative; overflow:hidden; border-radius:var(--lx-r);
  background:linear-gradient(112deg,#fff 0%,#fff6f9 46%,#f4efff 100%);
  border:1px solid #f6eaf2; box-shadow:var(--lx-sh);
  padding:24px 26px; margin-bottom:16px;
}
.lx-hello::after{
  content:''; position:absolute; right:-40px; top:-60px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(244,63,94,.14), transparent 66%);
  pointer-events:none;
}
.lx-hello__row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative; z-index:1}
.lx-hello__av{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(140deg,#fff,#ffe4ec); border:1px solid #ffd9e3;
  font-size:20px; font-weight:800; color:#e11d48; flex:none;
}
.lx-hello h2{margin:0; font-size:19px; letter-spacing:-.2px; color:#241a35}
.lx-hello h2 b{color:var(--lx-red)}
.lx-hello .sub{font-size:12.5px; color:#8b849c; margin-top:3px}
.lx-hello__stats{display:flex; gap:26px; margin-left:auto; position:relative; z-index:1}
.lx-kvmini{text-align:right}
.lx-kvmini .k{font-size:11px; color:#a49cba}
.lx-kvmini .v{font-size:20px; font-weight:800; color:#2b2340; line-height:1.2}
.lx-kvmini .v.red{color:var(--lx-red)}
.lx-kvmini .v.vio{color:var(--lx-violet)}
.lx-hello__bar{display:flex; align-items:center; gap:12px; margin-top:18px; position:relative; z-index:1}
.lx-hello__bar .lb{font-size:11.5px; color:#8b849c; white-space:nowrap}
.lx-hello__bar .pct{font-size:12px; font-weight:800; color:var(--lx-red)}

/* 待办 */
.lx-todo{display:flex; gap:12px; align-items:center}
.lx-todo__n{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--lx-red-soft); color:var(--lx-red); font-weight:800; font-size:16px;
  font-family:var(--lx-num);
}
.lx-todo__t{min-width:0}
.lx-todo__t b{display:block; font-size:13px; color:#2b2340; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-todo__t span{font-size:11.5px; color:#a49cba}

/* 列表行 */
.lx-list{display:flex; flex-direction:column}
.lx-li{
  display:flex; align-items:center; gap:12px; padding:11px 4px; border-top:1px solid var(--lx-line2);
  cursor:pointer; border-radius:6px; transition:.14s;
}
.lx-li:first-child{border-top:0}
.lx-li:hover{background:#fdfafc}
.lx-li__ic{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:#f6f2fb; color:#8b7bd8; font-size:12px; font-weight:700;
}
.lx-li__ic.red{background:var(--lx-red-soft); color:var(--lx-red)}
.lx-li__b{min-width:0; flex:1}
.lx-li__b b{display:block; font-size:12.8px; color:#332a48; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-li__b span{font-size:11px; color:#a49cba}
.lx-li__p{display:flex; align-items:center; gap:8px; flex:none; width:150px; justify-content:flex-end}
.lx-li__p .lx-num{font-size:11.5px; color:#8b849c; width:34px; text-align:right}

/* 推荐项目卡 */
.lx-rec{
  display:flex; gap:11px; padding:10px 2px; border-top:1px solid var(--lx-line2); cursor:pointer;
  border-radius:6px;
}
.lx-rec:first-child{border-top:0}
.lx-rec:hover{background:#fdfafc}
.lx-rec__ic{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#fff0f4,#ffe1e8); color:#e11d48;
}
.lx-rec__b{min-width:0; flex:1}
.lx-rec__b b{display:block; font-size:12.8px; color:#332a48; font-weight:600}
.lx-rec__b .st{display:flex; align-items:center; gap:6px; margin-top:3px}
.lx-rec__b .st em{margin-left:auto; font-style:normal; font-size:11px; color:#a49cba}
.lx-stars{display:inline-flex; gap:1.5px; color:#f0b429; font-size:9.5px; letter-spacing:0}
.lx-stars i{opacity:.28; font-style:normal}
.lx-stars i.on{opacity:1}

/* 学习任务推荐 */
.lx-task-rec{padding:10px 0; border-top:1px dashed #f2ecf6; cursor:pointer; border-radius:6px; transition:.14s}
.lx-task-rec:hover{background:#fdfafc}
.lx-task-rec:first-child{border-top:0; padding-top:0}
.lx-task-rec .t1{font-size:12.5px; color:#332a48}
.lx-task-rec .t1 em{font-style:normal; color:#8b849c; font-size:11px; margin-right:6px}
.lx-task-rec .t2{font-size:11px; color:#a49cba; margin-top:3px; display:flex; gap:14px}

/* 公告 */
.lx-note{
  display:flex; gap:9px; padding:9px 11px; border-radius:8px; font-size:12px; line-height:1.65;
  background:#fbf7fc; color:#6f6785; margin-bottom:8px;
}
.lx-note:last-child{margin-bottom:0}
.lx-note i{flex:none; font-style:normal}
.lx-note.ok{background:var(--lx-green-soft); color:#0b7a5c}
.lx-note.warn{background:var(--lx-amber-soft); color:#96610c}

/* ==========================================================================
   五、课程 / 章节
   ========================================================================== */
.lx-course{display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1080px){ .lx-course{grid-template-columns:1fr} }

.lx-cover{
  border-radius:var(--lx-r); overflow:hidden; border:1px solid var(--lx-line);
  background:#fff; box-shadow:var(--lx-sh);
}
.lx-cover__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:#f6eef9}
.lx-cover__img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.lx-cover:hover .lx-cover__img img{transform:scale(1.03)}
.lx-cover__img::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(40,20,60,.42));
}
.lx-cover__txt{position:absolute; left:14px; right:14px; bottom:11px; z-index:1; color:#fff}
.lx-cover__txt b{display:block; font-size:14px; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.28)}
.lx-cover__txt span{font-size:11px; opacity:.88}
.lx-cover__meta{padding:11px 14px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:#8b849c}
.lx-cover__meta .sp{flex:1}

.lx-chap{background:#fff; border:1px solid var(--lx-line); border-radius:var(--lx-r); box-shadow:var(--lx-sh)}
.lx-chap__hd{
  display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--lx-line2);
}
.lx-chap__hd h3{margin:0; font-size:14.5px; font-weight:800; color:#2b2340}
.lx-chap__hd .sp{flex:1}
.lx-chap__body{padding:6px 8px 10px}
.lx-chap__group{padding:10px 10px 4px; font-size:11.5px; color:#a49cba; font-weight:600; letter-spacing:.4px}

.lx-step{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; cursor:pointer;
  transition:.14s;
}
.lx-step:hover{background:#fdf9fc}
.lx-step__ix{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:10.5px; font-weight:700; font-family:var(--lx-num);
  background:#f4f0f9; color:#8b849c;
}
.lx-step.done .lx-step__ix{background:var(--lx-green-soft); color:#0b8f6b}
.lx-step.doing .lx-step__ix{background:var(--lx-red-soft); color:var(--lx-red)}
.lx-step__b{flex:1; min-width:0}
.lx-step__b b{display:block; font-size:12.8px; color:#332a48; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-step.done .lx-step__b b{color:#7b7390}
.lx-step__b .mt{display:flex; align-items:center; gap:8px; margin-top:4px}
.lx-step__b .mt .lb{font-size:10.5px; color:#b3aac2; white-space:nowrap; font-family:var(--lx-num)}
.lx-step__r{display:flex; align-items:center; gap:8px; flex:none}
.lx-step__go{
  font-size:11.5px; color:var(--lx-red); border:1px solid #ffd9e3; background:#fff;
  border-radius:6px; padding:3px 9px; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.lx-step__go:hover{background:var(--lx-red-soft)}

/* 能力词云 */
/* 能力词云：按权重给字号，不用胶囊，避免读成“标签云” */
.lx-cloud{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
  padding:2px 0 6px; line-height:1.45;
}
.lx-cloud b{font-weight:600; background:none; border:0; padding:0; white-space:nowrap}
.lx-cloud b.lv1{font-size:11.5px; color:#a49cba}
.lx-cloud b.lv2{font-size:14px; color:#7c5cff; font-weight:700}
.lx-cloud b.lv3{font-size:18px; color:#e11d48; font-weight:800; letter-spacing:.2px}
.lx-teacher{display:flex; align-items:center; gap:11px; margin-top:12px}
.lx-teacher .av{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#ede9fe,#ddd6fe); color:#6d28d9; font-size:12px; font-weight:700;
}
.lx-teacher b{display:block; font-size:12.5px; color:#332a48}
.lx-teacher span{font-size:11px; color:#a49cba}

/* ==========================================================================
   六、任务页（任务学习 / 实训步骤 / 进入系统）
   ========================================================================== */
.lx-taskbar{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--lx-line);
  border-radius:var(--lx-r); padding:11px 15px; margin-bottom:14px; box-shadow:var(--lx-sh);
}
.lx-taskbar .bc{font-size:12.5px; color:#8b849c; display:flex; align-items:center; gap:7px}
.lx-taskbar .bc b{color:#2b2340; font-weight:700}
.lx-taskbar .sp{flex:1}
.lx-clock{font-family:var(--lx-num); font-size:12.5px; color:#8b849c; letter-spacing:.5px}

.lx-task{display:grid; grid-template-columns:352px minmax(0,1fr); gap:14px; align-items:start}
@media (max-width:1020px){ .lx-task{grid-template-columns:1fr} }

.lx-subtabs{display:flex; gap:16px; border-bottom:1px solid var(--lx-line); margin-bottom:14px}
.lx-subtab{
  position:relative; border:0; background:none; font-family:inherit; cursor:pointer;
  font-size:12.5px; color:#8b849c; padding:0 0 9px;
}
.lx-subtab.on{color:var(--lx-red); font-weight:700}
.lx-subtab.on::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--lx-red);
  border-radius:2px;
}

.lx-video{
  border-radius:9px; overflow:hidden; border:1px solid #efe7f5; background:#1c1428; position:relative;
}
.lx-video video{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#1c1428}
.lx-video__cap{
  display:flex; align-items:center; gap:8px; padding:8px 11px; background:#fff;
  border-top:1px solid var(--lx-line2); font-size:11.5px; color:#8b849c;
}
.lx-video__cap b{color:#332a48; font-weight:700}

.lx-steps{counter-reset:s; margin-top:14px}
.lx-steps li{
  list-style:none; position:relative; padding:0 0 14px 26px; font-size:12.5px; color:#5f5875;
  line-height:1.75;
}
.lx-steps li::before{
  counter-increment:s; content:counter(s); position:absolute; left:0; top:1px;
  width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:700; color:#8b849c; background:#f4f0f9; font-family:var(--lx-num);
}
.lx-steps li::after{
  content:''; position:absolute; left:8px; top:20px; bottom:0; width:1px; background:#f0e9f3;
}
.lx-steps li:last-child::after{display:none}
.lx-steps li b{color:#332a48; font-weight:700}
.lx-steps li code{
  background:#faf6fd; color:#be123c; border:1px solid #f4ecf8; border-radius:4px;
  padding:1px 5px; font-size:11.5px; font-family:var(--lx-num);
}

.lx-start{
  border:1px dashed #eadff2; border-radius:var(--lx-r); background:
    radial-gradient(120% 80% at 50% 0%, #fff8fb, #fff 62%);
  padding:20px 22px 22px; text-align:left;
}
.lx-start h4{margin:0 0 6px; font-size:15px; color:#2b2340; font-weight:800; letter-spacing:.3px}
.lx-start p{margin:0 0 18px; font-size:12px; color:#a49cba; line-height:1.7}
.lx-flowline{display:flex; flex-direction:column; gap:0; text-align:left; max-width:none; margin:0}
.lx-fl{display:flex; gap:13px; position:relative; padding-bottom:18px}
.lx-fl:last-child{padding-bottom:0}
.lx-fl__dot{
  width:13px; height:13px; border-radius:50%; border:2px solid #e9dff2; background:#fff; flex:none;
  margin-top:4px; position:relative; z-index:1;
}
.lx-fl.on .lx-fl__dot{border-color:var(--lx-red); background:var(--lx-red); box-shadow:0 0 0 4px rgba(225,29,72,.10)}
.lx-fl::before{
  content:''; position:absolute; left:6px; top:17px; bottom:0; width:1px; background:#eee5f4;
}
.lx-fl:last-child::before{display:none}
/* 列向 flex：让「说明文字」与「按钮」各占一行。
   否则 span 是行内元素，inline-flex 按钮会跟最后一行文字挤在同一行，
   压住「模块：org-tree」这类结尾文字（截图里一眼就能看出来）。 */
.lx-fl__b{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start}
.lx-fl__b b{display:block; font-size:12.5px; color:#332a48; margin-bottom:2px}
.lx-fl__b span{font-size:11.5px; color:#9a93ad; line-height:1.7}
.lx-fl__b .btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px; height:34px; padding:0 15px;
  border-radius:7px; border:0; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;
  color:#fff; background:linear-gradient(135deg,#f43f5e,#e11d48); box-shadow:0 6px 16px rgba(225,29,72,.22);
}
.lx-fl__b .btn.ghost{
  background:#fff; color:#6f6785; border:1px solid #ece5f1; box-shadow:none; font-weight:600;
}
.lx-fl__b .btn.ghost:hover{border-color:#ffd9e3; color:var(--lx-red)}

.lx-desc{margin-top:14px}
.lx-desc h5{margin:0 0 6px; font-size:12px; color:#8b849c; font-weight:600; letter-spacing:.3px}
.lx-desc p{margin:0 0 10px; font-size:12.5px; color:#5f5875; line-height:1.85}
.lx-desc .case{
  background:#fbf9fd; border:1px solid #f4eef9; border-left:3px solid #e9d5ff;
  border-radius:0 7px 7px 0; padding:11px 13px; font-size:12px; color:#6f6785; line-height:1.9;
}
.lx-desc .case b{color:#332a48}

/* ==========================================================================
   七、教师端：教学管理（页签 + 考试表）
   ========================================================================== */
.lx-tabs2{
  display:flex; gap:2px; align-items:center; background:#fff; border:1px solid var(--lx-line);
  border-radius:var(--lx-r); padding:6px; box-shadow:var(--lx-sh); margin-bottom:14px; overflow:auto;
}
.lx-tabs2::-webkit-scrollbar{display:none}
.lx-tabs2 .t{
  border:0; background:transparent; font-family:inherit; font-size:12.8px; color:#6f6785;
  padding:7px 14px; border-radius:7px; cursor:pointer; white-space:nowrap;
}
.lx-tabs2 .t:hover{background:#fbf7fc}
.lx-tabs2 .t.on{background:var(--lx-red-soft); color:var(--lx-red); font-weight:700}

.lx-tablewrap{background:#fff; border:1px solid var(--lx-line); border-radius:var(--lx-r); box-shadow:var(--lx-sh); overflow:hidden}
.lx-tablehd{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--lx-line2)}
.lx-tablehd .sp{flex:1}
.lx-tablehd .srch{
  display:flex; align-items:center; gap:7px; height:32px; padding:0 10px; border:1px solid #ece5f1;
  border-radius:7px; background:#fdfbfe; width:220px;
}
.lx-tablehd .srch input{border:0; outline:0; background:transparent; font-size:12px; width:100%; font-family:inherit}
.lx-table{width:100%; border-collapse:collapse; font-size:12.5px}
.lx-table th{
  background:#fcfafd; color:#8b849c; font-weight:600; text-align:left; padding:10px 14px;
  border-bottom:1px solid var(--lx-line2); white-space:nowrap; font-size:11.5px;
}
.lx-table td{padding:11px 14px; border-bottom:1px solid var(--lx-line2); color:#4b4463}
.lx-table tr:last-child td{border-bottom:0}
.lx-table tbody tr:hover{background:#fdfafc}
.lx-table .op{color:var(--lx-red); cursor:pointer; font-weight:600}

.lx-empty{
  padding:52px 20px; text-align:center; color:#b3aac2; font-size:12.5px;
}
.lx-empty svg{opacity:.5; margin-bottom:10px}

/* ==========================================================================
   八、与旧组件的兼容修补
   ========================================================================== */
.lx-content .page-head, .lx-content .card{box-shadow:var(--lx-sh)}
.lx-content .btn.primary{background:linear-gradient(135deg,#f43f5e,#e11d48); border-color:transparent}
.lx-content table{font-family:inherit}

/* 底部浮动操作（任务页返回/提交） */
.lx-footbar{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 16px;
  background:#fff; border:1px solid var(--lx-line); border-radius:var(--lx-r); box-shadow:var(--lx-sh);
}
.lx-footbar .sp{flex:1}
.lx-footbar .hint{font-size:11.5px; color:#a49cba}

/* ==========================================================================
   九、旧视图换肤层
   --------------------------------------------------------------------------
   后台还有 30+ 个旧视图（业务操作、基础数据、成绩评价…）直接引用 app.css 的
   设计令牌。这里在 .lx-content 作用域内把令牌重映射为洋红/紫主色 —— 
   变量级换肤，旧视图一行 JS 都不用改，也不会污染登录页与打印样式。
   ========================================================================== */
/* 令牌重映射的作用域：内容区 + 弹层/提示挂载点。
   弹层挂在 #modal-root（body 下），不在 .lx-content 里，必须一并覆盖，
   否则「修改密码」「确认退出」这类对话框会退回蓝色主色。 */
.lx-content,
#modal-root,
#toast-root{
  --c-primary:#e11d48;
  --c-primary-d:#be123c;
  --c-cyan:#8b5cf6;
  --c-indigo:#7c5cff;
  --c-violet:#7c3aed;
  --c-mint:#12b886;
  --grad:linear-gradient(135deg,#f43f5e 0%,#e11d48 52%,#7c5cff 100%);
  --grad-soft:linear-gradient(135deg,#fff1f4 0%,#f7f1ff 100%);
  --grad-violet:linear-gradient(135deg,#7c5cff,#6366f1);
  --primary:#e11d48;
  --primary-600:#be123c;
  --primary-50:#fff1f4;
  --brand:#be123c;
  --cyan:#8b5cf6;
  --t1:#2b2340;
  --t2:#5f5875;
  --t3:#8b849c;
  --t4:#a49cba;
  --line:#f0e9f3;
  --line2:#f7f2f9;
  --line-2:#f7f2f9;
  --bg:#fbf8fd;
  --bg2:#f8f4fb;
  --panel2:#fdfafc;
  --panel-2:#fdfafc;
  --sh1:0 1px 2px rgba(70,40,90,.04);
  --sh2:0 4px 14px rgba(70,40,90,.06);
  --r:12px;
  --r2:14px;
}

/* 卡片 / 统计块：对齐新主题的圆角与描边 */
.lx-content .card,
.lx-content .stat,
.lx-content .flow-stage,
.lx-content .panel{border-radius:var(--lx-r); border-color:var(--lx-line)}
.lx-content .card-h{border-bottom-color:var(--lx-line2)}
.lx-content .card-h .ch-t{font-weight:800; color:#2b2340}
.lx-content .card-h .ch-t svg{color:var(--lx-red)}
.lx-content .stat::after{width:3px; top:14px; bottom:14px; border-radius:0 3px 3px 0}
.lx-content .stat .s-v{font-weight:800; letter-spacing:-.4px}

/* 表格：表头改浅紫底，悬停行改暖白，避免蓝调抢主色 */
.lx-content table.tbl thead th{background:#fbf8fd; color:#8b849c; border-bottom-color:var(--lx-line)}
.lx-content table.tbl tbody tr:hover td{background:#fdfafc}
.lx-content table.tbl tbody tr.on td,
.lx-content table.tbl tbody tr.sel td{background:#fff5f8}
.lx-content table.tbl td.mono{color:#8b6b8f}

/* 次级按钮：原蓝色渐变改紫，保持层级但不与主色打架 */
.lx-content .btn.brand{background:linear-gradient(135deg,#7c5cff,#6366f1); box-shadow:0 3px 10px rgba(124,92,255,.22)}
.lx-content .btn.teal{background:linear-gradient(135deg,#7c5cff,#8b5cf6); box-shadow:0 3px 10px rgba(124,92,255,.2)}
.lx-content .btn.ghost:hover{background:var(--lx-red-soft); color:var(--lx-red)}
.lx-content .op-link:hover{background:var(--lx-red-soft)}
.lx-content .pager button:hover:not(:disabled),
.lx-content .pg-btn:hover:not([disabled]){border-color:#f7c9d6; color:var(--lx-red); background:#fffafb}

/* 顶栏的环境标签（练习/考试模式）跟主色统一 */
.lx-top .env-chip{background:var(--lx-red-soft); color:#be123c; border-color:#ffd9e2}
.lx-top .env-chip.exam{background:var(--lx-amber-soft); color:#96610c; border-color:#fbe3bd}
.lx-top .env-chip.done{background:var(--lx-green-soft); color:#0b7a5c; border-color:#c9f0e2}

/* ==========================================================================
   十、教师端统计块（四宫格小卡，替代原来散在整行的裸数字）
   ========================================================================== */
.lx-stat4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:4px}
@media (max-width:900px){ .lx-stat4{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lx-stat4__i{
  border:1px solid var(--lx-line); border-radius:11px; padding:11px 13px 10px;
  background:linear-gradient(180deg,#fdfbfe,#fff); position:relative; overflow:hidden;
}
.lx-stat4__i::before{
  content:''; position:absolute; left:0; top:11px; bottom:11px; width:2px; border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#fb7185,#e11d48);
}
.lx-stat4__i .k{font-size:11px; color:#a49cba}
.lx-stat4__i .v{font-size:21px; font-weight:800; color:#2b2340; line-height:1.25; letter-spacing:-.3px}
.lx-stat4__i .v.red{color:var(--lx-red)}
.lx-stat4__i .v.vio{color:var(--lx-violet)}
.lx-stat4__i em{font-style:normal; font-size:10.5px; color:#b3aac2}

/* 仿真（工作应用）视图：旧高度按「顶栏 58 + 页头 46」算，新外壳的
   顶栏 56 + 内容内边距 20 + 面包屑 34，可用高度更小，这里按新壳重算，
   否则页面会多出几十像素的纵向滚动条。 */
.lx-content .sim-wrap{height:calc(100vh - 172px); min-height:560px}

/* ==========================================================================
   十一、旧选择器兼容
   --------------------------------------------------------------------------
   新外壳沿用了旧类名（aside.sidebar / div.who）作为自动化与截图工具的定位锚点，
   这里把旧样式对这两个类的影响抹平，避免换肤后被旧规则改回去。
   ========================================================================== */
.lx-rail.sidebar{background:#fff; background-image:none; border-right-color:var(--lx-line)}
.lx-top .lx-who.who{border:0; background:transparent; padding:0}
.lx-top .lx-who.who .nm b{font-size:12.4px}

/* 旧的 teal 强调色是唯一不在新色板里的颜色（青绿 → 抢洋红），
   在内容区统一收进「靛蓝」档，统计卡五色仍在同一体系内。 */
.lx-content .stat.c-teal::after{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.lx-content .stat.c-teal .s-v{color:#4f46e5}

/* ==========================================================================
   十二、打印
   --------------------------------------------------------------------------
   F-42：换成乐柠外壳时只迁了屏显样式，打印规则还留在 app.css 里按旧类名写
   （`.sidebar / .topbar`）。新外壳的顶栏叫 `.lx-top`，一条规则都没命中，
   于是打印成绩表、交付物时页眉会混进页签、一排图标按钮与用户胶囊。
   这里按新结构重写，并补回校名页眉（旧版是 `.main::before` 那段）。
   ========================================================================== */
@media print{
  .lx-top,.lx-rail,.lx-crumb,#toast-root,.ai-fab,.ai-panel{display:none!important}
  /* F-47：交互控件不该出现在纸上。以前只藏了外壳，页面内的「发起补考 ›」
     「切换场次」下拉、表格行末的操作按钮照样打出来 —— 纸上点不动，
     收件人只能靠截图猜这些按钮是干什么的；下拉更糟，只印出当前选项，
     看起来像一行说明文字。整块藏掉，表格与数字才是打印要看的东西。 */
  /* 只藏「点了才有意义」的控件。别把 input[type=checkbox] 一起藏掉：
     权限矩阵、数据字典这类表用勾选框表示「已授权」，藏了等于把信息抹掉。 */
  button,.btn,select,.tp-actions,.tp-sess{display:none!important}
  #app-root:not([hidden]){display:block!important}
  .lx-main{margin:0;padding:0;display:block}
  .lx-content{padding:0;overflow:visible;display:block;animation:none}
  /* 动画在打印时会让首屏元素停留在 transform 的中间态，直接关掉 */
  .lx-content > *{animation:none!important}
  /* C-2：页眉改为真实 DOM（见 shell.js 的 #print-head）。
     CSS 的 content 只在纸面上存在，选不中、复制不了、也搜不到 ——
     而打印出来的成绩单是要被人「照着念、照着核」的。 */
  #print-head{display:block!important;padding-bottom:7pt;border-bottom:1.5pt solid #10305f;margin-bottom:12pt}
  .lx-panel,.card,.flow-stage{break-inside:avoid; box-shadow:none}
}

/* 打印页眉：屏显一律不占位；内容由 app.js 在每次切页时按「分组 / 页面 / 时间」写一次。
   取代原先 `.lx-content::before { content:"…" }` 的做法（C-2）：伪元素只在纸面上存在，
   选不中、复制不了、也搜不到，而打印出来的成绩单是要被人照着核对的。 */
#print-head{display:none}
#print-head b{display:block;font-size:12pt;font-weight:700;color:#10305f;letter-spacing:.5px}
#print-head span{display:block;font-size:9.5pt;color:#4b4660;margin-top:3pt}
#print-head em{display:block;font-size:8.5pt;color:#8b849c;font-style:normal;margin-top:2pt}

/* 外壳页签角标（教师端「教学管理」待回复提示） */
.lx-tab { position: relative; }
.lx-tab .lx-tabbadge {
  position: absolute; top: 4px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  border-radius: 99px; background: #e11d48; color: #fff;
  font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 15px;
  text-align: center; box-shadow: 0 1px 3px rgba(225, 29, 72, .4);
}

/* 顶栏构建标识：让「页面是不是最新版」一眼可辨 */
.lx-build {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-size: 10px; font-style: normal; font-weight: 500;
  color: #8d86a0; background: #f5f1fa; border: 1px solid #ece5f4;
  border-radius: 99px; padding: 1px 7px; cursor: pointer;
  letter-spacing: .2px; white-space: nowrap;
}
.lx-build:hover { color: var(--lx-red); background: var(--lx-red-soft); border-color: #fbd5e2; }

/* ==========================================================================
   顶栏消息中心（第二十三轮）
   公告与答疑回复合成一处：学生只需要知道「有没有人找我」。
   ========================================================================== */
.lx-msgwrap { position: relative; display: inline-flex; }
.lx-bell { position: relative; }
.lx-msgdot {
  position: absolute; top: 3px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  border-radius: 99px; background: #e11d48; color: #fff;
  font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 15px;
  text-align: center; box-shadow: 0 1px 3px rgba(225, 29, 72, .4);
}
.lx-msgpanel {
  position: absolute; top: 38px; right: -6px; width: 348px; z-index: 70;
  background: #fff; border: 1px solid var(--lx-line); border-radius: 14px;
  box-shadow: 0 18px 46px -18px rgba(40, 20, 60, .35);
  overflow: hidden;
}
.lx-msghd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--lx-line2);
}
.lx-msghd b { font-size: 13px; color: var(--lx-ink); }
.lx-msghd span { font-size: 11px; color: var(--lx-ink3); }
.lx-msgall {
  margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 11px; color: var(--lx-red);
}
.lx-msgall:hover { text-decoration: underline; }
.lx-msglist { max-height: 380px; overflow: auto; }
.lx-msgitem {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px;
  gap: 8px; align-items: start; width: 100%; text-align: left;
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--lx-line2);
  background: none; cursor: pointer; font-family: inherit;
}
.lx-msgitem:last-child { border-bottom: 0; }
.lx-msgitem:hover { background: #fbf9fc; }
.lx-msgitem.unread { background: #fffafb; }
.lx-msgitem .k {
  font-size: 9.5px; color: #7c5cff; background: var(--lx-violet-soft);
  border-radius: 5px; padding: 2px 0; text-align: center; margin-top: 2px;
}
.lx-msgitem .k.qa { color: #0b8f6a; background: #ecfdf5; }
/* 退回用红：这是唯一「要你立刻返工」的消息类型，颜色上要和公告/答疑区分开 */
.lx-msgitem .k.return { color: #a8123a; background: #fdeef3; }
.lx-msgitem .b { min-width: 0; }
.lx-msgitem .b b {
  display: block; font-size: 12px; color: var(--lx-ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-msgitem .b em {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-style: normal; font-size: 11px; color: var(--lx-ink3); margin-top: 2px; line-height: 1.6;
}
.lx-msgitem .t { font-size: 10px; color: #b8b0c6; text-align: right; margin-top: 2px; }
.lx-msgitem.unread .b b::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lx-red); margin-left: 5px; vertical-align: 2px;
}
.lx-msgempty { padding: 26px 16px; text-align: center; font-size: 11.5px; color: var(--lx-ink3); line-height: 1.9; }