* {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
::placeholder { color: #8ca4b3; }
body {
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(175deg, #0b132b 5%, #1c2541 60%, #3a506b 95%);
display: flex;
flex-direction: column;
}
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #00c9a7; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #00a98f; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
@keyframes buttonGlow {
0%, 100% {
box-shadow: 0 0 5px var(--glow-color-start), 0 0 10px var(--glow-color-start), 0 0 15px var(--glow-color-end), 0 0 20px var(--glow-color-end);
transform: scale(1);
}
50% {
box-shadow: 0 0 10px var(--glow-color-start), 0 0 20px var(--glow-color-start), 0 0 30px var(--glow-color-end), 0 0 40px var(--glow-color-end);
transform: scale(1.03);
}
}
@keyframes pingPulse {
0% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 0.85; }
}
.ping-value-animated {
animation: pingPulse 0.5s ease-out;
}
#splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #0A0F1E;
z-index: 100000;
opacity: 1;
transition: opacity 0.7s ease-out, visibility 0.7s ease-out;
visibility: visible;
}
#splash-screen.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.splash-content {
text-align: center;
}
.splash-logo {
width: 80px;
height: 80px;
margin-bottom: 25px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300c9a7'%3E%3Cpath 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 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: logoPulse 1.5s infinite ease-in-out;
}
@keyframes logoPulse {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
.splash-title-main {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 15px;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(0, 201, 167, 0.6), 0 0 20px rgba(0, 201, 167, 0.4);
}
.splash-loader-dots {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.splash-loader-dots div {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #00c9a7;
border-radius: 50%;
animation: dotFlashing 1.4s infinite linear alternate;
}
.splash-loader-dots div:nth-child(1) { animation-delay: -0.4s; }
.splash-loader-dots div:nth-child(2) { animation-delay: -0.2s; }
.splash-loader-dots div:nth-child(3) { animation-delay: 0s; }
@keyframes dotFlashing {
0% { background-color: #00c9a7; transform: scale(1); }
50%, 100% { background-color: rgba(0, 201, 167, 0.3); transform: scale(0.7); }
}
.network-activity-card .chart-container {
width: 100%;
height: clamp(120px, 18vh, 150px); /* সামঞ্জস্যপূর্ণ উচ্চতা */
margin-bottom: 8px;
}
.network-activity-card .connection-time {
font-size: 14px;
font-weight: 600;
color: #D3D3D3;
margin-bottom: 8px;
text-align: center;
}
.network-activity-card .stats-display {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 11px;
margin-bottom: 6px;
color: #a8b2d1;
}
.network-activity-card .stats-display span {
font-weight: 500;
text-align: center;
display: flex;
align-items: center;
}
.network-activity-card .stats-display .value {
color: #e0e6f0;
font-weight: 600;
}
.app-title-top-bar {
font-family: 'Orbitron', sans-serif;
font-size: clamp(15px, 4vw, 18px);
font-weight: 700;
color: #FFFFFF;
text-shadow: 0 0 5px rgba(220, 235, 255, 0.7),
0 0 10px rgba(200, 220, 255, 0.4);
white-space: nowrap;
pointer-events: none;
text-align: center;
flex-grow: 1;
}