.rating-toggle { display: flex !important; align-items: center; gap: 8px; }
.rating-toggle input { width: auto !important; margin: 0 !important; }
.muted-control { opacity: .45; }
.detail-info { margin: 22px 0; padding: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-info p { margin: 5px 0 16px; line-height: 1.5; }
.detail-info p:last-child { margin-bottom: 0; }
.recommendation { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.recommendation:hover { color: var(--wine); }
.recommendation-rank { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--wine); border-radius: 50%; color: var(--wine); font-weight: 700; }
.recommendation b, .recommendation small, .recommendation em { display: block; }
.recommendation b { margin-bottom: 3px; font: 20px Georgia; }
.recommendation small { margin-bottom: 9px; color: var(--muted); }
.recommendation em { margin-top: 9px; color: var(--wine); font-size: 11px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.api-state { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 16px; background: #eee7dc; color: var(--muted); }
.spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid #cdbfb0; border-top-color: var(--wine); border-radius: 50%; animation: spin .8s linear infinite; }
.api-error { display: grid; gap: 5px; margin: 18px 0; padding: 16px; border-left: 3px solid #a33; background: #f4e5e2; color: #7b2828; line-height: 1.45; }
.api-error span { overflow-wrap: anywhere; }
button:disabled { cursor: wait; opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }