*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0; background-color: #09090b; color: #f4f4f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    }
.container { max-width: 600px; width: 100%; padding: 40px 20px; text-align: center; }
/* Doppler Radar Unit Frame */
.radar-panel {
    position: relative; width: 280px; height: 280px; margin: 0 auto 35px; background-color: #18181b; border: 3px solid #27272a;
    border-radius: 50%; padding: 6px; box-shadow: 0 15px 35px rgba(0,0,0,0.7); overflow: hidden;  
    }
 .radar-screen { 
    width: 100%; height: 100%; background: #040405; border-radius: 50%;
    border: 1px solid #3f3f46; position: relative; overflow: hidden; 
    }
.radar-rings {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; height: 85%; border: 1px solid rgba(34, 197, 94, 0.15); border-radius: 50%;
    }
.radar-rings::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60%; height: 60%; border: 1px dashed rgba(34, 197, 94, 0.1); border-radius: 50%;
    }
/* Sweeper Animation */
.radar-sweep {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: radar-sweep-anim 4s linear infinite;
    background: conic-gradient(from 0deg, rgba(34, 197, 94, 0.2) 0deg, rgba(34, 197, 94, 0) 90deg);  border-radius: 50%;    
    }
@keyframes radar-sweep-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }
/* Flashing warning overlay over severe cell */
.warning-tag {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background-color: #dc2626; color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 2px; padding: 4px 10px; 
	border-radius: 2px; animation: flash 1s steps(2, start) infinite; z-index: 10;
    }
@keyframes flash { to { opacity: 0.3; } }
.error-code { font-size: 48px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #ef4444; margin-bottom: 15px; }
h1 { font-size: 32px; font-weight: 600; margin: 0 0 15px 0; color: #ffffff; }
p { font-size: 16px; line-height: 1.6; color: #a1a1aa; margin: 0 0 35px 0; }
.btn {
    display: inline-block; padding: 5px 5px; font-size: 14px; font-weight: 600; border-radius: 4px; width: 150px; height: 50px;
    text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none;
    background-color: #22c55e; color: #040405; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
	display: flex; align-items: center; justify-content:center;
    }
.btn:hover { background-color: #16a34a; box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4); }
.secondary-link { display: block; margin-top: 25px; font-size: 14px; color: #52525b; text-decoration: none; }
.secondary-link:hover { color: #a1a1aa; }
.table1 {  margin: 0px auto; }
.logo { width:127px; height:100px; margin:0; padding:0; background-color: #7f7f7f; }
.radar-svg-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3;
}

.echo-green {
    opacity: 0.4;
    filter: blur(3px);
}

.echo-yellow {
    opacity: 0.6;
    filter: blur(2px);
}

.echo-magenta {
    opacity: 0.8;
}