/* css/status.css */
.control-room-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 40px 20px;
    background-color: #050505; /* خلفية مظلمة جداً */
}

.crt-monitor {
    background: #111;
    padding: 20px;
    border-radius: 15px;
    border: 4px solid #222;
    box-shadow: 0 0 50px rgba(0, 255, 0, 0.15);
    width: 100%;
    max-width: 700px;
}

.screen {
    background: #000;
    border-radius: 10px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace; /* خط الهاكرز */
    color: #0f0;
    box-shadow: inset 0 0 30px rgba(0,255,0,0.3);
}

/* تأثير خطوط الشاشة القديمة (Scanlines) */
.screen::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}

.glitch-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: 900;
    text-shadow: 2px 0 red, -2px 0 blue;
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

.terminal p {
    font-size: 1.3rem;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 255, 0, 0.3);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terminal .label { color: #0a0; }

.terminal .value { 
    font-weight: bold; 
    color: #fff; 
    text-shadow: 0 0 5px #fff; 
}

.terminal .value.online { 
    color: #0f0; 
    text-shadow: 0 0 10px #0f0; 
    animation: pulse 1.5s infinite;
}

.cursor {
    display: inline-block;
    width: 15px;
    height: 25px;
    background-color: #0f0;
    animation: blink 1s step-end infinite;
    margin-top: 20px;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; text-shadow: 0 0 20px #0f0; } 100% { opacity: 0.8; } }
@keyframes glitch-anim {
    0% { text-shadow: 2px 0 red, -2px 0 blue; transform: translate(0); }
    20% { text-shadow: -2px 0 red, 2px 0 blue; transform: translate(-2px, 1px); }
    40% { text-shadow: 2px 0 red, -2px 0 blue; transform: translate(2px, -1px); }
    60% { text-shadow: -2px 0 red, 2px 0 blue; transform: translate(-2px, 2px); }
    80% { text-shadow: 2px 0 red, -2px 0 blue; transform: translate(2px, -2px); }
    100% { text-shadow: -2px 0 red, 2px 0 blue; transform: translate(0); }
}