body {
    
    background: #0D0126; 
    color: #E0F7FA; 
    
    font-family: 'FlowBlock', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !important; 
    font-size: 16px;
    line-height: 1.5;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    
    background: rgba(13, 1, 38, 0.9); 
    
    border-bottom: 1px solid #4A148C; 
    
    backdrop-filter: blur(4px); 
}





.logo {
    width: 24px;
    height: 24px;
    
    background: #FF4081; 
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D0126; 
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    
    box-shadow: 0 0 8px #FF4081; 
}

.company-name {
    font-weight: 600;
    font-size: 16px;
    color: #C5CAE9; 
}

.status-type {
    font-size: 12px;
    color: #90A4AE; 
}

.header-right {
    
    font-size: 13px;
    color: #90A4AE;
}




.hero h1 {
    font-size: 48px;
    font-weight: 700;
    color: #E0F7FA; 
    margin-bottom: 16px;
    line-height: 1.2;
    
    text-shadow: 0 0 15px rgba(224, 247, 250, 0.7); 
}

.hero p {
    font-size: 18px;
    color: #A9D0D8; 
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-meta {
    
    padding: 24px 0;
    
    border-top: 1px solid #4A148C; 
    border-bottom: 1px solid #4A148C;
}



.meta-label {
    font-size: 12px;
    color: #90A4AE; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.meta-value {
    font-size: 16px;
    color: #E0F7FA; 
    font-weight: 500;
}



.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #E0F7FA;
    margin-bottom: 32px;
    padding-bottom: 16px;
    
    border-bottom: 1px solid #4A148C; 
    
    text-shadow: 0 0 5px rgba(224, 247, 250, 0.3);
}



.service {
    
    padding: 32px;
    
    border: 1px solid #6A1B9A; 
    border-radius: 8px;
    
    background: rgba(20, 10, 50, 0.7); 
    
    box-shadow: 0 0 10px rgba(106, 27, 154, 0.3);
}

.service:hover {
    
    background: rgba(30, 15, 60, 0.8);
    border: 1px solid #FF4081; 
    box-shadow: 0 0 20px rgba(255, 64, 129, 0.7);
    transition: all 0.2s ease;
}

.service-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: #FF4081; 
    margin-bottom: 20px;
}



.stat-row {
    
    padding-bottom: 12px;
    
    border-bottom: 1px dashed #4A148C; 
}

.stat-label {
    font-size: 13px;
    color: #90A4AE;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #E0F7FA;
}



.status-badge {
    
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.badge-operational {
    
    background: #00838F; 
    color: #E0F7FA;
    box-shadow: 0 0 8px #00BCD4; 
}

.badge-degraded {
    
    background: #FF4081; 
    color: #0D0126;
    box-shadow: 0 0 8px #FF80AB;
}

.badge-outage {
    
    background: #6A1B9A; 
    color: #E0F7FA;
    box-shadow: 0 0 8px #9C27B0;
}

.uptime-percentage {
    font-size: 48px;
    font-weight: 700;
    color: #E0F7FA;
    line-height: 1;
    text-shadow: 0 0 15px rgba(224, 247, 250, 0.7);
}

.uptime-label {
    font-size: 12px;
    color: #90A4AE;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chart-container {
    
    height: 200px;
    
    border: 1px solid #6A1B9A;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(106, 27, 154, 0.5);
}



.status-dot {
    
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); 
}

.dot-up {
    background: #00BCD4; 
    box-shadow: 0 0 8px #00BCD4;
}

.dot-degraded {
    background: #FF4081; 
    box-shadow: 0 0 8px #FF4081;
}

.dot-down {
    background: #FF80AB; 
    box-shadow: 0 0 8px #FF80AB;
}

footer {
    
    padding: 40px;
    
    border-top: 1px solid #4A148C; 
    font-size: 12px;
    color: #90A4AE;
    
}