:root {
  --navy: #151f34;
  --blue: #2876e8;
  --blue-dark: #1d60c4;
  --text: #202b3e;
  --muted: #7a8598;
  --line: #dfe5ed;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f4f6fa; }
body { margin: 0; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(390px, .92fr) minmax(500px, 1.08fr); }
.brand-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; padding: 48px clamp(38px, 6vw, 86px); color: #fff; background: radial-gradient(circle at 78% 20%, rgba(57,132,244,.24), transparent 35%), linear-gradient(145deg, #1b2945, #101827 75%); overflow: hidden; }
.brand-panel::before, .brand-panel::after { position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }
.brand-panel::before { width: 420px; height: 420px; right: -180px; bottom: -120px; }
.brand-panel::after { width: 270px; height: 270px; right: -85px; bottom: -45px; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: linear-gradient(145deg, #3a8cff, #2063c8); box-shadow: 0 10px 28px rgba(26,104,221,.32); font-size: 23px; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .06em; }
.brand small { margin-top: 3px; color: #9aa8c0; font-size: 12px; }
.brand-copy { position: relative; z-index: 1; margin: auto 0; }
.eyebrow { margin: 0 0 10px; color: #5e9fff; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.brand-copy h1 { margin: 0 0 22px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.18; letter-spacing: -.055em; }
.brand-copy > p:last-child { max-width: 440px; margin: 0; color: #aeb9ca; font-size: 15px; line-height: 1.8; }
.security-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #8998b0; font-size: 12px; }
.security-note span { width: 8px; height: 8px; border-radius: 50%; background: #3fd093; box-shadow: 0 0 0 5px rgba(63,208,147,.1); }

.form-panel { display: grid; min-height: 100vh; place-items: center; padding: 40px 24px; background: radial-gradient(circle at 75% 12%, rgba(40,118,232,.055), transparent 30%), #f4f6fa; }
.login-card { width: min(430px, 100%); padding: 42px 44px 38px; border: 1px solid #e3e8ef; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(29,43,71,.11); }
.card-heading { margin-bottom: 28px; }
.card-heading h2 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.035em; }
.card-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
form label { display: block; margin-bottom: 19px; }
form label > span { display: block; margin-bottom: 7px; color: #465168; font-size: 12px; font-weight: 650; }
input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #fff; color: var(--text); font-size: 14px; transition: border .15s, box-shadow .15s; }
input:focus { border-color: #68a1f2; box-shadow: 0 0 0 3px rgba(40,118,232,.1); }
.password-field { position: relative; }
.password-field input { padding-right: 58px; }
.password-field button { position: absolute; top: 0; right: 0; height: 46px; padding: 0 13px; border: 0; color: #4d77b5; background: transparent; font-size: 11px; font-weight: 700; }
.primary-button { width: 100%; min-height: 47px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); box-shadow: 0 9px 20px rgba(40,118,232,.22); font-size: 14px; font-weight: 700; transition: .18s ease; }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.text-button, .back-button { border: 0; background: transparent; color: #5f6d83; font-size: 12px; }
.text-button { display: block; margin: 18px auto 0; }
.text-button:hover, .back-button:hover { color: var(--blue); }
.back-button { margin: -8px 0 25px; padding: 0; }
.recovery-hint { display: block; margin-top: 7px; color: #8a94a5; font-size: 11px; }
.form-message { min-height: 20px; margin: -3px 0 12px; color: #cf4148; font-size: 12px; line-height: 1.5; }
.form-message.success { color: #16895e; }
.local-note { position: fixed; right: 30px; bottom: 20px; margin: 0; color: #a0a8b5; font-size: 10px; }

@media (max-width: 820px) {
  .login-shell { display: block; }
  .brand-panel { min-height: auto; padding: 23px 22px; }
  .brand-copy, .security-note { display: none; }
  .brand-mark { width: 40px; height: 40px; font-size: 20px; }
  .form-panel { min-height: calc(100vh - 86px); padding: 28px 16px 48px; }
  .login-card { padding: 33px 25px 30px; }
  .local-note { position: static; margin-top: 22px; }
}