/* Extracted from index.php. */
* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body { overflow-x: hidden; }

    .container {
      display: flex;
      height: 100vh;
      width: 100%;
    }

    /* ─── LEFT PANEL ───────────────────────────────────────────────────────── */
    .left {
      flex: 1;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .left .logo {
      width: 180px;
      margin-bottom: 20px;
    }
    .left .illustration {
      width: 80%;
      max-width: 360px;
      margin-bottom: 20px;
    }
    .left .title {
      font-size: 1.6rem;
      font-weight: bold;
      color: #1D4ED8;
    }

    /* ─── RIGHT PANEL ──────────────────────────────────────────────────────── */
    .right {
      flex: 1;
      background: #1D4ED8;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      position: relative;
    }
    .welcome {
      text-align: center;
      margin-bottom: 30px;
    }
    .welcome h1 {
      font-size: 2.5rem;
      margin-bottom: 5px;
    }
    .welcome h2 {
      font-size: 2rem;
      margin-bottom: 10px;
    }
    .welcome p {
      font-size: 1rem;
      opacity: 0.9;
    }

    /* ─── LOGIN FORM ───────────────────────────────────────────────────────── */
    .login-form {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 320px;
      color: #333;
    }
    .login-form label {
      display: block;
      font-size: 0.9rem;
      margin-bottom: 5px;
    }
    .login-form input {
      width: 100%;
      padding: 10px 12px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
    }
    .login-form button[type="submit"] {
      width: 100%;
      padding: 12px;
      background: #34D399;
      border: none;
      border-radius: 5px;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
    }

    /* ─── SHOW/HIDE PASSWORD ───────────────────────────────────────────────── */
    .password-container {
      position: relative;
      margin-bottom: 20px;
    }
    .password-container input {
      padding-right: 40px;
    }
    .toggle-password {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #888;
      font-size: 1.2rem;
    }
    .toggle-password:focus { outline: none; }

    /* ─── ERROR MESSAGE & FOOTER ───────────────────────────────────────────── */
    .error-message {
      background: #ffe5e5;
      color: #b00020;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 15px;
      font-size: 0.9rem;
      text-align: center;
    }
    .footer-text {
      position: absolute;
      bottom: 20px;
      font-size: 0.8rem;
      opacity: 0.8;
    }

    /* ─── RESPONSIVE BREAKPOINTS ───────────────────────────────────────────── */
    @media (max-width: 992px) {
      .welcome h1 { font-size: 2rem; }
      .welcome h2 { font-size: 1.5rem; }
      .illustration { max-width: 300px; }
    }
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        height: auto;
      }
      .left, .right {
        flex: none;
        width: 100%;
      }
      .left {
        padding: 15px;
      }
      .right {
        padding: 20px;
      }
      .left .logo { width: 150px; margin-bottom: 15px; }
      .left .illustration { width: 60%; max-width: 250px; margin-bottom: 15px; }
      .left .title { font-size: 1.4rem; }
      .login-form { padding: 20px; }
      .login-form input { padding: 8px 10px; font-size: 0.95rem; }
      .login-form button { padding: 10px; font-size: 0.95rem; }
      .welcome p { font-size: 0.9rem; }
    }
    @media (max-width: 480px) {
      .welcome h1 { font-size: 1.8rem; }
      .welcome h2 { font-size: 1.3rem; }
      .left .illustration { width: 80%; max-width: 200px; }
      .login-form { max-width: 280px; }
    }