:root{--bg:#F5F5F7;--card:#fff;--fg:#1D1D1F;--muted:#6E6E73;--sep:rgba(0,0,0,.1);--fill:rgba(0,0,0,.045);--tint:#0071E3;--on-tint:#fff;--red:#D70015;
 --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000;--card:#1C1C1E;--fg:#F5F5F7;--muted:#98989D;--sep:rgba(255,255,255,.14);--fill:rgba(255,255,255,.07);--tint:#2997FF;--red:#FF6961;color-scheme:dark}}
:root[data-theme=dark]{--bg:#000;--card:#1C1C1E;--fg:#F5F5F7;--muted:#98989D;--sep:rgba(255,255,255,.14);--fill:rgba(255,255,255,.07);--tint:#2997FF;--red:#FF6961;color-scheme:dark}
*{box-sizing:border-box;margin:0}
body{font:16px/1.45 var(--ui);background:var(--bg);color:var(--fg);min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;-webkit-font-smoothing:antialiased}
.art{background:#111 url(/img/login.webp) center/cover;position:relative}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.art p{position:absolute;left:40px;bottom:36px;z-index:1;color:#fff;font-size:22px;font-weight:600;letter-spacing:-.01em;max-width:420px}
main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.box{width:100%;max-width:380px;animation:in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
h1{font-size:32px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.sub{color:var(--muted);margin-bottom:26px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px}
input{width:100%;height:50px;border-radius:14px;border:1px solid var(--sep);background:var(--card);color:var(--fg);font:inherit;font-size:17px;padding:0 16px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:var(--tint);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 22%,transparent)}
input.code{letter-spacing:.5em;text-align:center;font-size:24px;font-variant-numeric:tabular-nums}
button{width:100%;height:50px;border:0;border-radius:14px;background:var(--tint);color:var(--on-tint);font:inherit;font-weight:600;font-size:17px;margin-top:22px;cursor:pointer;transition:transform .15s,opacity .2s}
button:active{transform:scale(.98)}button:disabled{opacity:.55;cursor:default}
.err{color:var(--red);font-size:14px;min-height:20px;margin-top:12px}
.qr{background:#fff;border-radius:16px;padding:12px;width:200px;height:200px;margin:4px auto 14px;display:block}
.secret{font:13px ui-monospace,Menlo,monospace;background:var(--fill);padding:10px 12px;border-radius:10px;word-break:break-all;text-align:center;user-select:all}
.foot{color:var(--muted);font-size:12.5px;margin-top:28px;line-height:1.5}
[hidden]{display:none!important}
@media (max-width:820px){body{grid-template-columns:1fr}.art{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Wilton brand (26 Oct 2026) */
:root{--bg:#F4F0E6;--card:#FFFDF8;--fg:#0E2419;--muted:#5A6A61;--sep:rgba(14,36,25,.14);--fill:rgba(14,36,25,.05);--tint:#153327;--on-tint:#F4F0E6;--red:#A3302A;--ui:"Manrope",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0B1912;--card:#12271D;--fg:#EFE8D8;--muted:#A3AEA6;--sep:rgba(239,232,216,.14);--fill:rgba(239,232,216,.06);--tint:#D5DED8;--on-tint:#0E2419;--red:#EF8A82}}
:root[data-theme=dark]{--bg:#0B100D;--card:#121A16;--fg:#F1EDE4;--muted:#A4ADA7;--sep:rgba(244,240,230,.12);--fill:rgba(244,240,230,.05);--tint:#D5DED8;--on-tint:#0B100D;--red:#F08A80}
h1,.art p{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600}
.art p{font-size:30px}

/* Black card (dark, the default for clients): hairlines, champagne gold, a quieter sign-in. */
:root[data-theme=dark] .box{background:linear-gradient(150deg,#16201B,#0D1310);border:1px solid rgba(213,222,216,.2);border-radius:22px;padding:36px 32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -40px #000}
:root[data-theme=dark] input{background:#0B100D}
:root[data-theme=dark] input:focus{box-shadow:0 0 0 4px rgba(213,222,216,.16)}
:root[data-theme=dark] .art::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 30%,rgba(0,0,0,.75))}
@media (max-width:820px){:root[data-theme=dark] .box{padding:28px 22px}}
/* The client's chosen style (see portal.css): same scheme, its own colours. */
:root[data-style=green]{--bg:#09160F;--card:#10251B;--fg:#F4F0E6;--muted:#A9B3AB;--sep:rgba(244,240,230,.12);--fill:rgba(244,240,230,.05);--tint:#D5DED8;--on-tint:#09160F}
:root[data-style=midnight]{--bg:#080B12;--card:#10151F;--fg:#E7EAF0;--muted:#A0A7B4;--sep:rgba(220,228,240,.12);--fill:rgba(220,228,240,.05);--tint:#C6CDD8;--on-tint:#080B12}
:root[data-style=green] .box{background:linear-gradient(150deg,#153327,#0C1C14);border-color:rgba(213,222,216,.22)}
:root[data-style=midnight] .box{background:linear-gradient(150deg,#161C2A,#0C111B);border-color:rgba(198,205,216,.28)}
:root[data-style=green] input,:root[data-style=midnight] input{background:var(--bg)}
:root[data-style=pearl]{--bg:#F5F5F5;--card:#fff;--fg:#0B100D;--muted:#3E5249;--sep:rgba(11,16,13,.12);--fill:rgba(11,16,13,.045);--tint:#0E2419;--on-tint:#F4F0E6}
:root[data-style=platinum]{--bg:#E8E9EB;--card:#F8F8F9;--fg:#15181C;--muted:#50565E;--sep:rgba(22,25,29,.14);--fill:rgba(22,25,29,.05);--tint:#24282E;--on-tint:#EEF0F2}

/* iPhone and iPad: Safari zooms the page in when a text box under 16px is tapped, and the page then no longer fits the
   screen. Text boxes on touch screens and phones are 16px. */
@media (max-width:820px),(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}

/* Motion (Boss, 8 Nov 2026, React Bits ideas): moving light behind the box, the picture drifting slowly. */
main{position:relative;overflow:hidden}
main>.box{position:relative;z-index:1}
.art{overflow:hidden;background:#111}
.art::before{content:"";position:absolute;inset:0;background:url(/img/login.webp) center/cover;transform-origin:60% 40%;animation:kb 38s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.2%,-.8%)}}
@media (prefers-reduced-motion:reduce){.art::before{animation:none}}