:root {
  --border: #dadada;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; margin: 0; }
.topbar { padding: 10px 16px; color: #fff; font-weight: 700; }
.topbar.ok { background: #0a8927; }
.topbar.err { background: #c90000; }
.container { max-width: 900px; margin: 0 auto; padding: 16px; }
h1 { margin: 8px 0 4px; }
p#today { color: #555; margin: 0 0 12px; }
.box { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 12px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
input[type="text"], input[type="number"] { padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
button { padding: 8px 12px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #f6f6f6; }
.card-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: center; margin: 8px 0; }
.front { color: #222; }
.answer { padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
.tx { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ok { color: #0a8927; font-weight: 700; }
.err { color: #c90000; font-weight: 700; }