* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
body { color: #222; background: #fafafa; }

.site-header { padding: 24px 16px; text-align: center; background: #ffffff; border-bottom: 1px solid #eee; }
.site-header h1 { margin: 0; font-size: 28px; }
.site-header .sub { font-size: 16px; color: #666; margin-left: 8px; }
.site-header .desc { margin-top: 8px; color: #666; }

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px; background: #fff; border-bottom: 1px solid #eee; }
.control-group { display: flex; flex-direction: column; gap: 6px; }
.control-group label { font-size: 13px; color: #444; }
.control-group input, .control-group select { padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.btn { padding: 8px 12px; border: none; background: #2b7cff; color: #fff; border-radius: 6px; cursor: pointer; }
.btn:hover { background: #1f6be0; }

.poem-list { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.poem-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.poem-card h2 { margin: 0 0 6px; font-size: 18px; }
.poem-meta { color: #666; font-size: 13px; margin-bottom: 8px; }
.poem-lines { margin: 8px 0; line-height: 1.8; }
.poem-lines .line { display: block; }
.pinyin { color: #888; font-size: 13px; margin-top: 4px; }
.translation { margin-top: 8px; color: #333; background: #f7faff; border: 1px solid #dfe9ff; border-radius: 6px; padding: 8px; display: none; }
.translation.show { display: block; }
.card-actions { display: flex; gap: 8px; margin-top: 8px; }
.secondary { background: #eef3ff; color: #265fd6; }
.secondary:hover { background: #e1e9ff; }

.site-footer { text-align: center; padding: 16px; color: #777; }