* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: #f5f7fa;
  color: #1f2937;
  line-height: 1.6;
}
.top { background: #fff; border-bottom: 1px solid #e5e7eb; text-align: center; padding: 26px 16px 18px; }
.top h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.tagline { color: #6b7280; margin-top: 6px; font-size: 13px; }
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 0 12px; max-width: 860px; margin: 0 auto;
}
.tabs button {
  border: none; background: transparent; color: #4b5563; padding: 13px 18px;
  font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs button:hover { color: #1d4ed8; }
.tabs button.active { color: #1d4ed8; font-weight: 600; border-bottom-color: #1d4ed8; }
.container { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.search-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.search-bar input {
  flex: 1; min-width: 160px; border: 1px solid #d1d5db; outline: none;
  font-size: 14px; padding: 9px 12px; border-radius: 8px; background: #fff;
}
.search-bar input:focus { border-color: #1d4ed8; }
.search-bar select {
  border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 8px; font-size: 13px;
}
.search-bar button, .flash-actions button {
  border: none; background: #1d4ed8; color: #fff; padding: 9px 18px;
  border-radius: 8px; font-size: 13px; cursor: pointer;
}
.search-bar button:hover, .flash-actions button:hover { background: #1e40af; }
.search-bar button.secondary, .flash-actions button.secondary { background: #6b7280; }
.search-bar button.secondary:hover, .flash-actions button.secondary:hover { background: #4b5563; }
.flash-actions button.good { background: #059669; }
.flash-actions button.danger { background: #dc2626; }
.status { color: #6b7280; font-size: 13px; min-height: 20px; margin: 2px 2px 10px; }
.cards { display: flex; flex-direction: column; gap: 10px; }
.group { font-size: 14px; font-weight: 600; color: #374151; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e5e7eb; }
.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(29,78,216,.08); }
.card .en { font-size: 15px; line-height: 1.6; }
.card .zh { color: #374151; margin-top: 6px; font-size: 14px; line-height: 1.6; }
.card .tag {
  display: inline-block; background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe; border-radius: 999px; padding: 0 9px;
  font-size: 12px; margin: 4px 6px 0 0;
}
.card .meta { color: #9ca3af; font-size: 12px; margin-top: 6px; }
.detail {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px;
}
.detail h3 { font-size: 16px; margin-bottom: 10px; }
.detail h4 { font-size: 14px; margin: 12px 0 4px; color: #374151; }
.detail pre { white-space: pre-wrap; line-height: 1.8; font-family: inherit; font-size: 14px; }
.flashcard {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 28px 22px;
  text-align: center;
}
.flash-front { font-size: 17px; line-height: 1.7; }
.flash-back { color: #374151; margin-top: 14px; font-size: 14px; line-height: 1.7; }
.flash-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hidden { display: none !important; }
.hint { color: #6b7280; font-size: 13px; margin-bottom: 12px; }
.sub-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.sub-tabs button {
  border: none; background: transparent; padding: 9px 16px; font-size: 14px;
  color: #4b5563; cursor: pointer; border-bottom: 2px solid transparent;
}
.sub-tabs button.active { color: #1d4ed8; font-weight: 600; border-bottom-color: #1d4ed8; }
.footer { text-align: center; color: #9ca3af; font-size: 12px; padding: 20px 0 30px; }
@media (max-width: 520px) {
  .tabs button { padding: 12px 12px; font-size: 13px; }
}