* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background: #f2f6f4; color: #16211e; font-size: 14px; }
a { color: #0e9f76; text-decoration: none; }
.hidden { display: none !important; }

.topbar { background: #0e9f76; color: #fff; padding: 0 20px; height: 54px; display: flex; align-items: center; gap: 16px; }
.topbar .brand { font-weight: 700; font-size: 17px; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; opacity: .95; }
.topbar button { background: rgba(255,255,255,.18); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }

.wrap { max-width: 1080px; margin: 20px auto; padding: 0 16px; }
.panel { background: #fff; border: 1px solid #d6e4df; border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.panel h2 { font-size: 16px; margin-bottom: 12px; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { border: 1px solid #d6e4df; background: #fff; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tabs button.on { background: #0e9f76; color: #fff; border-color: #0e9f76; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid #e6eeeb; text-align: left; vertical-align: top; font-size: 13px; }
th { background: #f3f8f6; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tag { display:inline-block; padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600 }
.tag.ok { background:#e7f6ec; color:#1f7a3d }
.tag.no { background:#fdecec; color:#b23333 }
.tag.wait { background:#fff4e0; color:#a86f00 }
.green { color:#1f7a3d } .red { color:#b23333 }

.card { border:1px solid #d6e4df;border-radius:10px;padding:16px;margin-bottom:12px;background:#fff }
.btn { border:none;background:#0e9f76;color:#fff;padding:7px 14px;border-radius:7px;cursor:pointer;font-size:13px }
.btn.gh { background:#fff;border:1px solid #d6e4df;color:#16211e }
.btn.small { padding:3px 8px; font-size:12px }
.btn.risk { background:#e2544a }
input,select,textarea { border:1px solid #d3e0dc;border-radius:6px;padding:7px 9px;font-size:13px;font-family:inherit }
label { font-size:13px;color:#44534e; margin-right:4px; }

.q { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #ecf2f0; }
.q .stem { font-size:15px; margin-bottom:8px; }
.q .ans { display:flex; gap:8px; align-items:center; }
.q input[type=text] { width:130px; }

.banner { background:linear-gradient(135deg,#0e9f76,#13b98a); color:#fff; border-radius:12px; padding:22px; margin-bottom:18px; }
.banner h1 { font-size:22px; margin-bottom:6px; }
.banner p { opacity:.95; font-size:14px; }
.banner.none { background:#8aa59b; }

.toast { position:fixed; top:64px; left:50%; transform:translateX(-50%); background:#222;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;z-index:999; opacity:.95; max-width:80%; }

.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:#fff;border-radius:12px;padding:24px;width:min(420px,92vw); }
.modal h2 { margin-bottom:14px; font-size:17px; }
.modal .row { margin-bottom:12px; }
.error { color:#b23333; font-size:13px; margin-top:8px; }
.loading { text-align:center; color:#5a6b65; padding:40px; }
.qimg { max-width:100%; border:1px solid #d3e0dc; border-radius:8px; }
.frac { text-align:center }
queslist { display:block }
.vertical, .express { white-space:pre-wrap; }

/* ---- 数学输入面板（复用班级宠物） ---- */
.oral-pad, .express-pad {
  display: flex; gap: 8px; align-items: stretch; margin-top: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 10px; max-width: 100%;
}
.express-numpad { flex: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; align-content: start; }
.express-sympad { flex: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; align-content: start; border-left: 2px solid #e2e8f0; padding-left: 8px; }
.math-key {
  padding: 10px 0; font-size: 16px; font-weight: 700; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; color: #1e293b;
  user-select: none; font-family: inherit;
}
.math-key:active { background: #eef2ff; transform: translateY(1px); }
.math-key-fn { background: #f1f5f9; color: #475569; }
.express-key-caret { background: #e0e7ff; color: #4f46e5; font-weight: 800; }
.express-key-newline { grid-column: span 3; }
.ans-box {
  width: 100%; min-height: 48px; padding: 9px 11px; margin-top: 6px;
  border: 2px solid #0e9f76; border-radius: 10px; background: #fff;
  font-size: 18px; font-weight: 700; font-family: "Cascadia Code",Consolas,monospace;
  line-height: 1.6;
}
.ans-box:focus { outline: none; border-color: #4f46e5; background: #f5f3ff; }
.ans-box.ta { min-height: 84px; resize: vertical; }

/* ---- 分题型阶段计时 ---- */
.prepare { text-align:center; padding: 30px 10px; }
.prepare .big { font-size: 20px; font-weight: 700; margin: 10px 0; }
.prepare .meta { color:#5a6b65; margin-bottom: 18px; }
.countdown { position: sticky; top: 0; background:#fff8e6; border:1px solid #f0d48a;
  color:#9a6b00; padding:8px 14px; border-radius:8px; font-size:15px; font-weight:700;
  text-align:center; margin-bottom:14px; z-index:5; }
.countdown.danger { background:#fdecec; color:#b23333; border-color:#f0b0aa; }
.rank-me { background:#e7f6ec; font-weight:700; }