* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background: #050505; color: #0ff; overflow: hidden; height: 100vh; width: 100vw; }
h1, h3, .logo, .val { font-family: 'Orbitron', sans-serif; }
a { text-decoration: none; }

/* Switcher */
.demo-switcher { position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); border: 1px solid #0ff; padding: 10px 20px; z-index: 999; display: flex; gap: 10px; font-size: 0.9rem; color: #0ff; }
.demo-switcher a.active { color: #f0f; text-shadow: 0 0 5px #f0f; }
.agent-back-btn { position: fixed; top: 20px; left: 20px; background: black; border: 1px solid #0ff; color: #0ff; padding: 5px 10px; z-index: 999; }

.cyber-container { display: flex; height: 100vh; }

/* Sidebar */
.cyber-sidebar { width: 250px; border-right: 1px solid #333; padding: 20px; background: #0a0a0a; }
.logo { font-size: 1.5rem; margin-bottom: 40px; color: #fff; text-shadow: 0 0 10px #0ff; }
.logo span { color: #0ff; }
.cyber-sidebar nav a { display: block; padding: 15px; color: #555; transition: 0.3s; border-left: 2px solid transparent; }
.cyber-sidebar nav a:hover, .cyber-sidebar nav a.active { color: #0ff; border-left-color: #0ff; background: rgba(0, 255, 255, 0.05); text-shadow: 0 0 5px #0ff; }

/* Main */
.cyber-main { flex: 1; padding: 40px; overflow-y: auto; }
header { display: flex; justify-content: space-between; margin-bottom: 40px; border-bottom: 1px solid #333; padding-bottom: 20px; }
h1 { font-size: 1.5rem; color: #fff; }
.online { color: #0f0; text-shadow: 0 0 10px #0f0; }
.user { border: 1px solid #0ff; padding: 5px 15px; color: #0ff; }

/* Cards */
.grid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.card { background: #0a0a0a; border: 1px solid #333; padding: 20px; position: relative; }
.card h3 { color: #888; font-size: 0.9rem; margin-bottom: 10px; }
.val { font-size: 2.5rem; color: #fff; }

.neon-blue { border-color: #0ff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }
.neon-pink { border-color: #f0f; box-shadow: 0 0 10px rgba(255, 0, 255, 0.2); }
.neon-green { border-color: #0f0; box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); }

.wide { width: 100%; height: 300px; border-color: #333; }

/* Graph */
.fake-graph { display: flex; align-items: flex-end; height: 200px; gap: 20px; padding-top: 20px; }
.bar { flex: 1; background: #333; transition: 0.3s; position: relative; }
.bar:hover { background: #0ff; box-shadow: 0 0 15px #0ff; }

@media (max-width: 768px) {
    body { overflow: auto; height: auto; }
    .cyber-container { flex-direction: column; height: auto; }
    .cyber-sidebar { width: 100%; height: auto; padding: 20px; border-right: none; border-bottom: 1px solid #333; }
    .cyber-sidebar nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
    .cyber-sidebar nav a { padding: 5px 10px; border: 1px solid #333; font-size: 0.8rem; }
    .cyber-main { padding: 20px; overflow: visible; }
    .grid-stats { grid-template-columns: 1fr; }
    .wide { height: auto; min-height: 250px; }
    .fake-graph { height: 150px; }
}