:root {
  color-scheme: dark;
  --bg:#050507;
  --panel:rgba(12,17,27,.92);
  --line:rgba(255,255,255,.13);
  --text:#f8fafc;
  --soft:#cbd5e1;
  --muted:#8492a6;
  --cyan:#25d7f2;
  --blue:#087cff;
  --violet:#8f1dff;
  --green:#34d399;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:radial-gradient(circle at 78% 10%,rgba(37,215,242,.16),transparent 28rem),radial-gradient(circle at 10% 80%,rgba(143,29,255,.12),transparent 30rem),linear-gradient(135deg,#050507,#08121f 54%,#03130f);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.topbar,.store-app { width:min(1460px,calc(100% - 32px)); margin-inline:auto; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand,nav,.category-rail,.panel-head,.store-layout,.product-grid,.tag-row { display:flex; align-items:center; }
.brand { gap:12px; }
.brand img { width:42px; height:42px; filter:drop-shadow(0 0 18px rgba(37,215,242,.34)); }
.brand span { display:grid; }
.brand small,.kicker { color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
nav { gap:8px; flex-wrap:wrap; }
nav a,.primary,.ghost { min-height:40px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:850; }
nav a { padding:0 12px; color:var(--soft); }
nav a:hover,.ghost:hover { background:rgba(255,255,255,.08); color:#fff; }
.store-app { display:grid; gap:14px; padding-bottom:42px; }
.hero,.panel,.product-card,.search-panel { border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,rgba(37,215,242,.06),rgba(143,29,255,.05)),var(--panel); box-shadow:0 20px 70px rgba(0,0,0,.24); }
.hero { min-height:320px; display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:22px; align-items:center; padding:clamp(22px,4vw,44px); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:900px; margin-bottom:14px; font-size:clamp(42px,6vw,78px); line-height:.9; letter-spacing:0; }
h2 { margin:4px 0 0; font-size:clamp(24px,3vw,38px); line-height:1; }
p { color:var(--soft); line-height:1.65; }
.search-panel { padding:16px; display:grid; gap:10px; }
input,select { width:100%; min-height:42px; border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:9px 10px; color:var(--text); background:rgba(255,255,255,.065); outline:none; }
input:focus,select:focus { border-color:rgba(37,215,242,.55); box-shadow:0 0 0 3px rgba(37,215,242,.12); }
.primary,.ghost { border:0; padding:0 14px; color:#fff; cursor:pointer; }
.primary { background:linear-gradient(135deg,var(--violet),var(--blue) 54%,#0dbca4); }
.ghost { border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.065); }
.full { width:100%; margin-top:8px; }
.category-rail { gap:8px; overflow:auto; }
.category-rail button { flex:0 0 auto; border:1px solid rgba(255,255,255,.13); color:var(--soft); background:rgba(255,255,255,.06); border-radius:8px; min-height:40px; padding:0 12px; font-weight:850; cursor:pointer; }
.category-rail button.active { color:#fff; border-color:rgba(37,215,242,.45); background:rgba(37,215,242,.16); }
.store-layout { align-items:flex-start; gap:14px; }
.store-layout > aside { width:280px; flex:0 0 280px; position:sticky; top:12px; display:grid; gap:10px; }
.store-layout > section { flex:1; }
.panel { padding:16px; }
.panel-head { justify-content:space-between; gap:12px; margin-bottom:12px; }
.product-grid { align-items:stretch; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.product-card { padding:12px; display:grid; gap:8px; align-content:start; }
.product-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); }
.price { font-size:22px; font-weight:950; }
.seller { color:var(--muted); font-size:13px; }
.tag-row { gap:6px; flex-wrap:wrap; }
.tag { padding:4px 7px; border-radius:8px; color:var(--soft); background:rgba(255,255,255,.08); font-size:11px; font-weight:850; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.toast { position:fixed; left:50%; bottom:18px; transform:translate(-50%,18px); max-width:min(520px,calc(100vw - 28px)); padding:12px 14px; border:1px solid rgba(37,215,242,.28); border-radius:8px; background:rgba(13,18,29,.96); opacity:0; pointer-events:none; transition:.18s ease; z-index:70; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1180px) { .hero { grid-template-columns:1fr; } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:880px) { .store-layout { flex-direction:column; } .store-layout > aside { width:100%; flex:auto; position:static; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .topbar { align-items:flex-start; flex-direction:column; } .product-grid { grid-template-columns:1fr; } h1 { font-size:clamp(38px,13vw,58px); } }