/* ============================================================
   成公答题卡 · H5 考生端（移动端优先）
   配色：墨绿主色 + 浅绿背景 + 象牙白基底 + 暖橙点缀
   ============================================================ */

:root{
  --ink:#1E4D3A;
  --ink-deep:#153A2C;
  --green-50:#F6FAF7;
  --green-100:#EEF5F0;
  --green-200:#DCE8E1;
  --ivory:#FBF9F3;
  --orange:#E8722A;
  --orange-50:#FFF3E8;
  --text:#2C3A33;
  --muted:#6B7A72;
  --line:#E3EDE7;
  --danger:#C2410C;
  --radius:12px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.65;color:var(--text);
  background:var(--green-50);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
[v-cloak]{display:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;padding:0;}
input,textarea{font-family:inherit;font-size:16px;border:none;outline:none;background:none;color:inherit;}

.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
@media (min-width:640px){
  body{background:var(--green-100);}
  #app{max-width:480px;margin:0 auto;background:var(--green-50);min-height:100dvh;box-shadow:0 0 24px rgba(30,77,58,.08);}
}

/* ---------- 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border-radius:var(--radius);
  font-size:16px;font-weight:500;transition:opacity .15s,background .15s;
}
.btn:active{opacity:.75;}
.btn:disabled{opacity:.45;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--green-200);}
.btn-block{width:100%;}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px;border-radius:10px;}

.tag{font-size:12px;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap;}
.tag-green{background:var(--green-100);color:var(--ink);}
.tag-orange{background:var(--orange-50);color:var(--danger);}
.tag-gray{background:#F0F2F0;color:var(--muted);}

.icon-btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;border-radius:10px;
}
.icon-btn:active{background:rgba(255,255,255,.18);}

.toast{
  position:fixed;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translateX(-50%);
  background:rgba(21,58,44,.92);color:#fff;padding:10px 20px;border-radius:22px;
  font-size:14px;z-index:200;max-width:80vw;text-align:center;
}
.loading-mask{
  position:fixed;inset:0;background:rgba(246,250,247,.72);z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.loading-mask p{color:var(--ink);font-size:14px;margin:0;}
.spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--green-200);border-top-color:var(--ink);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 登录页 ---------- */
.login-page{background:var(--ivory);justify-content:center;padding:0 28px calc(40px + var(--safe-bottom));}
.login-hero{text-align:center;margin-bottom:38px;}
.login-logo{
  width:66px;height:66px;margin:0 auto 18px;border-radius:18px;
  background:var(--ink);color:#fff;font-size:30px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(30,77,58,.22);
}
.login-title{font-size:23px;font-weight:600;color:var(--ink-deep);margin:0 0 6px;letter-spacing:1px;}
.login-sub{font-size:13.5px;color:var(--muted);margin:0;}
.login-form{display:flex;flex-direction:column;gap:16px;}
.field{display:block;}
.field-label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:7px;}
.field-input{
  width:100%;height:52px;padding:0 16px;border-radius:var(--radius);
  background:#fff;box-shadow:inset 0 0 0 1px var(--green-200);font-size:16px;
}
.field-input:focus{box-shadow:inset 0 0 0 1.5px var(--ink);}
.form-error{color:var(--danger);font-size:13.5px;margin:0;text-align:center;}
.login-foot{text-align:center;font-size:12.5px;color:#A8B4AE;margin-top:44px;}

/* ---------- 考试列表 ---------- */
.topbar{
  background:var(--ink);color:#fff;
  padding:calc(14px + var(--safe-top)) 20px 16px;
}
.topbar-main{display:flex;align-items:baseline;justify-content:space-between;}
.topbar-title{font-size:19px;font-weight:600;}
.topbar-user{font-size:13px;opacity:.85;}
.topbar-user em{font-style:normal;color:#FFD9BC;}
.list-body{flex:1;padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px;}
.empty{text-align:center;color:var(--muted);padding:70px 0;font-size:14px;}
.empty-icon{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:var(--green-100);position:relative;
}
.empty-icon::after{
  content:'';position:absolute;inset:18px;border-radius:4px;
  background:var(--green-200);
}
.exam-card{
  background:#fff;border-radius:var(--radius);padding:16px;
  box-shadow:0 1px 3px rgba(30,77,58,.06);
}
.exam-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.exam-name{font-size:16px;font-weight:600;color:var(--ink-deep);margin:0;line-height:1.45;}
.exam-meta{font-size:13px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px;}
.exam-meta .dot{color:var(--green-200);}
.exam-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.exam-cat{font-size:12.5px;color:var(--ink);background:var(--green-100);padding:3px 9px;border-radius:6px;}
.tabbar{
  padding:12px 16px calc(12px + var(--safe-bottom));
  background:#fff;border-top:1px solid var(--line);
}
.tabbar-btn{width:100%;height:46px;border-radius:var(--radius);color:var(--muted);font-size:15px;}

/* ---------- 答题页 ---------- */
.exam-page{background:var(--green-50);}
.exam-bar{
  background:var(--ink);color:#fff;
  padding:calc(8px + var(--safe-top)) 10px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  position:sticky;top:0;z-index:20;
}
.exam-bar-left,.exam-bar-right{display:flex;align-items:center;gap:4px;min-width:0;}
.exam-bar-left{flex:1;}
.exam-bar-title{
  font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.timer{
  font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;
  background:rgba(255,255,255,.14);padding:4px 11px;border-radius:8px;
}
.timer-warn{background:var(--orange);color:#fff;}

.exam-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px 0;}
.q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.q-index{font-size:16px;font-weight:600;color:var(--ink-deep);}
.q-total{font-size:13px;color:var(--muted);}
.q-type{
  font-size:12px;color:var(--ink);background:var(--green-100);
  padding:2px 8px;border-radius:5px;margin-left:auto;
}
.q-score{font-size:12.5px;color:var(--orange);font-weight:600;}
.q-stem{font-size:16px;line-height:1.75;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.q-image{width:100%;border-radius:10px;margin-top:14px;display:block;}

.options{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.option{
  display:flex;align-items:flex-start;gap:12px;text-align:left;
  background:#fff;border-radius:var(--radius);padding:14px 15px;
  box-shadow:inset 0 0 0 1px var(--green-200);
  transition:background .15s,box-shadow .15s;min-height:52px;
}
.option-active{background:var(--green-100);box-shadow:inset 0 0 0 1.5px var(--ink);}
.option-key{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--green-100);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;margin-top:1px;
}
.option-active .option-key{background:var(--ink);color:#fff;}
.option-text{flex:1;font-size:15px;line-height:1.6;word-break:break-word;}

.blank-wrap,.essay-wrap{margin-top:18px;}
.blank-input{
  width:100%;height:52px;padding:0 16px;border-radius:var(--radius);
  background:#fff;box-shadow:inset 0 0 0 1px var(--green-200);
}
.blank-input:focus{box-shadow:inset 0 0 0 1.5px var(--ink);}
.essay-input{
  width:100%;min-height:220px;padding:14px 16px;border-radius:var(--radius);
  background:#fff;box-shadow:inset 0 0 0 1px var(--green-200);
  line-height:1.8;resize:none;
}
.essay-input:focus{box-shadow:inset 0 0 0 1.5px var(--ink);}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0;text-align:right;}
.q-foot-space{height:24px;}

.exam-foot{
  display:flex;gap:8px;padding:10px 12px calc(10px + var(--safe-bottom));
  background:#fff;border-top:1px solid var(--line);
}
.foot-btn{
  flex:1;min-height:48px;border-radius:var(--radius);
  background:var(--green-100);color:var(--ink);font-size:15px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.foot-btn:disabled{opacity:.4;}
.foot-btn:active{opacity:.75;}
.foot-btn-card{flex:1.3;background:#fff;box-shadow:inset 0 0 0 1px var(--green-200);}
.foot-btn-card em{font-style:normal;font-size:12.5px;color:var(--muted);}
.foot-btn-next{background:var(--ink);color:#fff;}
.foot-btn-submit{background:var(--orange);color:#fff;}

/* ---------- 答题卡抽屉 ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(21,58,44,.42);z-index:40;}
.drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-radius:18px 18px 0 0;
  max-height:78dvh;display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform .26s cubic-bezier(.3,.8,.4,1);
}
@media (min-width:640px){.drawer{left:50%;right:auto;width:480px;transform:translate(-50%,102%);}
  .drawer-open{transform:translate(-50%,0)!important;}}
.drawer-open{transform:translateY(0);}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;font-size:16px;font-weight:600;color:var(--ink-deep);
  border-bottom:1px solid var(--line);
}
.drawer-head .icon-btn{color:var(--muted);font-size:18px;}
.drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px;}
.card-group{margin-bottom:20px;}
.card-group-title{
  font-size:13.5px;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.card-group-title em{font-style:normal;font-size:12px;color:#A8B4AE;}
.card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;}
.card-cell{
  aspect-ratio:1;border-radius:9px;background:var(--green-50);
  box-shadow:inset 0 0 0 1px var(--green-200);
  font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
}
.cell-done{background:var(--green-100);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--ink);}
.cell-cur{outline:2px solid var(--orange);outline-offset:1px;}
.drawer-foot{padding:12px 18px calc(14px + var(--safe-bottom));border-top:1px solid var(--line);}
.legend{display:flex;gap:18px;font-size:12.5px;color:var(--muted);margin-bottom:12px;}
.legend span{display:flex;align-items:center;gap:5px;}
.lg{width:11px;height:11px;border-radius:3px;display:inline-block;}
.lg-done{background:var(--ink);}
.lg-undone{background:var(--green-200);}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(21,58,44,.42);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.modal{
  background:#fff;border-radius:16px;padding:24px 22px 20px;width:100%;max-width:340px;
}
.modal-title{font-size:17px;font-weight:600;color:var(--ink-deep);margin:0 0 12px;text-align:center;}
.modal-text{font-size:14.5px;color:var(--text);margin:0;text-align:center;line-height:1.7;}
.modal-text b{color:var(--ink);}
.warn-text{color:var(--danger)!important;}
.modal-tip{font-size:12.5px;color:var(--muted);text-align:center;margin:10px 0 0;}
.modal-actions{display:flex;gap:10px;margin-top:20px;}
.modal-actions .btn{flex:1;min-height:46px;font-size:15px;}

/* ---------- 成绩页 ---------- */
.result-page{background:var(--ivory);padding:0 22px calc(30px + var(--safe-bottom));}
.result-hero{
  background:var(--ink);color:#fff;border-radius:0 0 22px 22px;
  padding:calc(44px + var(--safe-top)) 24px 34px;text-align:center;
  margin:0 -22px 22px;
}
.result-label{font-size:13.5px;opacity:.82;margin:0 0 8px;}
.result-score{font-size:52px;font-weight:600;margin:0;line-height:1;font-variant-numeric:tabular-nums;}
.result-score em{font-size:17px;font-weight:400;font-style:normal;margin-left:5px;opacity:.85;}
.result-sub{font-size:13px;opacity:.75;margin:12px 0 0;}
.result-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.result-card{
  background:#fff;border-radius:var(--radius);padding:18px;text-align:center;
  box-shadow:0 1px 3px rgba(30,77,58,.06);
}
.rc-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.rc-value{font-size:24px;font-weight:600;color:var(--ink-deep);font-variant-numeric:tabular-nums;}
.result-note{
  font-size:13px;color:var(--muted);background:var(--orange-50);color:var(--danger);
  padding:12px 14px;border-radius:10px;margin-top:16px;line-height:1.6;
}
.result-actions{margin-top:26px;}

/* ---------- 我的 ---------- */
.mine-page{background:var(--green-50);}
.mine-hero{
  background:var(--ink);color:#fff;
  padding:calc(36px + var(--safe-top)) 22px 28px;text-align:center;
}
.mine-avatar{
  width:62px;height:62px;margin:0 auto 12px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:26px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
}
.mine-name{font-size:20px;font-weight:600;margin:0 0 6px;}
.mine-sub{font-size:13px;opacity:.8;margin:0;}
.mine-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 0;}
.mine-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--green-200);border-radius:12px;overflow:hidden;margin-bottom:14px;
}
.mine-stat{background:#fff;padding:14px 4px;text-align:center;}
.ms-value{
  display:block;font-size:19px;font-weight:600;color:var(--ink-deep);
  font-variant-numeric:tabular-nums;
}
.ms-label{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;}
.mine-card{background:#fff;border-radius:12px;padding:16px;margin-bottom:14px;}
.mine-card-title{
  font-size:14px;font-weight:600;color:var(--ink-deep);margin:0 0 12px;
  display:flex;align-items:center;gap:7px;
}
.mine-card-title::before{
  content:'';width:3px;height:13px;background:var(--ink);border-radius:2px;
}
.trend-svg{width:100%;height:130px;display:block;}
.mine-hint{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 0;}
.mine-bar{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.mb-label{
  width:64px;font-size:12.5px;color:var(--muted);text-align:right;flex-shrink:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mb-track{flex:1;height:18px;background:var(--green-50);border-radius:5px;overflow:hidden;}
.mb-fill{height:100%;border-radius:5px;min-width:2px;}
.mb-count{width:42px;font-size:12px;color:var(--text);flex-shrink:0;}
.mine-record{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.mine-record:last-child{border-bottom:none;padding-bottom:0;}
.mr-name{font-size:14px;font-weight:500;color:var(--text);margin:0 0 4px;line-height:1.4;}
.mr-meta{font-size:12px;color:var(--muted);margin:0;}
.mr-score{text-align:right;flex-shrink:0;}
.mr-score b{display:block;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;}
.mr-score span{font-size:11.5px;color:var(--muted);}
.mr-muted{font-size:12.5px;color:var(--muted);}
.mine-actions{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;}

/* 底部双标签导航 */
.tabbar{display:flex;gap:8px;}
.tabbar-btn{
  flex:1;height:46px;border-radius:var(--radius);
  color:var(--muted);font-size:15px;background:var(--green-50);
}
.tabbar-active{background:var(--green-100);color:var(--ink);font-weight:600;}