/* Login screen: full-bleed mosaic of the current lineup behind a frosted card. */
body.login{display:grid;place-items:center;padding:24px 16px;position:relative;isolation:isolate;overflow-x:hidden}
.mosaic{position:fixed;inset:0;z-index:-2;display:grid;gap:3px;overflow:hidden;background:#0b0d11;
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,20vw,420px),1fr));grid-auto-rows:auto}
.mosaic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.scrim{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 40%, rgba(10,12,16,.28), rgba(10,12,16,.72) 70%),
  linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,.55))}
body.login main{max-width:400px}
.hero{text-align:center;color:#fff;margin:0 0 18px;text-shadow:0 1px 2px rgba(0,0,0,.45),0 8px 30px rgba(0,0,0,.35)}
.hero h1{color:rgba(255,255,255,.78)}
.hero .badge{font-size:40px;margin:0 0 8px;color:#fff}
.hero .sub{margin:0;color:rgba(255,255,255,.85);font-size:15px}
body.login .card{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.6);box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
body.login .small{color:rgba(255,255,255,.8);text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.credit{font-size:11px;color:rgba(255,255,255,.55);text-align:center;margin:10px 4px 0;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.login .card{background:rgba(22,25,30,.9);border-color:rgba(255,255,255,.12)} }
:root[data-theme="dark"] body.login .card{background:rgba(22,25,30,.9);border-color:rgba(255,255,255,.12)}
@media (max-width:420px){ .hero .badge{font-size:34px} }