:root{color-scheme:light;--blue:#0755ef;--ink:#112236;--muted:#637084}
*{box-sizing:border-box}
html{min-height:100%;background:#f3f6fc}
body{margin:0;min-height:100svh;padding:48px 24px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 50% 0%,#e5edff 0%,#f3f6fc 58%);line-height:1.65}
.entrance{width:min(100%,700px);padding:42px 64px 44px;text-align:center;background:#fff;border:1px solid #e5eaf5;border-radius:28px;box-shadow:0 20px 60px -25px #16367126;position:relative;overflow:hidden}
.entrance::before{content:"";height:5px;position:absolute;inset:0 0 auto;background:var(--blue)}
.brand{width:min(100%,380px);margin:0 auto 14px}
.brand img{display:block;width:100%;height:auto}
.school{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;padding:6px 13px;background:#f1f5ff;border:1px solid #e4ebfe;border-radius:999px;color:#375378;font-size:12px;font-weight:500}
.school-dot{width:6px;height:6px;flex:0 0 6px;background:var(--blue);border-radius:50%}
h1{font-size:25px;font-weight:700;line-height:1.6;letter-spacing:-.4px;margin:25px -12px 12px}
h1 span{display:block;color:var(--blue)}
.intro{font-size:14px;color:var(--muted);margin:0 0 28px}
.enter{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:15px 24px;border:2px solid transparent;border-radius:13px;background:var(--blue);color:#fff;font-size:18px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px #0755ef24;transition:background .15s,box-shadow .15s}
.enter svg{width:21px;height:21px}
.enter:hover{background:#0647cb;box-shadow:0 10px 24px #0755ef35}
.enter:focus-visible{outline:3px solid #8cafff;outline-offset:5px}
.account-note{font-size:12px;color:#7b8798;margin:15px 0 0}
footer{font-size:11px;color:#7e8b9e;text-align:center;margin-top:25px}
footer span{padding:0 6px}
@media(max-width:520px){body{padding:24px 18px 20px}.entrance{padding:32px 24px;border-radius:23px}.brand{width:min(100%,310px);margin-bottom:10px}.school{font-size:10px;padding:6px 10px;gap:6px}h1{font-size:20px;letter-spacing:-.25px;margin:23px -8px 12px}.intro{font-size:12px;margin-bottom:25px}.enter{font-size:17px;padding:14px 18px}footer{font-size:10px;max-width:290px}}
@media(prefers-reduced-motion:reduce){.enter{transition:none}}