:root{ --bg:#111;--surface:#1a1a1a;--surface2:#222;--border:#2e2e2e; --orange:#ff6a00;--orange2:#ff9900;--orange-dim:#7a3200;--orange-glow:rgba(255,106,0,0.15); --text:#f5e6d0;--text-dim:#8a7a6a;--text-muted:#3a3028; --diamond:#4dd9e8;--dg:rgba(77,217,232,0.2); --danger:#e74c3c;--success:#2ecc71;--r:8px; }
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh; overflow-x:hidden;}
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; }
@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:11px 20px; background:rgba(17,17,17,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.mc-title{font-family:'Press Start 2P',monospace;font-size:0.6rem;color:var(--orange);text-shadow:0 0 10px var(--orange);}
.mc-sub{font-size:0.73rem;color:var(--text-dim);margin-top:2px;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:9px;}
.user-pill{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:6px 12px;font-size:0.8rem;font-weight:700;color:var(--text-dim); display:flex; align-items:center; gap:6px; text-decoration:none; transition:0.15s;}
.user-pill:hover{border-color:var(--orange);}
.topbar-link{background:transparent;border:1px solid var(--border);border-radius:var(--r); padding:7px 12px;color:var(--text-dim);font-size:0.78rem;font-weight:700; cursor:pointer;transition:0.15s;text-decoration:none;font-family:'Nunito',sans-serif; white-space:nowrap;}
.topbar-link:hover{border-color:var(--orange);color:var(--orange);}

.bell-btn{position:relative;cursor:pointer;font-size:1.3rem;text-decoration:none;}
.bell-badge{position:absolute;top:-5px;right:-8px;background:var(--danger);color:#fff;font-size:0.5rem;font-family:'Press Start 2P',monospace;padding:3px 5px;border-radius:10px;display:none;}

.main-container { position:relative; z-index:1; max-width:1000px; margin:30px auto; padding:0 20px; }
.page-title { font-family:'Press Start 2P', monospace; font-size:1.1rem; color:var(--text); margin-bottom:10px; text-transform:uppercase; }
.subtitle { font-size:0.9rem; color:var(--text-dim); margin-bottom:30px; font-weight:700; }

.mall-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:15px; }
.mall-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.mall-card:hover { transform:translateY(-4px); border-color:var(--orange); box-shadow:0 12px 25px rgba(0,0,0,0.5), 0 0 15px var(--orange-glow); }
.mall-head { display:flex; align-items:center; justify-content:space-between; }
.mall-name { font-family:'Press Start 2P', monospace; font-size:0.65rem; color:var(--orange); line-height:1.4; }
.mall-owner { display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:800; color:var(--text-main); background:var(--surface2); padding:5px 8px; border-radius:5px; border:1px solid var(--border); }
.mall-desc { font-size:0.85rem; color:var(--text-dim); line-height:1.4; margin-top:5px; flex:1; }
.mall-meta { font-size:0.75rem; color:var(--text-muted); font-weight:800; border-top:1px solid var(--border); padding-top:10px; margin-top:5px; display:flex; justify-content:space-between;}

#storefront { display:none; }
.store-header { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.sh-title { font-family:'Press Start 2P', monospace; font-size:0.8rem; color:var(--orange); margin-bottom:8px; }
.sh-desc { font-size:0.9rem; color:var(--text-dim); font-weight:700; }
.btn-back { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:8px 15px; color:var(--text); font-weight:800; font-family:'Nunito',sans-serif; cursor:pointer; transition:0.1s; margin-bottom:15px; }
.btn-back:hover { border-color:var(--orange); color:var(--orange); }

.layout{ display:flex; gap:20px; align-items:flex-start; }
.sidebar{width:220px;flex-shrink:0;}
.main-view{flex:1;min-width:0;}

.sidebar-title{font-family:'Press Start 2P',monospace;font-size:0.44rem;color:var(--text-dim); text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);}
.cat-btn{display:block;width:100%;text-align:left;background:transparent;border:none; border-radius:var(--r);border-left:3px solid transparent;padding:10px 12px;color:var(--text-dim); font-family:'Nunito',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer; transition:all 0.1s;margin-bottom:4px;}
.cat-btn:hover,.cat-btn.active{background:var(--orange-glow);color:var(--orange);}
.cat-btn.active{border-left-color:var(--orange);}

.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;}
.item-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative; box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.item-name{font-size:0.85rem;font-weight:800;text-align:center;color:var(--text);line-height:1.2;}
.item-price{display:flex;align-items:center;gap:4px;font-family:'Press Start 2P',monospace;font-size:0.5rem;color:var(--diamond);}

.item-card.oos { border-color:var(--danger); opacity:0.6; }
.oos-tag { position:absolute; top:-8px; background:var(--danger); color:#fff; font-size:0.65rem; font-weight:800; padding:3px 8px; border-radius:10px; text-transform:uppercase; box-shadow:0 0 10px rgba(231,76,60,0.4); }

@media (max-width: 768px) {
.topbar { flex-direction: column; gap: 12px; padding: 15px; text-align: center; }
.topbar-right { width: 100%; justify-content: center; flex-wrap: wrap; }
.main-container { padding: 10px; margin: 20px auto; }
.mall-grid { grid-template-columns: 1fr; }
.store-header { flex-direction: column; align-items: flex-start; gap: 15px; text-align: left; }
.layout { flex-direction: column; gap: 10px; }
.sidebar { width: 100%; }
.sidebar-title { display: none; }
#sf-cats { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; white-space: nowrap; margin: 0 -10px; width: calc(100% + 20px); padding-left: 10px; padding-right: 10px; }
.cat-btn { width: auto; margin-bottom: 0; padding: 8px 15px; border-left: none; border-bottom: 3px solid transparent; }
.cat-btn.active { border-left-color: transparent; border-bottom-color: var(--orange); }
.item-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
::-webkit-scrollbar{height:4px; width:5px;}::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}