body {
      margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
      font-family:var(--font); color:var(--gray-800);
      background: var(--green-700);
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(82,183,136,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(45,106,79,.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(216,243,220,.15) 0%, transparent 50%);
      padding: 20px;
    }
    .login-container {
      display:flex; width:min(860px, 100%); min-height:460px;
      background:#fff; border-radius:var(--radius-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1);
      overflow:hidden;
    }
    .login-hero {
      flex:1; background:linear-gradient(160deg, var(--green-800), var(--green-600));
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding:40px; color:#fff; position:relative; overflow:hidden;
    }
    .login-hero::before {
      content:''; position:absolute; inset:0;
      background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .login-hero svg { width:64px; height:64px; margin-bottom:16px; opacity:.9; }
    .login-hero h1 { font-size:28px; font-weight:700; margin:0 0 8px; letter-spacing:-0.5px; position:relative; }
    .login-hero p { font-size:15px; opacity:.8; margin:0; text-align:center; line-height:1.5; position:relative; }
    .login-form {
      flex:1; padding:48px 40px; display:flex; flex-direction:column; justify-content:center;
    }
    h2 { font-size:20px; font-weight:700; margin:0 0 4px; color:var(--gray-800); }
    .subtitle { color:var(--gray-600); font-size:14px; margin:0 0 24px; }
    label { font-size:13px; font-weight:600; color:var(--gray-600); display:block; margin-bottom:6px; }
    .input-group { margin-bottom:16px; }
    .input-group input {
      width:100%; padding:12px 14px; font-size:14px; font-family:var(--font);
      border:1px solid var(--gray-200); border-radius:var(--radius); background:var(--gray-50);
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .input-group input:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(82,183,136,.15); background:#fff; }
    button {
      width:100%; padding:12px 16px; margin:0; font-size:15px; font-weight:600;
      font-family:var(--font); border-radius:var(--radius); cursor:pointer;
      border:1px solid transparent; transition:all .2s;
    }
    .divider { height:1px; background:var(--gray-200); margin:24px 0; border:none; }
    #loginMsg { margin-top:12px; padding:10px 14px; font-size:13px; color:#d32f2f; background:#fdecea; border-radius:var(--radius); display:none; }
    #loginMsg:not(:empty) { display:block; }
    @media (max-width:700px) {
      .login-container { flex-direction:column; min-height:auto; }
      .login-hero { padding:32px 24px; min-height:180px; }
      .login-hero svg { width:48px; height:48px; }
      .login-hero h1 { font-size:22px; }
      .login-form { padding:32px 24px; }
    }