:root {
  --ink: #172321;
  --muted: #687572;
  --paper: #f4f1e9;
  --panel: #fffdf8;
  --deep: #132b2b;
  --teal: #1f7a6c;
  --mint: #c9e2d8;
  --amber: #f1b45d;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .92fr) minmax(480px, 1.08fr); }
.login-story { position: relative; min-height: 100vh; padding: 42px 54px; display: flex; flex-direction: column; overflow: hidden; color: #edf7f3; background: radial-gradient(circle at 18% 83%, rgba(93, 169, 146, .23), transparent 32%), linear-gradient(145deg, #102725 0%, #173834 58%, #102624 100%); }
.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; width: max-content; color: inherit; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #17312e; background: var(--amber); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); font: 700 27px/1 Georgia, serif; }
.brand-mark span { margin-left: 1px; font: 700 12px/1 ui-sans-serif, sans-serif; }
.brand strong, .brand small { display: block; }
.brand strong { font: 600 23px/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: #9eb4ae; font-size: 9px; letter-spacing: .23em; }
.story-copy { position: relative; z-index: 2; width: min(540px, 100%); margin: auto 0; }
.eyebrow { color: #9fc1b6; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.eyebrow.dark { color: #71807c; }
.story-copy h1 { margin: 16px 0 20px; font: 500 clamp(38px, 4.1vw, 62px)/1.12 Georgia, "Songti SC", serif; letter-spacing: -.025em; }
.story-copy p { max-width: 480px; margin: 0; color: #b4c9c2; font-size: 14px; line-height: 1.85; }
.safety-card { position: relative; z-index: 2; width: min(540px, 100%); padding: 15px 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(137,198,177,.24); border-radius: 13px; background: rgba(10,31,28,.38); backdrop-filter: blur(8px); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #75d2ae; box-shadow: 0 0 0 5px rgba(117,210,174,.12); }
.safety-card strong, .safety-card small { display: block; }
.safety-card strong { font-size: 12px; }
.safety-card small { margin-top: 4px; color: #98b0a9; font-size: 10px; }
.lock-pill { padding: 5px 9px; color: #9ed7c4; border-radius: 20px; background: rgba(77,143,123,.18); font-size: 8px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.orbit { position: absolute; border: 1px solid rgba(143,202,182,.11); border-radius: 50%; }
.orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 7px rgba(241,180,93,.08); }
.orbit-one { right: -170px; top: 14%; width: 470px; height: 470px; }
.orbit-one::after { left: 53px; top: 70px; }
.orbit-two { right: -55px; bottom: -180px; width: 390px; height: 390px; }
.orbit-two::after { right: 67px; top: 28px; background: #75d2ae; }
.login-panel { min-height: 100vh; padding: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-card { width: min(430px, 100%); padding: 40px; border: 1px solid rgba(45,68,62,.12); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(25,49,45,.1); }
.login-card h2 { margin: 10px 0 8px; font: 600 34px/1.15 Georgia, "Songti SC", serif; }
.intro { margin: 0 0 30px; color: var(--muted); font-size: 13px; }
form label { display: block; margin: 17px 0 8px; color: #35433f; font-size: 11px; font-weight: 800; }
input { width: 100%; height: 48px; padding: 0 14px; color: var(--ink); border: 1px solid #ccd6d1; border-radius: 10px; outline: 0; background: #fffefa; font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease; }
input::placeholder { color: #9aa5a1; }
input:focus { border-color: #5a9687; box-shadow: 0 0 0 4px rgba(31,122,108,.1); }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.password-field button { position: absolute; right: 7px; top: 7px; height: 34px; padding: 0 9px; color: var(--teal); border: 0; border-radius: 7px; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.password-field button:hover { background: #edf3ef; }
.login-error { min-height: 18px; margin: 11px 0 0; color: #a7433d; font-size: 11px; line-height: 1.5; }
.submit-button { width: 100%; min-height: 48px; margin-top: 8px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #fff; border: 1px solid #176658; border-radius: 10px; background: var(--teal); font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31,122,108,.22); }
.submit-button:disabled { opacity: .65; cursor: wait; transform: none; }
.login-note { margin-top: 24px; padding: 12px; display: flex; gap: 9px; color: #60706b; border-radius: 9px; background: #edf3ef; }
.login-note > span { flex: 0 0 18px; height: 18px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--teal); font: 700 11px/1 Georgia, serif; }
.login-note p { margin: 0; font-size: 10px; line-height: 1.6; }
.login-footer { margin: 22px 0 0; color: #8a9591; font-size: 9px; letter-spacing: .08em; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 28px; }
  .story-copy { margin: 80px 0 70px; }
  .story-copy h1 { font-size: 42px; }
  .login-panel { min-height: auto; padding: 54px 24px; }
}

@media (max-width: 520px) {
  .login-story { padding: 22px; }
  .story-copy { margin: 58px 0 48px; }
  .story-copy h1 { font-size: 34px; }
  .story-copy p { font-size: 12px; }
  .safety-card { grid-template-columns: auto 1fr; }
  .lock-pill { display: none; }
  .login-panel { padding: 34px 16px; }
  .login-card { padding: 28px 22px; }
}