:root{
	--accent:#ff3b3b; /* red accent */
	--bg-1:#030305; /* very dark/near black */
	--bg-2:#070709; /* slightly lighter black */
	--card:#0a0a0a; /* card background (black) */
	--muted:rgba(180,180,190,0.6); /* gray highlight */
	--fg:#f3f3f4; /* foreground text */
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%);color:var(--fg);margin:0;padding:24px}

.container{display:flex;gap:20px;align-items:flex-start}
.sidebar{width:260px;background:linear-gradient(180deg,#040404 0%,#070707 100%);border-radius:12px;padding:18px;box-shadow:0 6px 28px rgba(0,0,0,0.8)}
.brand h2{margin:0;font-size:1.25rem}
.brand p{margin:6px 0 12px 0;color:var(--muted);font-size:0.9rem}
.sidebar-search input{width:100%;padding:8px;border-radius:8px;background:#061425;border:1px solid rgba(255,255,255,0.04);color:var(--fg)}
.categories{margin-top:16px}
.categories h3{margin:0 0 8px 0;font-size:0.95rem}
.categories ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:8px}
.categories li{background:#071016;padding:8px;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,0.02);display:flex;justify-content:space-between;align-items:center}
.categories li:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.categories li .count{font-size:0.85rem;color:var(--muted)}
.categories li.active{background:linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));border:1px solid rgba(80,80,80,0.5);color:var(--fg)}
.legend{margin-top:14px;color:var(--muted);font-size:0.88rem}

.content{flex:1}
.content-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.filters select{padding:8px;border-radius:8px;background:#061425;color:var(--fg);border:1px solid rgba(255,255,255,0.03)}
.hide-vis{position:absolute;left:-9999px}
.counts{color:var(--muted)}

.filters .chip{background:#0b1626;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);color:var(--fg);cursor:pointer}
.filters .chip:hover{transform:translateY(-2px)}

.mode-toggle{display:inline-flex;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.01)}
.mode-toggle .mode{padding:8px 12px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.mode-toggle .mode.active{background:linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));color:var(--accent)}
.mode-toggle .mode:focus{outline:2px solid rgba(255,59,59,0.12)}

.item-filter{display:none;gap:8px;margin-left:12px;align-items:center}
.item-filter.visible{display:inline-flex}
.item-filter .ifilter{padding:6px 10px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.item-filter .ifilter.active{background:linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25));color:var(--accent)}
.item-filter .ifilter:focus{outline:2px solid rgba(255,59,59,0.08)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:4px}
.shop-card{position:relative;background:linear-gradient(180deg,#070707,#040404);padding:12px 12px 56px 12px;border-radius:12px;overflow:hidden;box-shadow:0 8px 36px rgba(0,0,0,0.8);display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease}
.shop-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(4,10,18,0.7)}
.shop-image{width:100%;height:150px;object-fit:cover;background:#040404}
.shop-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.shop-top{display:flex;justify-content:space-between;align-items:start;gap:8px}
.shop-name{margin:0;font-size:1.05rem}
.shop-desc{margin:0;color:var(--muted);font-size:0.92rem}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:999px;font-size:0.78rem;color:var(--muted)}
.badge.more-badge{background:rgba(255,59,59,0.08);color:var(--accent);font-weight:700;cursor:pointer}
.price-tag{background:var(--accent);color:white;padding:6px 8px;border-radius:8px;font-size:0.85rem}
.shop-meta{font-size:0.85rem;color:var(--muted)}
.details-btn{position:absolute;bottom:12px;right:12px;padding:8px 10px;border:0;background:var(--accent);color:#fff;border-radius:8px;cursor:pointer}

.finder{margin-top:22px}
.result-shop{background:#070a0b;padding:10px;border-radius:8px;margin-bottom:8px}
.item-count{font-size:0.9rem;color:var(--muted);margin-left:8px;font-weight:600}

#modal{position:fixed}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.85));z-index:60}
.modal.hidden{display:none}
.modal-body{background:linear-gradient(180deg,#070707,#040404);padding:18px;border-radius:12px;max-width:960px;width:94%;position:relative;color:var(--fg);box-shadow:0 12px 48px rgba(0,0,0,0.85);
	/* make modal content scrollable when it's too tall */
	max-height: calc(100vh - 120px);
	overflow: auto;
}

/* prevent background page from scrolling while modal is open */
body.modal-open{overflow:hidden;height:100%;}
#close-modal{position:absolute;right:12px;top:12px;background:transparent;border:0;color:var(--fg);font-size:1.4rem;cursor:pointer}
.modal-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
.modal-grid img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.modal-side{background:#061427;padding:12px;border-radius:8px}

pre{white-space:pre-wrap;background:#04111a;padding:8px;border-radius:6px}

@media (max-width:900px){
	.container{flex-direction:column}
	.sidebar{width:100%}
	.modal-grid{grid-template-columns:1fr}
}