:root{--bg:#0b0c10;--card:#111218;--text:#e6e6e6;--muted:#9aa1ac;--accent:#4da3ff;--sale:#ff5c7a;}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:16px}
.header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;font-size:22px}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #222;background:#0e0f14;color:#fff}
.tabs{display:flex;gap:8px;margin:12px 0}
.tab{padding:8px 12px;border-radius:999px;background:#0e0f14;border:1px solid #1a1d27;color:#cdd3df}
.tab.active{background:#162138;border-color:#26324a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid #1a1d27;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#0e0f14}
.card .body{padding:12px}
.badges{display:flex;gap:6px;margin-bottom:8px}
.badge{font-size:11px;padding:4px 8px;border-radius:999px;background:#121726;border:1px solid #1e2433;color:#cdd3df}
.price{display:flex;gap:8px;align-items:center;margin:6px 0}
.price .now{font-weight:800}
.price .was{text-decoration:line-through;color:var(--muted)}
.actions{display:flex;gap:8px;margin-top:auto;padding:12px}
.btn{flex:1;text-align:center;padding:10px 12px;border-radius:10px;border:1px solid #1a1d27;background:#121826;color:#cdd3df}
.btn.primary{background:linear-gradient(180deg,#1e2c45,#0f1a2b);border-color:#26324a}
.footer{color:var(--muted);padding:24px 0;font-size:14px}
.notice{font-size:13px;color:var(--muted)}