/* Local decorative artwork only: the public login never requests catalog covers. */
.auth-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 3rem 1.25rem;
    overflow: hidden;
    background: #10131e;
    color: #f0f3f8;
}
.auth-artwork {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background: url('../images/audio-ambient.svg') center / cover no-repeat;
}
.auth-shell::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 15%, rgb(8 11 22 / 42%) 100%);
}
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.75rem;
}
.auth-brand-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 56px;
    border: 1px solid rgb(191 182 255 / 28%);
    border-radius: 15px;
    background: linear-gradient(140deg, rgb(144 119 239 / 38%), rgb(45 119 139 / 25%));
    color: #d8ceff;
    font-size: 2rem;
    box-shadow: 0 6px 28px rgb(113 92 218 / 20%);
}
.auth-brand-name { font-size: 1.8rem; font-weight: 750; letter-spacing: -.6px; }
.auth-brand-icon .brand-symbols { gap: 8px; }
.auth-brand-icon .brand-symbols svg { width: 26px; height: 26px; }
.auth-footer .brand-badge { font-size: .65rem; background: rgb(132 122 220 / 24%); border: 1px solid rgb(176 166 255 / 25%); color: #dcd8ff; }
.auth-content { width: 100%; max-width: 500px; min-width: 0; }
.auth-content .login-card {
    margin: 0 auto;
    max-width: 420px;
    padding: 2rem;
    border: 1px solid rgb(187 183 226 / 22%);
    border-radius: 22px;
    background: rgb(26 30 45 / 90%);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 80px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 5%);
}
.login-card .login-eyebrow { margin-bottom: .65rem; font-size: .68rem; font-weight: 700; letter-spacing: .18em; color: #b6b0f3; }
.login-card h1 { font-size: 1.9rem; letter-spacing: -.5px; margin-bottom: .5rem; }
.login-card .login-intro { color: #b6bfd1; font-size: .9rem; line-height: 1.6; margin-bottom: 1.75rem; }
.login-card label { color: #d7deec; font-size: .85rem; }
.login-card .form-control { min-height: 46px; background: rgb(12 17 31 / 55%); border: 1px solid #4c536d; border-radius: 9px; color: #f0f3f8; }
.login-card .form-control:focus { border-color: #a59af8; outline: 2px solid rgb(165 154 248 / 32%); outline-offset: 2px; }
.login-card .btn-primary { width: 100%; justify-content: center; min-height: 46px; margin-top: .25rem; border-radius: 9px; background: #7164cf; color: #fff; box-shadow: 0 5px 20px rgb(95 80 194 / 22%); }
.login-card .btn-primary:hover { background: #8173df; }
.login-card .btn-primary:focus-visible, .login-card a:focus-visible { outline: 2px solid #c4bbff; outline-offset: 4px; }
.login-card a { color: #c4bbff; }
.login-card .login-error { margin-bottom: 1.25rem; padding: .8rem; border: 1px solid rgb(255 151 163 / 40%); border-radius: 9px; background: rgb(130 40 63 / 22%); color: #ffb9c2; font-size: .85rem; }
.auth-footer { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: 1.75rem; max-width: 500px; text-align: center; color: #b1b9cc; font-size: .75rem; line-height: 1.7; letter-spacing: .02em; }
@media (max-width: 480px) {
    .auth-shell { padding: 2rem 1rem; }
    .auth-content .login-card { padding: 1.5rem; border-radius: 18px; }
    .auth-artwork { background-position: 43% center; }
    .auth-brand-name { font-size: 1.65rem; }
}
@media (prefers-reduced-transparency: reduce) {
    .auth-content .login-card { background: #1a1e2d; backdrop-filter: none; }
}
@media (forced-colors: active) {
    .auth-artwork, .auth-shell::after { display: none; }
    .auth-content .login-card { border: 1px solid CanvasText; background: Canvas; color: CanvasText; backdrop-filter: none; }
}