* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f4fd 100%);
  min-height: 100vh; color: #1f2937;
}
.container { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
h1 { font-size: 28px; text-align: center; }
.subtitle { text-align: center; color: #6b7280; margin: 8px 0 32px; font-size: 14px; }
.search-box { display: flex; gap: 8px; background: #fff; padding: 10px; border-radius: 14px; box-shadow: 0 8px 24px rgba(31,41,55,.08); }
.search-box input { flex: 1; border: none; outline: none; font-size: 16px; padding: 10px 12px; border-radius: 8px; background: #f3f4f6; }
.search-box select { border: none; outline: none; background: #f3f4f6; border-radius: 8px; padding: 0 8px; font-size: 14px; color: #374151; }
.search-box button { border: none; background: #2563eb; color: #fff; padding: 0 22px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.search-box button:hover { background: #1d4ed8; }
.status { margin: 18px 4px 8px; font-size: 14px; color: #4b5563; min-height: 20px; }
.results { list-style: none; }
.item { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(31,41,55,.06); }
.word { font-size: 18px; font-weight: 600; color: #111827; }
.phonetic { color: #7c3aed; font-weight: 400; margin-left: 4px; }
.pinyin { color: #b45309; font-weight: 400; margin-left: 4px; }
.pos { color: #059669; font-weight: 400; margin-left: 6px; font-size: 14px; }
.tags { margin-top: 6px; }
.tag { display: inline-block; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 999px; padding: 1px 10px; font-size: 12px; margin-right: 6px; }
.exchange { margin-top: 6px; font-size: 13px; color: #6b7280; }
.def { margin-top: 6px; line-height: 1.7; color: #374151; font-size: 15px; white-space: pre-line; }
.meta { margin-top: 8px; font-size: 12px; color: #9ca3af; }
@media (max-width: 520px) {
  .search-box { flex-wrap: wrap; }
  .search-box select { order: 3; flex: 1; padding: 10px; }
  .search-box button { flex: 1; }
}

.footer { text-align: center; margin-top: 40px; padding-bottom: 20px; color: #9ca3af; font-size: 13px; }