* { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #eaf0f7;
      color: #172033;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    }
    .login-shell {
      width: min(960px, calc(100vw - 32px));
      min-height: 560px;
      display: grid;
      grid-template-columns: 1fr 420px;
      background: #fff;
      border: 1px solid #d8e1ec;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(23, 32, 51, .16);
    }
    .visual {
      padding: 46px;
      background: #102033;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .login-robot { display:block; width:100%; max-width:380px; height:auto; aspect-ratio:1; object-fit:contain; }
    .form {
      padding: 46px 42px;
      display: grid;
      align-content: center;
      gap: 18px;
    }
    h2 { margin: 0; font-size: 24px; }
    .hint { color: #667085; line-height: 1.55; margin: 0 0 8px; }
    label { display: grid; gap: 8px; font-weight: 700; color: #344054; }
    input {
      width: 100%;
      border: 1px solid #c8d2df;
      border-radius: 8px;
      padding: 12px;
      font: inherit;
      outline: none;
    }
    input:focus {
      border-color: #2f6df6;
      box-shadow: 0 0 0 4px rgba(47, 109, 246, .14);
    }
    button {
      border: 0;
      border-radius: 8px;
      background: #2f6df6;
      color: #fff;
      padding: 12px 14px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .error {
      min-height: 20px;
      color: #b42318;
      font-size: 13px;
      white-space: pre-wrap;
    }
    @media (max-width: 760px) {
      .login-shell { grid-template-columns: 1fr; }
      .visual { min-height: 220px; padding: 30px; }
      .login-robot { width:160px; height:160px; }
      .form { padding: 32px 26px; }
    }