:root{
  --bg:#0f1114; --card:#171a1f; --muted:#8e97a1; --text:#e9edf2;
  --accent:#7c5cff; --accent2:#00d0b6; --red:#ff3b5c; --yellow:#ffcc00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,Segoe UI,Arial}

/* Сброс ссылок (важно для .brand как <a>) */
a{color:inherit;text-decoration:none}
a:visited{color:inherit}
a:focus-visible,.btn:focus-visible,.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.container{max-width:1200px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:50;background:rgba(15,17,20,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #222}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center;font-weight:700;letter-spacing:.5px} /* фикс выравнивания */
.brand .logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
nav{display:flex;gap:16px;flex-wrap:wrap}
.search{flex:1;display:flex;gap:8px;max-width:520px}
.search input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #2a2f36;background:#0b0d10;color:var(--text)}
.actions{display:flex;gap:12px;align-items:center}
.pill{padding:8px 12px;border-radius:10px;background:#0b0d10;border:1px solid #2a2f36;color:var(--muted)}
.btn{padding:10px 14px;border-radius:10px;border:1px solid #2a2f36;background:linear-gradient(135deg,#222,#1a1d22);cursor:pointer}
.btn.accent{background:linear-gradient(135deg,var(--accent),#5a3bff);border:none;color:white}

.hero{padding:28px 0;border-bottom:1px solid #222;background:
  radial-gradient(1200px 400px at 20% -10%,rgba(124,92,255,.25),transparent),
  radial-gradient(800px 300px at 90% 0,rgba(0,208,182,.15),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.sub{color:var(--muted);max-width:56ch}
.cta{display:flex;gap:12px;margin-top:16px}
.badge{display:inline-block;padding:6px 10px;border:1px solid #2a2f36;border-radius:999px;color:var(--yellow);font-weight:600}

.grid{display:grid;gap:16px}
.cat-grid{grid-template-columns:repeat(6,1fr)}
.card{background:var(--card);border:1px solid #242933;border-radius:14px;padding:14px}
.card:hover{border-color:#3b4452}
.cat{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cat .icon{height:56px;border-radius:10px;background:#0b0d10;border:1px dashed #2a2f36;width:100%}

.section{padding:28px 0}
.section h2{margin:0 0 12px}
.products{grid-template-columns:repeat(5,1fr)}
.p-card{padding:0;overflow:hidden}
.p-thumb{aspect-ratio:1/1;background:#0b0d10;border-bottom:1px solid #242933}
.p-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.p-body{padding:12px}
.price{display:flex;gap:8px;align-items:baseline}
.old{text-decoration:line-through;color:#98a2ad;font-size:14px}
.sale{color:var(--red);font-weight:700}
.tags{display:flex;gap:6px;margin:8px 0 0}
.tag{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #2a2f36;color:var(--muted)}

.promo{grid-template-columns:2fr 1fr 1fr}
.promo .card{min-height:120px;display:flex;flex-direction:column;justify-content:space-between}

footer{border-top:1px solid #222;padding:28px 0;color:#9aa3ad}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.list{display:grid;gap:8px}
.small{font-size:12px;color:#8e97a1}

/* Каталог и фильтры */
.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:12px 0}
.input, select{padding:10px 12px;border-radius:10px;border:1px solid #2a2f36;background:#0b0d10;color:var(--text)}
.products.catalog{grid-template-columns:repeat(4,1fr)}

/* Таблицы/формы */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #242933;padding:10px;text-align:left}
.qty{display:flex;align-items:center;gap:8px}
.input-sm{width:64px}

/* Модалки/тосты */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100}
.modal .box{background:var(--card);border:1px solid #242933;border-radius:14px;padding:20px;max-width:420px}
.toast{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid #2a2f36;padding:12px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}

@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .promo{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr 1fr}
  .products.catalog{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  nav{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
}