* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/* Design tokens for consistent color palette (duplicated here so files are standalone) */
:root {
  --primary-1: #00A8E8;
  --primary-2: #00D9C0;
  --accent: #003D5C;
  --muted: #666666;
}

    body {
      font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #00A8E8 0%, #00D9C0 50%, #7FDBFF 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    body::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      top: -250px;
      right: -250px;
      animation: float 20s infinite ease-in-out;
    }

    body::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      bottom: -200px;
      left: -200px;
      animation: float 15s infinite ease-in-out reverse;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(30px, 30px) rotate(180deg); }
    }

    .container {
      background: #fff;
      /* keep the login card compact: fluid between 320px and 420px */
      width: clamp(320px, 92vw, 420px);
      padding: 24px 20px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      animation: slideIn 0.6s ease-out;
      position: relative;
      z-index: 1;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .logo-container {
      text-align: center;
      margin-bottom: 20px;
    }

    .logo-container img {
      max-width: 120px;
      height: auto;
    }

    .header {
      text-align: center;
      margin-bottom: 25px;
    }

    .header h2 {
      color: #003D5C;
      font-size: 24px;
      margin-bottom: 6px;
      font-weight: 700;
    }

    .header p {
      color: #666;
      font-size: 13px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
      color: #333;
      font-size: 13px;
    }

    input, select {
      width: 100%;
      padding: 12px 14px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      transition: all 0.3s;
      background: #f8f9fa;
    }

    /* Ensure form controls fit the login card and scale on tiny screens */
    .container input,
    .container select,
    .container textarea,
    .container button {
      max-width: 100%;
      box-sizing: border-box;
    }

    input:focus, select:focus {
      border-color: #00A8E8;
      outline: none;
      box-shadow: 0 0 0 3px rgba(0,168,232,0.1);
      background: #fff;
    }

    input.error-input, select.error-input {
      border-color: #dc3545;
      background: #fff5f5;
    }

    button {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, var(--primary-1) 0%, var(--primary-2) 100%);
      border: none;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 8px;
      box-shadow: 0 4px 15px rgba(0,168,232,0.3);
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,168,232,0.4);
    }

    button:active {
      transform: translateY(0);
    }

    .toggle {
      margin-top: 20px;
      text-align: center;
      font-size: 13px;
      color: #666;
    }

    .toggle a {
      color: #00A8E8;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.3s;
    }

    .toggle a:hover {
      color: #0088BB;
      text-decoration: underline;
    }

    .alert {
      padding: 10px 12px;
      border-radius: 8px;
      margin-top: 12px;
      font-size: 13px;
      font-weight: 500;
      display: none;
      animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .alert.show {
      display: block;
    }

    .alert-error {
      background: #fee;
      color: #c33;
      border-left: 4px solid #c33;
    }

    .alert-success {
      background: #e8f8f5;
      color: #00A86B;
      border-left: 4px solid #00A86B;
    }

    .password-strength {
      margin-top: 6px;
      font-size: 11px;
      display: none;
    }

    .password-strength.show {
      display: block;
    }

    .strength-weak { color: #dc3545; }
    .strength-medium { color: #ffc107; }
    .strength-strong { color: #00A86B; }

    @media (max-width: 768px) {
      body {
        padding: 15px;
      }
      
      .container {
        padding: 25px 20px;
        max-width: 100%;
      }
      
      .logo-container img {
        max-width: 100px;
      }
      
      .header h2 {
        font-size: 22px;
      }
      
      .form-group {
        margin-bottom: 14px;
      }
    }

    @media (max-width: 480px) {
      .container {
        padding: 22px 18px;
        border-radius: 18px;
      }
      
      .logo-container {
        margin-bottom: 18px;
      }
      
      .logo-container img {
        max-width: 90px;
      }
      
      .header {
        margin-bottom: 20px;
      }
      
      .header h2 {
        font-size: 20px;
      }
      
      input, select {
        padding: 11px 12px;
        font-size: 13px;
      }
      
      button {
        padding: 12px;
        font-size: 14px;
      }
    }

    @media (max-width: 360px) {
      .container {
        padding: 20px 16px;
      }
      
      .logo-container img {
        max-width: 85px;
      }
      
      .header h2 {
        font-size: 18px;
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/* Responsive helper - mobile-first utility rules */
@media (max-width: 1024px) {
  /* Ensure backgrounds don't overflow on tablets */
  body::before, body::after { width: 360px; height: 360px; }
  .container { margin: 0 12px; }
}

/* Prevent body-level horizontal overflow on very small screens */
@media (max-width: 420px) {
  body { overflow-x: hidden; }
}

@media (max-width: 768px) {
  /* Compact form spacing */
  .container { padding: 20px; }
  label { font-size: 12px; }
  input, select { padding: 10px 12px; }
  button { padding: 12px; }
}

@media (max-width: 420px) {
  .container { max-width: 100%; border-radius: 12px; }
  .header h2 { font-size: 18px; }
  .toggle { font-size: 12px; }
}