@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    --bg-deep: #030508;
    --bg-panel: rgba(12, 16, 28, 0.65);
    --accent-cyan: #00E5FF;
    --accent-blue: #2979FF;
    --accent-green: #00E676;
    --accent-red: #FF1744;
    --accent-purple: #D500F9;
    --text-primary: #E0E7FF;
    --text-dim: #8BA4DF;
    --border-glass: rgba(0, 229, 255, 0.15);
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-deep);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(41, 121, 255, 0.15), transparent 50%),
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100vh;
}

.glow-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px; pointer-events: none; z-index: 999; opacity: 0.5;
}

.main-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 35px; background: var(--bg-panel);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid var(--accent-cyan);
    box-shadow: 0 4px 30px rgba(0, 229, 255, 0.1);
    border-radius: 12px; margin: 20px; position: sticky; top: 20px; z-index: 100;
}

.logo h1 { font-family: var(--font-head); font-size: 2.2rem; font-weight: 900; letter-spacing: 3px; text-shadow: 0 0 15px rgba(0, 229, 255, 0.6); }
.accent-text { color: var(--accent-cyan); }
.pulse-icon { display: inline-block; width: 12px; height: 12px; background: var(--accent-cyan); border-radius: 50%; margin-right: 10px; animation: pulse 2s infinite; box-shadow: 0 0 10px var(--accent-cyan); }
.system-status { display: flex; gap: 25px; align-items: center; font-family: var(--font-head); font-size: 0.9rem; }
.status-item .label { color: var(--text-dim); margin-right: 8px;}
.status-item .ok { color: var(--accent-green); text-shadow: 0 0 10px var(--accent-green); }
.time-display { color: var(--accent-cyan); font-weight: bold; letter-spacing: 1px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; padding: 0 20px 20px 20px; max-width: 1800px; margin: 0 auto; }
.wide { grid-column: span 2; }

.card {
    background: var(--bg-panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass); border-radius: 16px; padding: 25px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 15px 45px rgba(0, 229, 255, 0.15); border-color: rgba(0, 229, 255, 0.4); }

.card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px; margin-bottom: 20px; }
.card-header h2 { font-family: var(--font-head); font-size: 1.15rem; color: var(--text-primary); letter-spacing: 1.5px; text-transform: uppercase; }

.tag { background: rgba(0, 229, 255, 0.1); color: var(--accent-cyan); padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; font-family: var(--font-head); border: 1px solid var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
.live-blink { color: var(--accent-red); font-family: var(--font-head); font-weight: bold; font-size: 0.85rem; animation: strobe 1.2s infinite; text-shadow: 0 0 10px var(--accent-red); border: 1px solid var(--accent-red); padding: 3px 8px; border-radius: 4px; }

.risk-display { display: flex; align-items: center; justify-content: space-around; gap: 2rem; height: 100%; }
.circular-progress { width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--border-glass); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 30px rgba(0, 242, 255, 0.1) inset; background: radial-gradient(circle, rgba(0,229,255,0.05) 0%, transparent 70%); }
.risk-num { font-size: 3.5rem; font-weight: 900; font-family: var(--font-head); color: var(--accent-green); text-shadow: 0 0 25px var(--accent-green); }
.subtext { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-head); margin-top: -5px;}
.level { font-family: var(--font-head); font-size: 1.4rem; font-weight: bold; margin-bottom: 5px;}
.level.low { color: var(--accent-green); text-shadow: 0 0 10px var(--accent-green); }
.level.high { color: var(--accent-red); text-shadow: 0 0 15px var(--accent-red); animation: strobe 1s infinite; }
.summary-text { color: var(--text-dim); font-size: 1rem; line-height: 1.4; }

.weather-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; height: 100%; }
.w-item { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; justify-content: center; }
.w-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; font-family: var(--font-head);}
.w-val { font-size: 1.4rem; color: var(--accent-cyan); font-weight: bold; font-family: var(--font-head); }

.chart-container { height: 250px; width: 100%; position: relative; }

.infra-list { height: 100%; overflow-y: auto; padding-right: 5px;}
.infra-item { display: flex; justify-content: space-between; background: rgba(0, 0, 0, 0.4); border-left: 4px solid var(--accent-cyan); padding: 15px; margin-bottom: 12px; border-radius: 6px; font-family: var(--font-head); font-size: 1.1rem; }
.name { color: var(--text-primary); }
.status { font-weight: bold; font-size: 0.9rem; }
.pulse-safe { color: var(--accent-cyan); text-shadow: 0 0 8px var(--accent-cyan); animation: soft-pulse 2s infinite; }
.pulse-crit { color: var(--accent-red); text-shadow: 0 0 10px var(--accent-red); animation: strobe 0.5s infinite; }

.bio-metrics { font-size: 1.1rem; }
.bio-card .card-header h2 { color: var(--accent-purple); text-shadow: 0 0 10px rgba(213, 0, 249, 0.4); }
.value.critical { color: var(--accent-red) !important; text-shadow: 0 0 15px var(--accent-red); animation: strobe 1s infinite; }

/* --- NEW: MANUAL CONTROLS --- */
.manual-controls { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; justify-content: center;}
.input-box { display: flex; flex-direction: column; gap: 5px; }
.input-box label { color: var(--accent-cyan); font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 1px; }
.input-box input { background: rgba(0,0,0,0.6); border: 1px solid var(--border-glass); color: #fff; padding: 10px; border-radius: 5px; width: 160px; font-family: var(--font-head); font-size: 1.1rem; }
.input-box input:focus { border-color: var(--accent-red); outline: none; box-shadow: 0 0 10px rgba(255, 23, 68, 0.4); }

.cyber-btn { background: var(--accent-red); color: #fff; border: none; padding: 12px 20px; border-radius: 5px; font-family: var(--font-head); font-weight: bold; cursor: pointer; transition: 0.3s; text-shadow: 0 0 5px #000; letter-spacing: 1px; }
.cyber-btn:hover { background: #ff4081; box-shadow: 0 0 15px var(--accent-red); }
.safe-btn { background: var(--accent-green); color: #000; text-shadow: none; }
.safe-btn:hover { background: #69f0ae; box-shadow: 0 0 15px var(--accent-green); }

.copilot-widget { grid-column: span 1; display: flex; flex-direction: column; height: 450px; }
.chat-content { flex-grow: 1; overflow-y: auto; font-size: 1rem; padding-right: 10px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 12px; border-radius: 8px; line-height: 1.4; }
.system { background: rgba(41, 121, 255, 0.1); border-left: 3px solid var(--accent-blue); color: var(--text-primary); }
.user { border-right: 3px solid var(--accent-cyan); text-align: right; background: rgba(0, 229, 255, 0.05); align-self: flex-end; max-width: 85%;}
.console-response { color: var(--accent-green); font-family: monospace; } 

.chat-input-area { display: flex; gap: 12px; margin-top: 15px; }
#chat-input { flex-grow: 1; background: rgba(0,0,0,0.6); border: 1px solid var(--border-glass); color: var(--accent-cyan); padding: 12px 18px; border-radius: 8px; font-family: var(--font-body); font-size: 1.05rem; outline: none; transition: 0.3s; }
#chat-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); }
#send-btn { background: var(--accent-cyan); color: #000; border: none; padding: 12px 25px; border-radius: 8px; font-family: var(--font-head); font-weight: 900; letter-spacing: 1px; cursor: pointer; transition: 0.3s ease; }
#send-btn:hover { background: #fff; box-shadow: 0 0 20px var(--accent-cyan); }

@keyframes pulse { 0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); } 70% { transform: scale(1.1); opacity: 0.8; box-shadow: 0 0 10px 10px rgba(0, 229, 255, 0); } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }
@keyframes soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes strobe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }