/* ============ 初中物理小程序 · 护眼设计系统 ============ */
:root{
  --bg:#eef3ec;          /* 护眼浅绿灰背景 */
  --card:#ffffff;
  --ink:#2f3a34;         /* 主文字（深墨绿灰，柔和不刺眼） */
  --ink-soft:#5f6b63;    /* 次要文字 */
  --line:#dfe7e0;        /* 分割线 */
  --brand:#3a8d5b;       /* 主色 护眼绿 */
  --brand-deep:#2f7350;
  --accent:#2f6fb0;      /* 交互蓝 */
  --warn:#d9822b;        /* 提醒橙 */
  --danger:#c0504d;      /* 错误红 */
  --ok:#3a8d5b;          /* 正确绿 */
  --radius:16px;
  --shadow:0 2px 10px rgba(47,58,52,.06);
  --tab-h:60px;
  --top-h:54px;
  font-size:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;position:relative;box-shadow:0 0 24px rgba(0,0,0,.04);}

/* 顶部栏 */
#topbar{height:var(--top-h);flex:0 0 var(--top-h);display:flex;align-items:center;
  gap:8px;padding:0 14px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:20;
  box-shadow:0 1px 6px rgba(47,58,52,.12);}
#topTitle{font-size:1.05rem;font-weight:600;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-sub{font-size:.72rem;opacity:.85;}
.back-btn{border:none;background:transparent;color:#fff;font-size:1.7rem;line-height:1;
  width:34px;height:34px;border-radius:50%;cursor:pointer;}
.back-btn:active{background:rgba(255,255,255,.18);}

/* 内容区 */
#view{flex:1 1 auto;overflow-y:auto;padding:14px 14px calc(var(--tab-h) + 18px);-webkit-overflow-scrolling:touch;}

/* 底部导航 */
#tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;
  height:var(--tab-h);background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;
  box-shadow:0 -2px 10px rgba(47,58,52,.06);}
.tab{flex:1;min-width:0;border:none;background:none;color:var(--ink-soft);font-size:.66rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 0;}
.tab .ico{font-size:1.3rem;line-height:1;}
.tab.active{color:var(--brand);font-weight:600;}
.tab.active .ico{transform:translateY(-1px);}

/* 通用卡片 */
.card{background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:12px;
  box-shadow:var(--shadow);border:1px solid #eef2ee;}
.card h3{margin:0 0 8px;font-size:1rem;color:var(--brand-deep);}
.muted{color:var(--ink-soft);font-size:.85rem;}
.small{font-size:.78rem;}

/* 首页 */
.hero{background:linear-gradient(135deg,#3a8d5b,#2f7350);color:#fff;border-radius:var(--radius);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow);}
.hero h2{margin:0 0 4px;font-size:1.25rem;}
.hero p{margin:0;opacity:.92;font-size:.85rem;}
.hero .stat-row{display:flex;gap:10px;margin-top:14px;}
.hero .stat{flex:1;min-width:0;background:rgba(255,255,255,.14);border-radius:12px;padding:10px;text-align:center;}
.hero .stat b{display:block;font-size:1.3rem;}
.hero .stat span{font-size:.7rem;opacity:.9;}

.section-title{font-size:.95rem;font-weight:600;margin:16px 4px 8px;display:flex;align-items:center;gap:6px;}
.section-title::before{content:"";width:4px;height:15px;background:var(--brand);border-radius:3px;}

.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.domain-card{background:var(--card);border-radius:var(--radius);padding:14px;cursor:pointer;
  box-shadow:var(--shadow);border:1px solid #eef2ee;position:relative;overflow:hidden;}
.domain-card .dot{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;margin-bottom:8px;}
.domain-card h3{margin:0;font-size:1rem;color:var(--ink);}
.domain-card .prog{margin-top:10px;height:7px;background:#eef2ee;border-radius:6px;overflow:hidden;}
.domain-card .prog > i{display:block;height:100%;background:var(--brand);border-radius:6px;transition:width .4s;}
.domain-card .prog-txt{font-size:.72rem;color:var(--ink-soft);margin-top:4px;}

/* 学习：章节列表 */
.chapter{margin-bottom:14px;}
.chapter > .ch-head{display:flex;align-items:center;gap:8px;margin:6px 4px;}
.chapter .ch-bar{width:4px;height:18px;border-radius:3px;}
.chapter h3{margin:0;font-size:1rem;}
.kp-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.kp-item{background:var(--card);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  cursor:pointer;box-shadow:var(--shadow);border:1px solid #eef2ee;}
.kp-item:active{transform:scale(.99);}
.kp-item .kp-status{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;border:2px solid var(--line);color:var(--ink-soft);}
.kp-item.done .kp-status{background:var(--ok);border-color:var(--ok);color:#fff;}
.kp-item .kp-main{flex:1;min-width:0;}
.kp-item .kp-title{font-weight:500;}
.kp-item .kp-meta{font-size:.72rem;color:var(--ink-soft);}
.kp-item .arrow{color:var(--line);font-size:1.2rem;}

/* 知识点详情 */
.kp-detail .goal{background:#f3f8f4;border-left:4px solid var(--brand);border-radius:8px;
  padding:10px 12px;font-size:.86rem;margin-bottom:12px;color:var(--brand-deep);}
.kp-block{margin-bottom:16px;}
.kp-block h4{font-size:.95rem;margin:0 0 6px;color:var(--ink);}
.kp-block p{margin:0 0 6px;font-size:.9rem;}
.anim-box{background:#f6faf6;border-radius:12px;padding:10px;margin:8px 0 4px;text-align:center;
  border:1px solid #e8f0e8;}
.anim-box svg{width:100%;max-width:320px;height:auto;display:inline-block;}
.anim-cap{font-size:.74rem;color:var(--ink-soft);margin-top:4px;}
.kp-photo{margin:0 0 14px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#eef2ee;}
.kp-photo img{width:100%;height:auto;display:block;}

/* 例题 */
.example{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;}
.example .ex-q{font-weight:500;margin-bottom:8px;font-size:.92rem;}
.step{display:flex;gap:8px;margin:6px 0;align-items:flex-start;}
.step .num{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.step .txt{font-size:.88rem;flex:1;}
.example .concl{margin-top:8px;padding:8px 10px;background:#f3f8f4;border-radius:8px;font-size:.86rem;color:var(--brand-deep);}

/* 随堂练习 */
.quiz-q{background:#fff;border-radius:12px;padding:14px;box-shadow:var(--shadow);}
.quiz-q .q-text{font-weight:500;margin-bottom:12px;font-size:.95rem;}
.opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;
  border-radius:10px;padding:11px 12px;margin-bottom:9px;font-size:.9rem;cursor:pointer;color:var(--ink);
  transition:all .15s;font-family:inherit;}
.opt:active{transform:scale(.99);}
.opt.sel{border-color:var(--accent);background:#eef5fb;}
.opt.right{border-color:var(--ok);background:#eef7f0;color:var(--ok);}
.opt.wrong{border-color:var(--danger);background:#fbeeec;color:var(--danger);}
.opt .tag{float:right;font-weight:700;}
.fill-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:1rem;
  font-family:inherit;margin-bottom:10px;}
.fill-input:focus{outline:none;border-color:var(--accent);}
.quiz-meta{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-soft);margin-bottom:10px;}
.feedback{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:.86rem;display:none;}
.feedback.show{display:block;}
.feedback.ok{background:#eef7f0;color:var(--brand-deep);}
.feedback.no{background:#fbeeec;color:var(--danger);}
.feedback b{font-weight:700;}
.feedback.nc{background:#eef3fb;color:#2f4a6b;border-left:3px solid var(--accent);white-space:pre-wrap;}
.feedback.nc b{color:var(--brand-deep);}
.nc-type{display:inline-block;margin:8px 0 2px;padding:3px 10px;border-radius:999px;background:#eef3fb;color:#2f4a6b;font-size:.8rem;font-weight:600;}
.btn{display:inline-block;border:none;border-radius:12px;padding:12px 18px;font-size:.95rem;font-weight:600;
  cursor:pointer;font-family:inherit;background:var(--brand);color:#fff;width:100%;margin-top:6px;}
.btn:active{background:var(--brand-deep);}
.btn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand);}
.btn:disabled{opacity:.5;}

/* 进度条通用 */
.bar{height:8px;background:#eef2ee;border-radius:6px;overflow:hidden;}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:6px;}

/* 错题本 */
.wrong-item{background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow);
  border:1px solid #eef2ee;cursor:pointer;}
.wrong-item .w-q{font-size:.9rem;font-weight:500;margin-bottom:6px;}
.wrong-item .w-meta{font-size:.74rem;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;}
.tag-pill{display:inline-block;background:#f3f8f4;color:var(--brand-deep);border-radius:20px;padding:1px 9px;font-size:.7rem;}

/* 我的 / 统计 */
.stat-card{background:linear-gradient(135deg,#3a8d5b,#2f7350);color:#fff;border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.stat-card .big{font-size:2rem;font-weight:700;}
.stat-card .row{display:flex;justify-content:space-between;margin-top:8px;font-size:.8rem;opacity:.92;}
.master-row{display:flex;align-items:center;gap:10px;margin:9px 0;}
.master-row .name{flex:0 0 84px;font-size:.84rem;}
.master-row .bar{flex:1;}
.master-row .val{flex:0 0 42px;text-align:right;font-size:.8rem;color:var(--ink-soft);}
.review-box{background:#fff8ef;border:1px solid #f3e2cc;border-radius:12px;padding:12px;margin-bottom:12px;}
.review-box h4{margin:0 0 6px;color:var(--warn);font-size:.92rem;}
.review-box .rv-item{font-size:.84rem;padding:5px 0;border-bottom:1px dashed #f0e0c8;}
.review-box .rv-item:last-child{border:none;}

/* 空状态 */
.empty{text-align:center;color:var(--ink-soft);padding:40px 16px;font-size:.88rem;}
.empty .e-ico{font-size:2.4rem;display:block;margin-bottom:8px;}

/* 提示 toast */
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
  background:rgba(47,58,52,.92);color:#fff;padding:9px 16px;border-radius:22px;font-size:.84rem;
  opacity:0;pointer-events:none;transition:all .25s;z-index:60;max-width:80%;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 完成弹层 */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:18px;padding:22px;width:80%;max-width:320px;text-align:center;}
.modal .m-ico{font-size:2.6rem;}
.modal h3{margin:8px 0 4px;}
.modal p{color:var(--ink-soft);font-size:.86rem;margin:0 0 14px;}

@media (max-width:360px){:root{font-size:15px;}}

/* ---- 真题 hub ---- */
.exam-row{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:9px;cursor:pointer;text-align:left;
  font-size:.95rem;color:var(--ink);transition:transform .06s ease,box-shadow .12s ease;
}
.exam-row:active{transform:scale(.99);box-shadow:var(--shadow);}
.exam-row .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.exam-row .exam-name{flex:1;font-weight:500;}
.exam-row .exam-cnt{color:var(--ink-soft);font-size:.82rem;white-space:nowrap;}

/* 题面年份来源标签 */
.src-tag{
  display:inline-block;font-size:.72rem;font-weight:600;line-height:1;
  color:#fff;background:var(--accent);border-radius:6px;
  padding:3px 6px;margin-right:6px;vertical-align:middle;letter-spacing:.3px;
}
/* 天津中考模拟（AI 仿写）徽章：橙色，区别于真实真题的蓝色来源标签 */
.sim-tag{background:#e07b00;}

/* ===== 题图（源卷裁图） ===== */
.q-fig {
  display: block;
  max-width: 82%;
  max-height: 220px;
  margin: 10px auto 4px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  object-fit: contain;
}
.fig-missing {
  margin: 8px 0 2px;
  padding: 7px 10px;
  font-size: 12px;
  color: #9a6700;
  background: #fff8e1;
  border: 1px dashed #f0c36d;
  border-radius: 8px;
  text-align: center;
}
/* 公式内嵌图（从源 docx 抽取，安全无 OCR 误差） */
.q-formula {
  display: inline-block;
  vertical-align: middle;
  max-height: 1.5em;
  margin: 0 2px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--line, #e5e7eb);
}
.formula-missing {
  display: inline-block;
  padding: 0 4px;
  font-size: 12px;
  color: #9a6700;
  background: #fff8e1;
  border: 1px dashed #f0c36d;
  border-radius: 4px;
}
/* 引图无图题的内联 SVG 简图 */
.q-fig-svg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 4px;
  max-width: 82%;
}
.q-fig-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.q-fig-svg-note {
  margin-top: 4px;
  font-size: 11px;
  color: #8a94a6;
}
/* 大题库懒加载占位 */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  gap: 12px;
}
.loading-wrap .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #cfe3fb;
  border-top-color: #3a8d5b;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.loading-wrap p { margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 满屏斜向透明水印「青砚承露」（透明度80% = 不透明度0.2） */
.app-watermark {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  opacity: 0.1; /* 90% 透明 */
  background-repeat: repeat;
}