* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      
      /* dark navy */
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: white;
    }

    .login-wrapper {
      width: 100%;
      max-width: 420px;
      padding: 1rem;
    }

    .login-card {
      background: #222222;
      /* gray-900 */
      border-radius: 18px;
      box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.5),
        0 10px 10px -5px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      color: #e5e7eb;
      /* gray-200 */
    }

    .login-card-body {
      padding: 2.25rem 2rem 1.75rem;
    }

    .login-card-footer {
      padding: 1rem 2rem 1.5rem;
      background: #1f1f1f;
      /* gray-950-ish */
      text-align: center;
      border-top: 1px solid rgba(148, 163, 184, 0.25);
      /* gray-400 */
    }

    .brand-title {
      font-size: 1.9rem;
      font-weight: 800;
      color: #e5e7eb;
    }

    .brand-subtitle {
      margin-top: 0.4rem;
      font-size: 0.95rem;
      color: #9ca3af;
      /* gray-400 */
    }

    .form-label {
      color: #e5e7eb;
      font-weight: 600;
      font-size: 0.9rem;
    }

    .login-input {
      background: rgb(35, 36, 37);
      /* gray-950 */
      border-radius: 0.6rem;
      border: 1px solid #374151;
      /* gray-700 */
      color: #e5e7eb;
      padding: 0.7rem 0.85rem;
      font-size: 0.95rem;
    }

    .login-input::placeholder {
      color: #6b7280;
      /* gray-500 */
    }

    .login-input:focus {
      outline: none;
      border-color: #2b3438;
      /* indigo-600 */
      box-shadow: 0 0 0 1px #3f5c68;
      transition: 0.3s;
      background: rgb(35, 36, 37);
      color:white;
    }

    .remember-label {
      font-size: 0.85rem;
      color: #6b7280;
    }

    .link-muted {
      font-size: 0.85rem;
      color: #3f5c68;
      /* indigo-400 */
      text-decoration: none;
    }

    .link-muted:hover {
      color: #447c94;
      /* indigo-300 */
      transition: 0.3s;
      text-decoration: underline;
    }

    .login-btn {
      width: 100%;
      border-radius: 0.7rem;
      padding: 0.7rem 1rem;
      background: #447c94;
      /* indigo-600 */
      color: #020617;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
    }

    .login-btn:hover {
      background: #3f5c68;
      /* indigo-500 */
    }

    .login-btn:active {
      transform: translateY(1px);
    }

    .footer-text {
      font-size: 0.85rem;
      color: #9ca3af;
      margin: 0;
    }

    .footer-text span {
      color: #e5e7eb;
    }

.containerbg {
  width: 100%;
  height: 100%;
  background: radial-gradient(
        circle farthest-side at 0% 50%,
        #282828 23.5%,
        rgba(255, 170, 0, 0) 0
      )
      21px 30px,
    radial-gradient(
        circle farthest-side at 0% 50%,
        #2c3539 24%,
        rgba(240, 166, 17, 0) 0
      )
      19px 30px,
    linear-gradient(
        #282828 14%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 85%,
        #282828 0
      )
      0 0,
    linear-gradient(
        150deg,
        #282828 24%,
        #2c3539 0,
        #2c3539 26%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 74%,
        #2c3539 0,
        #2c3539 76%,
        #282828 0
      )
      0 0,
    linear-gradient(
        30deg,
        #282828 24%,
        #2c3539 0,
        #2c3539 26%,
        rgba(240, 166, 17, 0) 0,
        rgba(240, 166, 17, 0) 74%,
        #2c3539 0,
        #2c3539 76%,
        #282828 0
      )
      0 0,
    linear-gradient(90deg, #2c3539 2%, #282828 0, #282828 98%, #2c3539 0%) 0 0
      #282828;
  background-size: 40px 60px;
}