body {
      background: #f4f7fb;
      font-family: Arial, sans-serif;
    }

    .login-wrapper {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-card {
      width: 100%;
      max-width: 420px;
      border: none;
      border-radius: 20px;
      box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    }

    .dashboard-wrapper {
      display: none;
    }

    .sidebar {
      width: 260px;
      min-height: 100vh;
      background: #111827;
      color: #fff;
      position: fixed;
      left: 0;
      top: 0;
      padding: 25px 20px;
    }

    .sidebar h3 {
      font-weight: 700;
      margin-bottom: 40px;
    }

    .sidebar a {
      display: block;
      color: #d1d5db;
      text-decoration: none;
      padding: 12px 15px;
      border-radius: 10px;
      margin-bottom: 10px;
      transition: 0.2s;
    }

    .sidebar a:hover,
    .sidebar a.active {
      background: #2563eb;
      color: #fff;
    }

    .main-content {
      margin-left: 260px;
      padding: 30px;
    }

    .topbar {
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .card-box {
      border: none;
      border-radius: 18px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .status-online {
      color: #16a34a;
      font-weight: 600;
    }

    .status-offline {
      color: #dc2626;
      font-weight: 600;
    }

    .table thead {
      background: #111827;
      color: #fff;
    }

    .server-action-btns .btn {
      margin-right: 6px;
      margin-bottom: 6px;
    }

    .modal-content {
      border-radius: 18px;
      border: none;
    }