/* Дашборд: моноширинный стиль */
body { font-family: 'JetBrains Mono', 'Inter', sans-serif; }

.x-status {
    display: inline-flex; align-items: center; gap: 8px;
    color: #00ff88; font-size: .85rem;
    border: 1px solid rgba(0, 255, 136, .3);
    padding: 6px 16px; border-radius: 100px; margin-bottom: 25px;
    background: rgba(0, 255, 136, .05);
}
.x-dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: xblink 1.5s infinite; }
@keyframes xblink { 50% { opacity: .3; } }

.page-hero h1 { text-shadow: 0 0 30px rgba(0, 255, 136, .25); }

.x-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
.x-metric { border: 1px solid rgba(0, 255, 136, .25); border-radius: 10px; padding: 22px; background: rgba(0, 255, 136, .03); }
.x-label { font-size: .72rem; color: #4a6a5e; letter-spacing: 2px; }
.x-metric b { display: block; font-size: 2rem; margin: 8px 0 12px; }
.x-green { color: #00ff88; }
.x-cyan { color: #00d0ff; }
.x-bar { height: 5px; background: #12241d; border-radius: 3px; overflow: hidden; }
.x-bar i { display: block; height: 100%; background: linear-gradient(90deg, #00ff88, #00d0ff); animation: grow 1.5s ease; }
@keyframes grow { from { width: 0; } }

.x-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-bottom: 30px; }
.x-panel { border: 1px solid rgba(0, 255, 136, .25); border-radius: 10px; padding: 22px; background: rgba(0, 255, 136, .03); }
.x-panel h3 { color: #4a6a5e; font-size: .85rem; margin-bottom: 20px; }

.x-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.x-chart i { flex: 1; background: linear-gradient(to top, rgba(0, 255, 136, .2), #00ff88); border-radius: 4px 4px 0 0; transition: .3s; }
.x-chart i:hover { background: #00d0ff; }

.x-log { font-size: .82rem; min-height: 180px; }
.x-log-line { padding: 5px 0; color: #00ff88; animation: fadeIn .5s; }
.x-log-line.warn { color: #ffd166; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }

.x-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.x-serv { border-left: 2px solid #00ff88; padding: 15px 20px; transition: .3s; }
.x-serv:hover { background: rgba(0, 255, 136, .05); transform: translateX(5px); }
.x-serv b { color: #fff; display: block; margin-bottom: 8px; }
.x-serv p { font-size: .85rem; }

@media (max-width: 900px) { .x-grid { grid-template-columns: 1fr; } }