* { box-sizing: border-box; }
:root { --ink: #151515; --muted: #767676; --line: #e8e8e5; --lime: #d9ff43; --lime-deep: #c8f22c; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #f7f7f4; }
button, input { font: inherit; }
.login-shell { display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(480px, .92fr); min-height: 100vh; padding: 14px; }
.login-story { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 28px); overflow: hidden; padding: 38px 42px; border-radius: 26px; background: #161714; color: #fff; }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px; width: max-content; color: #fff; text-decoration: none; font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.brand-mark, .mobile-brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--lime); color: #111; font-size: 16px; }
.story-copy { position: relative; z-index: 2; margin: auto 0; }
.kicker, .eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.kicker { color: var(--lime); }
.story-copy h1 { margin: 0; font-size: clamp(48px, 5.3vw, 82px); line-height: .98; letter-spacing: -.065em; font-weight: 760; }
.story-copy h1 em { color: var(--lime); font-style: normal; }
.story-note { max-width: 510px; margin: 30px 0 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.8; }
.story-foot { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,.4); font-size: 12px; }
.story-grid { position: absolute; right: -80px; bottom: -90px; display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; transform: rotate(-8deg); opacity: .9; }
.story-grid span { height: 120px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.025); }
.story-grid span:nth-child(2), .story-grid span:nth-child(6) { background: var(--lime); opacity: .88; }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; }
.login-card { width: min(100%, 430px); }
.mobile-brand { display: none; }
.eyebrow { color: #9a9a92; }
.login-card h2 { margin: 0; font-size: 38px; line-height: 1.15; letter-spacing: -.045em; }
.login-intro { margin: 12px 0 36px; color: var(--muted); font-size: 14px; }
form { display: grid; gap: 22px; }
label { display: grid; gap: 9px; }
label > span:first-child { font-size: 13px; font-weight: 750; }
input { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: 13px; outline: none; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
input::placeholder { color: #b2b2ad; }
input:focus { border-color: #a9c72f; box-shadow: 0 0 0 4px rgba(217,255,67,.25); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 70px; }
.password-field button { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); border: 0; background: transparent; color: #73736e; font-size: 12px; font-weight: 750; cursor: pointer; }
.form-error { min-height: 18px; margin: -8px 0 -8px; color: #c73737; font-size: 12px; }
.submit { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px 0 20px; border: 0; border-radius: 14px; background: var(--lime); color: #111; font-weight: 850; cursor: pointer; transition: transform .18s, background .18s; }
.submit:hover { transform: translateY(-1px); background: var(--lime-deep); }
.submit:disabled { cursor: wait; opacity: .65; transform: none; }
.submit b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #111; color: #fff; font-size: 16px; }
.secure-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #91918b; font-size: 11px; }
.secure-note i { width: 7px; height: 7px; border-radius: 50%; background: #95c11f; box-shadow: 0 0 0 4px rgba(149,193,31,.13); }
.panel-foot { position: absolute; bottom: 28px; margin: 0; color: #aaa; font-size: 10px; letter-spacing: .12em; }
@media (max-width: 900px) {
  .login-shell { display: block; padding: 0; background: #fff; }
  .login-story { display: none; }
  .login-panel { min-height: 100vh; padding: 32px 24px; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 64px; font-size: 17px; font-weight: 850; }
  .login-card h2 { font-size: 34px; }
  .panel-foot { bottom: 20px; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .login-story { padding: 28px 32px; }
  .story-copy h1 { font-size: 54px; }
  .login-panel { padding: 28px 48px; }
  .login-intro { margin-bottom: 24px; }
  form { gap: 16px; }
}