* { margin:0; padding:0; box-sizing:border-box; }
    html, body {
      height:100%;
      font-family:'Poppins',sans-serif;
      background: linear-gradient(180deg,#f7ecd7 0%,#f8f1e5 35%,#fbfaf7 100%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }

    /* Header */
    header {
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:60px;
      background:#fff;
      box-shadow:0 6px 20px rgba(0,0,0,0.08);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:26px;
      color:#444;
      z-index:1000;
    }

    /* Login card */
    .login-card {
      background:#fff;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.10);
      padding:3rem 2rem;
      width:100%;
      max-width:420px;
      display:flex;
      flex-direction:column;
      gap:1rem;
      transition:transform 0.28s cubic-bezier(.2,.9,.3,1), box-shadow 0.28s;
      position:relative;
      top: 0; /* optional */
    }
    .login-card:hover {
      transform:translateY(-6px);
      box-shadow:0 18px 36px rgba(0,0,0,0.16);
    }

    /* Logo */
    .login-card .icon {
      width:100px;
      height:100px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 6px 15px rgba(0,0,0,0.10);
      overflow:hidden;
      border-radius:50%;
    }
    .login-card .icon img {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .login-card h2 {
      font-size:28px;
      font-weight:700;
      text-align:center;
      color:#444;
      margin-bottom:0.25rem;
    }

    .login-card p.subtitle {
      font-size:14px;
      color:#666;
      text-align:center;
      margin-bottom:1rem;
    }

    .login-card label {
      font-size:0.95rem;
      color:#444;
      margin-bottom:0.25rem;
      display:block;
    }

    .login-card input[type="text"],
    .login-card input[type="password"] {
      width:100%;
      padding:0.7rem 0.85rem;
      border:1px solid #CED4DA;
      border-radius:8px;
      font-size:1rem;
      margin-bottom:1rem;
      transition:border-color .25s, box-shadow .25s;
    }

    .login-card input[type="text"]:focus,
    .login-card input[type="password"]:focus {
      border-color:#4154F1;
      box-shadow:0 0 8px rgba(65,84,241,0.22);
      outline:none;
    }

    .remember-me {
      display:flex;
      align-items:center;
      font-size:0.9rem;
      color:#444;
      gap:0.5rem;
      margin-bottom:1rem;
    }

    .remember-me input[type="checkbox"] {
      width:16px;
      height:16px;
      cursor:pointer;
    }

    .login-card button {
      width:100%;
      padding:0.65rem;
      background:linear-gradient(135deg,#4154F1,#5D5FEF);
      color:#fff;
      font-weight:600;
      border:none;
      border-radius:8px;
      cursor:pointer;
      transition:transform .18s, box-shadow .18s;
    }

    .login-card button:hover {
      transform:translateY(-2px);
      box-shadow:0 8px 20px rgba(0,0,0,0.12);
    }

    .login-card .forgot-password {
      font-size:0.85rem;
      color:#4154F1;
      text-decoration:none;
      display:block;
      text-align:right;
      margin-top:-0.4rem;
      margin-bottom:1rem;
    }

    .login-card .error-message {
      color:#c62828;
      font-size:0.95rem;
      text-align:center;
      margin-top:0.5rem;
    }

    @media (max-width:480px) {
      .login-card { padding:2rem 1.25rem; max-width:100%; }
      header { font-size:22px; }
    }