/* ============================================================
   课程答题平台 · Apple Design System
   与现有学习网站保持一致的设计风格
   ============================================================ */

/* ===== Apple Design System Tokens ===== */
:root{
  /* 背景与卡片 */
  --bg:#f5f5f7;--bg-card:#ffffff;--bg-secondary:#f2f2f7;
  /* 文本 */
  --text-primary:#1d1d1f;--text-secondary:#6e6e73;--text-tertiary:#8e8e93;
  /* 边框 */
  --border:#d1d1d6;--border-light:#e5e5ea;
  /* 品牌色与功能色 */
  --brand:#007aff;--brand-light:#e8f2ff;
  --green:#34c759;--green-light:#e9f9ee;
  --orange:#ff9500;--orange-light:#fff3e0;
  --red:#ff3b30;--red-light:#ffecea;
  --purple:#5856d6;--purple-light:#f0efff;
  --pink:#af52de;--pink-light:#f5e6ff;
  --teal:#5ac8fa;--teal-light:#e6f7ff;
  --yellow:#ffcc00;--yellow-light:#fff9e0;
  /* 圆角 */
  --radius:1.2rem;--radius-lg:1.5rem;--radius-sm:0.8rem;
  /* 阴影 */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.04);
  --shadow:0 4px 16px rgba(0,0,0,0.06);
  --shadow-md:0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.1);
  /* 动画缓动 */
  --ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* 字体 */
  --font:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","Consolas","Courier New",monospace;
}

/* ===== 基础重置 ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text-primary);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea{font-family:inherit}
img,svg{display:block;max-width:100%}

/* ===== 顶部导航栏 ===== */
nav.topbar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  height:44px;padding:0 24px;background:rgba(245,245,247,0.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-light)}
nav.topbar .brand{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);
  display:flex;align-items:center;gap:8px}
nav.topbar .brand .logo{width:22px;height:22px;border-radius:6px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px}
nav.topbar .links{display:flex;gap:4px}
nav.topbar .links a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;
  color:var(--text-secondary);font-size:13px;font-weight:500;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
nav.topbar .links a:hover{background:var(--bg-secondary);color:var(--text-primary)}
nav.topbar .links a.active{background:var(--brand-light);color:var(--brand)}

/* ===== Hero 区域 ===== */
.hero{text-align:center;padding:96px 24px 64px;max-width:980px;margin:0 auto;
  animation:fadeInUp .8s var(--ease-out) both}
.hero .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:16px;padding:6px 14px;border-radius:999px;
  background:var(--brand-light);border:1px solid rgba(0,122,255,0.18);
  animation:fadeInUp .6s var(--ease-out) both}
.hero h1{font-size:56px;font-weight:600;letter-spacing:-0.03em;line-height:1.08;color:var(--text-primary);
  margin-bottom:16px;animation:fadeInUp .7s var(--ease-out) .1s both}
.hero p{font-size:17px;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.65;
  animation:fadeInUp .7s var(--ease-out) .2s both}
.hero .stats{animation:fadeInUp .7s var(--ease-out) .3s both}

/* ===== 统计数字卡片 ===== */
.stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.stat{display:flex;flex-direction:column;align-items:center;padding:16px 32px;
  background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border)}
.stat b{font-size:28px;font-weight:600;color:var(--brand);line-height:1.2;letter-spacing:-0.02em}
.stat span{font-size:12px;color:var(--text-tertiary);margin-top:4px;letter-spacing:.02em}

/* ===== 课程卡片网格 ===== */
.courses{max-width:1140px;margin:0 auto;padding:0 24px 80px}
.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:20px;padding-left:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
a.course{display:block;text-decoration:none;color:inherit;background:var(--bg-card);
  border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
  position:relative;overflow:hidden}
a.course::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent,var(--brand));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out)}
a.course:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent,var(--brand))}
a.course:hover::before{transform:scaleX(1)}
a.course .icon-wrap{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:20px;background:var(--accent-light,var(--brand-light));color:var(--accent,var(--brand));
  transition:transform .35s var(--ease-spring)}
a.course:hover .icon-wrap{transform:rotate(-6deg) scale(1.08)}
a.course h3{font-size:19px;font-weight:600;line-height:1.25;margin-bottom:8px;color:var(--text-primary);letter-spacing:-0.01em}
a.course p{font-size:14px;color:var(--text-secondary);line-height:1.55;margin-bottom:20px}
a.course .meta{display:flex;gap:6px;flex-wrap:wrap}
a.course .meta span{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:999px;
  background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-light)}
a.course .cta{display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-size:13px;font-weight:600;
  color:var(--accent,var(--brand));transition:gap .25s var(--ease-out)}
a.course:hover .cta{gap:10px}
a.course .cta svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
a.course:hover .cta svg{transform:translateX(2px)}

/* 课程配色：vision 紫 / embedded 青 / netsec 蓝 / software 绿 */
.c-vision{--accent:#af52de;--accent-light:#f5e6ff}
.c-embedded{--accent:#5ac8fa;--accent-light:#e6f7ff}
.c-netsec{--accent:#007aff;--accent-light:#e8f2ff}
.c-software{--accent:#34c759;--accent-light:#e9f9ee}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 24px;
  border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-0.01em;
  transition:transform .2s var(--ease-spring),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out),opacity .2s var(--ease-out);
  border:none;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(0,122,255,0.3)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(0,122,255,0.4);opacity:0.92}
.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-light)}
.btn-secondary:hover{background:var(--border-light)}
.btn-warning{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(255,149,0,0.3)}
.btn-warning:hover{box-shadow:0 6px 20px rgba(255,149,0,0.4);opacity:0.92}
.btn-danger{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(255,59,48,0.3)}
.btn-danger:hover{box-shadow:0 6px 20px rgba(255,59,48,0.4);opacity:0.92}
.btn-ghost{background:transparent;color:var(--brand)}
.btn-ghost:hover{background:var(--brand-light)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-lg{height:52px;padding:0 32px;font-size:17px}
.btn-block{display:flex;width:100%}

/* ===== 卡片容器 ===== */
.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.card:hover{box-shadow:var(--shadow)}
.card-title{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:12px;letter-spacing:-0.01em}
.card-body{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ===== 称号徽章 ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;
  transition:transform .2s var(--ease-spring)}
.badge:hover{transform:translateY(-1px)}
.badge-gold{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#b8860b;border-color:#ffd700;
  box-shadow:0 2px 8px rgba(255,215,0,0.25)}
.badge-purple{background:var(--purple-light);color:var(--purple);border-color:rgba(88,86,214,0.2)}
.badge-blue{background:var(--brand-light);color:var(--brand);border-color:rgba(0,122,255,0.2)}
.badge-green{background:var(--green-light);color:var(--green);border-color:rgba(52,199,89,0.2)}
.badge-orange{background:var(--orange-light);color:var(--orange);border-color:rgba(255,149,0,0.2)}
.badge-red{background:var(--red-light);color:var(--red);border-color:rgba(255,59,48,0.2)}
.badge-teal{background:var(--teal-light);color:var(--teal);border-color:rgba(90,200,250,0.2)}
.badge-gray{background:var(--bg-secondary);color:var(--text-secondary);border-color:var(--border-light)}

/* ===== 进度条 ===== */
.progress-wrap{margin:16px 0}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:8px;font-weight:500}
.progress-bar{height:8px;background:var(--bg-secondary);border-radius:999px;overflow:hidden;position:relative}
.progress-bar .progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--teal));
  border-radius:999px;transition:width .5s var(--ease-out);position:relative;overflow:hidden}
.progress-bar .progress-fill::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ===== 答题卡 ===== */
.question-map{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:16px;margin:18px 0 20px;box-shadow:var(--shadow-sm)}
.question-map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.question-map-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.question-map-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary)}
.question-map-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.question-map-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;border:1px solid var(--border)}
.question-map-legend .cur i{background:var(--brand);border-color:var(--brand)}
.question-map-legend .done i{background:var(--green);border-color:var(--green)}
.question-map-legend .todo i{background:var(--bg-secondary)}
.question-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:8px}
.q-jump{appearance:none;border:1px solid var(--border-light);background:var(--bg-secondary);color:var(--text-secondary);
  min-width:38px;height:38px;border-radius:8px;font-size:13px;font-weight:700;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background-color .16s var(--ease-out),
  border-color .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.q-jump:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);transform:translateY(-1px)}
.q-jump.answered{background:var(--green-light);border-color:rgba(52,199,89,0.45);color:var(--green)}
.q-jump.current{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(0,122,255,0.28)}
.q-jump.current.answered{background:linear-gradient(135deg,var(--brand),var(--green));border-color:var(--brand);color:#fff}

/* ===== 题目卡片 ===== */
.question-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-sm);animation:fadeInUp .4s var(--ease-out) both}
.question-card .q-index{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.question-card .q-index .q-num{background:var(--brand-light);padding:3px 10px;border-radius:999px}
.question-card .q-type{font-size:11px;color:var(--text-tertiary);padding:3px 10px;background:var(--bg-secondary);
  border-radius:999px;font-weight:600}
.question-card .q-title{font-size:18px;font-weight:600;color:var(--text-primary);line-height:1.5;margin-bottom:24px;letter-spacing:-0.01em}
.question-card .q-content{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:24px;
  background:var(--bg-secondary);padding:16px 20px;border-radius:var(--radius);border:1px solid var(--border-light);
  white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:13px}

/* ===== 选择题选项 ===== */
.options{display:flex;flex-direction:column;gap:10px}
.option{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-card);
  border:2px solid var(--border-light);border-radius:var(--radius);cursor:pointer;
  transition:all .2s var(--ease-out);user-select:none}
.option:hover{border-color:var(--brand);background:var(--brand-light);transform:translateX(4px)}
.option .option-key{width:32px;height:32px;border-radius:50%;background:var(--bg-secondary);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text-secondary);
  flex-shrink:0;transition:all .2s var(--ease-out)}
.option .option-text{font-size:15px;color:var(--text-primary);line-height:1.5;flex:1}
.option.selected{border-color:var(--brand);background:var(--brand-light)}
.option.selected .option-key{background:var(--brand);color:#fff}
.option.correct{border-color:var(--green);background:var(--green-light)}
.option.correct .option-key{background:var(--green);color:#fff}
.option.wrong{border-color:var(--red);background:var(--red-light)}
.option.wrong .option-key{background:var(--red);color:#fff}
.option.disabled{cursor:not-allowed;opacity:0.85}
.option.disabled:hover{border-color:var(--border-light);background:var(--bg-card);transform:none}

/* ===== 填空题输入框 ===== */
.blank-input{width:100%;height:52px;padding:0 20px;background:var(--bg-card);
  border:2px solid var(--border-light);border-radius:var(--radius);font-size:16px;color:var(--text-primary);
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out)}
.blank-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,122,255,0.12)}
.blank-input.correct{border-color:var(--green);background:var(--green-light)}
.blank-input.wrong{border-color:var(--red);background:var(--red-light)}
.blank-input::placeholder{color:var(--text-tertiary)}

/* ===== 排行榜表格 ===== */
.rank-table{width:100%;border-collapse:collapse;font-size:14px}
.rank-table thead th{text-align:left;padding:12px 16px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-tertiary);border-bottom:1px solid var(--border-light)}
.rank-table tbody td{padding:14px 16px;border-bottom:1px solid var(--border-light);color:var(--text-primary)}
.rank-table tbody tr{transition:background-color .15s var(--ease-out)}
.rank-table tbody tr:hover{background:var(--bg-secondary)}
.rank-table tbody tr:last-child td{border-bottom:none}
.rank-table .rank-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--bg-secondary);font-size:12px;font-weight:700;color:var(--text-secondary)}
.rank-table .rank-1 .rank-num{background:linear-gradient(135deg,#ffd700,#ffa500);color:#fff}
.rank-table .rank-2 .rank-num{background:linear-gradient(135deg,#c0c0c0,#a8a8a8);color:#fff}
.rank-table .rank-3 .rank-num{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}
.rank-table .score-cell{font-weight:700;color:var(--brand)}
.rank-table .user-cell{font-weight:600}

/* ===== Tab 切换 ===== */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-secondary);border-radius:999px;margin-bottom:24px}
.tab{padding:8px 20px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-secondary);
  cursor:pointer;transition:all .2s var(--ease-out);border:none;background:none}
.tab:hover{color:var(--text-primary)}
.tab.active{background:var(--bg-card);color:var(--brand);box-shadow:var(--shadow-sm)}

/* ===== 烟花特效 Canvas ===== */
.firework-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}

/* ===== 大分数显示 ===== */
.score-big{text-align:center;padding:32px 0}
.score-big .score-num{font-size:96px;font-weight:700;color:var(--brand);line-height:1;letter-spacing:-0.04em;
  background:linear-gradient(135deg,var(--brand),var(--teal));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:scorePop .6s var(--ease-spring) both}
.score-big .score-total{font-size:24px;color:var(--text-tertiary);font-weight:500;margin-left:4px}
.score-big .score-label{font-size:13px;color:var(--text-secondary);margin-top:8px;letter-spacing:.05em;text-transform:uppercase}
@keyframes scorePop{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}

/* ===== 鼓励文字 ===== */
.encourage-text{text-align:center;font-size:20px;font-weight:600;color:var(--text-primary);margin:16px 0;
  animation:fadeInUp .6s var(--ease-out) .3s both;letter-spacing:-0.01em}
.encourage-text .encourage-sub{display:block;font-size:14px;font-weight:500;color:var(--text-secondary);margin-top:8px}

/* ===== 空状态 ===== */
.empty-state{text-align:center;padding:64px 24px;color:var(--text-tertiary)}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px;opacity:0.5}
.empty-state .empty-title{font-size:17px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.empty-state .empty-desc{font-size:14px;color:var(--text-tertiary);line-height:1.6}

/* ===== 首页排行榜 ===== */
.home-leaderboard{max-width:1140px;margin:0 auto;padding:0 24px 80px;animation:fadeInUp .8s var(--ease-out) both}
.home-leaderboard .leaderboard-wrap{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.home-leaderboard .section-label{margin-bottom:8px}
.home-leaderboard .lb-header{align-items:flex-start}
.home-leaderboard .course-tabs{margin-bottom:0;flex-wrap:wrap;justify-content:flex-end}
.home-leaderboard .badge{font-size:12px;padding:5px 10px;white-space:nowrap}

/* ===== 平台特性 ===== */
.features{max-width:1140px;margin:0 auto;padding:0 24px 80px;animation:fadeInUp .8s var(--ease-out) both}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feature{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.feature .f-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feature .f-icon svg{width:22px;height:22px}
.feature h4{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.feature p{font-size:12px;color:var(--text-secondary);line-height:1.55}

/* ===== 考试区域容器 ===== */
.exam-section{max-width:880px;margin:0 auto;padding:32px 24px 80px;animation:fadeInUp .6s var(--ease-out) both}
.exam-section.hidden{display:none}
.exam-start{text-align:center;padding:48px 32px}
.exam-start .start-title{font-size:32px;font-weight:600;color:var(--text-primary);margin-bottom:12px;letter-spacing:-0.02em}
.exam-start .start-desc{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px;max-width:560px;margin-left:auto;margin-right:auto}
.exam-start .rules{background:var(--bg-secondary);border-radius:var(--radius);padding:20px 24px;margin:24px auto;max-width:560px;text-align:left}
.exam-start .rules h4{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:12px;letter-spacing:.05em;text-transform:uppercase}
.exam-start .rules ul{list-style:none;padding:0}
.exam-start .rules li{font-size:14px;color:var(--text-secondary);padding:6px 0;padding-left:24px;position:relative;line-height:1.5}
.exam-start .rules li::before{content:"";position:absolute;left:6px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.preload-status{margin-top:12px;font-size:13px;color:var(--text-tertiary);min-height:20px}
.preload-status.ready{color:var(--green);font-weight:600}
.preload-status.warn{color:var(--orange)}
.preload-status.loading{color:var(--text-secondary)}

/* 用户身份显示 */
.user-code-display{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--brand-light);
  border-radius:999px;margin-bottom:24px;border:1px solid rgba(0,122,255,0.2)}
.user-code-display .user-icon{width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.user-code-display .user-text{font-size:14px;font-weight:600;color:var(--brand)}

/* 答题导航 */
.exam-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-light)}
.exam-nav .nav-info{font-size:13px;color:var(--text-secondary);font-weight:500}

/* 结果区域 */
.result-section{max-width:880px;margin:0 auto;padding:32px 24px 80px}
.result-section.hidden{display:none}
.result-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:40px;box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden}
.result-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--teal),var(--green))}

/* 分类得分 */
.score-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:24px 0}
.score-item{background:var(--bg-secondary);border-radius:var(--radius);padding:16px;text-align:center}
.score-item .si-label{font-size:11px;color:var(--text-tertiary);margin-bottom:6px;letter-spacing:.03em;font-weight:600;text-transform:uppercase}
.score-item .si-value{font-size:20px;font-weight:700;color:var(--text-primary)}
.score-item .si-value.good{color:var(--green)}
.score-item .si-value.mid{color:var(--orange)}
.score-item .si-value.low{color:var(--red)}

/* 逐题解析 */
.review-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.review-item{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:20px;transition:border-color .2s var(--ease-out)}
.review-item.correct{border-left:4px solid var(--green)}
.review-item.wrong{border-left:4px solid var(--red)}
.review-item .ri-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.review-item .ri-q{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.5;flex:1;padding-right:16px}
.review-item .ri-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.review-item .ri-status.right{background:var(--green-light);color:var(--green)}
.review-item .ri-status.wrong{background:var(--red-light);color:var(--red)}
.review-item .ri-detail{font-size:13px;color:var(--text-secondary);line-height:1.6;padding-top:12px;border-top:1px solid var(--border-light)}
.review-item .ri-detail .ri-row{display:flex;gap:8px;padding:4px 0}
.review-item .ri-detail .ri-label{font-weight:600;color:var(--text-primary);min-width:64px}
.review-item .ri-detail .ri-answer.correct{color:var(--green);font-weight:600}
.review-item .ri-detail .ri-answer.wrong{color:var(--red);font-weight:600;text-decoration:line-through}

/* 错题汇总 */
.wrong-summary{background:var(--red-light);border:1px solid rgba(255,59,48,0.2);border-radius:var(--radius);
  padding:20px;margin-top:16px}
.wrong-summary h4{font-size:14px;font-weight:700;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.wrong-summary .ws-list{font-size:13px;color:var(--text-secondary);line-height:1.8}

/* 复习建议 */
.suggestion-box{background:var(--brand-light);border:1px solid rgba(0,122,255,0.2);border-radius:var(--radius);
  padding:20px;margin-top:16px;text-align:left}
.suggestion-box h4{font-size:14px;font-weight:700;color:var(--brand);margin-bottom:12px}
.suggestion-box p{font-size:13px;color:var(--text-secondary);line-height:1.7}

/* 排行榜容器 */
.leaderboard-section{max-width:880px;margin:0 auto;padding:32px 24px 80px}
.leaderboard-section.hidden{display:none}
.leaderboard-wrap{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-sm);overflow:hidden}
.leaderboard-wrap .lb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.leaderboard-wrap .lb-title{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em}
.table-wrap{overflow-x:auto}

/* ===== Footer ===== */
footer{text-align:center;padding:40px 24px 32px;max-width:980px;margin:0 auto;
  border-top:1px solid var(--border-light)}
footer p{font-size:12px;color:var(--text-tertiary);line-height:1.8}

/* ===== Keyframes ===== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ===== 响应式：768px 平板 ===== */
@media(max-width:768px){
  .hero{padding:64px 20px 48px}
  .hero h1{font-size:36px;letter-spacing:-0.03em}
  .hero p{font-size:15px}
  .stats{gap:10px}
  .stat{padding:12px 20px;min-width:90px}
  .stat b{font-size:22px}
  .grid{grid-template-columns:1fr;gap:12px}
  a.course{padding:24px}
  a.course:hover{transform:translateY(-3px)}
  a.course:hover .icon-wrap{transform:rotate(-3deg) scale(1.04)}
  nav.topbar .links a{font-size:12px;padding:0 8px}
  nav.topbar{padding:0 16px}
  .question-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:7px}
  .q-jump{min-width:34px;height:34px;border-radius:7px;font-size:12px}
  .question-card{padding:24px 20px}
  .question-card .q-title{font-size:16px}
  .option{padding:14px 16px}
  .option .option-text{font-size:14px}
  .score-big .score-num{font-size:72px}
  .result-card{padding:28px 20px}
  .exam-start .start-title{font-size:24px}
  .leaderboard-wrap{padding:20px 16px}
  .rank-table{font-size:13px}
  .rank-table thead th,.rank-table tbody td{padding:10px 8px}
  .home-leaderboard{padding:0 20px 64px}
  .home-leaderboard .lb-header{display:block}
  .home-leaderboard .course-tabs{margin-top:14px;justify-content:flex-start}
}

/* ===== 响应式：480px 手机 ===== */
@media(max-width:480px){
  .hero h1{font-size:28px;letter-spacing:-0.02em}
  .hero .eyebrow{font-size:10px;padding:5px 12px}
  .stats{gap:8px}
  .stat{padding:10px 16px;min-width:80px}
  .stat b{font-size:20px}
  a.course{padding:20px}
  nav.topbar .links{display:none}
  nav.topbar .brand{font-size:11px}
  .btn{height:40px;padding:0 20px;font-size:14px}
  .btn-lg{height:48px;padding:0 24px;font-size:16px}
  .question-card{padding:20px 16px}
  .question-map{padding:14px;margin:16px 0}
  .question-map-head{display:block}
  .question-map-legend{margin-top:8px;gap:10px}
  .question-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
  .q-jump{width:100%;min-width:0;height:34px;font-size:12px}
  .question-card .q-title{font-size:15px}
  .option{padding:12px 14px;gap:10px}
  .option .option-key{width:28px;height:28px;font-size:12px}
  .option .option-text{font-size:13px}
  .blank-input{height:48px;font-size:15px;padding:0 16px}
  .score-big .score-num{font-size:60px}
  .score-big .score-total{font-size:20px}
  .encourage-text{font-size:17px}
  .exam-nav{flex-direction:column;align-items:stretch}
  .exam-nav .btn{width:100%}
  .tabs{width:100%;justify-content:center}
  .tab{padding:8px 14px;font-size:12px}
  .home-leaderboard{padding:0 16px 56px}
  .home-leaderboard .course-tabs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-leaderboard .tab{padding:8px 10px}
  .home-leaderboard .rank-table th:nth-child(3),
  .home-leaderboard .rank-table td:nth-child(3){display:none}
  .result-card{padding:24px 16px}
  .exam-start{padding:32px 20px}
  .exam-start .start-title{font-size:20px}
}

/* ===== 触摸设备：减少 hover 变换 ===== */
@media(hover:none){
  .stat:hover{transform:none}
  a.course:hover{transform:none}
  a.course:hover .icon-wrap{transform:none}
  a.course:hover::before{transform:scaleX(0)}
  .option:hover{transform:none}
  .feature:hover{transform:none}
}

/* ===== 减少动画 ===== */
@media(prefers-reduced-motion:reduce){
  .hero,.hero .eyebrow,.hero h1,.hero p,.hero .stats,
  .question-card,.features,.exam-section,.result-card,
  .score-big .score-num,.encourage-text,.progress-bar .progress-fill::after{
    animation:none!important;transition-duration:.01ms!important
  }
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* 当前用户行高亮 */
.rank-table tbody tr.rank-me{background:var(--brand-light);border-left:3px solid var(--brand)}
.rank-table tbody tr.rank-me:hover{background:var(--brand-light)}
.rank-table tbody tr.rank-me .user-cell{color:var(--brand);font-weight:700}

/* 错题汇总列表项 */
.wrong-summary .ws-item{padding:8px 0;border-bottom:1px dashed var(--border-light)}
.wrong-summary .ws-item:last-child{border-bottom:none}
.wrong-summary .ws-q{font-size:13px;color:var(--text-primary);font-weight:500;margin-bottom:4px}
.wrong-summary .ws-a{font-size:12px;color:var(--text-secondary)}

/* ===== 深色模式（跟随系统） ===== */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000000;--bg-card:#1c1c1e;--bg-secondary:#2c2c2e;
    --text-primary:#f5f5f7;--text-secondary:#a1a1a6;--text-tertiary:#8e8e93;
    --border:#3a3a3c;--border-light:#2c2c2e;
    --brand:#2e8dff;--brand-light:rgba(46,141,255,0.12);
    --green:#30d158;--green-light:rgba(48,209,88,0.12);
    --orange:#ff9f0a;--orange-light:rgba(255,159,10,0.12);
    --red:#ff453a;--red-light:rgba(255,69,58,0.12);
    --purple:#bf5af2;--purple-light:rgba(191,90,242,0.12);
    --pink:#bf5af2;--pink-light:rgba(191,90,242,0.12);
    --teal:#64d2ff;--teal-light:rgba(100,210,255,0.12);
    --yellow:#ffd60a;--yellow-light:rgba(255,214,10,0.12);
    --shadow-sm:0 2px 8px rgba(0,0,0,0.30);
    --shadow:0 4px 16px rgba(0,0,0,0.40);
    --shadow-md:0 8px 24px rgba(0,0,0,0.50);
    --shadow-lg:0 16px 48px rgba(0,0,0,0.60);
  }
  nav.topbar{background:rgba(0,0,0,0.72);border-bottom-color:var(--border)}
  nav.topbar .links a:hover{background:var(--bg-secondary)}
  .hero .eyebrow{border-color:rgba(46,141,255,0.28)}
  .stat:hover{box-shadow:var(--shadow-md)}
  a.course:hover{box-shadow:var(--shadow-lg)}
  .btn-primary{box-shadow:0 4px 14px rgba(46,141,255,0.3)}
  .btn-primary:hover{box-shadow:0 6px 20px rgba(46,141,255,0.4)}
  .option:hover{background:rgba(46,141,255,0.08)}
  .question-map{border-color:var(--border);background:#1c1c1e}
  .question-map-legend .todo i{background:#2c2c2e;border-color:#5a5a5f}
  .q-jump{background:#2c2c2e;border-color:#4a4a4f;color:#f5f5f7}
  .q-jump:hover{background:rgba(46,141,255,0.18);border-color:var(--brand);color:#ffffff}
  .q-jump.answered{background:rgba(48,209,88,0.18);border-color:rgba(48,209,88,0.6);color:#7ee08f}
  .q-jump.current{background:var(--brand);border-color:var(--brand);color:#ffffff;box-shadow:0 4px 14px rgba(46,141,255,0.36)}
  .blank-input:focus{box-shadow:0 0 0 4px rgba(46,141,255,0.18)}
  .badge-gold{background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,165,0,0.1));color:#ffd700}
  .result-card::before{background:linear-gradient(90deg,var(--brand),var(--teal),var(--green))}
}