* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            color: #e2e8f0;
            padding: 20px;
        }

        /* Главный контейнер */
        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Шапка */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 25px;
            background: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            margin-bottom: 25px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        }

        .logo h1 {
            font-size: 1.5rem;
            font-weight: 600;
            background: linear-gradient(135deg, #60a5fa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo span {
            font-size: 0.75rem;
            color: #94a3b8;
            display: block;
            font-weight: 400;
            -webkit-text-fill-color: #94a3b8;
        }

        .server-status {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .status-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(34, 197, 94, 0.15);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: 50px;
            color: #4ade80;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .pulse {
            width: 8px;
            height: 8px;
            background: #4ade80;
            border-radius: 50%;
            box-shadow: 0 0 10px #4ade80;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        .admin-avatar {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, #8b5cf6, #ec4899);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .admin-avatar:hover {
            transform: scale(1.05);
            border-color: #8b5cf6;
        }

        /* Сетка */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        /* Карточки */
        .card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid rgba(148, 163, 184, 0.1);
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .card:hover {
            transform: translateY(-5px);
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.2);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            color: #cbd5e1;
        }

        .card-title i {
            font-size: 1.3rem;
        }

        .metric-value {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .metric-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 5px;
        }

        /* Прогресс бары */
        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(51, 65, 85, 0.8);
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0 10px;
        }

        .progress-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 1s ease;
            position: relative;
        }

        .progress-fill.cpu { background: linear-gradient(90deg, #3b82f6, #60a5fa); width: 42%; }
        .progress-fill.ram { background: linear-gradient(90deg, #8b5cf6, #a78bfa); width: 68%; }
        .progress-fill.disk { background: linear-gradient(90deg, #ec4899, #f472b6); width: 54%; }
        .progress-fill.net { background: linear-gradient(90deg, #10b981, #34d399); width: 37%; }

        /* Сервисы */
        .services-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(15, 23, 42, 0.5);
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.1);
            transition: 0.2s;
        }

        .service-item:hover {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .service-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .service-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .service-icon.docker { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .service-icon.nginx { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
        .service-icon.db { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
        .service-icon.vpn { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

        .service-name {
            font-weight: 500;
            font-size: 0.95rem;
        }

        .service-desc {
            font-size: 0.75rem;
            color: #64748b;
        }

        /* Переключатели */
        .toggle {
            position: relative;
            width: 48px;
            height: 26px;
            background: #334155;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            border: none;
            outline: none;
        }

        .toggle.active {
            background: #3b82f6;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }

        .toggle::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: 0.3s;
        }

        .toggle.active::after {
            left: 25px;
        }

        /* Кнопки */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            justify-content: center;
            min-width: 120px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
        }

        .btn-danger {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .btn-danger:hover {
            background: rgba(239, 68, 68, 0.3);
            transform: translateY(-2px);
        }

        .btn-success {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .btn-success:hover {
            background: rgba(34, 197, 94, 0.3);
            transform: translateY(-2px);
        }

        /* Информация о системе */
        .sysinfo-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .sysinfo-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(15, 23, 42, 0.5);
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.08);
            font-size: 0.9rem;
            transition: 0.2s;
        }

        .sysinfo-row:hover {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .sysinfo-row .key {
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sysinfo-row .value {
            color: #e2e8f0;
            font-weight: 500;
        }

        /* Уведомления */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border-left: 4px solid #3b82f6;
            color: #e2e8f0;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transform: translateX(400px);
            transition: transform 0.4s ease;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success { border-left-color: #4ade80; }
        .notification.error { border-left-color: #f87171; }
        .notification.warning { border-left-color: #fbbf24; }

        /* Адаптивность */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .metric-value {
                font-size: 2rem;
            }

            .server-status {
                width: 100%;
                justify-content: center;
            }
        }

        /* Анимация появления */
        .card {
            animation: fadeInUp 0.5s ease forwards;
            opacity: 0;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        .card:nth-child(5) { animation-delay: 0.5s; }
        .card:nth-child(6) { animation-delay: 0.6s; }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Температура */
        .temp-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }

        .temp-bar {
            flex: 1;
            height: 6px;
            background: rgba(51, 65, 85, 0.8);
            border-radius: 3px;
            overflow: hidden;
        }

        .temp-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, #10b981, #fbbf24, #ef4444);
            width: 45%;
            transition: width 1s ease;
        }
    

/* ===== Дополнения для рабочей версии ===== */
.hidden { display: none !important; }
body { padding: 16px; }
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 420px; padding: 28px; background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(10px);
  border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 10px 30px -5px rgba(0,0,0,.5); }
.login-card h2 { margin-bottom: 6px; font-size: 1.3rem; }
.login-card p.sub { color: #94a3b8; font-size: .9rem; margin-bottom: 18px; line-height: 1.4; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8rem; color: #94a3b8; margin-bottom: 6px; }
.field input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.3); background: rgba(15,23,42,.7);
  color: #e2e8f0; font-size: 1rem; outline: none; }
.field input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.code-input { letter-spacing: .5em; text-align: center; font-size: 1.5rem !important; font-variant-numeric: tabular-nums; }
.btn-block { width: 100%; justify-content: center; }
.msg { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.4; }
.msg.err { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.msg.info { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.timer { font-variant-numeric: tabular-nums; color: #fbbf24; font-weight: 600; }
.svc-state { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: #64748b; }
.svc-state.up { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7); }
.svc-state.down { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.7); }
.btn-sm { padding: 8px 14px; font-size: .85rem; border-radius: 10px; }
.note { color: #94a3b8; font-size: .8rem; margin-top: 12px; line-height: 1.4; }
.public-note { text-align: center; color: #64748b; font-size: .8rem; margin: 18px 0; }
.card { animation: none; opacity: 1; transform: none; }
.btn { background: rgba(148,163,184,.18); color: #e2e8f0; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary, .btn-success { color: #fff; }
.btn-sm { flex: none; min-width: 0; }
header { flex-wrap: wrap; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.service-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.progress-fill { background: linear-gradient(90deg, #3b82f6, #8b5cf6); height: 100%; border-radius: 8px; transition: width .6s ease; }
.progress-bar { height: 8px; background: rgba(148,163,184,.2); border-radius: 8px; overflow: hidden; margin-top: 14px; }