/* ========================================
   yz-recommend.css — 推荐页样式
   ======================================== */

/* ── Filter Panel ── */
.rec-panel { max-width:680px; margin:1.5rem auto 2rem; padding:0 1rem; }
.rec-panel__card { background:var(--card,#111113); border:1px solid var(--border,#23232a); border-radius:14px; padding:1.75rem 2rem; }
.rec-panel__row { margin-bottom:1.25rem; }
.rec-panel__row:last-child { margin-bottom:0; }
.rec-panel__label { font-size:.85rem; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.rec-panel__label i { font-size:.75rem; }

/* Use-case buttons */
.rec-use-btns { display:flex; gap:.5rem; flex-wrap:wrap; }
.rec-use-btn { padding:.55rem 1.1rem; border-radius:8px; border:1px solid var(--border,#23232a); background:transparent; color:rgba(255,255,255,.6); font-size:.88rem; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; }
.rec-use-btn:hover { border-color:rgba(212,166,71,.4); color:#e5e5e5; }
.rec-use-btn--active { border-color:var(--gold,#d4a647); color:var(--gold,#d4a647); background:rgba(212,166,71,.08); }

/* Budget slider */
.rec-budget-wrap { display:flex; align-items:center; gap:1rem; }
.rec-budget-slider { flex:1; -webkit-appearance:none; appearance:none; height:6px; background:rgba(255,255,255,.1); border-radius:3px; outline:none; }
.rec-budget-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--gold,#d4a647); cursor:pointer; border:2px solid #111; }
.rec-budget-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--gold,#d4a647); cursor:pointer; border:2px solid #111; }
.rec-budget-val { font-size:1.1rem; font-weight:700; color:#e5e5e5; min-width:60px; text-align:right; font-family:'Noto Serif SC',serif; }

/* Pill buttons for stability/availability */
.rec-pill-btns { display:flex; gap:.4rem; }
.rec-pill-btn { padding:.45rem .9rem; border-radius:6px; border:1px solid var(--border,#23232a); background:transparent; color:rgba(255,255,255,.5); font-size:.82rem; cursor:pointer; transition:all .15s; }
.rec-pill-btn:hover { border-color:rgba(212,166,71,.4); color:#e5e5e5; }
.rec-pill-btn--active { border-color:var(--gold,#d4a647); color:var(--gold,#d4a647); background:rgba(212,166,71,.08); }

/* Submit */
.rec-submit-row { display:flex; justify-content:center; margin-top:1.5rem; gap:1rem; align-items:center; }
.rec-submit-btn { padding:.7rem 2rem; border-radius:10px; background:linear-gradient(135deg,#d4a24c 0%,#b8892e 100%); border:none; color:#111; font-size:.95rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.rec-submit-btn:hover { opacity:.9; }

/* ── Results ── */
.rec-results { max-width:680px; margin:0 auto 2rem; padding:0 1rem; }
.rec-results__title { font-size:1.1rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }

/* Primary recommendation card */
.rec-card-primary { background:linear-gradient(135deg,rgba(212,162,76,.08),rgba(212,162,76,.02)); border:1px solid rgba(212,162,76,.25); border-radius:14px; padding:2rem; margin-bottom:1rem; position:relative; }
.rec-card-primary__badge { position:absolute; top:1rem; right:1rem; background:var(--gold,#d4a647); color:#111; font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:4px; text-transform:uppercase; letter-spacing:.04em; }
.rec-card-primary__name { font-family:'Noto Serif SC',serif; font-size:1.5rem; font-weight:700; color:var(--gold,#d4a647); margin-bottom:.75rem; }
.rec-card-primary__scores { display:flex; gap:1.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.rec-card-primary__score { text-align:center; }
.rec-card-primary__score-num { display:block; font-size:1.4rem; font-weight:700; color:#e5e5e5; }
.rec-card-primary__score-label { font-size:.75rem; color:rgba(255,255,255,.4); }
.rec-card-primary__reason { font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.7; margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.06); }
.rec-card-primary__reason strong { color:#e5e5e5; }

/* Secondary recommendation cards */
.rec-cards-secondary { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; }
.rec-card-sec { background:var(--card,#111113); border:1px solid var(--border,#23232a); border-radius:10px; padding:1.25rem; }
.rec-card-sec__badge { font-size:.7rem; font-weight:600; color:rgba(255,255,255,.4); margin-bottom:.4rem; }
.rec-card-sec__name { font-family:'Noto Serif SC',serif; font-size:1.1rem; font-weight:700; color:#e5e5e5; margin-bottom:.5rem; }
.rec-card-sec__row { display:flex; justify-content:space-between; font-size:.82rem; padding:.2rem 0; color:rgba(255,255,255,.5); }
.rec-card-sec__val { font-weight:600; color:rgba(255,255,255,.8); }
.rec-card-sec__reason { font-size:.78rem; color:rgba(255,255,255,.4); margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border,#23232a); line-height:1.5; }

/* Compare button */
.rec-compare-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:8px; border:1px solid rgba(99,102,241,.3); background:rgba(99,102,241,.08); color:#818cf8; font-size:.85rem; text-decoration:none; transition:all .15s; }
.rec-compare-btn:hover { background:rgba(99,102,241,.15); border-color:rgba(99,102,241,.5); }

/* No results */
.rec-no-results { background:rgba(234,179,8,.06); border:1px solid rgba(234,179,8,.2); border-radius:12px; padding:2rem; text-align:center; margin-bottom:1.5rem; }
.rec-no-results__icon { font-size:2rem; margin-bottom:.75rem; color:#eab308; }
.rec-no-results__text { font-size:.95rem; color:rgba(255,255,255,.7); margin-bottom:.75rem; }
.rec-no-results__hint { font-size:.85rem; color:rgba(255,255,255,.4); }
.rec-no-results__excluded { margin-top:1rem; font-size:.82rem; color:rgba(255,255,255,.4); text-align:left; }
.rec-no-results__excluded li { padding:.2rem 0; }

/* Share */
.rec-share { display:flex; align-items:center; gap:.5rem; justify-content:center; margin:1.5rem 0; flex-wrap:wrap; }
.rec-share__url { background:rgba(255,255,255,.04); border:1px solid var(--border,#23232a); border-radius:6px; padding:.4rem .6rem; font-size:.75rem; color:rgba(255,255,255,.4); font-family:monospace; max-width:350px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec-share__btn { padding:.4rem .8rem; border-radius:6px; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.25); color:#a78bfa; font-size:.78rem; cursor:pointer; }

/* Footer */
.rec-footer-info { max-width:680px; margin:0 auto 2.5rem; padding:0 1rem; text-align:center; font-size:.82rem; color:var(--muted,#888); }

@media (max-width:640px) {
    .rec-panel__card { padding:1.25rem 1rem; }
    .rec-cards-secondary { grid-template-columns:1fr; }
    .rec-card-primary__scores { gap:1rem; }
    .rec-use-btn { padding:.45rem .8rem; font-size:.82rem; }
}