:root {
      --bg-dark: #1c2531;
      --text-light: #e5e7eb;
      --accent-blue: #0d6efd;
    }
body, html {
  height: 100%;
  margin: 0;
  font-family: 'Archivo', sans-serif;
  position: relative;
  overflow: hidden;
}

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://help.cmitpnw.com/backg.png') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.4; /* adjust to desired dimming */
  z-index: -1;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
}

    .top-bar {
      background-color: var(--bg-dark);
      color: var(--text-light);
      padding: 0.75rem 1rem;
    }
    .top-bar .title {
      font-weight: bold;
      font-size: 1.5rem;
      color: var(--text-light);
    }
    .top-bar .login {
      font-size: 1rem;
      text-decoration: none;
      color: white;
      background-color: var(--accent-blue);
      padding: 0.4rem 0.9rem;
      border-radius: 6px;
    }
.center-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(248, 249, 250, 0.85); /* Was #f8f9fa */
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  max-width: 400px;
  width: 100%;
}
    .form-control:focus {
      box-shadow: none;
    }
    .input-group .btn {
      background-color: var(--accent-blue);
      color: white;
    }



    /* CONNECT PAGE */
    .connect-card {
      background-color: rgba(255, 255, 255, 0.95);
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
      display: flex;
      min-width: 900px;
      max-width: 1100px;
      width: 90%;
    }
    .connect-half {
      flex: 1;
      text-align: center;
      padding: 1rem;
      border-right: 2px solid #ddd;
    }
    .connect-half:last-child {
      border-right: none;
    }
    .os-label {
      margin-top: 0.75rem;
      font-size: 1.25rem;
    }
    .icon-btn {
      cursor: pointer;
      transition: transform 0.3s ease;
      text-decoration: none;
    }
    .icon-btn:hover {
      transform: scale(1.05);
    }
    .code-block {
      background-color: #f1f1f1;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      white-space: pre-wrap;
      position: relative;
      display: none;
      text-align: left;
    }
    .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
    }

    .page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}