@charset "utf-8";

:root { --sf-bg-color: #0b0e14; --sf-surface: rgba(255, 255, 255, 0.03); --sf-border: rgba(255, 255, 255, 0.08); --sf-text-primary: #ffffff; --sf-text-secondary: #9aa0a6; --sf-cyan: #00e5ff; --sf-magenta: #f50057; }

* { box-sizing: border-box; margin: 0px; padding: 0px; }

body { background-color: var(--sf-bg-color); color: var(--sf-text-primary); font-family: Outfit, sans-serif; min-height: 100vh; overflow-x: hidden; }

.storefront-layout { position: relative; min-height: 100vh; padding: 3rem 2rem; overflow: hidden; }

.glow-1, .glow-2 { position: absolute; width: 800px; height: 800px; border-radius: 50%; filter: blur(180px); z-index: 0; opacity: 0.3; pointer-events: none; }

.glow-1 { top: -300px; left: -200px; background: radial-gradient(circle, rgba(0, 229, 255, 0.4) 0%, transparent 70%); }

.glow-2 { bottom: -300px; right: -200px; background: radial-gradient(circle, rgba(245, 0, 87, 0.3) 0%, transparent 70%); }

.sf-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; }

.sf-logo { height: 60px; margin-bottom: 1.5rem; }

.sf-title { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 4.5rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(165, 180, 252) 100%) text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }

.sf-logo-inline { height: 1em; }

.sf-subtitle { font-size: 1.5rem; color: var(--sf-text-secondary); font-weight: 300; }

.sf-container { max-width: 1400px; margin: 0px auto; position: relative; z-index: 1; }

.sf-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 20px; backdrop-filter: blur(20px); padding: 1.5rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 32px; }

.card-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--sf-text-primary); display: flex; align-items: center; }

.card-title::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: var(--sf-cyan); border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px var(--sf-cyan); }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }

.metric-card { display: flex; flex-direction: column; justify-content: center; transition: transform 0.3s, border-color 0.3s; position: relative; overflow: hidden; }

.metric-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }

.metric-card::after { content: ""; position: absolute; bottom: 0px; left: 0px; height: 3px; width: 100%; background: linear-gradient(90deg, var(--sf-cyan), transparent); opacity: 0.5; }

.metric-card:nth-child(2n)::after { background: linear-gradient(90deg, var(--sf-magenta), transparent); }

.metric-label { font-size: 1.2rem; color: var(--sf-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; }

.metric-value { font-size: 3.5rem; font-weight: 700; color: var(--sf-text-primary); text-shadow: rgba(255, 255, 255, 0.2) 0px 0px 20px; }

.main-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }

.map-container { display: flex; flex-direction: column; }

.map-view { flex-grow: 1; min-height: 500px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); }

.leaflet-container { background: rgb(0, 0, 0); font-family: Outfit, sans-serif; }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { border: 1px solid var(--sf-border); backdrop-filter: blur(10px); background: rgba(11, 14, 20, 0.9) !important; color: rgb(255, 255, 255) !important; }

.leaflet-container a.leaflet-popup-close-button { color: rgb(204, 204, 204); }

.feed-container { display: flex; flex-direction: column; }

.activity-feed { flex-grow: 1; overflow-y: auto; max-height: 500px; padding-right: 0.5rem; display: flex; flex-direction: column; gap: 1rem; }

.activity-feed::-webkit-scrollbar { width: 6px; }

.activity-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

.feed-item { background: rgba(0, 0, 0, 0.2); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--sf-cyan); padding: 1rem; border-radius: 8px; transition: transform 0.2s, background 0.2s; animation: 0.3s ease 0s 1 normal forwards running slideIn; }

.feed-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(4px); }

.feed-item.type-magenta { border-left-color: var(--sf-magenta); }

.feed-time { font-size: 1rem; color: var(--sf-text-secondary); margin-bottom: 0.4rem; }

.feed-text { font-size: 1.15rem; color: var(--sf-text-primary); line-height: 1.4; }

.feed-text strong { color: rgb(255, 255, 255); font-weight: 600; }

@keyframes slideIn { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

@media (max-width: 1024px) {
  .main-content-grid { grid-template-columns: 1fr; }
  .map-view { min-height: 400px; }
}

.sonic-card::after { background: linear-gradient(90deg, rgb(255, 215, 0), transparent); }

.sonic-card .metric-value { color: rgb(255, 215, 0); text-shadow: rgba(255, 215, 0, 0.4) 0px 0px 20px; }

.sonic-icon { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-image: url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23ffd700\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/><path d=\"M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z\"/><path d=\"M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>"); opacity: 0.3; animation: 2s ease 0s infinite normal none running pulse-sonic; }

@keyframes pulse-sonic { 
  0% { transform: translateY(-50%) scale(1); opacity: 0.3; }
  50% { transform: translateY(-50%) scale(1.1); opacity: 0.8; }
  100% { transform: translateY(-50%) scale(1); opacity: 0.3; }
}

.feed-item.type-gold { border-left-color: rgb(255, 215, 0); }