body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #1a002d 0%, #2c003f 50%, #100017 100%);
      font-family: 'Jost', sans-serif;
      color: #ccc;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .topbar {
      background: transparent;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-family: monospace;
      color: #f0a0ff;
    }
    .topbar a {
      color: #f0a0ff;
      text-decoration: none;
      margin-left: 15px;
    }
    .dashboard {
      flex: 1;
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel {
      display: flex;
      flex-direction: row;
      gap: 20px;
      flex-wrap: wrap;
      width: 100%;
      max-width: 1000px;
      justify-content: center;
    }
  
    .login-box {
      background: rgba(0, 0, 0, 0.8);
      color: #f0a0ff;
      font-family: monospace;
      padding: 20px;
      box-shadow: 0 0 10px #7a00cc80;
      border-radius: 8px;
      width: 90%;
      max-width: 360px;
      box-sizing: border-box;
      text-align: center;
    }

    .box {
      background: rgba(0, 0, 0, 0.8);
      color: #f0a0ff;
      font-family: monospace;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px #7a00cc80;
      flex: 1 1 300px;
      min-width: 280px;
    }
    .box h2 {
      margin-top: 0;
      font-size: 18px;
      border-bottom: 1px solid #7a00cc;
      padding-bottom: 5px;
      margin-bottom: 15px;
    }
    .box p {
      margin: 6px 0;
      font-size: 14px;
    }
    .links a, .reboot-btn {
      display: inline-block;
      margin: 6px 4px;
      padding: 6px 12px;
      border-radius: 6px;
      background: #1a002d;
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      border: 1px solid #7a00cc;
      font-family: monospace;
    }
    .reboot-btn:hover, .links a:hover {
      background: #b700ff33;
      box-shadow: 0 0 5px #b700ff;
    }

    @media (max-width: 600px) {
      .topbar {
        flex-direction: column;
        align-items: flex-start;
      }
    }
	.status-icon {
	font-size: 0.8em;
	}
	.status-icon.active {
	color: #4caf50;
	}
	.status-icon.inactive, .status-icon.failed {
	color: #e91e63;
	}
	.status-icon.unknown {
	color: #999;
	}
	.quick-links {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0 20px 0;
	font-family: monospace;
	}
	.quick-links a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #f0a0ff;
	text-decoration: none;
	font-size: 14px;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid #7a00cc;
	background: #1a002d;
	}
	.quick-links a:hover {
	background: #b700ff33;
	box-shadow: 0 0 5px #b700ff;
	}
	.quick-links i {
	font-size: 14px;
	}

  .desktop-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin: 40px auto 80px;
}

.desktop-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #f0a0ff;
  font-family: monospace;
  font-size: 14px;
  width: 90px;
  transition: transform 0.2s;
}

.desktop-links a i {
  font-size: 42px;
  margin-bottom: 8px;
}

.desktop-links a:hover {
  transform: scale(1.1);
  color: #fff;
}