* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
       background: #f3f4f7; color: #1f2430; font-size: 14px; }

header.top { background: #25324d; color: #fff; padding: 0 22px;
  display: flex; align-items: center; height: 54px; gap: 18px; }
header.top .brand { font-size: 16px; font-weight: 600; letter-spacing: 1px; }
header.top .spacer { flex: 1; }
header.top button { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
header.top button:hover { background: rgba(255,255,255,.22); }

nav.tabs { background: #fff; border-bottom: 1px solid #dfe3ea; padding: 0 18px; display: flex; gap: 4px; }
nav.tabs button { background: none; border: 0; padding: 13px 18px; cursor: pointer;
  font-size: 14px; color: #55607a; border-bottom: 2px solid transparent; }
nav.tabs button.active { color: #2c4d92; border-bottom-color: #2c4d92; font-weight: 600; }

/* 手机上顶栏按钮多，允许换行，别挤成一团 */
@media (max-width: 620px) {
  header.top { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  header.top .brand { width: 100%; }
  header.top .spacer { display: none; }
  nav.tabs { overflow-x: auto; padding: 0 10px; }
  nav.tabs button { padding: 12px 12px; white-space: nowrap; }
}

main { padding: 22px; max-width: 1280px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 22px; }
.card { background: #fff; border: 1px solid #e4e7ee; border-radius: 9px; padding: 17px 19px; }
.card h3 { font-size: 13px; color: #6a7387; font-weight: 500; margin-bottom: 12px; }
.card h3 .badge { background: #e2ebfa; color: #2c4d92; border-radius: 10px; padding: 1px 9px; font-size: 12px; margin-left: 6px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kv .v { font-size: 21px; font-weight: 600; }
.kv .l { font-size: 12px; color: #8893a7; margin-top: 2px; }
.acc { color: #2c7a4b; }

h2.sec { font-size: 15px; margin: 20px 0 10px; color: #2c3550; }

table.data { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e4e7ee; border-radius: 8px; overflow: hidden; }
table.data th { background: #f7f8fb; text-align: left; font-size: 12.5px; color: #66708a;
  padding: 9px 12px; border-bottom: 1px solid #e4e7ee; font-weight: 600; }
table.data td { padding: 9px 12px; border-bottom: 1px solid #eef0f5; font-size: 13.5px; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover { background: #f5f8ff; }

.tag { border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.tag.graded { background: #e3f2e8; color: #2a7a49; }
.tag.pending { background: #fdeede; color: #a8651b; }
.tag.mastered { background: #e3f2e8; color: #2a7a49; }
.tag.learning { background: #e7edfa; color: #33508f; }
.tag.review { background: #f0eafa; color: #6a3d96; }

.btn { border: 1px solid #c8cedb; background: #fff; border-radius: 5px; padding: 6px 14px;
  cursor: pointer; font-size: 13px; }
.btn:hover { background: #f4f6fb; }
.btn.primary { background: #3a5da8; color: #fff; border-color: #3a5da8; }
.btn.primary:hover { background: #314f90; }
.btn.danger { color: #b3261e; border-color: #e3b4b0; }
.btn.small { padding: 3px 10px; font-size: 12px; }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.toolbar input[type=search], .toolbar input[type=text], .toolbar input[type=number] {
  padding: 7px 11px; border: 1px solid #c8cedb; border-radius: 5px; font-size: 13.5px; }

.list-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.muted { color: #8a91a3; font-size: 12.5px; }
.detail-bar { margin: 2px 0 12px; }

.modal-mask { position: fixed; inset: 0; background: rgba(23, 28, 40, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; z-index: 50; overflow-y: auto; }
.modal-mask[hidden] { display: none; }
.modal { background: #fff; border-radius: 10px; width: 640px; max-width: 100%;
  box-shadow: 0 14px 40px rgba(15, 20, 34, .25); padding: 18px 22px 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.modal-x { border: none; background: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: #8a91a3; padding: 2px 6px; }
.modal-x:hover { color: #333; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.grade-detail { background: #fff; border: 1px solid #e4e7ee; border-radius: 9px; padding: 18px 20px; margin-bottom: 16px; }
.grade-detail .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grade-detail .head .title { font-size: 16px; font-weight: 600; }
.judge { display: flex; gap: 8px; }
.judge label { border: 1px solid #c8cedb; border-radius: 5px; padding: 3px 12px; cursor: pointer; font-size: 12.5px; }
.judge input { display: none; }
.judge label:has(input:checked).ok { background: #e3f2e8; border-color: #77b68b; color: #2a7a49; }
.judge label:has(input:checked).no { background: #fbe6e4; border-color: #d98b84; color: #b3261e; }

.form-grid { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; align-items: center; max-width: 720px; }
.form-grid input, .form-grid textarea, .form-grid select {
  padding: 7px 11px; border: 1px solid #c8cedb; border-radius: 5px; font-size: 13.5px; width: 100%; font-family: inherit; }
.form-grid textarea { min-height: 54px; resize: vertical; }
.form-wrap { background: #fff; border: 1px solid #e4e7ee; border-radius: 9px; padding: 18px 20px; margin-bottom: 16px; }

textarea.tsv { width: 100%; min-height: 160px; font-family: Consolas, monospace; font-size: 13px;
  padding: 10px; border: 1px solid #c8cedb; border-radius: 6px; }
.hint { font-size: 12.5px; color: #7a8499; margin: 6px 0 10px; line-height: 1.7; }
.report { background: #f7f8fb; border: 1px solid #e0e4ee; border-radius: 6px; padding: 11px 14px; margin-top: 12px;
  font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.report .risk { color: #b3261e; }

.empty { text-align: center; color: #98a1b5; padding: 40px; font-size: 13.5px; }
.flash { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(30,38,55,.92);
  color: #fff; padding: 9px 20px; border-radius: 6px; font-size: 13.5px; z-index: 99; display: none; }
a { color: #2c4d92; text-decoration: none; }
a:hover { text-decoration: underline; }