/* Sign-in page. The look (name, logo, colours, background, layout) is set in Administration → Login page. */
:root{--bg:#f4f5f7;--surface:#fff;--ink:#374151;--muted:#6b7280;--line:#d8dadd;--accent:#714b67;--accent-ink:#fff;--bad:#d23f3a;--bgc:#f4f5f7;--logoh:64px}
@media (prefers-color-scheme:dark){:root{--bg:#1e2129;--surface:#262a36;--ink:#d1d5db;--muted:#9ca3af;--line:#3b4150;--bad:#f07466;color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body.login-page{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}
.lp{min-height:100vh;display:flex}
.lp-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 16px}
.bg-color .lp-main{background:var(--bgc)}
.bg-gradient .lp-main{background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),radial-gradient(900px 500px at 110% 110%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--bg)}
.lay-center.bg-image .lp-main{background:linear-gradient(rgba(10,12,20,.42),rgba(10,12,20,.42)),var(--bgimg) center/cover no-repeat}
.lay-center.bg-image .powered{color:rgba(255,255,255,.85)}
/* split layout: picture / colour panel on the left, form on the right */
.lp-side{display:none}
.lay-split .lp-side{display:flex;flex:0 0 46%;align-items:flex-end;padding:48px;color:#fff;background:linear-gradient(155deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#000))}
.lay-split.bg-image .lp-side{background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72)),var(--bgimg) center/cover no-repeat}
.lp-side-in{max-width:480px}
.lp-side .side-logo{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:22px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.lp-side .side-logo img{display:block;max-height:64px;max-width:220px;object-fit:contain}
.lp-side h2{font:700 34px/1.15 "Bricolage Grotesque",inherit;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.lp-side p{margin:0;font-size:16px;line-height:1.6;opacity:.92;white-space:pre-line}
/* card */
.card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:32px 32px 24px;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:24px;text-align:center}
.brand .logo{display:block;max-height:var(--logoh);max-width:240px;object-fit:contain}
.mk{width:52px;height:52px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
h1{font:700 21px/1.25 "Bricolage Grotesque",inherit;margin:0;text-wrap:balance}
.brand small{color:var(--muted);font-size:13.5px}
label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
input{font:inherit;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:10px 12px;margin-bottom:16px}
input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
button{font:600 15px inherit;font-family:inherit;border:0;border-radius:6px;padding:11px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button:hover{filter:brightness(.93)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.err{color:var(--bad);font-size:13.5px;min-height:20px;margin:0 0 10px}
.foot{color:var(--muted);font-size:12.5px;margin:16px 0 0;text-align:center;white-space:pre-line}
.powered{color:var(--muted);font-size:12px;margin:0}
@media (max-width:860px){.lay-split .lp{flex-direction:column}.lay-split .lp-side{flex:none;padding:28px 20px;align-items:center;text-align:center;justify-content:center}.lay-split .lp-side-in{margin:auto}.lp-side h2{font-size:24px}.lp-side p{font-size:14px}.lay-split .lp-side .side-logo{display:none}}
@media (max-width:440px){.card{padding:24px 20px 18px}}