* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; background: #f6f7f9; color: #1f2329; font-size: 15px; line-height: 1.75; }
a { color: #185fa5; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.topbar { background: #fff; border-bottom: 1px solid #e5e6eb; }
.bar-in { display: flex; align-items: center; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.logo { font-size: 20px; font-weight: 600; color: #1f2329; }
.search { display: flex; flex: 1; min-width: 260px; max-width: 480px; }
.search input { flex: 1; padding: 8px 12px; border: 1px solid #d0d3d9; border-right: none; border-radius: 6px 0 0 6px; font-size: 14px; outline: none; }
.search input:focus { border-color: #185fa5; }
.search button { padding: 8px 18px; background: #185fa5; color: #fff; border: none; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; }
.search button:hover { background: #0c447c; }
.ask-link { color: #534ab7; font-size: 14px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0; }
.crumbs a { display: inline-block; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 4px; font-size: 14px; color: #185fa5; }
.crumbs a.on, .crumbs a:hover { background: #e6f1fb; text-decoration: none; }

.card { background: #fff; border: 1px solid #e5e6eb; border-radius: 10px; padding: 24px; margin-bottom: 16px; }
.card h1 { font-size: 24px; margin-bottom: 8px; }
.card h2 { font-size: 17px; margin-bottom: 10px; color: #1f2329; }
.hint { color: #6b6f76; font-size: 13px; margin-bottom: 12px; }

.entry .pinyin { font-size: 17px; color: #534ab7; margin-bottom: 18px; }
.sec { margin-bottom: 18px; }
.sec h2 { font-size: 15px; color: #6b6f76; border-left: 3px solid #185fa5; padding-left: 8px; }
.sec p { margin-top: 6px; }
.tag { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: normal; padding: 1px 8px; border-radius: 10px; margin-left: 8px; }
.tag.base { background: #e1f5ee; color: #0f6e56; }
.tag.ai { background: #eeedfe; color: #534ab7; }

.words { display: flex; flex-wrap: wrap; gap: 8px; }
.w { display: inline-block; padding: 3px 10px; background: #f2f3f5; border-radius: 4px; font-size: 14px; }
.w:hover { background: #e6f1fb; text-decoration: none; }
.w.hot { background: #fdf0ef; color: #993556; }
.w.hot:hover { background: #f8e0de; }
.w.big { font-size: 16px; padding: 6px 14px; }
.w.plain { background: none; color: #6b6f76; padding-left: 0; }
.loading-hint { margin-top: 4px; }

.pager { display: flex; gap: 16px; align-items: center; margin-top: 16px; font-size: 14px; color: #6b6f76; }

.ask-row { display: flex; gap: 0; }
.ask-row input { flex: 1; padding: 10px 12px; border: 1px solid #d0d3d9; border-radius: 6px 0 0 6px; font-size: 14px; outline: none; }
.ask-row input:focus { border-color: #534ab7; }
.ask-row button { padding: 10px 22px; background: #534ab7; color: #fff; border: none; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; }
.answer p { margin-top: 4px; }

.footer { margin-top: 32px; padding: 24px 0; border-top: 1px solid #e5e6eb; color: #8a8f99; font-size: 13px; text-align: center; }
.footer a { color: #6b6f76; margin: 0 4px; }

.ch-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 16px 10px; }
.ch-nav .nav { padding: 3px 10px; border-radius: 4px; font-size: 14px; color: #444441; }
.ch-nav .nav:hover { background: #e6f1fb; color: #185fa5; text-decoration: none; }
.ch-nav .nav.on { background: #185fa5; color: #fff; }

.chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.chan-card { display: block; background: #fff; border: 1px solid #e5e6eb; border-radius: 10px; padding: 16px 18px; }
.chan-card:hover { border-color: #185fa5; text-decoration: none; box-shadow: 0 1px 4px rgba(24,95,165,.12); }
.chan-name { font-size: 16px; font-weight: 600; color: #1f2329; margin-bottom: 4px; }
.chan-desc { font-size: 12px; color: #8a8f99; }

.big-char { font-size: 40px; margin-right: 6px; vertical-align: -6px; }
.char-info { border-collapse: collapse; margin: 12px 0 18px; }
.char-info th { text-align: left; color: #6b6f76; font-weight: 400; padding: 4px 18px 4px 0; white-space: nowrap; vertical-align: top; }
.char-info td { padding: 4px 0; }
.rel-links { margin-top: 16px; font-size: 14px; color: #6b6f76; }

.hz-wrap { display: flex; justify-content: center; padding: 8px 0; }
.hz-ctrl { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
.hz-ctrl button { padding: 8px 20px; border: 1px solid #d0d3d9; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; }
.hz-ctrl button:hover { border-color: #185fa5; color: #185fa5; }

.zaoju-list { padding-left: 22px; }
.zaoju-list li { margin-bottom: 8px; }
.en-list { padding-left: 20px; }
.en-list li { margin-bottom: 6px; }
.ab { color: #8a8f99; font-size: 12px; margin-left: 4px; }
.on-w { background: #185fa5 !important; color: #fff !important; }

@media (max-width: 640px) { .chan-grid { grid-template-columns: repeat(2, 1fr); } }