:root {
  --ink: #1c2427;
  --muted: #687176;
  --line: #c8ccca;
  --teal: #256b70;
  --teal-dark: #164e53;
  --coral: #ef6c55;
  --paper: #fbfaf7;
  --mist: #e6efeb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: minmax(390px, 0.86fr) minmax(520px, 1.14fr); min-height: calc(100vh - 82px); }
.auth-panel { padding: 46px clamp(32px, 6vw, 112px) 44px; display: flex; flex-direction: column; justify-content: center; background: white; }
.auth-copy { max-width: 470px; }
.eyebrow { margin: 0 0 13px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-family: "Space Grotesk", sans-serif; font-size: clamp(34px, 4vw, 51px); line-height: .98; letter-spacing: -2px; }
.auth-copy > p:last-child { margin-bottom: 30px; color: var(--muted); font-size: 15px; }
form { max-width: 470px; }
.demo-notice { margin: 0 0 14px; color: var(--coral); font-size: 12px; font-weight: 700; }
.field-label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14px; font-weight: 700; }
input { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 15px 17px; outline: 0; color: var(--ink); background: white; transition: border .2s, box-shadow .2s; }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #256b7020; }
input::placeholder { color: #99a0a1; }
.login-row { position: relative; display: grid; grid-template-columns: 1fr 90px; gap: 38px; align-items: center; }
.login-row input { padding-right: 50px; }
.input-icon { position: absolute; right: 108px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.field-error { display: block; min-height: 16px; margin-top: 4px; color: #bc4939; font-size: 11px; }
.primary-btn { width: 90px; height: 90px; display: grid; place-items: center; border: 0; border-radius: 16px; color: white; background: #414143; transition: transform .2s, background .2s; }
.primary-btn:hover { transform: translateY(-2px); background: var(--teal); }
.primary-btn span { font-size: 42px; font-weight: 300; line-height: 12px; }
.form-status { min-height: 20px; margin: 13px 0 0; color: var(--teal); font-size: 13px; font-weight: 600; }
.auth-links { display: flex; justify-content: space-between; max-width: 470px; margin-top: 26px; }
.text-btn, .mode-btn { border: 0; padding: 0; color: var(--teal); background: transparent; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.text-btn span { margin-right: 5px; text-decoration: none; }
.content-panel { position: relative; overflow: hidden; background: var(--mist); }
.content-topline { position: absolute; z-index: 2; top: 30px; left: 36px; display: flex; gap: 13px; align-items: center; color: white; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.content-topline span:first-child { padding: 8px 14px; border-radius: 40px; background: #164e53cc; }
.content-topline span:last-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #164e53cc; font-size: 17px; }
.feature-image { height: 59%; min-height: 390px; background: linear-gradient(90deg, #284c4fbb, transparent 65%), url("https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=1400&q=85") center/cover; }
.feature-copy { padding: 35px 8% 30px; background: #fffdf9; }
.feature-copy h2 { margin-bottom: 14px; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: clamp(36px, 5vw, 64px); line-height: .91; letter-spacing: -3px; }
.feature-copy p:last-child { max-width: 540px; margin-bottom: 0; color: #485356; font-size: 16px; line-height: 1.55; }
.security-strip { display: flex; justify-content: space-between; min-height: 205px; padding: 32px 8%; background: #dce9df; }
.security-strip h3 { margin-bottom: 7px; font-family: "Space Grotesk", sans-serif; font-size: 27px; }
.security-strip p:last-child { max-width: 300px; margin-bottom: 0; color: #50605c; font-size: 14px; }
.strip-image { width: 36%; border-radius: 10px 0 0 10px; background: url("https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=600&q=85") center/cover; }
.bottom-nav { display: flex; justify-content: center; gap: clamp(25px, 6vw, 100px); min-height: 82px; padding: 14px 20px 10px; border-top: 1px solid #e6e5e1; background: #fffdf9; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #687176; font-size: 12px; font-weight: 600; text-decoration: none; }
.bottom-nav a span { font-size: 23px; line-height: 25px; }
.bottom-nav a.active { color: var(--coral); }
.demo-shell { display: grid; place-items: center; min-height: 100vh; padding: 32px; background: var(--mist); }
.demo-panel { width: min(100%, 470px); padding: 48px; background: white; }
.demo-panel[hidden] { display: none; }
.demo-panel h1 { margin-bottom: 34px; font-size: clamp(34px, 6vw, 51px); }
.demo-description { margin: -18px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.final-panel { text-align: center; }
.final-panel h1 { color: var(--teal-dark); }
.demo-form { display: grid; gap: 9px; }
.demo-form label { margin-top: 13px; color: var(--ink); font-size: 14px; font-weight: 700; }
.otp-timer { color: var(--teal); font-size: 12px; font-weight: 700; }
.otp-timer.expired { color: #bc4939; }
.otp-btn { margin-top: 18px; border: 0; border-radius: 5px; padding: 15px 18px; color: white; background: var(--teal-dark); font-weight: 700; }
.otp-btn:hover { background: var(--teal); }
.otp-btn:disabled { cursor: not-allowed; opacity: .45; }
.otp-error { display: none; margin: 4px 0 0; color: #bc4939; font-size: 13px; font-weight: 700; }
.otp-error.visible { display: block; }
.otp-overlay { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; background: #164e53dd; }
.otp-overlay[hidden] { display: none; }
.otp-overlay-box { padding: 24px 30px; color: white; background: var(--teal-dark); font-weight: 700; }
@media (max-width: 430px) { .demo-shell { padding: 20px; } .demo-panel { padding: 32px 25px; } }
@media (max-width: 800px) { .app-shell { display: block; min-height: auto; } .auth-panel { min-height: auto; padding: 87px 25px 72px; } .auth-copy { margin-bottom: 8px; } .content-panel { display: block; } .feature-image { height: 230px; min-height: 0; } .feature-copy { padding: 28px 25px; } .security-strip { display: none; } .bottom-nav { position: sticky; bottom: 0; z-index: 3; justify-content: space-between; gap: 4px; } }
@media (max-width: 430px) { .auth-links { gap: 12px; font-size: 13px; } .text-btn:last-child { white-space: nowrap; } }