@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&family=Roboto+Mono:wght@400;700&display=swap');

        :root {
            --yellow-construction: #FFB300;
            --orange-industrial: #F57C00;
            --gray-concrete: #9E9E9E;
            --gray-steel: #424242;
            --black-graphite: #1a1e23;
            --black-deep: #121519;
            --blue-info: #2196F3;
            --red-risk: #F44336;
            --green-progress: #4CAF50;
        }

        body {
            background-color: var(--black-deep);
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
        }

        .font-mono-tech {
            font-family: 'Roboto Mono', monospace;
        }

        .panel {
            background-color: var(--black-graphite);
            border: 1px solid var(--gray-steel);
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
        }

        .panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background-color: var(--gray-steel);
        }

        .panel.border-yellow::before { background-color: var(--yellow-construction); }
        .panel.border-orange::before { background-color: var(--orange-industrial); }
        .panel.border-blue::before { background-color: var(--blue-info); }
        .panel.border-green::before { background-color: var(--green-progress); }
        .panel.border-red::before { background-color: var(--red-risk); }

        .progress-track {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            height: 12px;
            width: 100%;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .bg-construction {
            background-image: linear-gradient(rgba(18, 21, 25, 0.8), rgba(18, 21, 25, 0.95)), url('https://images.unsplash.com/photo-1541888086425-d81bb19240f5?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
        }

        .simian-sage-text {
            animation: fadeInOut 8s infinite;
        }

        @keyframes fadeInOut {
            0%, 10% { opacity: 0; transform: translateY(10px); }
            20%, 80% { opacity: 1; transform: translateY(0); }
            90%, 100% { opacity: 0; transform: translateY(-10px); }
        }

        .status-dot {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px currentColor;
        }

        .blinking {
            animation: blink 2s infinite;
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }

        /* Circular Progress for Safety */
        .circular-chart {
            display: block;
            margin: 0 auto;
            max-width: 80%;
            max-height: 250px;
        }
        .circle-bg { fill: none; stroke: var(--gray-steel); stroke-width: 3.8; }
        .circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 2s ease-out forwards; }
        @keyframes progress { 0% { stroke-dasharray: 0 100; } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--black-deep); }
        ::-webkit-scrollbar-thumb { background: var(--gray-steel); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--yellow-construction); }