/* ===== Design Token System ===== */
:root {
  --primary: #1e3a5f;
  --primary-light: #2d5a8e;
  --primary-dark: #0f2440;
  --accent: #d97706;
  --accent-light: #f59e0b;
  --green: #059669;
  --green-light: #d1fae5;
  --red: #dc2626;
  --red-light: #fee2e2;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --blue-light: #dbeafe;
  --purple: #7c3aed;
  --purple-light: #ede9fe;
  
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-hero: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #3b82f6 100%);
  --text: #0f172a;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --font: 'PingFang SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --max-width: 430px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow-x: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  padding-bottom: 72px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Pages */
.page { display: none; max-width: var(--max-width); margin: 0 auto; min-height: 100vh; }
.page.active { display: block; animation: pageFadeIn 0.3s ease-out; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Top Bar */
.top {
  display: flex; align-items: center; padding: 0 var(--space-4);
  background: var(--primary); color: #fff;
  position: sticky; top: 0; z-index: 10;
  height: 50px; min-height: 50px;
  backdrop-filter: blur(10px);
}
.top .bk { font-size: 22px; cursor: pointer; width: 36px; text-align: center; transition: opacity 0.2s; }
.top .bk:active { opacity: 0.6; }
.top .tt { font-size: var(--text-lg); font-weight: 600; flex: 1; text-align: center; letter-spacing: 0.5px; }

/* Hero Section */
.hero {
  background: var(--bg-hero);
  color: #fff; padding: 32px 20px 40px; text-align: center;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: 1px; position: relative; }
.hero p { font-size: var(--text-sm); opacity: 0.8; margin-top: 6px; position: relative; }

/* Stats Row */
.sr {
  display: flex; gap: 10px; padding: 0 var(--space-4);
  margin-top: -20px; position: relative; z-index: 2;
}
.sb {
  flex: 1; background: var(--bg-card); border-radius: var(--radius);
  padding: 14px 8px 12px; text-align: center;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sb:active { transform: scale(0.96); }
.sb .n { font-size: 24px; font-weight: 800; color: var(--primary); display: block; }
.sb .l { font-size: var(--text-xs); color: var(--text-light); display: block; margin-top: 2px; }
.sb .lp {
  font-size: 9px; color: var(--accent); margin-top: 4px;
  font-weight: 600; display: inline-block;
  background: var(--amber-light); padding: 1px 8px; border-radius: 10px;
}

/* Section Title */
.st {
  padding: var(--space-5) var(--space-4) var(--space-2);
  font-size: var(--text-lg); font-weight: 600;
  display: flex; align-items: center;
}
.st span:last-child { font-size: var(--text-sm); color: var(--text-light); font-weight: 400; margin-left: auto; }

/* Module List */
.ml { padding: 0 var(--space-3); }
.mc {
  background: var(--bg-card); border-radius: var(--radius);
  padding: var(--space-4); margin-bottom: var(--space-3);
  cursor: pointer; display: flex; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid var(--border);
}
.mc:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
.mi {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-right: var(--space-3); flex-shrink: 0;
}
.mi.b { background: var(--blue-light); }
.mi.o { background: var(--amber-light); }
.mi.g { background: var(--green-light); }
.mb { flex: 1; min-width: 0; }
.mn { font-size: var(--text-base); font-weight: 600; color: var(--text); }
.md { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.ms {
  font-size: var(--text-xs); padding: 3px 12px; border-radius: 12px;
  white-space: nowrap; font-weight: 500;
}
.ms.g { background: var(--green-light); color: var(--green); }
.ms.o { background: var(--amber-light); color: var(--accent); }
.ms.b { background: var(--blue-light); color: var(--primary-light); }
.msp { height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.msp div { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.msp div.g { background: linear-gradient(90deg, var(--green), #34d399); }
.msp div.o { background: linear-gradient(90deg, var(--accent), #fbbf24); }

/* Sub-module Grid */
.sg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--space-3); }
.sc {
  background: var(--bg-card); border-radius: var(--radius);
  padding: var(--space-4) var(--space-2); text-align: center;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
  border: 1px solid var(--border);
}
.sc:active { transform: scale(0.95); }
.sc .si { font-size: 30px; display: block; margin-bottom: 6px; }
.sc .sn { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.sc .ss {
  font-size: 9px; margin-top: 6px; padding: 2px 12px; border-radius: 10px;
  display: inline-block; font-weight: 500;
}
.sc .ss.g { background: var(--green-light); color: var(--green); }
.sc .ss.b { background: var(--blue-light); color: var(--primary-light); }
.sc .ss.r { background: var(--red-light); color: var(--red); }
.sc .sp { height: 3px; background: #e2e8f0; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.sc .sp div { height: 100%; background: linear-gradient(90deg, var(--green), #34d399); border-radius: 2px; }

/* Lesson / Section List */
.lw { padding: var(--space-3) var(--space-4); }

/* Content Viewer (Read Section) */
.lc {
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.lc h2 { font-size: var(--text-xl); color: var(--primary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid #e2e8f0; }
.lc h3 { font-size: var(--text-base); color: var(--accent); margin: var(--space-5) 0 var(--space-2); padding-left: var(--space-3); border-left: 3px solid var(--accent); }
.lc p { font-size: var(--text-base); line-height: 1.9; color: var(--text); margin-bottom: var(--space-3); }
.lc .hl {
  background: var(--amber-light); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius); margin: var(--space-4) 0;
  font-size: var(--text-sm); border-left: 4px solid var(--accent);
  line-height: 1.8; color: #92400e;
}

/* Exam Progress */
.eh { display: flex; justify-content: space-between; background: var(--bg-card); border-radius: var(--radius); padding: 10px 16px; margin: 0 var(--space-3); border: 1px solid var(--border); }
.eh .ep { font-size: var(--text-sm); color: var(--text-secondary); }
.eh .et { font-size: var(--text-sm); color: var(--accent); font-weight: 600; }

/* Quiz Container */
.qc { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); margin: var(--space-3); min-height: 200px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.qc .qt { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-5); line-height: 1.6; color: var(--text); }
.qo {
  margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--text-base); line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.qo:hover { border-color: var(--primary-light); }
.qo.sel { border-color: var(--primary); background: #eff6ff; font-weight: 600; }
.qo.cor { border-color: var(--green); background: var(--green-light); font-weight: 600; }
.qo.wro { border-color: var(--red); background: var(--red-light); }

/* Result Screen */
.rw { padding: var(--space-4); }
.rc { background: var(--bg-card); border-radius: var(--radius-xl); padding: 32px 20px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); }
.rc .ri { font-size: 64px; display: block; margin-bottom: 8px; }
.rc .rs { font-size: 48px; font-weight: 800; color: var(--primary); }
.rc .rl { font-size: var(--text-base); color: var(--text-secondary); margin-top: 6px; }

/* Buttons */
.br { display: flex; gap: var(--space-2); padding: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn {
  padding: 12px 32px; border-radius: 24px; border: none;
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.96); }
.btn.p { background: var(--bg-hero); color: #fff; box-shadow: 0 4px 12px rgba(30,58,95,0.3); }
.btn.s { background: linear-gradient(135deg, var(--green), #34d399); color: #fff; }
.btn.r { background: linear-gradient(135deg, var(--red), #ef4444); color: #fff; }
.btn.o { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn.b { width: 100%; }

/* Bottom Navigation */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-width);
  background: var(--bg-card); border-top: 1px solid var(--border);
  display: flex; padding: 6px 0 10px;
  z-index: 100; box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  backdrop-filter: blur(10px);
}
.nav .ni {
  flex: 1; text-align: center; font-size: var(--text-xs); color: var(--text-light);
  padding: 2px; cursor: pointer; transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav .ni .niic { font-size: 22px; display: block; margin-bottom: 2px; transition: transform 0.2s; }
.nav .ni:active .niic { transform: scale(0.9); }
.nav .ni.act { color: var(--primary); font-weight: 600; }
.nav .ni.act .niic { color: var(--primary); }

/* Admin Panels */
#apMod { padding: var(--space-4); }
#apCont { padding: var(--space-4); }
#apQuiz { padding: var(--space-4); }
.fg {
  background: var(--bg-card); border-radius: var(--radius);
  padding: var(--space-4); margin-bottom: var(--space-3);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.fg label { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin: 8px 0 4px; font-weight: 500; }
.fg input[type="text"], .fg select, .fg textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--text-base);
  font-family: var(--font); outline: none;
  transition: border-color 0.2s;
}
.fg input[type="text"]:focus, .fg select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }
.qr { background: #f8fafc; border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--border); }
.qri { font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; }
.qro { font-size: var(--text-sm); padding: 3px 0; }
.am { font-size: var(--text-sm); color: var(--primary); cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; }
.am:hover { background: #eff6ff; }
.am.r { color: var(--red); }
.am.r:hover { background: var(--red-light); }

/* Toast Message */
#m{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;background:#fff;padding:10px 24px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);font-size:13px;font-weight:500;display:none;max-width:300px;text-align:center;color:#1e3a5f}
#m.s{background:#f0fdf4;color:#059669}
#m.e{background:#fef2f2;color:#dc2626}

/* Editor */
#editor-body { overflow-x: hidden; min-height: 250px; background: #fff; border: 2px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: var(--space-4); font-size: 14px; line-height: 1.8; outline: none; }
#editor-toolbar { background: #f8fafc; border: 2px solid var(--border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 4px; display: flex; gap: 2px; flex-wrap: wrap; }
#editor-body:focus { border-color: var(--primary); }

/* Utility */
.ld { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }

/* Page-specific */
#PB { padding: var(--space-4); }
#PS { padding: var(--space-4); }
#PL { padding: var(--space-4); }

#pList { padding: var(--space-4); }
.lc-content { padding: 0; }

.lockOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }

/* Admin tab */
#atabs { display: none; }


.at{display:flex;gap:0;padding:0 var(--space-4);background:#fff;border-bottom:1px solid var(--border);position:sticky;top:50px;z-index:9}
.at div{padding:12px 16px;font-size:14px;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:color 0.2s,border-color 0.2s}
.at div.act{color:var(--primary);border-bottom-color:var(--primary);font-weight:400}
.at div:hover{color:var(--primary)}

/* ========== PHASE1 PROFESSIONAL POLISH (2026-08-01) ========== */
:root{
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --font:-apple-system,BlinkMacSystemFont,'PingFang SC','HarmonyOS Sans','Microsoft YaHei',sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --shadow-card:0 1px 2px rgba(0,0,0,0.04),0 4px 12px rgba(50,50,93,0.06);
  --shadow-elevated:0 8px 24px rgba(50,50,93,0.12),0 2px 6px rgba(0,0,0,0.04);
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:var(--bg)}
/* 卡片微交互 - 悬停抬升 */
.pc{border-radius:var(--radius);transition:transform .22s cubic-bezier(.25,.8,.25,1),box-shadow .22s ease,border-color .22s ease}
.pc:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevated)}
.pc:active{transform:translateY(0)}
/* 按钮反馈 */
.btn{border-radius:var(--radius-sm);transition:transform .12s ease,box-shadow .2s ease,opacity .2s,background .2s}
.btn:active{transform:scale(.96)}
/* 底部导航项平滑 */
.ni{transition:color .2s ease,background .2s ease,transform .12s ease}
.ni:active{transform:scale(.94)}
.ni .niic{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.ni:active .niic{transform:scale(1.15)}
/* 全局平滑过渡 - 页面淡入 */
#main,.page{transition:opacity .18s ease}
/* 数字统计值等宽数字更好看 */
.stats-value,.n{font-variant-numeric:tabular-nums}
/* 进度条质感 */
.progress{overflow:hidden;border-radius:999px;background:rgba(0,0,0,.06)}
.progress>div{transition:width .5s cubic-bezier(.25,.8,.25,1);border-radius:999px}
/* 图片圆角 */
.pc img{border-radius:var(--radius-sm)}
/* 滚动条美化(Webkit) */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28)}
/* 焦点可见性 - 无障碍 */
:focus-visible{outline:2px solid var(--accent, #d97706);outline-offset:2px}
/* 减少闪烁的平滑滚动 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ========== PHASE2 LEARNING ENHANCEMENTS (2026-08-01) ========== */
/* 答题选项 - 现代卡片化 */
.qo{border:1.5px solid var(--border,#e2e8f0);border-radius:12px;padding:14px 16px;margin:10px 0;
    background:var(--bg-card,#fff);cursor:pointer;font-size:15px;line-height:1.5;text-align:left;
    transition:transform .18s cubic-bezier(.25,.8,.25,1),border-color .18s,box-shadow .18s,background .18s;
    box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
.qo:hover{border-color:var(--accent,#d97706);transform:translateX(4px);box-shadow:var(--shadow-card)}
.qo.sel{border-color:var(--accent,#d97706);background:var(--amber-light,#fef3c7);font-weight:400;
    transform:translateX(4px);box-shadow:0 0 0 3px rgba(217,119,6,.14)}
.qo:active{transform:scale(.98)}

/* 加载旋转图标 */
#ico{display:inline-block;animation:lmsSpin 1.1s linear infinite}
@keyframes lmsSpin{to{transform:rotate(360deg)}}

/* 结果页星星弹入 */
#PR .pc span[style*="color:#f59e0b"],#PR .pc span[style*="color:#e2e8f0"]{display:inline-block;animation:starPop .45s cubic-bezier(.34,1.56,.64,1) both}
#PR .pc span[style*="color:#f59e0b"]:nth-child(2){animation-delay:.08s}
#PR .pc span[style*="color:#f59e0b"]:nth-child(3){animation-delay:.16s}
@keyframes starPop{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* 关卡地图节点 - 按压/悬停(内联样式节点,用属性选择器) */
#sG div[style*="48px"]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
#sG div[style*="48px"]:active{transform:scale(.9)}

/* 统计卡片数值渐变计数由JS驱动,此处只做悬停增强(已在P1) */


/* ========== PHASE3 DARK MODE + PWA + MOTION (2026-08-01) ========== */
/* 自动暗色模式 - 基于系统偏好, 零JS */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --bg-card:#141d2e; --text:#e6edf7; --text-secondary:#93a4bd;
    --text-light:#6b7a93; --border:#243244; --border-light:#1a2436;
    --green-light:#123627; --amber-light:#3a2b12; --blue-light:#14263f;
    --purple-light:#241c3a; --red-light:#3a1414;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-card:0 2px 12px rgba(0,0,0,.5);
    --shadow-elevated:0 8px 24px rgba(0,0,0,.6);
    --bg-hero:linear-gradient(135deg,#0f1d38 0%,#16294a 55%,#1d3a6b 100%);
  }
  body{background:var(--bg);color:var(--text)}
  .pc,.top,.page{background:var(--bg-card);border-color:var(--border)}
  .nav{background:rgba(13,20,32,.82)!important;border-top-color:rgba(255,255,255,.06)!important}
  .nav .ni,.hero h1,.hero p,.tt,.am,.ni,.pc,.top{color:var(--text)}
  .hero{color:var(--text)}
  .qo{background:var(--bg-card);border-color:var(--border);color:var(--text)}
  .qo:hover{border-color:var(--accent)}
  .qo.sel{background:var(--amber-light);border-color:var(--accent)}
  .pc *{color:var(--text)}
  .pc .p,.pc .l,.pc .n{color:var(--text)}
  input,textarea,select{background:var(--bg-card);color:var(--text);border-color:var(--border)}
  .progress{background:rgba(255,255,255,.08)}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
  #main{background:var(--bg);color:var(--text-secondary)}
}

/* PWA/动效完善 */
/* 平滑的颜色主题过渡(亮暗切换) */
body,.pc,.top,.qo,.nav,#main{transition:background .3s ease,color .3s ease,border-color .3s ease}
/* 减少动态内容的闪烁 */
.pc .n{font-variant-numeric:tabular-nums}


/* ========== VISUAL V2 — 现代全面换肤设计系统 (2026-08-01) ========== */
:root{
  --primary:#4f46e5; --primary-light:#6366f1; --primary-dark:#3730a3;
  --accent:#f59e0b; --accent-light:#fbbf24;
  --bg:#f4f6ff; --bg-card:#ffffff;
  --bg-hero:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#0ea5e9 130%);
  --text:#111827; --text-secondary:#6b7280; --text-light:#9ca3af;
  --border:#e5e7eb;
  --shadow-sm:0 1px 2px rgba(79,70,229,.06);
  --shadow:0 2px 6px rgba(79,70,229,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 8px 30px rgba(79,70,229,.14),0 2px 8px rgba(0,0,0,.06);
  --shadow-elevated:0 12px 40px rgba(79,70,229,.18);
}
body{background:var(--bg);color:var(--text)}

/* ---- HERO: 现代渐变 + 光晕 + 成就环 ---- */
.hero{background:var(--bg-hero);position:relative;overflow:hidden;color:#fff;
  padding:34px 20px 30px;border-radius:0 0 24px 24px;text-align:center}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;pointer-events:none}
.hero::before{width:180px;height:180px;background:#22d3ee;top:-50px;right:-40px}
.hero::after{width:160px;height:160px;background:#a78bfa;bottom:-60px;left:-30px}
.hero h1{position:relative;font-size:22px;font-weight:700;margin:8px 0 4px;letter-spacing:.5px}
.hero p{position:relative;font-size:13px;opacity:.9;margin:0}
.hero .hero-chip{position:relative;display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  padding:4px 14px;border-radius:999px;font-size:11px;letter-spacing:1px;margin-bottom:6px}

/* ---- 成就环 + 统计 ---- */
.ring-wrap{position:relative;width:96px;height:96px;margin:14px auto 0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.2);stroke-width:10}
.ring-fg{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.25,.8,.25,1)}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-txt b{font-size:22px;line-height:1}
.ring-txt span{font-size:10px;opacity:.85;margin-top:2px}

.sr{display:flex;gap:10px;padding:14px 14px 4px;max-width:430px;margin:0 auto;width:100%;box-sizing:border-box}
.sb{flex:1;background:var(--bg-card);border-radius:16px;padding:14px 8px;text-align:center;
  box-shadow:var(--shadow);border:1px solid var(--border);position:relative;overflow:hidden}
.sb::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.sb .n{display:block;font-size:22px;font-weight:800;color:var(--primary);line-height:1.1;font-variant-numeric:tabular-nums}
.sb .l{display:block;font-size:11px;color:var(--text-secondary);margin-top:3px}
.sb .lp{display:inline-block;margin-top:5px;font-size:10px;font-weight:700;color:var(--accent);
  background:rgba(245,158,11,.12);padding:2px 8px;border-radius:999px}
.sb:nth-child(2) .n{color:var(--accent)}
.sb:nth-child(3) .n{color:#7c3aed}
.sb:nth-child(2)::after{background:linear-gradient(90deg,var(--accent),#fb923c)}
.sb:nth-child(3)::after{background:linear-gradient(90deg,#7c3aed,#ec4899)}

/* ---- 模块卡片 ---- */
.st{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 8px;
  max-width:430px;margin:0 auto;width:100%;box-sizing:border-box;font-size:15px;font-weight:700;color:var(--text)}
.st span:last-child{font-size:12px;font-weight:500;color:var(--text-secondary)}
.ml{padding:0 14px;max-width:430px;margin:0 auto;width:100%;box-sizing:border-box}
.mc{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden}
.mc:active{transform:scale(.98)}
.mc:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.mc .mi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}
.mc .mn{font-size:15px;font-weight:700;color:var(--text)}
.mc .md{font-size:12px;color:var(--text-secondary);margin:3px 0 7px}
.mc .msp{height:6px;background:#eef2ff;border-radius:999px;overflow:hidden}
.mc .msp>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .6s ease}
.mc .msp>div.g{background:linear-gradient(90deg,#10b981,#34d399)}
.mc .ms{margin-left:auto;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:#eef2ff;color:var(--primary);flex-shrink:0}

/* ---- 底部导航: 玻璃拟态升级 ---- */
.nav{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  border-top:1px solid rgba(0,0,0,.06)!important;box-shadow:0 -6px 30px rgba(79,70,229,.10)!important}
.ni{color:var(--text-secondary)!important;font-size:11px}
.ni.act{color:var(--primary)!important;font-weight:700}
.ni.act .niic{transform:translateY(-1px)}
.niic{font-size:20px;display:block;margin-bottom:3px;transition:transform .2s ease}
.ni:active .niic{transform:scale(.9)}

/* ---- 通用组件现代化 ---- */
.pc{background:var(--bg-card);border-color:var(--border);box-shadow:var(--shadow);border-radius:16px}
.btn{background:linear-gradient(135deg,var(--primary),var(--primary-light))!important;color:#fff!important;
  border:none!important;border-radius:12px!important;box-shadow:var(--shadow)!important;
  transition:transform .12s ease,box-shadow .2s ease!important}
.btn:active{transform:scale(.96)!important;box-shadow:var(--shadow-sm)!important}
.btn.p{background:linear-gradient(135deg,var(--accent),#fb923c)!important}
.btn.b{background:#f3f4f6!important;color:var(--text)!important;box-shadow:none!important}

/* 进度条通用 */
.progress>div{transition:width .6s cubic-bezier(.25,.8,.25,1)}

/* 页面载入背景 */
.page{background:var(--bg)}
#main{background:var(--bg)}


/* ========== VISUAL V2 PAGES — 各页面统一现代风格 (2026-08-01) ========== */
/* 页面头部条 */
.top{background:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);
  position:sticky;top:0;z-index:100;padding:10px 12px;display:flex;align-items:center;gap:6px}
.top .bk{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--primary);font-size:18px;cursor:pointer;font-weight:700;transition:background .2s}
.top .bk:active{background:var(--border)}
.top .tt{font-size:16px;font-weight:700;color:var(--text)}

/* 关卡地图容器 */
#sG{padding:16px 10px!important;background:var(--bg)}
#sG>div{gap:8px!important;width:96%!important;max-width:360px!important}
#sG>div>div{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
#sG>div>div:active{transform:scale(.9)}
#sG>div>div>div{box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
#sG>div>div>div:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* 答题页 */
.eh{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg-card);
  border-bottom:1px solid var(--border)}
.ep{font-size:13px;color:var(--text-secondary);font-weight:400}
.ep b{color:var(--primary);font-size:15px}
.et{font-size:13px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.qc{padding:18px 16px;max-width:430px;margin:0 auto}
.qt{font-size:17px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:14px}
#qOp{margin-top:6px}

/* 答题对错反馈 */
.rc,.ri,.rs{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:400;padding:8px 12px;border-radius:10px;margin-bottom:6px}
.rc{color:#047857;background:#ecfdf5}
.ri{color:#b91c1c;background:#fef2f2}
.rs{color:#92400e;background:#fffbeb}

/* 底部操作条 */
.br{position:sticky;bottom:0;background:var(--bg-card);border-top:1px solid var(--border);
  padding:10px 16px;max-width:430px;margin:0 auto;box-shadow:0 -4px 20px rgba(79,70,229,.06)}

/* 阅读页 */
.lw{padding:16px;max-width:430px;margin:0 auto}
.lc{line-height:1.9;color:var(--text);font-size:15px;text-align:justify}
.lc p{margin:0 0 12px}

/* 部门专项 */
#dL{padding:14px;max-width:430px;margin:0 auto}
#dL .pc{margin-bottom:10px}

/* 勋章页 */
#bG{padding:16px;max-width:430px;margin:0 auto}
#bG .pc{margin-bottom:10px}

/* 成绩页星星卡 */
.rw{padding:16px;max-width:430px;margin:0 auto;text-align:center}
.rw .pc{padding:24px 16px}

/* 个人中心 */
#profC{padding:12px 0;max-width:430px;margin:0 auto}
#profC .pc{margin:10px 14px;padding:16px}


/* ========== VISUAL V2 DEEP — 课程列表 & 阅读内容 (2026-08-01) ========== */
/* 章节/课程列表卡片 */
#secG{padding-top:4px}
.sec-item{background:var(--bg-card);border-radius:14px;padding:14px;margin:0 12px 8px;cursor:pointer;
  display:flex;align-items:center;border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.sec-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:#c7d2fe}
.sec-item:active{transform:scale(.98)}
.sec-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;margin-right:10px;background:#eef2ff;color:var(--primary);flex-shrink:0}
.sec-num.done{background:#ecfdf5;color:#059669}
.sec-t{flex:1;font-size:14px;font-weight:400;color:var(--text);line-height:1.4}
.sec-badge{font-size:11px;font-weight:400;padding:3px 9px;border-radius:999px;background:#fff7ed;color:#ea580c;flex-shrink:0}
.sec-badge.done{background:#ecfdf5;color:#059669}

/* 阅读内容 - 内层元素现代化 */
.lc h1,.lc h2,.lc h3{color:var(--primary);line-height:1.4;margin:18px 0 10px;font-weight:700}
.lc h1{font-size:20px;border-left:4px solid var(--primary);padding-left:10px}
.lc h2{font-size:17px}
.lc h3{font-size:15px}
.lc p{color:var(--text);line-height:1.9;margin:0 0 12px;font-size:15px}
.lc strong{color:var(--primary)}
.lc img{max-width:100%;border-radius:12px;margin:8px 0;box-shadow:var(--shadow)}
.lc table{width:100%;border-collapse:collapse;margin:12px 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.lc table td,.lc table th{border:1px solid var(--border);padding:8px 10px;font-size:13px}
.lc table th{background:#eef2ff;color:var(--primary);font-weight:700}
.lc ul,.lc ol{padding-left:22px;margin:8px 0 12px;color:var(--text);line-height:1.8;font-size:15px}
.lc li{margin:4px 0}
.lc blockquote{border-left:4px solid var(--accent);background:#fffbeb;padding:10px 14px;border-radius:0 10px 10px 0;margin:10px 0;color:#78350f}
.lc a{color:var(--primary);text-decoration:underline}
.lc code,.lc pre{background:#f1f5f9;border-radius:6px;font-size:13px}
.lc pre{padding:12px;overflow-x:auto;margin:10px 0}


/* ========== FIX: 滚动溢出 - 禁止无限下拉 (2026-08-01) ========== */
html,body{overscroll-behavior-y:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
body{padding-bottom:64px;min-height:100%}
.page{min-height:100dvh;min-height:100svh}
@supports not (height:100dvh){.page{min-height:100vh}}
/* 底部导航不产生额外滚动 */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%)}
/* 内容底部留出导航高度, 但用 padding 而非额外高度 */
.ml,.st,.page:last-child{padding-bottom:0}


/* ========== FIX2: 页面级滚动容器 (根治无限空白延伸) 2026-08-01 ========== */
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{position:relative;padding-bottom:0}
/* 每个.page成为独立滚动容器, 填满视口, 内容短则占满、长则页内滚动 */
.page{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;
  width:100%;max-width:var(--max-width,430px);min-height:0;height:auto;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:64px;box-sizing:border-box}
.page::-webkit-scrollbar{width:0;height:0;display:none}
/* 底部导航固定于视口, 不被滚动影响 */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%)}
/* 登录/加载页也填满 */
#main{position:absolute;top:0;left:0;right:0;margin:0 auto;max-width:var(--max-width,430px);height:100%;box-sizing:border-box;overflow:hidden}


/* ========== FIX: 下一节/开始考试 按钮固定在底部 (2026-08-01) ========== */
.br{position:fixed!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;
  width:100%!important;max-width:430px!important;background:var(--bg-card)!important;
  border-top:1px solid var(--border)!important;padding:10px 16px!important;box-sizing:border-box!important;
  box-shadow:0 -4px 20px rgba(79,70,229,.08)!important;z-index:60}
/* 确保阅读/答题内容底部不被按钮遮挡 */
.lw{padding-bottom:76px!important}
.qc{padding-bottom:76px!important}
#rC{margin-bottom:0}


/* ========== FIX: 后台内容管理中心可滚动到底 (2026-08-01) ========== */
#ap{display:none;position:fixed!important;top:46px!important;left:0!important;right:0!important;bottom:0!important;
  overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;box-sizing:border-box!important;
  min-height:0!important;padding:12px!important;background:var(--bg)!important}
/* 后台顶栏固定于顶部 */
#ab{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;
  width:100%!important;height:46px!important;z-index:1000!important;margin:0!important}


/* ========== FIX: 后台保存按钮不遮挡内容 (2026-08-01) ========== */
#ap .br{position:sticky!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;
  width:auto!important;max-width:none!important;margin:14px -12px -12px!important;padding:12px 16px!important;
  border-radius:12px!important;z-index:5;box-shadow:0 -4px 16px rgba(79,70,229,.08)!important}
/* 后台内容底部留出按钮空间, 避免被挡 */
#apMod,#apCont,#apQuiz,#apOrd,#apUser{padding-bottom:8px}


/* ========== 内容保护 (A+B) — 防复制/防选中/水印/失焦隐藏 (2026-08-01) ========== */
/* 防选中/防拖拽 (作用于内容区域) */
body.wm-protect .page, body.wm-protect .lc, body.wm-protect .qc{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.wm-protect .lc img{ -webkit-user-drag:none;user-drag:none}
/* 水印层 */
.wm-layer{position:fixed;top:50px;left:0;right:0;bottom:64px;pointer-events:none;z-index:9997;overflow:hidden}
.wm-item{position:absolute;height:25%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-18deg);opacity:.22;pointer-events:none;box-sizing:border-box;padding:0 6px}
.wm-l1{text-align:center;font-size:12px;color:#4f46e5;font-weight:400;letter-spacing:.5px;line-height:1.3;padding:0 4px}
.wm-l2{text-align:center;font-size:10px;color:#7c3aed;margin-top:3px}
@media (max-width:768px){.wm-item{transform:rotate(-15deg) scale(.82);opacity:.18;padding:0 3px}.wm-l1{font-size:10px;color:#6b7280}.wm-l2{font-size:9px;color:#9ca3af}}

/* 失焦锁定: 模糊内容 + 提示 */
body.wm-locked .page{filter:blur(22px) saturate(.5)!important;pointer-events:none;
  -webkit-filter:blur(22px) saturate(.5)!important}
body.wm-locked::after{
  content:'🔒 内容保护中，请勿离开或截屏';
  position:fixed;top:44%;left:50%;transform:translate(-50%,-50%);
  font-size:16px;font-weight:400;color:#4f46e5;background:rgba(255,255,255,.95);
  padding:16px 26px;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.18);
  z-index:9999;text-align:center;white-space:nowrap;letter-spacing:.5px}


/* ===== 权限设置 · 移动端卡片式 (2026-08-02) ===== */
.perm-mod{background:#fff;border:1px solid #e7e9f0;border-radius:14px;margin:12px 0;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.perm-mod-h{padding:13px 14px;background:#f8fafc;border-bottom:1px solid #eef0f4;display:flex;align-items:center;gap:10px}
.perm-mod-h .pm-cb{width:20px;height:20px;flex-shrink:0;accent-color:#4f46e5;cursor:pointer}
.perm-mod-h .pm-name{font-size:14px;font-weight:700;color:#1e293b;flex:1;line-height:1.3}
.perm-mod-b{padding:12px 14px}
.perm-actions{display:flex;gap:6px;flex-shrink:0}
.perm-btn{font-size:11px;padding:5px 11px;border-radius:8px;border:1px solid #dfe3ee;background:#fff;color:#4f46e5;cursor:pointer;font-weight:400}
.perm-btn:hover{background:#eef2ff}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.perm-item{display:flex;align-items:flex-start;gap:9px;background:#f8fafc;border:1px solid #eef0f4;border-radius:10px;padding:11px 12px;font-size:12px;color:#334155;line-height:1.4;cursor:pointer;transition:border-color .15s,background .15s}
.perm-item:active{background:#eef2ff;border-color:#c7d2fe}
.perm-item input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:#4f46e5}
.perm-dept{margin-top:14px}
.perm-dept-h{display:flex;align-items:center;gap:8px;padding:8px 11px;background:#eef2ff;border-radius:10px;font-weight:700;color:#4338ca;font-size:12px;margin-bottom:9px}
.perm-dept-h .pd-name{flex:1}
.perm-tip{color:#94a3b8;font-size:11px;margin:4px 0 10px;line-height:1.5}
.perm-mod .perm-mod-h .pm-arrow{transition:transform .15s;display:inline-block;color:#94a3b8}
.perm-mod.open .perm-mod-h .pm-arrow{transform:rotate(90deg)}


/* ===== 用户列表表格 · 移动端间距优化 (2026-08-02) ===== */
.utab{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff;border:1px solid #eef0f4;border-radius:10px;overflow:hidden}
.utab th,.utab td{padding:12px 10px;text-align:left;border-bottom:1px solid #eef0f4;vertical-align:middle}
.utab th{background:#f8fafc;font-weight:700;color:#334155;font-size:12px;white-space:nowrap}
.utab td{color:#475569;white-space:nowrap}
.utab tr:last-child td{border-bottom:none}

/* ===== 学习校验弹窗 (2026-08-02) ===== */
.wm-verify{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.wm-verify-box{background:#fff;border-radius:16px;padding:26px 22px;width:270px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.28);animation:wv-in .25s ease}
@keyframes wv-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.wm-verify-box .wv-t{font-size:17px;font-weight:700;color:#1e293b}
.wm-verify-box .wv-m{font-size:13px;color:#64748b;margin:12px 0 18px;line-height:1.7}
.wv-btn{width:100%;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.wv-btn:active{transform:scale(.97)}

/* ===== 数据看板 (2026-08-02) ===== */
.dsh-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.dsh-card{background:#fff;border:1px solid #eef0f4;border-radius:12px;padding:12px 10px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.dsh-card .dsh-ic{font-size:20px}
.dsh-card .dsh-n{font-size:11px;color:#94a3b8;margin:3px 0}
.dsh-card .dsh-v{font-size:14px;font-weight:700;color:#1e293b}
.dsh-sec{background:#fff;border:1px solid #eef0f4;border-radius:12px;padding:12px;margin-bottom:14px}
.dsh-sec-t{font-size:14px;font-weight:700;color:#334155;margin-bottom:8px}
.dsh-rank{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.dsh-rank:last-child{border-bottom:none}
.dsh-pos{width:26px;height:26px;border-radius:50%;background:#eef2ff;color:#4f46e5;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dsh-rank:nth-child(2) .dsh-pos{background:#fef3c7;color:#d97706}
.dsh-rank:nth-child(3) .dsh-pos{background:#e2e8f0;color:#475569}
.dsh-info{flex:1;min-width:0}
.dsh-un{font-size:13px;font-weight:400;color:#1e293b}
.dsh-sub{font-size:11px;color:#94a3b8;margin-top:2px}
.dsh-tm{font-size:12px;font-weight:400;color:#4f46e5;flex-shrink:0}
.dsh-unrow{padding:8px 4px;font-size:13px;color:#c62828;border-bottom:1px solid #f1f5f9}
.dsh-unrow:last-child{border-bottom:none}

/* ===== 数据看板·筛选与点透 (2026-08-02) ===== */
.dsh-fil{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.dsh-sel{flex:1;min-width:90px;padding:8px;border:1px solid #d7dce4;border-radius:8px;font-size:12px;background:#fff}
.dsh-kw{flex:1.6;min-width:120px;padding:8px;border:1px solid #d7dce4;border-radius:8px;font-size:12px}
.dsh-tip{font-size:11px;color:#94a3b8;margin:2px 0 10px}
.dsh-card{cursor:pointer;transition:transform .1s}
.dsh-card:active{transform:scale(.96)}
.dsh-card.act{border:2px solid #4f46e5;background:#eef2ff}
.dsh-dp{font-size:10px;color:#4f46e5;background:#eef2ff;border-radius:4px;padding:1px 6px;margin-left:4px}

/* ===== 数据看板·自定义日期区间 (2026-08-02) ===== */
.dsh-daterow{display:flex;align-items:center;gap:8px;margin:6px 0 8px;padding:8px 10px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px}
.dsh-date{flex:1;padding:7px;border:1px solid #d7dce4;border-radius:8px;font-size:12px;background:#fff}
.dsh-dsep{font-size:12px;color:#64748b}

/* 主页面顶部栏随内容滚动（勋章/个人中心），不再sticky钉住 */
.top.top-away{ position: relative; }

/* ===== 后台 PC 响应式（admin-view）===== */
@media (min-width: 900px){
  body.admin-view .page{ max-width: 1100px !important; }
  body.admin-view #abel .abt{ padding:8px 16px; font-size:14px; }
  /* 后台表单/列表卡片在桌面端双列，充分利用宽屏 */
  body.admin-view .fg{ width: calc(50% - 8px); display:inline-block; vertical-align:top; margin-right:8px; box-sizing:border-box; }
  body.admin-view .fg:nth-child(2n){ margin-right:0; }
  body.admin-view .st{ width:100%; }
}
@media (min-width: 1300px){
  body.admin-view .page{ max-width: 1400px !important; }
  body.admin-view .fg{ width: calc(33.333% - 8px); }
  body.admin-view .fg:nth-child(2n){ margin-right:8px; }
  body.admin-view .fg:nth-child(3n){ margin-right:0; }
}


/* ===== Admin PC 后台美化 (2026-08-04) ===== */
body.admin-view{ background:linear-gradient(165deg,#f8fafc 0%,#eef2f7 55%,#e9eef5 100%); }
body.admin-view .page{ background:transparent !important; padding:16px 22px 52px; }
#ab{ background:linear-gradient(135deg,#1e3a5f 0%,#2a4f7a 100%) !important; box-shadow:0 2px 14px rgba(30,58,95,.22); }
#ab .abt{ color:rgba(255,255,255,.82) !important; border-radius:8px; margin:2px 3px; transition:background .15s ease, color .15s ease; }
#ab .abt.on, #ab .abt.active, #ab .abt.cur{ background:rgba(255,255,255,.18) !important; color:#fff !important; font-weight:400; }
#ab .abt:hover{ background:rgba(255,255,255,.10); }
@media (min-width: 900px){
  body.admin-view .fg{ background:#fff; border:1px solid #e6ebf2; border-radius:12px; padding:14px; margin-bottom:8px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
  body.admin-view .st{ font-size:17px; color:#1e293b; letter-spacing:.3px; border-bottom:2px solid #eef2ff; padding-bottom:8px; margin-bottom:14px; }
  body.admin-view .btn{ transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
  body.admin-view .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(79,70,229,.16); }
  body.admin-view #abel{ padding:6px 8px; }
  body.admin-view #abel .abt{ padding:8px 18px; font-size:14px; }
}