/* Sign in (redesigned 8 Oct 2026): the dark band with lake photography behind one cream card. */
/* The photo and veil are fixed, negative-z pseudo-elements: they paint ABOVE the root background but BELOW the body's
   own background, so the band colour goes on html and body stays transparent (9 Oct 2026: a grey strip showed at the
   top and the photo was hidden). */
html{background:var(--band);min-height:100%}
body{position:relative;min-height:100vh;background:transparent;color:var(--ink);margin:0}
body::before{content:"";position:fixed;inset:0;background:url('/library/hero-fisheries.jpg') center 40%/cover no-repeat;opacity:.28;filter:saturate(.8);z-index:-1}
body::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(12,20,9,.55),rgba(12,20,9,.92));z-index:-1}
main.login-main{width:100%;max-width:500px;margin:0 auto;padding:64px 24px 24px}
.login-main a{color:var(--orange-deep);text-decoration:none}.login-main a:hover{text-decoration:underline}
.login-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:28px;color:var(--band-text);font-family:var(--display);font-weight:800;letter-spacing:.12em;text-decoration:none}
.login-brand:hover{text-decoration:none}
.login-brand img{width:64px;height:64px;object-fit:contain;border-radius:14px;background:var(--bg);padding:4px}
.login-brand span{font-size:24px;line-height:1}
.login-brand small{display:block;font-family:var(--text);font-size:10px;letter-spacing:.22em;margin-top:6px;color:var(--band-muted)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.login-main .login-step{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--orange-deep);margin:0 0 12px}
.login-main h1{font-size:44px;font-weight:900;line-height:.95;margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
.login-main #intro{color:var(--muted);line-height:1.5;margin-bottom:24px;font-size:15px}
.login-main label{display:block;margin:18px 0 7px;font-weight:700;font-size:12.5px}
.login-main input:not([type=checkbox]){display:block;width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--card);font:inherit;font-size:15px;color:var(--ink);margin:0;transition:border-color .15s,box-shadow .15s}
.login-main input:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
.password-field{position:relative}.login-main .password-field input{padding-right:70px}
.login-main #show-password{position:absolute;right:6px;top:6px;bottom:6px;padding:0 12px;border:0;background:transparent;color:var(--orange-deep);font-weight:700;border-radius:999px}
.login-main button{cursor:pointer;font:inherit;border-radius:999px}
.login-main form>.primary{width:100%;margin-top:24px;padding:14px;font-weight:700;font-size:15px;background:var(--orange);color:var(--orange-ink);border:0}
.login-main form>.primary:hover{background:var(--orange-hot)}
.login-main form>.secondary{width:100%;margin-top:12px;padding:12px;background:var(--card);border:1.5px solid var(--line);color:var(--ink);font-weight:700}
.login-main button:disabled{opacity:.6;cursor:wait}
.login-main #status{padding:12px 14px;margin:16px 0;background:var(--bg);border-left:3px solid var(--orange);border-radius:6px;line-height:1.5;font-size:14px}
.login-main #status[data-error=true]{background:#fff0e9;color:#803314;border-left-color:#b42318}
.login-main #code{font-size:22px;letter-spacing:5px;font-family:var(--display);font-weight:800}
.login-main #code-help{font-size:13px;line-height:1.5;color:var(--muted)}
.login-main .recovery-option{display:flex;align-items:center;gap:10px;font-weight:500}
.login-main .recovery-option input{width:17px;height:17px;accent-color:var(--orange)}
.login-security{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:12.5px;line-height:1.7}
.account-link{display:block;text-align:center;font-size:13px;margin:24px 0;color:var(--band-text)!important}
.login-main [hidden]{display:none!important}
.back-home{position:fixed;top:14px;left:16px;font-size:13px;font-weight:700;color:var(--band-muted);text-decoration:none;z-index:5}.back-home:hover{color:var(--orange);text-decoration:underline}
@media(max-width:540px){main.login-main{margin:40px auto 24px;padding:0 16px}.login-card{padding:24px}.login-main h1{font-size:36px}}