:root{ --bg:#0b0c10; --fg:#e5e7eb; --muted:#9aa0a6; --card:#111318; --chip:#1b1e25; --pri:#7c5cff; --acc:#00e3a2; }
body{ margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--fg) }
.header{ padding:16px clamp(16px,4vw,40px); display:flex; gap:24px; align-items:center; justify-content:space-between; position:sticky; top:0; background:linear-gradient(180deg,rgba(11,12,16,.95),rgba(11,12,16,.7),transparent); backdrop-filter: blur(6px); z-index:3 }
.brand{ display:flex; align-items:center; gap:12px }
.brand .logo{ font-size:28px }
.brand h1{ margin:0; font-size:22px }
.brand .tagline{ color:var(--muted); font-size:14px }
.searchbar{ display:flex; align-items:center; gap:8px; flex:1; max-width:680px; margin-left:auto }
.searchbar input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid #23262f; background:#0f1117; color:var(--fg) }
.searchbar button{ border:0; background:#23262f; color:#cbd0d8; width:38px; height:38px; border-radius:10px; cursor:pointer }
.toolbar{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding:8px clamp(16px,4vw,40px); position:sticky; top:72px; background:linear-gradient(180deg,rgba(11,12,16,.9),rgba(11,12,16,.5),transparent); z-index:2 }
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ background:var(--chip); color:#cfd3da; border:1px solid #23262f; padding:8px 12px; border-radius:999px; cursor:pointer }
.chip.active{ outline:2px solid var(--pri); color:#fff }
.controls label{ color:var(--muted); margin-right:10px }
.controls select{ background:#0f1117; color:var(--fg); border:1px solid #23262f; border-radius:10px; padding:8px 10px }
.grid{ padding:20px clamp(16px,4vw,40px); display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px }
.card{ background:var(--card); border:1px solid #1f232d; border-radius:16px; overflow:hidden; display:flex; flex-direction:column }
.thumb{ aspect-ratio: 16/10; background:#0a0c12; display:block; width:100%; object-fit:cover }
.card-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px }
.title{ font-weight:600; font-size:16px; margin:0 }
.desc{ color:#b4b9c3; font-size:14px; min-height:40px }
.badges{ display:flex; gap:6px; flex-wrap:wrap }
.badge{ font-size:12px; color:#aeb3bd; background:#161922; border:1px solid #23262f; border-radius:8px; padding:4px 8px }
.card-actions{ display:flex; gap:8px; margin-top:auto }
.btn{ background:var(--pri); color:#fff; border:0; border-radius:10px; padding:10px 12px; cursor:pointer }
.btn.secondary{ background:#23262f; color:#d5d9e3 }
.footer{ border-top:1px solid #1f232d; padding:14px clamp(16px,4vw,40px); display:flex; justify-content:space-between; color:#9aa0a6 }
.loadmore-wrap{ display:flex; justify-content:center; padding:10px }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:10 }
.modal[hidden]{ display:none }
.modal-dialog{ background:#0f1117; border:1px solid #23262f; border-radius:16px; max-width:820px; width:min(95vw, 820px); max-height:90vh; overflow:auto; position:relative }
.modal-dialog.modal-wide{ max-width:1200px; width:min(98vw,1200px) }
.modal-close{ position:absolute; top:8px; right:8px; border:0; background:#23262f; color:#d5d9e3; width:36px; height:36px; border-radius:10px; cursor:pointer }
.modal-body{ padding:18px }
.modal-body .carousel{ display:flex; gap:10px; overflow:auto }
.modal-body .carousel img{ width:240px; height:160px; object-fit:cover; border-radius:10px; border:1px solid #23262f }
#demoFrame{ width:100%; height:75vh; border:0; background:#0a0c12 }
@media (max-width:700px){ .controls{ display:none } .modal-dialog{ width:96vw } }