/**
 * login-atmosphere.css — the seasonal sky, particle canvases and atmosphere
 * rail behind the unauthenticated shell.
 *
 * Split out of style.css section 5. The split kept the section banner's
 * closing comment delimiter but lost its opening one, so the file began with
 * an orphaned terminator. CSS then read everything up to the first brace as a
 * single invalid selector and discarded the whole `.app-login-shell` rule with
 * it — losing the gradient background, `min-height: 100vh` and the column flex
 * layout of every unauthenticated page. Keep this header block intact.
 */

/* ═══════════════════════════════════════════════════════════════════
   5. LOGIN / AUTH LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.app-login-shell {
    --season-sky:
        radial-gradient(circle at 16% 12%, rgba(124,58,237,.20), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(14,165,233,.17), transparent 30%),
        linear-gradient(145deg, #e9e9ff 0%, #e4efff 55%, #edf4ff 100%);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--season-sky);
    background-attachment: fixed;
    background-size: 145% 145%;
    animation: seasonalSkyShift 22s ease-in-out infinite alternate;
    transition: background 900ms ease;
}
/* The shell is a 100vh flex column, but #maincontent defaulted to `flex: 0 1
   auto` and only carried `min-height: calc(100vh - 360px)`. On a short page
   that measured 530px against an 813px viewport, so the footer landed in the
   middle of the screen with ~180px of bare gradient stranded underneath it.
   Growing main to fill the column puts the footer on the bottom edge and gives
   the centring in `body.login-page #maincontent` the real free space to work
   with, instead of centring inside a box barely taller than the card. */
.app-login-shell > #maincontent { flex: 1 1 auto; }
[data-theme="dark"] .app-login-shell {
    --season-sky:
        radial-gradient(circle at 16% 12%, rgba(124,58,237,.26), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(14,165,233,.19), transparent 30%),
        linear-gradient(145deg, #080d25 0%, #0a1830 55%, #101934 100%);
}
.app-login-shell[data-season-theme="autumn"] {
    --season-sky:
        radial-gradient(circle at 14% 18%, rgba(251,146,60,.20), transparent 24%),
        radial-gradient(circle at 84% 82%, rgba(245,158,11,.14), transparent 28%),
        linear-gradient(155deg, #6fb9e8 0%, #2f78a4 43%, #2e6f57 72%, #173d32 100%);
}
.app-login-shell[data-season-theme="starlight"] {
    --season-sky:
        radial-gradient(circle at 50% 115%, rgba(35,211,238,.20), transparent 42%),
        radial-gradient(circle at 18% 15%, rgba(124,58,237,.28), transparent 30%),
        linear-gradient(155deg, #020617 0%, #111b45 56%, #231346 100%);
}
.app-login-shell[data-season-theme="winter"] {
    --season-sky:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.65), transparent 30%),
        radial-gradient(circle at 86% 20%, rgba(186,230,253,.55), transparent 34%),
        linear-gradient(155deg, #b9d7f2 0%, #dfeeff 48%, #a9c7e9 100%);
}
.app-login-shell[data-season-theme="holiday"] {
    --season-sky:
        radial-gradient(circle at 18% 12%, rgba(250,204,21,.28), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(220,38,38,.22), transparent 34%),
        linear-gradient(145deg, #06251b 0%, #0b4a38 54%, #591c2c 100%);
}
.app-login-shell[data-season-theme="newyear"] {
    --season-sky:
        radial-gradient(circle at 50% 105%, rgba(245,158,11,.18), transparent 38%),
        radial-gradient(circle at 15% 12%, rgba(168,85,247,.25), transparent 30%),
        linear-gradient(150deg, #020617 0%, #11122e 58%, #26103d 100%);
}
.app-login-shell[data-season-theme="spring"] {
    --season-sky:
        radial-gradient(circle at 18% 16%, rgba(244,114,182,.28), transparent 30%),
        radial-gradient(circle at 84% 12%, rgba(45,212,191,.24), transparent 34%),
        linear-gradient(145deg, #f9e7f3 0%, #e8f7ef 52%, #cde9ff 100%);
}
.app-login-shell[data-season-theme="summer"] {
    --season-sky:
        radial-gradient(circle at 82% 10%, rgba(253,224,71,.32), transparent 26%),
        radial-gradient(circle at 15% 20%, rgba(34,211,238,.25), transparent 32%),
        linear-gradient(155deg, #82c9ed 0%, #d9f1ff 48%, #f7d9a4 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="autumn"] {
    --season-sky:
        radial-gradient(ellipse at 14% 86%, rgba(249,115,22,.22), transparent 32%),
        radial-gradient(ellipse at 88% 18%, rgba(56,189,248,.16), transparent 38%),
        linear-gradient(150deg, #071528 0%, #123b57 46%, #174d43 74%, #102f29 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="starlight"] {
    --season-sky:
        radial-gradient(ellipse at 46% 110%, rgba(14,165,233,.31), transparent 48%),
        radial-gradient(ellipse at 12% 8%, rgba(99,102,241,.34), transparent 38%),
        linear-gradient(155deg, #01030d 0%, #091334 50%, #271455 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="winter"] {
    --season-sky:
        radial-gradient(ellipse at 18% 5%, rgba(224,242,254,.28), transparent 38%),
        radial-gradient(ellipse at 88% 18%, rgba(56,189,248,.27), transparent 42%),
        linear-gradient(155deg, #07111f 0%, #143754 54%, #326485 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="holiday"] {
    --season-sky:
        radial-gradient(ellipse at 15% 12%, rgba(250,204,21,.26), transparent 36%),
        radial-gradient(ellipse at 88% 22%, rgba(220,38,38,.34), transparent 42%),
        linear-gradient(145deg, #03150f 0%, #07503a 56%, #651a2d 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="newyear"] {
    --season-sky:
        radial-gradient(ellipse at 52% 112%, rgba(245,158,11,.31), transparent 45%),
        radial-gradient(ellipse at 15% 8%, rgba(168,85,247,.38), transparent 40%),
        radial-gradient(ellipse at 88% 30%, rgba(236,72,153,.20), transparent 34%),
        linear-gradient(150deg, #01030b 0%, #11143a 56%, #3b1458 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="spring"] {
    --season-sky:
        radial-gradient(ellipse at 16% 10%, rgba(244,114,182,.32), transparent 39%),
        radial-gradient(ellipse at 86% 16%, rgba(45,212,191,.30), transparent 42%),
        linear-gradient(145deg, #111827 0%, #205243 52%, #62395f 100%);
}
[data-theme="dark"] .app-login-shell[data-season-theme="summer"] {
    --season-sky:
        radial-gradient(ellipse at 84% 8%, rgba(253,224,71,.30), transparent 36%),
        radial-gradient(ellipse at 12% 22%, rgba(34,211,238,.31), transparent 42%),
        linear-gradient(155deg, #061525 0%, #0d5576 54%, #76502a 100%);
}
/* Explicit seasonal surfaces: keep these out of the shared token cascade so a
   selected atmosphere cannot fall back to the platform gradient. */
html[data-theme="dark"] body.app-login-shell[data-season-theme="autumn"] {
    background-image:
        radial-gradient(ellipse at 13% 88%, rgba(249,115,22,.24), transparent 33%),
        radial-gradient(ellipse at 90% 12%, rgba(56,189,248,.18), transparent 39%),
        linear-gradient(150deg, #061426 0%, #103b59 45%, #185448 72%, #0d302a 100%) !important;
}
html[data-theme="dark"] body.app-login-shell[data-season-theme="spring"] {
    background-image:
        radial-gradient(ellipse at 10% 8%, rgba(255,133,196,.40), transparent 39%),
        radial-gradient(ellipse at 91% 18%, rgba(45,212,191,.38), transparent 43%),
        linear-gradient(145deg, #17152a 0%, #294f4b 49%, #704569 77%, #a96f91 100%) !important;
}
html[data-theme="light"] body.app-login-shell[data-season-theme="autumn"] {
    background-image:
        radial-gradient(ellipse at 12% 88%, rgba(249,115,22,.18), transparent 32%),
        radial-gradient(ellipse at 88% 10%, rgba(255,255,255,.46), transparent 38%),
        linear-gradient(150deg, #a9dcf6 0%, #68aed4 43%, #77aa79 72%, #3f765c 100%) !important;
}
html[data-theme="light"] body.app-login-shell[data-season-theme="spring"] {
    background-image:
        radial-gradient(ellipse at 10% 8%, rgba(244,114,182,.36), transparent 39%),
        radial-gradient(ellipse at 91% 18%, rgba(45,212,191,.31), transparent 43%),
        linear-gradient(145deg, #fff1fa 0%, #dff8ec 50%, #cfe7ff 100%) !important;
}
html[data-theme="dark"] body.app-login-shell[data-season-theme="winter"] {
    background-image:
        radial-gradient(ellipse at 15% 5%, rgba(224,242,254,.32), transparent 40%),
        radial-gradient(ellipse at 90% 16%, rgba(56,189,248,.29), transparent 43%),
        linear-gradient(150deg, #07111f 0%, #173d5b 54%, #3d7393 100%) !important;
}
html[data-theme="dark"] body.app-login-shell[data-season-theme="holiday"] {
    background-image:
        radial-gradient(ellipse at 13% 9%, rgba(250,204,21,.30), transparent 38%),
        radial-gradient(ellipse at 91% 20%, rgba(239,68,68,.40), transparent 44%),
        linear-gradient(145deg, #03150f 0%, #07533b 55%, #711b31 100%) !important;
}
html[data-theme="light"] body.app-login-shell[data-season-theme="winter"] {
    background-image:
        radial-gradient(ellipse at 15% 5%, rgba(255,255,255,.72), transparent 40%),
        radial-gradient(ellipse at 90% 16%, rgba(56,189,248,.25), transparent 43%),
        linear-gradient(150deg, #e8f5ff 0%, #cbe8fa 54%, #a7cbe5 100%) !important;
}
html[data-theme="light"] body.app-login-shell[data-season-theme="holiday"] {
    background-image:
        radial-gradient(ellipse at 13% 9%, rgba(250,204,21,.12), transparent 34%),
        radial-gradient(ellipse at 91% 20%, rgba(239,68,68,.09), transparent 40%),
        linear-gradient(145deg, #eef8f3 0%, #d4e9df 56%, #e5edf5 100%) !important;
}
@keyframes seasonalSkyShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 52% 24%; }
    100% { background-position: 100% 60%; }
}
.app-seasonal-canvas {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    transition: opacity 240ms ease;
}
.app-seasonal-canvas.is-changing-season { opacity: 0; }
.app-seasonal-canvas.is-slow-season-change { transition-duration: 2.8s; }
.app-seasonal-transition-canvas {
    position: fixed;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 760ms ease;
}
.app-seasonal-transition-canvas.is-visible { opacity: 1; transition: none; }
.app-seasonal-transition-canvas.is-slow-season-change { transition-duration: 10s; }
.app-season-transition-curtain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background-position: center;
    background-size: 145% 145%;
    transition: opacity 760ms ease;
}
.app-season-transition-curtain.is-visible {
    opacity: 1;
    transition: none;
}
.app-season-transition-curtain.is-slow-season-change { transition-duration: 10s; }
.app-login-theme-toggle {
    position: fixed;
    top: 18px;
    right: 16px;
    z-index: 40;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
    cursor: pointer;
    pointer-events: auto;
}
.app-login-theme-toggle:hover,
.app-login-theme-toggle:focus { color:var(--brand);border-color:var(--brand); }
.app-beta-notice ~ .app-login-theme-toggle { top:74px; }
.app-login-shell > :not(.app-seasonal-canvas):not(.app-seasonal-transition-canvas):not(.app-seasonal-rail):not(.app-season-transition-curtain):not(.app-login-theme-toggle) {
    position: relative;
    z-index: 3;
}
.app-seasonal-rail {
    position: fixed;
    top: 50%;
    right: 14px;
    z-index: 30;
    display: grid;
    width: 150px;
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 18px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 18px 45px rgba(2,8,23,.22);
    backdrop-filter: blur(18px);
    transform: translateY(-50%);
}
.app-seasonal-rail__toggle,
.app-seasonal-rail__options button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    gap: 8px;
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font-size: 11px;
    font-weight: 850;
    text-align: left;
}
.app-seasonal-rail__toggle { color: var(--text); }
.app-seasonal-rail__toggle i,
.app-seasonal-rail__options i { width: 18px; color: var(--brand); text-align:center; }
.app-seasonal-rail__options { display: grid; gap: 2px; }
.app-seasonal-rail__options button:hover,
.app-seasonal-rail__options button:focus,
.app-seasonal-rail__options button.is-active {
    color: var(--brand);
    background: var(--brand-soft);
}
.app-seasonal-rail.is-collapsed { width: auto; }
.app-seasonal-rail.is-collapsed .app-seasonal-rail__options,
.app-seasonal-rail.is-collapsed .app-seasonal-rail__toggle span { display:none; }
@media (max-width: 820px) {
    .app-login-theme-toggle,
    .app-beta-notice ~ .app-login-theme-toggle { top:auto;right:auto;bottom:10px;left:10px; }
    .app-seasonal-rail { top:auto;right:10px;bottom:10px;width:auto;transform:none; }
    .app-seasonal-rail:not(.is-open) .app-seasonal-rail__options { display:none; }
    .app-seasonal-rail__options { grid-template-columns:repeat(3,minmax(0,1fr));width:min(420px,calc(100vw - 34px)); }
}
@media (prefers-reduced-motion: reduce) {
    .app-login-shell { animation:none;transition:none; }
    .app-seasonal-canvas { display:none; }
}