:root{
  --bg:#0b0c10; --fg:#e8eaf0; --mut:#a9afbd; --card:#12141a; --pri:#3aa8ff; --ok:#22b07d;
  --line:#1a1f2a; --hover:#0f1117; --glass:rgba(18,20,26,.66);
}
*{ box-sizing:border-box } html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu }
a{ color:var(--pri); text-decoration:none } a:hover{ text-decoration:underline }
img{ max-width:100%; display:block }

.y-container{ max-width:1200px; margin:0 auto; padding:16px }
.y-header{ position:sticky; top:0; background:rgba(11,12,16,.70); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); z-index:10 }
.y-bar{ display:flex; align-items:center; gap:16px }
.y-logo{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px; font-size:20px; padding:10px 0 }
.y-logo img{ filter: drop-shadow(0 4px 14px rgba(58,168,255,.35)); }

.y-nav{ margin-left:auto; display:flex; gap:14px }
.y-nav a{ padding:8px 10px; border-radius:10px }
.y-nav a:hover{ background:var(--hover) }

.y-search{ flex:1; display:flex; gap:8px; position:relative }
.y-search input{ flex:1; padding:12px 14px; border-radius:14px; border:1px solid #252a36; background:#0f1117; color:#e8eaf0 }
.y-search button{ padding:12px 16px; border-radius:14px; border:0; background:linear-gradient(180deg,#55b7ff,#2c88e7); color:#07111f; font-weight:800 }

.y-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.y-hero-bg{ position:absolute; inset:0; background:
  radial-gradient(1200px 500px at 10% -20%, #1a2b48 0%, transparent 60%),
  radial-gradient(900px 400px at 90% -30%, #1f3b5c 0%, transparent 60%) }
.y-hero-in{ position:relative; padding:60px 0; text-align:center }
.y-hero h1{ font-size:38px; line-height:1.15; margin:0 0 10px; letter-spacing:.2px }
.y-hero p{ color:var(--mut); margin:0 auto 14px; max-width:700px }
.y-hero-cta .y-btn{ margin-top:8px }

.y-title{ font-size:26px; margin:8px 0 } .y-sub{ color:var(--mut); margin:4px 0 16px }
.y-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:16px 0; box-shadow: 0 20px 60px rgba(0,0,0,.35) }
.y-btn{ display:inline-block; padding:12px 16px; border-radius:14px; background:linear-gradient(180deg,#55b7ff,#2c88e7); color:#07111f; font-weight:900; border:0 }
.y-linkbtn{ padding:8px 12px; border-radius:10px; border:1px solid #2a3142; background:#0f1117 }

.y-grid2{ display:grid; grid-template-columns: 1.05fr 1.35fr; gap:24px }
@media(max-width:900px){ .y-grid2{ grid-template-columns:1fr } }
.y-product-img{ width:100%; height:auto; border-radius:14px; background:#0f1117; border:1px solid var(--line) }

.y-best{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.y-best-label{ font-size:12px; color:#8fb5ff; text-transform:uppercase; letter-spacing:.6px }
.y-best-price{ font-size:28px; font-weight:900 }
.y-badge{ margin-left:8px; padding:4px 8px; background:#0c2a1f; color:#8ff3c4; border:1px solid #1d3a2e; border-radius:999px; font-size:12px }

.y-table{ width:100%; border-collapse:separate; border-spacing:0 10px }
.y-table th,.y-table td{ padding:10px 12px; text-align:left }
.y-table tbody tr{ background:#10131a; border:1px solid var(--line) }

.y-prose{ color:#cfd5e6 }
.y-footer{ border-top:1px solid var(--line); margin-top:40px }

.y-grid-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media(max-width:1200px){ .y-grid-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .y-grid-cards{ grid-template-columns:1fr; } }
.y-card-prod{ padding:0; overflow:hidden }
.y-thumb img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover }
.y-card-body{ padding:12px 14px }
.y-meta{ color:var(--mut) }

.y-grid-cat{ display:grid; grid-template-columns: 320px 1fr; gap:24px }
@media(max-width:1100px){ .y-grid-cat{ grid-template-columns:1fr } }
.y-filters{ position:sticky; top:82px; align-self:start }
.y-filter{ margin:10px 0 }
.y-filter label{ display:block; color:#c3c9d7; margin-bottom:4px }
.y-range{ display:flex; gap:8px }
.y-range input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a3142; background:#0f1117; color:#e8eaf0 }
.y-scroll{ max-height:240px; overflow:auto; border:1px dashed #253049; border-radius:12px; padding:8px }
.y-check{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px }

.y-toolbar{ display:flex; align-items:center; justify-content:space-between }
.y-sort select{ padding:8px 10px; border-radius:10px; border:1px solid #2a3142; background:#0f1117; color:#e8eaf0 }

.y-grid-catcards{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px }
@media(max-width:1000px){ .y-grid-catcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px){ .y-grid-catcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.y-catcard{
  display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line);
  border-radius:14px; background:var(--glass);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, border-color .15s ease;
}
.y-catcard:hover{ transform:translateY(-2px); border-color:#2b3955 }
.y-catcard span{ font-weight:700 } .y-catcard em{ color:var(--mut); font-style:normal }

.y-suggest{ position:absolute; top:52px; left:0; right:0; background:#12141a; border:1px solid var(--line); border-radius:12px; z-index:50; display:none; overflow:hidden }
.y-suggest a{ display:block; padding:10px 12px }
.y-suggest a:hover, .y-suggest a.is-active{ background:#0f1117 }

.y-install{ display:grid; place-items:center; min-height:100vh }
.y-install-box{ width:min(760px,92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px }
input,textarea{ width:100%; padding:10px; border-radius:10px; border:1px solid #2a3142; background:#0f1117; color:#e8eaf0; margin:8px 0 }
.y-err{ color:#ffb3b3 } .y-ok{ color:#9ef0c0 }