/* 教师校验页样式：与纸片戏台版同一套纸卡配色（白边模切、描线、硬投影），只用系统字体 */
:root {
  --ink: #2e2219;
  --soft: #66513f;
  --line: #b9a68f;
  --paper: #fffaf0;
  --paper-2: #fbf0dd;
  --cut: #ffffff;
  --shadow: rgba(46, 30, 16, 0.3);
  --red: #c8402a; /* 白字对比度约 5.0 */
  --red-dark: #9c2f1c;
  --green: #2f7d4f;
  --green-soft: #e3f2e7;
  /* 与戏台版同一层纸纹（细噪点） */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.24 0 0 0 0 0.12 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f3e6cf;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.6;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { margin: 0 0 4px; font-weight: 900; letter-spacing: 0.06em; }
.lead, .hint { color: var(--soft); }
.back { margin: 0 0 8px; font-size: 0.9em; }
.back a { color: var(--soft); font-weight: 600; text-decoration: none; }
.back a:hover { color: var(--ink); text-decoration: underline; }
/* compat.js：浏览器跑不动校验程序时写在这里 */
.lead.is-problem { padding: 10px 14px; border-radius: 10px; background: #fde6df; box-shadow: 0 0 0 2px var(--red); color: var(--red-dark); font-weight: 700; }
.card {
  margin-top: 22px;
  padding: 20px 22px;
  border: 4px solid var(--cut);
  border-radius: 16px;
  background: var(--paper-grain), var(--paper);
  box-shadow: 0 0 0 2px var(--ink), 7px 9px 0 0 var(--shadow);
}
.card h2 { margin: 0 0 12px; font-size: 1.15em; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; font-weight: 600; color: var(--soft); }
input, select, textarea {
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--cut);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #fde6df; }
textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
button {
  min-height: 44px;
  padding: 7px 24px;
  border: 3px solid var(--cut);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ink), 4px 5px 0 0 var(--shadow);
}
button:active { transform: translate(2px, 3px); box-shadow: 0 0 0 2px var(--ink), 1px 1px 0 0 var(--shadow); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
#batch-btn { margin-top: 12px; }
.result { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.result.is-good { background: var(--green-soft); box-shadow: 0 0 0 2px var(--green); color: var(--green); }
.result.is-bad { background: #fde6df; box-shadow: 0 0 0 2px var(--red); color: var(--red-dark); }
.summary { font-weight: 700; margin: 14px 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; background: var(--cut); }
th, td { padding: 6px 8px; border-bottom: 1px dashed rgba(46, 34, 25, 0.18); text-align: left; }
th { background: var(--paper-2); }
tr.is-good td:last-child { color: var(--green); font-weight: 700; }
tr.is-bad td { background: #fff3ee; }
tr.is-bad td:last-child { color: var(--red-dark); font-weight: 700; }