/* Sign in and register pages: OpenDesign "premium" tokens. */
:root{
  --primary:#3B82F6; --danger:#DC2626; --success:#16A34A;
  --surface:#FFFFFF; --text:#111827;
  --canvas:color-mix(in srgb,var(--text) 3%,var(--surface));
  --muted:color-mix(in srgb,var(--text) 55%,var(--surface));
  --faint:color-mix(in srgb,var(--text) 35%,var(--surface));
  --line:color-mix(in srgb,var(--text) 10%,var(--surface));
  --tint:color-mix(in srgb,var(--primary) 9%,var(--surface));
  --r-lg:20px; --r-md:14px;
  --shadow:0 1px 2px color-mix(in srgb,var(--text) 6%,transparent),0 24px 48px -24px color-mix(in srgb,var(--text) 22%,transparent);
  --font:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:400 15px/1.5 var(--font);color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px 16px;background:radial-gradient(1200px 500px at 50% -10%,var(--tint),transparent 70%),var(--canvas)}


.signin{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:20px}
.box{width:100%;background:var(--surface);border-radius:24px;padding:36px 36px 32px;box-shadow:var(--shadow);border:1px solid var(--line)}
.crest-mark{width:44px;height:44px;border-radius:12px;background:var(--surface);overflow:hidden;display:grid;place-items:center;border:1px solid var(--line);flex:none}
.crest-mark span{display:block;width:34px;height:40px;background:url(mnmjec/logo.png) no-repeat -18px -2px / auto 43px}
.app{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.app-mark{width:36px;height:36px;border-radius:10px;background:var(--text);color:var(--surface);display:grid;place-items:center;font-weight:800;font-size:13px}
.app b{font-size:16px;letter-spacing:-.01em}
.app small{display:block;font-size:12px;color:var(--muted);margin-top:-2px}
h2{font-size:28px;font-weight:700;letter-spacing:-.03em}
.lede{color:var(--muted);margin:6px 0 32px}
form{display:grid;gap:18px}
label{display:grid;gap:7px;font-size:13px;font-weight:600}
.hint{font-weight:400;color:var(--muted);font-size:12.5px}
.field{position:relative}
input{width:100%;font:inherit;font-weight:400;font-size:15px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--faint)}
input:hover{border-color:color-mix(in srgb,var(--text) 20%,var(--surface))}
input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--tint)}
input[aria-invalid=true]{border-color:var(--danger)}
.reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer}
.reveal:hover{color:var(--text);background:var(--canvas)}
.error{display:none;font-size:13px;color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--surface));border-radius:10px;padding:10px 12px}
.error.show{display:block}
button.go{margin-top:6px;font:inherit;font-weight:600;font-size:15px;padding:14px;border:0;border-radius:12px;background:var(--text);color:var(--surface);cursor:pointer;transition:transform .12s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:8px}
button.go:hover{box-shadow:var(--shadow)}
button.go:active{transform:scale(.99)}
button.go svg{width:18px;height:18px;transition:transform .2s}
button.go:hover svg{transform:translateX(3px)}
.help{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.help b{color:var(--text);font-weight:600}
.foot{font-size:12px;color:var(--faint);text-align:center;max-width:46ch}

@media (max-width:520px){
  .page{justify-content:flex-start;padding:24px 12px}
  .box{padding:28px 20px 24px;border-radius:20px}
  h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
select{width:100%;font:inherit;font-weight:400;font-size:15px;padding:13px 40px 13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center / 18px;color:var(--text);appearance:none;cursor:pointer}
select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--tint)}
.field-error{font-size:12.5px;font-weight:500;color:var(--danger);min-height:0}
.notice{display:none;font-size:13.5px;border-radius:12px;padding:12px 14px;background:var(--tint);color:var(--text)}
.notice.show{display:block}
.switch{margin-top:22px;font-size:14px;color:var(--muted);text-align:center}
.switch a{color:var(--primary);font-weight:600;text-decoration:none}
.switch a:hover{text-decoration:underline}
.done{display:none;text-align:center;padding:12px 0}
.done.show{display:block}
.done .tick{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)}
.done .tick svg{width:28px;height:28px}
.done h2{margin-bottom:8px}
.done p{color:var(--muted);margin-bottom:24px}
.back-home{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;margin-bottom:28px}
.back-home:hover{color:var(--text)}
.back-home svg{width:16px;height:16px}
button.go[disabled]{opacity:.6;cursor:progress}