/* The gate borrows the app's tokens rather than inventing a second look, because a login that
   does not match the thing behind it reads as somebody else's page. */
:root{
  --bg:#f7f7f5; --card:#fff; --ink:#1c1f26; --muted:#61666f; --line:#e3e3df;
  --pri:#1f6feb; --pri-d:#174fbf; --err:#a12a2a;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font-family:'Noto Sans Thai','Inter',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; display:grid; place-items:center; min-height:100dvh; padding:24px}

.gate{width:100%; max-width:400px}
h1{font-size:clamp(1.4rem,1.2rem + 1vw,1.75rem); line-height:1.25; letter-spacing:-.02em; margin:0 0 8px; text-wrap:balance}
.lede{color:var(--muted); margin:0 0 26px}

form{display:grid; gap:6px; background:var(--card); padding:22px 20px;
  border-radius:16px; box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(20,24,33,.05), 0 10px 26px -14px rgba(20,24,33,.35)}
label{font-size:.82rem; font-weight:600; margin-top:10px}
label:first-of-type{margin-top:0}
input{font-family:inherit; font-size:1.05rem; padding:12px 14px; border-radius:10px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); width:100%;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
input:focus{outline:none; border-color:var(--pri); box-shadow:0 0 0 3px rgba(31,111,235,.18)}
input:focus-visible{outline:none}

.err{margin:12px 0 0; color:var(--err); font-size:.86rem; font-weight:600; line-height:1.45}

.primary{margin-top:18px; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer;
  border:none; border-radius:10px; padding:13px 18px; background:var(--pri); color:#fff;
  transition:background .15s var(--ease), transform .15s var(--ease)}
.primary:hover{background:var(--pri-d)}
.primary:active{transform:translateY(1px)}
.primary:disabled{background:#b9bec7; cursor:progress}
.primary:focus-visible{outline:2.5px solid var(--pri); outline-offset:3px}

.note{color:var(--muted); font-size:.8rem; margin:16px 0 0; text-align:center}

@media(prefers-reduced-motion:reduce){ *{transition-duration:.06s !important} .primary:active{transform:none} }