:root {
  color-scheme: light;
  --ink: #14263b;
  --muted: #66768a;
  --line: #dce5ed;
  --blue: #1677c8;
  --blue-dark: #095b9c;
  --teal: #10a6a0;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #edf3f7; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(480px, 1.1fr); }
.auth-brand { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 112px); display: flex; flex-direction: column; justify-content: center; color: white; background: linear-gradient(145deg, #0b304d 0%, #0d5f89 52%, #159b9b 100%); }
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.auth-brand::before { width: 520px; height: 520px; right: -260px; top: -180px; }
.auth-brand::after { width: 330px; height: 330px; left: -180px; bottom: -160px; }
.brand-mark { width: 64px; height: 64px; position: relative; margin-bottom: 34px; }
.brand-mark::before, .brand-mark::after, .brand-mark span, .brand-mark i { content: ""; position: absolute; inset: 10px 29px; background: #72e4dc; border-radius: 4px; transform-origin: center; }
.brand-mark::after { transform: rotate(60deg); }
.brand-mark span { transform: rotate(120deg); }
.brand-mark i { inset: 25px; background: white; border-radius: 50%; z-index: 2; }
.eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; opacity: .72; }
.auth-brand h1 { margin: 0; font-size: clamp(52px, 6vw, 84px); line-height: 1; letter-spacing: -.055em; }
.auth-brand > p:not(.eyebrow) { margin: 18px 0 0; font-size: 18px; color: rgba(255,255,255,.78); }
.feature-line { margin-top: 72px; display: flex; align-items: center; gap: 16px; }
.feature-line b { font-size: 44px; font-weight: 300; line-height: 1; color: #75eee5; }
.feature-line span { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.28); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72); }
.auth-panel { padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-card { width: min(100%, 430px); padding: 46px; border: 1px solid rgba(20,38,59,.08); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(28,58,84,.12); }
.auth-card .eyebrow { color: var(--blue); opacity: 1; }
.auth-card h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.sub { margin: 12px 0 32px; color: var(--muted); font-size: 14px; line-height: 1.7; }
form { display: grid; }
label { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
input { width: 100%; height: 48px; margin-bottom: 20px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfc; color: var(--ink); font: inherit; outline: none; }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,200,.12); background: white; }
button, .primary-link { display: grid; place-items: center; width: 100%; min-height: 48px; border: 0; border-radius: 8px; color: white; background: linear-gradient(100deg, var(--blue-dark), var(--blue)); font: 700 14px inherit; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
button:hover, .primary-link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(22,119,200,.24); }
button:disabled { opacity: .65; cursor: wait; }
.error { min-height: 20px; margin: -6px 0 12px; color: #c83b3b; font-size: 12px; }
.register-link { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
a { color: var(--blue-dark); font-weight: 700; }
.legal { margin: 24px 0 0; color: #8090a1; font-size: 11px; }
.closed-card { text-align: center; }
.closed-card .sub { margin-bottom: 28px; }
.lock { width: 58px; height: 58px; margin: 0 auto 28px; display: grid; place-items: center; border-radius: 50%; background: #e8f3f8; color: var(--blue); font-size: 30px; transform: rotate(-45deg); }

@media (max-width: 780px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { min-height: 280px; padding: 42px 30px; }
  .auth-brand h1 { font-size: 52px; }
  .feature-line { display: none; }
  .auth-panel { padding: 28px 18px 40px; justify-content: flex-start; }
  .auth-card { margin-top: -56px; position: relative; padding: 34px 26px; }
}