/* base.css - 设计令牌 + 重置 + 全局类「墨蓝·砚」v2（1:1 还原小程序 app.wxss）
   缩放：1rem = 100rpx（小程序 750rpx 设计稿 = 7.5rem = 100vw）
   转换规则：N rpx → (N/100)rem，颜色沿用 hex，env(safe-area-inset-*) 保留 */

:root {
  --c-primary: #2C7BB0;     /* 墨蓝 primary */
  --c-primary-dark: #1E5A86;
  --c-primary-2: #3B8FC4;   /* 靛青 */
  --c-accent: #C8553D;      /* 朱砂 */
  --c-ink: #2B2B33;
  --c-sub: #6E665A;
  --c-sub2: #948B7D;
  --c-paper: #F7F4EC;       /* 宣纸暖底 */
  --c-card: #FCFBF6;        /* 卡纸 */
  --c-line: #E7E0D2;        /* 墨线 */
  --c-border2: #CFC6B4;
  --c-gold: #E8CD8B;
  --shadow-card: 0 0.04rem 0.18rem rgba(44,123,176,0.06);
  --shadow-pop: 0 -0.08rem 0.4rem rgba(27,32,40,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; font-size: calc(100vw / 7.5); }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Songti SC", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--c-ink);
  background: #e9e6df;
  font-size: 0.28rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; outline: none; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; }
::-webkit-scrollbar { width: 0; height: 0; }

#app { min-height: 100vh; background: var(--c-paper); }

/* 点击体验优化：去掉移动端 tap 灰色高亮与 300ms 双击延迟，减少"闪烁/卡顿"感 */
* { -webkit-tap-highlight-color: transparent; }
html, body { touch-action: manipulation; }
img { -webkit-user-drag: none; }

/* ===== 通用文字工具 ===== */
.t-ink { color: var(--c-ink); } .t-blue { color: var(--c-primary); }
.t-accent { color: var(--c-accent); } .t-muted { color: var(--c-sub2); }
.t-white { color: #FBF9F3; }
.t-sm { font-size: 0.24rem; } .t-xs { font-size: 0.22rem; }
.t-lg { font-size: 0.34rem; } .t-xl { font-size: 0.44rem; }
.t-bold { font-weight: 700; } .t-b { font-weight: 600; }
.t-center { text-align: center; } .t-serif { font-family: "Songti SC","STSong",serif; }
.t-sub { color: var(--c-sub2); }

/* ===== 布局工具 ===== */
.flex { display: flex; } .flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-1 { flex: 1; }
.gap-8 { gap: 0.08rem; } .gap-12 { gap: 0.12rem; } .gap-16 { gap: 0.16rem; } .gap-24 { gap: 0.24rem; }
.mt-8 { margin-top: 0.08rem; } .mt-16 { margin-top: 0.16rem; } .mt-24 { margin-top: 0.24rem; }
.mb-8 { margin-bottom: 0.08rem; } .mb-16 { margin-bottom: 0.16rem; } .mb-24 { margin-bottom: 0.24rem; }
.p-16 { padding: 0.16rem; } .p-24 { padding: 0.24rem; }
.full { width: 100%; box-sizing: border-box; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.22rem 0.4rem; border-radius: 0.14rem;
  font-size: 0.28rem; font-weight: 600; border: none; line-height: 1.2;
  background: var(--c-primary); color: #FBF9F3;
  transition: transform .08s ease, background .2s ease; cursor: pointer;
}
.btn:active { transform: scale(0.97); background: var(--c-primary-dark); }
.btn-accent { background: var(--c-accent); color: #FBF9F3; }
.btn-accent:active { background: #a8402c; }
.btn-ghost { background: transparent; color: var(--c-primary); border: 0.02rem solid var(--c-border2); }
.btn-ghost:active { background: rgba(44,123,176,0.08); }
.btn-block { width: 100%; box-sizing: border-box; }
.btn[disabled] { opacity: 0.5; }

/* ===== 卡片 ===== */
.card { background: var(--c-card); border-radius: 0.18rem; padding: 0.28rem;
  border: 0.01rem solid var(--c-line); box-shadow: var(--shadow-card); }

/* ===== 输入框 ===== */
.input { background: var(--c-card); border: 0.02rem solid var(--c-line); border-radius: 0.12rem;
  padding: 0.2rem 0.24rem; font-size: 0.28rem; color: var(--c-ink); width: 100%; box-sizing: border-box; }
.input:focus { border-color: var(--c-primary); }

/* ===== 加载 ===== */
.spinner { width: 0.48rem; height: 0.48rem; border: 0.04rem solid var(--c-line);
  border-top-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.8rem 0; gap: 0.16rem; }
.loading-text { color: var(--c-sub2); font-size: 0.26rem; }
.loading-full { position: fixed; inset: 0; z-index: 950; background: rgba(247,244,236,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.16rem; }
.loading-full .loading-text { color: var(--c-sub2); }

/* ===== 空状态 ===== */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem 0.4rem; gap: 0.16rem; }
.empty-icon, .e-ico { font-size: 0.92rem; }
.empty-title, .e-text { font-size: 0.32rem; font-weight: 600; color: var(--c-ink); }
.empty-hint, .e-sub { font-size: 0.26rem; color: var(--c-sub2); text-align: center; line-height: 1.7; }

/* ===== 模态遮罩（统一） ===== */
.modal-mask, .mask { position: fixed; inset: 0; z-index: 800; background: rgba(27,32,40,0.5);
  display: flex; align-items: flex-end; justify-content: center; }
.mask { z-index: 900; }
.modal-sheet, .pop { width: 100%; background: var(--c-card); border-radius: 0.28rem 0.28rem 0 0;
  padding: 0.32rem 0.32rem calc(0.32rem + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop);
  animation: sheetUp .26s cubic-bezier(.22,.61,.36,1); max-width: 100%; }
.mask.bottom .pop.bottom { border-radius: 0.28rem 0.28rem 0 0; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-handle { width: 0.72rem; height: 0.08rem; border-radius: 0.08rem; background: #D8CFBE; margin: 0 auto 0.24rem; }
.modal-title, .pop-title { font-size: 0.34rem; font-weight: 700; color: var(--c-primary); }
.modal-sub { font-size: 0.26rem; color: var(--c-sub2); margin-top: 0.06rem; }
.pop-title { text-align: center; }
.pop-desc { font-size: 0.26rem; color: var(--c-ink); line-height: 1.7; margin-top: 0.16rem; text-align: center; }
.btn-row { display: flex; margin-top: 0.28rem; border-top: 0.01rem solid var(--c-line); }
.btn-row .btn { flex: 1; border-radius: 0; border-top: none; padding: 0.3rem 0; }
.btn-row .btn-ghost { color: var(--c-sub2); border-right: 0.01rem solid var(--c-line); }

/* ===== 章节标题（统一小楷 + 朱砂竖标） ===== */
.sec-head { display: flex; align-items: center; gap: 0.12rem; margin-bottom: 0.2rem; }
.sec-bar { width: 0.06rem; height: 0.3rem; border-radius: 0.04rem; background: var(--c-accent); }
.sec-title { font-size: 0.32rem; font-weight: 700; color: var(--c-primary); letter-spacing: 0.01rem; }

/* ===== 提示条 ===== */
.tip { background: rgba(44,123,176,0.08); border-left: 0.06rem solid var(--c-primary);
  border-radius: 0.08rem; padding: 0.18rem 0.22rem; font-size: 0.25rem; color: var(--c-ink); line-height: 1.7; }

/* ===== Toast（主题色蓝底白字，与主品牌色统一） ===== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999;
  background: var(--c-primary); color: #FBF9F3; padding: 0.28rem 0.5rem; border-radius: 0.18rem;
  font-size: 0.28rem; max-width: 70vw; text-align: center; line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.12rem;
  box-shadow: 0 0.16rem 0.48rem rgba(44,123,176,0.36), 0 0.04rem 0.12rem rgba(27,32,40,0.18);
  animation: toastIn .18s ease-out; }
.toast .t-ico { font-size: 0.32rem; color: #FBF9F3; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }

.page-bg { background: var(--c-paper); min-height: 100vh; }

/* ===== 底部动作表 ===== */
.sheet { width: 100%; background: var(--c-card); padding: 0.18rem 0.2rem calc(0.18rem + env(safe-area-inset-bottom));
  box-sizing: border-box; display: flex; flex-direction: column; gap: 0.12rem; border-radius: 0.28rem 0.28rem 0 0;
  box-shadow: var(--shadow-pop); }
.sheet-card { background: var(--c-paper); border-radius: 0.18rem; overflow: hidden; }
.s-item { display: flex; align-items: center; justify-content: center; gap: 0.14rem;
  padding: 0.26rem 0.24rem; background: var(--c-paper); border-radius: 0.12rem; font-size: 0.3rem; color: var(--c-ink); }
.s-item:active { background: #ECE6D8; }
.s-item.danger { color: var(--c-accent); font-weight: 600; }
.s-item.accent { color: var(--c-primary); font-weight: 600; }
.s-ico { font-size: 0.34rem; }
.s-cancel { text-align: center; padding: 0.28rem 0; background: var(--c-paper); border-radius: 0.18rem;
  font-size: 0.3rem; color: var(--c-sub2); margin-top: 0.04rem; }
.s-cancel:active { background: #ECE6D8; }

/* ===== 导航栏（替代小程序系统导航） ===== */
.navbar { position: sticky; top: 0; z-index: 600; height: 0.9rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 0.2rem;
  background: var(--c-primary); color: #FBF9F3; padding-top: env(safe-area-inset-top); }
.nb-back { position: absolute; left: 0.16rem; top: 50%; transform: translateY(-50%); margin-top: calc(env(safe-area-inset-top)/2);
  width: 0.6rem; font-size: 0.5rem; line-height: 1; font-weight: 300; cursor: pointer; }
.nb-title { font-size: 0.32rem; font-weight: 600; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-right { position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); margin-top: calc(env(safe-area-inset-top)/2);
  display: flex; align-items: center; gap: 0.16rem; font-size: 0.26rem; }
.nb-right .nb-btn { padding: 0.06rem 0.18rem; background: rgba(255,255,255,0.18); border-radius: 0.3rem; }

/* ===== 底部 tabBar（练习 / 考试 / 我的） ===== */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; display: flex; height: 1.0rem;
  background: var(--c-card); border-top: 0.01rem solid var(--c-line); padding-bottom: env(safe-area-inset-bottom); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.04rem;
  color: var(--c-sub2); font-size: 0.22rem; cursor: pointer; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; -webkit-touch-callout: none; outline: none; }
.tab .ico { width: 0.42rem; height: 0.42rem; display: flex; align-items: center; justify-content: center; }
.tab .ico svg { width: 100%; height: 100%; }
.tab.active { color: var(--c-primary); }
.tabbar.tab-hidden { display: none; }

/* ===== 悬浮加号按钮 ===== */
.fab { position: fixed; right: 0.4rem; bottom: 1.3rem; z-index: 500;
  width: 0.96rem; height: 0.96rem; border-radius: 50%; background: var(--c-primary); color: #FBF9F3;
  font-size: 0.56rem; line-height: 0.96rem; text-align: center; box-shadow: 0 0.08rem 0.24rem rgba(44,123,176,0.4);
  cursor: pointer; }

/* ===== 通用页面容器 ===== */
.page { min-height: 100vh; background: var(--c-paper); padding-bottom: 1.5rem; display: flex; flex-direction: column; }
.page-no-tab { padding-bottom: 0.4rem; }
.page-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== 每日任务弹窗（与小程序同名类） ===== */
.daily-mask { position: fixed; inset: 0; background: rgba(27,32,40,0.5); display: flex; align-items: center;
  justify-content: center; z-index: 950; }
.daily-content { width: 80%; height: auto; max-height: 74vh; min-height: 4.6rem; background: var(--c-card); border-radius: 0.28rem;
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); }
.modal-header { flex-shrink: 0; padding: 0.32rem 0.32rem 0.2rem; border-bottom: 0.01rem solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; }
.modal-header-text { flex: 1; min-width: 0; }
.random-inline { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; padding: 0.06rem 0.12rem;
  background: var(--c-paper); border-radius: 0.3rem; }
.random-inline-label { font-size: 0.22rem; color: var(--c-sub2); white-space: nowrap; }
.modal-title { font-size: 0.32rem; font-weight: 700; color: var(--c-ink); }
.modal-subtitle { margin-top: 0.08rem; font-size: 0.24rem; color: var(--c-sub2); }
.days-setter { flex-shrink: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.1rem;
  padding: 0.18rem 0.32rem 0.14rem; background: var(--c-paper); border-bottom: 0.01rem solid var(--c-line); }
.days-label { font-size: 0.26rem; color: var(--c-ink); }
.days-stepper { display: flex; align-items: center; gap: 0; border: 0.02rem solid var(--c-line); border-radius: 0.14rem;
  overflow: hidden; background: var(--c-card); }
.ds-btn { width: 0.72rem; height: 0.72rem; display: flex; align-items: center; justify-content: center;
  font-size: 0.44rem; font-weight: 700; color: var(--c-primary); background: var(--c-card); }
.ds-btn:active { background: rgba(44,123,176,0.08); }
.days-input-cell { display: flex; align-items: center; border-left: 0.02rem solid var(--c-line); border-right: 0.02rem solid var(--c-line); }
.ds-val, .days-input { width: 0.9rem; height: 0.72rem; text-align: center; font-size: 0.34rem; font-weight: 700; color: var(--c-ink); }
.days-unit { padding: 0 0.16rem 0 0.04rem; font-size: 0.28rem; color: var(--c-ink); }
.daily-row { display: flex; align-items: center; justify-content: space-between; gap: 0.16rem;
  padding: 0.22rem 0.36rem; background: var(--c-card); border-bottom: 0.01rem solid var(--c-line); }
.daily-row span { font-size: 0.28rem; color: var(--c-ink); }
.switch { width: 0.84rem; height: 0.48rem; border-radius: 0.3rem; background: #D8CFBE; position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 0.04rem; left: 0.04rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #fff; transition: left .2s; }
.switch.on { background: var(--c-primary); }
.switch.on::after { left: 0.4rem; }
.daily-cal { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 0.72rem; align-content: start;
  gap: 0.06rem; background: var(--c-paper); border-bottom: 0.01rem solid var(--c-line); padding: 0.08rem 0.22rem 0.14rem; overflow-y: auto; }
.cal-month { text-align: center; font-size: 0.26rem; font-weight: 700; color: var(--c-ink); padding: 0.04rem 0 0.08rem; }
.dc-h { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.2rem; color: var(--c-sub2); line-height: 1; }
.dc-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-card); border: 0.01rem solid var(--c-line); border-radius: 0.1rem; box-sizing: border-box; }
.dc-cell.empty { background: transparent; border: none; }
.dc-num { font-size: 0.24rem; color: var(--c-ink); line-height: 1.15; }
.dc-cnt { margin-top: 0.04rem; font-size: 0.18rem; color: var(--c-sub2); line-height: 1.15; white-space: nowrap; }
.dc-cell.done { background: rgba(44,123,176,0.12); border-color: var(--c-primary); }
.dc-cell.done .dc-num, .dc-cell.done .dc-cnt { color: var(--c-primary); font-weight: 700; }
.dc-cell.today { background: rgba(200,85,61,0.08); border-color: var(--c-accent); }
.dc-cell.today .dc-num { font-weight: 700; color: var(--c-accent); }
.dc-cell.today .dc-cnt { color: var(--c-accent); }

/* ===== 题目附图（缩略图条 + 全屏放大） ===== */
.img-thumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0.14rem 0 0.06rem; padding: 0 0.02rem; }
.img-thumbs-tip { width: 100%; font-size: 0.22rem; color: var(--c-sub2); margin-bottom: 0.1rem; }
.img-thumb { width: 1.68rem; height: 1.68rem; margin: 0 0.14rem 0.14rem 0; border-radius: 0.12rem;
  border: 0.01rem solid var(--c-line); background: #fff; box-sizing: border-box; object-fit: cover; cursor: pointer; }
.img-thumb:active { opacity: 0.85; }
.img-mask { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; }
.img-mask-area { position: absolute; inset: 0; }
.img-mask-img { width: 100%; }
.img-mask-close { position: fixed; right: 0.32rem; top: calc(0.24rem + env(safe-area-inset-top)); z-index: 10000;
  width: 0.68rem; height: 0.68rem; line-height: 0.68rem; text-align: center; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff; font-size: 0.38rem; cursor: pointer; }

/* ===== 搜索条通用 ===== */
.searchbar { display: flex; align-items: center; background: rgba(252,251,246,0.96); border-radius: 0.14rem;
  padding: 0.16rem 0.24rem; box-shadow: 0 0.06rem 0.18rem rgba(27,32,40,0.1); }
.searchbar .s-ico { font-size: 0.32rem; margin-right: 0.12rem; color: var(--c-primary); flex-shrink: 0; }
.searchbar input { flex: 1; font-size: 0.28rem; color: var(--c-ink); background: transparent; border: none; padding: 0; height: 0.4rem; line-height: 0.4rem; }
.searchbar .dot { color: var(--c-sub2); margin: 0 0.1rem; }

/* ===== 分享面板 ===== */
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 0.16rem; padding: 0.2rem 0; }
.share-qr img { width: 3rem; height: 3rem; border: 0.01rem solid var(--c-line); border-radius: 0.12rem; background: #fff; }
.share-tip { font-size: 0.24rem; color: var(--c-sub2); text-align: center; }
.share-link { display: flex; gap: 0.12rem; padding: 0.2rem 0; align-items: center; }
.share-link input { flex: 1; border: 0.02rem solid var(--c-line); border-radius: 0.12rem; padding: 0.18rem 0.2rem; font-size: 0.24rem; color: var(--c-ink); background: var(--c-card); }
.share-tabs { display: flex; gap: 0.12rem; justify-content: center; margin: 0.1rem 0; }
.share-tabs .st { padding: 0.12rem 0.36rem; border-radius: 0.3rem; background: var(--c-paper); color: var(--c-sub2); font-size: 0.26rem; cursor: pointer; }
.share-tabs .st.active { background: var(--c-primary); color: #FBF9F3; }