* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: #eaf4ff url('images/1.jpg') no-repeat center center / cover fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      color: #24304a;
    }
    body::before {
      content: '';
      position: fixed; inset: 0;
      background: linear-gradient(180deg, rgba(234,244,255,.18) 0%, rgba(180,210,255,.12) 100%);
      pointer-events: none;
    }
    .login-wrap {
      position: relative; z-index: 1;
      width: 920px; max-width: 100%;
      display: flex;
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 24px;
      box-shadow: 0 24px 60px rgba(90,130,190,.16);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.7);
    }
    .login-visual {
      flex: 1.05;
      min-height: 520px;
      background: url('images/1.jpg') no-repeat center 62% / cover;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 36px 32px;
    }
    .login-visual::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.08) 20%, rgba(70,110,190,.38) 100%);
    }
    .login-visual-inner { position: relative; z-index: 1; color: #fff; }
    .login-visual-inner .tag {
      display: inline-block;
      font-size: 12px; letter-spacing: 1px;
      padding: 4px 10px; border-radius: 999px;
      background: rgba(255,255,255,.22);
      margin-bottom: 12px;
    }
    .login-visual-inner h2 {
      font-size: 28px; font-weight: 800; line-height: 1.3;
      text-shadow: 0 8px 24px rgba(40,70,140,.25);
    }
    .login-visual-inner p {
      margin-top: 8px; font-size: 13px; opacity: .9;
    }
    .login-panel {
      width: 420px; flex-shrink: 0;
      padding: 48px 42px;
      background: rgba(255,255,255,.88);
    }
    .brand {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 28px; text-decoration: none; color: inherit;
    }
    .brand img, .brand-ico {
      width: 42px; height: 42px; border-radius: 12px;
      object-fit: contain; background: #fff;
      box-shadow: 0 6px 16px rgba(92,110,242,.16);
    }
    .brand-ico {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #5c6ef2, #8b9aff);
      color: #fff; font-size: 22px;
    }
    .brand b { display: block; font-size: 18px; font-weight: 800; color: #24304a; }
    .brand span { display: block; font-size: 12px; color: #8b93a7; margin-top: 2px; }
    .login-desc { font-size: 13px; color: #8b93a7; margin: -12px 0 28px; }
    .form-group { margin-bottom: 16px; position: relative; }
    .form-group .icon {
      position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
      color: #9aa3b5; font-size: 18px;
    }
    .form-input {
      width: 100%; height: 48px;
      padding: 0 16px 0 46px;
      border: 1px solid #e8edf6;
      border-radius: 12px;
      font-size: 14px;
      background: #f7f9fd;
      color: #24304a;
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .form-input:focus {
      background: #fff;
      border-color: #8b9aff;
      box-shadow: 0 0 0 3px rgba(92,110,242,.12);
    }
    .form-input::placeholder { color: #b0b7c6; }
    .captcha-group { display: flex; gap: 10px; }
    .captcha-group .form-group { flex: 1; margin-bottom: 0; }
    .captcha-img {
      height: 48px; width: 118px; border-radius: 12px; cursor: pointer;
      background: #f7f9fd; object-fit: cover;
      border: 1px solid #e8edf6;
    }
    .remember-row {
      display: flex; align-items: center; margin: 14px 0 22px;
      font-size: 13px; color: #6b7280;
    }
    .remember-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .login-btn {
      width: 100%; height: 48px;
      border: none; border-radius: 12px;
      background: linear-gradient(90deg, #5c6ef2 0%, #7f90ff 100%);
      color: #fff; font-size: 16px; font-weight: 600;
      cursor: pointer; letter-spacing: 4px;
      box-shadow: 0 10px 22px rgba(92,110,242,.28);
      transition: transform .15s, box-shadow .15s, filter .15s;
    }
    .login-btn:hover { filter: brightness(1.04); box-shadow: 0 12px 26px rgba(92,110,242,.34); }
    .login-btn:active { transform: translateY(1px); }
    .login-btn[disabled] { opacity: .7; cursor: not-allowed; }
    .copy {
      margin-top: 22px; text-align: center; font-size: 12px; color: #a0a4ab;
    }
    .copy a { color: #5c6ef2; text-decoration: none; }
    @media (max-width: 820px) {
      .login-visual { display: none; }
      .login-wrap { width: 100%; max-width: 420px; }
      .login-panel { width: 100%; padding: 36px 26px; }
    }

.captcha-refresh { display: flex; flex: none; background: transparent; border: 0; padding: 0; border-radius: 12px; }
.login-error { color: #a52338; background: #fff1f2; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.login-wrap .brand .brand-ico { display: flex; margin-top: 0; font-size: 22px; color: #fff; }
.login-wrap .remember-row label { margin: 0; font-weight: 400; }