:root{
  --primary:#4F46E5; --primary-hover:#6366F1; --primary-light:#EEF2FF; --primary-dark:#3730A3;
  --bg:#FAFAFF; --bg-secondary:#F1F5F9; --card:#FFFFFF; --card-elevated:#FFFFFF;
  --border:#E2E8F0; --border-light:#C7D2FE;
  --text-main:#1E1B4B; --text-muted:#64748B; --text-hint:#94A3B8;
  --success:#22C55E; --error:#EF4444; --warning:#F59E0B; --streak:#FB923C; --achievement:#F59E0B;
  --shadow:0 4px 24px rgba(79,70,229,.10);
  --radius:16px;
}
body.dark{
  --primary:#818CF8; --primary-hover:#A5B4FC; --primary-light:#C7D2FE; --primary-dark:#6366F1;
  --bg:#1E1B4B; --bg-secondary:#312E81; --card:#3730A3; --card-elevated:#4338CA;
  --border:#4338CA; --border-light:#6366F1;
  --text-main:#FFFFFF; --text-muted:#C7D2FE; --text-hint:#A5B4FC;
  --shadow:0 8px 32px rgba(99,102,241,.25);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-main);font-size:15px;line-height:1.6;transition:background .25s,color .25s}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
a{color:var(--primary);text-decoration:none;cursor:pointer}

/* ========== 顶部栏 ========== */
.header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:var(--card);border-bottom:1px solid var(--border)}
.header.home-mode{justify-content:flex-start;position:relative}
.header.home-mode .header-right{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.header-inner{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.logo-dot{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--primary),var(--primary-hover))}
.home-menu{padding:6px 14px;border-radius:9px;background:var(--bg-secondary);border:1px solid var(--border);font-size:13px;color:var(--text-main)}
.header-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border);font-size:18px;transition:transform .12s}
.icon-btn:active{transform:scale(.93)}
.user-chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:20px;background:var(--bg-secondary);border:1px solid var(--border);font-size:14px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}

/* ========== 主区 ========== */
.main{max-width:1100px;margin:0 auto;padding:24px 20px 80px}
.view{display:none}.view.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-title{font-size:20px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.back-btn{width:34px;height:34px;border-radius:9px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--border)}

/* 小标题（对齐章节列表） */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 14px}
.section-head:first-child{margin-top:0}
.section-head h2{font-size:16px;font-weight:600}

/* ========== 打卡卡片 ========== */
.checkin-card{background:var(--card);border-radius:var(--radius);padding:20px 22px;border:1px solid var(--border);margin-bottom:16px;position:relative;box-shadow:var(--shadow)}
.checkin-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;padding-right:36px}
.checkin-info{min-width:0}
.checkin-calendar-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;background:var(--bg-secondary);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
.checkin-calendar-btn:hover{background:var(--bg-secondary)}
.checkin-continue{position:absolute;bottom:14px;right:22px;display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;background:var(--primary-light);color:var(--primary);font-size:14px;font-weight:500;border:1px solid var(--border-light);cursor:pointer}
.checkin-continue:hover{background:var(--primary-light)}
.checkin-title-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.checkin-title{font-size:17px;font-weight:600}
.checkin-status{padding:3px 12px;border-radius:12px;font-size:12px;background:var(--bg-secondary);color:var(--text-muted)}
.checkin-status.done{background:var(--success);color:#fff}
.checkin-desc{font-size:13px;color:var(--text-muted)}
.checkin-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.progress-ring{width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--primary) var(--pct,0%),var(--border) 0);display:flex;align-items:center;justify-content:center;position:relative}
.progress-ring::before{content:'';position:absolute;width:60px;height:60px;border-radius:50%;background:var(--card)}
.progress-value{position:relative;font-size:14px;font-weight:600;color:var(--primary)}

/* ========== 统计卡片 2×2 ========== */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px}
.stat-card{background:var(--card);border-radius:var(--radius);padding:18px 16px;border:1px solid var(--border);text-align:center;box-shadow:var(--shadow)}
.stat-card .v{font-size:24px;font-weight:700;color:var(--primary)}
.stat-card .l{font-size:12px;color:var(--text-muted);margin-top:4px}
.stat-card.green{border-color:var(--success)}.stat-card.green .v{color:var(--success)}
.stat-card.orange{border-color:var(--streak)}.stat-card.orange .v{color:var(--streak)}
.stat-card.gold{border-color:var(--achievement)}.stat-card.gold .v{color:var(--achievement)}

/* ========== 章节列表 ========== */
.chapters{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.chapter-card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--border);transition:transform .12s,border-color .12s;cursor:pointer;box-shadow:var(--shadow)}
.chapter-card:hover{transform:translateY(-2px);border-color:var(--primary)}
.chapter-card .ch-name{font-size:16px;font-weight:600;margin-bottom:8px}
.chapter-card .ch-meta{display:flex;gap:14px;font-size:12px;color:var(--text-muted)}
.ch-progress{height:6px;background:var(--bg-secondary);border-radius:3px;margin-top:10px;overflow:hidden}
.ch-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-hover));border-radius:3px}

/* ========== 功能入口 ========== */
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.entry-card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--border);display:flex;align-items:center;gap:14px;transition:transform .12s;box-shadow:var(--shadow);cursor:pointer}
.entry-card:active{transform:scale(.98)}
.entry-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--bg-secondary)}
.entry-icon.fav{background:rgba(245,158,11,.18)}
.entry-icon.err{background:rgba(239,68,68,.18)}
.entry-card .e-name{font-weight:600}
.entry-card .e-desc{font-size:12px;color:var(--text-muted)}

/* ========== 答题页 ========== */
.practice-top{margin-bottom:8px}
.progress-bar{height:20px;background:var(--bg-secondary);border-radius:10px;overflow:hidden}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-hover));transition:width .3s}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.progress-text{font-size:13px;color:var(--text-muted);font-weight:600}
.chapter-label{font-size:12px;color:var(--text-muted);font-weight:600}

/* 答题区垂直居中偏上：用 flex 布局撑满剩余高度，内容自居中 */
.practice-wrap{display:flex;flex-direction:column;min-height:0;flex:1;justify-content:center;padding-top:8px;margin-bottom:8px;margin-top:30px}
.q-card{background:var(--card);border-radius:var(--radius);padding:32px 24px;border:1px solid var(--border);margin:16px 0;box-shadow:var(--shadow)}
.q-timer{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:8px;font-size:14px;color:var(--text-muted)}
.q-timer-icon{font-size:14px}
.q-timer-sec{font-variant-numeric:tabular-nums}
.q-cn{font-size:20px;font-weight:600;line-height:1.7;margin-bottom:32px;text-align:center}
.q-inputs{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center}
.input-cell{display:flex;flex-direction:column;align-items:center;gap:6px}
/* 横线输入框：只保留底部边框 */
.input-cell input{text-align:center;border:none;border-bottom:2px solid var(--primary);border-radius:0;padding:8px 4px;font-size:17px;background:transparent;color:var(--text-main);min-width:52px;transition:border-color .15s}
.input-cell input:focus{outline:none;border-bottom-color:var(--primary-hover)}
.input-cell.ok input{border-bottom-color:var(--success)}
.input-cell.bad input{border-bottom-color:var(--error)}
/* 释义提示：加大加粗黑色 */
.input-hint{font-size:14px;font-weight:700;color:var(--text-main);min-height:18px}
/* 底部按钮：桌面端单行居中，校验绿色、其他淡紫色 */
.dock{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:350px}
.btn{padding:11px 20px;border-radius:10px;font-size:14px;font-weight:500;background:var(--bg-secondary);border:1px solid var(--border);transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}
/* 完成弹窗·通关动画 */
.finish-card{text-align:center;padding:32px 24px;overflow:hidden;animation:finishPop .5s cubic-bezier(.18,.89,.32,1.28)}
@keyframes finishPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.finish-emoji{font-size:56px;line-height:1;animation:emojiBounce 1s ease .2s both}
@keyframes emojiBounce{0%,100%{transform:translateY(0)}20%{transform:translateY(-14px) scale(1.12)}40%{transform:translateY(0)}60%{transform:translateY(-6px)}}
.finish-confetti{position:absolute;inset:0;pointer-events:none}
.finish-confetti span{position:absolute;top:38%;left:50%;width:9px;height:9px;border-radius:50%;opacity:0;animation:confetti .9s ease-out .15s both}
.finish-confetti span:nth-child(1){background:#6366f1;--x:-100px;--y:-40px}
.finish-confetti span:nth-child(2){background:#f59e0b;--x:90px;--y:-60px}
.finish-confetti span:nth-child(3){background:#10b981;--x:-60px;--y:60px}
.finish-confetti span:nth-child(4){background:#ef4444;--x:110px;--y:30px}
.finish-confetti span:nth-child(5){background:#ec4899;--x:-120px;--y:-10px}
.finish-confetti span:nth-child(6){background:#3b82f6;--x:70px;--y:70px}
@keyframes confetti{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.3)}}
.finish-stats{margin:18px 0;animation:statsPop .5s ease .35s both}
@keyframes statsPop{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
.finish-row{display:flex;justify-content:center;gap:28px;margin-bottom:12px}
.finish-row .cell{display:flex;flex-direction:column;align-items:center}
.finish-row .num{font-size:28px;font-weight:700}
.finish-row .num.ok{color:var(--success)}.finish-row .num.bad{color:var(--error)}
.finish-row .lbl{font-size:12px;color:var(--text-muted);margin-top:2px}
.finish-time{font-size:14px;color:var(--text-muted)}
.finish-done{font-size:16px}.finish-done b{font-size:24px;color:var(--primary)}
.finish-actions{display:flex;gap:12px}.finish-actions .btn{flex:1;padding:13px}
.btn-purple{background:var(--primary-light);color:var(--primary-dark);border:1px solid var(--border-light)}
.btn-check{background:var(--success);color:#fff;border:none}
.btn-ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-fav.active{background:rgba(245,158,11,158,11,0.2)!important;color:#B45309!important;border-color:rgba(245,158,11,0.4)!important}

/* ========== 列表 ========== */
.list{display:flex;flex-direction:column;gap:12px}
.list-card{background:var(--card);border-radius:var(--radius);padding:16px 18px;border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.list-card .lc-cn{font-size:15px;font-weight:500;flex:1;line-height:1.5}
.list-card.err{border-left:4px solid var(--error)}
.list-card.err .lc-cn{margin-right:12px}
.err-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.err-tag{font-size:12px;font-weight:600;color:var(--error);background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);border-radius:6px;padding:2px 8px}
.list-actions{display:flex;gap:8px;flex-shrink:0}
.list-actions .btn{padding:8px 14px;font-size:13px}
.empty{text-align:center;padding:80px 20px;color:var(--text-muted)}
.empty .emo{font-size:48px;margin-bottom:12px;opacity:.5}

/* ========== 个人中心下拉菜单 ========== */
.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:140px;z-index:60;overflow:hidden;display:none}
.user-dropdown.show{display:block}
.user-dropdown-item{display:block;width:100%;padding:12px 16px;text-align:left;font-size:14px;color:var(--text-main);background:none;border:none;cursor:pointer;transition:background .15s}
.user-dropdown-item:hover{background:var(--bg-secondary)}
.user-dropdown-item:last-child{color:var(--error)}

/* ========== 弹窗（日历 / 登录注册） ========== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px)}
.modal.show{display:flex}
.modal-card{background:var(--card);border-radius:var(--radius);width:100%;max-width:420px;max-height:85vh;overflow:auto;border:1px solid var(--border);box-shadow:var(--shadow);position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2}
.modal-head{padding:24px 24px 0}
.modal-head h3{font-size:18px;font-weight:600}
.modal-sub{font-size:13px;color:var(--text-secondary);margin-top:4px}
.modal-body{padding:20px 24px 24px}

/* 日历 */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border)}
.cal-cell.signed{background:linear-gradient(135deg,var(--primary),var(--primary-hover));border:none}
.cal-cell.signed .cal-date,.cal-cell.signed .cal-count{color:#fff}
.cal-date{font-size:11px;color:var(--text-hint)}
.cal-count{font-size:10px;margin-top:2px;color:var(--text-muted)}
.cal-streak{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:18px;font-size:14px;color:var(--streak);font-weight:500}

/* 登录注册 tab */
.auth-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px}
.auth-tab{flex:1;padding:12px;text-align:center;font-size:15px;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;margin-bottom:6px;color:var(--text-muted)}
.field input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-main);font-size:15px}
.field input:focus{outline:none;border-color:var(--primary)}

/* ========== toast ========== */
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:var(--card-elevated);border:1px solid var(--border);padding:12px 22px;border-radius:10px;font-size:14px;z-index:200;box-shadow:var(--shadow);opacity:0;transition:opacity .2s,top .2s;pointer-events:none}
.toast.show{opacity:1;top:32px}
.toast.err{border-color:var(--error);color:var(--error)}

/* ========== 响应式 ========== */
@media (max-width:600px){
  .header{padding:0 14px;height:50px}
  .logo{font-size:16px}
  .main{padding:16px 14px 70px}
  .stat-card .v{font-size:20px}
  /* 打卡卡片：补 display:flex 让列布局生效，继续学习按钮改为流式避免与进度环重叠 */
  .checkin-card{display:flex;flex-direction:column;gap:12px}
  .checkin-left{flex-wrap:wrap;gap:10px;padding-right:44px}
  .checkin-continue{position:static;align-self:flex-end;margin-top:4px}
  /* 答题页（移动端参考小程序布局）：垂直撑满，题目居中；长句时答题区可滚动，不与dock重叠 */
  #view-practice.active{display:flex;flex-direction:column;height:calc(100vh - 72px)}
  .practice-top{margin-bottom:0;flex-shrink:0}
  .progress-bar{height:16px;border-radius:8px}
  .progress-text{margin-top:2px}
  .practice-wrap{margin-top:0;margin-bottom:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .q-card{padding:22px 14px;margin:0}
  .q-cn{font-size:18px;margin-bottom:20px}
  .q-inputs{flex-direction:row;flex-wrap:wrap;gap:14px 12px}
  .input-cell input{min-width:auto}
  .input-hint{font-size:13px;font-weight:600;margin-top:8px}
  /* dock 重排为双层：上行（上一题/校验答案/下一题），下行（显示答案/收藏）；flex-shrink:0 防止被压缩 */
  .dock{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px;flex-shrink:0}
  .dock > .btn{padding:11px 8px;font-size:13px}
  .dock > .btn:nth-child(1){grid-row:1;grid-column:1/3}   /* 上一题：占2格 */
  .dock > .btn:nth-child(3){grid-row:1;grid-column:3/5}   /* 校验答案：占2格 */
  .dock > .btn:nth-child(5){grid-row:1;grid-column:5/7}   /* 下一题：占2格 */
  .dock > .btn:nth-child(2){grid-row:2;grid-column:1/4}   /* 显示答案：占3格 */
  .dock > .btn:nth-child(4){grid-row:2;grid-column:4/7}   /* 收藏：占3格 */
  .entries{grid-template-columns:1fr}
  .list-card{flex-direction:column;align-items:stretch}
  .list-actions{justify-content:flex-end}
  .chapters{grid-template-columns:1fr}
}
/* 超窄屏（≤380px）兜底 */
@media (max-width:380px){
  .main{padding:12px 10px 70px}
  .stat-card{padding:14px 10px}
  .stat-card .v{font-size:18px}
  .q-card{padding:18px 10px}
  .q-cn{font-size:16px}
  .q-inputs{gap:12px 10px}
  .input-cell input{font-size:16px}
  .input-hint{font-size:12px}
  .dock{gap:8px}
  .dock > .btn{font-size:12px;padding:10px 6px}
}