/* Account (login / reset / change password) dark background with an interactive
   product-glyph overlay. Replaces the legacy automotive photo background.
   Glyphs are static at rest; accountBackground.js repels them from the pointer. */

:root {
    --apbg-base: #202427;
    --apbg-glyph: #f26a6a;
}

body {
    background: var(--apbg-base) !important;
    background-image: none !important;
    padding: 0;
}

/* Full-screen overlay sits behind all page content. */
.account-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--apbg-base);
}

/* Every direct child of body except the overlay renders above it. */
body > *:not(.account-bg) {
    position: relative;
    z-index: 1;
}

.account-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.account-bg__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1100px;
    height: 720px;
    max-width: 150vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(rgba(221, 35, 35, 0.24) 0, rgba(221, 35, 35, 0.09) 40%, transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-glyphs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-glyph {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gs, 28px);
    height: var(--gs, 28px);
    margin-left: calc(var(--gs, 28px) / -2);
    margin-top: calc(var(--gs, 28px) / -2);
    color: var(--apbg-glyph);
    opacity: var(--op, 0.5);
    will-change: transform;
}

.hero-glyph svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* On phones keep only the four corner glyphs so they never crowd the centred
   login panel. */
@media (max-width: 640px) {
    .hero-glyph:nth-child(n + 5) { display: none; }
}

/* ds-reskin.css rounds the .panel-heading top corners, but the Bootstrap .panel
   background is white, so it peeks through as a light arc behind the heading's
   rounded corners. Match the panel background to the (dark) heading so nothing
   light shows through. The panel body keeps its own white background, so only
   the sliver behind the heading is affected. Scoped to the account screens (this
   stylesheet only loads there); ds-reskin.css is left untouched. The `body`
   prefix wins over Bootstrap's `.panel { background-color: #fff }`. */
body .panel-autoPlay {
    background-color: var(--ap-shark, var(--apbg-base));
}