.smtp-wrapper{--primary:#1E90FF;--accent:#00CFFF;--glow:rgba(30,144,255,.5);--box-dark:#0f172a;position:relative;}
/* MAIN BOX */
.smtp-wrapper .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);}
}

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

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

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

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

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

/* BOX */
.smtp-wrapper .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);
}
.smtp-wrapper .box h3{
margin:0 0 10px;
color:var(--primary);
font-size:15px;
}

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

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

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

/* PULSE */
.smtp-wrapper .pulse-line{
height:6px;
background:#222;
border-radius:5px;
margin-top:10px;
position:relative;
overflow:hidden;
}
.smtp-wrapper .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 */
.smtp-wrapper .status-box div{
padding:6px;
border-bottom:1px solid #1f2937;
font-size:13px;
color:var(--primary);
}

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

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

.smtp-wrapper .dot{
position:absolute;
width:10px;
height:10px;
background:var(--accent);
border-radius:50%;
animation:pop 2s ease-in-out;
}
.smtp-wrapper .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 */
.smtp-wrapper .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;
}
.smtp-wrapper .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 */
.smtp-wrapper .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 */
.smtp-wrapper .reveal-btn{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
pointer-events:none;
}
.smtp-wrapper .reveal-btn.show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* SOFT PULSE */
.smtp-wrapper .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;}
}