*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;color:#fff;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
.rec-header{padding:20px 40px;display:flex;flex-direction:column;gap:16px}
.rec-nav{display:flex;gap:12px;align-items:center;color:#aaa}
.rec-nav a{text-decoration:none;color:#aaa}
.rec-nav a.active,.rec-nav a:hover{color:#fff}
.rec-search{display:flex;gap:8px;justify-content:center;width:100%;height: 400px;margin:0 auto;padding:24px;border-radius:16px;background:
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('https://images.unsplash.com/photo-1488085061387-422e29b40080?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat}
.search-height{height: 400px;width: 80%;display: flex;justify-content: center;align-items: center;gap: 20px;}
.search-h1{width: 100%;}
@media (max-width: 768px) {
        h1 {
            opacity: 0;
            height: 0;
            margin: 0;
            overflow: hidden;
        }
    }
.rec-search input{width:70%;max-width:860px;background:#111;border:1px solid #333;color:#ddd;padding:12px 16px;border-radius:999px;outline:none}
.rec-search button{padding:8px 20px;background:#333;color:#fff;border:none;border-radius:5px;cursor:pointer}
.rec-search button:hover{background:#555}
.rec-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:90%;margin:8px auto 0}
.filter-chip{padding:6px 12px;border-radius:999px;border:1px solid #333;background:#151515;color:#ddd;cursor:pointer;font-size:12px}
.filter-chip.active{background:#fff;color:#000;border-color:#fff}
.rec-main{padding:20px 40px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#0d0d0d;border:1px solid #1f1f1f;border-radius:12px;padding:16px;display:flex;gap:14px}
.card-icon{width:56px;height:56px;border-radius:10px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-icon img{width:100%;height:100%;object-fit:contain}
.card-content{flex:1;display:flex;flex-direction:column;gap:8px}
.card-title{font-size:16px;font-weight:700;color:#fff}
.card-desc{font-size:12px;color:#aaa;line-height:1.5}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;color:#ddd;background:#1a1a1a;border:1px solid #333;border-radius:999px;padding:2px 8px}
.card-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.btn{font-size:12px;padding:6px 10px;border-radius:6px;border:1px solid #444;background:#222;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.btn:hover{background:#333}
.btn.disabled{background:#111;color:#666;border-color:#222;cursor:not-allowed}
.btn.disabled::before{content:'无';color:#666}
@media(max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr}.rec-search{width:95%}.rec-search input{width:85%}}
@media(min-width:1920px) and (max-width:2559px){.card-grid{grid-template-columns:repeat(4,1fr)}.rec-title{font-size:24px}}

/* modal shared styles (reused from index) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:none;z-index:100}
.modal-backdrop.show{display:block}
.modal-dialog{position:relative;width:720px;max-width:92vw;margin:8vh auto;background:#f7f7f7;color:#222;border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-close{position:absolute;right:22px;top:16px;border:none;background:#333;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer}
.modal-section{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.modal-row{display:flex;justify-content:space-between;align-items:center;background:#eee;border-radius:10px;padding:12px 14px}
.modal-label{color:#555}
.modal-note{margin-top:14px;color:#444}
.modal-image img{width:100%;height:auto;border-radius:10px;margin-top:10px}
@media(min-width:2560px){.card-grid{grid-template-columns:repeat(4,1fr)}.rec-title{font-size:26px}}
@media(min-width:3840px){.card-grid{grid-template-columns:repeat(5,1fr)}.rec-title{font-size:28px}}
@media(max-width:1024px){.rec-search{height:320px}.search-height{height:320px;width:90%}.rec-search input{width:80%}}
@media(max-width:640px){.rec-search{height:280px}.search-height{height:280px;width:95%}.rec-search input{width:90%}}