/* Sign-in, 2FA and password pages (django-allauth), Catppuccin Mocha to match the site */
:root{--crust:#11111b;--mantle:#181825;--base:#1e1e2e;--s0:#313244;--s1:#45475a;--ov:#7f849c;--sub:#a6adc8;--text:#cdd6f4;
  --mauve:#cba6f7;--green:#a6e3a1;--red:#f38ba8;--yellow:#f9e2af}
*{box-sizing:border-box}
html,body{margin:0;background:var(--crust);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh;background:radial-gradient(1000px 500px at 50% -10%,#2a2440 0%,var(--crust) 60%) fixed}
.auth{max-width:440px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 16px 40px}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:18px;color:var(--sub)}
.brand b{color:var(--mauve)}.brand img{border-radius:10px}
.card{background:var(--mantle);border:1px solid var(--s0);border-radius:16px;padding:20px}
h1{font-size:21px;margin:0 0 10px}h2{font-size:17px;margin:16px 0 8px}
p{color:var(--sub);margin:0 0 12px}
a{color:var(--mauve)}
form{display:flex;flex-direction:column;gap:12px;margin:0}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--sub)}
input[type=text],input[type=password],input[type=email],input[type=number],input:not([type]){width:100%;background:var(--base);color:var(--text);
  border:1px solid var(--s1);border-radius:10px;font:inherit;font-size:16px;padding:10px 12px}
input:focus{outline:none;border-color:var(--mauve)}
input[type=checkbox]{width:18px;height:18px}
button,.button,a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--mauve) 70%,transparent);background:color-mix(in srgb,var(--mauve) 16%,var(--base));
  color:var(--text);font:inherit;font-weight:650;cursor:pointer;text-decoration:none}
button:hover{background:var(--mauve);color:var(--crust)}
button[type=submit]{width:100%}
button.link{width:auto;min-height:0;padding:0;border:0;background:none;color:var(--mauve);font-weight:400;text-decoration:underline}
button.link:hover{background:none;color:var(--text)}
ul.errorlist,.errorlist{list-style:none;margin:0;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--red) 14%,var(--base));
  color:var(--red);font-size:13px}
.msgs{list-style:none;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:color-mix(in srgb,var(--green) 12%,var(--mantle));
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.helptext,small{color:var(--ov);font-size:12px}
img[src^="data:"]{background:#fff;padding:10px;border-radius:12px;max-width:220px;display:block;margin:6px auto 12px}
pre,code{background:var(--base);border:1px solid var(--s0);border-radius:10px;padding:2px 6px;font-size:15px;word-break:break-all}
pre{padding:12px;white-space:pre-wrap;line-height:1.9}
table{width:100%;border-collapse:collapse}td,th{padding:6px;border-bottom:1px solid var(--s0);text-align:left}
.links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:14px;align-items:center}
.links form{display:inline}
.foot{text-align:center;color:var(--ov);font-size:12px;margin-top:24px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
textarea{width:100%;background:var(--base);color:var(--text);border:1px solid var(--s1);border-radius:10px;font:inherit;font-size:16px;padding:10px 12px}
.cf-turnstile{min-height:65px}

/* privacy note on the apply page */
.privacy { margin-top: 1.25rem; font-size: .9em; }
.privacy summary { cursor: pointer; font-weight: 600; }
.privacy ul { padding-left: 1.2em; display: grid; gap: .4em; }

/* Showcase (sign-in and apply pages): screenshots of a demo copy of the site drifting behind the form */
.showcase{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sc-grid{position:absolute;top:-30%;left:-25%;width:150%;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  transform:rotate(-7deg);animation:sc-drift 90s ease-in-out infinite alternate}
.sc-shot{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--s1);box-shadow:0 18px 40px #0009;background:var(--base)}
.sc-shot img{display:block;width:100%;height:auto;aspect-ratio:1400/875;object-fit:cover;opacity:.82}
.sc-shot figcaption{position:absolute;left:12px;bottom:12px;background:#11111be6;color:var(--text);font-size:15px;font-weight:650;
  padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--mauve) 55%,transparent)}
@keyframes sc-drift{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(-7deg) translateY(-22%)}}
@media (prefers-reduced-motion:reduce){.sc-grid{animation:none}}
/* a soft dark halo behind the form keeps it readable without hiding the pictures */
body.withshowcase{background:var(--crust)}
body.withshowcase::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(460px 620px at 50% 48%,#11111bd9 0%,#11111b99 50%,#11111b14 100%)}
body.withshowcase .auth{position:relative;z-index:1}
body.withshowcase .card{box-shadow:0 24px 60px #000c}
.sc-pitch{text-align:center;margin:0 0 16px;background:#11111be0;border:1px solid var(--s0);border-radius:16px;padding:14px 12px;box-shadow:0 18px 40px #000a}
.sc-lead{font-size:18px;font-weight:650;color:var(--text);margin:0 0 10px}
.sc-feats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0}
.sc-feats li{font-size:13px;background:#1e1e2ee6;border:1px solid var(--s0);border-radius:999px;padding:3px 10px;color:var(--sub)}
body.withshowcase .foot{color:var(--sub);text-shadow:0 1px 4px #000}
@media (max-width:700px){.sc-grid{grid-template-columns:repeat(2,1fr);width:180%;left:-40%;gap:16px}
  .sc-shot figcaption{font-size:12px;padding:4px 9px}
  body.withshowcase::before{background:#11111b8c}}