/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* net4V application shell.
   One breakpoint for the whole app: 768px. Later phases must reuse it rather
   than introducing a second — two competing breakpoints produce layouts that
   disagree in the band between them. */

/* The header rules live in app.css, not here. They target elements Radzen
   renders, and ::deep only matches inside an element carrying this component's
   scope attribute -- which Radzen's own markup never has. They were dead from the
   day they were written, which is why the header spacer never pushed anything to
   the right. */

.net4v-content[b-66287xujar] {
    padding: 1rem;
    /* max() so non-notched devices keep their normal spacing rather than losing
       it to a zero inset. */
    padding-inline-start: max(1rem, env(safe-area-inset-left));
    padding-inline-end: max(1rem, env(safe-area-inset-right));
    /* No top clearance needed: the bar is sticky and therefore IN the flow,
       above this element. app.css takes it out of the flow, back to the bottom,
       while a video is on screen -- and restores the clearance there. */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Sits above the library list, so the transport is reachable without scrolling
   to the end of a long library. While a video is on screen it returns to the
   bottom -- see body.net4v-video-mode in app.css.

   STICKY, not fixed, and inside .rz-body -- which Radzen gives overflow:auto,
   making it the scroll container. Two things follow, and both were wrong when
   this was fixed to the viewport:

     * The bar spans the body grid area only, so it cannot cover the sidebar.
     * It parks under the header without anyone having to know how tall the
       header is. Radzen exposes no --rz-header-height at all -- only
       --rz-header-min-height -- so a fixed bar could only guess at the offset,
       and a guess lands on top of the header's own controls. */
.net4v-player-region[b-66287xujar] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: var(--net4v-player-height);
    display: flex;
    align-items: center;
    /* Matches .net4v-content's padding exactly, so the bar's contents line up
       with the list below it. */
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
    background: var(--rz-base-background-color, #1a1a1a);
    border-bottom: 1px solid var(--rz-base-300, #333);
}

.net4v-player-placeholder[b-66287xujar] {
    font-size: 0.8125rem;
    opacity: 0.5;
}

/* --- Mobile: sidebar overlays rather than pushing content --- */
@media (max-width: 768px) {
    [b-66287xujar] .net4v-sidebar {
        position: fixed !important;
        top: var(--rz-header-height, 3.5rem);
        bottom: 0;
        z-index: 10;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
    }

    .net4v-content[b-66287xujar] {
        padding: 0.75rem;
        padding-inline-start: max(0.75rem, env(safe-area-inset-left));
        padding-inline-end: max(0.75rem, env(safe-area-inset-right));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    /* Tracks the narrower content padding above, so the bar stays aligned. */
    .net4v-player-region[b-66287xujar] {
        padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qdr72195zp],
.components-reconnect-repeated-attempt-visible[b-qdr72195zp],
.components-reconnect-failed-visible[b-qdr72195zp],
.components-pause-visible[b-qdr72195zp],
.components-resume-failed-visible[b-qdr72195zp],
.components-rejoining-animation[b-qdr72195zp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-retrying[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-failed[b-qdr72195zp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-qdr72195zp] {
    display: block;
}


#components-reconnect-modal[b-qdr72195zp] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-qdr72195zp 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-qdr72195zp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-qdr72195zp 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-qdr72195zp]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-qdr72195zp 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-qdr72195zp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-qdr72195zp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-qdr72195zp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-qdr72195zp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-qdr72195zp] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-qdr72195zp] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-qdr72195zp] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-qdr72195zp] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-qdr72195zp] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-qdr72195zp] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-qdr72195zp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-qdr72195zp] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-qdr72195zp {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Library.razor.rz.scp.css */
/* Library view. Grid on desktop, card list on mobile — the components are
   swapped rather than the grid shrunk, because a multi-column data grid cannot
   be made comfortable at 390px. The 768px breakpoint is the app-wide one
   established in 01-03; do not introduce a second. */

.net4v-library-toolbar[b-jlx21g9pp8] {
    width: 100%;
}

.net4v-search[b-jlx21g9pp8] {
    min-width: 14rem;
    flex: 1 1 14rem;
}

.net4v-result-count[b-jlx21g9pp8] {
    opacity: 0.7;
}

.net4v-empty[b-jlx21g9pp8] {
    text-align: center;
    padding: 2rem 1rem;
}

.net4v-empty code[b-jlx21g9pp8] {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--rz-base-300, #333);
}

[b-jlx21g9pp8] .net4v-track-art {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.25rem;
    background: var(--rz-base-300, #2a2a2a);
}

/* --- Breakpoint-driven presentation swap --- */
.net4v-desktop-only[b-jlx21g9pp8] { display: block; }
.net4v-mobile-only[b-jlx21g9pp8]  { display: none; }

@media (max-width: 768px) {
    .net4v-desktop-only[b-jlx21g9pp8] { display: none; }
    .net4v-mobile-only[b-jlx21g9pp8]  { display: block; }

    .net4v-search[b-jlx21g9pp8] {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* Wide content scrolls inside its own container so the page body never scrolls
   horizontally. */
[b-jlx21g9pp8] .net4v-grid {
    overflow-x: auto;
    max-width: 100%;
}
/* /Components/Player/MediaPlayer.razor.rz.scp.css */
/* Persistent player bar. Lives in MainLayout's reserved region, outside @Body,
   so navigation never remounts it and playback survives page changes. */

.net4v-media[b-ez9uzhzs3h] {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

/* Audio-only: the element must stay in the DOM (Phase 5 binds an audio graph to
   it permanently and cannot be moved) but takes no visual space. */
.net4v-video-container.audio-only[b-ez9uzhzs3h] {
    height: 0;
    width: 0;
    position: absolute;
    visibility: hidden;
    overflow: hidden;
}

.net4v-video-container.has-video[b-ez9uzhzs3h] {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--net4v-player-height) + 0.5rem + env(safe-area-inset-bottom));
    width: min(420px, 45vw);
    max-height: 40vh;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 6;
}

/* Fullscreen: the container fills the screen, and its own controls come with it
   rather than being replaced by the browser's built-in UI. */
.net4v-video-container.fullscreen[b-ez9uzhzs3h] {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    border-radius: 0;
    background: #000;
    z-index: 2147483647;
}

.net4v-video-overlay[b-ez9uzhzs3h] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Flex so the fullscreen and close buttons sit side by side with a gap
       rather than touching, which makes them hard to hit accurately on a phone. */
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.net4v-video-container:hover .net4v-video-overlay[b-ez9uzhzs3h],
.net4v-video-container:focus-within .net4v-video-overlay[b-ez9uzhzs3h] {
    opacity: 1;
}

/* Fullscreen auto-hide, driven by net4v-player.js.
   The class is on <body> because the container's class attribute is rendered by
   Blazor and would overwrite anything JS put there on the next re-render.
   These selectors deliberately outrank the :hover and (hover: none) rules above:
   in fullscreen the pointer is always over the container, so hover can never be
   what decides this. */
body.net4v-controls-idle .net4v-video-container.fullscreen[b-ez9uzhzs3h] {
    cursor: none;
}

body.net4v-controls-idle .net4v-video-container.fullscreen .net4v-video-overlay[b-ez9uzhzs3h],
body.net4v-controls-idle .net4v-video-container.fullscreen .net4v-fullscreen-transport[b-ez9uzhzs3h] {
    opacity: 0;
    /* So the click that brings the controls back cannot also press whatever
       button happened to be under the pointer. */
    pointer-events: none;
}

/* Always visible on touch, where there is no hover to reveal it. */
@media (hover: none) {
    .net4v-video-overlay[b-ez9uzhzs3h] { opacity: 1; }
}

.net4v-fullscreen-transport[b-ez9uzhzs3h] {
    transition: opacity 0.3s ease;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    /* Column: the scrub bar spans the picture's full width above the buttons,
       which is where it is both easiest to hit and easiest to read as progress. */
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    /* Clear of the home indicator when a phone is fullscreen in portrait. */
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.net4v-fullscreen-buttons[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Sized through Radzen's own variables rather than by overriding its internals,
   so this keeps working if their markup changes. The track is already 4px; the
   handle is what makes a default slider look chunky, so it shrinks and the bar
   reads as a progress line you can grab. */
[b-ez9uzhzs3h] .net4v-fullscreen-seek {
    --rz-slider-horizontal-width: 100%;
    --rz-slider-horizontal-height: 5px;
    --rz-slider-handle-width: 13px;
    --rz-slider-handle-height: 13px;
    width: 100%;
    /* Overrides the flex sizing the bar's scrubber uses, which does nothing
       useful in a column. */
    flex: 0 0 auto;
    min-width: 0;
}

.net4v-player-bar[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.net4v-now-playing[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 1 18rem;
    min-width: 0;
}

.net4v-player-art[b-ez9uzhzs3h] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.25rem;
    flex: 0 0 40px;
}

.net4v-player-meta[b-ez9uzhzs3h] { min-width: 0; }

.net4v-player-title[b-ez9uzhzs3h],
.net4v-player-artist[b-ez9uzhzs3h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.net4v-player-artist[b-ez9uzhzs3h] {
    font-size: 0.8125rem;
    opacity: 0.7;
}

.net4v-transport[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.net4v-seek[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

[b-ez9uzhzs3h] .net4v-seek-slider { flex: 1 1 auto; min-width: 4rem; }

.net4v-time[b-ez9uzhzs3h] {
    font-size: 0.8125rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.net4v-volume[b-ez9uzhzs3h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 9rem;
}

[b-ez9uzhzs3h] .net4v-volume-slider { flex: 1 1 auto; }

.net4v-player-error[b-ez9uzhzs3h] {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(var(--net4v-player-height) + 0.5rem + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--rz-danger-lighter, #5b1f1f);
    z-index: 7;
}

/* Mobile: keep play/pause and the seek bar; the rest folds away so the transport
   stays thumb-reachable at 390px. */
@media (max-width: 768px) {
    .net4v-volume[b-ez9uzhzs3h] { display: none; }
    .net4v-now-playing[b-ez9uzhzs3h] { flex: 0 1 8rem; }
    .net4v-player-bar[b-ez9uzhzs3h] { gap: 0.5rem; }

    /* The trailing duration goes too, for the same reason the volume does: the
       slider's right end already IS the duration, and elapsed is the number
       anyone actually reads. Without this the seek section is squeezed to about
       70px by the toggles at the end of the bar, and the two times collide with
       the slider. */
    .net4v-seek .net4v-time:last-child[b-ez9uzhzs3h] { display: none; }

    .net4v-video-container.has-video[b-ez9uzhzs3h] {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: 32vh;
    }
}
/* /Components/Visualizer/VisualizerHost.razor.rz.scp.css */
/* WebGL visualizer surface.
   Mirrors the video container's fullscreen model (06-01): the container fills the
   screen and brings its own controls, rather than handing the picture to the
   browser's built-in UI. */

.net4v-visualizer[b-oe21vlewbt] {
    position: relative;
    width: 100%;
    /* Fills the space the page gives it while still leaving the player bar and
       the page heading visible. A fixed pixel height would leave a phone with a
       letterbox and a desktop with a postage stamp. */
    height: clamp(260px, 62vh, 860px);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #0a1616;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
}

/* Double-click fills the screen, so the text a double-click would otherwise select
   has to stop being selectable -- the caption and the status chip both sit inside
   this container, and highlighting them on the way to fullscreen looks like a bug.
   The controls are exempt: a dropdown someone is reading should behave normally. */
.net4v-visualizer[b-oe21vlewbt] {
    user-select: none;
    -webkit-user-select: none;
}

[b-oe21vlewbt] .net4v-visualizer-controls {
    user-select: text;
    -webkit-user-select: text;
}

/* The surface is focusable (tabindex="0") so the arrow keys have somewhere to be
   aimed outside fullscreen — a click on the picture puts focus here, which is what
   makes "click it, then press f" work. :focus-visible rather than :focus, so that
   click does not also outline it; only reaching it by keyboard does, which is the
   case where the ring is the only sign the keys will now do something. */
.net4v-visualizer:focus[b-oe21vlewbt] {
    outline: none;
}

.net4v-visualizer:focus-visible[b-oe21vlewbt] {
    outline: 2px solid var(--net4v-teal, #20b2aa);
    outline-offset: -2px;
}

.net4v-visualizer-canvas[b-oe21vlewbt] {
    display: block;
    width: 100%;
    height: 100%;
    /* The canvas backing-store size is set by the renderer in device pixels; this
       is only its CSS box. Without it the element defaults to 300x150 and the
       ResizeObserver has nothing meaningful to report. */
}

/* Fullscreen and the CSS-only fallback look the same to the eye; only the way
   they got there differs. */
.net4v-visualizer.fullscreen[b-oe21vlewbt],
.net4v-visualizer.immersive[b-oe21vlewbt] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* The fallback is not a real fullscreen, so it has to outrank everything on the
   page itself -- including the player bar, which is the whole point. */
.net4v-visualizer.immersive[b-oe21vlewbt] {
    z-index: 2147483647;
}

.net4v-visualizer-controls[b-oe21vlewbt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.net4v-visualizer:hover .net4v-visualizer-controls[b-oe21vlewbt],
.net4v-visualizer:focus-within .net4v-visualizer-controls[b-oe21vlewbt] {
    opacity: 1;
}

/* Always visible on touch, where there is no hover to reveal it. */
@media (hover: none) {
    .net4v-visualizer-controls[b-oe21vlewbt] { opacity: 1; }
}

/* Clear of the notch and the rounded corners when a phone is expanded. */
.net4v-visualizer.fullscreen .net4v-visualizer-controls[b-oe21vlewbt],
.net4v-visualizer.immersive .net4v-visualizer-controls[b-oe21vlewbt] {
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
}

/* Auto-hide in fullscreen, driven by net4v-player.js's idle watch.
   The class is on <body> because this container's class attribute is rendered by
   Blazor and would overwrite anything JS put there on the next re-render. */
body.net4v-controls-idle .net4v-visualizer.fullscreen[b-oe21vlewbt],
body.net4v-controls-idle .net4v-visualizer.immersive[b-oe21vlewbt] {
    cursor: none;
}

body.net4v-controls-idle .net4v-visualizer.fullscreen .net4v-visualizer-controls[b-oe21vlewbt],
body.net4v-controls-idle .net4v-visualizer.immersive .net4v-visualizer-controls[b-oe21vlewbt] {
    opacity: 0;
    /* So the tap that brings the controls back cannot also press whatever button
       happened to be under the pointer. */
    pointer-events: none;
}

/* The picker sits alongside the fullscreen button and shrinks to fit a phone,
   where the two dropdowns and the button share a 390px-wide row. */
/* ::deep throughout: the picker and its chip are PresetSelector's markup, and
   scoped CSS does not cross a component boundary on its own. Without it these
   rules compile, ship, match nothing, and the chip renders as unstyled text --
   which is exactly what happened. */
[b-oe21vlewbt] .net4v-visualizer-picker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* Deliberately quiet: it is diagnostic information sitting over a picture, and it
   should be readable when looked for and ignorable otherwise. */
[b-oe21vlewbt] .net4v-visualizer-status {
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    background: rgba(10, 22, 22, 0.65);
    color: var(--net4v-teal, #20b2aa);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Deliberately NOT hidden on a phone. It was, and that is precisely backwards:
   the tier and frame rate matter most on the device whose limits are in question,
   and the quality dropdown folding away below this width leaves the room for it. */

[b-oe21vlewbt] .net4v-visualizer-preset,
[b-oe21vlewbt] .net4v-visualizer-quality {
    /* Width and type size only. Overriding --rz-input-height cropped the
       descenders off the labels: the height shrank and the line-height did not
       follow it. */
    font-size: 0.8125rem;
    min-width: 0;
}

[b-oe21vlewbt] .net4v-visualizer-preset { width: 11rem; }

[b-oe21vlewbt] .net4v-visualizer-quality { width: 9rem; }

@media (max-width: 640px) {
    /* The quality control is a rarely-touched preference; the preset is the one
       worth reaching for on a phone. */
    [b-oe21vlewbt] .net4v-visualizer-quality { display: none; }

    [b-oe21vlewbt] .net4v-visualizer-preset { width: 9rem; }
}

/* The fallback meter, sized so it reads as a deliberate substitute rather than a
   leftover widget stranded in the middle of an empty panel. */
.net4v-visualizer-meter[b-oe21vlewbt] {
    width: min(32rem, 90%);
    height: 6rem;
    margin-top: 1rem;
}

/* ::deep because the meter is a child component with its own CSS scope.

   Its own styling is written for the equalizer panel, where --rz-base-200 is a
   sensible surface. Against the visualizer's near-black panel that resolves to a
   pale grey slab, and the idle caption -- light text -- disappears into it. */
.net4v-visualizer-meter[b-oe21vlewbt]  .net4v-meter-wrap {
    height: 100%;
}

.net4v-visualizer-meter[b-oe21vlewbt]  .net4v-meter {
    background: rgba(10, 22, 22, 0.6);
    border: 1px solid rgba(32, 178, 170, 0.28);
}

.net4v-visualizer-fallback[b-oe21vlewbt] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    background: #0a1616;
    color: var(--rz-text-secondary-color, #b0bec5);
}