/* Customize the theme here. */
:root { --background:#090f18; --panel:#101a29; --border:#24344a; --blue:#087fff; --text:#eef4ff; --muted:#a2b0c5; color-scheme:dark; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(ellipse at top right,#10274455,transparent 60%),var(--background); color:var(--text); font-family:Arial,sans-serif; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; border:0; color:inherit; } [hidden] { display:none!important; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #71bcff; outline-offset:3px; }
.topbar { height:68px; display:flex; align-items:center; gap:32px; padding:0 24px; border-bottom:1px solid var(--border); background:#0b131f; position:sticky; top:0; z-index:10; }.brand { font-size:24px; font-weight:800; white-space:nowrap; letter-spacing:-1px; }.brand b { display:inline-grid; place-items:center; background:var(--blue); border-radius:7px; width:30px; height:32px; transform:rotate(-8deg); margin-right:6px; }.topbar nav { display:flex; gap:15px; font-size:14px; font-weight:600; }.topbar nav a { padding:14px 20px; border-radius:9px; }.topbar nav .active { background:linear-gradient(#193a65,#104379); box-shadow:inset 0 -2px var(--blue); }
#catalog-search { flex:1; max-width:600px; display:flex; align-items:center; border:1px solid #40536d; background:#131e2e; border-radius:9px; margin:0 auto; }#catalog-search span { font-size:27px; padding-left:13px; }#item-search { width:100%; min-width:0; color:white; background:none; border:0; padding:12px; font-size:14px; }.account-link { font-size:13px; color:var(--muted); white-space:nowrap; }
.sidebar { position:fixed; top:68px; bottom:0; left:0; width:205px; padding:25px 12px; border-right:1px solid var(--border); background:#0b131d; }.sidebar>.eyebrow { margin:0 15px 25px; }.sidebar nav a,.sidebar nav button { display:flex; align-items:center; gap:17px; width:100%; padding:15px; margin-bottom:10px; border-radius:7px; font-size:21px; text-align:left; background:transparent; }.sidebar nav span { font-size:14px; font-weight:600; }.sidebar nav .active { background:linear-gradient(90deg,#132c4a,#163b67); border-right:3px solid var(--blue); }.sidebar-note { margin:45px 10px; padding:18px; background:#101d2d; border:1px solid #263b55; border-radius:12px; font-size:12px; line-height:1.7; color:var(--muted); }.sidebar-note strong { color:white; }.sidebar-note small { color:#69b6ff; font-size:10px; }
main { margin-left:205px; margin-right:230px; padding:0 24px 20px; }.hero { position:relative; height:210px; overflow:hidden; margin:0 -24px; }.hero img { position:absolute; width:100%; height:100%; object-fit:cover; }.hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#090f18 10%,#090f18a0 55%,transparent),linear-gradient(0deg,#090f18,transparent 45%); }.hero-copy { position:relative; z-index:1; padding:32px 24px; }.hero h1 { font-size:42px; margin:10px 0; letter-spacing:-1px; }.hero p { font-size:19px; margin:12px 0; }.hero small { font-size:13px; color:var(--muted); }.eyebrow { color:#8bb7ec; font-size:10px; letter-spacing:1.7px; font-weight:700; }
.category-tabs { display:flex; gap:10px; margin:4px 0 26px; overflow-x:auto; padding-bottom:4px; }.category-tabs button { background:#172332; padding:12px 24px; border:1px solid #283c54; border-radius:12px; white-space:nowrap; font-size:12px; font-weight:600; }.category-tabs button.active,.primary { background:var(--blue); color:white; box-shadow:0 4px 20px #007fff30; }
.collections { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:30px; }.collection { display:flex; position:relative; height:110px; text-align:left; border-radius:12px; overflow:hidden; padding:18px; border:1px solid #ffffff15; }.collection>span { z-index:1; }.collection strong { display:block; font-size:15px; }.collection small { display:block; font-size:11px; margin-top:7px; color:#c3d3e7; }.collection b { display:inline-block; margin-top:12px; padding:2px 7px; background:#ffffff20; border-radius:5px; }.collection img { position:absolute; right:-22px; top:-5px; width:135px; height:130px; object-fit:cover; opacity:.7; }.blue { background:linear-gradient(110deg,#263b68,#132038); }.teal { background:linear-gradient(110deg,#164438,#112730); }.violet { background:linear-gradient(110deg,#363552,#1a223c); }.amber { background:linear-gradient(110deg,#594334,#262434); }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:20px 0 17px; }.section-title h2,.popular h2 { font-size:23px; margin:0; letter-spacing:-.4px; }.section-title>span { font-size:12px; color:var(--muted); }.catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 16px; }.item-card { min-width:0; position:relative; }.item-open { display:block; width:100%; padding:0; background:none; text-align:left; }.item-preview { width:100%; aspect-ratio:1.12; background:linear-gradient(135deg,#202b3a,#101923); border-radius:10px; object-fit:cover; border:1px solid #293747; }.item-open:hover .item-preview { border-color:#5dafff; }.item-card h3 { font-size:14px; margin:10px 0 5px; }.item-card p { font-size:11px; color:#91a4be; margin:0 0 9px; }.price { font-size:12px; font-weight:700; color:#d7e7fc; }.favorite { position:absolute; top:8px; right:8px; background:#101926b0; width:29px; height:29px; border-radius:50%; font-size:20px; }.favorite[aria-pressed=true] { color:#ff8fb4; }.popular { margin-top:34px; }#popular-categories { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:17px; }#popular-categories button { background:#172332; border:1px solid #2b3e55; border-radius:10px; padding:18px; text-align:left; font-weight:600; }#popular-categories small { display:block; color:#a3b9d4; margin-top:8px; font-weight:400; }footer { color:#637c9a; font-size:10px; display:flex; justify-content:space-between; gap:15px; padding:36px 0 10px; }
.filters { position:fixed; width:230px; right:0; top:68px; bottom:0; overflow-y:auto; padding:24px 20px; border-left:1px solid var(--border); background:#0b131d; }.filter-heading { display:flex; align-items:center; justify-content:space-between; }.filter-heading h2 { font-size:18px; margin:0; }.filter-heading button { background:none; color:#78bfff; font-size:11px; }.filters label { display:block; font-size:13px; font-weight:600; margin:24px 0 10px; }.filters select { width:100%; padding:10px; border:1px solid #334b66; background:#111c2a; color:var(--text); border-radius:7px; font-size:12px; }.filters .checkbox { display:flex; gap:9px; align-items:center; font-size:12px; font-weight:400; }.checkbox input { accent-color:var(--blue); width:16px; height:16px; }.filter-info { border-top:1px solid var(--border); margin-top:30px; padding-top:25px; }.filter-info h3 { font-size:18px; line-height:1.4; }.filter-info p { color:var(--muted); font-size:12px; line-height:1.8; }#empty-results { padding:35px; background:var(--panel); border-radius:12px; color:var(--muted); }
dialog { background:var(--panel); color:var(--text); border:1px solid #3d5878; border-radius:16px; padding:28px; width:min(450px,92vw); max-height:90vh; overflow:auto; }dialog::backdrop { background:#050a12d9; }#close-item { position:absolute; top:10px; right:14px; background:none; font-size:28px; }#detail-image { width:100%; aspect-ratio:1.3; object-fit:cover; border-radius:10px; margin-bottom:22px; }dialog p { color:var(--muted); line-height:1.7; font-size:13px; }.free-label { color:#66d8af; font-size:12px; }.primary { width:100%; padding:13px; border-radius:8px; margin-top:12px; font-weight:600; }
@media(min-width:1650px) { .catalog-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1200px) { .sidebar { width:170px; }main { margin-left:170px; margin-right:210px; }.filters { width:210px; }.collections { grid-template-columns:repeat(2,1fr); }.catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.topbar { gap:18px; }.account-link { display:none; } }
@media(max-width:900px) { .filters { position:static; width:auto; margin-left:170px; border:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }.filters label { margin:0; }.filters select { width:160px; }.filter-info { display:none; }main { margin-right:0; }.topbar nav { display:none; }.hero small { display:none; } }
@media(max-width:600px) { .topbar { padding:0 14px; gap:14px; height:62px; }.brand { font-size:0; }.brand b { font-size:22px; }.sidebar { position:static; width:100%; padding:8px; border-bottom:1px solid var(--border); }.sidebar nav { display:flex; }.sidebar nav a,.sidebar nav button { justify-content:center; margin:0; padding:10px; gap:8px; }.sidebar nav span { font-size:12px; }.sidebar>.eyebrow,.sidebar-note { display:none; }main { margin:0; padding:0 16px 20px; }.hero { margin:0 -16px; height:195px; }.hero h1 { font-size:34px; }.hero-copy { padding:26px 16px; }.hero p { font-size:16px; }.category-tabs button { padding:10px 16px; }.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }.collection { padding:13px; }.collection strong { font-size:13px; }.collection small { font-size:10px; }.collection img { right:-38px; opacity:.45; }.section-title h2 { font-size:20px; }.filters { margin:0 16px 20px; padding:18px; }.filters .filter-heading { width:100%; }.filters select { flex:1; min-width:100px; }footer { flex-direction:column; } }