:root{ --gold:#ebbe43; --bg:#0f0f10; --card:#151516; --line:#2a2a2a }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#eee}
a{color:var(--gold);text-decoration:none}
header{position:sticky;top:0;z-index:999;background:#0f0f10e6;border-bottom:1px solid #222;backdrop-filter:saturate(140%) blur(6px)}
.wrap{max-width:1100px;margin:0 auto;padding:14px 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:10px}
.brand h1{font-size:18px;margin:0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.control{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px}
input[type=number], select{background:#0f0f10;border:1px solid var(--line);border-radius:8px;color:#eee;padding:6px 8px}
button{background:var(--gold);border:0;border-radius:10px;padding:8px 12px;cursor:pointer;color:#111}
main{padding:16px}
.grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1000px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:650px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.muted{color:#aaa}
.price{font-size:24px}
.row{display:flex;justify-content:space-between;gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #3a3a3a;border-radius:999px;padding:4px 8px;font-size:12px;color:#aaa}
footer{border-top:1px solid #222;color:#aaa}