/* 吐槽成歌（/vent）：沿用 style.css 的设计变量 */
.vent { max-width: 760px; padding-top: 44px; padding-bottom: 64px; }
.vent-hero h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; }
.vent-hero h1 em { font-style: normal; color: var(--accent-text); }
.vent-hero .lede { font-size: 17px; margin-bottom: 28px; }
.vent-hero.compact h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 20px; }
.vent-hero.compact .lede { display: none; }
.vent-card { padding: 24px; margin-bottom: 20px; }
.vent-card textarea { resize: vertical; line-height: 1.55; }
#ventText { font-size: 16px; min-height: 128px; }
#draftLyrics { font-size: 15px; min-height: 280px; }

.vent-egs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vent-eg { background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); font: 500 12.5px/1 var(--font-body); padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.vent-eg:hover { color: var(--text); border-color: var(--line-2); }
.field-foot .hint { margin: 0; flex: none; padding-left: 10px; }

.vent-moods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vent-moods button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px; color: var(--text-2); font: 500 13px/1.2 var(--font-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.vent-moods button b { font-size: 22px; line-height: 1; font-weight: 400; }
.vent-moods button:hover { color: var(--text); border-color: var(--line-2); }
.vent-moods button[aria-checked=true] { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); font-weight: 600; }

.vent-go { width: 100%; margin-top: 4px; }
.vent-note { text-align: center; }
.vent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vent-actions .btn.lg { flex: 1; }
.vent-style { margin-top: 4px; }

.vent-care h2 { margin: 0 0 10px; font-size: 22px; }
.vent-care p { color: var(--text-2); }

.vent-now { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.vent-cover { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex: none; background: var(--card-2); }
.vent-now-body { min-width: 0; }
.vent-now-body .card-title { margin-bottom: 6px; }
.vent-song-title { margin: 0; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.vent-progress { height: 4px; border-radius: 4px; background: var(--card-2); overflow: hidden; margin-bottom: 16px; }
.vent-progress span { display: block; width: 35%; height: 100%; background: var(--accent); border-radius: 4px; animation: vent-slide 1.4s ease-in-out infinite; }
@keyframes vent-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
#songAudio { width: 100%; margin-bottom: 12px; }
.vent-versions { max-width: 280px; }
.vent-lyrics { margin-top: 18px; }
.vent-lyrics summary { cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 13.5px; }
.vent-lyrics pre { white-space: pre-wrap; font: 14px/1.7 var(--font-body); color: var(--text-2); margin: 10px 0 0; }
#stepSong .share-box { margin-top: 12px; }

@media (max-width: 640px) {
  .vent { padding-top: 24px; padding-left: 16px; padding-right: 16px; }
  .vent-card { padding: 18px; }
  .vent-moods { grid-template-columns: repeat(3, 1fr); }
  .vent .row2 { grid-template-columns: 1fr; gap: 0; }
  .field-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .field-foot .hint { padding-left: 0; }
  .vent-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .vent-progress span { animation: none; width: 100%; opacity: .5; } }