:root{--teal:#14b8c4;--teal-dark:#0a98a8;--navy:#0b1b33;--navy-2:#10263f;--gold:#f5c451;--text:#0b1b33;--muted:#5b6b80;--line:#d9dfe7}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--navy);-webkit-font-smoothing:antialiased}

.auth{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}

/* ---------- Left: brand artwork ---------- */
.brand{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:44px 56px;
  background:linear-gradient(180deg,rgba(6,18,36,.55) 0%,rgba(6,18,36,.05) 35%,rgba(6,18,36,.15) 65%,rgba(6,18,36,.85) 100%),url('/images/welcome-bg.jpg') center bottom/cover no-repeat,var(--navy)}
.brand .logo{width:min(320px,60%)}
.brand .hero{max-width:520px;margin-top:44px}
.brand h2{margin:0 0 10px;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.3px}
.brand h2 span{color:var(--teal)}
.brand p{margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.55}
.brand .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand .tagline{width:min(220px,40%)}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;background:rgba(11,27,51,.62);backdrop-filter:blur(6px);font-size:12px;line-height:1.25;border:1px solid rgba(255,255,255,.12)}
.badge svg{width:20px;height:20px;flex:none;stroke:#fff}

/* ---------- Right: sign-in card ---------- */
.panel{display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(900px 500px at 80% -10%,rgba(20,184,196,.22),transparent 60%),linear-gradient(180deg,var(--navy-2),var(--navy))}
.card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:40px 36px 30px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.card .mark{display:block;width:56px;height:56px;border-radius:16px;margin:0 0 22px;box-shadow:0 8px 20px rgba(11,27,51,.25)}
.card h1{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.3px}
.card .sub{margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.5}

.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;margin-bottom:18px;font-size:13px;background:#fdecea;color:#a3271f;border:1px solid #f6c9c5}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}

.alert.ok{background:#e8f8ef;color:#136b3a;border-color:#bfe8cf}
.input input.code{padding:0 16px 0 44px;font-size:24px;font-weight:700;letter-spacing:10px;text-align:left}
.input input.code::placeholder{letter-spacing:10px;font-weight:600}
.links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:13px;color:#9aa5b4;flex-wrap:wrap}
.links form{margin:0}
.link{background:none;border:0;padding:4px 2px;font:inherit;font-weight:600;color:var(--teal-dark);cursor:pointer}
.link:hover{text-decoration:underline}
.card strong{color:var(--text)}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px;letter-spacing:.2px}
.input{position:relative}
.input>svg.lead{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:#8a94a3;pointer-events:none}
.input input{width:100%;height:50px;padding:0 44px 0 44px;border:1.5px solid var(--line);border-radius:14px;font:inherit;font-size:15px;color:var(--text);background:#f8fafc;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.input input::placeholder{color:#9aa5b4}
.input input:hover{border-color:#b9c3d0}
.input input:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(20,184,196,.18)}
.input .toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;cursor:pointer;display:grid;place-items:center;color:#8a94a3}
.input .toggle:hover{background:#eef2f6;color:var(--text)}
.input .toggle svg{width:20px;height:20px;stroke:currentColor}

.row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 22px;font-size:13px;color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--teal);margin:0}

.btn{width:100%;height:52px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));box-shadow:0 10px 24px rgba(20,184,196,.38);transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{filter:brightness(1.05);box-shadow:0 12px 28px rgba(20,184,196,.46)}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px;height:20px;stroke:#fff}
.btn[disabled]{opacity:.75;cursor:progress}
.btn .spin{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spin{display:block}.btn.loading .arrow,.btn.loading .txt{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.legal{margin:22px 0 0;text-align:center;font-size:12px;color:#8a94a3}

/* ---------- Tablet / phone ---------- */
@media (max-width:980px){
  .auth{grid-template-columns:1fr}
  .brand{display:none}
  .panel{min-height:100vh;padding:20px;background:linear-gradient(180deg,rgba(6,18,36,.7),rgba(6,18,36,.85)),url('/images/welcome-bg.jpg') center bottom/cover no-repeat,var(--navy)}
  .card{padding:32px 24px 24px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}

/* six-box one-time code */
.otp{display:flex;gap:10px;justify-content:space-between}
.otp input{flex:1 1 0;min-width:0;width:100%;height:58px;padding:0;text-align:center;font:inherit;font-size:24px;font-weight:700;color:var(--text);border:1.5px solid var(--line);border-radius:14px;background:#f8fafc;outline:none;caret-color:var(--teal);transition:border-color .15s,box-shadow .15s,background .15s,transform .1s}
.otp input:hover{border-color:#b9c3d0}
.otp input:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(20,184,196,.18);transform:translateY(-1px)}
.otp input.filled{border-color:var(--teal);background:#eefafb}
.otp input[readonly]{opacity:.8}
@media(max-width:420px){.otp{gap:6px}.otp input{height:52px;font-size:21px;border-radius:12px}}