/* R248 — Rhyme finder panel (parity with iOS R231 W-7 useRhymes).
Reuses the .ai-panel container + adds bucket-specific colors so
perfect / near / multi tell apart at a glance. */
.rhyme-input-row {
display: flex; gap: 8px; margin-bottom: 12px;
}
.rhyme-input-row input {
flex: 1;
padding: 10px 12px;
background: var(--bg);
color: var(--txt);
border: 1px solid var(--line);
border-radius: 8px;
font-family: inherit; font-size: 14px;
outline: none;
}
.rhyme-input-row input:focus { border-color: var(--accent); }
.rhyme-bucket-label {
color: var(--txt-2); font-size: 11px; font-weight: 900;
letter-spacing: 1px; text-transform: uppercase;
margin: 12px 0 6px;
}
.rhyme-bucket-label:first-of-type { margin-top: 6px; }
.rhyme-pills {
display: flex; flex-wrap: wrap; gap: 6px;
}
.rhyme-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px; border-radius: 999px;
background: rgba(0,255,157,0.10);
border: 1px solid rgba(0,255,157,0.35);
color: var(--txt);
font-family: inherit; font-size: 13px; font-weight: 600;
cursor: pointer; transition: transform 0.05s;
}
.rhyme-pill:hover { background: rgba(0,255,157,0.20); }
.rhyme-pill:active { transform: scale(0.95); }
.rhyme-pill.near {
background: rgba(110,39,255,0.10);
border-color: rgba(110,39,255,0.35);
}
.rhyme-pill.near:hover { background: rgba(110,39,255,0.20); }
.rhyme-pill.multi {
background: rgba(255,107,53,0.10);
border-color: rgba(255,107,53,0.40);
}
.rhyme-pill.multi:hover { background: rgba(255,107,53,0.20); }
.rhyme-pill.tier-top {
box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.55) inset;
}
.rhyme-pill .star {
color: #FFD54F; font-size: 10px;
}
Loading beat…