/* MAIN BOX */
.shop-box{
max-width:1200px;
margin:60px auto;
padding:20px;
background:#111;
border-radius:15px;
border:2px solid rgba(30,144,255,0.25);
box-shadow:0 0 20px rgba(30,144,255,0.15);
animation:glow 2.5s infinite alternate;
}

@keyframes glow{
0%{box-shadow:0 0 10px rgba(30,144,255,0.2);}
50%{box-shadow:0 0 25px rgba(30,144,255,0.5);}
100%{box-shadow:0 0 15px rgba(30,144,255,0.3);}
}

h1{text-align:center;margin-bottom:20px}

/* STATS */
.stats{
display:flex;
justify-content:space-between;
text-align:center;
margin-bottom:10px;
}
.stats div{flex:1}
.stats h3{margin:0;font-size:1.5rem}

.progress{
height:6px;
background:#222;
border-radius:5px;
overflow:hidden;
}
#bar{height:100%;width:0;background:var(--accent)}

/* HEADER */
.header{
text-align:center;
padding:20px;
}
.header h1{
color:var(--primary);
font-size:28px;
}

/* GRID */
.container{padding:20px}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:15px;
}

/* BOX */
.box{
background:var(--box-dark);
border:1px solid rgba(30,144,255,0.4);
border-radius:14px;
padding:15px;
position:relative;
box-shadow:0 0 10px rgba(30,144,255,0.1);
}
.box h3{
margin:0 0 10px;
color:var(--primary);
font-size:15px;
}

/* LIVE STATS */
.live-stats{
display:flex;
justify-content:space-between;
text-align:center;
margin-bottom:10px;
}
.live-stats div{flex:1}
.live-stats h2{
margin:0;
color:var(--primary);
}

/* SMTP */
.server{margin-bottom:10px;font-size:13px}
.bar{height:6px;background:#222;border-radius:5px;overflow:hidden}
.fill{height:100%;width:0;background:var(--accent)}

/* SMTP ENGINE */
.smtp-bar{
height:8px;
background:#222;
border-radius:5px;
overflow:hidden;
margin-top:10px;
}
.smtp-fill{
height:100%;
width:0%;
background:var(--primary);
}

/* PULSE */
.pulse-line{
height:6px;
background:#222;
border-radius:5px;
margin-top:10px;
position:relative;
overflow:hidden;
}
.pulse-dot{
position:absolute;
width:10px;
height:10px;
background:var(--accent);
border-radius:50%;
animation:move 1.5s linear infinite;
}
@keyframes move{
0%{left:0}
100%{left:100%}
}

/* STATUS */
.status-box div{
padding:6px;
border-bottom:1px solid #1f2937;
font-size:13px;
color:var(--primary);
}

/* INBOX */
.inbox{
height:280px;
overflow:auto;
background:#0b1220;
border-radius:10px;
padding:10px;
font-size:12px;
}
.mail{
padding:6px;
border-bottom:1px solid #1f2937;
}

/* MAP */
.map{
height:320px;
position:relative;
background:#07101f;
border-radius:12px;
overflow:hidden;
}
.map svg{
width:100%;
height:100%;
opacity:0.25;
}
.map path{
stroke:var(--primary);
}

.dot{
position:absolute;
width:10px;
height:10px;
background:var(--accent);
border-radius:50%;
animation:pop 2s ease-in-out;
}
.label{
position:absolute;
font-size:11px;
color:var(--primary);
animation:fade 2s ease-in-out;
}

@keyframes pop{
0%{transform:scale(0);opacity:0}
50%{opacity:1}
100%{transform:scale(2);opacity:0}
}
@keyframes fade{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}

/* BUTTON */
.btn{
display:block;
margin:40px auto 0 auto;
text-align:center;
padding:12px;
background:var(--primary);
color:#fff;
font-weight:bold;
border-radius:8px;
text-decoration:none;
max-width:250px;
transition:0.3s;
}
.btn:hover{
background:var(--accent);
}

/* SMTP WRAPPER */
.smtp-wrapper{
border:2px solid rgba(30,144,255,0.3);
border-radius:12px;
animation:glowSMTP 2.5s infinite alternate;
transition:0.3s;
}
.smtp-wrapper:hover{
box-shadow:0 0 25px rgba(30,144,255,0.6);
transform:translateY(-3px);
}

@keyframes glowSMTP{
0%{
border-color:rgba(30,144,255,0.2);
box-shadow:0 0 8px rgba(30,144,255,0.2);
}
50%{
border-color:rgba(30,144,255,0.5);
box-shadow:0 0 18px rgba(30,144,255,0.4);
}
100%{
border-color:rgba(30,144,255,0.8);
box-shadow:0 0 30px rgba(30,144,255,0.7);
}
}

/* BADGE */
.badge-new{
position:absolute;
top:10px;
right:10px;
background:var(--accent);
color:#001;
font-size:11px;
font-weight:bold;
padding:4px 8px;
border-radius:6px;
animation:pulseBadge 1.5s infinite alternate;
z-index:5;
}

@keyframes pulseBadge{
0%{transform:scale(1);box-shadow:0 0 5px var(--glow);}
100%{transform:scale(1.1);box-shadow:0 0 12px var(--glow);}
}

/* REVEAL */
.reveal-btn{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
pointer-events:none;
}
.reveal-btn.show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* SOFT PULSE */
.pulse-soft{
animation:pulseSoft 2s infinite;
}
@keyframes pulseSoft{
0%{transform:scale(1);opacity:0.9;}
50%{transform:scale(1.02);opacity:1;}
100%{transform:scale(1);opacity:0.9;}
}