:root{
  --navy:#0a2459;
  --ink-soft:#1d3a72;
  --sky:#0a92e2;
  --sky-dark:#0a7fd0;
  --ice:#eaf6fe;
  --ice-line:#cfe8f8;
  --muted:#7e8aa3;
  --success:#0a6b3c;
  --danger:#b4232c;
  --white:#fff;
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--navy);background:var(--ice);line-height:1.5}
button,input{font:inherit;color:inherit}
a{color:var(--sky)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;
  border:0;border-radius:10px;background:var(--sky);color:var(--white);
  font-weight:700;font-size:15px;cursor:pointer;
}
.btn:hover{background:var(--sky-dark)}
.btn:focus-visible{outline:3px solid rgba(10,146,226,.35);outline-offset:2px}

.app-main{min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:48px}
.app-title{font-size:28px;font-weight:800}

.auth{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;
  background:var(--ice-line);
}
.auth-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.auth-bg-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.auth::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 42%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%);
}


.auth-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(28px,6vh,64px) 16px 56px}
.auth-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:clamp(24px,4vh,48px) 0}
.auth-logo{display:block;width:min(320px,70vw);height:auto}

.auth-panel{
  width:min(400px,100%);padding:28px;
  border:1px solid rgba(207,232,248,.95);border-radius:18px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.auth-error{margin-bottom:18px;padding:10px 14px;border:1px solid rgba(180,35,44,.25);border-radius:10px;background:rgba(255,255,255,.85);color:var(--danger);font-size:14px;font-weight:600}

.auth-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.auth-field{
  position:relative;display:flex;align-items:center;margin-bottom:18px;
  height:52px;border:1px solid var(--ice-line);border-radius:12px;background:var(--white);
}
.auth-field:focus-within{border-color:var(--sky);outline:3px solid rgba(10,146,226,.22)}
.auth-field-ico{flex:none;width:22px;height:22px;margin-left:16px;fill:var(--navy)}
.auth-field-ico-line{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-input{flex:1;min-width:0;height:100%;padding:0 14px;border:0;outline:0;background:none;font-size:16px;font-weight:600;letter-spacing:.01em}
.auth-input[type=password]{letter-spacing:.12em}

.auth-reveal{flex:none;display:grid;place-items:center;width:46px;height:100%;border:0;border-radius:0 12px 12px 0;background:none;color:var(--muted);cursor:pointer}
.auth-reveal:hover{color:var(--navy)}
.auth-reveal:focus-visible{outline:2px solid var(--sky);outline-offset:-4px}
.auth-reveal svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-reveal-off,.auth-reveal[aria-pressed=true] .auth-reveal-on{display:none}
.auth-reveal[aria-pressed=true] .auth-reveal-off{display:block}

.auth-submit{
  display:block;width:100%;height:52px;margin-top:6px;border:0;border-radius:12px;
  background:var(--sky);color:var(--white);font-size:16px;font-weight:800;letter-spacing:.02em;cursor:pointer;
  transition:background-color .15s;
}
.auth-submit:hover{background:var(--sky-dark)}
.auth-submit:focus-visible{outline:3px solid rgba(10,146,226,.35);outline-offset:2px}
.auth-submit.is-busy{opacity:.7;cursor:progress}

.auth-switch{margin-top:18px;text-align:center;font-size:14px;font-weight:600;color:var(--ink-soft)}
.auth-switch-link{color:var(--sky);font-weight:800;text-decoration:none}
.auth-switch-link:hover{color:var(--sky-dark);text-decoration:underline}
.auth-switch-link:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:4px}
.auth-link-btn{border:0;background:none;padding:0;font-size:14px;cursor:pointer}
.auth-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.auth-label-opt{font-weight:600;color:var(--muted)}
.auth-field.is-invalid{border-color:var(--danger)}
.auth-field-err{margin:-12px 0 16px;font-size:13px;font-weight:600;color:var(--danger)}

.auth-confirm{text-align:center}
.auth-status{display:inline-block;margin-bottom:16px;padding:5px 14px;border:1px solid var(--ice-line);border-radius:999px;background:var(--ice);font-size:13px;font-weight:700;color:var(--ink-soft)}
.auth-confirm-name{font-size:20px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.auth-confirm-phone{margin:4px 0 22px;font-size:16px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.auth-wa{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.auth-wa-ico{width:22px;height:22px;fill:currentColor}

.auth-foot{position:absolute;left:0;right:0;bottom:0;padding:12px;text-align:center;font-size:13px;font-weight:600;color:var(--white);text-shadow:0 1px 6px rgba(10,36,89,.6)}

@media (max-width:640px){
  .auth-bg-img{object-position:30% 100%}
    .auth-main{padding-top:36px;padding-bottom:48px}
  .auth-logo{width:min(240px,66vw)}
  .auth-panel{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}