/* /Components/Layout/MainLayout.razor.rz.scp.css */
:root[b-by1f4w2zc0] {
    --paper: #f7f4ea;
    --surface: #fffefa;
    --text: #232b2b;
    --muted: #58605f;
    --ink: #0e495d;
    --accent: #f39a32;
    --accent-deep: #d67f12;
    --line: #d8d6ce;
    --home-hero-overlap: 5rem;
}

.site-shell[b-by1f4w2zc0] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, #408D93 0%, #4f9db3 22%, #d4cf69 56%, #efefef 86%, #efefef 100%);
}

.site-shell.home-route[b-by1f4w2zc0] {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #408D93 0%, #4f9db3 22%, #d4cf69 56%, #efefef 86%, #efefef 100%);
}

.site-shell.home-route[b-by1f4w2zc0]::before {
    content: none;
}

.site-shell.story-route[b-by1f4w2zc0] {
    background:
        radial-gradient(120% 90% at 50% -12%, rgba(141, 198, 111, 0.18) 0%, rgba(141, 198, 111, 0) 50%),
        linear-gradient(180deg, #f6f3ee 0%, #ece8e2 100%);
}

.site-shell.playlist-nav-route[b-by1f4w2zc0],
.site-shell.story-route.playlist-nav-route[b-by1f4w2zc0] {
    background: #222222;
}

.site-shell.playlist-showcase-route[b-by1f4w2zc0],
.site-shell.story-route.playlist-showcase-route[b-by1f4w2zc0] {
    background: #ffffff;
}

.site-shell.about-route[b-by1f4w2zc0] {
    background: #ffffff;
}

.site-shell.store-route[b-by1f4w2zc0] {
    background: linear-gradient(180deg, #fff6e8 0%, #fff8f0 42%, #ffffff 100%);
}

.site-shell.about-route.store-route[b-by1f4w2zc0] {
    background: #ffffff;
}

.site-shell.opsies-route.store-route[b-by1f4w2zc0] {
    background: #ffffff;
}

.site-container[b-by1f4w2zc0] {
    width: min(1080px, 100% - 2rem);
    margin-inline: auto;
}

.skip-link[b-by1f4w2zc0] {
    position: absolute;
    left: 1rem;
    top: -3rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: #ffffff;
    color: #123847;
    font-weight: 700;
    text-decoration: none;
    z-index: 60;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    transition: top 0.15s ease;
}

.skip-link:focus[b-by1f4w2zc0] {
    top: 0.75rem;
}

.sr-only[b-by1f4w2zc0] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.site-header[b-by1f4w2zc0] {
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, #bcc2b8);
    background: color-mix(in srgb, var(--surface) 97%, white);
    backdrop-filter: blur(12px) saturate(145%);
    box-shadow: 0 10px 22px rgba(17, 39, 45, 0.14);
}

.site-shell.home-route .site-header[b-by1f4w2zc0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.04) 0%, rgba(255, 254, 250, 0.08) 100%);
    backdrop-filter: blur(5px) saturate(125%);
    border-bottom-color: color-mix(in srgb, var(--line) 66%, rgba(255, 255, 255, 0.45));
}

.site-shell.admin-route .site-header[b-by1f4w2zc0] {
    z-index: 220;
}

.nav-wrap[b-by1f4w2zc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

.brand-link[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.brand-wordmark[b-by1f4w2zc0] {
    display: block;
    width: 120px;
    height: auto;
}

.site-nav[b-by1f4w2zc0] {
    display: none;
    width: min(88vw, 320px);
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 64;
}

.nav-controls[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 63;
}

.site-shell.admin-route .nav-controls[b-by1f4w2zc0] {
    z-index: 223;
}

.guest-controls[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    z-index: 63;
}

.site-shell.admin-route .guest-controls[b-by1f4w2zc0] {
    z-index: 223;
}

.site-search-form[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    position: relative;
}

.site-search-toggle[b-by1f4w2zc0] {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #113d4d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.site-search-toggle[b-by1f4w2zc0]::after {
    content: "";
    display: none;
    width: 2px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, #6f7074 82%, #2a2d33);
}

.site-search-toggle i[b-by1f4w2zc0] {
    width: 17px;
    height: 17px;
    font-size: 17px;
    line-height: 1;
}

.site-search-toggle:hover[b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 8%, transparent);
    border-color: color-mix(in srgb, #1b4453 18%, transparent);
}

.site-search-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.site-search-fields[b-by1f4w2zc0] {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
}

.site-search-loader[b-by1f4w2zc0] {
    display: none;
    align-items: center;
    gap: 0.45rem;
    color: #3a4656;
    font-size: 0.86rem;
    white-space: nowrap;
}

.site-search-spinner[b-by1f4w2zc0] {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 2px solid rgba(38, 42, 49, 0.2);
    border-top-color: #262a31;
    animation: site-search-spin-b-by1f4w2zc0 0.75s linear infinite;
}

.is-search-active .site-search-fields[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
}

.is-search-active .site-search-form[b-by1f4w2zc0] {
    min-width: clamp(230px, 36vw, 410px);
    min-height: 52px;
    border-radius: 16px;
    border: 3px solid #2e3238;
    background: #f9fafb;
    padding: 0 0.82rem;
    gap: 0.45rem;
}

.is-search-active .site-search-toggle[b-by1f4w2zc0] {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #262a31;
    padding: 0;
    gap: 0.58rem;
}

.is-search-active .site-search-toggle:hover[b-by1f4w2zc0] {
    border-color: transparent;
    background: transparent;
}

.is-search-active .site-search-toggle[b-by1f4w2zc0]::after {
    display: block;
}

.is-search-active .site-search-form.is-search-loading .site-search-loader[b-by1f4w2zc0] {
    display: inline-flex;
}

.nav-controls.is-search-active .site-nav[b-by1f4w2zc0],
.nav-controls.is-search-active .nav-menu-toggle[b-by1f4w2zc0],
.nav-controls.is-search-active .notification-center[b-by1f4w2zc0],
.nav-controls.is-search-active .account-menu[b-by1f4w2zc0],
.nav-controls.is-search-active .night-mode-toggle[b-by1f4w2zc0],
.guest-controls.is-search-active .night-mode-toggle[b-by1f4w2zc0],
.guest-controls.is-search-active .header-signin-btn[b-by1f4w2zc0] {
    display: none !important;
}

.site-search-input[b-by1f4w2zc0] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    padding: 0 0.08rem;
    background: transparent;
    color: #11161f;
    font: inherit;
}

.site-search-input[b-by1f4w2zc0]::placeholder {
    color: color-mix(in srgb, var(--muted) 85%, #646b71);
}

.site-search-input:focus-visible[b-by1f4w2zc0] {
    outline: none;
}

.site-search-suggestions[hidden][b-by1f4w2zc0] {
    display: none !important;
}

.site-search-suggestions[b-by1f4w2zc0] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 72;
    border-radius: 12px;
    border: 1px solid rgba(28, 36, 48, 0.2);
    background: #f2f3f5;
    box-shadow: 0 14px 28px rgba(15, 22, 33, 0.24);
    overflow: hidden;
}

.site-search-suggestions-list[b-by1f4w2zc0] {
    max-height: min(52vh, 360px);
    overflow-y: auto;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: #1e2430;
    padding: 0.46rem 0.62rem;
    border-bottom: 1px solid rgba(18, 24, 34, 0.12);
    background: transparent;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion:last-child {
    border-bottom: 0;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion:hover {
    background: rgba(255, 255, 255, 0.58);
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion:focus-visible {
    outline: 3px solid color-mix(in srgb, #ffffff 46%, var(--accent));
    outline-offset: -3px;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #d5d9df;
    overflow: hidden;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-copy {
    min-width: 0;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-title {
    margin: 0;
    color: #24a021;
    font-size: 1.02rem;
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-kind {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.2;
    color: #55606e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-empty {
    margin: 0;
    padding: 0.76rem 0.68rem;
    color: #3a4656;
    font-size: 0.9rem;
}

.nav-menu-toggle[b-by1f4w2zc0] {
    display: inline-flex;
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 94%, white);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 61;
}

.night-mode-toggle[b-by1f4w2zc0] {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #113d4d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.night-mode-toggle i[b-by1f4w2zc0] {
    width: 17px;
    height: 17px;
    font-size: 17px;
    line-height: 1;
}

.night-mode-toggle:hover[b-by1f4w2zc0],
.night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 8%, transparent);
    border-color: color-mix(in srgb, #1b4453 18%, transparent);
}

.night-mode-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.site-shell.admin-route .nav-menu-toggle[b-by1f4w2zc0] {
    z-index: 224;
}

.site-shell.home-route .night-mode-toggle[b-by1f4w2zc0] {
    display: none;
}

.nav-menu-toggle i[b-by1f4w2zc0] {
    width: 17px;
    height: 17px;
    font-size: 17px;
    line-height: 1;
}

.nav-menu-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 70%, var(--accent));
    outline-offset: 2px;
}

.site-nav.is-open[b-by1f4w2zc0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0;
    padding: 0.45rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, #bfc6bc);
    background: color-mix(in srgb, var(--surface) 98%, white);
    box-shadow: 0 10px 20px rgba(14, 33, 37, 0.12);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

#main-site-nav.is-open[b-by1f4w2zc0],
#showcase-site-nav.is-open[b-by1f4w2zc0],
#story-site-nav.is-open[b-by1f4w2zc0] {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(8, 10, 13, 0.96);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
    backdrop-filter: none;
    overflow: hidden;
}

.site-shell.admin-route .site-nav[b-by1f4w2zc0] {
    z-index: 225;
}

.site-nav a[b-by1f4w2zc0] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 650;
    color: #113d4d;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 84%, #e6ece8);
    border: 1px solid color-mix(in srgb, var(--line) 78%, #c7d1c8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    border-radius: 10px;
}

.site-nav .night-mode-toggle[b-by1f4w2zc0] {
    position: relative;
    width: 100%;
    min-height: 44px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, #c7d1c8);
    background: color-mix(in srgb, #ffffff 84%, #e6ece8);
    color: #113d4d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    font: inherit;
    font-weight: 650;
    line-height: 1.4;
    text-align: left;
}

.site-nav .night-mode-toggle[b-by1f4w2zc0]::before {
    content: "";
    position: absolute;
    left: 0.62rem;
    right: 0.62rem;
    top: -0.22rem;
    height: 1px;
    background: color-mix(in srgb, var(--line) 78%, #c7d1c8);
    pointer-events: none;
}

.site-nav .night-mode-toggle i[b-by1f4w2zc0] {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

#main-site-nav a[b-by1f4w2zc0],
#showcase-site-nav a[b-by1f4w2zc0],
#story-site-nav a[b-by1f4w2zc0] {
    gap: 0.65rem;
    padding: 0.55rem 0.62rem;
    border-radius: 10px;
    color: #f1f4f8;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    justify-content: flex-start;
}

#main-site-nav .night-mode-toggle[b-by1f4w2zc0],
#showcase-site-nav .night-mode-toggle[b-by1f4w2zc0],
#story-site-nav .night-mode-toggle[b-by1f4w2zc0] {
    --night-mode-dropdown-bg: rgba(112, 118, 126, 0.3);
    align-self: stretch;
    box-sizing: border-box;
    margin: 0.4rem calc(-0.5rem - 1px) calc(-0.5rem - 1px);
    width: calc(100% + 1rem + 2px);
    padding: 0.72rem 0.62rem;
    border-radius: 0 0 14px 14px;
    color: #f1f4f8;
    background: var(--night-mode-dropdown-bg);
    border-color: transparent;
    box-shadow: 0 -0.4rem 0 var(--night-mode-dropdown-bg);
    font-size: 1rem;
}

#main-site-nav .night-mode-toggle[b-by1f4w2zc0]::before,
#showcase-site-nav .night-mode-toggle[b-by1f4w2zc0]::before,
#story-site-nav .night-mode-toggle[b-by1f4w2zc0]::before {
    background: rgba(255, 255, 255, 0.16);
}

#main-site-nav a i[b-by1f4w2zc0],
#showcase-site-nav a i[b-by1f4w2zc0],
#story-site-nav a i[b-by1f4w2zc0] {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    color: rgba(241, 244, 248, 0.88);
}

#main-site-nav .night-mode-toggle i[b-by1f4w2zc0],
#showcase-site-nav .night-mode-toggle i[b-by1f4w2zc0],
#story-site-nav .night-mode-toggle i[b-by1f4w2zc0] {
    color: rgba(241, 244, 248, 0.88);
}

#main-site-nav a span[b-by1f4w2zc0],
#showcase-site-nav a span[b-by1f4w2zc0],
#story-site-nav a span[b-by1f4w2zc0] {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

#main-site-nav .nav-panel-link.active i[b-by1f4w2zc0],
#main-site-nav .nav-panel-link.active span[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link.active i[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link.active span[b-by1f4w2zc0],
#story-site-nav .nav-panel-link.active i[b-by1f4w2zc0],
#story-site-nav .nav-panel-link.active span[b-by1f4w2zc0] {
    color: inherit;
}

.site-nav.is-open a[b-by1f4w2zc0] {
    box-shadow: none;
}

#main-site-nav.is-open a:hover[b-by1f4w2zc0],
#showcase-site-nav.is-open a:hover[b-by1f4w2zc0],
#story-site-nav.is-open a:hover[b-by1f4w2zc0],
#main-site-nav.is-open .night-mode-toggle:hover[b-by1f4w2zc0],
#showcase-site-nav.is-open .night-mode-toggle:hover[b-by1f4w2zc0],
#story-site-nav.is-open .night-mode-toggle:hover[b-by1f4w2zc0],
#main-site-nav.is-open .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0],
#showcase-site-nav.is-open .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0],
#story-site-nav.is-open .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    --night-mode-dropdown-bg: rgba(130, 136, 145, 0.32);
    background: var(--night-mode-dropdown-bg);
    border-color: transparent;
}

.site-nav a:hover[b-by1f4w2zc0],
.site-nav .night-mode-toggle:hover[b-by1f4w2zc0],
.site-nav .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    background: color-mix(in srgb, #ffffff 66%, var(--accent) 34%);
    border-color: color-mix(in srgb, var(--accent) 50%, #c39a61);
}

.site-nav a:focus-visible[b-by1f4w2zc0],
.site-nav .night-mode-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.site-nav a.active[b-by1f4w2zc0] {
    background: var(--accent);
    color: #1e1e1e;
    border-color: color-mix(in srgb, var(--accent-deep) 65%, #b27f2e);
    box-shadow: 0 2px 10px rgba(169, 106, 18, 0.2);
}

#main-site-nav a.active i[b-by1f4w2zc0],
#showcase-site-nav a.active i[b-by1f4w2zc0],
#story-site-nav a.active i[b-by1f4w2zc0] {
    color: #1e1e1e;
}

.site-shell.story-route .site-header[b-by1f4w2zc0] {
    border-bottom-color: rgba(44, 47, 53, 0.08);
    background: rgba(246, 243, 238, 0.9);
    box-shadow: 0 10px 22px rgba(51, 47, 41, 0.08);
}

.story-header-wrap[b-by1f4w2zc0] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 72px;
}

.story-header-back[b-by1f4w2zc0] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #6a6660;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.story-header-back i[b-by1f4w2zc0] {
    font-size: 1.15rem;
    line-height: 1;
}

.story-header-back:hover[b-by1f4w2zc0] {
    background: rgba(34, 34, 34, 0.06);
    color: #2f2c29;
}

.story-header-back:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-header-title[b-by1f4w2zc0] {
    text-align: center;
    font-size: clamp(1.05rem, 2.6vw, 1.45rem);
    letter-spacing: 0.34em;
    color: #6f6a65;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-header-spacer[b-by1f4w2zc0] {
    width: 44px;
    height: 44px;
}

.story-header-menu[b-by1f4w2zc0] {
    position: relative;
    justify-self: end;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.site-shell.story-route .story-header-menu .nav-menu-toggle[b-by1f4w2zc0] {
    border-color: rgba(44, 47, 53, 0.12);
    background: rgba(34, 34, 34, 0.04);
    color: #6a6660;
}

.site-shell.story-route .story-header-menu .nav-menu-toggle:hover[b-by1f4w2zc0] {
    background: rgba(34, 34, 34, 0.08);
    border-color: rgba(44, 47, 53, 0.18);
}

.story-header-menu .site-nav[b-by1f4w2zc0] {
    right: 0;
    top: calc(100% + 0.25rem);
}

.showcase-floating-back[b-by1f4w2zc0] {
    position: fixed;
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.45rem));
    left: max(0.9rem, calc(env(safe-area-inset-left) + 0.45rem), calc((100vw - 1200px) / 2 + 2rem));
    z-index: 34;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1b232a;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.18s ease, color 0.18s ease;
}

.showcase-floating-back i[b-by1f4w2zc0] {
    font-size: 1.5rem;
    line-height: 1;
}

.showcase-floating-back:hover[b-by1f4w2zc0] {
    transform: translateY(-1px);
    color: #0f1418;
}

.site-shell.playlist-nav-route .showcase-floating-back[b-by1f4w2zc0] {
    color: #f7f2ea;
}

.site-shell.playlist-nav-route .showcase-floating-back:hover[b-by1f4w2zc0] {
    color: #ffffff;
}

.showcase-floating-back:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 70%, var(--accent));
    outline-offset: 2px;
}

.showcase-floating-menu[b-by1f4w2zc0] {
    position: fixed;
    top: max(0.75rem, calc(env(safe-area-inset-top) + 0.45rem));
    right: max(0.9rem, calc(env(safe-area-inset-right) + 0.45rem), calc((100vw - 1200px) / 2 + 2rem));
    z-index: 34;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.showcase-floating-menu .nav-menu-toggle[b-by1f4w2zc0] {
    width: 56px;
    height: 56px;
    border-radius: 0;
    color: #1b232a;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    box-shadow: none;
}

.showcase-floating-menu .nav-menu-toggle i[b-by1f4w2zc0] {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
}

.showcase-floating-menu .nav-menu-toggle:hover[b-by1f4w2zc0] {
    color: #0f1418;
}

.site-shell.playlist-nav-route .showcase-floating-menu .nav-menu-toggle[b-by1f4w2zc0] {
    color: #f7f2ea;
}

.site-shell.playlist-nav-route .showcase-floating-menu .nav-menu-toggle:hover[b-by1f4w2zc0] {
    color: #ffffff;
}

.showcase-floating-menu .site-nav[b-by1f4w2zc0] {
    right: 0;
    top: calc(100% + 0.45rem);
}

.site-shell.playlist-showcase-route .site-main[b-by1f4w2zc0] {
    padding-top: 0;
    background: #ffffff;
}

.site-shell.playlist-nav-route .site-main[b-by1f4w2zc0] {
    padding-top: 0;
    background: #222222;
}

.site-shell.story-route .nav-menu-toggle[b-by1f4w2zc0] {
    border-color: rgba(236, 242, 247, 0.28);
    background: rgba(236, 242, 247, 0.12);
    color: #f2f7fb;
}

.site-shell.story-route .story-header-menu > .night-mode-toggle[b-by1f4w2zc0] {
    border-color: transparent;
    background: transparent;
    color: #f4f8fb;
}

.site-shell.story-route .story-header-menu > .night-mode-toggle:hover[b-by1f4w2zc0],
.site-shell.story-route .story-header-menu > .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    background: rgba(236, 242, 247, 0.14);
    border-color: rgba(236, 242, 247, 0.28);
}

.site-shell.story-route.playlist-showcase-route .showcase-floating-menu .nav-menu-toggle[b-by1f4w2zc0] {
    border-color: transparent;
    background: transparent;
    color: #000000;
}

.site-shell.story-route.playlist-showcase-route .showcase-floating-menu > .night-mode-toggle[b-by1f4w2zc0] {
    width: 44px;
    height: 44px;
    color: #000000;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
}

.site-shell.story-route.playlist-showcase-route .showcase-floating-menu > .night-mode-toggle:hover[b-by1f4w2zc0],
.site-shell.story-route.playlist-showcase-route .showcase-floating-menu > .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.16);
}

.site-shell.story-route.playlist-showcase-route .showcase-floating-menu .nav-menu-toggle:hover[b-by1f4w2zc0] {
    color: #000000;
}

.site-shell.story-route .site-nav a[b-by1f4w2zc0] {
    color: #111111;
    background: #ffffff;
    border-color: rgba(44, 47, 53, 0.14);
    box-shadow: none;
}

.site-shell.story-route .site-nav .night-mode-toggle[b-by1f4w2zc0] {
    color: #111111;
    background: #ffffff;
    border-color: rgba(44, 47, 53, 0.14);
    box-shadow: none;
}

.site-shell.story-route .site-search-input[b-by1f4w2zc0] {
    color: #11161f;
}

.site-shell.story-route .site-search-input[b-by1f4w2zc0]::placeholder {
    color: color-mix(in srgb, var(--muted) 85%, #646b71);
}

.site-shell.story-route .site-search-toggle[b-by1f4w2zc0] {
    border-color: transparent;
    background: transparent;
    color: #f4f8fb;
}

.site-shell.story-route .site-search-toggle:hover[b-by1f4w2zc0] {
    background: rgba(236, 242, 247, 0.14);
    border-color: rgba(236, 242, 247, 0.28);
}

.site-shell.story-route .site-search-suggestions[b-by1f4w2zc0] {
    border-color: rgba(236, 242, 247, 0.36);
    background: rgba(8, 11, 16, 0.96);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55);
}

.site-shell.story-route .site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion {
    color: #f2f5f9;
    border-bottom-color: rgba(236, 242, 247, 0.2);
}

.site-shell.story-route .site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion:hover {
    background: rgba(236, 242, 247, 0.16);
}

.site-shell.story-route .site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-title {
    color: #72de67;
}

@keyframes site-search-spin-b-by1f4w2zc0 {
    to {
        transform: rotate(360deg);
    }
}

.site-shell.story-route .site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-kind,
.site-shell.story-route .site-search-suggestions-list[b-by1f4w2zc0]  .site-search-suggestion-empty {
    color: #4f5b66;
}

.site-shell.story-route .is-search-active .site-search-form[b-by1f4w2zc0] {
    border-color: #2f343b;
    background: #f9fafb;
}

.site-shell.story-route .is-search-active .site-search-toggle[b-by1f4w2zc0] {
    color: #262a31;
}

.site-shell.story-route .site-main[b-by1f4w2zc0] {
    padding-block: 0.75rem 2.5rem;
}

.site-shell.story-route.playlist-nav-route .site-main[b-by1f4w2zc0],
.site-shell.story-route.playlist-showcase-route .site-main[b-by1f4w2zc0] {
    padding-block: 0 2.5rem;
}

.site-shell.story-route .site-main > .site-container[b-by1f4w2zc0] {
    width: min(760px, 100% - 1.35rem);
}

.site-shell.story-route .site-nav a:hover[b-by1f4w2zc0] {
    background: #f3f3f3;
    border-color: rgba(44, 47, 53, 0.2);
}

.site-shell.story-route .site-nav .night-mode-toggle:hover[b-by1f4w2zc0],
.site-shell.story-route .site-nav .night-mode-toggle[aria-pressed="true"][b-by1f4w2zc0] {
    background: #f3f3f3;
    border-color: rgba(44, 47, 53, 0.2);
}

.site-shell.story-route .site-nav a:focus-visible[b-by1f4w2zc0],
.site-shell.story-route .site-nav .night-mode-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 55%, var(--accent));
}

.site-shell.story-route .site-nav a.active[b-by1f4w2zc0] {
    color: #111111;
}

.site-shell.story-route .site-nav.is-open[b-by1f4w2zc0] {
    border-color: rgba(44, 47, 53, 0.14);
    background: #ffffff;
    box-shadow: 0 14px 24px rgba(3, 8, 12, 0.18);
}

.site-shell.story-route .account-toggle[b-by1f4w2zc0] {
    border-color: transparent;
    background: transparent;
    color: #f4f8fb;
}

.site-shell.story-route .account-toggle:hover[b-by1f4w2zc0] {
    background: rgba(236, 242, 247, 0.14);
    border-color: rgba(236, 242, 247, 0.28);
}

.site-shell.story-route .account-caret[b-by1f4w2zc0] {
    color: #f4f8fb;
}

.notification-center[b-by1f4w2zc0] {
    position: relative;
    z-index: 59;
    background: transparent;
}

.notification-toggle[b-by1f4w2zc0] {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #113d4d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.38rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.notification-toggle:hover[b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 8%, transparent);
    border-color: color-mix(in srgb, #1b4453 18%, transparent);
}

.notification-center.is-open .notification-toggle[b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 11%, transparent);
    border-color: color-mix(in srgb, #1b4453 22%, transparent);
}

.notification-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.notification-toggle-icon[b-by1f4w2zc0] {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-toggle i[b-by1f4w2zc0] {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
}

.notification-badge[hidden][b-by1f4w2zc0] {
    display: none !important;
}

.notification-badge[b-by1f4w2zc0] {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f26d44 0%, #d94a24 100%);
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 7px 16px rgba(163, 52, 26, 0.28);
}

.notification-panel[hidden][b-by1f4w2zc0] {
    display: none !important;
}

.notification-panel[b-by1f4w2zc0] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 58;
    width: min(92vw, 360px);
    border-radius: 16px;
    border: 1px solid rgba(28, 36, 48, 0.2);
    background: #f2f3f5;
    box-shadow: 0 18px 34px rgba(15, 22, 33, 0.24);
    overflow: hidden;
    overscroll-behavior: contain;
}

.notification-panel-header[b-by1f4w2zc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem 0.65rem;
    border-bottom: 1px solid rgba(18, 24, 34, 0.12);
    background: #f7f8fa;
    color: #183847;
}

.notification-panel-header-copy[b-by1f4w2zc0] {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.notification-panel-count[b-by1f4w2zc0] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #55606e;
}

.notification-panel-clear[b-by1f4w2zc0] {
    border: 0;
    background: transparent;
    color: #0e647c;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.2rem 0;
    cursor: pointer;
    transition: color 160ms ease, opacity 160ms ease;
}

.notification-panel-clear:hover[b-by1f4w2zc0] {
    color: #0a5164;
}

.notification-panel-clear:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 36%, var(--accent));
    outline-offset: 4px;
    border-radius: 8px;
}

.notification-panel-clear[disabled][b-by1f4w2zc0] {
    opacity: 0.55;
    cursor: default;
}

.notification-panel-status[b-by1f4w2zc0] {
    margin: 0;
    padding: 0.8rem 0.9rem;
    font-size: 0.9rem;
    color: #42505d;
}

.notification-list[b-by1f4w2zc0] {
    max-height: min(56vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notification-panel-footer[b-by1f4w2zc0] {
    padding: 0.78rem 0.9rem 0.9rem;
    border-top: 1px solid rgba(18, 24, 34, 0.08);
    background: linear-gradient(180deg, rgba(247, 248, 250, 0.65) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.notification-panel-load-more[b-by1f4w2zc0] {
    width: 100%;
    border: 1px solid rgba(14, 100, 124, 0.18);
    border-radius: 999px;
    background: rgba(14, 100, 124, 0.06);
    color: #0e647c;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 0.72rem 0.9rem;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.notification-panel-load-more:hover[b-by1f4w2zc0] {
    background: rgba(14, 100, 124, 0.11);
    border-color: rgba(14, 100, 124, 0.26);
    color: #0a5164;
}

.notification-panel-load-more:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 36%, var(--accent));
    outline-offset: 3px;
}

.notification-panel-load-more[disabled][b-by1f4w2zc0] {
    opacity: 0.6;
    cursor: default;
}

.notification-list[b-by1f4w2zc0]  .notification-item-shell {
    position: relative;
    transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease, margin 180ms ease;
    transform-origin: top center;
    max-height: 160px;
    opacity: 1;
}

.notification-list[b-by1f4w2zc0]  .notification-item-shell.is-removing {
    opacity: 0;
    transform: translateX(14px) scale(0.98);
    max-height: 0;
}

.notification-list[b-by1f4w2zc0]  .notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    padding: 0.72rem 2.75rem 0.72rem 0.86rem;
    border-bottom: 1px solid rgba(18, 24, 34, 0.12);
    text-decoration: none;
    color: #1e2430;
    background: transparent;
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-character {
    border-left: 3px solid rgba(60, 135, 111, 0.48);
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-story {
    border-left: 3px solid rgba(31, 108, 143, 0.42);
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-blog {
    border-left: 3px solid rgba(190, 118, 32, 0.42);
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-resource {
    border-left: 3px solid rgba(82, 125, 67, 0.44);
}

.notification-list[b-by1f4w2zc0]  .notification-item-shell:last-child .notification-item {
    border-bottom: 0;
}

.notification-list[b-by1f4w2zc0]  .notification-item:hover {
    background: rgba(255, 255, 255, 0.58);
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-unread {
    background: linear-gradient(180deg, rgba(237, 247, 252, 0.96) 0%, rgba(242, 244, 246, 0.96) 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item.is-unread .notification-item-title {
    color: #0e495d;
}

.notification-list[b-by1f4w2zc0]  .notification-item:focus-visible {
    outline: 3px solid color-mix(in srgb, #ffffff 46%, var(--accent));
    outline-offset: -3px;
}

.notification-list[b-by1f4w2zc0]  .notification-item-clear {
    position: absolute;
    top: 0.6rem;
    right: 0.62rem;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 73, 93, 0.08);
    color: #4f5d68;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
    z-index: 1;
}

.notification-list[b-by1f4w2zc0]  .notification-item-clear:hover {
    background: rgba(14, 73, 93, 0.14);
    color: #183847;
}

.notification-list[b-by1f4w2zc0]  .notification-item-clear:focus-visible {
    outline: 3px solid color-mix(in srgb, #ffffff 42%, var(--accent));
    outline-offset: 2px;
}

.notification-list[b-by1f4w2zc0]  .notification-item-clear[disabled] {
    opacity: 0.55;
    cursor: default;
}

.notification-list[b-by1f4w2zc0]  .notification-item-image {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
    background: #d5d9df;
    overflow: hidden;
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    display: block;
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 2px solid #f2f3f5;
    box-shadow: 0 5px 12px rgba(14, 31, 40, 0.22);
    font-size: 0.58rem;
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge.is-character {
    background: linear-gradient(180deg, #3b8f75 0%, #2f715d 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge.is-story {
    background: linear-gradient(180deg, #2d7ba0 0%, #215c78 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge.is-blog {
    background: linear-gradient(180deg, #d28a2d 0%, #b5651f 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge.is-resource {
    background: linear-gradient(180deg, #608b48 0%, #446c35 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item-image-badge.is-general {
    background: linear-gradient(180deg, #6c7682 0%, #535b65 100%);
}

.notification-list[b-by1f4w2zc0]  .notification-item-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.notification-list[b-by1f4w2zc0]  .notification-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.notification-list[b-by1f4w2zc0]  .notification-item-type {
    display: inline-flex;
    align-items: center;
    max-width: fit-content;
    padding: 0.18rem 0.46rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.notification-list[b-by1f4w2zc0]  .notification-item-type.is-character {
    color: #235343;
    background: rgba(59, 143, 117, 0.16);
}

.notification-list[b-by1f4w2zc0]  .notification-item-type.is-story {
    color: #184963;
    background: rgba(45, 123, 160, 0.16);
}

.notification-list[b-by1f4w2zc0]  .notification-item-type.is-blog {
    color: #8f4f13;
    background: rgba(210, 138, 45, 0.16);
}

.notification-list[b-by1f4w2zc0]  .notification-item-type.is-resource {
    color: #36572a;
    background: rgba(96, 139, 72, 0.16);
}

.notification-list[b-by1f4w2zc0]  .notification-item-type.is-general {
    color: #4a5561;
    background: rgba(108, 118, 130, 0.16);
}

.notification-list[b-by1f4w2zc0]  .notification-item-title {
    margin: 0;
    color: #183847;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 700;
}

.notification-list[b-by1f4w2zc0]  .notification-item-body {
    margin: 0;
    color: #55606e;
    font-size: 0.84rem;
    line-height: 1.38;
}

.notification-list[b-by1f4w2zc0]  .notification-item-date {
    margin: 0;
    color: #6b7682;
    font-size: 0.74rem;
    line-height: 1.2;
    white-space: nowrap;
}

.notification-list[b-by1f4w2zc0]  .notification-item-empty {
    margin: 0;
    padding: 0.88rem 0.9rem;
    color: #42505d;
    font-size: 0.9rem;
}

.account-menu[b-by1f4w2zc0] {
    position: relative;
    z-index: 59;
    background: transparent;
}

.site-shell.admin-route .account-menu[b-by1f4w2zc0] {
    z-index: 222;
}

.account-toggle[b-by1f4w2zc0] {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #113d4d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.24rem 0.5rem 0.24rem 0.26rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.account-toggle:hover[b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 8%, transparent);
    border-color: color-mix(in srgb, #1b4453 18%, transparent);
}

.account-menu.is-open .account-toggle[b-by1f4w2zc0] {
    background: color-mix(in srgb, #1b4453 11%, transparent);
    border-color: color-mix(in srgb, #1b4453 22%, transparent);
}

.site-shell.story-route .account-menu.is-open .account-toggle[b-by1f4w2zc0] {
    background: rgba(236, 242, 247, 0.18);
    border-color: rgba(236, 242, 247, 0.32);
}

.account-toggle:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.account-avatar[b-by1f4w2zc0] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(180deg, #4a97d8 0%, #2e6fa4 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(15, 40, 60, 0.24);
    overflow: hidden;
}

.account-avatar-image[b-by1f4w2zc0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.account-avatar-image-fallback[b-by1f4w2zc0] {
    object-fit: contain;
    padding: 0.22rem;
    background: #ffffff;
}

.account-avatar-initials[b-by1f4w2zc0] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.account-caret[b-by1f4w2zc0] {
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 1;
    color: color-mix(in srgb, #123645 82%, #000000);
    transition: transform 0.18s ease;
}

.account-menu.is-open .account-caret[b-by1f4w2zc0] {
    transform: rotate(180deg);
}

.account-dropdown[b-by1f4w2zc0] {
    display: none;
    width: min(90vw, 320px);
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 58;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(8, 10, 13, 0.96);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
}

.account-menu.is-open .account-dropdown[b-by1f4w2zc0] {
    display: block;
}

.account-link[b-by1f4w2zc0],
.account-signout[b-by1f4w2zc0],
#main-site-nav .nav-panel-link[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link[b-by1f4w2zc0] {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    color: #f1f4f8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.62rem;
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.4;
}

.account-link i[b-by1f4w2zc0],
#main-site-nav .nav-panel-link i[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link i[b-by1f4w2zc0] {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    color: rgba(241, 244, 248, 0.88);
}

#main-site-nav[b-by1f4w2zc0]  .nav-panel-link,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    color: #f1f4f8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.62rem;
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.4;
}

#main-site-nav[b-by1f4w2zc0]  .nav-panel-link,
#main-site-nav[b-by1f4w2zc0]  .nav-panel-link span,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link span,
#story-site-nav[b-by1f4w2zc0]  .nav-panel-link,
#story-site-nav[b-by1f4w2zc0]  .nav-panel-link span {
    color: #f1f4f8;
}

#main-site-nav[b-by1f4w2zc0]  .nav-panel-link i,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link i,
#story-site-nav[b-by1f4w2zc0]  .nav-panel-link i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    color: rgba(241, 244, 248, 0.88);
}

#main-site-nav .night-mode-toggle.nav-panel-link[b-by1f4w2zc0],
#showcase-site-nav .night-mode-toggle.nav-panel-link[b-by1f4w2zc0],
#story-site-nav .night-mode-toggle.nav-panel-link[b-by1f4w2zc0] {
    width: calc(100% + 1rem + 2px);
    max-width: none;
}

.night-mode-toggle-icon[b-by1f4w2zc0] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.82;
}

.night-mode-toggle[aria-pressed="false"] .night-mode-toggle-icon-sun[b-by1f4w2zc0],
.night-mode-toggle[aria-pressed="true"] .night-mode-toggle-icon-moon[b-by1f4w2zc0] {
    opacity: 1;
}

.night-mode-toggle[aria-pressed="true"] .night-mode-toggle-icon-sun[b-by1f4w2zc0],
.night-mode-toggle[aria-pressed="false"] .night-mode-toggle-icon-moon[b-by1f4w2zc0] {
    opacity: 0.54;
}

.night-mode-toggle-indicator[b-by1f4w2zc0] {
    position: relative;
    flex: 0 0 auto;
    width: 2.45rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.night-mode-toggle-thumb[b-by1f4w2zc0] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
    transition: transform 0.18s ease, background 0.18s ease;
}

.night-mode-toggle[aria-pressed="true"] .night-mode-toggle-indicator[b-by1f4w2zc0] {
    background: color-mix(in srgb, var(--accent) 74%, #ffffff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 72%, #ffffff);
}

.night-mode-toggle[aria-pressed="true"] .night-mode-toggle-thumb[b-by1f4w2zc0] {
    transform: translateX(1.05rem);
    background: #fff7ea;
}

.account-link:hover[b-by1f4w2zc0],
.account-signout:hover[b-by1f4w2zc0],
#main-site-nav .nav-panel-link:hover[b-by1f4w2zc0],
#main-site-nav .nav-panel-link.active[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link:hover[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link.active[b-by1f4w2zc0],
#story-site-nav .nav-panel-link:hover[b-by1f4w2zc0],
#story-site-nav .nav-panel-link.active[b-by1f4w2zc0] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f4f8;
    border-color: transparent;
    box-shadow: none;
}

#main-site-nav[b-by1f4w2zc0]  .nav-panel-link:hover,
#main-site-nav[b-by1f4w2zc0]  .nav-panel-link.active,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link:hover,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link.active,
#story-site-nav[b-by1f4w2zc0]  .nav-panel-link:hover,
#story-site-nav[b-by1f4w2zc0]  .nav-panel-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f4f8;
    border-color: transparent;
    box-shadow: none;
}

.account-link:focus-visible[b-by1f4w2zc0],
.account-signout:focus-visible[b-by1f4w2zc0],
#main-site-nav .nav-panel-link:focus-visible[b-by1f4w2zc0],
#showcase-site-nav .nav-panel-link:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 65%, var(--accent));
    outline-offset: 2px;
}

#main-site-nav[b-by1f4w2zc0]  .nav-panel-link:focus-visible,
#showcase-site-nav[b-by1f4w2zc0]  .nav-panel-link:focus-visible {
    outline: 3px solid color-mix(in srgb, #ffffff 65%, var(--accent));
    outline-offset: 2px;
}

.account-divider[b-by1f4w2zc0] {
    height: 1px;
    margin: 0.4rem 0;
    background: rgba(255, 255, 255, 0.19);
}

.account-signout[b-by1f4w2zc0] {
    justify-content: center;
    font-weight: 700;
}

.header-signin-btn[b-by1f4w2zc0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.22rem 0.66rem;
    border-radius: 7px;
    border: 1px solid #2c3136;
    background: linear-gradient(180deg, #343a40 0%, #2f353b 100%);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 7px 16px rgba(20, 24, 28, 0.3);
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.header-signin-btn:hover[b-by1f4w2zc0] {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 9px 18px rgba(20, 24, 28, 0.35);
}

.header-signin-btn:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 62%, #343a40);
    outline-offset: 2px;
}

.site-main[b-by1f4w2zc0] {
    flex: 1;
    padding: 1.4rem 0 2rem;
}

.site-shell.luister-route .site-main[b-by1f4w2zc0] {
    padding-bottom: 0;
}

.site-shell.home-route .site-main[b-by1f4w2zc0] {
    padding-top: 0;
    padding-bottom: 0;
}

.site-footer[b-by1f4w2zc0] {
    border-top: 1px solid var(--line);
    padding: 1rem 0;
    color: #f2f2f2;
    font-size: 0.9rem;
    background: #222222;
}

.footer-wrap[b-by1f4w2zc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.footer-brand[b-by1f4w2zc0] {
    text-decoration: none;
    line-height: 0;
}

.site-footer .brand-wordmark[b-by1f4w2zc0] {
    width: 170px;
    filter: brightness(0) invert(1);
}

.footer-socials[b-by1f4w2zc0] {
    display: inline-flex;
    gap: 0.7rem;
}

.footer-socials a[b-by1f4w2zc0] {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover[b-by1f4w2zc0] {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.footer-socials a:focus-visible[b-by1f4w2zc0] {
    outline: 3px solid color-mix(in srgb, #ffffff 70%, var(--accent));
    outline-offset: 2px;
}

.footer-socials i[b-by1f4w2zc0] {
    display: block;
    font-size: 18px;
    line-height: 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-footer p[b-by1f4w2zc0] {
    margin: 0;
}

.footer-tagline[b-by1f4w2zc0] {
    font-weight: 700;
    letter-spacing: 0.01em;
}

#blazor-error-ui[b-by1f4w2zc0] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .blazor-error-title[b-by1f4w2zc0] {
    display: block;
    margin-right: 5.5rem;
}

#blazor-error-ui .blazor-error-detail[b-by1f4w2zc0] {
    margin: 0.45rem 5.5rem 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

#blazor-error-ui .blazor-error-diagnostics[b-by1f4w2zc0] {
    margin: 0.55rem 5.5rem 0 0;
}

#blazor-error-ui .blazor-error-diagnostics summary[b-by1f4w2zc0] {
    cursor: pointer;
    font-weight: 700;
}

#blazor-error-ui .blazor-error-diagnostics pre[b-by1f4w2zc0] {
    margin: 0.45rem 0 0;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.4;
}

#blazor-error-ui .dismiss[b-by1f4w2zc0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 900px) {
    .nav-wrap[b-by1f4w2zc0] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.14rem 0;
    }

    .nav-controls[b-by1f4w2zc0] {
        justify-self: end;
        min-width: 0;
    }

    .guest-controls[b-by1f4w2zc0] {
        min-width: 0;
    }

    .nav-menu-toggle[b-by1f4w2zc0] {
        z-index: 61;
    }

    .site-nav.is-open a:hover[b-by1f4w2zc0] {
        transform: none;
    }

    .site-shell.story-route .site-nav.is-open a[b-by1f4w2zc0] {
        color: #f4f8fb;
        background: rgba(236, 242, 247, 0.12);
        border-color: rgba(236, 242, 247, 0.26);
    }

.site-shell.story-route .site-nav.is-open a:hover[b-by1f4w2zc0] {
        background: rgba(236, 242, 247, 0.22);
        border-color: rgba(236, 242, 247, 0.38);
    }

    .account-toggle[b-by1f4w2zc0] {
        min-height: 32px;
        padding: 0.22rem 0.46rem 0.22rem 0.24rem;
    }

    .notification-toggle[b-by1f4w2zc0] {
        min-height: 32px;
        padding: 0.28rem 0.34rem;
    }

    .night-mode-toggle[b-by1f4w2zc0] {
        width: 32px;
        height: 32px;
    }

    .notification-panel[b-by1f4w2zc0] {
        position: fixed;
        top: var(--notification-panel-top, calc(env(safe-area-inset-top, 0px) + 4rem));
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: none;
        max-height: var(--notification-panel-max-height, calc(100dvh - env(safe-area-inset-top, 0px) - 4.5rem));
    }

    .notification-list[b-by1f4w2zc0] {
        max-height: calc(var(--notification-panel-max-height, calc(100dvh - env(safe-area-inset-top, 0px) - 4.5rem)) - 6.5rem);
    }

    .account-avatar[b-by1f4w2zc0] {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .account-avatar-initials[b-by1f4w2zc0] {
        font-size: 0.66rem;
    }

    .account-dropdown[b-by1f4w2zc0] {
        right: 0;
        top: calc(100% + 0.35rem);
        width: min(94vw, 305px);
    }

    .brand-wordmark[b-by1f4w2zc0] {
        width: 112px;
    }

    .site-search-toggle[b-by1f4w2zc0] {
        width: 32px;
        height: 32px;
    }

    .site-search-toggle i[b-by1f4w2zc0] {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    .is-search-active .site-search-form[b-by1f4w2zc0] {
        min-width: 0;
        min-height: 50px;
        padding: 0 0.72rem;
    }

    .nav-controls.is-search-active[b-by1f4w2zc0],
    .guest-controls.is-search-active[b-by1f4w2zc0] {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        margin-top: 0.24rem;
    }

    .nav-controls.is-search-active .site-search-form[b-by1f4w2zc0],
    .guest-controls.is-search-active .site-search-form[b-by1f4w2zc0] {
        width: 100%;
    }

    .is-search-active .site-search-toggle[b-by1f4w2zc0] {
        width: auto;
        height: auto;
    }

    .site-search-input[b-by1f4w2zc0] {
        min-height: 40px;
    }

    .guest-controls[b-by1f4w2zc0] {
        gap: 0.42rem;
    }

    .header-signin-btn[b-by1f4w2zc0] {
        justify-self: end;
        min-height: 27px;
        padding-inline: 0.58rem;
        font-size: 0.8rem;
    }

    .footer-wrap[b-by1f4w2zc0] {
        align-items: center;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gceybtjftc],
.components-reconnect-repeated-attempt-visible[b-gceybtjftc],
.components-reconnect-failed-visible[b-gceybtjftc],
.components-pause-visible[b-gceybtjftc],
.components-resume-failed-visible[b-gceybtjftc],
.components-rejoining-animation[b-gceybtjftc] {
    display: none;
}

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


#components-reconnect-modal[b-gceybtjftc] {
    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-gceybtjftc 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-gceybtjftc {
    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/Admin.razor.rz.scp.css */
.admin-page[b-uoqfh0akh9] {
    --admin-bg: #10161e;
    --admin-surface: #16212d;
    --admin-surface-soft: #1b2836;
    --admin-border: #304457;
    --admin-border-strong: #3f5a72;
    --admin-text: #eaf1f8;
    --admin-muted: #b4c0ce;
    --admin-grid-header: #233547;
    --admin-row-hover: #25384a;
    --admin-selected-row: #2f4f68;
    --admin-input-bg: #1d2d3d;
    --admin-input-border: #49657d;

    width: 100%;
    max-width: none;
    padding-inline: clamp(0.75rem, 1.8vw, 1.5rem);
    box-sizing: border-box;
    margin-inline: auto;
    display: grid;
    gap: 1rem;
    color: var(--admin-text);
}

.admin-hero[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border-strong);
    border-radius: 16px;
    padding: 1rem;
    background: linear-gradient(180deg, #1b2a39 0%, #142131 100%);
    color: var(--admin-text);
}

.admin-hero-top[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.admin-hero h1[b-uoqfh0akh9] {
    margin: 0;
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
}

.admin-hero p[b-uoqfh0akh9] {
    margin: 0.38rem 0 0;
    color: var(--admin-muted);
}

.admin-language[b-uoqfh0akh9] {
    display: grid;
    gap: 0.25rem;
    min-width: 170px;
}

.admin-language[b-uoqfh0akh9]  .mud-input-control {
    margin: 0;
    min-width: 170px;
}

.admin-state[b-uoqfh0akh9] {
    border: 1px dashed var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    background: var(--admin-surface-soft);
}

.admin-state h2[b-uoqfh0akh9] {
    margin: 0;
    font-size: 1.2rem;
}

.admin-state p[b-uoqfh0akh9] {
    margin: 0.4rem 0 0;
    color: var(--admin-muted);
}

.admin-modal-loading[b-uoqfh0akh9] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #05090d 68%, transparent);
}

.admin-modal-loading-card[b-uoqfh0akh9] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.05rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border-strong);
    background: var(--admin-surface);
    color: var(--admin-text);
    font-weight: 700;
}

.admin-modal-spinner[b-uoqfh0akh9] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--admin-text) 28%, transparent);
    border-top-color: #f3a13f;
    animation: admin-modal-spin-b-uoqfh0akh9 0.8s linear infinite;
}

@keyframes admin-modal-spin-b-uoqfh0akh9 {
    to {
        transform: rotate(360deg);
    }
}

.admin-feedback[b-uoqfh0akh9] {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    font-weight: 600;
}

.admin-feedback.is-error[b-uoqfh0akh9] {
    background: #3d1d23;
    color: #ffd7db;
    border: 1px solid #80424f;
}

.admin-feedback.is-success[b-uoqfh0akh9] {
    background: #143526;
    color: #d0ffe8;
    border: 1px solid #2f7054;
}

.admin-tabs-shell[b-uoqfh0akh9] {
    display: grid;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-tabbar {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface);
    padding: 0.2rem;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-toolbar,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-tabbar-inner,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-scroll-wrapper,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-tabbar-content {
    background: var(--admin-surface) !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab {
    border-radius: 10px;
    font-weight: 700;
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
    opacity: 1 !important;
    background: transparent !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-button-label span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab .mud-ripple {
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active),
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] {
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
    opacity: 1 !important;
    background: transparent !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active) .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active) .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active) .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active) .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:not(.mud-tab-active) .mud-button-label span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="false"] .mud-button-label span {
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
    opacity: 1 !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active {
    background: color-mix(in srgb, #ffffff 12%, transparent);
    color: var(--admin-text);
    -webkit-text-fill-color: var(--admin-text) !important;
    opacity: 1 !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] {
    background: color-mix(in srgb, #ffffff 12%, transparent);
    color: var(--admin-text);
    -webkit-text-fill-color: var(--admin-text) !important;
    opacity: 1 !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab.mud-tab-active .mud-button-label span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] .mud-button-label span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:hover .mud-tab-content,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:hover .mud-tab-content span,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:hover .mud-tab-content .mud-icon-root,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:hover .mud-button-label,
.admin-tabs-shell[b-uoqfh0akh9]  .mud-tab:hover .mud-button-label span {
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
}

.admin-tabs-shell[b-uoqfh0akh9]  .mud-tabs-panels {
    margin-top: 0.65rem;
}

.admin-dialog-tabs[b-uoqfh0akh9]  .mud-tab.mud-tab-active,
.admin-dialog-tabs[b-uoqfh0akh9]  .mud-tab[aria-selected="true"] {
    background: transparent !important;
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-dialog,
.admin-page[b-uoqfh0akh9]  .mud-dialog .mud-paper {
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-dialog {
    border: 1px solid var(--admin-border-strong);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    overflow: hidden;
}

.admin-page[b-uoqfh0akh9]  .mud-dialog-title,
.admin-page[b-uoqfh0akh9]  .mud-dialog-content,
.admin-page[b-uoqfh0akh9]  .mud-dialog-actions {
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-dialog-title {
    border-bottom: 1px solid var(--admin-border);
}

.admin-page[b-uoqfh0akh9]  .mud-dialog-content {
    background: var(--admin-surface-soft) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-dialog-actions {
    border-top: 1px solid var(--admin-border);
}

.admin-solid-dialog[b-uoqfh0akh9],
.admin-solid-dialog[b-uoqfh0akh9]  .mud-dialog,
.admin-solid-dialog[b-uoqfh0akh9]  .mud-paper {
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
}

.admin-solid-dialog-body[b-uoqfh0akh9] {
    min-height: 360px;
    padding: 0.2rem;
    border-radius: 12px;
    background: var(--admin-surface-soft);
    color: var(--admin-text);
}

.admin-section[b-uoqfh0akh9] {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
    padding: 0.8rem;
}

.admin-section-head[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    width: 100%;
}

.admin-section h2[b-uoqfh0akh9] {
    margin: 0;
    font-size: 1.25rem;
}

.admin-search[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: min(100%, 860px);
    margin-inline-start: auto;
}

.admin-search-field[b-uoqfh0akh9] {
    flex: 1;
    min-width: 220px;
}

.admin-search-field[b-uoqfh0akh9]  .mud-input-control {
    width: 100%;
    margin: 0;
}

.admin-story-search[b-uoqfh0akh9],
.admin-playlist-search[b-uoqfh0akh9] {
    width: 100%;
    min-height: 40px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--admin-input-border);
    border-radius: 12px;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.admin-search-actions[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.admin-bulk-toolbar[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--admin-surface-soft) 86%, #ffffff 14%);
}

.admin-bulk-toolbar > span[b-uoqfh0akh9] {
    color: var(--admin-text);
    font-weight: 800;
    margin-inline-end: 0.2rem;
}

.admin-subscriber-section-head[b-uoqfh0akh9] {
    align-items: flex-start;
}

.admin-subscriber-submenu[b-uoqfh0akh9] {
    display: grid;
    gap: 0.45rem;
    flex: 1 1 320px;
}

.admin-subscriber-submenu-label[b-uoqfh0akh9] {
    color: var(--admin-muted);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.admin-subscriber-submenu-links[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-subscriber-submenu-link[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    background: color-mix(in srgb, var(--admin-surface-soft) 82%, #ffffff 18%);
    color: var(--admin-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.admin-subscriber-submenu-link:hover[b-uoqfh0akh9],
.admin-subscriber-submenu-link:focus-visible[b-uoqfh0akh9] {
    border-color: var(--admin-border-strong);
    background: color-mix(in srgb, var(--admin-surface-soft) 62%, #ffffff 38%);
    transform: translateY(-1px);
}

.admin-subscriber-submenu-link.is-active[b-uoqfh0akh9] {
    border-color: #f3a13f;
    background: #f3a13f;
    color: #111820;
}

.admin-report-copy[b-uoqfh0akh9] {
    display: grid;
    gap: 0.25rem;
}

.admin-report-copy h2[b-uoqfh0akh9] {
    margin: 0;
}

.admin-report-cards[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.admin-report-card[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-soft);
    padding: 0.9rem;
    display: grid;
    gap: 0.35rem;
}

.admin-report-card-label[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-report-card-value[b-uoqfh0akh9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.admin-report-card-meta[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-text);
    font-weight: 700;
}

.admin-report-analytics-layout[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.admin-report-panel[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-soft);
    padding: 0.9rem;
    display: grid;
    gap: 0.75rem;
}

.admin-report-chart-shell[b-uoqfh0akh9] {
    min-height: 320px;
    display: grid;
    align-items: center;
}

.admin-report-chart-shell[b-uoqfh0akh9]  .mud-chart {
    width: 100%;
}

.admin-report-table-wrap[b-uoqfh0akh9] {
    overflow-x: auto;
}

.admin-report-table[b-uoqfh0akh9] {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.admin-report-table th[b-uoqfh0akh9],
.admin-report-table td[b-uoqfh0akh9] {
    padding: 0.8rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-border) 88%, transparent);
    text-align: left;
}

.admin-report-table th[b-uoqfh0akh9] {
    background: var(--admin-grid-header);
    color: #f5f8fb;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.admin-report-table td[b-uoqfh0akh9] {
    color: var(--admin-text);
}

.admin-report-table tbody tr:hover td[b-uoqfh0akh9] {
    background: color-mix(in srgb, var(--admin-row-hover) 80%, transparent);
}

.admin-new-action-btn[b-uoqfh0akh9] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #eaf2fa;
    background: #24384c;
    transition: transform 0.16s ease, filter 0.16s ease;
    overflow: hidden;
}

.admin-new-action-btn:hover[b-uoqfh0akh9],
.admin-new-action-btn:focus-visible[b-uoqfh0akh9] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.admin-new-action-btn i[b-uoqfh0akh9] {
    font-size: 1rem;
    line-height: 1;
}

.admin-search button[b-uoqfh0akh9],
.admin-btn[b-uoqfh0akh9],
.admin-table-actions button[b-uoqfh0akh9],
.admin-table-actions a[b-uoqfh0akh9],
.admin-playlist-actions button[b-uoqfh0akh9],
.admin-story-picker button[b-uoqfh0akh9] {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    color: #111820;
    background: #f3a13f;
}

.admin-table-actions a[b-uoqfh0akh9] {
    text-decoration: none;
}

.admin-btn.admin-btn-secondary[b-uoqfh0akh9] {
    border-color: var(--admin-border-strong);
    background: #24384c;
    color: #eaf2fa;
}

.admin-btn:disabled[b-uoqfh0akh9],
.admin-table-actions button:disabled[b-uoqfh0akh9],
.admin-playlist-actions button:disabled[b-uoqfh0akh9] {
    cursor: not-allowed;
    opacity: 0.6;
}

.admin-icon-btn[b-uoqfh0akh9] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-icon-btn i[b-uoqfh0akh9] {
    font-size: 0.95rem;
    line-height: 1;
}

.admin-btn-text[b-uoqfh0akh9] {
    display: none;
}

.admin-grid[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    overflow: visible;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-container {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 12px 12px 0 0;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-root {
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    overflow: visible;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-pagination {
    background: var(--admin-surface-soft);
    color: #1b2836 !important;
    border-top: 1px solid color-mix(in srgb, var(--admin-border) 84%, transparent);
}

.admin-grid[b-uoqfh0akh9]  .mud-table-pagination * {
    color: #1b2836 !important;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-pagination .mud-disabled,
.admin-grid[b-uoqfh0akh9]  .mud-table-pagination button:disabled {
    color: color-mix(in srgb, var(--admin-text) 48%, #8092a3) !important;
    opacity: 1 !important;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-head .mud-table-cell {
    background: var(--admin-grid-header);
    color: #f6f9fc;
    border-bottom: 1px solid var(--admin-border-strong);
    font-weight: 700;
    overflow: visible;
}

.admin-grid[b-uoqfh0akh9]  .mud-table-cell {
    padding: 0.58rem 0.5rem;
    vertical-align: top;
    border-color: color-mix(in srgb, var(--admin-border) 84%, transparent);
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-grid[b-uoqfh0akh9]  .admin-search-highlight {
    background: color-mix(in srgb, #f3a13f 82%, #fff4d6);
    color: #1b2836;
    border-radius: 4px;
    padding: 0 0.16rem;
}

.admin-grid[b-uoqfh0akh9]  tbody tr {
    cursor: pointer;
}

.admin-grid[b-uoqfh0akh9]  tbody tr:hover > .mud-table-cell {
    background: var(--admin-row-hover);
}

.admin-grid[b-uoqfh0akh9]  tr.admin-grid-row-selected > .mud-table-cell {
    background: var(--admin-selected-row);
}

.admin-header-cell[b-uoqfh0akh9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
}

.admin-header-cell[b-uoqfh0akh9]  .mud-table-sort-label {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-header-title[b-uoqfh0akh9] {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-header-filter[b-uoqfh0akh9] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.admin-header-filter-toggle[b-uoqfh0akh9] {
    list-style: none;
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    border: 1px solid color-mix(in srgb, var(--admin-border-strong) 88%, transparent);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--admin-surface) 86%, #304457);
    color: #f6f9fc;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.admin-header-filter-toggle[b-uoqfh0akh9]::-webkit-details-marker {
    display: none;
}

.admin-header-filter[open] .admin-header-filter-toggle[b-uoqfh0akh9],
.admin-header-filter.is-active .admin-header-filter-toggle[b-uoqfh0akh9] {
    border-color: #f3a13f;
    background: #f3a13f;
    color: #16212d;
}

.admin-header-filter-popover[b-uoqfh0akh9] {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: min(18rem, 75vw);
    padding: 0.7rem;
    border: 1px solid var(--admin-border-strong);
    border-radius: 12px;
    background: var(--admin-surface);
    box-shadow: 0 16px 30px rgba(5, 11, 20, 0.46);
    display: grid;
    gap: 0.55rem;
    z-index: 40;
}

.admin-header-filter-label[b-uoqfh0akh9] {
    color: var(--admin-text);
    font-size: 0.83rem;
    font-weight: 700;
}

.admin-header-filter-input[b-uoqfh0akh9],
.admin-header-filter-select[b-uoqfh0akh9] {
    width: 100%;
    min-height: 38px;
    padding: 0.6rem 0.72rem;
    border: 1px solid var(--admin-input-border);
    border-radius: 10px;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.admin-header-filter-actions-row[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.admin-header-filter-action[b-uoqfh0akh9] {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    color: #111820;
    background: #f3a13f;
}

.admin-header-filter-action.is-secondary[b-uoqfh0akh9] {
    border-color: var(--admin-border-strong);
    background: #24384c;
    color: #eaf2fa;
}

.admin-subscriber-grid[b-uoqfh0akh9]  table {
    width: 100%;
    table-layout: fixed;
}

.admin-subscriber-grid[b-uoqfh0akh9] {
    overflow: visible;
}

.admin-subscriber-grid[b-uoqfh0akh9]  .mud-table-head .mud-table-cell {
    position: relative;
}

.admin-selection-cell[b-uoqfh0akh9] {
    text-align: center;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(1) {
    width: 4%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(2) {
    width: 28%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(3) {
    width: 11%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(4) {
    width: 12%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(5) {
    width: 11%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(6) {
    width: 10%;
}

.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(7),
.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(8),
.admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(9) {
    width: 8%;
}

.admin-subscriber-cell[b-uoqfh0akh9] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.admin-subscriber-avatar[b-uoqfh0akh9] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #f3a13f 24%, var(--admin-surface));
    border: 1px solid color-mix(in srgb, var(--admin-border-strong) 72%, transparent);
}

.admin-subscriber-avatar-image[b-uoqfh0akh9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-subscriber-avatar-image-fallback[b-uoqfh0akh9] {
    object-fit: contain;
    padding: 0.32rem;
    background: #ffffff;
}

.admin-subscriber-avatar-fallback[b-uoqfh0akh9] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #f6f9fc;
}

.admin-subscriber-meta[b-uoqfh0akh9] {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    overflow: hidden;
}

.admin-subscriber-primary[b-uoqfh0akh9],
.admin-subscriber-secondary[b-uoqfh0akh9] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.admin-subscriber-primary[b-uoqfh0akh9] {
    font-weight: 700;
    color: inherit;
}

.admin-subscriber-secondary[b-uoqfh0akh9] {
    color: color-mix(in srgb, currentColor 62%, transparent);
    font-size: 0.87rem;
}

.admin-grid-resize-handle[b-uoqfh0akh9] {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 3;
}

.admin-grid-resize-handle[b-uoqfh0akh9]::before {
    content: "";
    position: absolute;
    top: 14%;
    bottom: 14%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: color-mix(in srgb, #ffffff 40%, transparent);
    transition: background-color 120ms ease, width 120ms ease;
}

.admin-grid-resize-handle:hover[b-uoqfh0akh9]::before,
.admin-grid-resize-handle.is-active[b-uoqfh0akh9]::before {
    width: 2px;
    background: #f3a13f;
}

.admin-subscriber-grid.is-column-resizing[b-uoqfh0akh9],
.admin-subscriber-grid.is-column-resizing *[b-uoqfh0akh9] {
    cursor: col-resize !important;
    user-select: none !important;
}

.admin-editor[b-uoqfh0akh9] {
    display: grid;
    gap: 0.6rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-surface-soft);
    padding: 0.75rem;
}

.admin-editor h3[b-uoqfh0akh9] {
    margin: 0;
    font-size: 1.05rem;
}

.admin-editor > .admin-btn[b-uoqfh0akh9] {
    justify-self: flex-start;
}

.admin-form-grid[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.admin-form-grid label[b-uoqfh0akh9] {
    display: grid;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.admin-form-grid[b-uoqfh0akh9]  .mud-input-control,
.admin-story-picker[b-uoqfh0akh9]  .mud-input-control {
    margin: 0;
    width: 100%;
}

.admin-form-grid .admin-span-2[b-uoqfh0akh9] {
    grid-column: span 2;
}

.admin-action-grid[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: end;
    margin-top: 0.7rem;
}

.admin-action-grid[b-uoqfh0akh9]  .mud-input-control {
    margin: 0;
}

.admin-detail-tabs[b-uoqfh0akh9] {
    min-height: 360px;
}

.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-toolbar,
.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-tabbar,
.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-tabbar-inner,
.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-scroll-wrapper,
.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-tabbar-content {
    background: var(--admin-surface) !important;
}

.admin-detail-tabs[b-uoqfh0akh9]  .mud-tabs-panels {
    margin-top: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-surface) !important;
}

.admin-detail-tabs[b-uoqfh0akh9]  .mud-tab-panel {
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
}

.admin-detail-subtitle[b-uoqfh0akh9] {
    margin: 0.85rem 0 0.4rem;
    color: var(--admin-text);
    font-size: 1rem;
}

.admin-detail-empty[b-uoqfh0akh9] {
    margin: 0.7rem 0;
    color: var(--admin-muted);
}

.admin-override-header[b-uoqfh0akh9] {
    display: grid;
    gap: 0.2rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-border) 86%, transparent);
}

.admin-override-header h4[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-text);
    font-size: 1rem;
}

.admin-override-header p[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.9rem;
}

.admin-detail-table-wrap[b-uoqfh0akh9] {
    width: 100%;
    overflow-x: auto;
    margin-top: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--admin-border) 86%, transparent);
    border-radius: 10px;
    background: var(--admin-surface-soft);
}

.admin-detail-table[b-uoqfh0akh9] {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.admin-detail-table th[b-uoqfh0akh9],
.admin-detail-table td[b-uoqfh0akh9] {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-border) 84%, transparent);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.admin-detail-table th[b-uoqfh0akh9] {
    background: var(--admin-grid-header);
    color: #f6f9fc;
    font-size: 0.86rem;
    font-weight: 800;
}

.admin-detail-table td[b-uoqfh0akh9] {
    color: var(--admin-text);
    font-size: 0.92rem;
}

.admin-detail-table tbody tr:last-child td[b-uoqfh0akh9] {
    border-bottom: 0;
}

.admin-access-table[b-uoqfh0akh9] {
    min-width: 1120px;
}

.admin-access-table-wrap[b-uoqfh0akh9] {
    width: calc(100% + 1.7rem);
    margin-inline: -0.85rem;
    border-inline: 0;
    border-radius: 0;
}

.admin-access-table th:nth-child(1)[b-uoqfh0akh9],
.admin-access-table td:nth-child(1)[b-uoqfh0akh9] {
    width: 18%;
}

.admin-access-table th:nth-child(2)[b-uoqfh0akh9],
.admin-access-table td:nth-child(2)[b-uoqfh0akh9] {
    width: 17%;
}

.admin-access-table th:nth-child(3)[b-uoqfh0akh9],
.admin-access-table td:nth-child(3)[b-uoqfh0akh9] {
    width: 12%;
}

.admin-access-table th:nth-child(4)[b-uoqfh0akh9],
.admin-access-table td:nth-child(4)[b-uoqfh0akh9] {
    width: 10%;
}

.admin-access-table th:nth-child(5)[b-uoqfh0akh9],
.admin-access-table td:nth-child(5)[b-uoqfh0akh9],
.admin-access-table th:nth-child(6)[b-uoqfh0akh9],
.admin-access-table td:nth-child(6)[b-uoqfh0akh9] {
    width: 13%;
    white-space: nowrap;
}

.admin-access-table th:nth-child(7)[b-uoqfh0akh9],
.admin-access-table td:nth-child(7)[b-uoqfh0akh9] {
    width: 17%;
}

.admin-access-table th[b-uoqfh0akh9],
.admin-access-table td[b-uoqfh0akh9] {
    padding-inline: 1rem;
}

.admin-access-table th + th[b-uoqfh0akh9],
.admin-access-table td + td[b-uoqfh0akh9] {
    border-left: 1px solid color-mix(in srgb, var(--admin-border) 52%, transparent);
}

.admin-playlist-checkbox[b-uoqfh0akh9] {
    align-self: start;
}

.admin-form-note[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.92rem;
}

.admin-upload-card[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 0.75rem;
    background: var(--admin-surface-soft);
    display: grid;
    gap: 0.55rem;
}

.admin-upload-group[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: start;
}

.admin-upload-group.admin-upload-group-3[b-uoqfh0akh9] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-upload-head[b-uoqfh0akh9] {
    display: grid;
    gap: 0.2rem;
}

.admin-upload-head h4[b-uoqfh0akh9],
.admin-upload-head p[b-uoqfh0akh9] {
    margin: 0;
}

.admin-upload-head p[b-uoqfh0akh9],
.admin-upload-file-name[b-uoqfh0akh9] {
    color: var(--admin-muted);
    font-size: 0.86rem;
}

.admin-upload-btn[b-uoqfh0akh9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--admin-border-strong);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-weight: 700;
    color: #eaf2fa;
    background: #24384c;
    cursor: pointer;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.admin-upload-btn .admin-file-input[b-uoqfh0akh9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.admin-upload-file-name[b-uoqfh0akh9] {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-image-preview-grid[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.admin-story-edit-detail-grid[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.admin-image-preview-card[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 0.55rem;
    background: var(--admin-surface-soft);
    display: grid;
    gap: 0.4rem;
}

.admin-image-preview-card h4[b-uoqfh0akh9] {
    margin: 0;
    font-size: 0.9rem;
}

.admin-image-preview-card p[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.85rem;
}

.admin-image-preview-media[b-uoqfh0akh9] {
    position: relative;
    display: grid;
}

.admin-image-preview-card img[b-uoqfh0akh9] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: #0f1a25;
}

.admin-image-preview-remove[b-uoqfh0akh9] {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffeef2;
    background: rgba(122, 50, 64, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.admin-image-preview-remove:hover[b-uoqfh0akh9],
.admin-image-preview-remove:focus-visible[b-uoqfh0akh9] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.admin-playlist-preview-grid[b-uoqfh0akh9] {
    align-items: start;
}

.admin-playlist-preview-grid-3[b-uoqfh0akh9] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-playlist-preview-card .admin-image-preview-media[b-uoqfh0akh9] {
    width: min(100%, 180px);
    justify-self: start;
}

.admin-playlist-preview-card img[b-uoqfh0akh9] {
    width: min(100%, 180px);
    justify-self: start;
}

.admin-luister-preview-card[b-uoqfh0akh9] {
    gap: 0.6rem;
}

.admin-luister-carousel[b-uoqfh0akh9] {
    width: 100%;
    display: grid;
}

.admin-luister-carousel-item[b-uoqfh0akh9] {
    width: min(100%, 230px);
}

.admin-luister-carousel-link[b-uoqfh0akh9] {
    color: #27231f;
    text-decoration: none;
    display: grid;
    gap: 0.56rem;
}

.admin-luister-carousel-link h5[b-uoqfh0akh9] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: #eaf1f8;
}

.admin-luister-carousel-cover[b-uoqfh0akh9] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    background: #111;
    box-shadow: 0 10px 24px rgba(14, 18, 24, 0.3);
}

.admin-luister-carousel-image[b-uoqfh0akh9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-luister-cover-play[b-uoqfh0akh9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
}

.admin-luister-cover-play-icon[b-uoqfh0akh9] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #1a1a1a;
    background: color-mix(in srgb, #f3a13f 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    padding-left: 0.16rem;
}

.admin-story-edit-input-stack[b-uoqfh0akh9] {
    display: grid;
    gap: 0.55rem;
}

.admin-checkbox[b-uoqfh0akh9] {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
}

.admin-checkbox input[type="checkbox"][b-uoqfh0akh9] {
    width: 17px;
    height: 17px;
    margin: 0;
}

.admin-playlist-list[b-uoqfh0akh9],
.admin-playlist-story-list[b-uoqfh0akh9] {
    display: grid;
    gap: 0.45rem;
}

.admin-playlist-item[b-uoqfh0akh9],
.admin-playlist-story-item[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-surface-soft);
    padding: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-playlist-item.is-selected[b-uoqfh0akh9] {
    background: #2a4258;
}

.admin-playlist-select[b-uoqfh0akh9] {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 0.12rem;
}

.admin-playlist-select span[b-uoqfh0akh9],
.admin-playlist-story-item span[b-uoqfh0akh9] {
    font-size: 0.82rem;
    color: var(--admin-muted);
}

.admin-playlist-actions[b-uoqfh0akh9],
.admin-table-actions[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.admin-playlist-actions[b-uoqfh0akh9] {
    justify-content: flex-end;
}

.admin-table-actions[b-uoqfh0akh9] {
    justify-content: center;
}

.admin-col-center[b-uoqfh0akh9] {
    text-align: center;
}

.admin-playlist-grid .admin-playlist-actions[b-uoqfh0akh9],
.admin-playlist-grid .admin-table-actions[b-uoqfh0akh9] {
    justify-content: center;
}

.admin-playlist-actions button[b-uoqfh0akh9],
.admin-table-actions button[b-uoqfh0akh9],
.admin-table-actions a[b-uoqfh0akh9] {
    min-height: 34px;
    padding: 0.4rem 0.55rem;
}

.admin-playlist-actions .admin-icon-btn[b-uoqfh0akh9],
.admin-table-actions .admin-icon-btn[b-uoqfh0akh9] {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
}

.admin-toggle-cell[b-uoqfh0akh9] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-toggle-cell[b-uoqfh0akh9]  .mud-switch {
    margin: 0;
}

.admin-analytics-copy[b-uoqfh0akh9] {
    display: grid;
    gap: 0.3rem;
}

.admin-analytics-copy h2[b-uoqfh0akh9],
.admin-analytics-panel h3[b-uoqfh0akh9] {
    margin: 0;
}

.admin-analytics-panel h3[b-uoqfh0akh9] {
    font-size: 1.05rem;
}

.admin-analytics-grid[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.admin-analytics-card[b-uoqfh0akh9],
.admin-analytics-panel[b-uoqfh0akh9] {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-soft);
    padding: 0.85rem;
}

.admin-analytics-label[b-uoqfh0akh9] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-analytics-value[b-uoqfh0akh9] {
    margin: 0.18rem 0 0.55rem;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
}

.admin-analytics-meta[b-uoqfh0akh9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.35rem;
    font-size: 0.92rem;
}

.admin-analytics-meta span[b-uoqfh0akh9] {
    color: var(--admin-muted);
}

.admin-analytics-meta strong[b-uoqfh0akh9] {
    font-size: 0.95rem;
}

.admin-analytics-footnote[b-uoqfh0akh9] {
    margin: 0.65rem 0 0;
    color: var(--admin-muted);
    font-size: 0.82rem;
}

.admin-analytics-layout[b-uoqfh0akh9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-analytics-panel[b-uoqfh0akh9] {
    display: grid;
    gap: 0.75rem;
}

.admin-analytics-panel-wide[b-uoqfh0akh9] {
    grid-column: 1 / -1;
}

.admin-analytics-panel-head[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

.admin-analytics-panel-head p[b-uoqfh0akh9] {
    margin: 0.25rem 0 0;
    color: var(--admin-muted);
    font-size: 0.9rem;
}

.admin-activity-list[b-uoqfh0akh9],
.admin-character-analytics-list[b-uoqfh0akh9] {
    display: grid;
    gap: 0.55rem;
}

.admin-activity-row[b-uoqfh0akh9],
.admin-character-analytics-item[b-uoqfh0akh9] {
    border: 1px solid color-mix(in srgb, var(--admin-border) 88%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--admin-surface) 72%, #0f1821);
    padding: 0.7rem 0.75rem;
}

.admin-activity-row[b-uoqfh0akh9] {
    display: grid;
    gap: 0.45rem;
}

.admin-activity-date strong[b-uoqfh0akh9] {
    font-size: 0.95rem;
}

.admin-activity-metrics[b-uoqfh0akh9],
.admin-character-analytics-stats[b-uoqfh0akh9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-activity-metrics span[b-uoqfh0akh9],
.admin-character-analytics-stats span[b-uoqfh0akh9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 30px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--admin-text);
    font-size: 0.84rem;
}

.admin-character-analytics-item[b-uoqfh0akh9] {
    display: grid;
    gap: 0.45rem;
}

.admin-character-analytics-item strong[b-uoqfh0akh9],
.admin-analytics-story-cell strong[b-uoqfh0akh9] {
    display: block;
}

.admin-character-analytics-item span[b-uoqfh0akh9],
.admin-analytics-story-cell span[b-uoqfh0akh9] {
    color: var(--admin-muted);
    font-size: 0.82rem;
}

.admin-analytics-story-cell[b-uoqfh0akh9] {
    display: grid;
    gap: 0.15rem;
}

.admin-playlist-actions .is-danger[b-uoqfh0akh9],
.admin-table-actions .is-danger[b-uoqfh0akh9] {
    background: #5f2531;
    color: #ffe2e8;
}

.admin-story-picker[b-uoqfh0akh9] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.admin-dialog-actions-row[b-uoqfh0akh9] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.admin-page[b-uoqfh0akh9]  .mud-input > input,
.admin-page[b-uoqfh0akh9]  .mud-input-slot,
.admin-page[b-uoqfh0akh9]  .mud-input-root,
.admin-page[b-uoqfh0akh9]  .mud-input-adornment,
.admin-page[b-uoqfh0akh9]  .mud-select-input,
.admin-page[b-uoqfh0akh9]  .mud-input-label,
.admin-page[b-uoqfh0akh9]  .mud-input-control,
.admin-page[b-uoqfh0akh9]  .mud-table-pagination,
.admin-page[b-uoqfh0akh9]  .mud-typography,
.admin-page[b-uoqfh0akh9]  .mud-switch-label {
    color: var(--admin-text) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-table-pagination {
    background: var(--admin-surface-soft);
    border-top: 1px solid color-mix(in srgb, var(--admin-border) 84%, transparent);
    color: #1b2836 !important;
}

.admin-page[b-uoqfh0akh9]  .mud-table-pagination .mud-select,
.admin-page[b-uoqfh0akh9]  .mud-table-pagination .mud-input,
.admin-page[b-uoqfh0akh9]  .mud-table-pagination .mud-select-input {
    color: #1b2836 !important;
}

.admin-page[b-uoqfh0akh9]  .mud-input-outlined-border,
.admin-page[b-uoqfh0akh9]  .mud-input-outlined {
    border-color: var(--admin-input-border) !important;
}

.admin-page[b-uoqfh0akh9]  .mud-input-outlined {
    background: var(--admin-input-bg);
    border-radius: 10px;
}

.admin-page[b-uoqfh0akh9]  .mud-table-container {
    background: transparent;
}

.admin-page[b-uoqfh0akh9]  .mud-icon-button {
    color: var(--admin-text);
}

@media (max-width: 760px) {
    .admin-page[b-uoqfh0akh9] {
        gap: 0.8rem;
    }

    .admin-hero[b-uoqfh0akh9],
    .admin-section[b-uoqfh0akh9],
    .admin-state[b-uoqfh0akh9],
    .admin-editor[b-uoqfh0akh9] {
        border-radius: 14px;
        padding: 0.75rem;
    }

    .admin-hero-top[b-uoqfh0akh9],
    .admin-section-head[b-uoqfh0akh9] {
        align-items: stretch;
    }

    .admin-language[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-tabs[b-uoqfh0akh9]  .mud-tabs-tabbar {
        overflow-x: auto;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .admin-tabs[b-uoqfh0akh9]  .mud-tab {
        min-width: max-content;
    }

    .admin-form-grid[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-action-grid[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-form-grid .admin-span-2[b-uoqfh0akh9] {
        grid-column: span 1;
    }

    .admin-upload-group[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-image-preview-grid[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-story-edit-detail-grid[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-luister-carousel-item[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-search[b-uoqfh0akh9],
    .admin-story-picker[b-uoqfh0akh9] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-search-field[b-uoqfh0akh9],
    .admin-search-actions[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-search-actions[b-uoqfh0akh9] {
        justify-content: flex-start;
    }

    .admin-subscriber-submenu-links[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-subscriber-submenu-link[b-uoqfh0akh9] {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }

    .admin-report-table[b-uoqfh0akh9] {
        min-width: 0;
    }

    .admin-report-analytics-layout[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-upload-btn[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-analytics-layout[b-uoqfh0akh9] {
        grid-template-columns: 1fr;
    }

    .admin-mobile-cta[b-uoqfh0akh9] {
        width: 100%;
        min-width: 0;
        justify-content: center;
        gap: 0.55rem;
        padding-inline: 0.95rem;
    }

    .admin-mobile-cta .admin-btn-text[b-uoqfh0akh9] {
        display: inline;
    }

    .admin-grid[b-uoqfh0akh9]  .mud-sm-table .mud-table-cell {
        align-items: flex-start;
        gap: 0.7rem;
    }

    .admin-grid[b-uoqfh0akh9]  .mud-sm-table .mud-table-cell::before {
        padding-right: 0;
        color: var(--admin-muted);
    }

    .admin-grid[b-uoqfh0akh9]  table {
        min-width: 0;
    }

    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(1),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(2),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(3),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(4),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(5),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(6),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(7),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(8),
    .admin-subscriber-grid[b-uoqfh0akh9]  tr > .mud-table-cell:nth-child(9) {
        width: auto;
    }

    .admin-grid-resize-handle[b-uoqfh0akh9] {
        display: none;
    }

    .admin-editor > .admin-btn[b-uoqfh0akh9],
    .admin-dialog-actions-row > *[b-uoqfh0akh9] {
        width: 100%;
    }

    .admin-playlist-item[b-uoqfh0akh9],
    .admin-playlist-story-item[b-uoqfh0akh9] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-dialog-actions-row[b-uoqfh0akh9] {
        flex-direction: column-reverse;
    }
}
/* /Components/Pages/AdminBlogPanel.razor.rz.scp.css */
.admin-section-head[b-qg7awd6l8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    min-height: 48px;
    width: 100%;
}

.admin-search[b-qg7awd6l8s] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-inline-start: auto;
    width: 100%;
}

.blog-admin-new-action-btn[b-qg7awd6l8s] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #f4f8fb;
    background: #2f4f68;
    transition: transform 0.16s ease, filter 0.16s ease;
    overflow: hidden;
}

.blog-admin-new-action-btn:hover[b-qg7awd6l8s],
.blog-admin-new-action-btn:focus-visible[b-qg7awd6l8s] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.blog-admin-new-action-btn i[b-qg7awd6l8s] {
    font-size: 1rem;
    line-height: 1;
}

.blog-admin-layout[b-qg7awd6l8s] {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 1rem;
}

.blog-admin-search[b-qg7awd6l8s],
.blog-admin-filter[b-qg7awd6l8s] {
    min-height: 40px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--admin-input-border);
    border-radius: 12px;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.blog-admin-search[b-qg7awd6l8s] {
    min-width: 220px;
    width: auto;
    flex: 1 1 260px;
}

.blog-admin-filter[b-qg7awd6l8s],
.blog-admin-btn[b-qg7awd6l8s] {
    flex: 0 0 auto;
}

.blog-admin-btn[b-qg7awd6l8s] {
    border: 0;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    min-height: 44px;
    background: #8dc66f;
    color: #102914;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.blog-admin-btn:hover[b-qg7awd6l8s],
.blog-admin-btn:focus-visible[b-qg7awd6l8s] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.blog-admin-btn:disabled[b-qg7awd6l8s] {
    cursor: not-allowed;
    opacity: 0.76;
    transform: none;
}

.blog-admin-btn-secondary[b-qg7awd6l8s] {
    background: #2f4f68;
    color: #f4f8fb;
}

.blog-admin-btn-danger[b-qg7awd6l8s] {
    background: #7a3240;
    color: #ffeef2;
}

.blog-admin-list[b-qg7awd6l8s],
.blog-admin-editor[b-qg7awd6l8s],
.blog-admin-empty-state[b-qg7awd6l8s],
.blog-admin-card[b-qg7awd6l8s] {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
}

.blog-admin-list[b-qg7awd6l8s] {
    overflow: hidden;
}

.blog-admin-list-header[b-qg7awd6l8s] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-muted);
    font-weight: 700;
}

.blog-admin-list-item[b-qg7awd6l8s] {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 0;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    cursor: pointer;
    text-align: left;
}

.blog-admin-list-item:hover[b-qg7awd6l8s] {
    background: var(--admin-row-hover);
}

.blog-admin-list-item.is-selected[b-qg7awd6l8s] {
    border-color: #8dc66f;
    background: color-mix(in srgb, #8dc66f 16%, var(--admin-selected-row));
}

.blog-admin-list-copy[b-qg7awd6l8s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.blog-admin-list-title[b-qg7awd6l8s] {
    color: var(--admin-text);
    font-weight: 800;
}

.blog-admin-list-meta[b-qg7awd6l8s],
.blog-admin-list-status[b-qg7awd6l8s],
.blog-admin-list-date[b-qg7awd6l8s],
.blog-admin-empty[b-qg7awd6l8s],
.blog-admin-empty-state p[b-qg7awd6l8s],
.blog-admin-editor-head p[b-qg7awd6l8s],
.blog-admin-card-head p[b-qg7awd6l8s],
.blog-admin-hint[b-qg7awd6l8s],
.blog-admin-summary dt[b-qg7awd6l8s],
.blog-admin-summary dd[b-qg7awd6l8s],
.blog-admin-preview-summary[b-qg7awd6l8s],
.blog-admin-preview-body[b-qg7awd6l8s] {
    color: var(--admin-muted);
}

.blog-admin-empty[b-qg7awd6l8s] {
    margin: 0;
    padding: 1rem 1rem 1.15rem;
}

.blog-admin-editor[b-qg7awd6l8s] {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.blog-admin-editor-head[b-qg7awd6l8s],
.blog-admin-card-head[b-qg7awd6l8s] {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
}

.blog-admin-editor-head[b-qg7awd6l8s] {
    padding-bottom: 0.25rem;
}

.blog-admin-editor-head h3[b-qg7awd6l8s],
.blog-admin-card h4[b-qg7awd6l8s],
.blog-admin-empty-state h3[b-qg7awd6l8s] {
    margin: 0;
    color: var(--admin-text);
}

.blog-admin-editor-actions[b-qg7awd6l8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.blog-admin-form-grid[b-qg7awd6l8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.blog-admin-card[b-qg7awd6l8s] {
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
    align-content: start;
    background: var(--admin-surface-soft);
}

.blog-admin-card-content[b-qg7awd6l8s],
.blog-admin-card-preview[b-qg7awd6l8s] {
    grid-column: 1 / -1;
    min-width: 0;
}

.blog-admin-field[b-qg7awd6l8s],
.blog-admin-checkbox[b-qg7awd6l8s] {
    display: grid;
    gap: 0.35rem;
}

.blog-admin-field:first-of-type[b-qg7awd6l8s],
.blog-admin-checkbox:first-of-type[b-qg7awd6l8s] {
    margin-top: 0.15rem;
}

.blog-admin-field span[b-qg7awd6l8s],
.blog-admin-checkbox span[b-qg7awd6l8s],
.blog-admin-summary dt[b-qg7awd6l8s],
.blog-admin-card-head p[b-qg7awd6l8s],
.blog-admin-editor-head p[b-qg7awd6l8s] {
    font-size: 0.92rem;
    font-weight: 700;
}

.blog-admin-field input[b-qg7awd6l8s],
.blog-admin-field textarea[b-qg7awd6l8s] {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--admin-input-border);
    border-radius: 12px;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.blog-admin-checkbox[b-qg7awd6l8s] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}

.blog-admin-checkbox input[b-qg7awd6l8s] {
    width: 1.05rem;
    height: 1.05rem;
}

.blog-admin-field-row[b-qg7awd6l8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.blog-admin-hint[b-qg7awd6l8s] {
    margin: 0.2rem 0 0;
    line-height: 1.6;
}

.blog-admin-summary[b-qg7awd6l8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0.35rem 0 0;
}

.blog-admin-summary div[b-qg7awd6l8s] {
    padding: 0.8rem;
    border-radius: 12px;
    background: #12202d;
    border: 1px solid var(--admin-border);
}

.blog-admin-summary dd[b-qg7awd6l8s] {
    margin: 0.3rem 0 0;
    color: var(--admin-text);
    font-weight: 700;
}

.blog-admin-file-picker[b-qg7awd6l8s] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
    border: 1px dashed var(--admin-border-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.blog-admin-file-picker span[b-qg7awd6l8s] {
    color: var(--admin-text);
    font-weight: 700;
}

.blog-admin-image-preview[b-qg7awd6l8s] {
    display: block;
    width: 100%;
    max-height: 260px;
    border-radius: 16px;
    object-fit: cover;
    background: #0f1821;
    border: 1px solid var(--admin-border);
}

.blog-admin-image-preview-wrap[b-qg7awd6l8s] {
    position: relative;
}

.blog-admin-image-remove[b-qg7awd6l8s] {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffeef2;
    background: rgba(122, 50, 64, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.blog-admin-image-remove:hover[b-qg7awd6l8s],
.blog-admin-image-remove:focus-visible[b-qg7awd6l8s] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.blog-admin-rich-editor-shell[b-qg7awd6l8s] {
    display: grid;
    gap: 0.75rem;
}

.blog-admin-rich-toolbar[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow[b-qg7awd6l8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #12202d;
    border: 1px solid var(--admin-border);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-formats)[b-qg7awd6l8s] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-right: 0;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-label)[b-qg7awd6l8s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--admin-text);
    cursor: pointer;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button:hover)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button:focus-visible)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button.ql-active)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-label:hover)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-label:focus-visible)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker.ql-expanded .ql-picker-label)[b-qg7awd6l8s] {
    border-color: var(--admin-border-strong);
    background: var(--admin-row-hover);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker)[b-qg7awd6l8s] {
    color: var(--admin-text);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-options)[b-qg7awd6l8s] {
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: #12202d;
    color: var(--admin-text);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-item)[b-qg7awd6l8s] {
    border-radius: 8px;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-item:hover)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-item.ql-selected)[b-qg7awd6l8s] {
    color: #8dc66f;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-stroke)[b-qg7awd6l8s] {
    stroke: var(--admin-text);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-fill)[b-qg7awd6l8s] {
    fill: var(--admin-text);
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button:hover .ql-stroke)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button.ql-active .ql-stroke)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-label:hover .ql-stroke)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker.ql-expanded .ql-picker-label .ql-stroke)[b-qg7awd6l8s] {
    stroke: #8dc66f;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button:hover .ql-fill)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(button.ql-active .ql-fill)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker-label:hover .ql-fill)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-picker.ql-expanded .ql-picker-label .ql-fill)[b-qg7awd6l8s] {
    fill: #8dc66f;
}

.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-undo)[b-qg7awd6l8s],
.blog-admin-rich-toolbar.ql-toolbar.ql-snow :global(.ql-redo)[b-qg7awd6l8s] {
    font-size: 0.95rem;
}

.blog-admin-markdown-editor[b-qg7awd6l8s],
.blog-admin-markdown-editor.ql-container.ql-snow[b-qg7awd6l8s] {
    border-radius: 12px;
    border: 1px solid var(--admin-input-border);
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
    overflow: auto;
    outline: none;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor)[b-qg7awd6l8s] {
    min-height: 22rem;
    padding: 0.9rem 1rem;
    color: var(--admin-text);
    line-height: 1.75;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor.ql-blank::before)[b-qg7awd6l8s] {
    left: 1rem;
    right: 1rem;
    color: var(--admin-muted);
    font-style: normal;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor > p:first-child)[b-qg7awd6l8s] {
    margin-top: 0;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor > p:last-child)[b-qg7awd6l8s] {
    margin-bottom: 0;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor h2)[b-qg7awd6l8s],
.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor h3)[b-qg7awd6l8s],
.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor h4)[b-qg7awd6l8s] {
    margin-top: 1em;
    color: var(--admin-text);
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor ul)[b-qg7awd6l8s],
.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor ol)[b-qg7awd6l8s] {
    padding-left: 1.3rem;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-editor a)[b-qg7awd6l8s] {
    color: #8dc66f;
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-tooltip)[b-qg7awd6l8s] {
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: #12202d;
    color: var(--admin-text);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-tooltip input[type="text"])[b-qg7awd6l8s] {
    border-radius: 8px;
    border: 1px solid var(--admin-input-border);
    background: var(--admin-input-bg);
    color: var(--admin-text);
}

.blog-admin-markdown-editor.ql-container.ql-snow :global(.ql-tooltip a)[b-qg7awd6l8s] {
    color: #8dc66f;
}

.blog-admin-preview[b-qg7awd6l8s] {
    min-width: 0;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    background: #12202d;
    color: var(--admin-text);
}

.blog-admin-preview h2[b-qg7awd6l8s] {
    margin: 0;
    color: var(--admin-text);
}

.blog-admin-preview-summary[b-qg7awd6l8s] {
    margin: 0.85rem 0 0;
    line-height: 1.75;
}

.blog-admin-preview-body[b-qg7awd6l8s] {
    min-width: 0;
    margin-top: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-admin-preview-body :global(p:first-child)[b-qg7awd6l8s] {
    margin-top: 0;
}

.blog-admin-preview-body :global(p:last-child)[b-qg7awd6l8s] {
    margin-bottom: 0;
}

.blog-admin-preview-body :global(h2)[b-qg7awd6l8s],
.blog-admin-preview-body :global(h3)[b-qg7awd6l8s] {
    color: var(--admin-text);
}

.blog-admin-preview-body :global(a)[b-qg7awd6l8s] {
    color: #8dc66f;
    overflow-wrap: anywhere;
}

.blog-admin-preview-body :global(img)[b-qg7awd6l8s] {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.blog-admin-preview-body :global(blockquote)[b-qg7awd6l8s] {
    margin: 1.6rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #90af9e;
    background: #172631;
    color: var(--admin-text);
}

.blog-admin-preview-body :global(ul)[b-qg7awd6l8s],
.blog-admin-preview-body :global(ol)[b-qg7awd6l8s] {
    padding-left: 1.3rem;
}

.blog-admin-preview-body :global(pre)[b-qg7awd6l8s],
.blog-admin-preview-body :global(table)[b-qg7awd6l8s] {
    max-width: 100%;
    overflow-x: auto;
}

.blog-admin-tag-preview[b-qg7awd6l8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.6rem;
}

.blog-admin-tag[b-qg7awd6l8s] {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #12202d;
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-admin-empty-state[b-qg7awd6l8s] {
    padding: 1.5rem;
}

@media (max-width: 1100px) {
    .blog-admin-layout[b-qg7awd6l8s],
    .blog-admin-form-grid[b-qg7awd6l8s] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .admin-search[b-qg7awd6l8s] {
        flex-wrap: wrap;
    }

    .blog-admin-search[b-qg7awd6l8s],
    .blog-admin-filter[b-qg7awd6l8s],
    .blog-admin-new-action-btn[b-qg7awd6l8s],
    .admin-mobile-cta[b-qg7awd6l8s] {
        width: 100%;
        flex: 1 1 100%;
    }

    .admin-mobile-cta[b-qg7awd6l8s] {
        min-width: 0;
        justify-content: center;
        gap: 0.55rem;
        padding-inline: 0.95rem;
    }

    .blog-admin-field-row[b-qg7awd6l8s],
    .blog-admin-summary[b-qg7awd6l8s] {
        grid-template-columns: 1fr;
    }

    .blog-admin-editor[b-qg7awd6l8s],
    .blog-admin-empty-state[b-qg7awd6l8s] {
        padding: 0.9rem;
    }

    .blog-admin-editor-actions[b-qg7awd6l8s],
    .blog-admin-card-head[b-qg7awd6l8s],
    .blog-admin-editor-head[b-qg7awd6l8s] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/AdminCharactersPanel.razor.rz.scp.css */
.admin-section[b-spaiioysyi] {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.admin-section-head[b-spaiioysyi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    min-height: 48px;
    width: 100%;
}

.admin-search[b-spaiioysyi] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-inline-start: auto;
    width: 100%;
}

.admin-btn[b-spaiioysyi],
.admin-btn:disabled[b-spaiioysyi],
.admin-btn.admin-btn-secondary[b-spaiioysyi] {
    border: 0;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    min-height: 44px;
    background: #8dc66f;
    color: #102914;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.admin-btn:hover[b-spaiioysyi],
.admin-btn:focus-visible[b-spaiioysyi] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.admin-btn:disabled[b-spaiioysyi] {
    cursor: not-allowed;
    opacity: 0.76;
    transform: none;
}

.admin-btn.admin-btn-secondary[b-spaiioysyi] {
    background: #2f4f68;
    color: #f4f8fb;
}

.admin-icon-btn[b-spaiioysyi] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-icon-btn i[b-spaiioysyi] {
    font-size: 0.95rem;
    line-height: 1;
}

.admin-btn-text[b-spaiioysyi] {
    display: none;
}

.admin-feedback[b-spaiioysyi] {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    font-weight: 600;
}

.admin-feedback.is-error[b-spaiioysyi] {
    background: #3d1d23;
    color: #ffd7db;
    border: 1px solid #80424f;
}

.admin-feedback.is-success[b-spaiioysyi] {
    background: #143526;
    color: #d0ffe8;
    border: 1px solid #2f7054;
}

.admin-state[b-spaiioysyi] {
    border: 1px dashed var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    background: var(--admin-surface-soft);
}

.admin-state h2[b-spaiioysyi] {
    margin: 0;
}

.characters-admin-layout[b-spaiioysyi] {
    display: grid;
    gap: 1rem;
}

.characters-admin-view-toggle[b-spaiioysyi] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.characters-admin-view-toggle .characters-admin-btn[b-spaiioysyi] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.characters-admin-view-toggle .characters-admin-btn i[b-spaiioysyi] {
    font-size: 0.95rem;
    line-height: 1;
}

.characters-admin-view-toggle .characters-admin-btn.is-active[b-spaiioysyi] {
    background: #8dc66f;
    color: #102914;
}

.characters-admin-new-action-btn[b-spaiioysyi] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #f4f8fb;
    background: #2f4f68;
    transition: transform 0.16s ease, filter 0.16s ease;
    overflow: hidden;
}

.characters-admin-new-action-btn:hover[b-spaiioysyi],
.characters-admin-new-action-btn:focus-visible[b-spaiioysyi] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.characters-admin-new-action-btn i[b-spaiioysyi] {
    font-size: 1rem;
    line-height: 1;
}

[b-spaiioysyi] .characters-admin-dialog {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
    color: var(--admin-text);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

[b-spaiioysyi] .characters-admin-dialog-background {
    --characters-admin-dialog-top-offset: clamp(4.5rem, 6vw, 5.25rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--characters-admin-dialog-top-offset) 0 0;
    box-sizing: border-box;
    z-index: 2105;
}

[b-spaiioysyi] .characters-admin-dialog-background.mud-dialog-container.mud-dialog-topcenter {
    padding-top: var(--characters-admin-dialog-top-offset) !important;
    padding-bottom: 0 !important;
}

.characters-admin-dialog-surface[b-spaiioysyi] {
    --admin-bg: #10161e;
    --admin-surface: #16212d;
    --admin-surface-soft: #1b2836;
    --admin-border: #304457;
    --admin-border-strong: #3f5a72;
    --admin-text: #eaf1f8;
    --admin-muted: #b4c0ce;
    --admin-grid-header: #233547;
    --admin-row-hover: #25384a;
    --admin-selected-row: #2f4f68;
    --admin-input-bg: #1d2d3d;
    --admin-input-border: #49657d;
    display: grid;
    gap: 1rem;
    width: 100%;
    height: calc(100dvh - var(--characters-admin-dialog-top-offset, 0px));
    min-height: 0;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
    color: var(--admin-text);
    overflow: hidden;
}

[b-spaiioysyi] .characters-admin-dialog .characters-admin-dialog-content {
    padding: 0 !important;
    background: transparent;
}

[b-spaiioysyi] .characters-admin-dialog .mud-dialog-content {
    padding: 0 !important;
    background: transparent;
    color: inherit;
}

.characters-admin-list[b-spaiioysyi] {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
}

.characters-admin-dialog-surface .characters-admin-editor[b-spaiioysyi] {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: grid;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
}

.characters-admin-editor-actions[b-spaiioysyi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0.35rem;
    margin-left: auto;
    z-index: 7;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--admin-border) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-surface) 92%, transparent);
    backdrop-filter: blur(10px);
}

.characters-admin-close-btn[b-spaiioysyi] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.characters-admin-save-btn[b-spaiioysyi] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.characters-admin-save-btn i[b-spaiioysyi],
.characters-admin-close-btn i[b-spaiioysyi] {
    font-size: 1rem;
    line-height: 1;
}

.characters-admin-list[b-spaiioysyi] {
    padding: 0.8rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
    align-self: stretch;
}

.characters-admin-grid[b-spaiioysyi] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.characters-admin-list-header[b-spaiioysyi] {
    font-size: 0.9rem;
    color: var(--admin-muted);
    font-weight: 700;
}

.characters-admin-list-item[b-spaiioysyi] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 0.75rem;
    justify-items: stretch;
    align-items: center;
    text-align: left;
    padding: 0.8rem;
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.characters-admin-list-item:hover[b-spaiioysyi] {
    border-color: var(--admin-border-strong);
    background: var(--admin-row-hover);
    transform: translateY(-1px);
}

.characters-admin-list-item.is-selected[b-spaiioysyi] {
    border-color: #8dc66f;
    background: color-mix(in srgb, #8dc66f 16%, var(--admin-selected-row));
}

.characters-admin-list-title[b-spaiioysyi] {
    font-weight: 800;
}

.characters-admin-list-copy[b-spaiioysyi] {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    justify-items: start;
    align-items: start;
    text-align: left;
}

.characters-admin-list-meta[b-spaiioysyi],
.characters-admin-list-status[b-spaiioysyi],
.characters-admin-empty[b-spaiioysyi],
.characters-admin-empty-state p[b-spaiioysyi] {
    color: var(--admin-muted);
}

.characters-admin-list-preview[b-spaiioysyi] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: #0f1821;
    justify-self: end;
}

.characters-admin-grid-item[b-spaiioysyi] {
    width: 100%;
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.characters-admin-grid-item:hover[b-spaiioysyi] {
    border-color: var(--admin-border-strong);
    background: var(--admin-row-hover);
    transform: translateY(-1px);
}

.characters-admin-grid-item.is-selected[b-spaiioysyi] {
    border-color: #8dc66f;
    background: color-mix(in srgb, #8dc66f 16%, var(--admin-selected-row));
}

.characters-admin-grid-thumb-wrap[b-spaiioysyi] {
    position: relative;
    display: block;
}

.characters-admin-grid-thumb[b-spaiioysyi] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: #0f1821;
}

.characters-admin-grid-badge[b-spaiioysyi] {
    position: absolute;
    left: 0.55rem;
    bottom: 0.55rem;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: rgba(9, 14, 19, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f3f8fc;
    font-size: 0.74rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.characters-admin-grid-copy[b-spaiioysyi] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.characters-admin-grid-title[b-spaiioysyi] {
    font-weight: 800;
    line-height: 1.2;
}

.characters-admin-grid-meta[b-spaiioysyi] {
    color: var(--admin-muted);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.characters-admin-empty[b-spaiioysyi] {
    margin: 0;
}

.characters-admin-editor-head[b-spaiioysyi] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 6;
    padding-bottom: 0.8rem;
    background: linear-gradient(180deg, #16212d 0%, #16212d 84%, rgba(22, 33, 45, 0) 100%);
}

.characters-admin-editor-head h3[b-spaiioysyi],
.characters-admin-empty-state h3[b-spaiioysyi] {
    margin: 0;
}

.characters-admin-editor-head p[b-spaiioysyi] {
    margin: 0.32rem 0 0;
    color: var(--admin-muted);
}

.characters-admin-editor-head > :first-child[b-spaiioysyi] {
    min-width: 0;
}

.characters-admin-empty-state[b-spaiioysyi] {
    border: 1px dashed var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    background: var(--admin-surface-soft);
}

.characters-admin-form-grid[b-spaiioysyi] {
    display: grid;
    gap: 1rem;
}

.characters-admin-card[b-spaiioysyi] {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface-soft);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
}

.characters-admin-card h4[b-spaiioysyi] {
    margin: 0;
}

.characters-admin-field[b-spaiioysyi],
.characters-admin-file-picker[b-spaiioysyi] {
    display: grid;
    gap: 0.35rem;
}

.characters-admin-field span[b-spaiioysyi],
.characters-admin-file-picker span[b-spaiioysyi] {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--admin-muted);
}

.characters-admin-field input[b-spaiioysyi],
.characters-admin-field textarea[b-spaiioysyi],
.characters-admin-field select[b-spaiioysyi],
.characters-admin-search[b-spaiioysyi] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--admin-input-border);
    background: var(--admin-input-bg);
    color: var(--admin-text);
    padding: 0.7rem 0.8rem;
}

.characters-admin-field textarea[b-spaiioysyi] {
    resize: vertical;
    min-height: 88px;
}

.characters-admin-field-row[b-spaiioysyi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.characters-admin-field-row-audio[b-spaiioysyi] {
    grid-template-columns: minmax(0, 1fr) 140px;
}

.characters-admin-search[b-spaiioysyi] {
    min-width: 200px;
    width: auto;
    flex: 1 1 260px;
}

.characters-admin-view-toggle[b-spaiioysyi],
.characters-admin-btn[b-spaiioysyi] {
    flex: 0 0 auto;
}

.characters-admin-story-picker[b-spaiioysyi] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.characters-admin-story-option[b-spaiioysyi] {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: #12202d;
    cursor: pointer;
}

.characters-admin-story-option input[type="checkbox"][b-spaiioysyi] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    align-self: start;
}

.characters-admin-story-option span[b-spaiioysyi] {
    grid-column: 2;
}

.characters-admin-story-option.is-selected[b-spaiioysyi] {
    border-color: #8dc66f;
    background: color-mix(in srgb, #8dc66f 12%, #12202d);
}

.characters-admin-rule-section[b-spaiioysyi] {
    display: grid;
    gap: 0.75rem;
}

.characters-admin-rule-header[b-spaiioysyi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.characters-admin-rule-header h5[b-spaiioysyi] {
    margin: 0;
    font-size: 0.96rem;
}

.characters-admin-rule-help[b-spaiioysyi] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.characters-admin-rule-list[b-spaiioysyi] {
    display: grid;
    gap: 0.85rem;
}

.characters-admin-rule-item[b-spaiioysyi] {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--admin-surface-soft) 82%, #0e1620);
    padding: 0.9rem;
    display: grid;
    gap: 0.75rem;
}

.characters-admin-image-grid[b-spaiioysyi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.characters-admin-audio-list[b-spaiioysyi] {
    display: grid;
    gap: 0.75rem;
}

.characters-admin-audio-item[b-spaiioysyi] {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    background: #12202d;
}

.characters-admin-audio-meta[b-spaiioysyi] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.92rem;
    word-break: break-word;
}

.characters-admin-image-panel[b-spaiioysyi] {
    display: grid;
    gap: 0.75rem;
}

.characters-admin-image-preview[b-spaiioysyi] {
    position: relative;
}

.characters-admin-image-panel img[b-spaiioysyi] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    background: #0f1821;
}

.characters-admin-image-remove[b-spaiioysyi] {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffeef2;
    background: rgba(122, 50, 64, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.characters-admin-image-remove:hover[b-spaiioysyi],
.characters-admin-image-remove:focus-visible[b-spaiioysyi] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.characters-admin-file-picker[b-spaiioysyi] {
    padding: 0.8rem;
    border-radius: 12px;
    border: 1px dashed var(--admin-border-strong);
    background: rgba(255, 255, 255, 0.02);
}

.characters-admin-file-picker[b-spaiioysyi]  input[type="file"] {
    color: var(--admin-text);
}

.characters-admin-btn[b-spaiioysyi] {
    border: 0;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    background: #8dc66f;
    color: #102914;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.characters-admin-btn:hover[b-spaiioysyi] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.characters-admin-btn:disabled[b-spaiioysyi] {
    cursor: wait;
    opacity: 0.76;
    transform: none;
}

.characters-admin-btn-secondary[b-spaiioysyi] {
    background: #2f4f68;
    color: #f4f8fb;
}

@media (max-width: 980px) {
    .characters-admin-list[b-spaiioysyi] {
        max-height: none;
    }
}

@media (max-width: 720px) {
    .admin-search[b-spaiioysyi] {
        flex-wrap: wrap;
    }

    .characters-admin-search[b-spaiioysyi],
    .characters-admin-new-action-btn[b-spaiioysyi],
    .admin-mobile-cta[b-spaiioysyi] {
        width: 100%;
        flex: 1 1 100%;
    }

    .characters-admin-view-toggle[b-spaiioysyi] {
        width: auto;
        flex: 0 0 auto;
    }

    .characters-admin-view-toggle .characters-admin-btn[b-spaiioysyi] {
        width: 40px;
        min-width: 40px;
        flex: 0 0 auto;
    }

    .admin-mobile-cta[b-spaiioysyi] {
        min-width: 0;
        justify-content: center;
        gap: 0.55rem;
        padding-inline: 0.95rem;
    }

    .characters-admin-field-row[b-spaiioysyi],
    .characters-admin-image-grid[b-spaiioysyi] {
        grid-template-columns: 1fr;
    }

    .characters-admin-grid[b-spaiioysyi] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}
/* /Components/Pages/AdminResourceTypesPanel.razor.rz.scp.css */
.admin-section-head[b-c5qyyph7q1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    min-height: 48px;
    width: 100%;
}

.admin-search[b-c5qyyph7q1] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-inline-start: auto;
    width: 100%;
}

.resource-types-admin-new-action-btn[b-c5qyyph7q1] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #f4f8fb;
    background: #2f4f68;
    transition: transform 0.16s ease, filter 0.16s ease;
    overflow: hidden;
}

.resource-types-admin-new-action-btn:hover[b-c5qyyph7q1],
.resource-types-admin-new-action-btn:focus-visible[b-c5qyyph7q1],
.resource-types-admin-btn:hover[b-c5qyyph7q1],
.resource-types-admin-btn:focus-visible[b-c5qyyph7q1] {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.resource-types-admin-layout[b-c5qyyph7q1] {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 1rem;
}

.resource-types-admin-list[b-c5qyyph7q1],
.resource-types-admin-editor[b-c5qyyph7q1] {
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
}

.resource-types-admin-list[b-c5qyyph7q1] {
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.resource-types-admin-list-header[b-c5qyyph7q1],
.resource-types-admin-list-meta[b-c5qyyph7q1],
.resource-types-admin-list-status[b-c5qyyph7q1],
.resource-types-admin-editor-head p[b-c5qyyph7q1],
.resource-types-admin-hint[b-c5qyyph7q1],
.resource-types-admin-empty[b-c5qyyph7q1],
.resource-types-admin-empty-state p[b-c5qyyph7q1],
.resource-types-admin-summary dt[b-c5qyyph7q1],
.resource-types-admin-upload-hint[b-c5qyyph7q1],
.resource-types-admin-document-copy p[b-c5qyyph7q1],
.resource-types-admin-document-copy span[b-c5qyyph7q1] {
    color: var(--admin-muted);
}

.resource-types-admin-list-item[b-c5qyyph7q1] {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-soft);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    text-align: left;
    color: var(--admin-text);
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.resource-types-admin-list-item:hover[b-c5qyyph7q1],
.resource-types-admin-list-item:focus-visible[b-c5qyyph7q1] {
    border-color: var(--admin-border-strong);
    transform: translateY(-1px);
    background: var(--admin-row-hover);
}

.resource-types-admin-list-item.is-selected[b-c5qyyph7q1] {
    border-color: #8dc66f;
    background: color-mix(in srgb, #8dc66f 16%, var(--admin-selected-row));
}

.resource-types-admin-list-copy[b-c5qyyph7q1] {
    display: grid;
    gap: 0.15rem;
}

.resource-types-admin-list-title[b-c5qyyph7q1],
.resource-types-admin-document-copy h5[b-c5qyyph7q1] {
    font-weight: 800;
    color: var(--admin-text);
    margin: 0;
}

.resource-types-admin-editor[b-c5qyyph7q1] {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.resource-types-admin-editor-head[b-c5qyyph7q1],
.resource-types-admin-card-head[b-c5qyyph7q1] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.resource-types-admin-editor-head h3[b-c5qyyph7q1],
.resource-types-admin-empty-state h3[b-c5qyyph7q1],
.resource-types-admin-card h4[b-c5qyyph7q1] {
    margin: 0;
    color: var(--admin-text);
}

.resource-types-admin-editor-actions[b-c5qyyph7q1],
.resource-types-admin-upload-actions[b-c5qyyph7q1],
.resource-types-admin-document-actions[b-c5qyyph7q1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.resource-types-admin-document-tier-field[b-c5qyyph7q1] {
    display: grid;
    gap: 0.3rem;
    min-width: min(100%, 240px);
    flex: 1 1 220px;
}

.resource-types-admin-document-tier-field span[b-c5qyyph7q1] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--admin-muted);
}

.resource-types-admin-document-tier-field select[b-c5qyyph7q1] {
    width: 100%;
    border: 1px solid var(--admin-input-border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.resource-types-admin-form-grid[b-c5qyyph7q1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.resource-types-admin-card[b-c5qyyph7q1] {
    padding: 1rem;
    border-radius: 16px;
    background: var(--admin-surface-soft);
    border: 1px solid var(--admin-border);
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.resource-types-admin-card-full[b-c5qyyph7q1] {
    grid-column: 1 / -1;
}

.resource-types-admin-field[b-c5qyyph7q1],
.resource-types-admin-checkbox[b-c5qyyph7q1] {
    display: grid;
    gap: 0.35rem;
}

.resource-types-admin-field span[b-c5qyyph7q1],
.resource-types-admin-checkbox span[b-c5qyyph7q1] {
    font-weight: 700;
    color: var(--admin-muted);
}

.resource-types-admin-field input[b-c5qyyph7q1],
.resource-types-admin-field textarea[b-c5qyyph7q1],
.resource-types-admin-search[b-c5qyyph7q1],
.resource-types-admin-document-search[b-c5qyyph7q1] {
    width: 100%;
    border: 1px solid var(--admin-input-border);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    background: var(--admin-input-bg);
    color: var(--admin-text);
    font: inherit;
}

.resource-types-admin-field textarea[b-c5qyyph7q1] {
    resize: vertical;
    min-height: 110px;
}

.resource-types-admin-field-row[b-c5qyyph7q1] {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 1rem;
    align-items: end;
}

.resource-types-admin-checkbox[b-c5qyyph7q1] {
    align-self: center;
}

.resource-types-admin-checkbox input[b-c5qyyph7q1] {
    width: 1.05rem;
    height: 1.05rem;
}

.resource-types-admin-summary[b-c5qyyph7q1] {
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.resource-types-admin-summary div[b-c5qyyph7q1] {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem;
    border-radius: 12px;
    background: #12202d;
    border: 1px solid var(--admin-border);
}

.resource-types-admin-summary dd[b-c5qyyph7q1] {
    margin: 0;
    font-weight: 700;
    color: var(--admin-text);
}

.resource-types-admin-btn[b-c5qyyph7q1] {
    border: 0;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    min-height: 44px;
    background: #8dc66f;
    color: #102914;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.resource-types-admin-btn-icon[b-c5qyyph7q1] {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.resource-types-admin-btn-secondary[b-c5qyyph7q1] {
    background: #2f4f68;
    color: #f4f8fb;
}

.resource-types-admin-btn-danger[b-c5qyyph7q1] {
    background: #7a3240;
    color: #ffeef2;
}

.resource-types-admin-search[b-c5qyyph7q1] {
    min-width: min(100%, 280px);
    width: auto;
    flex: 1 1 260px;
}

.resource-types-admin-upload-btn[b-c5qyyph7q1] {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px dashed var(--admin-border-strong);
    background: color-mix(in srgb, #ffffff 5%, transparent);
    color: var(--admin-text);
    font-weight: 700;
    cursor: pointer;
}

.resource-types-admin-file-input[b-c5qyyph7q1] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.resource-types-admin-file-list[b-c5qyyph7q1],
.resource-types-admin-documents[b-c5qyyph7q1] {
    display: grid;
    gap: 0.75rem;
}

.resource-types-admin-file-list[b-c5qyyph7q1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-types-admin-file-list li[b-c5qyyph7q1],
.resource-types-admin-document-item[b-c5qyyph7q1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    background: #12202d;
}

.resource-types-admin-file-list li span[b-c5qyyph7q1] {
    color: var(--admin-muted);
}

.resource-types-admin-document-copy[b-c5qyyph7q1] {
    display: grid;
    gap: 0.25rem;
}

.resource-types-admin-status-tag[b-c5qyyph7q1] {
    border-radius: 999px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}

.resource-types-admin-status-tag i[b-c5qyyph7q1] {
    line-height: 1;
}

.resource-types-admin-status-tag.is-enabled[b-c5qyyph7q1] {
    background: #143526;
    color: #d0ffe8;
}

.resource-types-admin-status-tag.is-disabled[b-c5qyyph7q1] {
    background: #3d1d23;
    color: #ffd7db;
}

.resource-types-admin-inline-empty[b-c5qyyph7q1] {
    border: 1px dashed var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    background: #12202d;
}

@media (max-width: 980px) {
    .admin-search[b-c5qyyph7q1],
    .resource-types-admin-editor-head[b-c5qyyph7q1],
    .resource-types-admin-card-head[b-c5qyyph7q1],
    .resource-types-admin-upload-actions[b-c5qyyph7q1],
    .resource-types-admin-document-actions[b-c5qyyph7q1],
    .resource-types-admin-file-list li[b-c5qyyph7q1],
    .resource-types-admin-document-item[b-c5qyyph7q1] {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-types-admin-search[b-c5qyyph7q1],
    .resource-types-admin-new-action-btn[b-c5qyyph7q1],
    .admin-mobile-cta[b-c5qyyph7q1],
    .resource-types-admin-document-search[b-c5qyyph7q1],
    .resource-types-admin-document-tier-field[b-c5qyyph7q1],
    .resource-types-admin-btn[b-c5qyyph7q1] {
        width: 100%;
        flex: 1 1 100%;
    }

    .resource-types-admin-btn-icon[b-c5qyyph7q1] {
        width: 44px;
        flex: 0 0 auto;
        align-self: flex-end;
    }

    .resource-types-admin-layout[b-c5qyyph7q1],
    .resource-types-admin-form-grid[b-c5qyyph7q1],
    .resource-types-admin-field-row[b-c5qyyph7q1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/AdminStorePanel.razor.rz.scp.css */
.admin-section[b-uoge9545du] {
    --admin-bg: #10161e;
    --admin-surface: #16212d;
    --admin-surface-soft: #1b2836;
    --admin-border: #304457;
    --admin-border-strong: #3f5a72;
    --admin-text: #eaf1f8;
    --admin-muted: #b4c0ce;
    --admin-row-hover: #25384a;
    --admin-selected-row: #2f4f68;
    --admin-input-bg: #1d2d3d;
    --admin-input-border: #49657d;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: var(--admin-surface);
    padding: 1rem;
    display: grid;
    gap: 1rem;
    color: var(--admin-text);
}

.admin-section-head[b-uoge9545du] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.store-admin-actions[b-uoge9545du] {
    display: inline-flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.store-admin-search[b-uoge9545du] {
    flex: 1 1 auto;
    min-width: 180px;
    border-radius: 10px;
    border: 1px solid var(--admin-input-border);
    background: var(--admin-input-bg);
    color: var(--admin-text);
    padding: 0.58rem 0.72rem;
}

.store-admin-icon-btn[b-uoge9545du] {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-admin-icon-btn i[b-uoge9545du] {
    font-size: 0.95rem;
    line-height: 1;
}

.admin-feedback[b-uoge9545du] {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    font-weight: 600;
}

.admin-feedback.is-error[b-uoge9545du] {
    background: #3d1d23;
    color: #ffd7db;
    border: 1px solid #80424f;
}

.admin-feedback.is-success[b-uoge9545du] {
    background: #143526;
    color: #d0ffe8;
    border: 1px solid #2f7054;
}

.admin-state[b-uoge9545du] {
    border: 1px dashed var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    background: var(--admin-surface-soft);
}

.admin-state h2[b-uoge9545du] {
    margin: 0;
}

.store-admin-layout[b-uoge9545du] {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: 1rem;
    min-height: 420px;
}

.store-admin-list[b-uoge9545du],
.store-admin-editor[b-uoge9545du] {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-soft);
    padding: 0.8rem;
}

.store-admin-list[b-uoge9545du] {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    overflow: auto;
    max-height: 72vh;
}

.store-admin-list-header[b-uoge9545du] {
    font-size: 0.9rem;
    color: var(--admin-muted);
    padding: 0 0.2rem;
}

.store-admin-list-item[b-uoge9545du] {
    width: 100%;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-surface);
    color: var(--admin-text);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem;
    text-align: left;
    cursor: pointer;
}

.store-admin-list-item:hover[b-uoge9545du] {
    background: var(--admin-row-hover);
}

.store-admin-list-item.is-selected[b-uoge9545du] {
    border-color: var(--admin-border-strong);
    background: var(--admin-selected-row);
}

.store-admin-list-image[b-uoge9545du] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    object-fit: cover;
    background: #fff;
}

.store-admin-list-copy[b-uoge9545du] {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.store-admin-list-title[b-uoge9545du] {
    font-weight: 700;
}

.store-admin-list-meta[b-uoge9545du] {
    font-size: 0.8rem;
    color: var(--admin-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-admin-list-price[b-uoge9545du] {
    font-size: 0.82rem;
    font-weight: 700;
}

.store-admin-list-badge[b-uoge9545du] {
    align-self: start;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffc9cf;
    border: 1px solid #80424f;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
}

.store-admin-editor[b-uoge9545du] {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.store-admin-editor-head[b-uoge9545du] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.store-admin-editor-head h3[b-uoge9545du] {
    margin: 0;
}

.store-admin-editor-head p[b-uoge9545du] {
    margin: 0.2rem 0 0;
    color: var(--admin-muted);
    font-size: 0.86rem;
}

.store-admin-editor-actions[b-uoge9545du] {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.store-admin-btn[b-uoge9545du] {
    border: 0;
    border-radius: 999px;
    padding: 0.58rem 0.9rem;
    min-height: 40px;
    font-weight: 700;
    cursor: pointer;
}

.store-admin-btn:disabled[b-uoge9545du] {
    opacity: 0.72;
    cursor: not-allowed;
}

.store-admin-btn-primary[b-uoge9545du] {
    background: #8dc66f;
    color: #102914;
}

.store-admin-btn-secondary[b-uoge9545du] {
    background: #2f4f68;
    color: #f4f8fb;
}

.store-admin-btn-danger[b-uoge9545du] {
    background: #6d2b35;
    color: #ffdbe0;
}

.store-admin-grid[b-uoge9545du] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.store-admin-field[b-uoge9545du] {
    display: grid;
    gap: 0.3rem;
}

.store-admin-field span[b-uoge9545du] {
    font-size: 0.82rem;
    color: var(--admin-muted);
    font-weight: 600;
}

.store-admin-field input[b-uoge9545du],
.store-admin-field textarea[b-uoge9545du] {
    border-radius: 10px;
    border: 1px solid var(--admin-input-border);
    background: var(--admin-input-bg);
    color: var(--admin-text);
    padding: 0.55rem 0.65rem;
}

.store-admin-field-wide[b-uoge9545du] {
    grid-column: 1 / -1;
}

.store-admin-switch[b-uoge9545du] {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
}

.store-admin-image-section[b-uoge9545du] {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 0.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 0.8rem;
    align-items: start;
}

.store-admin-upload-label[b-uoge9545du] {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--admin-muted);
}

.store-admin-upload-hint[b-uoge9545du] {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--admin-muted);
}

.store-admin-image-preview[b-uoge9545du] {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-surface);
    min-height: 140px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.store-admin-image-preview img[b-uoge9545du] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-admin-image-preview p[b-uoge9545du] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 0.5rem;
}

.store-admin-empty[b-uoge9545du] {
    margin: 0;
    color: var(--admin-muted);
}

@media (max-width: 980px) {
    .store-admin-layout[b-uoge9545du] {
        grid-template-columns: 1fr;
    }

    .store-admin-list[b-uoge9545du] {
        max-height: 300px;
    }

    .store-admin-grid[b-uoge9545du] {
        grid-template-columns: 1fr;
    }

    .store-admin-image-section[b-uoge9545du] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Blog.razor.rz.scp.css */
.blog-page[b-jgq8w0kce7] {
    --blog-ink: #233428;
    --blog-muted: #5e6f63;
    --blog-line: rgba(35, 52, 40, 0.12);
    --blog-cream: #fffaf1;
    --blog-panel: rgba(255, 251, 243, 0.9);
    --blog-accent: #d86f34;
    --blog-accent-deep: #a74a1f;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: clamp(1.2rem, 2vw, 2.2rem);
    display: grid;
    gap: 1.25rem;
    color: var(--blog-ink);
}

.blog-page > *[b-jgq8w0kce7] {
    opacity: 0;
    transform: translateY(18px);
    animation: blog-reveal-b-jgq8w0kce7 560ms ease-out forwards;
}

.blog-page > *:nth-child(1)[b-jgq8w0kce7] { animation-delay: 30ms; }
.blog-page > *:nth-child(2)[b-jgq8w0kce7] { animation-delay: 90ms; }
.blog-page > *:nth-child(3)[b-jgq8w0kce7] { animation-delay: 150ms; }
.blog-page > *:nth-child(4)[b-jgq8w0kce7] { animation-delay: 210ms; }
.blog-page > *:nth-child(5)[b-jgq8w0kce7] { animation-delay: 270ms; }
.blog-page > *:nth-child(6)[b-jgq8w0kce7] { animation-delay: 330ms; }

.blog-hero[b-jgq8w0kce7],
.blog-filters[b-jgq8w0kce7],
.blog-results-meta[b-jgq8w0kce7],
.blog-state[b-jgq8w0kce7] {
    border: 1px solid var(--blog-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 179, 0.34), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 248, 237, 0.96) 100%);
    box-shadow: 0 26px 70px rgba(86, 64, 35, 0.12);
}

.blog-hero[b-jgq8w0kce7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: start;
    padding: clamp(1.4rem, 2.6vw, 2.3rem);
}

.blog-hero-copy[b-jgq8w0kce7] {
    display: grid;
    gap: 0.95rem;
    max-width: 44rem;
}

.blog-eyebrow[b-jgq8w0kce7] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blog-accent-deep);
}

.blog-hero h1[b-jgq8w0kce7] {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.45rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.blog-lead[b-jgq8w0kce7] {
    margin: 0;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--blog-muted);
}

.blog-rss-link[b-jgq8w0kce7],
.blog-filter-submit[b-jgq8w0kce7],
.blog-filter-clear[b-jgq8w0kce7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.blog-rss-link:hover[b-jgq8w0kce7],
.blog-filter-submit:hover[b-jgq8w0kce7],
.blog-filter-clear:hover[b-jgq8w0kce7],
.blog-active-filter:hover[b-jgq8w0kce7],
.blog-chip:hover[b-jgq8w0kce7],
.blog-read-more:hover[b-jgq8w0kce7],
.blog-pagination-link:hover[b-jgq8w0kce7] {
    transform: translateY(-1px);
}

.blog-rss-link[b-jgq8w0kce7] {
    gap: 0.6rem;
    align-self: start;
    border: 1px solid rgba(167, 74, 31, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: var(--blog-accent-deep);
}

.blog-filters[b-jgq8w0kce7] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)) auto;
    gap: 0.95rem;
    align-items: end;
    padding: 1.1rem;
}

.blog-filter-field[b-jgq8w0kce7] {
    display: grid;
    gap: 0.45rem;
    color: var(--blog-ink);
    font-weight: 700;
}

.blog-filter-field span[b-jgq8w0kce7] {
    font-size: 0.92rem;
}

.blog-filter-field input[b-jgq8w0kce7],
.blog-filter-field select[b-jgq8w0kce7] {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(35, 52, 40, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--blog-ink);
    font: inherit;
}

.blog-filter-actions[b-jgq8w0kce7] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.blog-filter-submit[b-jgq8w0kce7] {
    border: none;
    background: linear-gradient(135deg, var(--blog-accent) 0%, #c8591f 100%);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.24);
    color: #fffefb;
    cursor: pointer;
}

.blog-filter-clear[b-jgq8w0kce7] {
    border: 1px solid rgba(167, 74, 31, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: var(--blog-accent-deep);
}

.blog-active-filters[b-jgq8w0kce7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.blog-active-filter[b-jgq8w0kce7],
.blog-chip[b-jgq8w0kce7],
.blog-pagination-link[b-jgq8w0kce7] {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.blog-active-filter[b-jgq8w0kce7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(167, 74, 31, 0.15);
    border-radius: 999px;
    background: rgba(255, 248, 239, 0.92);
    color: var(--blog-accent-deep);
    text-decoration: none;
    font-weight: 700;
}

.blog-results-meta[b-jgq8w0kce7] {
    padding: 0.95rem 1.2rem;
}

.blog-results-meta p[b-jgq8w0kce7] {
    margin: 0;
    color: var(--blog-muted);
    font-weight: 700;
}

.blog-grid[b-jgq8w0kce7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.blog-card[b-jgq8w0kce7] {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 48px rgba(78, 58, 32, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.blog-card-image-link[b-jgq8w0kce7] {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255, 241, 224, 0.9) 0%, rgba(255, 251, 245, 0.96) 100%);
}

.blog-card-image[b-jgq8w0kce7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    transition: transform 220ms ease;
}

.blog-card:hover .blog-card-image[b-jgq8w0kce7] {
    transform: scale(1.03);
}

.blog-card:hover[b-jgq8w0kce7],
.blog-card:focus-within[b-jgq8w0kce7] {
    transform: translateY(-2px);
    border-color: rgba(167, 74, 31, 0.16);
    box-shadow: 0 22px 54px rgba(78, 58, 32, 0.14);
}

.blog-card-body[b-jgq8w0kce7] {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 0.85rem;
    padding: 0 1.15rem 1.25rem;
    align-content: start;
}

.blog-card-meta[b-jgq8w0kce7],
.blog-card-taxonomy[b-jgq8w0kce7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.blog-card-meta[b-jgq8w0kce7] {
    font-size: 0.84rem;
    color: var(--blog-muted);
}

.blog-card h2[b-jgq8w0kce7] {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.blog-card h2 a[b-jgq8w0kce7] {
    color: var(--blog-ink);
    text-decoration: none;
}

.blog-card p[b-jgq8w0kce7] {
    margin: 0;
    color: var(--blog-muted);
    line-height: 1.68;
}

.blog-chip[b-jgq8w0kce7] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 999px;
    background: rgba(242, 247, 242, 0.96);
    color: var(--blog-ink);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-chip-secondary[b-jgq8w0kce7] {
    background: rgba(255, 245, 233, 0.96);
    color: var(--blog-accent-deep);
}

.blog-read-more[b-jgq8w0kce7] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    color: var(--blog-accent-deep);
    font-weight: 800;
    text-decoration: none;
}

.blog-pagination[b-jgq8w0kce7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.blog-pagination-link[b-jgq8w0kce7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.85rem;
    min-height: 2.85rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(35, 52, 40, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--blog-ink);
    text-decoration: none;
    font-weight: 700;
}

.blog-pagination-link.is-current[b-jgq8w0kce7] {
    border: none;
    background: linear-gradient(135deg, var(--blog-accent) 0%, #c8591f 100%);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.24);
    color: #fffefb;
}

.blog-pagination-link.is-disabled[b-jgq8w0kce7] {
    pointer-events: none;
    opacity: 0.45;
}

.blog-state[b-jgq8w0kce7] {
    padding: clamp(1.25rem, 2.6vw, 2rem);
}

.blog-state h2[b-jgq8w0kce7],
.blog-state p[b-jgq8w0kce7] {
    margin: 0;
}

.blog-state p[b-jgq8w0kce7] {
    margin-top: 0.6rem;
    color: var(--blog-muted);
    line-height: 1.65;
}

.blog-state-error[b-jgq8w0kce7] {
    border-color: rgba(183, 86, 56, 0.2);
}

.blog-rss-link:focus-visible[b-jgq8w0kce7],
.blog-filter-submit:focus-visible[b-jgq8w0kce7],
.blog-filter-clear:focus-visible[b-jgq8w0kce7],
.blog-filter-field input:focus-visible[b-jgq8w0kce7],
.blog-filter-field select:focus-visible[b-jgq8w0kce7],
.blog-active-filter:focus-visible[b-jgq8w0kce7],
.blog-chip:focus-visible[b-jgq8w0kce7],
.blog-read-more:focus-visible[b-jgq8w0kce7],
.blog-pagination-link:focus-visible[b-jgq8w0kce7],
.blog-card h2 a:focus-visible[b-jgq8w0kce7] {
    outline: 3px solid rgba(216, 111, 52, 0.22);
    outline-offset: 2px;
}

@keyframes blog-reveal-b-jgq8w0kce7 {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-page > *[b-jgq8w0kce7] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .blog-rss-link[b-jgq8w0kce7],
    .blog-filter-submit[b-jgq8w0kce7],
    .blog-filter-clear[b-jgq8w0kce7],
    .blog-active-filter[b-jgq8w0kce7],
    .blog-chip[b-jgq8w0kce7],
    .blog-read-more[b-jgq8w0kce7],
    .blog-pagination-link[b-jgq8w0kce7],
    .blog-card[b-jgq8w0kce7],
    .blog-card-image[b-jgq8w0kce7] {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .blog-grid[b-jgq8w0kce7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-filters[b-jgq8w0kce7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .blog-hero[b-jgq8w0kce7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .blog-page[b-jgq8w0kce7] {
        padding: 1rem;
    }

    .blog-hero[b-jgq8w0kce7],
    .blog-filters[b-jgq8w0kce7],
    .blog-results-meta[b-jgq8w0kce7],
    .blog-state[b-jgq8w0kce7] {
        border-radius: 24px;
    }

    .blog-filters[b-jgq8w0kce7],
    .blog-grid[b-jgq8w0kce7] {
        grid-template-columns: 1fr;
    }

    .blog-filter-actions[b-jgq8w0kce7] {
        flex-direction: column;
    }

    .blog-rss-link[b-jgq8w0kce7],
    .blog-filter-submit[b-jgq8w0kce7],
    .blog-filter-clear[b-jgq8w0kce7] {
        width: 100%;
    }
}
/* /Components/Pages/BlogPost.razor.rz.scp.css */
.blog-post-page[b-2d6pelvooj],
.blog-post-state[b-2d6pelvooj] {
    max-width: 980px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.blog-post-hero[b-2d6pelvooj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-post-back[b-2d6pelvooj] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #425247;
    text-decoration: none;
    font-weight: 700;
}

.blog-post-meta[b-2d6pelvooj],
.blog-post-taxonomy[b-2d6pelvooj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.blog-post-meta[b-2d6pelvooj] {
    font-size: 0.92rem;
    color: #66746a;
}

.blog-post-hero h1[b-2d6pelvooj] {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    line-height: 1.02;
    color: #1f3428;
}

.blog-post-summary[b-2d6pelvooj] {
    margin: 0;
    max-width: 46rem;
    font-size: 1.08rem;
    line-height: 1.85;
    color: #4f5a53;
}

.blog-post-chip[b-2d6pelvooj] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #edf4ef;
    color: #1f3428;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-post-chip-secondary[b-2d6pelvooj] {
    background: #f8f3e7;
    color: #715f38;
}

.blog-post-featured[b-2d6pelvooj] {
    margin: 2rem 0 0;
    overflow: hidden;
    border-radius: 1.8rem;
    box-shadow: 0 22px 50px rgba(34, 34, 34, 0.12);
}

.blog-post-featured img[b-2d6pelvooj] {
    display: block;
    width: 100%;
    height: auto;
}

.blog-post-content-shell[b-2d6pelvooj] {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 1.8rem;
    background: #fff;
    box-shadow: 0 20px 46px rgba(34, 34, 34, 0.08);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.blog-post-content[b-2d6pelvooj] {
    min-width: 0;
    max-width: 100%;
}

.blog-post-body[b-2d6pelvooj] {
    color: #33443a;
    font-size: 1.05rem;
    line-height: 1.9;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-post-body[b-2d6pelvooj]  p:first-child {
    margin-top: 0;
}

.blog-post-body[b-2d6pelvooj]  p:last-child {
    margin-bottom: 0;
}

.blog-post-body[b-2d6pelvooj]  h1,
.blog-post-body[b-2d6pelvooj]  h2,
.blog-post-body[b-2d6pelvooj]  h3 {
    color: #1f3428;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-post-body[b-2d6pelvooj]  a {
    color: #1f3428;
    text-decoration-thickness: 2px;
}

.blog-post-body[b-2d6pelvooj]  img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.blog-post-body[b-2d6pelvooj]  table,
.blog-post-body[b-2d6pelvooj]  pre,
.blog-post-body[b-2d6pelvooj]  code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.blog-post-body[b-2d6pelvooj]  blockquote {
    margin: 1.6rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #90af9e;
    background: #f7fbf8;
    color: #425247;
}

.blog-post-body[b-2d6pelvooj]  ul,
.blog-post-body[b-2d6pelvooj]  ol {
    padding-left: 1.3rem;
}

.blog-post-related[b-2d6pelvooj] {
    margin-top: 2rem;
}

.blog-post-related-head[b-2d6pelvooj] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.blog-post-related-head h2[b-2d6pelvooj] {
    margin: 0;
    color: #1f3428;
}

.blog-post-related-head a[b-2d6pelvooj] {
    color: #1f3428;
    font-weight: 700;
    text-decoration: none;
}

.blog-post-related-grid[b-2d6pelvooj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.blog-post-related-card[b-2d6pelvooj] {
    overflow: hidden;
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 18px 42px rgba(34, 34, 34, 0.08);
}

.blog-post-related-image-link[b-2d6pelvooj] {
    display: block;
    aspect-ratio: 16 / 10;
    background: #f1f4ef;
}

.blog-post-related-image-link img[b-2d6pelvooj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-related-body[b-2d6pelvooj] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
}

.blog-post-related-body time[b-2d6pelvooj] {
    font-size: 0.84rem;
    color: #66746a;
}

.blog-post-related-body h3[b-2d6pelvooj] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.blog-post-related-body h3 a[b-2d6pelvooj] {
    color: #1f3428;
    text-decoration: none;
}

.blog-post-related-body p[b-2d6pelvooj] {
    margin: 0;
    color: #4f5a53;
    line-height: 1.65;
}

.blog-post-state[b-2d6pelvooj] {
    padding-top: 4rem;
}

.blog-post-state h1[b-2d6pelvooj],
.blog-post-state p[b-2d6pelvooj] {
    margin: 0;
}

.blog-post-state p[b-2d6pelvooj] {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    color: #4f5a53;
}

@media (max-width: 820px) {
    .blog-post-related-grid[b-2d6pelvooj] {
        grid-template-columns: 1fr;
    }

    .blog-post-content-shell[b-2d6pelvooj] {
        padding: 1.35rem;
    }
}

@media (max-width: 640px) {
    .blog-post-page[b-2d6pelvooj],
    .blog-post-state[b-2d6pelvooj] {
        padding-inline: 1rem;
    }

    .blog-post-hero h1[b-2d6pelvooj] {
        font-size: 2.4rem;
    }
}
/* /Components/Pages/Gratis.razor.rz.scp.css */
.gratis-page-shell[b-lusa6n8o8y] {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

.gratis-hero[b-lusa6n8o8y] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.gratis-hero-copy[b-lusa6n8o8y] {
    max-width: 72ch;
    margin-inline: auto;
    text-align: center;
}

.gratis-banner[b-lusa6n8o8y] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

h1[b-lusa6n8o8y] {
    margin: 0;
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
}

.gratis-grid[b-lusa6n8o8y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(0.9rem, 2vw, 1.2rem);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.gratis-card[b-lusa6n8o8y] {
    --gratis-card-radius: 16px;
    display: grid;
    grid-template-columns: 170px 1fr;
    border: 1px solid color-mix(in srgb, var(--line) 88%, #b9b7ae);
    border-radius: var(--gratis-card-radius);
    overflow: hidden;
    background: var(--surface);
    min-height: 200px;
}

.gratis-cover-link[b-lusa6n8o8y] {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    background: #111;
    overflow: hidden;
    border-top-left-radius: var(--gratis-card-radius);
    border-bottom-left-radius: var(--gratis-card-radius);
}

.gratis-cover-link img[b-lusa6n8o8y] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.22s ease, filter 0.22s ease;
    border-top-left-radius: var(--gratis-card-radius);
    border-bottom-left-radius: var(--gratis-card-radius);
}

.gratis-cover-play[b-lusa6n8o8y] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.gratis-cover-play-icon[b-lusa6n8o8y] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    padding-left: 0.16rem;
}

.gratis-cover-link:hover img[b-lusa6n8o8y],
.gratis-cover-link:focus-visible img[b-lusa6n8o8y] {
    transform: scale(1.03);
    filter: brightness(0.8);
}

.gratis-cover-link:hover .gratis-cover-play[b-lusa6n8o8y],
.gratis-cover-link:focus-visible .gratis-cover-play[b-lusa6n8o8y] {
    opacity: 1;
}

.gratis-cover-link:focus-visible[b-lusa6n8o8y] {
    outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
    outline-offset: -3px;
}

.gratis-card-body[b-lusa6n8o8y] {
    padding: 0.9rem;
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.gratis-card-body h2[b-lusa6n8o8y] {
    margin: 0;
    font-size: 1.25rem;
}

.gratis-card-body p[b-lusa6n8o8y] {
    color: var(--muted);
    margin: 0 0 0.9rem;
}

.play-btn[b-lusa6n8o8y] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    padding: 0.65rem 0.9rem;
    min-height: 44px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--accent);
    color: #181818;
}

.play-btn[b-lusa6n8o8y]::before {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    background: color-mix(in srgb, white 70%, var(--accent) 30%);
    padding-left: 0.08rem;
}

.play-btn:hover[b-lusa6n8o8y] {
    background: var(--accent-deep);
}

.gratis-what-you-get[b-lusa6n8o8y] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0.4rem 0 0.2rem;
    text-align: center;
}

.gratis-what-you-get-image[b-lusa6n8o8y] {
    width: min(100%, 420px);
    display: block;
    margin: 0 auto 1.1rem;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.gratis-what-you-get h2[b-lusa6n8o8y] {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 1.2;
}

.gratis-what-you-get-content[b-lusa6n8o8y] {
    margin: 1rem auto 0;
    max-width: 60ch;
}

.gratis-what-you-get-intro[b-lusa6n8o8y] {
    margin: 1.25rem 0 0.45rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.gratis-what-you-get-intro[b-lusa6n8o8y]::before {
    display: inline-block;
    margin-right: 0.45rem;
}

.gratis-what-you-get-intro:first-of-type[b-lusa6n8o8y]::before {
    content: "\f001";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-deep);
}

.gratis-what-you-get-intro:nth-of-type(2)[b-lusa6n8o8y]::before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-deep);
}

.gratis-what-you-get-list[b-lusa6n8o8y],
.gratis-what-you-get-checks[b-lusa6n8o8y] {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.gratis-what-you-get-list li[b-lusa6n8o8y],
.gratis-what-you-get-checks li[b-lusa6n8o8y] {
    font-size: clamp(1.05rem, 2.1vw, 1.25rem);
    line-height: 1.4;
}

.gratis-what-you-get-list li[b-lusa6n8o8y] {
    color: var(--muted);
}

.gratis-what-you-get-list-email li[b-lusa6n8o8y]::before {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 1.2rem;
    margin-right: 0.4rem;
    color: var(--accent-deep);
}

.gratis-what-you-get-list-email li:nth-child(1)[b-lusa6n8o8y]::before {
    content: "\f1fc";
}

.gratis-what-you-get-list-email li:nth-child(2)[b-lusa6n8o8y]::before {
    content: "\f0eb";
}

.gratis-what-you-get-list-email li:nth-child(3)[b-lusa6n8o8y]::before {
    content: "\f0a1";
}

.gratis-what-you-get-checks[b-lusa6n8o8y] {
    margin-top: 1.3rem;
    gap: 0.5rem;
}

.gratis-what-you-get-checks li[b-lusa6n8o8y] {
    font-weight: 700;
}

.gratis-what-you-get-checks li[b-lusa6n8o8y]::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.45rem;
    color: var(--accent-deep);
}

@media (max-width: 760px) {
    .gratis-grid[b-lusa6n8o8y] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .gratis-hero[b-lusa6n8o8y] {
        margin-bottom: 1.1rem;
    }

    .gratis-hero-copy[b-lusa6n8o8y] {
        text-align: left;
    }

    .gratis-hero-copy p[b-lusa6n8o8y] {
        margin: 0.35rem 0 0;
    }

    .gratis-banner[b-lusa6n8o8y] {
        border-radius: 14px;
    }

    .gratis-card[b-lusa6n8o8y] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .gratis-cover-link[b-lusa6n8o8y] {
        border-top-right-radius: var(--gratis-card-radius);
        border-bottom-left-radius: 0;
    }

    .gratis-cover-link img[b-lusa6n8o8y] {
        max-height: 240px;
        border-top-right-radius: var(--gratis-card-radius);
        border-bottom-left-radius: 0;
    }

    .gratis-card-body[b-lusa6n8o8y] {
        padding: 0.82rem;
        gap: 0.45rem;
    }

    .gratis-card-body h2[b-lusa6n8o8y] {
        font-size: 1.14rem;
        line-height: 1.25;
    }

    .gratis-card-body p[b-lusa6n8o8y] {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .play-btn[b-lusa6n8o8y] {
        width: 100%;
        justify-content: center;
    }

    .gratis-what-you-get[b-lusa6n8o8y] {
        margin-top: 1.8rem;
        padding-top: 0.15rem;
    }

    .gratis-what-you-get-image[b-lusa6n8o8y] {
        width: min(100%, 360px);
        border-radius: 14px;
    }

    .gratis-what-you-get-content[b-lusa6n8o8y] {
        text-align: left;
    }

    .gratis-what-you-get-intro[b-lusa6n8o8y] {
        font-size: 1.15rem;
    }

    .gratis-what-you-get-list li[b-lusa6n8o8y],
    .gratis-what-you-get-checks li[b-lusa6n8o8y] {
        font-size: 1.02rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .gratis-cover-play[b-lusa6n8o8y] {
       /* opacity: 1;*/
        background: linear-gradient(to top, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.03));
    }
}

@media (max-width: 420px) {
    .gratis-hero[b-lusa6n8o8y] {
        gap: 0.7rem;
    }

    h1[b-lusa6n8o8y] {
        font-size: clamp(1.4rem, 7.2vw, 1.8rem);
        line-height: 1.15;
    }

    .gratis-banner[b-lusa6n8o8y] {
        border-radius: 12px;
    }

    .gratis-card[b-lusa6n8o8y] {
        --gratis-card-radius: 14px;
    }

    .gratis-cover-link img[b-lusa6n8o8y] {
        max-height: 215px;
    }

    .gratis-card-body[b-lusa6n8o8y] {
        padding: 0.72rem;
    }

    .gratis-what-you-get-image[b-lusa6n8o8y] {
        width: min(100%, 310px);
        border-radius: 12px;
    }

    .gratis-what-you-get h2[b-lusa6n8o8y] {
        font-size: clamp(1.25rem, 6.4vw, 1.55rem);
    }

    .gratis-what-you-get-intro[b-lusa6n8o8y] {
        font-size: 1.05rem;
    }
}
/* /Components/Pages/GratisStory.razor.rz.scp.css */
.story-player-page[b-hv4hl6ncp2] {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 720px);
    margin-inline: auto;
    padding-inline: 0;
}

.story-player-content[b-hv4hl6ncp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 0.8rem;
    color: #202020;
}

.story-cover-wrap[b-hv4hl6ncp2] {
    position: relative;
    width: 100%;
}

.story-cover[b-hv4hl6ncp2] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 16px 32px rgba(63, 56, 45, 0.16);
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.story-cover:focus-visible[b-hv4hl6ncp2] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-cover-play[b-hv4hl6ncp2] {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(19, 18, 17, 0.34), rgba(19, 18, 17, 0.08));
    transition: opacity 0.2s ease;
}

.story-cover-play-icon[b-hv4hl6ncp2] {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 700;
    color: #101722;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(16, 13, 8, 0.2);
    padding-left: 0.22rem;
}

.story-cover-wrap:hover .story-cover[b-hv4hl6ncp2],
.story-cover-wrap:focus-within .story-cover[b-hv4hl6ncp2] {
    transform: scale(1.012);
    filter: brightness(0.88);
}

.story-cover-wrap:hover .story-cover-play[b-hv4hl6ncp2],
.story-cover-wrap:focus-within .story-cover-play[b-hv4hl6ncp2] {
    opacity: 1;
}

.story-cover-wrap.is-playing .story-cover-play[b-hv4hl6ncp2],
.story-cover-wrap.is-playing:hover .story-cover-play[b-hv4hl6ncp2],
.story-cover-wrap.is-playing:focus-within .story-cover-play[b-hv4hl6ncp2] {
    opacity: 0;
}

.story-cover-wrap.is-playing .story-cover-play-icon[b-hv4hl6ncp2] {
    font-size: 1.26rem;
    padding-left: 0;
}

.sr-only[b-hv4hl6ncp2] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.story-nav-btn[b-hv4hl6ncp2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.18rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(10, 17, 24, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
    backdrop-filter: blur(5px);
}

.story-nav-btn:hover[b-hv4hl6ncp2] {
    background: rgba(5, 10, 15, 0.93);
}

.story-nav-btn:focus-visible[b-hv4hl6ncp2] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-nav-prev[b-hv4hl6ncp2] {
    left: -0.95rem;
}

.story-nav-next[b-hv4hl6ncp2] {
    right: -0.95rem;
}

.story-fullscreen-toggle[b-hv4hl6ncp2] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    border: 0;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.story-fullscreen-toggle i[b-hv4hl6ncp2] {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.story-fullscreen-toggle:hover[b-hv4hl6ncp2] {
    background: rgba(255, 255, 255, 0.2);
}

.story-fullscreen-toggle:focus-visible[b-hv4hl6ncp2] {
    outline: 3px solid color-mix(in srgb, #ffffff 35%, var(--accent));
    outline-offset: 2px;
}

@media (hover: none) and (pointer: coarse) {
    .story-cover-play[b-hv4hl6ncp2] {
        display: none;
    }
}

.story-player-title[b-hv4hl6ncp2] {
    margin: 0;
    text-align: center;
    color: #202020;
    font-size: clamp(2rem, 4.2vw, 2.7rem);
    line-height: 1.05;
}

.story-audio[b-hv4hl6ncp2] {
    width: min(100%, 460px);
}

.story-player-enhanced .story-audio-native[b-hv4hl6ncp2] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.story-custom-player[b-hv4hl6ncp2] {
    width: min(100%, 460px);
    display: grid;
    gap: 0.9rem;
    color: #232323;
    padding: 0;
}

.story-progress-wrap[b-hv4hl6ncp2] {
    display: grid;
    gap: 0.42rem;
}

.story-progress-slider[b-hv4hl6ncp2],
.story-volume-slider[b-hv4hl6ncp2] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 999px;
    background: #8f8a84;
    outline: none;
}

.story-progress-slider[b-hv4hl6ncp2]::-webkit-slider-thumb,
.story-volume-slider[b-hv4hl6ncp2]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 0;
    background: #f3efe9;
    box-shadow: 0 0 0 1px rgba(62, 56, 48, 0.2);
    cursor: pointer;
}

.story-progress-slider[b-hv4hl6ncp2]::-moz-range-thumb,
.story-volume-slider[b-hv4hl6ncp2]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 0;
    background: #f3efe9;
    box-shadow: 0 0 0 1px rgba(62, 56, 48, 0.2);
    cursor: pointer;
}

.story-time-row[b-hv4hl6ncp2] {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f3b37;
}

.story-time-row span + span[b-hv4hl6ncp2]::before {
    content: "/";
    margin-right: 0.4rem;
    color: #7b756f;
}

.story-player-controls[b-hv4hl6ncp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
}

.story-control-btn[b-hv4hl6ncp2] {
    border: 0;
    background: transparent;
    color: #1c1c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-control-btn:focus-visible[b-hv4hl6ncp2],
.story-mini-btn:focus-visible[b-hv4hl6ncp2],
.story-progress-slider:focus-visible[b-hv4hl6ncp2],
.story-volume-slider:focus-visible[b-hv4hl6ncp2] {
    outline: 3px solid color-mix(in srgb, #ffffff 20%, var(--accent));
    outline-offset: 2px;
}

.story-play-toggle[b-hv4hl6ncp2] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #1f1f1f;
    color: #faf7f2;
    box-shadow: 0 12px 22px rgba(31, 31, 31, 0.2);
}

.story-play-icon[b-hv4hl6ncp2] {
    font-size: 2rem;
    line-height: 1;
    margin-left: 0.2rem;
}

.story-play-toggle.is-playing .story-play-icon[b-hv4hl6ncp2] {
    margin-left: 0;
    font-size: 1.75rem;
}

.story-story-prev[b-hv4hl6ncp2],
.story-story-next[b-hv4hl6ncp2] {
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: transparent;
    font-size: 1.9rem;
}

.story-story-prev:disabled[b-hv4hl6ncp2],
.story-story-next:disabled[b-hv4hl6ncp2] {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-secondary-controls[b-hv4hl6ncp2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding-top: 0.1rem;
}

.story-mini-btn[b-hv4hl6ncp2] {
    min-height: 2rem;
    border: 0;
    border-radius: 999px;
    padding: 0.34rem 0.64rem;
    background: rgba(34, 34, 34, 0.08);
    color: #2a2a2a;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-custom-player.volume-unsupported .story-secondary-controls[b-hv4hl6ncp2] {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
}

.story-custom-player.volume-unsupported .story-volume-slider[b-hv4hl6ncp2] {
    display: none;
}

.story-custom-player.speed-unsupported .story-speed-toggle[b-hv4hl6ncp2] {
    opacity: 0.55;
}

.story-mute-icon[b-hv4hl6ncp2] {
    font-size: 1rem;
    line-height: 1;
}

.story-speed-label[b-hv4hl6ncp2] {
    font-size: 0.83rem;
    letter-spacing: 0.02em;
}

.story-summary-card[b-hv4hl6ncp2],
.story-meta-card[b-hv4hl6ncp2] {
    width: min(100%, 660px);
    margin-inline: auto;
    background: #222222;
    border-radius: 24px;
    padding: 1.25rem 1.35rem;
    color: #f6f1ea;
    box-shadow: 0 18px 34px rgba(34, 34, 34, 0.12);
}

.story-summary-card h2[b-hv4hl6ncp2],
.story-meta-card h2[b-hv4hl6ncp2] {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
    color: #ffffff;
}

.story-summary-card p[b-hv4hl6ncp2],
.story-meta-card p[b-hv4hl6ncp2] {
    margin: 0;
    line-height: 1.5;
}

.story-meta-card h2[b-hv4hl6ncp2] {
    margin-top: 1rem;
}

.story-meta-card h2:first-of-type[b-hv4hl6ncp2] {
    margin-top: 0.85rem;
}

.story-meta-card ul[b-hv4hl6ncp2] {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
}

.story-meta-card li + li[b-hv4hl6ncp2] {
    margin-top: 0.4rem;
}

.story-carousel-section[b-hv4hl6ncp2] {
    margin-top: 0.2rem;
    text-align: center;
    color: #27231f;
}

.story-carousel-section h2[b-hv4hl6ncp2] {
    margin-bottom: 0.7rem;
}

.story-carousel[b-hv4hl6ncp2] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.15rem 0.2rem 0.55rem;
    margin-inline: auto;
    width: min(100%, 920px);
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.2rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    cursor: grab;
}

.story-carousel.is-dragging[b-hv4hl6ncp2] {
    scroll-snap-type: none;
    cursor: grabbing;
}

.story-carousel.is-dragging .story-carousel-link[b-hv4hl6ncp2] {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.story-carousel-item[b-hv4hl6ncp2] {
    flex: 0 0 clamp(210px, 28vw, 250px);
    scroll-snap-align: start;
}

.story-carousel-link[b-hv4hl6ncp2] {
    display: block;
    text-decoration: none;
    color: #27231f;
    border: 1px solid rgba(57, 49, 40, 0.08);
    border-radius: 18px;
    overflow: hidden;
    -webkit-user-drag: none;
    user-select: none;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 9px 18px rgba(86, 72, 52, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.story-carousel-link:hover[b-hv4hl6ncp2],
.story-carousel-link:focus-visible[b-hv4hl6ncp2] {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(86, 72, 52, 0.12);
    border-color: color-mix(in srgb, var(--accent) 45%, #bdb2a1);
}

.story-carousel-image[b-hv4hl6ncp2] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.kwaaibok-carousel-image[b-hv4hl6ncp2] {
    object-position: 68% center;
}

.story-carousel-copy[b-hv4hl6ncp2] {
    padding: 0.62rem 0.72rem 0.68rem;
}

.story-carousel-copy h3[b-hv4hl6ncp2] {
    margin: 0;
    font-size: 1.02rem;
}

.story-carousel-status[b-hv4hl6ncp2] {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.62rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(34, 34, 34, 0.08);
    color: #3a352f;
}

.story-carousel-item.is-active .story-carousel-link[b-hv4hl6ncp2] {
    border: 2px solid color-mix(in srgb, var(--accent) 62%, #d0902e);
    box-shadow: 0 12px 24px rgba(199, 133, 40, 0.16);
}

.story-carousel-item.is-active .story-carousel-status[b-hv4hl6ncp2] {
    background: color-mix(in srgb, var(--accent) 90%, white);
    color: #1d1d1d;
}

.story-player-empty[b-hv4hl6ncp2] {
    padding: 1.25rem;
    border-radius: 20px;
    background: #222222;
    color: #f6f1ea;
}

.story-player-empty a[b-hv4hl6ncp2] {
    color: #ffffff;
    font-weight: 700;
}

.story-player-page.manual-fullscreen-focus[b-hv4hl6ncp2] {
    gap: 0.7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.story-player-page.manual-fullscreen-focus .story-summary-card[b-hv4hl6ncp2],
.story-player-page.manual-fullscreen-focus .story-meta-card[b-hv4hl6ncp2] {
    display: none;
}

.story-player-page.manual-fullscreen-focus .story-carousel-section[b-hv4hl6ncp2] {
    display: none;
}

.story-player-page.manual-fullscreen-focus .story-player-content[b-hv4hl6ncp2] {
    min-height: calc(100dvh - 5.5rem);
    justify-content: flex-start;
    padding: 0;
}

.story-player-page.manual-fullscreen-focus .story-cover-wrap[b-hv4hl6ncp2] {
    width: min(92vw, 620px);
}

.story-player-page.manual-fullscreen-focus .story-cover[b-hv4hl6ncp2] {
    width: min(92vw, 620px);
    max-height: min(58vh, 620px);
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 18px 34px rgba(63, 56, 45, 0.2);
}

.story-player-page.manual-fullscreen-focus .story-nav-btn[b-hv4hl6ncp2] {
    width: 3rem;
    height: 3rem;
    font-size: 1.35rem;
    background: rgba(8, 12, 16, 0.72);
}

.story-player-page.manual-fullscreen-focus .story-nav-prev[b-hv4hl6ncp2] {
    left: 0.7rem;
}

.story-player-page.manual-fullscreen-focus .story-nav-next[b-hv4hl6ncp2] {
    right: 0.7rem;
}

.story-player-page.manual-fullscreen-focus .story-audio[b-hv4hl6ncp2] {
    width: min(92vw, 620px);
}

.story-player-page.manual-fullscreen-focus .story-custom-player[b-hv4hl6ncp2] {
    width: min(92vw, 620px);
}

@media (max-width: 640px) {
    .story-player-page[b-hv4hl6ncp2] {
        gap: 1rem;
    }

    .story-player-content[b-hv4hl6ncp2] {
        gap: 0.75rem;
    }

    .story-audio[b-hv4hl6ncp2] {
        width: 100%;
    }

    .story-audio-native[b-hv4hl6ncp2] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .story-custom-player[b-hv4hl6ncp2] {
        display: grid;
    }

    .story-play-toggle[b-hv4hl6ncp2] {
        width: 88px;
        height: 88px;
    }

    .story-play-icon[b-hv4hl6ncp2] {
        font-size: 1.7rem;
    }

    .story-player-controls[b-hv4hl6ncp2] {
        gap: 0.82rem;
    }

    .story-story-prev[b-hv4hl6ncp2],
    .story-story-next[b-hv4hl6ncp2] {
        min-width: 50px;
        min-height: 50px;
        font-size: 1.7rem;
    }

    .story-secondary-controls[b-hv4hl6ncp2] {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 0.55rem;
    }

    .story-mini-btn[b-hv4hl6ncp2] {
        min-height: 2.25rem;
        padding: 0.28rem 0.56rem;
    }

    .story-volume-slider[b-hv4hl6ncp2] {
        display: none;
    }

    .story-progress-slider[b-hv4hl6ncp2],
    .story-volume-slider[b-hv4hl6ncp2] {
        height: 6px;
    }

    .story-progress-slider[b-hv4hl6ncp2]::-webkit-slider-thumb,
    .story-volume-slider[b-hv4hl6ncp2]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    .story-progress-slider[b-hv4hl6ncp2]::-moz-range-thumb,
    .story-volume-slider[b-hv4hl6ncp2]::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .story-carousel[b-hv4hl6ncp2] {
        justify-content: flex-start;
    }

    .story-carousel-item[b-hv4hl6ncp2] {
        flex: 0 0 min(76vw, 230px);
    }

    .story-nav-prev[b-hv4hl6ncp2] {
        left: 0.45rem;
    }

    .story-nav-next[b-hv4hl6ncp2] {
        right: 0.45rem;
    }

    .story-player-page.manual-fullscreen-focus .story-player-content[b-hv4hl6ncp2] {
        min-height: calc(100dvh - 4rem);
        padding: 0;
    }

    .story-player-page.manual-fullscreen-focus .story-cover[b-hv4hl6ncp2],
    .story-player-page.manual-fullscreen-focus .story-audio[b-hv4hl6ncp2],
    .story-player-page.manual-fullscreen-focus .story-custom-player[b-hv4hl6ncp2] {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .story-play-toggle[b-hv4hl6ncp2] {
        width: 64px;
        height: 64px;
    }

    .story-play-icon[b-hv4hl6ncp2] {
        font-size: 1.5rem;
    }

    .story-story-prev[b-hv4hl6ncp2],
    .story-story-next[b-hv4hl6ncp2] {
        min-width: 46px;
        min-height: 46px;
    }

    .story-time-row[b-hv4hl6ncp2] {
        font-size: 0.8rem;
    }

    .story-summary-card[b-hv4hl6ncp2],
    .story-meta-card[b-hv4hl6ncp2] {
        padding: 1.1rem 1rem;
        border-radius: 20px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-ab672arpa2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    isolation: isolate;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    min-height: 85vh;
    min-height: 85svh;
    padding-top: var(--home-navbar-offset, calc(var(--home-hero-overlap) - 10px));
    padding-bottom: 1.1rem;
    padding-left: max(0.8rem, calc((100vw - 1080px) / 2 + 0.8rem));
    padding-right: max(0.8rem, calc((100vw - 1080px) / 2 + 0.8rem));
    border-radius: 0;
    overflow: hidden;
}

.hero-backdrop[b-ab672arpa2] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(64, 141, 147, 0.05) 0%,
            rgba(64, 141, 147, 0.08) 45%,
            rgba(79, 157, 179, 0.12) 68%,
            rgba(79, 157, 179, 0.06) 82%,
            rgba(79, 157, 179, 0.00) 100%
        ),
        url("/branding/Schink_Background.jpeg") center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.7) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.7) 86%, transparent 100%);
}

.home-content-gradient[b-ab672arpa2] {
    margin-top: -1px;
    padding-top: calc(1rem + 1px);
    background: transparent;
}

.hero-visual[b-ab672arpa2] {
    position: relative;
    z-index: 1;
    padding-top: 0;
}

.hero[b-ab672arpa2]::before,
.hero[b-ab672arpa2]::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.42;
    filter: blur(10px);
}

.hero[b-ab672arpa2]::before {
    top: 1.5rem;
    left: max(0.8rem, calc((100vw - 1080px) / 2 + 0.8rem));
    width: min(28vw, 320px);
    height: min(28vw, 320px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 72%);
    animation: home-hero-glow-drift-b-ab672arpa2 18s ease-in-out infinite;
}

.hero[b-ab672arpa2]::after {
    top: 4.2rem;
    right: max(0.8rem, calc((100vw - 1080px) / 2 + 0.8rem));
    width: min(22vw, 250px);
    height: min(22vw, 250px);
    background: radial-gradient(circle, rgba(242, 216, 164, 0.34) 0%, rgba(242, 216, 164, 0) 74%);
    animation: home-hero-glow-drift-b-ab672arpa2 22s ease-in-out infinite reverse;
}

.eyebrow[b-ab672arpa2] {
    display: inline-block;
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.92rem;
}

.hero-title[b-ab672arpa2] {
    margin: 0 auto 0.9rem;
    width: fit-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08em;
    font-size: clamp(2.55rem, 5vw, 4.55rem);
    line-height: 0.97;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.045em;
    text-align: center;
    text-shadow: 0 12px 28px rgba(9, 40, 48, 0.2);
    text-wrap: initial;
}

.hero-title-line[b-ab672arpa2] {
    display: block;
    white-space: nowrap;
}

.hero-title-subline[b-ab672arpa2] {
    display: block;
    font-size: 0.92em;
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 8px 18px rgba(9, 40, 48, 0.12);
}

.hero-copy[b-ab672arpa2] {
    text-align: center;
    width: min(100%, 860px);
    margin-inline: auto;
    margin-top: -3.2rem;
    padding: 0 1.2rem 1.1rem;
    position: relative;
    z-index: 3;
}

.hero-copy-text[b-ab672arpa2] {
    width: min(100%, 54rem);
    margin-inline: auto;
    display: grid;
    justify-items: center;
    text-align: center;
}

.hero-copy p[b-ab672arpa2] {
    color: #ffffff;
    max-width: none;
    margin-inline: auto;
    margin-block: 0;
    text-shadow: 0 10px 24px rgba(9, 40, 48, 0.18);
}

.hero-intro[b-ab672arpa2] {
    width: min(100%, 770px);
    max-width: 770px;
    font-size: clamp(1.18rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: normal;
    white-space: normal;
    text-wrap: initial;
}

.hero-intro em[b-ab672arpa2] {
    font-style: italic;
    font-weight: 500;
}

.hero-intro strong[b-ab672arpa2] {
    font-weight: 700;
}

.hero-support[b-ab672arpa2] {
    width: min(100%, 690px);
    max-width: 690px;
    margin-top: 0.82rem !important;
    font-size: clamp(1.08rem, 1.55vw, 1.34rem);
    line-height: 1.18;
    color: #ffffff !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-shadow:
        0 12px 26px rgba(9, 40, 48, 0.3),
        0 2px 8px rgba(9, 40, 48, 0.18);
}

.hero-actions[b-ab672arpa2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.58rem;
    width: min(100%, 520px);
    margin-inline: auto;
    margin-top: 1.3rem;
    margin-bottom: 0.95rem;
    justify-content: center;
}

.hero-cta-row[b-ab672arpa2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.hero-more-link[b-ab672arpa2] {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
    text-shadow: 0 8px 18px rgba(9, 40, 48, 0.2);
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.hero-more-link:hover[b-ab672arpa2],
.hero-more-link:focus-visible[b-ab672arpa2] {
    color: #ffffff;
    text-decoration-color: #f2d8a4;
}

.hero-more-link:focus-visible[b-ab672arpa2] {
    outline: 3px solid color-mix(in srgb, #ffffff 68%, var(--accent));
    outline-offset: 4px;
    border-radius: 6px;
}

.cta[b-ab672arpa2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font: inherit;
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.1;
    text-transform: uppercase;
    min-height: 48px;
    min-width: 214px;
    padding: 0.72rem 1.55rem;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 10px 22px rgba(18, 35, 40, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.cta:hover[b-ab672arpa2] {
    transform: translateY(-1px);
}

.cta-placeholder[b-ab672arpa2] {
    min-height: 48px;
    min-width: 214px;
    border-radius: 999px;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.24) 8%, rgba(255, 255, 255, 0.42) 18%, rgba(255, 255, 255, 0.24) 33%);
    background-size: 200% 100%;
    animation: home-shimmer-b-ab672arpa2 1.6s linear infinite;
    box-shadow: none;
    cursor: default;
}

.cta:focus-visible[b-ab672arpa2] {
    outline: 3px solid color-mix(in srgb, #ffffff 68%, var(--accent));
    outline-offset: 2px;
}

.cta-primary[b-ab672arpa2],
.cta-secondary[b-ab672arpa2] {
    border: 0;
    background: linear-gradient(180deg, #f4d18d 0%, #e9c06e 100%);
    color: #3b5874;
}

.cta-primary:hover[b-ab672arpa2],
.cta-secondary:hover[b-ab672arpa2] {
    background: linear-gradient(180deg, #f6d895 0%, #efca7f 100%);
    color: #111;
    box-shadow: 0 12px 22px rgba(20, 24, 26, 0.24);
}

.hero-pricing[b-ab672arpa2] {
    max-width: none;
    font-size: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    text-shadow: 0 10px 24px rgba(9, 40, 48, 0.18);
}

.hero-media[b-ab672arpa2] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.15rem;
}

.hero-visual[b-ab672arpa2] {
    width: min(100%, 570px);
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
}

.hero-logo-wrap[b-ab672arpa2] {
    padding: 1rem 1rem 0.15rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-logo[b-ab672arpa2] {
    width: min(440px, 94%);
    height: auto;
    object-fit: contain;
    margin-bottom: 0;
    filter: drop-shadow(0 18px 34px rgba(5, 34, 40, 0.12));
}

.hero-media img[b-ab672arpa2] {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -1.6rem;
    transform-origin: center top;
    animation: home-hero-artwork-drift-b-ab672arpa2 14s ease-in-out infinite;
    /* Fade top edge so artwork blends into logo gradient background. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 13%, #000 25%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 13%, #000 25%);
}

@media (max-height: 980px) {
    .hero[b-ab672arpa2] {
        padding-top: var(--home-navbar-offset, calc(var(--home-hero-overlap) - 10px));
        padding-bottom: 0.75rem;
    }

    .hero-visual[b-ab672arpa2] {
        width: min(100%, 525px);
    }

    .hero-logo[b-ab672arpa2] {
        width: min(380px, 90%);
        margin-bottom: 0;
    }

    .hero-copy[b-ab672arpa2] {
        width: min(100%, 760px);
        margin-top: -5.1rem;
        padding: 0 1rem 1rem;
    }

    .hero-copy-text[b-ab672arpa2] {
        width: min(100%, 46rem);
    }

    .hero-title[b-ab672arpa2] {
        margin-bottom: 0.82rem;
        font-size: clamp(2.25rem, 4.4vw, 3.55rem);
        line-height: 0.98;
    }

    .hero-intro[b-ab672arpa2] {
        width: min(100%, 770px);
        max-width: 770px;
        white-space: normal;
    }

    .hero-support[b-ab672arpa2] {
        width: min(100%, 690px);
        max-width: 690px;
    }

    .hero-actions[b-ab672arpa2] {
        gap: 0.52rem;
        margin-top: 1.05rem;
        margin-bottom: 0.72rem;
        width: min(100%, 480px);
    }

    .cta[b-ab672arpa2] {
        min-height: 46px;
        min-width: 204px;
        padding: 0.68rem 1.2rem;
        font-size: 0.92rem;
    }

    .hero-more-link[b-ab672arpa2] {
        font-size: 0.92rem;
    }

    .hero-pricing[b-ab672arpa2] {
        font-size: 0.94rem;
    }
}

@media (max-height: 860px) {
    .hero-logo[b-ab672arpa2] {
        width: min(320px, 84%);
        margin-bottom: 0;
    }

    .hero-media img[b-ab672arpa2] {
        margin-top: -1rem;
    }

    .eyebrow[b-ab672arpa2] {
        font-size: 0.78rem;
    }

    .hero-intro[b-ab672arpa2] {
        width: min(100%, 770px);
        max-width: 770px;
        white-space: normal;
    }

    .hero-support[b-ab672arpa2] {
        width: min(100%, 690px);
        max-width: 690px;
    }
}

.join-promo[b-ab672arpa2] {
    margin: 0.7rem auto 1.4rem;
    width: min(100%, 960px);
    border-radius: 28px;
    padding: 1.15rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(99, 176, 194, 0.98) 0%, rgba(89, 166, 188, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(22, 44, 50, 0.18);
    overflow: hidden;
}

.join-promo-media img[b-ab672arpa2] {
    width: 75%;
    display: block;
    margin: 0 auto;
    border-radius: 18px 18px 0 0;
    transform-origin: center center;
    animation: home-promo-breathing-b-ab672arpa2 12s ease-in-out infinite 0.8s;
}

.join-promo-copy[b-ab672arpa2] {
    margin-top: 0;
    border-radius: 0 0 18px 18px;
    padding: 1.45rem 1.2rem 1.1rem;
    background: transparent;
    color: #ffffff;
}

.join-promo-intro[b-ab672arpa2] {
    margin: 0;
    text-align: center;
    font-size: clamp(1.22rem, 2vw, 1.45rem);
    font-weight: 700;
}

.join-promo-list[b-ab672arpa2] {
    list-style: none;
    max-width: 700px;
    margin: 0.95rem auto 0;
    padding: 0;
    display: grid;
    gap: 0.58rem;
}

.join-promo-list li[b-ab672arpa2] {
    position: relative;
    padding-left: 1.65rem;
    font-size: clamp(1.08rem, 1.6vw, 1.22rem);
}

.join-promo-list li[b-ab672arpa2]::before {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.02rem;
    color: #f2dd63;
    font-size: 1.02rem;
}

.join-promo-cta[b-ab672arpa2] {
    margin: 1rem auto 0.2rem;
    display: block;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #111111;
    background: #f2d8a4;
    border-radius: 999px;
    padding: 0.72rem 1.2rem;
    box-shadow: 0 8px 18px rgba(20, 24, 26, 0.2);
}

.join-promo-more-link[b-ab672arpa2] {
    display: block;
    width: fit-content;
    margin: 0.7rem auto 0;
}

.home-social-proof[b-ab672arpa2] {
    width: min(100%, 1040px);
    margin: 0 auto 1.15rem;
    padding: 0 0.75rem;
}

.home-social-proof-grid[b-ab672arpa2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(0.25rem, 1.8vw, 1rem);
}

.home-social-proof-item[b-ab672arpa2] {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 280px);
    aspect-ratio: 560 / 292;
}

.home-social-proof-laurel[b-ab672arpa2] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

.home-social-proof-copy[b-ab672arpa2] {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.04rem;
    max-width: 58%;
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(0.58rem, 1.08vw, 0.82rem);
    line-height: 1.08;
    text-align: center;
}

.home-social-proof-number[b-ab672arpa2] {
    display: block;
    font-size: clamp(1.34rem, 2.82vw, 1.92rem);
    font-weight: 900;
    line-height: 0.95;
}

.home-social-proof-copy-static[b-ab672arpa2] {
    font-size: clamp(0.9rem, 1.58vw, 1.18rem);
    line-height: 1.08;
}

.section-block[b-ab672arpa2] {
    margin-top: 0.5rem;
}

.home-motion-ready.home-scroll-reveal[b-ab672arpa2] {
    opacity: 0;
    transform: translateY(24px);
    filter: saturate(0.96);
    transition:
        opacity 0.72s ease,
        transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.72s ease;
    transition-delay: var(--home-reveal-delay, 0s);
}

.home-motion-ready.home-scroll-reveal.is-visible[b-ab672arpa2] {
    opacity: 1;
    transform: none;
    filter: none;
}

.home-reveal-delay-fast[b-ab672arpa2] {
    --home-reveal-delay: 0.04s;
}

.home-reveal-delay-standard[b-ab672arpa2] {
    --home-reveal-delay: 0.08s;
}

.section-block h2[b-ab672arpa2],
.section-block .section-intro[b-ab672arpa2] {
    text-align: center;
}

h2[b-ab672arpa2] {
    margin-bottom: 0.5rem;
}

.section-intro[b-ab672arpa2] {
    color: var(--muted);
    margin-top: 0;
}

.stories-carousel-section h2[b-ab672arpa2],
.perfect-plan-header h2[b-ab672arpa2],
.home-faq-heading h2[b-ab672arpa2],
.contact-title[b-ab672arpa2] {
    margin: 0;
    font-size: clamp(1.65rem, 2.8vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.stories-carousel-section .section-intro[b-ab672arpa2],
.perfect-plan-header p[b-ab672arpa2],
.home-faq-heading p[b-ab672arpa2],
.contact-copy p[b-ab672arpa2] {
    margin-top: 0.4rem;
    max-width: 64ch;
    margin-inline: auto;
    font-size: 1.03rem;
    line-height: 1.55;
}

.stories-carousel-section[b-ab672arpa2] {
    margin-top: 0.75rem;
    width: min(100%, 1080px);
    margin-inline: auto;
    padding: 0.24rem 0;
    position: relative;
}

.stories-carousel-section + .stories-carousel-section[b-ab672arpa2] {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(14, 34, 46, 0.12);
}

.stories-carousel-section h2[b-ab672arpa2]::after {
    content: "";
    display: block;
    width: 2.6rem;
    height: 2px;
    margin: 0.42rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(64, 141, 147, 0.12) 0%, rgba(64, 141, 147, 0.55) 50%, rgba(64, 141, 147, 0.12) 100%);
}

.stories-carousel-section-ranked[b-ab672arpa2] {
    width: min(100%, 1120px);
    margin-top: 1.35rem;
    padding: 1.2rem 0 1.1rem;
    background: transparent;
}

.stories-carousel-section-ranked h2[b-ab672arpa2] {
    font-size: clamp(2.05rem, 4vw, 3.1rem);
    color: #1f5354;
}

.stories-carousel-section-ranked h2[b-ab672arpa2]::before {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 0.45rem;
    color: #d67f12;
    font-size: 0.78em;
    transform: translateY(-0.04em);
}

.stories-carousel-section-ranked h2[b-ab672arpa2]::after {
    width: 4.8rem;
    height: 3px;
    background: linear-gradient(90deg, rgba(214, 127, 18, 0.12) 0%, rgba(214, 127, 18, 0.72) 50%, rgba(214, 127, 18, 0.12) 100%);
}

.stories-carousel-section-ranked .story-carousel-cover[b-ab672arpa2] {
    box-shadow: 0 16px 30px rgba(14, 18, 24, 0.36);
}

.home-page-loading[b-ab672arpa2] {
    margin: 0.95rem auto 0.8rem;
    width: fit-content;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.68rem;
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(64, 141, 147, 0.24);
    background: rgba(255, 255, 255, 0.74);
    color: #1f5354;
    font-weight: 750;
    box-shadow: 0 12px 24px rgba(33, 42, 47, 0.08);
}

.home-page-loading-spinner[b-ab672arpa2] {
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 999px;
    border: 3px solid rgba(64, 141, 147, 0.2);
    border-top-color: #408d93;
    animation: home-loading-spin-b-ab672arpa2 0.72s linear infinite;
}

.home-loading-section[b-ab672arpa2] {
    width: min(100%, 1080px);
    margin-inline: auto;
}

.home-loading-title[b-ab672arpa2],
.home-loading-subtitle[b-ab672arpa2],
.home-loading-cover[b-ab672arpa2],
.home-loading-line[b-ab672arpa2] {
    border-radius: 18px;
}

.home-loading-title[b-ab672arpa2] {
    width: min(280px, 62vw);
    height: 2.1rem;
    margin: 0 auto;
}

.home-loading-subtitle[b-ab672arpa2] {
    width: min(520px, 82vw);
    height: 1rem;
    margin: 0.55rem auto 0;
}

.home-loading-carousel[b-ab672arpa2] {
    --home-carousel-edge-space: 15px;
    margin-top: 1rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    gap: 0.9rem;
    overflow: hidden;
    padding-inline: var(--home-carousel-edge-space);
}

.home-loading-card[b-ab672arpa2] {
    display: grid;
    gap: 0.7rem;
}

.home-loading-cover[b-ab672arpa2] {
    width: 100%;
    aspect-ratio: 640 / 485;
}

.home-loading-line[b-ab672arpa2] {
    width: 78%;
    height: 1rem;
}

.shimmer-block[b-ab672arpa2] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.22) 8%, rgba(255, 255, 255, 0.4) 18%, rgba(255, 255, 255, 0.22) 33%);
    background-size: 200% 100%;
    animation: home-shimmer-b-ab672arpa2 1.6s linear infinite;
}

.stories-carousel-section h2[b-ab672arpa2],
.stories-carousel-section .section-intro[b-ab672arpa2] {
    text-align: center;
}

.stories-carousel-section .section-intro[b-ab672arpa2] {
    margin-bottom: 0;
}

.stories-carousel-shell[b-ab672arpa2] {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0.55rem;
    padding: 0.34rem 0 0.24rem;
    padding-inline: 0;
}

.stories-carousel-shell[b-ab672arpa2]::before {
    content: none;
}

.stories-carousel[b-ab672arpa2] {
    --home-carousel-edge-space: 15px;
    position: relative;
    z-index: 1;
    margin-top: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    justify-content: safe center;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: var(--home-carousel-edge-space);
    padding-bottom: 0.38rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--home-carousel-edge-space);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    width: 100%;
    cursor: grab;
}

.stories-carousel.is-dragging[b-ab672arpa2] {
    scroll-snap-type: none;
    cursor: grabbing;
}

.stories-carousel.is-dragging .story-carousel-link[b-ab672arpa2] {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.stories-carousel-free[b-ab672arpa2] {
    justify-content: center;
}

.stories-carousel[b-ab672arpa2]::-webkit-scrollbar {
    height: 8px;
}

.stories-carousel[b-ab672arpa2]::-webkit-scrollbar-track {
    background: rgba(15, 26, 42, 0.08);
    border-radius: 999px;
}

.stories-carousel[b-ab672arpa2]::-webkit-scrollbar-thumb {
    background: rgba(15, 26, 42, 0.26);
    border-radius: 999px;
}

.story-carousel-item[b-ab672arpa2] {
    scroll-snap-align: start;
}

.story-carousel-item-ranked[b-ab672arpa2] {
    position: relative;
    padding-top: clamp(0.78rem, 1.2vw, 1rem);
}

.story-carousel-item.is-navigating .story-carousel-link[b-ab672arpa2] {
    pointer-events: none;
}

.story-carousel-rank[b-ab672arpa2] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: block;
    pointer-events: none;
    user-select: none;
    font-family: "Schink Rank Rounded", "Arial Rounded MT Bold", "Arial Black", "Poppins", "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: clamp(2.75rem, 8.8vw, 5.17rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.08em;
    color: #fffef8;
    text-shadow:
        0 6px 12px rgba(52, 65, 70, 0.24);
}

.story-carousel-link[b-ab672arpa2] {
    color: inherit;
    text-decoration: none;
    display: grid;
    gap: 0.56rem;
    -webkit-user-drag: none;
    user-select: none;
}

.story-carousel-link-button[b-ab672arpa2] {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.story-carousel-cover[b-ab672arpa2] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, #fff2cf 0%, #f6bf72 46%, #408d93 100%);
    box-shadow: 0 10px 24px rgba(14, 18, 24, 0.3);
}

.story-carousel-item.is-navigating .story-carousel-cover[b-ab672arpa2]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 16, 0.42);
    z-index: 2;
}

.story-carousel-item.is-navigating .story-carousel-cover[b-ab672arpa2]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -1.1rem;
    margin-left: -1.1rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: home-story-card-spin-b-ab672arpa2 0.7s linear infinite;
    z-index: 3;
}

.story-carousel-image[b-ab672arpa2] {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transform: scale(1.1);
    transform-origin: center center;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.story-carousel-image-fallback[b-ab672arpa2] {
    object-fit: contain;
    padding: 1.35rem;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, #fff2cf 0%, #f6bf72 46%, #408d93 100%);
}

.story-carousel-item.is-navigating .story-carousel-image[b-ab672arpa2] {
    filter: brightness(0.72);
    transform: scale(1.11);
}

.kwaaibok-home-cover[b-ab672arpa2] {
    object-position: 68% center;
}

.story-cover-play[b-ab672arpa2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.story-cover-play-icon[b-ab672arpa2] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    padding-left: 0.16rem;
}

.story-carousel-link:hover .story-carousel-image[b-ab672arpa2],
.story-carousel-link:focus-visible .story-carousel-image[b-ab672arpa2] {
    transform: scale(1.14);
    filter: brightness(0.8);
}

.story-carousel-link:hover .story-cover-play[b-ab672arpa2],
.story-carousel-link:focus-visible .story-cover-play[b-ab672arpa2] {
    opacity: 1;
}

.story-carousel-link h3[b-ab672arpa2] {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2231;
    min-height: 2.6em;
}

.story-carousel-link:focus-visible[b-ab672arpa2] {
    outline: 3px solid color-mix(in srgb, #ffffff 40%, var(--accent));
    outline-offset: 4px;
    border-radius: 16px;
}

@keyframes home-story-card-spin-b-ab672arpa2 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes home-fade-up-b-ab672arpa2 {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-hero-artwork-drift-b-ab672arpa2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -10px, 0) scale(1.012);
    }
}

@keyframes home-promo-breathing-b-ab672arpa2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -6px, 0) scale(1.008);
    }
}

@keyframes home-hero-glow-drift-b-ab672arpa2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(12px, -10px, 0) scale(1.08);
    }
}

@keyframes home-shimmer-b-ab672arpa2 {
    to {
        background-position-x: -200%;
    }
}

@keyframes home-loading-spin-b-ab672arpa2 {
    to {
        transform: rotate(360deg);
    }
}

.newest-stories-section[b-ab672arpa2] {
    margin-top: 1.1rem;
}

.bible-stories-section[b-ab672arpa2] {
    margin-top: 1.1rem;
}

.home-testimonials[b-ab672arpa2] {
    margin: 1.4rem auto 0;
    width: min(100%, 980px);
}

.home-faq[b-ab672arpa2] {
    --home-faq-ink: #233428;
    --home-faq-muted: #5e6f63;
    --home-faq-line: rgba(35, 52, 40, 0.12);
    --home-faq-accent-deep: #a74a1f;
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.4rem);
    margin: 1.35rem auto 0;
    width: min(100%, 980px);
    padding: clamp(1.4rem, 2.6vw, 2.3rem);
    border: 1px solid var(--home-faq-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 179, 0.34), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 248, 237, 0.96) 100%);
    box-shadow: 0 26px 70px rgba(86, 64, 35, 0.12);
    color: var(--home-faq-ink);
}

.home-faq-heading[b-ab672arpa2] {
    display: grid;
    justify-items: center;
    gap: 0.62rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.home-faq-kicker[b-ab672arpa2] {
    margin: 0;
    color: var(--home-faq-accent-deep);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.home-faq-heading h2[b-ab672arpa2] {
    margin: 0;
    width: fit-content;
    max-width: 100%;
    padding: 0.46rem 0.86rem;
    border-radius: 999px;
    border: 1px solid rgba(216, 111, 52, 0.16);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(78, 58, 32, 0.07);
    color: var(--home-faq-ink);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    line-height: 1.1;
}

.home-faq-list[b-ab672arpa2] {
    display: grid;
    gap: 0.68rem;
}

.home-faq-item[b-ab672arpa2] {
    border: 1px solid rgba(35, 52, 40, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    overflow: clip;
}

.home-faq-item summary[b-ab672arpa2] {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0.86rem 1rem;
    font-weight: 700;
    color: var(--home-faq-ink);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.home-faq-item summary[b-ab672arpa2]::-webkit-details-marker {
    display: none;
}

.home-faq-item summary[b-ab672arpa2]::before {
    content: "\2b";
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(216, 111, 52, 0.38);
    color: var(--home-faq-accent-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    line-height: 1;
    flex-shrink: 0;
}

.home-faq-item[open] summary[b-ab672arpa2]::before {
    content: "\2212";
}

.home-faq-item p[b-ab672arpa2] {
    margin: 0;
    padding: 0 1rem 0.95rem 2.75rem;
    color: var(--home-faq-muted);
    line-height: 1.62;
}

.home-whatsapp-join[b-ab672arpa2] {
    margin: 1.35rem auto 0;
    width: min(100%, 960px);
}

.home-whatsapp-join-card[b-ab672arpa2] {
    position: relative;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) auto;
    gap: 1.2rem;
    align-items: center;
    min-height: 158px;
    padding: 1.28rem 1.55rem;
    border-radius: 26px;
    border: 1px solid rgba(41, 191, 131, 0.38);
    background:
        radial-gradient(circle at top right, rgba(155, 245, 188, 0.42) 0%, rgba(155, 245, 188, 0) 29%),
        linear-gradient(110deg, #138b83 0%, #15a984 45%, #31d56e 100%);
    box-shadow: 0 22px 42px rgba(23, 90, 70, 0.24);
    color: #ffffff;
}

.home-whatsapp-join-card[b-ab672arpa2]::before,
.home-whatsapp-join-card[b-ab672arpa2]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

.home-whatsapp-join-card[b-ab672arpa2]::before {
    width: 190px;
    height: 190px;
    top: 0;
    right: 0;
    transform: translate(22%, -36%);
}

.home-whatsapp-join-card[b-ab672arpa2]::after {
    width: 92px;
    height: auto;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 26px 0 0 26px;
    background: rgba(5, 94, 84, 0.2);
}

.home-whatsapp-join-copy[b-ab672arpa2] {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.4rem;
    max-width: 520px;
}

.home-whatsapp-join-kicker[b-ab672arpa2] {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.home-whatsapp-join-copy h2[b-ab672arpa2] {
    margin: 0;
    color: #ffffff;
    text-align: left;
    font-size: clamp(1.65rem, 3vw, 2.18rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.home-whatsapp-join-copy p:last-child[b-ab672arpa2] {
    margin: 0;
    max-width: 50ch;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
    line-height: 1.55;
}

.home-whatsapp-join-duck[b-ab672arpa2] {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-height: 126px;
    pointer-events: none;
}

.home-whatsapp-join-duck img[b-ab672arpa2] {
    position: absolute;
    left: 50%;
    bottom: -0.95rem;
    width: clamp(156px, 17vw, 210px);
    max-width: none;
    height: auto;
    display: block;
    transform: translateX(-50%);
    transform-origin: 50% 82%;
    animation: home-whatsapp-duck-wiggle-b-ab672arpa2 8s ease-in-out infinite;
    filter: drop-shadow(0 14px 16px rgba(4, 72, 64, 0.18));
}

@keyframes home-whatsapp-duck-wiggle-b-ab672arpa2 {
    0%,
    91%,
    100% {
        transform: translateX(-50%) rotate(0deg);
    }

    92.5% {
        transform: translateX(-50%) rotate(-1.8deg);
    }

    94% {
        transform: translateX(-50%) rotate(1.6deg);
    }

    95.5% {
        transform: translateX(-50%) rotate(-1.1deg);
    }

    97% {
        transform: translateX(-50%) rotate(0.8deg);
    }
}

@media (max-width: 1100px) {
    .home-whatsapp-join-card[b-ab672arpa2]::before {
        transform: translate(0, -36%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-whatsapp-join-duck img[b-ab672arpa2] {
        animation: none;
    }
}

.home-whatsapp-join-btn[b-ab672arpa2] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    min-height: 54px;
    padding: 0.78rem 1.42rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: #ffffff;
    color: #0f6b5c;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(8, 54, 45, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.home-whatsapp-join-btn i[b-ab672arpa2] {
    font-size: 1.3rem;
    line-height: 1;
}

.home-whatsapp-join-btn:hover[b-ab672arpa2] {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 16px 30px rgba(8, 54, 45, 0.26);
}

.home-whatsapp-join-btn:focus-visible[b-ab672arpa2] {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.home-testimonials-header[b-ab672arpa2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.home-testimonials h2[b-ab672arpa2] {
    text-align: center;
    color: var(--text);
    margin: 0;
}

.home-review-carousel-shell[b-ab672arpa2] {
    position: relative;
    margin-top: 0.95rem;
    padding-inline: 2.9rem;
}

.home-review-control[b-ab672arpa2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(228, 222, 207, 0.92);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(243, 235, 219, 0.98) 100%);
    color: #2b3131;
    box-shadow: 0 12px 28px rgba(33, 42, 47, 0.14);
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.home-review-control:hover[b-ab672arpa2] {
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 14px 30px rgba(33, 42, 47, 0.18);
}

.home-review-control:focus-visible[b-ab672arpa2] {
    outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
    outline-offset: 2px;
}

.home-review-control:disabled[b-ab672arpa2] {
    opacity: 0.38;
    cursor: default;
    box-shadow: none;
}

.home-review-control:disabled:hover[b-ab672arpa2] {
    transform: translateY(-50%);
}

.home-review-control-prev[b-ab672arpa2] {
    left: 0;
}

.home-review-control-next[b-ab672arpa2] {
    right: 0;
}

.home-review-grid[b-ab672arpa2] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1.6rem) / 3);
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-review-grid[b-ab672arpa2]::-webkit-scrollbar {
    display: none;
}

.home-review-card[b-ab672arpa2] {
    background: #f8f6ef;
    border: 1px solid #e4decf;
    border-radius: 12px;
    padding: 0.9rem;
    display: grid;
    gap: 0.45rem;
    min-height: 100%;
    scroll-snap-align: start;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-motion-ready.is-visible .home-review-card[b-ab672arpa2],
.home-motion-ready.is-visible .perfect-plan-card[b-ab672arpa2],
.home-motion-ready.is-visible .contact-form-shell[b-ab672arpa2] {
    opacity: 0;
    animation: home-fade-up-b-ab672arpa2 0.68s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.home-motion-ready.is-visible .home-review-card:nth-child(1)[b-ab672arpa2],
.home-motion-ready.is-visible .perfect-plan-card:nth-child(1)[b-ab672arpa2] {
    animation-delay: 0.08s;
}

.home-motion-ready.is-visible .home-review-card:nth-child(2)[b-ab672arpa2],
.home-motion-ready.is-visible .perfect-plan-card:nth-child(2)[b-ab672arpa2] {
    animation-delay: 0.16s;
}

.home-motion-ready.is-visible .home-review-card:nth-child(3)[b-ab672arpa2],
.home-motion-ready.is-visible .perfect-plan-card:nth-child(3)[b-ab672arpa2],
.home-motion-ready.is-visible .contact-form-shell[b-ab672arpa2] {
    animation-delay: 0.24s;
}

.home-review-card:hover[b-ab672arpa2] {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px rgba(33, 42, 47, 0.12);
}

.home-review-stars[b-ab672arpa2] {
    margin: 0;
    color: #df9a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.92rem;
}

.home-review-stars i[b-ab672arpa2] {
    line-height: 1;
}

.home-review-card blockquote[b-ab672arpa2] {
    margin: 0;
    line-height: 1.5;
    color: #2b3131;
}

.home-review-author[b-ab672arpa2] {
    margin: 0;
    color: #5f6565;
    font-weight: 650;
    font-size: 0.88rem;
}

.home-review-role[b-ab672arpa2] {
    font-weight: 500;
    font-size: 0.82rem;
    color: #707878;
}

@media (max-width: 860px) {
    .home-whatsapp-join-card[b-ab672arpa2] {
        grid-template-columns: minmax(0, 1fr) minmax(126px, 170px);
        justify-items: stretch;
        padding-right: 1.15rem;
    }

    .home-whatsapp-join-copy[b-ab672arpa2] {
        grid-column: 1;
    }

    .home-whatsapp-join-duck[b-ab672arpa2] {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 150px;
    }

    .home-whatsapp-join-duck img[b-ab672arpa2] {
        bottom: -0.55rem;
        width: clamp(146px, 25vw, 178px);
    }

    .home-whatsapp-join-btn[b-ab672arpa2] {
        grid-column: 1;
        justify-self: start;
    }

    .home-testimonials-header[b-ab672arpa2] {
        align-items: center;
        flex-direction: column;
    }

    .home-testimonials h2[b-ab672arpa2] {
        text-align: center;
        width: 100%;
    }

    .home-review-carousel-shell[b-ab672arpa2] {
        padding-inline: 0;
    }

    .home-review-grid[b-ab672arpa2] {
        grid-auto-columns: 76%;
    }

    .home-review-control[b-ab672arpa2] {
        top: auto;
        bottom: -3.75rem;
        transform: none;
    }

    .home-review-control:hover[b-ab672arpa2] {
        transform: translateY(-1px);
    }

    .home-review-control:disabled:hover[b-ab672arpa2] {
        transform: none;
    }

    .home-review-control-prev[b-ab672arpa2] {
        left: calc(50% - 3.4rem);
    }

    .home-review-control-next[b-ab672arpa2] {
        right: calc(50% - 3.4rem);
    }

    .home-testimonials[b-ab672arpa2] {
        padding-bottom: 4.4rem !important;
    }
}

.contact-section[b-ab672arpa2] {
    margin: 0 auto 0;
    width: 100%;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 1.4rem 0;
    position: relative;
    overflow: hidden;
}

.contact-inner[b-ab672arpa2] {
    width: min(100%, 980px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-title[b-ab672arpa2] {
    margin-bottom: 0.1rem;
    text-align: center;
    grid-column: 1 / -1;
    color: var(--text);
}

.contact-copy h3[b-ab672arpa2] {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.15;
    color: var(--text);
}

.contact-copy p[b-ab672arpa2] {
    color: var(--muted);
    text-align: center;
}

.contact-copy h3[b-ab672arpa2] {
    text-align: center;
}

.contact-form-shell[b-ab672arpa2] {
    border: 2px solid #000000;
    border-radius: 22px;
    background: #ffffff;
    padding: 1rem;
    box-shadow:
        0 16px 30px rgba(243, 154, 50, 0.24),
        0 12px 24px rgba(20, 28, 38, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    width: min(100%, 720px);
    margin-inline: auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.contact-form-shell:hover[b-ab672arpa2] {
    transform: translateY(-2px);
}

.contact-form[b-ab672arpa2] {
    margin: 0;
}

.contact-honeypot[b-ab672arpa2] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-fields-grid[b-ab672arpa2] {
    margin-bottom: 0.75rem;
}

.contact-field[b-ab672arpa2] {
    margin-bottom: 0.35rem;
}

.contact-field .form-label[b-ab672arpa2] {
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #1f2d3d;
}

.contact-field textarea.form-control[b-ab672arpa2] {
    min-height: 140px;
    resize: vertical;
}

.contact-field .validation-message[b-ab672arpa2] {
    color: #b42318;
    font-size: 0.86rem;
    display: block;
    margin-top: 0.25rem;
}

.contact-submit[b-ab672arpa2] {
    margin-top: 0.2rem;
    min-width: 220px;
}

.contact-submit:disabled[b-ab672arpa2] {
    opacity: 0.72;
}

.contact-status[b-ab672arpa2] {
    margin: 0.82rem 0 0;
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
}

.contact-status-success[b-ab672arpa2] {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.contact-status-error[b-ab672arpa2] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.perfect-plan-section[b-ab672arpa2] {
    --perfect-plan-highlight: #d67f12;
    --perfect-plan-surface: #f2d8a4;
    --perfect-plan-surface-soft: #fff7e8;
    margin: 2.4rem auto 0;
    width: 100%;
    border-radius: 0;
    padding: 1.5rem 0 1.7rem;
    color: inherit;
    background: transparent;
    box-shadow: none;
}

.perfect-plan-header[b-ab672arpa2] {
    text-align: center;
    margin-bottom: 1rem;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.perfect-plan-header h2[b-ab672arpa2] {
    color: var(--text);
}

.perfect-plan-header p[b-ab672arpa2] {
    color: var(--muted);
}

.perfect-plan-grid[b-ab672arpa2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
    gap: 1rem;
    align-items: stretch;
    justify-content: center;
    justify-items: center;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.perfect-plan-card[b-ab672arpa2] {
    position: relative;
    width: min(100%, 350px);
    border-radius: 28px;
    border: 1px solid rgba(195, 154, 97, 0.42);
    background: linear-gradient(180deg, #fffdf8 0%, #f8ecd0 100%);
    color: #0d1421;
    padding: 2.15rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.perfect-plan-card.is-featured[b-ab672arpa2] {
    border-color: var(--perfect-plan-highlight);
    box-shadow: 0 16px 30px rgba(214, 127, 18, 0.18);
}

.perfect-plan-card:hover[b-ab672arpa2] {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(20, 28, 38, 0.14);
}

.perfect-plan-badge[b-ab672arpa2] {
    position: absolute;
    top: -0.75rem;
    left: 1rem;
    margin: 0;
    padding: 0.3rem 0.74rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: rgba(138, 79, 0, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.perfect-plan-card h3[b-ab672arpa2] {
    margin: 0 0 0.8rem;
    font-size: clamp(1.42rem, 2.5vw, 2.12rem);
    line-height: 1.14;
}

.perfect-plan-list[b-ab672arpa2] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.58rem;
}

.perfect-plan-list li[b-ab672arpa2] {
    position: relative;
    padding-left: 1.55rem;
    line-height: 1.38;
}

.perfect-plan-list li[b-ab672arpa2]::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.02rem;
    font-size: 1rem;
    color: var(--perfect-plan-highlight);
}

.perfect-plan-options[b-ab672arpa2] {
    margin-top: auto;
    display: grid;
    gap: 0.58rem;
}

.perfect-plan-option[b-ab672arpa2] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.62rem;
    position: relative;
    border: 1px solid rgba(195, 154, 97, 0.36);
    border-radius: 14px;
    background: #fffaf0;
    padding: 0.72rem 0.8rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.perfect-plan-option:hover[b-ab672arpa2] {
    transform: translateY(-1px);
}

.perfect-plan-option.is-selected[b-ab672arpa2] {
    border-color: rgba(214, 127, 18, 0.7);
    background: linear-gradient(180deg, #fff3d9 0%, #f8e1b8 100%);
    box-shadow: 0 8px 18px rgba(214, 127, 18, 0.16);
}

.perfect-plan-option input[b-ab672arpa2] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.perfect-plan-option-indicator[b-ab672arpa2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(195, 154, 97, 0.56);
    background: #ffffff;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.perfect-plan-option.is-selected .perfect-plan-option-indicator[b-ab672arpa2] {
    border-color: var(--perfect-plan-highlight);
    background: #ffffff;
    transform: scale(1.02);
}

.perfect-plan-option.is-selected .perfect-plan-option-indicator[b-ab672arpa2]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: var(--perfect-plan-highlight);
}

.perfect-plan-option-text[b-ab672arpa2] {
    display: grid;
    gap: 0.22rem;
}

.perfect-plan-option-price-line[b-ab672arpa2] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.perfect-plan-option-price-line strong[b-ab672arpa2] {
    font-size: 1.88rem;
    line-height: 1;
}

.perfect-plan-option-price-line span[b-ab672arpa2] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a5764;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.perfect-plan-option-caption[b-ab672arpa2] {
    color: #4a5764;
    font-size: 0.86rem;
    line-height: 1.25;
}

.perfect-plan-option-save-badge[b-ab672arpa2] {
    position: absolute;
    top: 0.44rem;
    right: 0.56rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(243, 154, 50, 0.75);
    background: rgba(243, 154, 50, 0.16);
    color: #8a4f00;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.16rem 0.5rem;
}

.perfect-plan-option.has-save-badge .perfect-plan-option-text[b-ab672arpa2] {
    padding-top: 0.28rem;
    padding-right: 6.1rem;
}

.perfect-plan-select[b-ab672arpa2] {
    margin-top: 0.85rem;
    min-height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #394750;
    background: var(--perfect-plan-surface);
    border: 1px solid rgba(195, 154, 97, 0.48);
    box-shadow: 0 10px 20px rgba(18, 35, 40, 0.14);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.perfect-plan-select.is-linked-selected[b-ab672arpa2] {
    background: var(--perfect-plan-surface);
    border-color: rgba(214, 127, 18, 0.7);
    box-shadow: 0 10px 20px rgba(214, 127, 18, 0.16);
}

.perfect-plan-select:hover[b-ab672arpa2],
.perfect-plan-select:focus-visible[b-ab672arpa2] {
    transform: translateY(-1px);
    background: var(--accent-deep);
    color: #111111;
}

.perfect-plan-select:focus-visible[b-ab672arpa2] {
    outline: 3px solid color-mix(in srgb, #ffffff 68%, var(--perfect-plan-highlight));
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .stories-carousel[b-ab672arpa2] {
        grid-auto-columns: minmax(170px, 42vw);
    }

    .home-review-grid[b-ab672arpa2] {
        grid-auto-columns: 68%;
    }

    .hero-intro[b-ab672arpa2] {
        max-width: 340px;
    }

    .hero-support[b-ab672arpa2] {
        max-width: 280px;
    }
}

@media (max-width: 620px) {
    .stories-carousel-section-ranked[b-ab672arpa2] {
        width: calc(100% - 1rem);
        padding: 0.9rem 0 0.95rem;
    }

    .stories-carousel-section-ranked h2[b-ab672arpa2] {
        font-size: clamp(1.72rem, 8vw, 2.28rem);
    }

    .stories-carousel-section[b-ab672arpa2] {
        padding: 0.18rem 0;
    }

    .stories-carousel-section + .stories-carousel-section[b-ab672arpa2] {
        margin-top: 0.95rem;
        padding-top: 0.84rem;
    }

    .stories-carousel-shell[b-ab672arpa2] {
        overflow-x: clip;
    }

    .home-whatsapp-join[b-ab672arpa2] {
        padding-inline: 0.75rem;
    }

    .home-whatsapp-join-card[b-ab672arpa2] {
        border-radius: 22px;
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 1.08rem 1rem 1.18rem;
        gap: 0.75rem;
    }

    .home-whatsapp-join-card[b-ab672arpa2]::before {
        width: 150px;
        height: 150px;
        top: 0;
        right: 0;
        transform: translate(0, -38%);
    }

    .home-whatsapp-join-card[b-ab672arpa2]::after {
        width: 70px;
        border-radius: 22px 0 0 22px;
    }

    .home-whatsapp-join-copy[b-ab672arpa2] {
        grid-column: auto;
        max-width: none;
    }

    .home-whatsapp-join-copy h2[b-ab672arpa2] {
        font-size: clamp(1.52rem, 7vw, 1.9rem);
    }

    .home-whatsapp-join-copy p:last-child[b-ab672arpa2] {
        font-size: 0.98rem;
        line-height: 1.48;
    }

    .home-whatsapp-join-duck[b-ab672arpa2] {
        grid-column: auto;
        grid-row: auto;
        min-height: 136px;
        order: 2;
    }

    .home-whatsapp-join-duck img[b-ab672arpa2] {
        bottom: -0.35rem;
        width: min(44vw, 172px);
    }

    .home-whatsapp-join-btn[b-ab672arpa2] {
        grid-column: auto;
        justify-self: stretch;
        order: 3;
        width: 100%;
    }

    .perfect-plan-option-save-badge[b-ab672arpa2] {
        top: 0.38rem;
        right: 0.42rem;
        font-size: 0.66rem;
        padding: 0.14rem 0.42rem;
    }

    .perfect-plan-option.has-save-badge .perfect-plan-option-text[b-ab672arpa2] {
        padding-right: 5.25rem;
    }

    .join-promo[b-ab672arpa2] {
        width: calc(100% - 1.5rem);
        border-radius: 18px;
        padding: 0.85rem 0.7rem 0.7rem;
    }

    .join-promo-media img[b-ab672arpa2] {
        border-radius: 14px 14px 0 0;
        width: 92%;
    }

    .join-promo-intro[b-ab672arpa2] {
        font-size: 1.08rem;
    }

    .join-promo-list li[b-ab672arpa2] {
        font-size: 1.03rem;
    }

    .home-social-proof[b-ab672arpa2] {
        margin-bottom: 0.95rem;
        padding-inline: 0.75rem;
    }

    .home-social-proof-grid[b-ab672arpa2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .home-social-proof-item[b-ab672arpa2] {
        width: 100%;
        margin-block: 0;
    }

    .home-social-proof-item:nth-child(3)[b-ab672arpa2] {
        display: none;
    }

    .home-social-proof-copy[b-ab672arpa2] {
        font-size: clamp(0.54rem, 2.2vw, 0.72rem);
    }

    .home-social-proof-number[b-ab672arpa2] {
        font-size: clamp(1.1rem, 5vw, 1.55rem);
    }

    .hero-logo[b-ab672arpa2] {
        width: min(360px, 90%);
        margin-bottom: 0;
    }

    .hero-media img[b-ab672arpa2] {
        margin-top: 0;
    }

    .hero[b-ab672arpa2] {
        padding-top: var(--home-navbar-offset, calc(var(--home-hero-overlap) - 10px));
        padding-bottom: 0.65rem;
    }

    .hero[b-ab672arpa2]::before {
        top: 0.8rem;
        width: 210px;
        height: 210px;
    }

    .hero[b-ab672arpa2]::after {
        top: 3.4rem;
        width: 170px;
        height: 170px;
    }

    .hero-copy[b-ab672arpa2] {
        width: min(100%, 560px);
        margin-top: -3rem;
        padding: 0 0.9rem 0.95rem;
    }

    .hero-copy-text[b-ab672arpa2] {
        width: min(100%, 34rem);
    }

    .hero-title[b-ab672arpa2] {
        margin-bottom: 0.72rem;
        font-size: clamp(1.45rem, 7.2vw, 3rem);
        line-height: 0.99;
    }

    .eyebrow[b-ab672arpa2] {
        font-size: 0.82rem;
    }

    .hero-intro[b-ab672arpa2] {
        font-size: clamp(0.88rem, 3.4vw, 1rem);
        width: auto;
        max-width: 285px;
        white-space: normal;
    }

    .hero-support[b-ab672arpa2] {
        max-width: 285px;
        margin-top: 0.5rem !important;
        font-size: 0.94rem;
    }

    .hero-actions[b-ab672arpa2] {
        gap: 0.55rem;
        width: min(100%, 332px);
        margin-top: 0.88rem;
        margin-bottom: 0.62rem;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .hero-cta-row[b-ab672arpa2] {
        flex-direction: column;
        gap: 0.55rem;
        width: 100%;
    }

    .stories-carousel[b-ab672arpa2] {
        grid-auto-columns: minmax(146px, 44vw);
        gap: 0.72rem;
        padding-inline: var(--home-carousel-edge-space);
        padding-bottom: 0.25rem;
        scroll-padding-inline: var(--home-carousel-edge-space);
    }

    .home-review-grid[b-ab672arpa2] {
        grid-auto-columns: 92%;
    }

    .perfect-plan-section[b-ab672arpa2] {
        padding: 1.15rem 0.72rem 1.2rem;
    }

    .perfect-plan-grid[b-ab672arpa2] {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        justify-items: stretch;
    }

    .perfect-plan-card[b-ab672arpa2] {
        width: 100%;
        border-radius: 22px;
        padding: 1.95rem 0.84rem 0.9rem;
    }

    .home-faq[b-ab672arpa2] {
        gap: 0.8rem;
        padding: 0.85rem;
        border-radius: 20px;
    }

    .home-faq-heading[b-ab672arpa2] {
        gap: 0.45rem;
    }

    .home-faq-kicker[b-ab672arpa2] {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .home-faq-heading h2[b-ab672arpa2] {
        padding: 0.38rem 0.68rem;
        border-radius: 18px;
        font-size: clamp(1.1rem, 5vw, 1.42rem);
        line-height: 1.15;
    }

    .home-faq-item summary[b-ab672arpa2] {
        padding: 0.78rem 0.84rem;
    }

    .home-faq-item p[b-ab672arpa2] {
        padding: 0 0.84rem 0.86rem 2.3rem;
        font-size: 0.92rem;
    }

    .cta[b-ab672arpa2] {
        text-align: center;
        min-width: 0;
        width: min(100%, 300px);
        flex: 0 0 auto;
        min-height: 46px;
        padding: 0.62rem 1rem;
        font-size: 0.9rem;
    }

    .hero-more-link[b-ab672arpa2] {
        font-size: 0.9rem;
    }

    .hero-pricing[b-ab672arpa2] {
        font-size: 0.92rem;
    }

    .join-promo-cta[b-ab672arpa2] {
        padding-right: 0.95rem;
        padding-left: 0.95rem;
        font-size: 0.95rem;
    }

    .contact-section[b-ab672arpa2] {
        padding: 1.15rem 0.72rem;
    }
}

@media (max-width: 360px) {
    .join-promo-cta[b-ab672arpa2] {
        padding-right: 0.78rem;
        padding-left: 0.78rem;
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero[b-ab672arpa2]::before,
    .hero[b-ab672arpa2]::after,
    .hero-visual[b-ab672arpa2],
    .hero-logo-wrap[b-ab672arpa2],
    .hero-media img[b-ab672arpa2],
    .hero-copy > .hero-copy-text[b-ab672arpa2],
    .hero-copy > .eyebrow[b-ab672arpa2],
    .hero-copy > .hero-actions[b-ab672arpa2],
    .hero-copy-text > h1[b-ab672arpa2],
    .hero-copy-text > p[b-ab672arpa2],
    .join-promo-media img[b-ab672arpa2],
    .cta-placeholder[b-ab672arpa2],
    .shimmer-block[b-ab672arpa2],
    .home-page-loading-spinner[b-ab672arpa2],
    .home-motion-ready.home-scroll-reveal[b-ab672arpa2],
    .home-motion-ready.is-visible .home-review-card[b-ab672arpa2],
    .home-motion-ready.is-visible .perfect-plan-card[b-ab672arpa2],
    .home-motion-ready.is-visible .contact-form-shell[b-ab672arpa2] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}
/* /Components/Pages/IntekeningEnBetaling.razor.rz.scp.css */
.billing-page[b-enws006e6k] {
    position: relative;
    isolation: isolate;
    width: min(1160px, 100%);
    margin-inline: auto;
    padding: clamp(0.9rem, 2vw, 1.4rem) clamp(0.9rem, 2.6vw, 1.6rem) clamp(2.2rem, 4vw, 3.2rem);
    box-sizing: border-box;
    display: grid;
    gap: clamp(1.2rem, 2.4vw, 1.9rem);
}

.billing-page[b-enws006e6k]::before {
    content: "";
    position: absolute;
    inset: -1.5rem -100vw -3rem;
    background: #ffffff;
    z-index: -1;
}

.billing-hero[b-enws006e6k] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.85fr);
    gap: clamp(1rem, 2.6vw, 1.8rem);
    align-items: stretch;
    padding: clamp(1.3rem, 3vw, 2.4rem);
    border-radius: 32px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, #dfe6e3);
    background: linear-gradient(180deg, #ffffff 0%, #fcfaf5 100%);
    box-shadow: 0 24px 48px rgba(18, 32, 39, 0.08);
}

.billing-hero[b-enws006e6k]::before {
    content: "";
    position: absolute;
    inset: auto auto -32% -10%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(64, 141, 147, 0.12) 0%, rgba(64, 141, 147, 0) 72%);
    pointer-events: none;
}

.billing-hero[b-enws006e6k]::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -6%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 154, 50, 0.14) 0%, rgba(243, 154, 50, 0) 68%);
    pointer-events: none;
}

.billing-hero-copy[b-enws006e6k],
.billing-hero-panel[b-enws006e6k],
.billing-state-copy[b-enws006e6k],
.billing-panel-heading[b-enws006e6k],
.billing-section-heading[b-enws006e6k],
.billing-plan-card[b-enws006e6k],
.billing-hero-point[b-enws006e6k],
.billing-status-card[b-enws006e6k],
.billing-profile-card[b-enws006e6k] {
    position: relative;
    z-index: 1;
}

.billing-hero-copy[b-enws006e6k] {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.billing-kicker[b-enws006e6k],
.billing-section-kicker[b-enws006e6k] {
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.76rem;
    color: #a56d17;
}

.billing-hero h1[b-enws006e6k] {
    margin: 0;
    color: #132a34;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.04;
    max-width: 12ch;
}

.billing-hero-lead[b-enws006e6k] {
    margin: 0;
    max-width: 58ch;
    color: #51616a;
    line-height: 1.65;
}

.billing-hero-points[b-enws006e6k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.billing-hero-point[b-enws006e6k] {
    display: grid;
    gap: 0.38rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid #e4ebe8;
    background: #ffffff;
    box-shadow: 0 12px 22px rgba(17, 31, 38, 0.05);
}

.billing-hero-point strong[b-enws006e6k] {
    color: #17313c;
    font-size: 0.96rem;
}

.billing-hero-point span[b-enws006e6k] {
    color: #586771;
    font-size: 0.9rem;
    line-height: 1.55;
}

.billing-hero-panel[b-enws006e6k] {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border-radius: 28px;
    border: 1px solid #dbe6e4;
    background: linear-gradient(180deg, #f7fbfc 0%, #eef5f5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.billing-hero-logo[b-enws006e6k] {
    display: block;
    width: min(170px, 100%);
    height: auto;
}

.billing-hero-panel h2[b-enws006e6k] {
    margin: 0;
    color: #13303c;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.1;
}

.billing-hero-panel p[b-enws006e6k] {
    margin: 0;
    color: #56656f;
    line-height: 1.6;
}

.billing-hero-email[b-enws006e6k] {
    font-weight: 700;
    color: #143e4c;
    word-break: break-word;
}

.billing-hero-panel-actions[b-enws006e6k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.billing-state-card[b-enws006e6k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, #d8e1de);
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
    box-shadow: 0 16px 30px rgba(17, 31, 38, 0.06);
}

.billing-state-card h2[b-enws006e6k] {
    margin: 0;
    color: #162a34;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.12;
}

.billing-state-card p:last-child[b-enws006e6k] {
    margin: 0.35rem 0 0;
    color: #5b6971;
    line-height: 1.6;
}

.billing-state-spinner[b-enws006e6k] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: #215f68;
}

.billing-content-grid[b-enws006e6k] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
    gap: 1rem;
    align-items: start;
}

.billing-account-stack[b-enws006e6k] {
    display: grid;
    gap: 1rem;
}

.billing-panel[b-enws006e6k] {
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
    box-shadow: 0 18px 32px rgba(17, 39, 47, 0.12);
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
}

.billing-profile-card[b-enws006e6k] {
    background:
        radial-gradient(115% 130% at 0% 0%, rgba(243, 154, 50, 0.16), transparent 54%),
        rgba(255, 255, 255, 0.96);
}

.billing-email-card[b-enws006e6k] {
    background:
        radial-gradient(110% 140% at 100% 0%, rgba(33, 95, 104, 0.11), transparent 56%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.billing-status-card[b-enws006e6k] {
    overflow: hidden;
    display: grid;
    gap: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
}

.billing-danger-card[b-enws006e6k] {
    display: grid;
    gap: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
    border-color: rgba(33, 95, 104, 0.12);
}

.billing-status-card.is-active[b-enws006e6k] {
    border-color: rgba(31, 112, 65, 0.2);
}

.billing-status-card.is-free[b-enws006e6k] {
    border-color: rgba(33, 95, 104, 0.18);
}

.billing-panel-heading[b-enws006e6k] {
    display: grid;
    gap: 0.42rem;
}

.billing-panel-heading h2[b-enws006e6k],
.billing-section-heading h2[b-enws006e6k] {
    margin: 0;
    color: #162a34;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.1;
}

.billing-panel-heading p:last-child[b-enws006e6k],
.billing-section-heading p:last-child[b-enws006e6k] {
    margin: 0;
    color: #5b6971;
    line-height: 1.65;
}

.billing-profile-form[b-enws006e6k] {
    display: grid;
    gap: 1rem;
}

.billing-email-form[b-enws006e6k] {
    gap: 0.9rem;
}

.billing-profile-form .form-label[b-enws006e6k] {
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: #173f4f;
    font-size: 0.92rem;
}

.billing-profile-form .form-control[b-enws006e6k] {
    min-height: 54px;
    border-radius: 14px;
    border-color: #d6ddd9;
    background: #fffdf8;
    color: #15242c;
    box-shadow: none;
}

.billing-profile-form .form-control:focus[b-enws006e6k] {
    border-color: color-mix(in srgb, var(--accent) 58%, #ffffff);
    background: #ffffff;
    box-shadow: 0 0 0 0.22rem rgba(243, 154, 50, 0.18);
}

.billing-readonly-input[b-enws006e6k] {
    background: #f2f5f6 !important;
    color: #4f5f66;
}

.billing-form-hint[b-enws006e6k] {
    margin-top: 0.45rem;
    color: #64727b;
}

.billing-email-note[b-enws006e6k] {
    margin: 0;
    color: #56656f;
    line-height: 1.6;
}

.billing-modal-backdrop[b-enws006e6k] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(18, 34, 41, 0.46);
    backdrop-filter: blur(6px);
}

.billing-modal[b-enws006e6k] {
    width: min(620px, 100%);
    max-height: min(88vh, 860px);
    overflow: auto;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background:
        radial-gradient(110% 140% at 100% 0%, rgba(33, 95, 104, 0.11), transparent 56%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
    box-shadow: 0 28px 60px rgba(12, 24, 30, 0.28);
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.billing-modal-header[b-enws006e6k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.billing-modal-heading[b-enws006e6k] {
    display: grid;
    gap: 0.42rem;
}

.billing-modal-heading h2[b-enws006e6k] {
    margin: 0;
    color: #162a34;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
}

.billing-modal-heading p:last-child[b-enws006e6k] {
    margin: 0;
    color: #5b6971;
    line-height: 1.65;
}

.billing-modal-close[b-enws006e6k] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #d6ddd9;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #163643;
    font-size: 1.75rem;
    line-height: 1;
}

.billing-modal-close:hover[b-enws006e6k],
.billing-modal-close:focus-visible[b-enws006e6k] {
    background: #f4f1e9;
    border-color: #b9c4bf;
}

.billing-profile-form[b-enws006e6k]  .invalid-feedback {
    margin-top: 0.35rem;
    font-size: 0.83rem;
}

.billing-form-actions[b-enws006e6k] {
    padding-top: 0.15rem;
}

.billing-primary-btn[b-enws006e6k],
.billing-secondary-btn[b-enws006e6k] {
    min-height: 50px;
    border-radius: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
}

.billing-primary-btn[b-enws006e6k] {
    color: #171717;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 12px 24px rgba(214, 127, 18, 0.18);
}

.billing-primary-btn:hover[b-enws006e6k],
.billing-primary-btn:focus-visible[b-enws006e6k] {
    color: #171717;
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

.billing-primary-btn:disabled[b-enws006e6k] {
    color: #171717;
    background: color-mix(in srgb, var(--accent) 72%, #f7d8ab);
    border-color: color-mix(in srgb, var(--accent) 72%, #f7d8ab);
    box-shadow: none;
}

.billing-secondary-btn[b-enws006e6k] {
    color: #163643;
    border-color: #cad5d1;
    background: #ffffff;
}

.billing-secondary-btn:hover[b-enws006e6k],
.billing-secondary-btn:focus-visible[b-enws006e6k] {
    color: #163643;
    background: #f4f1e9;
    border-color: #b9c4bf;
}

.billing-danger-btn[b-enws006e6k] {
    min-height: 50px;
    border-radius: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
    color: #5f6b73;
    border-color: #cad5d1;
    background: #ffffff;
}

.billing-danger-btn:hover[b-enws006e6k],
.billing-danger-btn:focus-visible[b-enws006e6k] {
    color: #5f6b73;
    background: #ffffff;
    border-color: #cad5d1;
}

.billing-profile-status[b-enws006e6k] {
    margin: 0;
    border-radius: 14px;
    font-weight: 700;
}

.billing-modal-status[b-enws006e6k] {
    margin-bottom: 1rem;
}

.billing-status-list[b-enws006e6k] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.72rem;
}

.billing-status-list li[b-enws006e6k] {
    display: flex;
    gap: 0.68rem;
    color: #42535b;
    line-height: 1.6;
}

.billing-status-list li[b-enws006e6k]::before {
    content: "\f00c";
    flex-shrink: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #1f7041;
    margin-top: 0.12rem;
}

.billing-status-card.is-free .billing-status-list li[b-enws006e6k]::before {
    color: #1a6574;
}

.billing-status-actions .btn[b-enws006e6k] {
    width: 100%;
}

.billing-plans[b-enws006e6k] {
    display: grid;
    gap: 1rem;
}

.billing-section-heading[b-enws006e6k] {
    display: grid;
    gap: 0.42rem;
    max-width: 44rem;
}

.billing-section-heading a[b-enws006e6k],
.billing-help a[b-enws006e6k] {
    color: #0f4d61;
    font-weight: 700;
    text-decoration: none;
}

.billing-section-heading a:hover[b-enws006e6k],
.billing-help a:hover[b-enws006e6k] {
    text-decoration: underline;
}

.billing-plan-grid[b-enws006e6k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.billing-plan-card[b-enws006e6k] {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid #e6e1d8;
    background: #ffffff;
    color: #0d1421;
    padding: 1.2rem;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-height: 100%;
    box-shadow: 0 18px 34px rgba(19, 31, 37, 0.06);
}

.billing-plan-card[b-enws006e6k]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #215f68 0%, color-mix(in srgb, #215f68 58%, white) 100%);
}

.billing-plan-card.is-highlighted[b-enws006e6k] {
    border-color: rgba(171, 93, 21, 0.28);
    box-shadow: 0 24px 42px rgba(171, 93, 21, 0.14);
}

.billing-plan-card.is-highlighted[b-enws006e6k]::before {
    background: linear-gradient(90deg, #ab5d15 0%, color-mix(in srgb, #ab5d15 58%, white) 100%);
}

.billing-plan-badge[b-enws006e6k],
.billing-save-badge[b-enws006e6k] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-plan-badge[b-enws006e6k] {
    margin: 0;
    padding: 0.34rem 0.72rem;
    color: #215f68;
    background: rgba(33, 95, 104, 0.08);
    border: 1px solid rgba(33, 95, 104, 0.14);
}

.billing-plan-card.is-highlighted .billing-plan-badge[b-enws006e6k] {
    color: #8a3d00;
    background: rgba(171, 93, 21, 0.1);
    border-color: rgba(171, 93, 21, 0.18);
}

.billing-plan-card h3[b-enws006e6k] {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.12;
    color: #132630;
}

.billing-price[b-enws006e6k] {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    flex-wrap: wrap;
    font-size: clamp(1.9rem, 2.8vw, 2.3rem);
    font-weight: 800;
    color: #132630;
}

.billing-price span[b-enws006e6k] {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5f6b73;
}

.billing-save-badge[b-enws006e6k] {
    margin: 0;
    padding: 0.26rem 0.64rem;
    color: #8a3d00;
    background: rgba(171, 93, 21, 0.1);
    border: 1px solid rgba(171, 93, 21, 0.2);
}

.billing-save-badge-placeholder[b-enws006e6k] {
    visibility: hidden;
}

.billing-description[b-enws006e6k] {
    margin: 0;
    color: #5b6971;
    line-height: 1.6;
}

.billing-plan-actions[b-enws006e6k] {
    margin-top: auto;
}

.billing-plan-actions .btn[b-enws006e6k] {
    width: 100%;
}

body.schink-night-mode .billing-page[b-enws006e6k]::before {
    background: transparent;
}

body.schink-night-mode .billing-hero[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.14);
    background:
        radial-gradient(90% 110% at 0% 0%, rgba(242, 168, 77, 0.1), transparent 58%),
        linear-gradient(180deg, rgba(23, 32, 39, 0.98) 0%, rgba(17, 25, 31, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

body.schink-night-mode .billing-hero[b-enws006e6k]::before {
    background: radial-gradient(circle, rgba(114, 190, 204, 0.16) 0%, rgba(114, 190, 204, 0) 72%);
}

body.schink-night-mode .billing-hero[b-enws006e6k]::after {
    background: radial-gradient(circle, rgba(242, 168, 77, 0.16) 0%, rgba(242, 168, 77, 0) 68%);
}

body.schink-night-mode .billing-hero-panel[b-enws006e6k],
body.schink-night-mode .billing-state-card[b-enws006e6k],
body.schink-night-mode .billing-panel[b-enws006e6k],
body.schink-night-mode .billing-plan-card[b-enws006e6k],
body.schink-night-mode .billing-modal[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.14);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(114, 190, 204, 0.08), transparent 56%),
        linear-gradient(180deg, rgba(23, 32, 39, 0.97) 0%, rgba(17, 25, 31, 0.97) 100%);
    color: var(--text);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

body.schink-night-mode .billing-profile-card[b-enws006e6k] {
    background:
        radial-gradient(115% 130% at 0% 0%, rgba(242, 168, 77, 0.12), transparent 54%),
        rgba(23, 32, 39, 0.96);
}

body.schink-night-mode .billing-status-card[b-enws006e6k] {
    background:
        radial-gradient(100% 120% at 100% 0%, rgba(242, 168, 77, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(23, 32, 39, 0.97) 0%, rgba(17, 25, 31, 0.97) 100%);
}

body.schink-night-mode .billing-danger-card[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.14);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(114, 190, 204, 0.08), transparent 56%),
        linear-gradient(180deg, rgba(23, 32, 39, 0.97) 0%, rgba(17, 25, 31, 0.97) 100%);
}

body.schink-night-mode .billing-status-card.is-active[b-enws006e6k] {
    border-color: rgba(103, 220, 145, 0.24);
}

body.schink-night-mode .billing-status-card.is-free[b-enws006e6k] {
    border-color: rgba(114, 190, 204, 0.24);
}

body.schink-night-mode .billing-hero-logo[b-enws006e6k] {
    filter: brightness(0) invert(1);
}

body.schink-night-mode .billing-kicker[b-enws006e6k],
body.schink-night-mode .billing-section-kicker[b-enws006e6k] {
    color: #f2c57c;
}

body.schink-night-mode .billing-hero h1[b-enws006e6k],
body.schink-night-mode .billing-hero-point strong[b-enws006e6k],
body.schink-night-mode .billing-hero-panel h2[b-enws006e6k],
body.schink-night-mode .billing-state-card h2[b-enws006e6k],
body.schink-night-mode .billing-panel-heading h2[b-enws006e6k],
body.schink-night-mode .billing-section-heading h2[b-enws006e6k],
body.schink-night-mode .billing-modal-heading h2[b-enws006e6k],
body.schink-night-mode .billing-plan-card h3[b-enws006e6k],
body.schink-night-mode .billing-price[b-enws006e6k],
body.schink-night-mode .billing-hero-email[b-enws006e6k] {
    color: #f7f3ea;
}

body.schink-night-mode .billing-hero-lead[b-enws006e6k],
body.schink-night-mode .billing-hero-point span[b-enws006e6k],
body.schink-night-mode .billing-hero-panel p[b-enws006e6k],
body.schink-night-mode .billing-state-card p:last-child[b-enws006e6k],
body.schink-night-mode .billing-panel-heading p:last-child[b-enws006e6k],
body.schink-night-mode .billing-section-heading p:last-child[b-enws006e6k],
body.schink-night-mode .billing-modal-heading p:last-child[b-enws006e6k],
body.schink-night-mode .billing-form-hint[b-enws006e6k],
body.schink-night-mode .billing-email-note[b-enws006e6k],
body.schink-night-mode .billing-status-list li[b-enws006e6k],
body.schink-night-mode .billing-price span[b-enws006e6k],
body.schink-night-mode .billing-description[b-enws006e6k] {
    color: #c5d0d4;
}

body.schink-night-mode .billing-hero-point[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.12);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16);
}

body.schink-night-mode .billing-profile-form .form-label[b-enws006e6k] {
    color: #dbe8e6;
}

body.schink-night-mode .billing-profile-form .form-control[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.18);
    background: #11191f;
    color: #f3f0e8;
}

body.schink-night-mode .billing-profile-form .form-control:focus[b-enws006e6k] {
    border-color: rgba(242, 168, 77, 0.68);
    background: #121c22;
    box-shadow: 0 0 0 0.22rem rgba(242, 168, 77, 0.16);
}

body.schink-night-mode .billing-readonly-input[b-enws006e6k] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #c5d0d4;
}

body.schink-night-mode .billing-secondary-btn[b-enws006e6k] {
    color: #f3f0e8;
    border-color: rgba(234, 229, 216, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

body.schink-night-mode .billing-secondary-btn:hover[b-enws006e6k],
body.schink-night-mode .billing-secondary-btn:focus-visible[b-enws006e6k] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(242, 168, 77, 0.55);
}

body.schink-night-mode .billing-danger-btn[b-enws006e6k] {
    color: #c5d0d4;
    border-color: rgba(234, 229, 216, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

body.schink-night-mode .billing-danger-btn:hover[b-enws006e6k],
body.schink-night-mode .billing-danger-btn:focus-visible[b-enws006e6k] {
    color: #c5d0d4;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 229, 216, 0.22);
}

body.schink-night-mode .billing-modal-backdrop[b-enws006e6k] {
    background: rgba(5, 9, 12, 0.72);
}

body.schink-night-mode .billing-modal-close[b-enws006e6k] {
    border-color: rgba(234, 229, 216, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #f3f0e8;
}

body.schink-night-mode .billing-modal-close:hover[b-enws006e6k],
body.schink-night-mode .billing-modal-close:focus-visible[b-enws006e6k] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(242, 168, 77, 0.55);
}

body.schink-night-mode .billing-section-heading a[b-enws006e6k],
body.schink-night-mode .billing-help a[b-enws006e6k] {
    color: #9dddea;
}

body.schink-night-mode .billing-plan-badge[b-enws006e6k] {
    color: #9dddea;
    background: rgba(157, 221, 234, 0.1);
    border-color: rgba(157, 221, 234, 0.2);
}

body.schink-night-mode .billing-plan-card.is-highlighted[b-enws006e6k] {
    border-color: rgba(242, 168, 77, 0.34);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.3);
}

body.schink-night-mode .billing-plan-card.is-highlighted .billing-plan-badge[b-enws006e6k],
body.schink-night-mode .billing-save-badge[b-enws006e6k] {
    color: #f2c57c;
    background: rgba(242, 168, 77, 0.12);
    border-color: rgba(242, 168, 77, 0.24);
}

body.schink-night-mode .billing-profile-status.alert-success[b-enws006e6k] {
    color: #dff8e7;
    background: rgba(31, 112, 65, 0.22);
    border-color: rgba(103, 220, 145, 0.28);
}

body.schink-night-mode .billing-profile-status.alert-danger[b-enws006e6k] {
    color: #ffe2dd;
    background: rgba(156, 54, 40, 0.24);
    border-color: rgba(246, 122, 98, 0.3);
}

@media (max-width: 1024px) {
    .billing-hero[b-enws006e6k],
    .billing-content-grid[b-enws006e6k] {
        grid-template-columns: 1fr;
    }

    .billing-plan-grid[b-enws006e6k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .billing-hero-points[b-enws006e6k] {
        grid-template-columns: 1fr;
    }

    .billing-page[b-enws006e6k] {
        gap: 1rem;
    }

    .billing-state-card[b-enws006e6k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .billing-form-actions[b-enws006e6k],
    .billing-hero-panel-actions[b-enws006e6k] {
        display: grid !important;
        width: 100%;
    }

    .billing-form-actions .btn[b-enws006e6k],
    .billing-hero-panel-actions .btn[b-enws006e6k] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .billing-hero[b-enws006e6k],
    .billing-panel[b-enws006e6k],
    .billing-plan-card[b-enws006e6k],
    .billing-state-card[b-enws006e6k] {
        border-radius: 22px;
        padding: 1rem;
    }

    .billing-hero h1[b-enws006e6k] {
        max-width: 13ch;
    }

    .billing-modal[b-enws006e6k] {
        border-radius: 22px;
        padding: 1rem;
    }

    .billing-modal-header[b-enws006e6k] {
        gap: 0.75rem;
    }
}
/* /Components/Pages/Karakters.razor.rz.scp.css */
.characters-page[b-sbik37qris] {
    width: min(1120px, 100% - 1.4rem);
    margin-inline: auto;
    display: grid;
    gap: 1.4rem;
}

.characters-hero[b-sbik37qris] {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(1.35rem, 4vw, 2.6rem);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(135deg, #166476 0%, #0f4a59 44%, #0f2f3b 100%);
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 50, 60, 0.22);
}

.characters-hero-copy[b-sbik37qris] {
    max-width: 760px;
    display: grid;
    gap: 0.85rem;
    margin-inline: auto;
    text-align: center;
}

.characters-hero-lineup[b-sbik37qris] {
    width: min(100%, 320px);
    height: auto;
    display: block;
    margin: 0 auto 0.25rem;
}

.characters-eyebrow[b-sbik37qris] {
    margin: 0;
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
}

.characters-hero h1[b-sbik37qris] {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.02;
}

.characters-intro[b-sbik37qris] {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.88);
}

.characters-summary-card[b-sbik37qris] {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    margin-inline: auto;
}

.characters-summary-card a[b-sbik37qris] {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.characters-state[b-sbik37qris] {
    border-radius: 22px;
    padding: 1.15rem 1.2rem;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(17, 57, 70, 0.1);
    box-shadow: 0 12px 32px rgba(16, 46, 55, 0.08);
}

.characters-state h2[b-sbik37qris],
.characters-state p[b-sbik37qris] {
    margin: 0;
}

.characters-state p[b-sbik37qris] {
    margin-top: 0.45rem;
    color: #4f5f67;
}

.characters-state-error[b-sbik37qris] {
    background: #fff0f1;
    border-color: rgba(132, 45, 60, 0.18);
}

.characters-loading-state[b-sbik37qris] {
    width: min(100%, 720px);
    min-height: clamp(15rem, 34vh, 20rem);
    margin: 0.9rem auto 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.characters-loading-indicator[b-sbik37qris] {
    width: min(100%, 320px);
    display: grid;
    justify-items: center;
    gap: 0.95rem;
    padding: 1.5rem 1.25rem;
    border-radius: 28px;
    border: 1px solid rgba(40, 70, 78, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 249, 245, 0.92) 100%);
    box-shadow:
        0 18px 36px rgba(27, 56, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.characters-loading-spinner[b-sbik37qris] {
    position: relative;
    width: 4.35rem;
    height: 4.35rem;
    display: inline-block;
    border-radius: 50%;
    border: 5px solid rgba(49, 122, 129, 0.16);
    border-top-color: #2d8d95;
    border-right-color: #cfbf59;
    box-shadow: 0 10px 24px rgba(45, 141, 149, 0.16);
    animation: characters-loading-spin-b-sbik37qris 0.82s linear infinite;
}

.characters-loading-spinner[b-sbik37qris]::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.86);
    border-top-color: rgba(45, 141, 149, 0.22);
}

.characters-loading-text[b-sbik37qris] {
    color: #203236;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
}

.characters-grid[b-sbik37qris] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.character-card[b-sbik37qris] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
    border-radius: 26px;
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(16, 57, 69, 0.1);
    box-shadow: 0 18px 40px rgba(16, 44, 53, 0.12);
}

.character-card-error[b-sbik37qris] {
    background:
        linear-gradient(180deg, rgba(255, 244, 240, 0.98) 0%, rgba(255, 250, 246, 0.96) 100%);
    border-color: rgba(179, 78, 35, 0.18);
    box-shadow: 0 18px 40px rgba(116, 43, 12, 0.1);
}

.character-card-error .character-card-body[b-sbik37qris] {
    align-items: stretch;
    padding-top: 0.35rem;
    text-align: left;
}

.character-card-error-kicker[b-sbik37qris] {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #93431e;
}

.character-card-error-slug[b-sbik37qris],
.character-card-error-message[b-sbik37qris] {
    margin: 0;
    color: #6a3020;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.character-card-error-slug[b-sbik37qris] {
    font-size: 0.88rem;
    font-weight: 700;
}

.character-card-error-message[b-sbik37qris] {
    font-size: 0.94rem;
}

.character-card-error-details[b-sbik37qris] {
    width: 100%;
    margin-top: 0.1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(147, 67, 30, 0.12);
}

.character-card-error-details summary[b-sbik37qris] {
    cursor: pointer;
    font-weight: 700;
    color: #7b371b;
}

.character-card-error-details pre[b-sbik37qris] {
    margin: 0.6rem 0 0;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #402118;
}

.character-card-mobile-play[b-sbik37qris] {
    display: none;
}

.character-card-clickable[b-sbik37qris] {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.character-card-clickable:hover[b-sbik37qris] {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(16, 44, 53, 0.16);
}

.character-card-clickable:focus-visible[b-sbik37qris] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 4px;
}

.character-card.is-locked[b-sbik37qris] {
    background:
        linear-gradient(180deg, rgba(28, 55, 64, 0.88) 0%, rgba(31, 71, 82, 0.84) 100%);
    color: #f4f8f9;
    cursor: pointer;
}

.character-card.is-locked.is-shaking[b-sbik37qris] {
    animation: character-card-locked-shake-b-sbik37qris 520ms ease-in-out;
}

.character-card-media[b-sbik37qris] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 0.65rem;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(43, 94, 112, 0.12), rgba(19, 31, 35, 0.08));
}

.character-card.is-locked .character-card-media[b-sbik37qris] {
    background: linear-gradient(180deg, rgba(143, 185, 196, 0.18), rgba(42, 73, 84, 0.18));
}

.character-card-image[b-sbik37qris] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0.2rem;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 18px;
}

.character-card-badge[b-sbik37qris] {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #103c49;
    display: grid;
    place-items: center;
    font-size: 0.92rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}

.character-card-audio-trigger[b-sbik37qris] {
    position: absolute;
    border: none;
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.character-card-audio-trigger:hover:not(:disabled)[b-sbik37qris] {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.character-card-audio-trigger:focus-visible[b-sbik37qris] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 2px;
}

.character-card-audio-trigger:disabled[b-sbik37qris] {
    cursor: not-allowed;
    opacity: 0.7;
}

.character-card-audio-trigger[b-sbik37qris]::before,
.character-card-audio-trigger[b-sbik37qris]::after {
    content: "";
    position: absolute;
    inset: -0.18rem;
    border-radius: 999px;
    border: 2px solid rgba(243, 154, 50, 0.5);
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
}

.character-card-audio-trigger.is-playing[b-sbik37qris] {
    background: #f39a32;
    color: #1d1306;
    box-shadow: 0 14px 26px rgba(243, 154, 50, 0.32);
    animation: character-card-speaker-bob-b-sbik37qris 680ms ease-in-out infinite;
}

.character-card-audio-trigger.is-playing i[b-sbik37qris] {
    animation: character-card-speaker-wiggle-b-sbik37qris 560ms ease-in-out infinite;
}

.character-card-audio-trigger.is-playing[b-sbik37qris]::before {
    animation: character-card-speaker-wave-b-sbik37qris 1.1s ease-out infinite;
}

.character-card-audio-trigger.is-playing[b-sbik37qris]::after {
    animation: character-card-speaker-wave-b-sbik37qris 1.1s ease-out 220ms infinite;
}

.character-card.is-locked .character-card-badge[b-sbik37qris] {
    background: rgba(243, 154, 50, 0.92);
    color: #1b1207;
}

.character-card-badge.is-slamming[b-sbik37qris] {
    animation: character-card-lock-slam-b-sbik37qris 360ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
    transform-origin: center center;
}

.character-card-body[b-sbik37qris] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 0.35rem 0.35rem;
    flex: 1 1 auto;
    text-align: center;
}

.character-card-body h2[b-sbik37qris] {
    margin: 0;
    font-size: 1.26rem;
    line-height: 1.15;
}

.character-card-summary[b-sbik37qris],
.character-card-unlock-hint[b-sbik37qris] {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.58;
}

.character-card-summary[b-sbik37qris] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-card.is-locked .character-card-summary[b-sbik37qris],
.character-card.is-locked .character-card-unlock-hint[b-sbik37qris] {
    color: rgba(244, 248, 249, 0.84);
}

.character-detail-row[b-sbik37qris] {
    display: grid;
    gap: 0.18rem;
}

.character-detail-row dt[b-sbik37qris] {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d3540;
}

.character-detail-row dd[b-sbik37qris] {
    margin: 0;
    color: #26373e;
    line-height: 1.5;
}

.character-related-stories[b-sbik37qris] {
    display: grid;
    gap: 0.55rem;
}

.character-related-stories p[b-sbik37qris] {
    margin: 0;
    font-weight: 700;
}

.character-story-links[b-sbik37qris] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.character-story-links a[b-sbik37qris],
.character-card-cta[b-sbik37qris] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    border: none;
    padding: 0.7rem 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.character-story-links a[b-sbik37qris] {
    background: rgba(15, 74, 89, 0.08);
    color: #104a58;
}

.character-card-cta[b-sbik37qris] {
    background: #f39a32;
    color: #1d1306;
    box-shadow: 0 14px 26px rgba(243, 154, 50, 0.28);
    align-self: center;
    margin-top: auto;
    gap: 0.55rem;
}

.character-card.is-locked .character-card-cta[b-sbik37qris] {
    background: #8dc66f;
    color: #113420;
    box-shadow: 0 14px 26px rgba(141, 198, 111, 0.26);
}

.character-card-cta:disabled[b-sbik37qris] {
    cursor: wait;
    transform: none;
}

.character-card-cta-spinner[b-sbik37qris] {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(17, 52, 32, 0.25);
    border-top-color: currentColor;
    animation: character-card-cta-spin-b-sbik37qris 0.8s linear infinite;
}

.character-story-links a:hover[b-sbik37qris],
.character-card-cta:hover[b-sbik37qris] {
    transform: translateY(-1px);
}

.character-card-cta:focus-visible[b-sbik37qris],
.character-story-links a:focus-visible[b-sbik37qris] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 3px;
}

.character-profile-popup-backdrop[b-sbik37qris] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(7, 55, 66, 0.52);
    backdrop-filter: blur(7px);
}

.character-profile-popup-card[b-sbik37qris] {
    position: relative;
    width: min(92vw, 420px);
    max-height: min(86vh, 820px);
    overflow: auto;
    background: #ffffff;
    border-radius: 28px;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.character-profile-popup-close[b-sbik37qris] {
    position: sticky;
    top: 0.85rem;
    margin-left: auto;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #c63b36;
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.character-profile-popup-close:hover[b-sbik37qris],
.character-profile-popup-close:focus-visible[b-sbik37qris] {
    color: #a92c28;
}

.character-profile-popup-image-button[b-sbik37qris] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0.25rem auto 0.8rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    border-radius: 28px;
    cursor: pointer;
    transform-origin: center bottom;
    transition: transform 0.18s ease;
}

.character-profile-popup-image-button:focus-visible[b-sbik37qris] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 4px;
}

.character-profile-popup-image-button.is-celebrating[b-sbik37qris] {
    animation: character-profile-popup-image-celebrate-b-sbik37qris 920ms ease-in-out;
}

.character-profile-popup-image[b-sbik37qris] {
    width: min(100%, 230px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 28px;
    display: block;
    transform-origin: center bottom;
    animation: story-access-popup-image-pop-b-sbik37qris 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both,
        story-access-popup-image-wiggle-b-sbik37qris 5s ease-in-out 520ms infinite;
    filter: drop-shadow(0 16px 26px rgba(16, 44, 53, 0.14));
    transition: transform 0.18s ease, filter 0.18s ease;
}

.character-profile-popup-image-button:hover .character-profile-popup-image[b-sbik37qris] {
    transform: scale(1.03);
    filter: drop-shadow(0 18px 30px rgba(16, 44, 53, 0.18));
}

.character-profile-popup-image-button.is-celebrating .character-profile-popup-image[b-sbik37qris] {
    filter: drop-shadow(0 18px 30px rgba(16, 44, 53, 0.18)) drop-shadow(0 0 12px rgba(243, 154, 50, 0.12));
}

.character-profile-popup-card h2[b-sbik37qris] {
    margin: 0;
    color: #1f1f1f;
    font-size: clamp(1.75rem, 4.4vw, 2rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.character-profile-popup-summary[b-sbik37qris] {
    margin: 0.5rem auto 0;
    max-width: 300px;
    color: #505050;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 500;
}

.character-profile-popup-content[b-sbik37qris] {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
    text-align: left;
}

.character-profile-popup-details[b-sbik37qris] {
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.character-profile-popup-panel[b-sbik37qris] {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: #f8f6ef;
    border: 1px solid #e4decf;
    box-shadow: 0 8px 18px rgba(33, 42, 47, 0.06);
}

@keyframes characters-loading-spin-b-sbik37qris {
    to {
        transform: rotate(360deg);
    }
}

.character-profile-popup-panel-highlight[b-sbik37qris] {
    background: linear-gradient(180deg, rgba(99, 176, 194, 0.16) 0%, rgba(242, 216, 164, 0.22) 100%);
    border-color: rgba(64, 141, 147, 0.22);
}

.character-profile-popup-panel .character-detail-row:not(:last-child)[b-sbik37qris] {
    padding-bottom: 0.72rem;
    border-bottom: 1px solid rgba(29, 53, 64, 0.08);
}

.character-profile-popup-details .character-detail-row dt[b-sbik37qris] {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #183d49;
}

.character-profile-popup-details .character-detail-row dd[b-sbik37qris] {
    font-size: 0.98rem;
    line-height: 1.55;
}

.character-friend-row dd.character-friend-list[b-sbik37qris] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.character-friend-row dd.character-friend-other[b-sbik37qris] {
    margin: 0.5rem 0 0;
    text-align: center;
}

.character-friend-other-label[b-sbik37qris] {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #5a6f78;
    text-transform: none;
}

.character-friend-other-names[b-sbik37qris] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #26373e;
}

.character-friend-item[b-sbik37qris] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 64px;
    text-align: center;
}

.character-friend-button:focus-visible[b-sbik37qris] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 4px;
    border-radius: 16px;
}

.character-friend-image[b-sbik37qris] {
    width: min(100%, 40px);
    max-width: 40px;
    height: auto;
    display: block;
    object-fit: contain;
}

.character-friend-item.is-shuffling[b-sbik37qris] {
    animation: character-friend-image-bop-b-sbik37qris 900ms cubic-bezier(0.22, 0.88, 0.34, 1.12);
}

.character-friend-name[b-sbik37qris] {
    font-size: 0.76rem;
    line-height: 1.2;
    color: #26373e;
}

.character-profile-popup-related-stories[b-sbik37qris] {
    border-top: 1px solid rgba(16, 57, 69, 0.1);
    padding-top: 0.9rem;
    text-align: center;
}

.character-profile-popup-related-stories .character-story-links[b-sbik37qris] {
    justify-content: center;
}

.character-profile-popup-related-stories .character-story-links a.character-profile-story-link[b-sbik37qris] {
    width: min(100%, 160px);
    max-width: 200px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: center;
    box-shadow: none;
}

.character-profile-popup-related-stories .character-story-links a.character-profile-story-link:hover[b-sbik37qris] {
    transform: translateY(-2px);
    box-shadow: none;
}

.character-profile-popup-related-stories .character-story-links a.character-profile-story-link span[b-sbik37qris] {
    font-size: 0.8rem;
    line-height: 1.25;
}

.character-profile-story-cover[b-sbik37qris] {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(16, 44, 53, 0.12);
}

@media (min-width: 1024px) {
    .character-profile-popup-card[b-sbik37qris] {
        width: min(88vw, 640px);
    }

    .character-profile-popup-image[b-sbik37qris] {
        width: min(100%, 320px);
    }
}

@keyframes character-card-cta-spin-b-sbik37qris {
    to {
        transform: rotate(360deg);
    }
}

@keyframes character-card-locked-shake-b-sbik37qris {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px) rotate(-1deg);
    }

    40% {
        transform: translateX(5px) rotate(1deg);
    }

    60% {
        transform: translateX(-4px) rotate(-0.7deg);
    }

    80% {
        transform: translateX(4px) rotate(0.7deg);
    }
}

@keyframes character-card-lock-slam-b-sbik37qris {
    0% {
        transform: translateY(-10px) scale(1.12);
    }

    55% {
        transform: translateY(0) scale(0.88);
    }

    75% {
        transform: translateY(-2px) scale(1.02);
    }

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

@keyframes character-card-speaker-bob-b-sbik37qris {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    35% {
        transform: translateY(-1px) scale(1.05);
    }

    70% {
        transform: translateY(0) scale(0.98);
    }
}

@keyframes character-card-speaker-wiggle-b-sbik37qris {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-8deg) scale(1.04);
    }

    55% {
        transform: rotate(9deg) scale(1.08);
    }

    80% {
        transform: rotate(-4deg) scale(1.02);
    }
}

@keyframes character-card-speaker-wave-b-sbik37qris {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }

    30% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes story-access-popup-image-pop-b-sbik37qris {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    65% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes story-access-popup-image-wiggle-b-sbik37qris {
    0%,
    84%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    88% {
        transform: scale(1) rotate(-2deg);
    }

    92% {
        transform: scale(1) rotate(2.2deg);
    }

    96% {
        transform: scale(1) rotate(-1.6deg);
    }

    98% {
        transform: scale(1) rotate(1deg);
    }
}

@keyframes character-profile-popup-image-celebrate-b-sbik37qris {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    18% {
        transform: translateY(-1px) scale(1.01) rotate(-1.4deg);
    }

    38% {
        transform: translateY(-2px) scale(1.015) rotate(1.8deg);
    }

    58% {
        transform: translateY(-1px) scale(1.012) rotate(-1.3deg);
    }

    78% {
        transform: translateY(0) scale(1.006) rotate(0.9deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes character-friend-image-bop-b-sbik37qris {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate3d(-6px, -3px, 0) rotate(-7deg) scale(1.07);
    }

    45% {
        transform: translate3d(7px, -10px, 0) rotate(8deg) scale(1.14);
    }

    68% {
        transform: translate3d(-5px, -4px, 0) rotate(-5deg) scale(1.06);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}

@media (max-width: 640px) {
    .characters-page[b-sbik37qris] {
        width: min(100% - 1rem, 100%);
    }

    .characters-loading-state[b-sbik37qris] {
        min-height: clamp(13rem, 30vh, 17rem);
        padding-inline: 0.8rem;
    }

    .characters-loading-indicator[b-sbik37qris] {
        padding: 1.35rem 1rem;
        border-radius: 24px;
    }

    .characters-loading-spinner[b-sbik37qris] {
        width: 3.85rem;
        height: 3.85rem;
    }

    .characters-hero-lineup[b-sbik37qris] {
        width: min(100%, 240px);
    }

    .characters-grid[b-sbik37qris] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .character-card-body[b-sbik37qris] {
        gap: 0.6rem;
        padding: 0.85rem;
        align-items: center;
        text-align: center;
    }

    .character-card-body h2[b-sbik37qris] {
        font-size: 1.05rem;
    }

    .character-card-summary[b-sbik37qris] {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .character-card-summary[b-sbik37qris],
    .character-card-cta[b-sbik37qris] {
        display: none;
    }

    .character-card-mobile-play[b-sbik37qris] {
        position: absolute;
        right: 0.7rem;
        bottom: 0.7rem;
        width: 1.9rem;
        height: 1.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: #f39a32;
        color: #1d1306;
        font-size: 0.76rem;
        box-shadow: 0 10px 18px rgba(243, 154, 50, 0.28);
        cursor: pointer;
        z-index: 2;
    }

    .character-card.is-locked .character-card-mobile-play[b-sbik37qris] {
        background: #8dc66f;
        color: #113420;
        box-shadow: 0 10px 18px rgba(141, 198, 111, 0.26);
    }

    .character-card-mobile-play:disabled[b-sbik37qris] {
        cursor: wait;
        opacity: 0.72;
    }

    .character-card-mobile-play:focus-visible[b-sbik37qris] {
        outline: 3px solid rgba(243, 154, 50, 0.45);
        outline-offset: 2px;
    }

    .character-card-badge[b-sbik37qris] {
        top: 0.7rem;
        right: 0.7rem;
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.76rem;
    }

    .character-card-cta[b-sbik37qris] {
        width: 100%;
        padding-inline: 0.8rem;
        font-size: 0.92rem;
    }

    .characters-summary-card[b-sbik37qris] {
        border-radius: 18px;
    }

    .character-profile-popup-card[b-sbik37qris] {
        width: min(94vw, 420px);
        padding: 1.3rem 1rem 1.1rem;
    }

    .character-profile-popup-summary[b-sbik37qris] {
        font-size: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .characters-grid[b-sbik37qris] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .character-card[b-sbik37qris] {
        padding: 0.75rem;
        border-radius: 22px;
    }

    .character-card-media[b-sbik37qris] {
        padding: 0.5rem;
        border-radius: 18px;
    }

    .character-card-image[b-sbik37qris] {
        padding: 0.1rem;
    }

    .character-card-body[b-sbik37qris] {
        gap: 0.5rem;
        padding: 0.8rem 0.7rem 0.2rem;
        align-items: center;
        text-align: center;
    }

    .character-card-body h2[b-sbik37qris] {
        font-size: 1rem;
        line-height: 1.12;
    }

    .character-card-summary[b-sbik37qris],
    .character-card-cta[b-sbik37qris] {
        display: none;
    }

    .character-card-mobile-play[b-sbik37qris] {
        position: absolute;
        right: 0.65rem;
        bottom: 0.65rem;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: #f39a32;
        color: #1d1306;
        font-size: 0.8rem;
        box-shadow: 0 10px 18px rgba(243, 154, 50, 0.28);
        cursor: pointer;
        z-index: 2;
    }

    .character-card.is-locked .character-card-mobile-play[b-sbik37qris] {
        background: #8dc66f;
        color: #113420;
        box-shadow: 0 10px 18px rgba(141, 198, 111, 0.26);
    }

    .character-card-mobile-play:disabled[b-sbik37qris] {
        cursor: wait;
        opacity: 0.72;
    }

    .character-card-mobile-play:focus-visible[b-sbik37qris] {
        outline: 3px solid rgba(243, 154, 50, 0.45);
        outline-offset: 2px;
    }

    .character-card-badge[b-sbik37qris] {
        top: 0.7rem;
        right: 0.7rem;
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .character-card-badge.is-slamming[b-sbik37qris],
    .character-card.is-locked.is-shaking[b-sbik37qris],
    .character-profile-popup-image[b-sbik37qris],
    .character-card-audio-trigger.is-playing[b-sbik37qris],
    .character-card-audio-trigger.is-playing i[b-sbik37qris],
    .character-card-audio-trigger.is-playing[b-sbik37qris]::before,
    .character-card-audio-trigger.is-playing[b-sbik37qris]::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.auth-shell[b-bq534ed5t4] {
    width: min(980px, 100%);
    margin: 1.2rem auto 0;
    padding-inline: clamp(0.9rem, 2vw, 1.5rem);
    box-sizing: border-box;
}

.auth-frame[b-bq534ed5t4] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
    border: 1px solid color-mix(in srgb, var(--line) 76%, #fff);
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(95% 120% at 10% 5%, rgba(245, 169, 78, 0.26), transparent 58%),
        radial-gradient(90% 110% at 95% 92%, rgba(77, 149, 171, 0.24), transparent 62%),
        linear-gradient(125deg, rgba(254, 251, 243, 0.9) 0%, rgba(243, 250, 251, 0.9) 100%);
    box-shadow:
        0 28px 56px rgba(19, 47, 56, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.auth-aside[b-bq534ed5t4] {
    padding: 2rem;
    display: grid;
    align-content: start;
    gap: 0.85rem;
}

.auth-logo[b-bq534ed5t4] {
    width: min(185px, 100%);
    height: auto;
}

.auth-kicker[b-bq534ed5t4] {
    margin: 0.45rem 0 0;
    color: #0f6178;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.auth-aside h1[b-bq534ed5t4] {
    margin: 0;
    color: #123d4d;
    line-height: 1.1;
    font-size: clamp(2rem, 4vw, 2.7rem);
}

.auth-intro[b-bq534ed5t4] {
    margin: 0.2rem 0 0.3rem;
    color: color-mix(in srgb, var(--text) 80%, #345463);
    max-width: 36ch;
}

.auth-points[b-bq534ed5t4] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.auth-points li[b-bq534ed5t4] {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(17, 76, 93, 0.14);
    border-radius: 999px;
    padding: 0.48rem 0.8rem;
    color: #0f4d61;
    font-weight: 600;
    width: fit-content;
}

.auth-card[b-bq534ed5t4] {
    background: rgba(255, 255, 255, 0.9);
    border-left: 1px solid color-mix(in srgb, var(--line) 74%, #fff);
    padding: 1.8rem;
    display: grid;
    align-content: center;
    gap: 0.8rem;
}

.login-kicker[b-bq534ed5t4] {
    margin: 0;
    display: inline-block;
    color: #1f5e72;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.login-intro[b-bq534ed5t4] {
    margin: 0;
    color: color-mix(in srgb, var(--text) 74%, #254958);
    font-size: 0.97rem;
}

.login-form[b-bq534ed5t4] {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, white);
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem;
    box-shadow: 0 16px 28px rgba(20, 56, 73, 0.1);
}

.login-field[b-bq534ed5t4] {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.82rem;
}

.login-field label[b-bq534ed5t4] {
    font-weight: 700;
    color: color-mix(in srgb, var(--ink) 88%, #114655);
    font-size: 0.9rem;
}

.login-field .validation-message[b-bq534ed5t4] {
    color: #b42318;
    font-size: 0.83rem;
}

.login-helper-row[b-bq534ed5t4] {
    display: flex;
    justify-content: flex-end;
    margin: -0.15rem 0 0.78rem;
}

.login-inline-link[b-bq534ed5t4] {
    color: #0f4d61;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.login-inline-link:hover[b-bq534ed5t4] {
    text-decoration: underline;
}

.login-actions[b-bq534ed5t4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.login-submit[b-bq534ed5t4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 1rem;
    background: linear-gradient(135deg, #2f8a54 0%, #1f7041 100%);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    padding: 0.78rem 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(27, 112, 72, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
}

.login-submit:hover:not(:disabled)[b-bq534ed5t4] {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(27, 112, 72, 0.3);
}

.login-submit-secondary[b-bq534ed5t4] {
    background: linear-gradient(135deg, #17677d 0%, #0f4f63 100%);
    box-shadow: 0 10px 20px rgba(18, 88, 112, 0.26);
}

.login-submit-secondary:hover:not(:disabled)[b-bq534ed5t4] {
    box-shadow: 0 14px 24px rgba(18, 88, 112, 0.3);
}

.login-submit-google[b-bq534ed5t4] {
    margin-top: 0.7rem;
    min-height: 44px;
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.login-submit-google:hover:not(:disabled)[b-bq534ed5t4] {
    transform: none;
    background: #f8f9fa;
    box-shadow: 0 2px 3px rgba(60, 64, 67, 0.3), 0 3px 6px 2px rgba(60, 64, 67, 0.15);
}

.login-submit-google:active:not(:disabled)[b-bq534ed5t4] {
    background: #f1f3f4;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.google-brand-icon[b-bq534ed5t4] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.login-submit:disabled[b-bq534ed5t4] {
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.login-status[b-bq534ed5t4] {
    margin: 0.82rem 0 0;
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
}

.login-status-success[b-bq534ed5t4] {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.login-status-error[b-bq534ed5t4] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.login-link[b-bq534ed5t4] {
    display: inline-flex;
    width: fit-content;
    color: #0f4d61;
    text-decoration: none;
    font-weight: 700;
}

.login-link:hover[b-bq534ed5t4] {
    text-decoration: underline;
}

body.schink-night-mode .auth-frame[b-bq534ed5t4] {
    border-color: rgba(234, 229, 216, 0.14);
    background:
        radial-gradient(95% 120% at 10% 5%, rgba(243, 154, 50, 0.2), transparent 58%),
        radial-gradient(90% 110% at 95% 92%, rgba(77, 149, 171, 0.2), transparent 62%),
        linear-gradient(125deg, rgba(22, 34, 40, 0.98) 0%, rgba(16, 25, 31, 0.98) 100%);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.schink-night-mode .auth-aside h1[b-bq534ed5t4] {
    color: #f3f0e8;
}

body.schink-night-mode .auth-intro[b-bq534ed5t4] {
    color: #d4dee1;
}

body.schink-night-mode .auth-points li[b-bq534ed5t4] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(234, 229, 216, 0.14);
    color: #e4eef0;
}

body.schink-night-mode .auth-card[b-bq534ed5t4] {
    background: rgba(17, 24, 29, 0.92);
    border-left-color: rgba(234, 229, 216, 0.12);
}

body.schink-night-mode .login-kicker[b-bq534ed5t4] {
    color: #8ecfdf;
}

body.schink-night-mode .login-intro[b-bq534ed5t4] {
    color: #d2dadd;
}

body.schink-night-mode .login-form[b-bq534ed5t4] {
    border-color: rgba(234, 229, 216, 0.12);
    background: rgba(10, 16, 20, 0.62);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24);
}

body.schink-night-mode .login-field label[b-bq534ed5t4],
body.schink-night-mode .login-inline-link[b-bq534ed5t4],
body.schink-night-mode .login-link[b-bq534ed5t4] {
    color: #9ad8e6;
}

body.schink-night-mode .login-submit-google[b-bq534ed5t4] {
    background: #f4f6f8;
    color: #2c3136;
    border-color: rgba(255, 255, 255, 0.18);
}

body.schink-night-mode .login-submit-google:hover:not(:disabled)[b-bq534ed5t4] {
    background: #ffffff;
}

@media (max-width: 900px) {
    .auth-frame[b-bq534ed5t4] {
        grid-template-columns: 1fr;
    }

    .auth-card[b-bq534ed5t4] {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--line) 74%, #fff);
    }

    body.schink-night-mode .auth-card[b-bq534ed5t4] {
        border-top-color: rgba(234, 229, 216, 0.12);
    }
}

@media (max-width: 620px) {
    .auth-shell[b-bq534ed5t4] {
        margin-top: 0.7rem;
    }

    .auth-aside[b-bq534ed5t4],
    .auth-card[b-bq534ed5t4] {
        padding: 1rem;
    }

    .auth-aside[b-bq534ed5t4] {
        gap: 0;
    }

    .auth-aside .auth-logo[b-bq534ed5t4],
    .auth-aside .auth-kicker[b-bq534ed5t4],
    .auth-aside .auth-intro[b-bq534ed5t4],
    .auth-aside .auth-points[b-bq534ed5t4] {
        display: none;
    }

    .auth-aside h1[b-bq534ed5t4] {
        margin: 0;
        text-align: center;
        font-size: clamp(1.7rem, 8vw, 2.1rem);
    }

    .auth-points li[b-bq534ed5t4] {
        width: 100%;
        border-radius: 14px;
    }

    .login-form[b-bq534ed5t4] {
        padding: 0.82rem;
    }

    .login-helper-row[b-bq534ed5t4] {
        justify-content: center;
    }

    .login-actions[b-bq534ed5t4] {
        grid-template-columns: 1fr;
    }

    .login-link[b-bq534ed5t4] {
        margin-inline: auto;
        text-align: center;
    }
}
/* /Components/Pages/Luister.razor.rz.scp.css */
.luister-page-shell[b-j2297mxrej] {
    --luister-first-screen-reserve: clamp(17.5rem, 45svh, 20rem);
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 1rem max(0.9rem, calc((100vw - 1080px) / 2 + 0.9rem)) 0;
    background:
        linear-gradient(180deg, rgba(64, 141, 147, 0.18) 0%, rgba(79, 157, 179, 0.14) 18%, rgba(212, 207, 105, 0.2) 46%, rgba(239, 239, 239, 0.88) 78%, #efefef 100%);
}

.luister-page-shell[b-j2297mxrej]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(64, 141, 147, 0.22) 0%,
            rgba(64, 141, 147, 0.18) 24%,
            rgba(79, 157, 179, 0.12) 38%,
            rgba(212, 207, 105, 0.18) 58%,
            rgba(239, 239, 239, 0) 82%
        );
    opacity: 0.92;
    pointer-events: none;
}

.luister-page-shell > *[b-j2297mxrej] {
    position: relative;
    z-index: 1;
}

.gratis-hero[b-j2297mxrej] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
    width: min(100%, 980px);
    margin-inline: auto;
    align-items: center;
    justify-items: center;
    height: auto;
    max-height: min(520px, calc(100svh - var(--luister-first-screen-reserve)));
    padding-block: clamp(0.25rem, 1.2vh, 0.6rem);
}

.gratis-hero-copy[b-j2297mxrej] {
    max-width: 72ch;
    margin-inline: auto;
    text-align: center;
}

.gratis-banner[b-j2297mxrej] {
    width: auto;
    max-height: min(500px, calc(100svh - var(--luister-first-screen-reserve)));
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
}

.luister-search-section[b-j2297mxrej] {
    width: min(100%, 980px);
    margin: 0 auto 1.15rem;
    padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 4vw, 2.25rem);
    box-sizing: border-box;
}

.luister-search-form[b-j2297mxrej] {
    width: min(100%, 520px);
    min-height: 52px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    border-radius: 16px;
    border: 3px solid #2e3238;
    background: #f9fafb;
    padding: 0 0.9rem;
    box-shadow: 0 10px 22px rgba(17, 39, 45, 0.08);
}

.luister-search-icon[b-j2297mxrej] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #262a31;
}

.luister-search-icon i[b-j2297mxrej] {
    width: 17px;
    height: 17px;
    font-size: 17px;
    line-height: 1;
}

.luister-search-input[b-j2297mxrej] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    padding: 0 0.08rem;
    background: transparent;
    color: #11161f;
    font: inherit;
}

.luister-search-input[b-j2297mxrej]::placeholder {
    color: color-mix(in srgb, var(--muted) 85%, #646b71);
}

.luister-search-input:focus-visible[b-j2297mxrej] {
    outline: none;
}

h1[b-j2297mxrej] {
    margin: 0;
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
}

.section-block[b-j2297mxrej] {
    margin-top: 0.5rem;
}

.luister-loading-state[b-j2297mxrej] {
    width: min(100%, 720px);
    min-height: clamp(15rem, 34vh, 20rem);
    margin: 0.9rem auto 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.luister-loading-indicator[b-j2297mxrej] {
    width: min(100%, 320px);
    display: grid;
    justify-items: center;
    gap: 0.95rem;
    padding: 1.5rem 1.25rem;
    border-radius: 28px;
    border: 1px solid rgba(40, 70, 78, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 249, 245, 0.92) 100%);
    box-shadow:
        0 18px 36px rgba(27, 56, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.luister-loading-spinner[b-j2297mxrej] {
    position: relative;
    width: 4.35rem;
    height: 4.35rem;
    display: inline-block;
    border-radius: 50%;
    border: 5px solid rgba(49, 122, 129, 0.16);
    border-top-color: #2d8d95;
    border-right-color: #cfbf59;
    box-shadow: 0 10px 24px rgba(45, 141, 149, 0.16);
    animation: luister-loading-spin-b-j2297mxrej 0.82s linear infinite;
}

.luister-loading-spinner[b-j2297mxrej]::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.86);
    border-top-color: rgba(45, 141, 149, 0.22);
}

.luister-loading-text[b-j2297mxrej] {
    color: #203236;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
}

.luister-empty-state[b-j2297mxrej] {
    width: min(100%, 720px);
    margin: 0.9rem auto 0;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--line) 90%, #b9b7ae);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
}

.luister-stories-section + .luister-stories-section[b-j2297mxrej] {
    margin-top: 1.1rem;
}

.luister-whatsapp-join[b-j2297mxrej] {
    width: min(100%, 980px);
    margin: 1.5rem auto 2rem;
    display: flex;
    justify-content: center;
    padding-inline: 0.9rem;
    box-sizing: border-box;
}

.luister-whatsapp-join-btn[b-j2297mxrej] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.68rem;
    min-height: 52px;
    padding: 0.84rem 1.3rem;
    border-radius: 999px;
    border: 1px solid rgba(18, 140, 126, 0.3);
    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(10, 84, 70, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.luister-whatsapp-join-btn i[b-j2297mxrej] {
    font-size: 1.3rem;
    line-height: 1;
}

.luister-whatsapp-join-btn:hover[b-j2297mxrej] {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 32px rgba(10, 84, 70, 0.24);
}

.luister-whatsapp-join-btn:focus-visible[b-j2297mxrej] {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.stories-carousel-section h2[b-j2297mxrej],
.stories-carousel-section .section-intro[b-j2297mxrej] {
    text-align: center;
}

.stories-carousel-section h2[b-j2297mxrej] {
    margin: 0;
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
    line-height: 1.15;
}

.luister-playlist-link[b-j2297mxrej] {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.luister-playlist-link-button[b-j2297mxrej] {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.luister-playlist-link[b-j2297mxrej]::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.82em;
    color: color-mix(in srgb, var(--accent) 78%, #2e3238);
    transform: translateY(0.03em);
    transition: transform 0.18s ease;
}

.luister-playlist-link:hover[b-j2297mxrej]::after,
.luister-playlist-link:focus-visible[b-j2297mxrej]::after {
    transform: translate(0.18rem, 0.03em);
}

.luister-playlist-link:hover[b-j2297mxrej],
.luister-playlist-link:focus-visible[b-j2297mxrej] {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.stories-carousel-section .section-intro[b-j2297mxrej] {
    margin: 0.35rem 0 0;
    color: #3f5255;
}

.luister-speellyste-section[b-j2297mxrej] {
    margin-bottom: 1rem;
}

.luister-speellyste-carousel[b-j2297mxrej] {
    --luister-speellyste-base-card-width: 220px;
    grid-auto-columns: calc(var(--luister-speellyste-base-card-width) * 64 / 27);
}

.luister-speellyste-cover[b-j2297mxrej],
.luister-speellyste-image[b-j2297mxrej] {
    aspect-ratio: 16 / 9;
}

.luister-speellyste-link h3[b-j2297mxrej] {
    min-height: 0;
    text-align: center;
}

.stories-carousel-shell[b-j2297mxrej] {
    position: relative;
    width: min(100%, 1080px);
    margin: 0.65rem auto 0;
}

.luister-stories-section .stories-carousel-shell[b-j2297mxrej],
.luister-speellyste-section .stories-carousel-shell[b-j2297mxrej] {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: 0;
}

.stories-carousel[b-j2297mxrej] {
    margin-top: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    justify-content: safe center;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 1.65rem;
    padding-bottom: 0.38rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.65rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    width: 100%;
    cursor: grab;
}

.stories-carousel.luister-speellyste-carousel[b-j2297mxrej] {
    --luister-speellyste-viewport-cap: calc(100vw - (var(--luister-carousel-edge-space, 15px) * 2));
    grid-auto-columns: min(
        calc(var(--luister-speellyste-base-card-width) * 64 / 27),
        var(--luister-speellyste-viewport-cap)
    );
}

.luister-stories-section .stories-carousel[b-j2297mxrej],
.luister-speellyste-section .stories-carousel[b-j2297mxrej] {
    --luister-carousel-edge-space: 15px;
    justify-content: safe center;
    padding-inline: var(--luister-carousel-edge-space);
    scroll-padding-inline: var(--luister-carousel-edge-space);
}

.stories-carousel.is-dragging[b-j2297mxrej] {
    scroll-snap-type: none;
    cursor: grabbing;
}

.stories-carousel.is-dragging[b-j2297mxrej] {
    cursor: grabbing;
    scroll-snap-type: none;
}

.stories-carousel.is-dragging .story-carousel-link[b-j2297mxrej] {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.stories-carousel[b-j2297mxrej]::-webkit-scrollbar {
    height: 8px;
}

.stories-carousel[b-j2297mxrej]::-webkit-scrollbar-track {
    background: rgba(15, 26, 42, 0.08);
    border-radius: 999px;
}

.stories-carousel[b-j2297mxrej]::-webkit-scrollbar-thumb {
    background: rgba(15, 26, 42, 0.26);
    border-radius: 999px;
}

.story-carousel-item[b-j2297mxrej] {
    scroll-snap-align: start;
}

.story-carousel-item-ranked .story-carousel-card-shell[b-j2297mxrej] {
    padding-top: clamp(0.78rem, 1.2vw, 1rem);
}

.story-carousel-item.is-navigating .story-carousel-link[b-j2297mxrej] {
    pointer-events: none;
}

.story-carousel-link[b-j2297mxrej] {
    color: inherit;
    text-decoration: none;
    display: grid;
    gap: 0.56rem;
    -webkit-user-drag: none;
    user-select: none;
}

.story-carousel-link-button[b-j2297mxrej] {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.story-carousel-card-shell[b-j2297mxrej] {
    position: relative;
}

.story-carousel-rank[b-j2297mxrej] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: block;
    pointer-events: none;
    user-select: none;
    font-family: "Schink Rank Rounded", "Arial Rounded MT Bold", "Arial Black", "Poppins", "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: clamp(2.75rem, 8.8vw, 5.17rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.08em;
    color: #fffef8;
    text-shadow:
        0 6px 12px rgba(52, 65, 70, 0.24);
}

.story-carousel-cover[b-j2297mxrej] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    background: #111;
    box-shadow: 0 10px 24px rgba(14, 18, 24, 0.3);
}

.story-carousel-item.is-navigating .story-carousel-cover[b-j2297mxrej]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 16, 0.42);
    z-index: 2;
}

.story-carousel-item.is-navigating .story-carousel-cover[b-j2297mxrej]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -1.1rem;
    margin-left: -1.1rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: luister-story-card-spin-b-j2297mxrej 0.7s linear infinite;
    z-index: 3;
}

.story-carousel-image[b-j2297mxrej] {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.luister-speellyste-link[b-j2297mxrej] {
    width: 100%;
}

.luister-speellyste-link .story-carousel-cover[b-j2297mxrej] {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.luister-speellyste-link .story-carousel-image[b-j2297mxrej] {
    aspect-ratio: 16 / 9;
}

.story-carousel-item.is-navigating .story-carousel-image[b-j2297mxrej] {
    filter: brightness(0.72);
    transform: scale(1.01);
}

.story-cover-play[b-j2297mxrej] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.story-cover-play-icon[b-j2297mxrej] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    padding-left: 0.16rem;
}

.story-carousel-link:hover .story-carousel-image[b-j2297mxrej],
.story-carousel-link:focus-visible .story-carousel-image[b-j2297mxrej] {
    transform: scale(1.03);
    filter: brightness(0.8);
}

.story-carousel-link:hover .story-cover-play[b-j2297mxrej],
.story-carousel-link:focus-visible .story-cover-play[b-j2297mxrej] {
    opacity: 1;
}

.story-carousel-link h3[b-j2297mxrej] {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2231;
    min-height: 2.6em;
}

.story-carousel-link:focus-visible[b-j2297mxrej] {
    outline: 3px solid color-mix(in srgb, #ffffff 40%, var(--accent));
    outline-offset: 4px;
    border-radius: 16px;
}

.story-favorite-toggle[b-j2297mxrej] {
    position: absolute;
    top: 0.58rem;
    right: 0.58rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    z-index: 5;
    opacity: 0.88;
}

.story-carousel-item-ranked .story-favorite-toggle[b-j2297mxrej] {
    top: calc(clamp(0.78rem, 1.2vw, 1rem) + 0.58rem);
}

.story-favorite-toggle i[b-j2297mxrej] {
    font-size: 1.12rem;
    line-height: 1;
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
    transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.story-favorite-toggle:hover[b-j2297mxrej],
.story-favorite-toggle:focus-visible[b-j2297mxrej] {
    opacity: 1;
}

.story-favorite-toggle:hover i[b-j2297mxrej],
.story-favorite-toggle:focus-visible i[b-j2297mxrej] {
    transform: scale(1.06);
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.story-favorite-toggle:focus-visible[b-j2297mxrej] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-favorite-toggle.is-favorite[b-j2297mxrej] {
    color: #ffe6ef;
    opacity: 1;
}

.story-favorite-toggle.is-favorite i[b-j2297mxrej],
.story-favorite-toggle.is-favorite:hover i[b-j2297mxrej],
.story-favorite-toggle.is-favorite:focus-visible i[b-j2297mxrej] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.story-favorite-toggle:disabled[b-j2297mxrej] {
    opacity: 0.64;
    cursor: wait;
}

@keyframes luister-story-card-spin-b-j2297mxrej {
    to {
        transform: rotate(360deg);
    }
}

@keyframes luister-loading-spin-b-j2297mxrej {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .stories-carousel[b-j2297mxrej] {
        grid-auto-columns: minmax(170px, 42vw);
    }

    .luister-speellyste-carousel[b-j2297mxrej] {
        --luister-speellyste-base-card-width: clamp(170px, 42vw, 420px);
    }

    .stories-carousel.luister-speellyste-carousel[b-j2297mxrej] {
        --luister-speellyste-viewport-cap: min(86vw, calc(100vw - (var(--luister-carousel-edge-space, 15px) * 2)));
    }
}

@media (max-width: 680px) {
    .luister-page-shell[b-j2297mxrej] {
        --luister-first-screen-reserve: clamp(16.5rem, 46svh, 19rem);
        padding: 0.8rem 0.85rem 0;
    }

    .gratis-hero[b-j2297mxrej] {
        margin-bottom: 1.1rem;
    }

    .gratis-hero-copy[b-j2297mxrej] {
        text-align: left;
    }

    .gratis-hero-copy p[b-j2297mxrej] {
        margin: 0.35rem 0 0;
    }

    .gratis-banner[b-j2297mxrej] {
        border-radius: 14px;
    }

    .luister-search-section[b-j2297mxrej] {
        margin-bottom: 1rem;
        padding-inline: 0.8rem;
    }

    .luister-search-form[b-j2297mxrej] {
        min-height: 50px;
        padding: 0 0.78rem;
    }

    .luister-loading-state[b-j2297mxrej] {
        min-height: clamp(13rem, 30vh, 17rem);
        padding-inline: 0.8rem;
    }

    .luister-loading-indicator[b-j2297mxrej] {
        padding: 1.35rem 1rem;
        border-radius: 24px;
    }

    .luister-loading-spinner[b-j2297mxrej] {
        width: 3.85rem;
        height: 3.85rem;
    }

    .luister-whatsapp-join[b-j2297mxrej] {
        margin-top: 1.25rem;
        margin-bottom: 1.7rem;
        padding-inline: 0.8rem;
    }
}

@media (max-width: 620px) {
    .stories-carousel-shell[b-j2297mxrej] {
        overflow-x: clip;
    }

    .stories-carousel[b-j2297mxrej] {
        grid-auto-columns: minmax(146px, 44vw);
        gap: 0.72rem;
        padding-inline: 0.8rem;
        padding-bottom: 0.25rem;
        scroll-padding-inline: 0.8rem;
    }

    .luister-speellyste-carousel[b-j2297mxrej] {
        --luister-speellyste-base-card-width: clamp(146px, 44vw, 360px);
    }

    .stories-carousel.luister-speellyste-carousel[b-j2297mxrej] {
        --luister-speellyste-viewport-cap: min(92vw, calc(100vw - (var(--luister-carousel-edge-space, 15px) * 2)));
    }

    .luister-stories-section .stories-carousel[b-j2297mxrej],
    .luister-speellyste-section .stories-carousel[b-j2297mxrej] {
        padding-inline: var(--luister-carousel-edge-space);
        scroll-padding-inline: var(--luister-carousel-edge-space);
    }

    .luister-whatsapp-join-btn[b-j2297mxrej] {
        width: min(100%, 340px);
    }
}

@media (hover: none) and (pointer: coarse) {
    .stories-carousel[b-j2297mxrej] {
        touch-action: auto;
        cursor: auto;
    }

    .story-cover-play[b-j2297mxrej] {
        /*opacity: 1;*/
        background: linear-gradient(to top, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.03));
    }
}

@media (max-width: 420px) {
    .luister-page-shell[b-j2297mxrej] {
        padding-top: 0.7rem;
        padding-bottom: 0;
    }

    .gratis-hero[b-j2297mxrej] {
        gap: 0.7rem;
    }

    h1[b-j2297mxrej] {
        font-size: clamp(1.4rem, 7.2vw, 1.8rem);
        line-height: 1.15;
    }

    .gratis-banner[b-j2297mxrej] {
        border-radius: 12px;
    }

    .stories-carousel[b-j2297mxrej] {
        grid-auto-columns: minmax(146px, 44vw);
    }
}
/* /Components/Pages/LuisterPlaylist.razor.rz.scp.css */
.playlist-page[b-hbgo58v84d] {
    display: grid;
    gap: 0;
    width: min(100%, 1140px);
    min-width: 0;
    margin-inline: auto;
    padding-bottom: 1.2rem;
    color: #f7f2ea;
}

.playlist-page > *[b-hbgo58v84d] {
    min-width: 0;
}

.playlist-empty-state[b-hbgo58v84d] {
    border-radius: 28px;
    background: #222222;
    box-shadow: 0 20px 42px rgba(19, 22, 24, 0.18);
}

.playlist-loading-state[b-hbgo58v84d] {
    min-height: 42vh;
}

.playlist-content-stack[b-hbgo58v84d] {
    display: grid;
    gap: 0;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    background: #222222;
    box-shadow: 0 20px 42px rgba(19, 22, 24, 0.18);
}

.playlist-header[b-hbgo58v84d] {
    border-radius: 28px 28px 0 0;
    padding: 1.3rem 1.35rem 1.2rem;
    background:
        radial-gradient(circle at top right, rgba(84, 173, 180, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(34, 34, 34, 0.98), rgba(29, 35, 39, 0.98));
    text-align: center;
    display: grid;
    justify-items: center;
    box-shadow: 0 20px 42px rgba(19, 22, 24, 0.18);
}

.playlist-header h1[b-hbgo58v84d] {
    margin: 0.35rem 0 0;
    font-size: clamp(2rem, 3.8vw, 3rem);
    line-height: 1.05;
    color: #ffffff;
}

.playlist-description[b-hbgo58v84d] {
    margin: 0.5rem 0 0;
    max-width: 64ch;
    color: rgba(247, 242, 234, 0.86);
    line-height: 1.55;
}

.playlist-meta[b-hbgo58v84d] {
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.playlist-meta span[b-hbgo58v84d] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f1ece5;
    font-size: 0.9rem;
    font-weight: 700;
}

.playlist-player-card[b-hbgo58v84d] {
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(126, 214, 216, 0.1), rgba(34, 34, 34, 0.98) 24%),
        #222222;
}

.story-player-content[b-hbgo58v84d] {
    display: grid;
    gap: 1rem;
    color: #f7f2ea;
    align-content: start;
}

.playlist-player-grid[b-hbgo58v84d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    justify-items: center;
}

.story-cover-wrap[b-hbgo58v84d] {
    position: relative;
    width: min(100%, 820px);
}

.story-cover[b-hbgo58v84d] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: clamp(260px, 58vh, 540px);
    object-fit: cover;
    display: block;
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.story-cover:focus-visible[b-hbgo58v84d] {
    outline: 3px solid color-mix(in srgb, #ffffff 35%, var(--accent));
    outline-offset: 2px;
}

.story-cover-play[b-hbgo58v84d] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(7, 9, 10, 0.42), rgba(7, 9, 10, 0.08));
    transition: opacity 0.2s ease;
}

.story-cover-play-icon[b-hbgo58v84d] {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #11181f;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    padding-left: 0.22rem;
}

.story-cover-wrap:hover .story-cover[b-hbgo58v84d],
.story-cover-wrap:focus-within .story-cover[b-hbgo58v84d] {
    transform: scale(1.012);
    filter: brightness(0.88);
}

.story-cover-wrap:hover .story-cover-play[b-hbgo58v84d],
.story-cover-wrap:focus-within .story-cover-play[b-hbgo58v84d] {
    opacity: 1;
}

.story-cover-wrap.is-playing .story-cover-play[b-hbgo58v84d],
.story-cover-wrap.is-playing:hover .story-cover-play[b-hbgo58v84d],
.story-cover-wrap.is-playing:focus-within .story-cover-play[b-hbgo58v84d] {
    opacity: 0;
}

.story-cover-wrap.is-playing .story-cover-play-icon[b-hbgo58v84d] {
    font-size: 1.24rem;
    padding-left: 0;
}

.story-fullscreen-toggle[b-hbgo58v84d] {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    border: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.story-fullscreen-toggle:hover[b-hbgo58v84d] {
    background: rgba(255, 255, 255, 0.18);
}

.story-favorite-toggle[b-hbgo58v84d] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    border: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    opacity: 0.9;
}

.story-favorite-toggle i[b-hbgo58v84d] {
    font-size: 1.32rem;
    line-height: 1;
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
    transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.story-favorite-toggle:hover[b-hbgo58v84d],
.story-favorite-toggle:focus-visible[b-hbgo58v84d] {
    opacity: 1;
}

.story-favorite-toggle:hover i[b-hbgo58v84d],
.story-favorite-toggle:focus-visible i[b-hbgo58v84d] {
    transform: scale(1.06);
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.story-favorite-toggle:focus-visible[b-hbgo58v84d] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-favorite-toggle.is-favorite[b-hbgo58v84d] {
    color: #ffe6ef;
    opacity: 1;
}

.story-favorite-toggle.is-favorite i[b-hbgo58v84d],
.story-favorite-toggle.is-favorite:hover i[b-hbgo58v84d],
.story-favorite-toggle.is-favorite:focus-visible i[b-hbgo58v84d] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.story-favorite-toggle:disabled[b-hbgo58v84d] {
    opacity: 0.64;
    cursor: wait;
}

.story-fullscreen-toggle:focus-visible[b-hbgo58v84d],
.story-control-btn:focus-visible[b-hbgo58v84d],
.story-mini-btn:focus-visible[b-hbgo58v84d],
.story-autoplay-control:focus-within[b-hbgo58v84d],
.story-progress-slider:focus-visible[b-hbgo58v84d],
.story-volume-slider:focus-visible[b-hbgo58v84d],
.playlist-track-main:focus-visible[b-hbgo58v84d],
.playlist-track-favorite-toggle:focus-visible[b-hbgo58v84d] {
    outline: 3px solid color-mix(in srgb, #ffffff 24%, var(--accent));
    outline-offset: 2px;
}

.playlist-player-main[b-hbgo58v84d] {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
    width: min(100%, 560px);
    margin-inline: auto;
}

@media (min-width: 720px) {
    .story-cover-wrap[b-hbgo58v84d] {
        width: min(100%, 900px);
    }

    .story-cover[b-hbgo58v84d] {
        object-fit: contain;
        max-height: clamp(320px, 62vh, 640px);
    }
}

.playlist-current-label[b-hbgo58v84d] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.18rem 0.42rem;
    color: #8fe5e8;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.playlist-current-title[b-hbgo58v84d],
.playlist-current-label span:last-child[b-hbgo58v84d] {
    min-width: 0;
}

.playlist-current-separator[b-hbgo58v84d] {
    color: rgba(143, 229, 232, 0.72);
}

.story-audio[b-hbgo58v84d] {
    width: min(100%, 520px);
    max-width: 100%;
}

.story-player-enhanced .story-audio-native[b-hbgo58v84d] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.story-custom-player[b-hbgo58v84d] {
    width: min(100%, 520px);
    max-width: 100%;
    display: grid;
    gap: 0.9rem;
    color: #f6f2eb;
}

.story-progress-wrap[b-hbgo58v84d] {
    display: grid;
    gap: 0.42rem;
}

.story-progress-slider[b-hbgo58v84d],
.story-volume-slider[b-hbgo58v84d] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: rgba(242, 247, 251, 0.28);
    outline: none;
}

.story-progress-slider[b-hbgo58v84d]::-webkit-slider-thumb,
.story-volume-slider[b-hbgo58v84d]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0;
    background: #f5f1ea;
    box-shadow: 0 0 0 1px rgba(33, 33, 33, 0.2);
    cursor: pointer;
}

.story-progress-slider[b-hbgo58v84d]::-moz-range-thumb,
.story-volume-slider[b-hbgo58v84d]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0;
    background: #f5f1ea;
    box-shadow: 0 0 0 1px rgba(33, 33, 33, 0.2);
    cursor: pointer;
}

.story-time-row[b-hbgo58v84d] {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    color: rgba(247, 242, 234, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
}

.story-time-row span + span[b-hbgo58v84d]::before {
    content: "/";
    margin-right: 0.45rem;
    color: rgba(247, 242, 234, 0.48);
}

.story-player-controls[b-hbgo58v84d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.story-control-btn[b-hbgo58v84d] {
    border: 0;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-play-toggle[b-hbgo58v84d] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3b82, #ff135b);
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(255, 19, 91, 0.3);
}

.story-play-icon[b-hbgo58v84d] {
    font-size: 1rem;
    line-height: 1;
    margin-left: 0;
}

.story-play-toggle.is-playing .story-play-icon[b-hbgo58v84d] {
    margin-left: 0;
    font-size: 1rem;
}

.story-story-prev[b-hbgo58v84d],
.story-story-next[b-hbgo58v84d] {
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.75rem;
}

.story-story-prev:disabled[b-hbgo58v84d],
.story-story-next:disabled[b-hbgo58v84d] {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-secondary-controls[b-hbgo58v84d] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}

.story-mini-btn[b-hbgo58v84d] {
    min-height: 2.2rem;
    border: 0;
    border-radius: 999px;
    padding: 0.38rem 0.72rem;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f0e9;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-autoplay-split-control[b-hbgo58v84d] {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
}

.story-autoplay-split-control .story-autoplay-toggle[b-hbgo58v84d] {
    border-radius: 999px 0 0 999px;
}

.story-autoplay-control[b-hbgo58v84d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 2.2rem;
    padding: 0.38rem 0.72rem 0.38rem 0.78rem;
    border-radius: 0 999px 999px 0;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f0e9;
    cursor: pointer;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.story-autoplay-control[b-hbgo58v84d]::before {
    content: attr(data-short-label);
    font-weight: 700;
    font-size: 0.83rem;
    line-height: 1;
    color: inherit;
}

.story-autoplay-control.is-empty[b-hbgo58v84d] {
    gap: 0;
    padding-left: 0.62rem;
}

.story-mini-btn.is-active[b-hbgo58v84d],
.story-mini-btn[aria-pressed="true"][b-hbgo58v84d] {
    background: rgba(126, 214, 216, 0.18);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(143, 229, 232, 0.3);
}

.story-autoplay-mode-select[b-hbgo58v84d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    opacity: 0;
}

.story-autoplay-mode-select:focus[b-hbgo58v84d] {
    outline: none;
}

.story-autoplay-control[b-hbgo58v84d]::after {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.82;
    margin-top: -0.16rem;
    flex: 0 0 auto;
}

.story-autoplay-mode-select option[b-hbgo58v84d] {
    color: #222222;
}

.story-custom-player.volume-unsupported .story-secondary-controls[b-hbgo58v84d] {
    grid-template-columns: auto auto auto auto auto;
    justify-content: space-between;
}

.story-custom-player.volume-unsupported .story-volume-slider[b-hbgo58v84d] {
    display: none;
}

.story-custom-player.speed-unsupported .story-speed-toggle[b-hbgo58v84d] {
    opacity: 0.55;
}

.story-mute-icon[b-hbgo58v84d] {
    font-size: 1rem;
    line-height: 1;
}

.story-speed-label[b-hbgo58v84d] {
    font-size: 0.83rem;
    letter-spacing: 0.02em;
}

.story-autoplay-icon[b-hbgo58v84d] {
    font-size: 1.25rem;
    line-height: 1;
}

.story-shuffle-toggle:disabled[b-hbgo58v84d] {
    opacity: 0.45;
    cursor: not-allowed;
}

.playlist-story-summary[b-hbgo58v84d] {
    width: min(100%, 620px);
    padding: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.playlist-story-summary-toggle[b-hbgo58v84d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 54px;
    padding: 0.95rem 1.05rem;
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    list-style: none;
}

.playlist-story-summary-toggle[b-hbgo58v84d]::-webkit-details-marker {
    display: none;
}

.playlist-story-summary-toggle[b-hbgo58v84d]::marker {
    content: "";
}

.playlist-story-summary-toggle i[b-hbgo58v84d] {
    flex: 0 0 auto;
    color: rgba(247, 242, 234, 0.9);
    font-size: 0.9rem;
    transition: transform 160ms ease;
}

.playlist-story-summary[open] .playlist-story-summary-toggle i[b-hbgo58v84d] {
    transform: rotate(180deg);
}

.playlist-story-summary p[b-hbgo58v84d] {
    margin: 0;
    padding: 0 1.05rem 1rem;
    color: rgba(247, 242, 234, 0.9);
    line-height: 1.55;
}

.playlist-tracklist-card[b-hbgo58v84d] {
    padding: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-tracklist[b-hbgo58v84d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.playlist-track-item[b-hbgo58v84d] {
    min-width: 0;
}

.playlist-track-button[b-hbgo58v84d] {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.52rem;
    padding: 0.6rem 0.8rem;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.playlist-track-button:hover[b-hbgo58v84d],
.playlist-track-button:focus-within[b-hbgo58v84d] {
    transform: translateY(-1px);
    border-color: rgba(126, 214, 216, 0.45);
    background: rgba(126, 214, 216, 0.08);
}

.playlist-track-item.is-active .playlist-track-button[b-hbgo58v84d] {
    border-color: rgba(255, 19, 91, 0.62);
    background: rgba(255, 19, 91, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 19, 91, 0.08);
}

.playlist-track-main[b-hbgo58v84d] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.playlist-track-index[b-hbgo58v84d] {
    width: 2rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(247, 242, 234, 0.72);
}

.playlist-track-image[b-hbgo58v84d] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}

.playlist-track-copy[b-hbgo58v84d] {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.playlist-track-title[b-hbgo58v84d] {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.playlist-track-status[b-hbgo58v84d] {
    color: rgba(247, 242, 234, 0.66);
    font-size: 0.88rem;
}

.playlist-track-action[b-hbgo58v84d] {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
}

.playlist-track-favorite-toggle[b-hbgo58v84d] {
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
}

.playlist-track-favorite-toggle i[b-hbgo58v84d] {
    font-size: 1.1rem;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(5, 10, 16, 0.3);
    transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.playlist-track-favorite-toggle:hover i[b-hbgo58v84d],
.playlist-track-favorite-toggle:focus-visible i[b-hbgo58v84d] {
    transform: scale(1.06);
    text-shadow: 0 3px 10px rgba(5, 10, 16, 0.34);
}

.playlist-track-favorite-toggle.is-favorite[b-hbgo58v84d] {
    color: #f03b76;
}

.playlist-track-favorite-toggle.is-favorite i[b-hbgo58v84d],
.playlist-track-favorite-toggle.is-favorite:hover i[b-hbgo58v84d],
.playlist-track-favorite-toggle.is-favorite:focus-visible i[b-hbgo58v84d] {
    text-shadow: rgb(0 0 0 / 24%) 0px 1px 2px;
}

.playlist-track-favorite-toggle:disabled[b-hbgo58v84d] {
    opacity: 0.64;
    cursor: wait;
}

.playlist-empty-state[b-hbgo58v84d] {
    padding: 1.35rem;
    color: #f7f2ea;
}

.playlist-empty-state h1[b-hbgo58v84d] {
    margin-top: 0;
    color: #ffffff;
}

.playlist-empty-state a[b-hbgo58v84d] {
    color: #9be6ea;
    font-weight: 700;
}

.sr-only[b-hbgo58v84d] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes playlist-fullscreen-cover-breathe-b-hbgo58v84d {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, 0, 0) scale(1.035);
    }
}

.playlist-page.manual-fullscreen-focus[b-hbgo58v84d] {
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000000;
    box-shadow: none;
}

.playlist-page.manual-fullscreen-focus .playlist-header[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .playlist-tracklist-card[b-hbgo58v84d] {
    display: none;
}

.playlist-page.manual-fullscreen-focus .playlist-content-stack[b-hbgo58v84d] {
    position: relative;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.playlist-page.manual-fullscreen-focus .playlist-player-card[b-hbgo58v84d] {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.playlist-page.manual-fullscreen-focus .playlist-current-label[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .playlist-story-summary[b-hbgo58v84d] {
    display: none;
}

.playlist-page.manual-fullscreen-focus .story-player-content[b-hbgo58v84d] {
    position: relative;
    width: 100vw;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    background: #000000;
    isolation: isolate;
}

.playlist-page.manual-fullscreen-focus .playlist-player-grid[b-hbgo58v84d] {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 100dvh;
    justify-items: stretch;
    align-items: stretch;
    gap: 0;
}

.playlist-page.manual-fullscreen-focus .playlist-player-main[b-hbgo58v84d] {
    width: 100%;
    max-width: none;
    margin: 0;
}

.playlist-page.manual-fullscreen-focus .story-cover-wrap[b-hbgo58v84d] {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    contain: paint;
    isolation: isolate;
}

.playlist-page.manual-fullscreen-focus .story-cover[b-hbgo58v84d] {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    background: #000000;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation: playlist-fullscreen-cover-breathe-b-hbgo58v84d 34s ease-in-out infinite;
}

.playlist-page.manual-fullscreen-focus .story-cover-play[b-hbgo58v84d] {
    border-radius: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.16) 38%, rgba(0, 0, 0, 0) 72%);
}

.playlist-page.manual-fullscreen-focus .story-audio[b-hbgo58v84d] {
    width: 1px;
}

.playlist-page.manual-fullscreen-focus .story-fullscreen-toggle[b-hbgo58v84d] {
    top: max(0.7rem, env(safe-area-inset-top));
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: auto;
    z-index: 7;
    background: rgba(12, 15, 20, 0.56);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 28px rgba(0, 0, 0, 0.3);
}

.playlist-page.manual-fullscreen-focus .story-favorite-toggle[b-hbgo58v84d] {
    top: max(0.7rem, env(safe-area-inset-top));
    right: calc(max(0.7rem, env(safe-area-inset-right)) + 3.45rem);
    z-index: 7;
    background: transparent;
    box-shadow: none;
}

.playlist-page.manual-fullscreen-focus .story-favorite-toggle i[b-hbgo58v84d] {
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.playlist-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite i[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite:hover i[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite:focus-visible i[b-hbgo58v84d] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.playlist-page.manual-fullscreen-focus .story-custom-player[b-hbgo58v84d] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 6;
    width: 100%;
    max-width: none;
    color: #f2f5f9;
    padding: 1rem max(1.2rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
    border-radius: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.06) 100%);
    backdrop-filter: blur(10px) saturate(125%);
    box-shadow: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.playlist-page.manual-fullscreen-focus .story-progress-slider[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-volume-slider[b-hbgo58v84d] {
    height: 6px;
    background: rgba(240, 244, 250, 0.24);
}

.playlist-page.manual-fullscreen-focus .story-progress-slider[b-hbgo58v84d]::-webkit-slider-thumb,
.playlist-page.manual-fullscreen-focus .story-volume-slider[b-hbgo58v84d]::-webkit-slider-thumb,
.playlist-page.manual-fullscreen-focus .story-progress-slider[b-hbgo58v84d]::-moz-range-thumb,
.playlist-page.manual-fullscreen-focus .story-volume-slider[b-hbgo58v84d]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(11, 15, 20, 0.42);
}

.playlist-page.manual-fullscreen-focus .story-player-controls[b-hbgo58v84d] {
    justify-content: flex-start;
    gap: 0.9rem;
}

.playlist-page.manual-fullscreen-focus .story-time-row[b-hbgo58v84d] {
    justify-content: flex-start;
    color: #edf2f8;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.playlist-page.manual-fullscreen-focus .story-time-row span + span[b-hbgo58v84d]::before {
    color: rgba(237, 242, 248, 0.72);
}

.playlist-page.manual-fullscreen-focus .story-control-btn[b-hbgo58v84d] {
    color: #f5f9ff;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.playlist-page.manual-fullscreen-focus .story-play-toggle[b-hbgo58v84d] {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    padding: 0.1rem 0.18rem;
    background: transparent;
    color: #f5f9ff;
    box-shadow: none;
}

.playlist-page.manual-fullscreen-focus .story-play-icon[b-hbgo58v84d] {
    font-size: 1.85rem;
}

.playlist-page.manual-fullscreen-focus .story-story-prev[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-story-next[b-hbgo58v84d] {
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    padding: 0.08rem;
    background: transparent;
    font-size: 1.8rem;
}

.playlist-page.manual-fullscreen-focus .story-story-prev:disabled[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-story-next:disabled[b-hbgo58v84d] {
    background: transparent;
}

.playlist-page.manual-fullscreen-focus .story-secondary-controls[b-hbgo58v84d] {
    width: 100%;
    padding-top: 0;
    grid-template-columns: auto minmax(110px, 150px) auto auto auto auto;
    justify-content: end;
    gap: 0.8rem;
}

.playlist-page.manual-fullscreen-focus .story-mini-btn[b-hbgo58v84d] {
    min-height: 0;
    padding: 0.12rem 0.18rem;
    border-radius: 0;
    background: transparent;
    color: #f2f5f9;
}

.playlist-page.manual-fullscreen-focus .story-speed-toggle[b-hbgo58v84d] {
    font-size: 1rem;
    font-weight: 800;
}

.playlist-page.manual-fullscreen-focus .story-volume-slider[b-hbgo58v84d] {
    max-width: 150px;
}

.playlist-page.manual-fullscreen-focus .story-autoplay-control[b-hbgo58v84d] {
    background: transparent;
    border-left-color: rgba(255, 255, 255, 0.2);
}

.playlist-page.manual-fullscreen-focus .story-fullscreen-toggle[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus .story-favorite-toggle[b-hbgo58v84d] {
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-custom-player[b-hbgo58v84d] {
    opacity: 0;
    transform: translateY(1.1rem);
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
}

.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-fullscreen-toggle[b-hbgo58v84d],
.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-favorite-toggle[b-hbgo58v84d] {
    opacity: 0;
    pointer-events: none;
}

.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-fullscreen-toggle[b-hbgo58v84d] {
    transform: translateY(-0.45rem);
}

.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-favorite-toggle[b-hbgo58v84d] {
    transform: translateY(-0.45rem);
}

.playlist-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-player-content[b-hbgo58v84d] {
    cursor: none;
}

@media (hover: none) and (pointer: coarse) {
    .story-cover-play[b-hbgo58v84d] {
      /*  opacity: 1;*/
        background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.03));
    }
}

@media (max-width: 1024px) {
    .playlist-page[b-hbgo58v84d] {
        overflow: hidden;
        border-radius: 0;
        background: #222222;
        box-shadow: 0 20px 42px rgba(19, 22, 24, 0.18);
    }

    .playlist-header[b-hbgo58v84d],
    .playlist-content-stack[b-hbgo58v84d] {
        border-radius: 0;
    }
}

@media (max-width: 920px) {
    .playlist-page[b-hbgo58v84d] {
        overflow: hidden;
        border-radius: 0;
        background: #222222;
        box-shadow: 0 20px 42px rgba(19, 22, 24, 0.18);
    }

    .playlist-header[b-hbgo58v84d] {
        border-radius: 0;
        box-shadow: none;
    }

    .playlist-content-stack[b-hbgo58v84d] {
        border-radius: 0;
        box-shadow: none;
    }

    .playlist-player-grid[b-hbgo58v84d] {
        grid-template-columns: 1fr;
    }

    .story-cover-wrap[b-hbgo58v84d] {
        width: min(100%, calc(100vw - 2rem), 900px);
        max-width: none;
        margin-inline: auto;
    }
}

@media (max-width: 720px) {
    .playlist-header[b-hbgo58v84d],
    .playlist-empty-state[b-hbgo58v84d],
    .playlist-content-stack[b-hbgo58v84d] {
        border-radius: 24px;
    }

    .playlist-header[b-hbgo58v84d] {
        display: none;
    }

    .playlist-player-card[b-hbgo58v84d],
    .playlist-tracklist-card[b-hbgo58v84d] {
        padding: 0.9rem;
    }

    .story-cover-wrap[b-hbgo58v84d] {
        width: min(100%, calc(100vw - 1.8rem));
        max-width: none;
    }

    .story-cover[b-hbgo58v84d] {
        aspect-ratio: 1 / 1;
        max-height: none;
        object-fit: cover;
        object-position: bottom center;
    }

    .playlist-page:not(.manual-fullscreen-focus) .story-favorite-toggle[b-hbgo58v84d] {
        top: max(4.6rem, calc(env(safe-area-inset-top) + 4.1rem));
    }

    .story-custom-player[b-hbgo58v84d],
    .playlist-story-summary[b-hbgo58v84d] {
        width: 100%;
    }

    .playlist-current-label[b-hbgo58v84d] {
        font-size: 0.82rem;
        gap: 0.12rem 0.34rem;
        letter-spacing: 0.035em;
    }

    .story-secondary-controls[b-hbgo58v84d] {
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        gap: 0.48rem;
    }

    .story-secondary-controls .story-mini-btn[b-hbgo58v84d],
    .story-secondary-controls .story-autoplay-control[b-hbgo58v84d] {
        padding-inline: 0.62rem;
    }

    .story-volume-slider[b-hbgo58v84d] {
        display: none;
    }

    .playlist-track-action[b-hbgo58v84d] {
        display: none;
    }
}

@media (max-width: 560px) {
    .playlist-header[b-hbgo58v84d] {
        padding: 1.1rem 1rem;
    }

    .story-play-toggle[b-hbgo58v84d] {
        width: 50px;
        height: 50px;
    }

    .story-play-icon[b-hbgo58v84d] {
        font-size: 1rem;
    }

    .story-story-prev[b-hbgo58v84d],
    .story-story-next[b-hbgo58v84d] {
        min-width: 50px;
        min-height: 50px;
        font-size: 1.55rem;
    }

    .story-player-controls[b-hbgo58v84d] {
        gap: 0.78rem;
    }

    .playlist-track-button[b-hbgo58v84d] {
        gap: 0.65rem;
        padding: 0.58rem 0.7rem;
    }

    .playlist-track-image[b-hbgo58v84d] {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .playlist-track-index[b-hbgo58v84d] {
        width: 1.4rem;
        font-size: 0.88rem;
    }

    .playlist-page.manual-fullscreen-focus .story-player-content[b-hbgo58v84d] {
        min-height: 100dvh;
    }

    .playlist-page.manual-fullscreen-focus .story-custom-player[b-hbgo58v84d] {
        gap: 0.75rem;
        padding: 0.82rem max(0.75rem, env(safe-area-inset-right)) calc(0.85rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .playlist-page.manual-fullscreen-focus .story-player-controls[b-hbgo58v84d] {
        gap: 0.8rem;
    }

    .playlist-page.manual-fullscreen-focus .story-time-row[b-hbgo58v84d] {
        width: 100%;
        font-size: 0.88rem;
    }

    .playlist-page.manual-fullscreen-focus .story-secondary-controls[b-hbgo58v84d] {
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        gap: 0.48rem;
    }

    .playlist-page.manual-fullscreen-focus .story-volume-slider[b-hbgo58v84d] {
        display: none;
    }

    .playlist-page.manual-fullscreen-focus .story-autoplay-split-control[b-hbgo58v84d] {
        width: auto;
        grid-column: auto;
    }

    .playlist-page.manual-fullscreen-focus .story-autoplay-control[b-hbgo58v84d] {
        width: auto;
    }

    .playlist-page.manual-fullscreen-focus .story-autoplay-mode-select[b-hbgo58v84d] {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .playlist-header h1[b-hbgo58v84d] {
        font-size: clamp(1.7rem, 8vw, 2.15rem);
    }

    .story-secondary-controls[b-hbgo58v84d] {
        grid-template-columns: repeat(5, auto);
        gap: 0.34rem;
    }

    .story-mini-btn[b-hbgo58v84d] {
        justify-content: center;
        min-height: 2rem;
        padding-inline: 0.5rem;
    }

    .story-autoplay-split-control[b-hbgo58v84d] {
        width: auto;
    }

    .story-autoplay-control[b-hbgo58v84d] {
        width: auto;
        min-height: 2rem;
        padding-inline: 0.48rem 0.5rem;
    }

    .story-autoplay-mode-select[b-hbgo58v84d] {
        width: 100%;
    }

    .story-play-toggle[b-hbgo58v84d] {
        width: 50px;
        height: 50px;
    }

    .story-play-icon[b-hbgo58v84d] {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .playlist-page.manual-fullscreen-focus .story-cover[b-hbgo58v84d] {
        animation: none;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .playlist-page.manual-fullscreen-focus .story-cover[b-hbgo58v84d] {
        animation: none;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
/* /Components/Pages/LuisterPlaylistShowcase.razor.rz.scp.css */
.playlist-showcase-page[b-x3scmuq2yj] {
    width: 100%;
    display: grid;
    gap: 1.25rem;
    box-sizing: border-box;
    background: #ffffff;
}

.playlist-showcase-loading-state[b-x3scmuq2yj] {
    min-height: 42vh;
}

@media (prefers-reduced-motion: no-preference) {
    :global(html:has(.playlist-showcase-route))[b-x3scmuq2yj],
    :global(body:has(.playlist-showcase-route))[b-x3scmuq2yj] {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    :global(html:has(.playlist-showcase-route))[b-x3scmuq2yj],
    :global(body:has(.playlist-showcase-route))[b-x3scmuq2yj] {
        scroll-behavior: auto;
    }
}

.playlist-showcase-body[b-x3scmuq2yj] {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding-inline: clamp(0.9rem, 4vw, 2rem);
    display: grid;
    gap: 1rem;
    box-sizing: border-box;
    background: #ffffff;
}

.playlist-showcase-splash[b-x3scmuq2yj] {
    position: relative;
    min-height: 80dvh;
    overflow: hidden;
    isolation: isolate;
    background: #ffffff;
}

.playlist-showcase-splash-backdrop[b-x3scmuq2yj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.playlist-showcase-splash-backdrop.is-first-story-fallback[b-x3scmuq2yj] {
    object-position: center;
}

.playlist-showcase-splash-logo[b-x3scmuq2yj] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(86vw, 760px);
    max-height: min(62dvh, 620px);
    object-fit: contain;
    filter: drop-shadow(0 16px 34px rgba(8, 16, 30, 0.36));
    z-index: 1;
    animation: playlist-showcase-logo-float-b-x3scmuq2yj 11s ease-in-out infinite;
}

.playlist-showcase-intro[b-x3scmuq2yj] {
    width: min(100%, 900px);
    margin: 0 auto;
    display: grid;
    gap: 0.56rem;
    text-align: center;
}

.playlist-showcase-intro-count[b-x3scmuq2yj] {
    margin: 0;
    color: #8fe5e8;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.playlist-showcase-intro-description[b-x3scmuq2yj] {
    margin: 0;
    color: #33424b;
    line-height: 1.45;
}

.playlist-showcase-feature[b-x3scmuq2yj] {
    width: min(100%, 980px);
    margin: 0 auto;
    display: grid;
    gap: 0.9rem;
}

.playlist-showcase-feature-card[b-x3scmuq2yj] {
    width: min(100%, 680px);
    margin: 0 auto;
}

.playlist-showcase-feature-shell[b-x3scmuq2yj] {
    position: relative;
}

.playlist-showcase-feature-link[b-x3scmuq2yj] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
    border-radius: 20px;
}

.playlist-showcase-feature-cover[b-x3scmuq2yj] {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0f1116;
    box-shadow: 0 18px 34px rgba(11, 15, 18, 0.22);
}

.playlist-showcase-feature-image[b-x3scmuq2yj] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.playlist-showcase-feature-play[b-x3scmuq2yj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.playlist-showcase-feature-play-icon[b-x3scmuq2yj] {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
    padding-left: 0.2rem;
}

.playlist-showcase-feature-link:hover .playlist-showcase-feature-image[b-x3scmuq2yj],
.playlist-showcase-feature-link:focus-visible .playlist-showcase-feature-image[b-x3scmuq2yj] {
    transform: scale(1.03);
    filter: brightness(0.82);
}

.playlist-showcase-feature-link:hover .playlist-showcase-feature-play[b-x3scmuq2yj],
.playlist-showcase-feature-link:focus-visible .playlist-showcase-feature-play[b-x3scmuq2yj] {
    opacity: 1;
}

.playlist-showcase-feature-copy[b-x3scmuq2yj] {
    display: grid;
    gap: 0.36rem;
    text-align: center;
}

.playlist-showcase-feature-title[b-x3scmuq2yj] {
    color: #18232b;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.playlist-showcase-feature-description[b-x3scmuq2yj] {
    color: #44535b;
    line-height: 1.5;
}

.playlist-showcase-feature-link:focus-visible[b-x3scmuq2yj] {
    outline: 3px solid color-mix(in srgb, var(--accent) 68%, #ffffff);
    outline-offset: 3px;
}

@keyframes playlist-showcase-logo-float-b-x3scmuq2yj {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 6px));
    }
}

.playlist-showcase-playlist-link[b-x3scmuq2yj] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    margin-top: 0.14rem;
    padding: 0.48rem 0.86rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    color: #151515;
    background: color-mix(in srgb, var(--accent) 86%, #ffffff);
}

.playlist-showcase-playlist-link:hover[b-x3scmuq2yj],
.playlist-showcase-playlist-link:focus-visible[b-x3scmuq2yj] {
    background: color-mix(in srgb, var(--accent-deep) 82%, #ffffff);
}

.playlist-showcase-playlist-link[b-x3scmuq2yj]::before {
    content: "\f144";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.94rem;
}

.playlist-showcase-action-bar[b-x3scmuq2yj] {
    position: absolute;
    left: 50%;
    bottom: max(0.8rem, calc(env(safe-area-inset-bottom) + 0.35rem));
    transform: translateX(-50%);
    z-index: 6;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    padding: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(9, 11, 14, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.playlist-showcase-secondary-link[b-x3scmuq2yj] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.48rem 0.86rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    color: #151515;
    background: color-mix(in srgb, #ffffff 88%, #d8dee6);
    border: 1px solid rgba(29, 37, 48, 0.14);
}

.playlist-showcase-secondary-link[b-x3scmuq2yj]::before {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.92rem;
}

.playlist-showcase-secondary-link:hover[b-x3scmuq2yj],
.playlist-showcase-secondary-link:focus-visible[b-x3scmuq2yj] {
    background: color-mix(in srgb, #ffffff 68%, #c7d2df);
}

.playlist-showcase-stories h2[b-x3scmuq2yj] {
    margin: 0 0 0.75rem;
    font-size: clamp(1.3rem, 2.3vw, 1.95rem);
    text-align: center;
}

.playlist-showcase-grid[b-x3scmuq2yj] {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 0.9rem;
    grid-auto-rows: auto;
    scroll-margin-top: 5.4rem;
}

.playlist-showcase-card[b-x3scmuq2yj] {
    min-width: 0;
    width: 220px;
    margin-inline: auto;
}

.playlist-showcase-card-shell[b-x3scmuq2yj] {
    position: relative;
}

.playlist-showcase-card-link[b-x3scmuq2yj] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
}

.playlist-showcase-card-cover[b-x3scmuq2yj] {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #0f1116;
    box-shadow: 0 10px 22px rgba(11, 15, 18, 0.24);
}

.playlist-showcase-card-image[b-x3scmuq2yj] {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.playlist-showcase-card-play[b-x3scmuq2yj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.playlist-showcase-card-play-icon[b-x3scmuq2yj] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    padding-left: 0.16rem;
}

.playlist-showcase-card-link:hover .playlist-showcase-card-image[b-x3scmuq2yj],
.playlist-showcase-card-link:focus-visible .playlist-showcase-card-image[b-x3scmuq2yj] {
    transform: scale(1.03);
    filter: brightness(0.82);
}

.playlist-showcase-card-link:hover .playlist-showcase-card-play[b-x3scmuq2yj],
.playlist-showcase-card-link:focus-visible .playlist-showcase-card-play[b-x3scmuq2yj] {
    opacity: 1;
}

.playlist-showcase-card-copy[b-x3scmuq2yj] {
    display: grid;
    gap: 0.24rem;
    text-align: center;
}

.playlist-showcase-card-title[b-x3scmuq2yj] {
    margin: 0;
    color: #212529;
    font-size: 1rem;
    line-height: 1.35;
    min-height: 2.5em;
}

.playlist-showcase-card-action[b-x3scmuq2yj] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #445056;
}

.playlist-showcase-card.is-highlighted .playlist-showcase-card-cover[b-x3scmuq2yj] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 78%, #ffffff), 0 12px 22px rgba(11, 15, 18, 0.28);
}

.playlist-showcase-card.is-highlighted .playlist-showcase-card-action[b-x3scmuq2yj] {
    color: color-mix(in srgb, var(--accent-deep) 82%, #2d3338);
}

.playlist-showcase-card-link:focus-visible[b-x3scmuq2yj] {
    outline: 3px solid color-mix(in srgb, var(--accent) 68%, #ffffff);
    outline-offset: 3px;
}

.story-favorite-toggle[b-x3scmuq2yj] {
    position: absolute;
    top: 0.58rem;
    right: 0.58rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    z-index: 5;
    opacity: 0.88;
}

.story-favorite-toggle i[b-x3scmuq2yj] {
    font-size: 1.12rem;
    line-height: 1;
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
    transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.story-favorite-toggle:hover[b-x3scmuq2yj],
.story-favorite-toggle:focus-visible[b-x3scmuq2yj] {
    opacity: 1;
}

.story-favorite-toggle:hover i[b-x3scmuq2yj],
.story-favorite-toggle:focus-visible i[b-x3scmuq2yj] {
    transform: scale(1.06);
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.story-favorite-toggle:focus-visible[b-x3scmuq2yj] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-favorite-toggle.is-favorite[b-x3scmuq2yj] {
    color: #ffe6ef;
    opacity: 1;
}

.story-favorite-toggle.is-favorite i[b-x3scmuq2yj],
.story-favorite-toggle.is-favorite:hover i[b-x3scmuq2yj],
.story-favorite-toggle.is-favorite:focus-visible i[b-x3scmuq2yj] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.story-favorite-toggle:disabled[b-x3scmuq2yj] {
    opacity: 0.64;
    cursor: wait;
}

.playlist-showcase-empty-state[b-x3scmuq2yj] {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    background: #222222;
    color: #f6f1ea;
}

.playlist-showcase-empty-state h1[b-x3scmuq2yj] {
    margin-top: 0;
    color: #ffffff;
}

.playlist-showcase-empty-state a[b-x3scmuq2yj] {
    color: #ffffff;
    font-weight: 700;
}

body.schink-night-mode .playlist-showcase-page[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-body[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-splash[b-x3scmuq2yj] {
    background: #0f1519;
}

body.schink-night-mode .playlist-showcase-page[b-x3scmuq2yj] {
    color: #f3f0e8;
}

body.schink-night-mode .playlist-showcase-splash[b-x3scmuq2yj] {
    box-shadow: inset 0 -120px 120px rgba(15, 21, 25, 0.72);
}

body.schink-night-mode .playlist-showcase-splash-backdrop[b-x3scmuq2yj] {
    background: #0f1519;
}

body.schink-night-mode .playlist-showcase-splash-logo[b-x3scmuq2yj] {
    filter:
        drop-shadow(0 18px 36px rgba(0, 0, 0, 0.54))
        drop-shadow(0 0 28px rgba(157, 221, 234, 0.14));
}

body.schink-night-mode .playlist-showcase-action-bar[b-x3scmuq2yj] {
    background: rgba(13, 18, 22, 0.9);
    border: 1px solid rgba(234, 229, 216, 0.14);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
}

body.schink-night-mode .playlist-showcase-playlist-link[b-x3scmuq2yj] {
    color: #141414;
    background: color-mix(in srgb, var(--accent) 90%, #ffffff);
}

body.schink-night-mode .playlist-showcase-playlist-link:hover[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-playlist-link:focus-visible[b-x3scmuq2yj] {
    background: color-mix(in srgb, var(--accent-deep) 82%, #ffffff);
}

body.schink-night-mode .playlist-showcase-secondary-link[b-x3scmuq2yj] {
    color: #f3f0e8;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(234, 229, 216, 0.18);
}

body.schink-night-mode .playlist-showcase-secondary-link:hover[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-secondary-link:focus-visible[b-x3scmuq2yj] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(242, 168, 77, 0.45);
}

body.schink-night-mode .playlist-showcase-intro-count[b-x3scmuq2yj] {
    color: #9dddea;
}

body.schink-night-mode .playlist-showcase-intro-description[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-feature-description[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-card-action[b-x3scmuq2yj] {
    color: #c5d0d4;
}

body.schink-night-mode .playlist-showcase-stories h2[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-feature-title[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-card-title[b-x3scmuq2yj] {
    color: #f7f3ea;
}

body.schink-night-mode .playlist-showcase-feature-cover[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-card-cover[b-x3scmuq2yj] {
    background: #0a0f13;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

body.schink-night-mode .playlist-showcase-card.is-highlighted .playlist-showcase-card-cover[b-x3scmuq2yj] {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 72%, #ffffff),
        0 18px 34px rgba(0, 0, 0, 0.44);
}

body.schink-night-mode .playlist-showcase-card.is-highlighted .playlist-showcase-card-action[b-x3scmuq2yj] {
    color: #f2c57c;
}

body.schink-night-mode .playlist-showcase-empty-state[b-x3scmuq2yj],
body.schink-night-mode .playlist-showcase-loading-state[b-x3scmuq2yj] {
    background: #0f1519;
    color: #f3f0e8;
}

@media (max-width: 980px) {
    .playlist-showcase-grid[b-x3scmuq2yj] {
        grid-template-columns: repeat(auto-fill, minmax(170px, 42vw));
    }

    .playlist-showcase-card[b-x3scmuq2yj] {
        width: 100%;
    }
}

@media (max-width: 780px) {
    .playlist-showcase-page[b-x3scmuq2yj] {
        gap: 1rem;
    }

    .playlist-showcase-body[b-x3scmuq2yj] {
        padding-inline: 0.8rem;
    }

    .playlist-showcase-action-bar[b-x3scmuq2yj] {
        max-width: calc(100% - 1.5rem);
        width: min(calc(100% - 1.5rem), 520px);
        padding: 0.35rem;
        gap: 0.38rem;
    }

    .playlist-showcase-splash-logo[b-x3scmuq2yj] {
        width: min(88vw, 620px);
        max-height: min(54dvh, 500px);
    }

    .playlist-showcase-card-cover[b-x3scmuq2yj] {
        border-radius: 14px;
    }

    .playlist-showcase-feature-card[b-x3scmuq2yj] {
        width: min(100%, 520px);
    }

    .playlist-showcase-feature-cover[b-x3scmuq2yj] {
        border-radius: 16px;
    }
}

@media (max-width: 620px) {
    .playlist-showcase-splash-logo[b-x3scmuq2yj] {
        width: min(88vw, 500px);
        max-height: min(48dvh, 360px);
    }

    .playlist-showcase-grid[b-x3scmuq2yj] {
        grid-template-columns: repeat(2, minmax(146px, 44vw));
        gap: 0.72rem;
    }

    .playlist-showcase-action-bar[b-x3scmuq2yj] {
        flex-wrap: nowrap;
        width: min(calc(100% - 1.5rem), 100%);
    }

    .playlist-showcase-playlist-link[b-x3scmuq2yj],
    .playlist-showcase-secondary-link[b-x3scmuq2yj] {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: 0.66rem;
    }

    .playlist-showcase-playlist-link[b-x3scmuq2yj] {
        flex-grow: 1.2;
        flex-shrink: 0;
    }
}

@media (max-width: 425px) {
    .playlist-showcase-card-cover[b-x3scmuq2yj],
    .playlist-showcase-card-image[b-x3scmuq2yj] {
        max-height: 300px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .playlist-showcase-card-play[b-x3scmuq2yj] {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.03));
    }
}

@media (prefers-reduced-motion: reduce) {
    .playlist-showcase-splash-logo[b-x3scmuq2yj] {
        animation: none;
    }
}
/* /Components/Pages/LuisterStory.razor.rz.scp.css */
.story-player-page[b-l2wr7h0104] {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 1260px);
    min-width: 0;
    margin-inline: auto;
    padding-inline: clamp(0.55rem, 2.4vw, 1.15rem);
}

.story-player-page > *[b-l2wr7h0104] {
    min-width: 0;
}

.story-player-content[b-l2wr7h0104] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
    gap: 0.68rem;
    color: #202020;
    overflow: clip;
    --story-player-viewport-reserve: 20rem;
}

.story-cover-wrap[b-l2wr7h0104] {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.story-cover[b-l2wr7h0104] {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: clamp(240px, calc(100svh - var(--story-player-viewport-reserve)), 760px);
    object-fit: cover;
    display: block;
    border-radius: 22px;
    box-shadow: 0 16px 32px rgba(63, 56, 45, 0.16);
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.story-cover:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-cover-play[b-l2wr7h0104] {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(19, 18, 17, 0.34), rgba(19, 18, 17, 0.08));
    transition: opacity 0.2s ease;
}

.story-cover-play-icon[b-l2wr7h0104] {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 700;
    color: #101722;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(16, 13, 8, 0.2);
    padding-left: 0.22rem;
}

.story-cover-wrap:hover .story-cover[b-l2wr7h0104],
.story-cover-wrap:focus-within .story-cover[b-l2wr7h0104] {
    transform: scale(1.012);
    filter: brightness(0.88);
}

.story-cover-wrap:hover .story-cover-play[b-l2wr7h0104],
.story-cover-wrap:focus-within .story-cover-play[b-l2wr7h0104] {
    opacity: 1;
}

.story-cover-wrap.is-playing .story-cover-play[b-l2wr7h0104],
.story-cover-wrap.is-playing:hover .story-cover-play[b-l2wr7h0104],
.story-cover-wrap.is-playing:focus-within .story-cover-play[b-l2wr7h0104] {
    opacity: 0;
}

.story-cover-wrap.is-playing .story-cover-play-icon[b-l2wr7h0104] {
    font-size: 1.26rem;
    padding-left: 0;
}

.sr-only[b-l2wr7h0104] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.story-nav-btn[b-l2wr7h0104] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.18rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(10, 17, 24, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
    backdrop-filter: blur(5px);
}

.story-nav-btn:hover[b-l2wr7h0104] {
    background: rgba(5, 10, 15, 0.93);
}

.story-nav-btn:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, var(--accent));
    outline-offset: 2px;
}

.story-nav-prev[b-l2wr7h0104] {
    left: -0.95rem;
}

.story-nav-next[b-l2wr7h0104] {
    right: -0.95rem;
}

.story-fullscreen-toggle[b-l2wr7h0104] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    border: 0;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.story-fullscreen-toggle i[b-l2wr7h0104] {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.story-fullscreen-toggle:hover[b-l2wr7h0104] {
    background: rgba(255, 255, 255, 0.2);
}

.story-fullscreen-toggle:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 35%, var(--accent));
    outline-offset: 2px;
}

.story-favorite-toggle[b-l2wr7h0104] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 3;
    opacity: 0.9;
}

.story-favorite-toggle i[b-l2wr7h0104] {
    font-size: 1.32rem;
    line-height: 1;
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
    transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.story-favorite-toggle:hover[b-l2wr7h0104],
.story-favorite-toggle:focus-visible[b-l2wr7h0104] {
    opacity: 1;
}

.story-favorite-toggle:hover i[b-l2wr7h0104],
.story-favorite-toggle:focus-visible i[b-l2wr7h0104] {
    transform: scale(1.06);
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.story-favorite-toggle:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 35%, var(--accent));
    outline-offset: 2px;
}

.story-favorite-toggle.is-favorite[b-l2wr7h0104] {
    color: #ffe6ef;
    opacity: 1;
}

.story-favorite-toggle.is-favorite i[b-l2wr7h0104],
.story-favorite-toggle.is-favorite:hover i[b-l2wr7h0104],
.story-favorite-toggle.is-favorite:focus-visible i[b-l2wr7h0104] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.story-favorite-toggle:disabled[b-l2wr7h0104] {
    opacity: 0.64;
    cursor: wait;
}

.story-favorite-toggle-small[b-l2wr7h0104] {
    top: 0.58rem;
    right: 0.58rem;
    width: 2.2rem;
    height: 2.2rem;
}

.story-favorite-toggle-small i[b-l2wr7h0104] {
    font-size: 1.12rem;
}

.story-favorite-toggle-small.is-favorite[b-l2wr7h0104] {
    color: #ffe6ef;
}

@media (hover: none) and (pointer: coarse) {
    .story-cover-play[b-l2wr7h0104] {
        display: none;
    }
}

.story-player-title[b-l2wr7h0104] {
    margin: 0;
    margin-top: 0.5rem;
    text-align: center;
    color: white;
    font-size: clamp(2rem, 4.2vw, 2.7rem);
    line-height: 1.05;
}

.story-audio[b-l2wr7h0104] {
    width: min(100%, 460px);
    max-width: 100%;
}

.story-player-enhanced .story-audio-native[b-l2wr7h0104] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.story-custom-player[b-l2wr7h0104] {
    width: min(100%, 460px);
    max-width: 100%;
    display: grid;
    gap: 0.9rem;
    color: #232323;
    padding: 0;
}

.story-progress-wrap[b-l2wr7h0104] {
    display: grid;
    gap: 0.42rem;
}

.story-control-bar[b-l2wr7h0104] {
    display: grid;
    gap: 0.7rem;
}

.story-progress-slider[b-l2wr7h0104],
.story-volume-slider[b-l2wr7h0104] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 999px;
    background: #8f8a84;
    outline: none;
}

.story-progress-slider[b-l2wr7h0104]::-webkit-slider-thumb,
.story-volume-slider[b-l2wr7h0104]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 0;
    background: #f3efe9;
    box-shadow: 0 0 0 1px rgba(62, 56, 48, 0.2);
    cursor: pointer;
}

.story-progress-slider[b-l2wr7h0104]::-moz-range-thumb,
.story-volume-slider[b-l2wr7h0104]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 0;
    background: #f3efe9;
    box-shadow: 0 0 0 1px rgba(62, 56, 48, 0.2);
    cursor: pointer;
}

.story-time-row[b-l2wr7h0104] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f3b37;
}

.story-time-row span + span[b-l2wr7h0104]::before {
    content: "/";
    margin-right: 0.4rem;
    color: #7b756f;
}

.story-player-controls[b-l2wr7h0104] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.story-control-btn[b-l2wr7h0104] {
    border: 0;
    background: transparent;
    color: #1c1c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-control-btn:focus-visible[b-l2wr7h0104],
.story-mini-btn:focus-visible[b-l2wr7h0104],
.story-progress-slider:focus-visible[b-l2wr7h0104],
.story-volume-slider:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 20%, var(--accent));
    outline-offset: 2px;
}

.story-play-toggle[b-l2wr7h0104] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1f1f1f;
    color: #faf7f2;
    box-shadow: 0 12px 22px rgba(31, 31, 31, 0.2);
    font-size: 1rem;
}

.story-play-icon[b-l2wr7h0104] {
    font-size: 1rem;
    line-height: 1;
    margin-left: 0;
}

.story-play-toggle.is-playing .story-play-icon[b-l2wr7h0104] {
    margin-left: 0;
    font-size: 1rem;
}

.story-story-prev[b-l2wr7h0104],
.story-story-next[b-l2wr7h0104] {
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: transparent;
    font-size: 1.9rem;
}

.story-story-prev:disabled[b-l2wr7h0104],
.story-story-next:disabled[b-l2wr7h0104] {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-secondary-controls[b-l2wr7h0104] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding-top: 0.1rem;
}

.story-mini-btn[b-l2wr7h0104] {
    min-height: 2rem;
    border: 0;
    border-radius: 999px;
    padding: 0.34rem 0.64rem;
    background: rgba(34, 34, 34, 0.08);
    color: #2a2a2a;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.story-custom-player.volume-unsupported .story-secondary-controls[b-l2wr7h0104] {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
}

.story-custom-player.volume-unsupported .story-volume-slider[b-l2wr7h0104] {
    display: none;
}

.story-custom-player.speed-unsupported .story-speed-toggle[b-l2wr7h0104] {
    opacity: 0.55;
}

.story-mute-icon[b-l2wr7h0104] {
    font-size: 1rem;
    line-height: 1;
}

.story-speed-label[b-l2wr7h0104] {
    font-size: 0.83rem;
    letter-spacing: 0.02em;
}

.story-summary-card[b-l2wr7h0104] {
    width: min(100%, 660px);
    margin-inline: auto;
    background: #222222;
    border-radius: 24px;
    padding: 1.25rem 1.35rem;
    color: #f6f1ea;
    box-shadow: 0 18px 34px rgba(34, 34, 34, 0.12);
    display: grid;
    gap: 1rem;
}

.story-summary-card h1[b-l2wr7h0104],
.story-summary-card h2[b-l2wr7h0104] {
    margin: 0;
}

.story-summary-title[b-l2wr7h0104] {
    text-align: center;
    color: #ffffff;
    font-size: clamp(2rem, 4.2vw, 2.7rem);
    line-height: 1.05;
}

.story-summary-card h2[b-l2wr7h0104] {
    font-size: 1.1rem;
    color: #ffffff;
}

.story-summary-card p[b-l2wr7h0104] {
    margin: 0;
    line-height: 1.5;
}

.story-summary-lead[b-l2wr7h0104] {
    color: #f0ddc8;
    font-size: 1rem;
}

.story-summary-block[b-l2wr7h0104] {
    display: grid;
    gap: 0.75rem;
}

.story-summary-list[b-l2wr7h0104] {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
    line-height: 1.55;
}

.story-summary-list li[b-l2wr7h0104]::marker {
    color: #d4b075;
}

.story-character-list[b-l2wr7h0104] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.story-character-text-list[b-l2wr7h0104] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 0.7rem;
    width: 100%;
    margin: 0.7rem auto 0;
    text-align: center;
}

.story-character-item[b-l2wr7h0104] {
    display: flex;
    flex: 0 0 calc((100% - 1.5rem) / 3);
    width: calc((100% - 1.5rem) / 3);
    max-width: 88px;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: #f6f1ea;
    text-align: center;
    text-decoration: none;
}

.story-character-link[b-l2wr7h0104] {
    border-radius: 16px;
    transition: transform 0.16s ease, color 0.16s ease;
}

.story-character-link:hover[b-l2wr7h0104],
.story-character-link:focus-visible[b-l2wr7h0104] {
    color: #ffffff;
    transform: translateY(-1px);
}

.story-character-link:focus-visible[b-l2wr7h0104] {
    outline: 3px solid rgba(243, 154, 50, 0.45);
    outline-offset: 4px;
}

.story-character-image[b-l2wr7h0104] {
    width: 64px;
    max-width: 64px;
    height: auto;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 14px;
}

.story-character-image-fallback[b-l2wr7h0104] {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22313a;
    background: #f6f1ea;
}

.story-character-name[b-l2wr7h0104] {
    font-size: 0.76rem;
    line-height: 1.2;
    color: inherit;
}

.story-character-text-name[b-l2wr7h0104] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.35rem 1rem 0.4rem;
    border: 1px solid rgba(212, 176, 117, 0.58);
    border-radius: 999px;
    background: rgba(64, 58, 48, 0.72);
    color: #f6f1ea;
    font-size: 0.95rem;
    line-height: 1.25;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.story-summary-tags[b-l2wr7h0104] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    text-align: center;
}

.story-summary-tag[b-l2wr7h0104] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.38rem 0.78rem;
    background: rgba(212, 176, 117, 0.14);
    border: 1px solid rgba(212, 176, 117, 0.34);
    color: #f6f1ea;
    font-size: 0.92rem;
    line-height: 1.2;
}

.story-video-embed[b-l2wr7h0104] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 16 / 9;
    background: #111111;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.story-video-embed iframe[b-l2wr7h0104] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.story-carousel-section[b-l2wr7h0104] {
    --story-carousel-edge-space: 15px;
    margin-top: 0.2rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    text-align: center;
    color: #27231f;
}

.story-carousel-section h2[b-l2wr7h0104] {
    margin-bottom: 0.7rem;
}

.story-carousel[b-l2wr7h0104] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    justify-content: safe center;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: var(--story-carousel-edge-space);
    padding-bottom: 0.38rem;
    width: 100%;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--story-carousel-edge-space);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    cursor: grab;
}

.story-carousel.is-dragging[b-l2wr7h0104] {
    scroll-snap-type: none;
    cursor: grabbing;
}

.story-carousel.is-dragging .story-carousel-link[b-l2wr7h0104] {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.story-carousel-item[b-l2wr7h0104] {
    scroll-snap-align: start;
}

.story-carousel-link[b-l2wr7h0104] {
    color: inherit;
    text-decoration: none;
    display: grid;
    gap: 0.56rem;
    -webkit-user-drag: none;
    user-select: none;
}

.story-carousel-card-shell[b-l2wr7h0104] {
    position: relative;
}

.story-carousel-cover[b-l2wr7h0104] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    background: #111;
    box-shadow: 0 10px 24px rgba(14, 18, 24, 0.3);
}

.story-carousel-image[b-l2wr7h0104] {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.story-carousel .story-cover-play[b-l2wr7h0104] {
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
}

.story-carousel .story-cover-play-icon[b-l2wr7h0104] {
    width: 54px;
    height: 54px;
    font-size: 1.15rem;
    padding-left: 0.16rem;
}

.story-carousel-link:hover .story-carousel-image[b-l2wr7h0104],
.story-carousel-link:focus-visible .story-carousel-image[b-l2wr7h0104] {
    transform: scale(1.03);
    filter: brightness(0.8);
}

.story-carousel-link:hover .story-cover-play[b-l2wr7h0104],
.story-carousel-link:focus-visible .story-cover-play[b-l2wr7h0104] {
    opacity: 1;
}

.story-carousel-copy[b-l2wr7h0104] {
    display: grid;
    gap: 0.24rem;
    text-align: left;
}

.story-carousel-copy h3[b-l2wr7h0104] {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2231;
    min-height: 2.6em;
}

.story-carousel-status[b-l2wr7h0104] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #445056;
}

.story-carousel-item.is-active .story-carousel-cover[b-l2wr7h0104] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 78%, #ffffff), 0 12px 22px rgba(11, 15, 18, 0.28);
}

.story-carousel-item.is-active .story-carousel-status[b-l2wr7h0104] {
    color: color-mix(in srgb, var(--accent-deep) 82%, #2d3338);
}

.story-carousel-link:focus-visible[b-l2wr7h0104] {
    outline: 3px solid color-mix(in srgb, #ffffff 40%, var(--accent));
    outline-offset: 4px;
    border-radius: 16px;
}

.story-player-empty[b-l2wr7h0104] {
    padding: 1.25rem;
    border-radius: 20px;
    background: #222222;
    color: #f6f1ea;
}

.story-player-empty a[b-l2wr7h0104] {
    color: #ffffff;
    font-weight: 700;
}

.story-player-loading[b-l2wr7h0104] {
    width: min(100%, 660px);
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-weight: 700;
}

.story-loading-spinner[b-l2wr7h0104] {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid rgba(246, 241, 234, 0.32);
    border-top-color: #ffffff;
    animation: story-loading-spin-b-l2wr7h0104 760ms linear infinite;
}

.story-player-page.manual-fullscreen-focus[b-l2wr7h0104] {
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000000;
    box-shadow: none;
}

.story-player-page.manual-fullscreen-focus .story-summary-card[b-l2wr7h0104] {
    display: none;
}

.story-player-page.manual-fullscreen-focus .story-carousel-section[b-l2wr7h0104] {
    display: none;
}

.story-player-page.manual-fullscreen-focus .story-player-content[b-l2wr7h0104] {
    position: relative;
    width: 100vw;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    background: #000000;
    isolation: isolate;
}

.story-player-page.manual-fullscreen-focus .story-cover-wrap[b-l2wr7h0104] {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    contain: paint;
    isolation: isolate;
}

.story-player-page.manual-fullscreen-focus .story-cover[b-l2wr7h0104] {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    background: #000000;
    transform-origin: center center;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none;
    -webkit-transform: none;
    animation: none;
}

.story-player-page.manual-fullscreen-focus .story-cover-wrap:hover .story-cover[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-cover-wrap:focus-within .story-cover[b-l2wr7h0104] {
    transform: none;
    -webkit-transform: none;
    filter: none;
}

.story-player-page.manual-fullscreen-focus .story-cover-play[b-l2wr7h0104] {
    border-radius: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.16) 38%, rgba(0, 0, 0, 0) 72%);
}

.story-player-page.manual-fullscreen-focus .story-nav-btn[b-l2wr7h0104] {
    width: 3rem;
    height: 3rem;
    font-size: 1.35rem;
    background: rgba(8, 12, 16, 0.72);
}

.story-player-page.manual-fullscreen-focus .story-nav-prev[b-l2wr7h0104] {
    left: 0.7rem;
}

.story-player-page.manual-fullscreen-focus .story-nav-next[b-l2wr7h0104] {
    right: 0.7rem;
}

.story-player-page.manual-fullscreen-focus .story-audio[b-l2wr7h0104] {
    width: 1px;
}

.story-player-page.manual-fullscreen-focus .story-fullscreen-toggle[b-l2wr7h0104] {
    top: max(0.7rem, env(safe-area-inset-top));
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: auto;
    z-index: 7;
    background: rgba(12, 15, 20, 0.56);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 28px rgba(0, 0, 0, 0.3);
}

.story-player-page.manual-fullscreen-focus .story-favorite-toggle[b-l2wr7h0104] {
    top: max(0.7rem, env(safe-area-inset-top));
    right: calc(max(0.7rem, env(safe-area-inset-right)) + 3.45rem);
    z-index: 7;
    background: transparent;
    box-shadow: none;
}

.story-player-page.manual-fullscreen-focus .story-favorite-toggle i[b-l2wr7h0104] {
    text-shadow: rgb(0 0 0 / 95%) 0px 2px 8px;
}

.story-player-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite i[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite:hover i[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-favorite-toggle.is-favorite:focus-visible i[b-l2wr7h0104] {
    text-shadow: rgb(0 0 0 / 28%) 0px 1px 2px;
}

.story-player-page.manual-fullscreen-focus .story-custom-player[b-l2wr7h0104] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 6;
    width: 100%;
    max-width: none;
    color: #f2f5f9;
    padding: 1rem max(1.2rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
    border-radius: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.06) 100%);
    backdrop-filter: blur(10px) saturate(125%);
    box-shadow: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.story-player-page.manual-fullscreen-focus .story-control-bar[b-l2wr7h0104] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.story-player-page.manual-fullscreen-focus .story-progress-slider[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-volume-slider[b-l2wr7h0104] {
    height: 6px;
    background: rgba(240, 244, 250, 0.24);
}

.story-player-page.manual-fullscreen-focus .story-progress-slider[b-l2wr7h0104]::-webkit-slider-thumb,
.story-player-page.manual-fullscreen-focus .story-volume-slider[b-l2wr7h0104]::-webkit-slider-thumb,
.story-player-page.manual-fullscreen-focus .story-progress-slider[b-l2wr7h0104]::-moz-range-thumb,
.story-player-page.manual-fullscreen-focus .story-volume-slider[b-l2wr7h0104]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(11, 15, 20, 0.42);
}

.story-player-page.manual-fullscreen-focus .story-player-controls[b-l2wr7h0104] {
    justify-content: flex-start;
    gap: 0.9rem;
}

.story-player-page.manual-fullscreen-focus .story-time-row[b-l2wr7h0104] {
    justify-content: flex-start;
    gap: 0.45rem;
    color: #edf2f8;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.story-player-page.manual-fullscreen-focus .story-time-row span + span[b-l2wr7h0104]::before {
    color: rgba(237, 242, 248, 0.72);
}

.story-player-page.manual-fullscreen-focus .story-control-btn[b-l2wr7h0104] {
    color: #f5f9ff;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.story-player-page.manual-fullscreen-focus .story-play-toggle[b-l2wr7h0104] {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    padding: 0.1rem 0.18rem;
    background: transparent;
    color: #f5f9ff;
    box-shadow: none;
    font-size: 1.85rem;
}

.story-player-page.manual-fullscreen-focus .story-story-prev[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-story-next[b-l2wr7h0104] {
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    padding: 0.08rem;
    background: transparent;
    font-size: 1.8rem;
}

.story-player-page.manual-fullscreen-focus .story-story-prev:disabled[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-story-next:disabled[b-l2wr7h0104] {
    background: transparent;
}

.story-player-page.manual-fullscreen-focus .story-secondary-controls[b-l2wr7h0104] {
    width: auto;
    padding-top: 0;
    grid-template-columns: auto minmax(110px, 150px) auto auto;
    justify-content: end;
    gap: 0.8rem;
}

.story-player-page.manual-fullscreen-focus .story-mini-btn[b-l2wr7h0104] {
    min-height: 0;
    padding: 0.12rem 0.18rem;
    border-radius: 0;
    background: transparent;
    color: #f2f5f9;
}

.story-player-page.manual-fullscreen-focus .story-speed-toggle[b-l2wr7h0104] {
    font-size: 1rem;
    font-weight: 800;
}

.story-player-page.manual-fullscreen-focus .story-volume-slider[b-l2wr7h0104] {
    max-width: 150px;
}

.story-player-page.manual-fullscreen-focus .story-fullscreen-toggle[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-favorite-toggle[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus .story-nav-btn[b-l2wr7h0104] {
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-custom-player[b-l2wr7h0104] {
    opacity: 0;
    transform: translateY(1.1rem);
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-fullscreen-toggle[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-favorite-toggle[b-l2wr7h0104],
.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-nav-btn[b-l2wr7h0104] {
    opacity: 0;
    pointer-events: none;
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-fullscreen-toggle[b-l2wr7h0104] {
    transform: translateY(-0.45rem);
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-favorite-toggle[b-l2wr7h0104] {
    transform: translateY(-0.45rem);
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-nav-prev[b-l2wr7h0104] {
    transform: translate(-0.45rem, -50%);
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-nav-next[b-l2wr7h0104] {
    transform: translate(0.45rem, -50%);
}

.story-player-page.manual-fullscreen-focus.fullscreen-controls-hidden .story-player-content[b-l2wr7h0104] {
    cursor: none;
}

@keyframes story-loading-spin-b-l2wr7h0104 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .story-carousel[b-l2wr7h0104] {
        grid-auto-columns: minmax(170px, 42vw);
    }
}

@media (max-width: 620px) {
    .story-carousel[b-l2wr7h0104] {
        grid-auto-columns: minmax(146px, 44vw);
        gap: 0.72rem;
        padding-inline: var(--story-carousel-edge-space);
        scroll-padding-inline: var(--story-carousel-edge-space);
    }
}

@media (min-width: 641px) {
    .story-player-content[b-l2wr7h0104] {
        min-height: calc(100dvh - 5.5rem);
        --story-player-viewport-reserve: 15.5rem;
    }

    .story-cover-wrap[b-l2wr7h0104] {
        width: fit-content;
        max-width: 100%;
        max-height: calc(100svh - var(--story-player-viewport-reserve));
        margin-inline: auto;
        border-radius: 22px;
        overflow: hidden;
    }

    .story-cover[b-l2wr7h0104] {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(100svh - var(--story-player-viewport-reserve));
        aspect-ratio: auto;
        object-fit: contain;
        border-radius: 0;
    }

    .story-player-title[b-l2wr7h0104] {
        order: 1;
    }

    .story-custom-player[b-l2wr7h0104] {
        order: 2;
        margin-top: auto;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .story-player-content[b-l2wr7h0104] {
        min-height: auto;
    }

    .story-custom-player[b-l2wr7h0104] {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .story-player-page[b-l2wr7h0104] {
        gap: 1rem;
    }

    .story-player-content[b-l2wr7h0104] {
        gap: 0.75rem;
        --story-player-viewport-reserve: 20.25rem;
    }

    .story-cover-wrap[b-l2wr7h0104] {
        overflow: hidden;
    }

    .story-cover[b-l2wr7h0104] {
        aspect-ratio: 40 / 27;
        object-position: center bottom;
    }

    .story-audio[b-l2wr7h0104] {
        width: 100%;
    }

    .story-audio-native[b-l2wr7h0104] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .story-custom-player[b-l2wr7h0104] {
        display: grid;
    }

    .story-play-toggle[b-l2wr7h0104] {
        width: 50px;
        height: 50px;
    }

    .story-play-icon[b-l2wr7h0104] {
        font-size: 1rem;
    }

    .story-player-controls[b-l2wr7h0104] {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
    }

    .story-time-row[b-l2wr7h0104] {
        grid-column: 1 / -1;
        order: -1;
        justify-content: center;
        margin-bottom: 0.15rem;
    }

    .story-story-prev[b-l2wr7h0104],
    .story-story-next[b-l2wr7h0104] {
        min-width: 50px;
        min-height: 50px;
        font-size: 1.7rem;
    }

    .story-secondary-controls[b-l2wr7h0104] {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 0.55rem;
    }

    .story-mini-btn[b-l2wr7h0104] {
        min-height: 2.25rem;
        padding: 0.28rem 0.56rem;
    }

    .story-volume-slider[b-l2wr7h0104] {
        display: none;
    }

    .story-progress-slider[b-l2wr7h0104],
    .story-volume-slider[b-l2wr7h0104] {
        height: 6px;
    }

    .story-progress-slider[b-l2wr7h0104]::-webkit-slider-thumb,
    .story-volume-slider[b-l2wr7h0104]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    .story-progress-slider[b-l2wr7h0104]::-moz-range-thumb,
    .story-volume-slider[b-l2wr7h0104]::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .story-nav-prev[b-l2wr7h0104] {
        left: 0.45rem;
    }

    .story-nav-next[b-l2wr7h0104] {
        right: 0.45rem;
    }

    .story-player-page.manual-fullscreen-focus .story-player-content[b-l2wr7h0104] {
        min-height: 100dvh;
    }

    .story-player-page.manual-fullscreen-focus .story-custom-player[b-l2wr7h0104] {
        gap: 0.75rem;
        padding: 0.82rem max(0.75rem, env(safe-area-inset-right)) calc(0.85rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .story-player-page.manual-fullscreen-focus .story-control-bar[b-l2wr7h0104] {
        gap: 0.75rem;
    }

    .story-player-page.manual-fullscreen-focus .story-player-controls[b-l2wr7h0104] {
        gap: 0.8rem;
    }

    .story-player-page.manual-fullscreen-focus .story-time-row[b-l2wr7h0104] {
        width: 100%;
        font-size: 0.88rem;
    }

    .story-player-page.manual-fullscreen-focus .story-secondary-controls[b-l2wr7h0104] {
        width: 100%;
        justify-content: end;
    }
}

@media (max-width: 380px) {
    .story-play-toggle[b-l2wr7h0104] {
        width: 50px;
        height: 50px;
    }

    .story-play-icon[b-l2wr7h0104] {
        font-size: 1rem;
    }

    .story-story-prev[b-l2wr7h0104],
    .story-story-next[b-l2wr7h0104] {
        min-width: 46px;
        min-height: 46px;
    }

    .story-time-row[b-l2wr7h0104] {
        font-size: 0.8rem;
    }

    .story-summary-card[b-l2wr7h0104] {
        padding: 1.1rem 1rem;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-player-page.manual-fullscreen-focus .story-cover[b-l2wr7h0104] {
        animation: none;
        transform: none;
        -webkit-transform: none;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .story-player-page:not(.manual-fullscreen-focus)[b-l2wr7h0104] {
        padding-inline: max(0.7rem, env(safe-area-inset-left)) max(0.7rem, env(safe-area-inset-right));
    }

    .story-player-page:not(.manual-fullscreen-focus) .story-player-content[b-l2wr7h0104] {
        gap: 0.5rem;
        --story-player-viewport-reserve: 9.5rem;
    }

    .story-player-page:not(.manual-fullscreen-focus) .story-cover-wrap[b-l2wr7h0104] {
        width: min(100%, 760px);
        max-width: calc(100vw - 1.4rem);
        max-height: clamp(190px, calc(100svh - var(--story-player-viewport-reserve)), 360px);
    }

    .story-player-page:not(.manual-fullscreen-focus) .story-cover[b-l2wr7h0104] {
        width: 100%;
        height: auto;
        max-height: clamp(190px, calc(100svh - var(--story-player-viewport-reserve)), 360px);
        aspect-ratio: 40 / 27;
        object-fit: cover;
        object-position: center center;
    }

    .story-player-page.manual-fullscreen-focus .story-cover[b-l2wr7h0104] {
        animation: none;
        transform: none;
        -webkit-transform: none;
    }
}
/* /Components/Pages/MeerOorOns.razor.rz.scp.css */
.about-page[b-u8w5xj0xjz] {
    --about-ink: #233428;
    --about-muted: #5e6f63;
    --about-line: rgba(35, 52, 40, 0.12);
    --about-accent: #d86f34;
    --about-accent-deep: #a74a1f;
    width: min(100%, 1080px);
    margin-inline: auto;
    padding: clamp(1.2rem, 2vw, 2.2rem);
    display: grid;
    gap: 1.2rem;
    color: var(--about-ink);
}

.about-page > *[b-u8w5xj0xjz] {
    opacity: 0;
    transform: translateY(18px);
    animation: about-reveal-b-u8w5xj0xjz 560ms ease-out forwards;
}

.about-page > *:nth-child(1)[b-u8w5xj0xjz] { animation-delay: 30ms; }
.about-page > *:nth-child(2)[b-u8w5xj0xjz] { animation-delay: 90ms; }
.about-page > *:nth-child(3)[b-u8w5xj0xjz] { animation-delay: 150ms; }
.about-page > *:nth-child(4)[b-u8w5xj0xjz] { animation-delay: 210ms; }
.about-page > *:nth-child(5)[b-u8w5xj0xjz] { animation-delay: 270ms; }
.about-page > *:nth-child(6)[b-u8w5xj0xjz] { animation-delay: 330ms; }
.about-page > *:nth-child(7)[b-u8w5xj0xjz] { animation-delay: 390ms; }
.about-page > *:nth-child(8)[b-u8w5xj0xjz] { animation-delay: 450ms; }
.about-page > *:nth-child(9)[b-u8w5xj0xjz] { animation-delay: 510ms; }
.about-page > *:nth-child(10)[b-u8w5xj0xjz] { animation-delay: 570ms; }
.about-page > *:nth-child(11)[b-u8w5xj0xjz] { animation-delay: 630ms; }
.about-page > *:nth-child(12)[b-u8w5xj0xjz] { animation-delay: 690ms; }
.about-page > *:nth-child(13)[b-u8w5xj0xjz] { animation-delay: 750ms; }

.about-hero[b-u8w5xj0xjz],
.about-title-block[b-u8w5xj0xjz],
.about-block[b-u8w5xj0xjz],
.about-card[b-u8w5xj0xjz] {
    border: 1px solid var(--about-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 179, 0.34), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 248, 237, 0.96) 100%);
    box-shadow: 0 26px 70px rgba(86, 64, 35, 0.12);
}

.about-hero[b-u8w5xj0xjz],
.about-title-block[b-u8w5xj0xjz],
.about-block[b-u8w5xj0xjz],
.about-card[b-u8w5xj0xjz] {
    padding: clamp(1.2rem, 2.6vw, 2rem);
}

.about-hero[b-u8w5xj0xjz],
.about-title-block[b-u8w5xj0xjz],
.about-intro-block[b-u8w5xj0xjz] {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about-title-block[b-u8w5xj0xjz],
.about-intro-block[b-u8w5xj0xjz] {
    padding: 0;
}

.about-hero[b-u8w5xj0xjz] {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about-hero img[b-u8w5xj0xjz] {
    width: min(100%, 32rem);
    height: auto;
    display: block;
    background: transparent;
    box-shadow: none;
    animation: about-image-float-b-u8w5xj0xjz 12s ease-in-out 1s infinite;
}

.about-title-block[b-u8w5xj0xjz] {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    text-align: center;
}

.eyebrow[b-u8w5xj0xjz] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--about-accent-deep);
}

.about-title-block h1[b-u8w5xj0xjz] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.about-block[b-u8w5xj0xjz],
.about-card[b-u8w5xj0xjz] {
    display: grid;
    gap: 0.85rem;
}

.about-block p[b-u8w5xj0xjz],
.about-card p[b-u8w5xj0xjz],
.about-card li[b-u8w5xj0xjz],
.testimonials blockquote[b-u8w5xj0xjz] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--about-muted);
}

.about-grid[b-u8w5xj0xjz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.about-card h2[b-u8w5xj0xjz],
.about-block h2[b-u8w5xj0xjz] {
    margin: 0;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.15;
}

.about-card ul[b-u8w5xj0xjz] {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.6rem;
}

.focus-card[b-u8w5xj0xjz],
.review-card[b-u8w5xj0xjz] {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.focus-card[b-u8w5xj0xjz] {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 224, 196, 0.42), transparent 34%),
        rgba(255, 255, 255, 0.9);
}

.focus-card[b-u8w5xj0xjz]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, rgba(216, 111, 52, 0.84) 0%, rgba(35, 52, 40, 0.7) 100%);
}

.focus-card:hover[b-u8w5xj0xjz],
.focus-card:focus-within[b-u8w5xj0xjz],
.review-card:hover[b-u8w5xj0xjz],
.review-card:focus-within[b-u8w5xj0xjz] {
    transform: translateY(-2px);
    border-color: rgba(167, 74, 31, 0.16);
    box-shadow: 0 22px 54px rgba(78, 58, 32, 0.14);
}

.founder-block[b-u8w5xj0xjz],
.callout[b-u8w5xj0xjz],
.final-line[b-u8w5xj0xjz],
.mission-image-block[b-u8w5xj0xjz],
.who-we-are-intro[b-u8w5xj0xjz] {
    justify-items: center;
    text-align: center;
}

.founder-block[b-u8w5xj0xjz],
.mission-image-block[b-u8w5xj0xjz] {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.founder-photo[b-u8w5xj0xjz] {
    width: min(180px, 45vw);
    height: auto;
    border-radius: 999px;
    border: 0;
    box-shadow: none;
    display: block;
    margin: 0 auto;
}

.mission-aap[b-u8w5xj0xjz],
.promise-panda[b-u8w5xj0xjz],
.who-we-are-photo[b-u8w5xj0xjz] {
    width: min(100%, 35rem);
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 26px 60px rgba(72, 48, 23, 0.18);
    background: linear-gradient(180deg, #fff8f0 0%, #f9e9d8 100%);
    animation: about-image-float-b-u8w5xj0xjz 12s ease-in-out 1.2s infinite;
}

.mission-aap[b-u8w5xj0xjz] {
    animation-delay: 1.1s;
}

.who-we-are-photo[b-u8w5xj0xjz] {
    margin-top: 0.4rem;
    animation-delay: 1.3s;
}

.promise-panda[b-u8w5xj0xjz] {
    margin-top: 0.7rem;
}

.callout h2[b-u8w5xj0xjz] {
    margin-bottom: 0.1rem;
}

.testimonials[b-u8w5xj0xjz] {
    gap: 1rem;
}

.review-grid[b-u8w5xj0xjz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.review-card[b-u8w5xj0xjz] {
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 24px;
    padding: 1rem;
    display: grid;
    gap: 0.55rem;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 48px rgba(78, 58, 32, 0.1);
}

.review-stars[b-u8w5xj0xjz] {
    margin: 0;
    color: var(--about-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.92rem;
}

.review-stars i[b-u8w5xj0xjz] {
    line-height: 1;
}

.review-author[b-u8w5xj0xjz] {
    margin: 0;
    color: var(--about-ink);
    font-weight: 700;
    font-size: 0.94rem;
}

.review-role[b-u8w5xj0xjz] {
    display: inline-block;
    margin-top: 0.2rem;
    font-weight: 500;
    font-size: 0.84rem;
    color: var(--about-muted);
}

.join-link[b-u8w5xj0xjz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    margin-top: 0.25rem;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    font-weight: 700;
    color: #fffefb;
    background: linear-gradient(135deg, var(--about-accent) 0%, #c8591f 100%);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.join-link:hover[b-u8w5xj0xjz] {
    transform: translateY(-1px);
}

.join-link:focus-visible[b-u8w5xj0xjz] {
    outline: 3px solid rgba(216, 111, 52, 0.22);
    outline-offset: 2px;
}

@keyframes about-reveal-b-u8w5xj0xjz {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes about-image-float-b-u8w5xj0xjz {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page > *[b-u8w5xj0xjz] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .focus-card[b-u8w5xj0xjz],
    .review-card[b-u8w5xj0xjz],
    .join-link[b-u8w5xj0xjz],
    .about-hero img[b-u8w5xj0xjz],
    .mission-aap[b-u8w5xj0xjz],
    .promise-panda[b-u8w5xj0xjz],
    .who-we-are-photo[b-u8w5xj0xjz] {
        transition: none;
        animation: none;
    }
}

@media (max-width: 740px) {
    .about-page[b-u8w5xj0xjz] {
        padding: 1rem;
    }

    .about-hero[b-u8w5xj0xjz],
    .about-title-block[b-u8w5xj0xjz],
    .about-block[b-u8w5xj0xjz],
    .about-card[b-u8w5xj0xjz] {
        border-radius: 24px;
    }

    .about-hero[b-u8w5xj0xjz],
    .about-title-block[b-u8w5xj0xjz],
    .about-intro-block[b-u8w5xj0xjz] {
        border-radius: 0;
    }

    .about-grid[b-u8w5xj0xjz],
    .review-grid[b-u8w5xj0xjz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MyStories.razor.rz.scp.css */
.my-stories-page[b-bub07o9spt] {
    width: min(100%, 980px);
    margin-inline: auto;
    padding-inline: clamp(0.9rem, 2vw, 1.5rem);
    box-sizing: border-box;
    display: grid;
    gap: 1.15rem;
}

.my-stories-hero[b-bub07o9spt] {
    padding: clamp(0.8rem, 2vw, 1rem);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, #bac2bf);
    background: color-mix(in srgb, var(--surface) 92%, white);
}

.my-stories-hero h1[b-bub07o9spt] {
    margin: 0;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
}

.my-stories-hero p[b-bub07o9spt] {
    margin: 0.45rem 0 0;
    color: var(--muted);
    max-width: 66ch;
}

.my-stories-state[b-bub07o9spt] {
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--line) 78%, #bbc4bf);
    background: color-mix(in srgb, var(--surface) 90%, white);
}

.my-stories-state h2[b-bub07o9spt] {
    margin: 0;
    font-size: 1.2rem;
}

.my-stories-state p[b-bub07o9spt] {
    margin: 0.44rem 0 0;
    color: var(--muted);
}

.my-stories-actions[b-bub07o9spt] {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.my-stories-btn[b-bub07o9spt] {
    min-height: 42px;
    padding: 0.62rem 0.92rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    color: #181818;
    background: var(--accent);
}

.my-stories-btn:hover[b-bub07o9spt] {
    background: var(--accent-deep);
}

.my-stories-btn-secondary[b-bub07o9spt] {
    color: #163847;
    border: 1px solid color-mix(in srgb, var(--line) 84%, #bdc6c1);
    background: color-mix(in srgb, var(--surface) 92%, white);
}

.my-stories-btn-secondary:hover[b-bub07o9spt] {
    background: color-mix(in srgb, var(--surface) 75%, #dbe5df);
}

.my-stories-section[b-bub07o9spt] {
    display: grid;
    gap: 0.72rem;
}

.my-stories-section h2[b-bub07o9spt] {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.18;
}

.my-stories-carousel[b-bub07o9spt] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 0.1rem;
    padding-bottom: 0.38rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.1rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
}

.my-stories-carousel[b-bub07o9spt]::-webkit-scrollbar {
    height: 8px;
}

.my-stories-carousel[b-bub07o9spt]::-webkit-scrollbar-track {
    background: rgba(15, 26, 42, 0.08);
    border-radius: 999px;
}

.my-stories-carousel[b-bub07o9spt]::-webkit-scrollbar-thumb {
    background: rgba(15, 26, 42, 0.26);
    border-radius: 999px;
}

.my-story-card[b-bub07o9spt] {
    scroll-snap-align: start;
    min-width: 0;
}

.my-stories-page .my-stories-carousel .my-story-card[b-bub07o9spt] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: inherit;
}

.my-story-link[b-bub07o9spt] {
    display: grid;
    gap: 0.55rem;
    color: inherit;
    text-decoration: none;
    background: transparent;
    -webkit-user-drag: none;
    user-select: none;
}

.my-story-image-shell[b-bub07o9spt] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 3 / 4;
    background: #111;
    box-shadow: 0 10px 24px rgba(14, 18, 24, 0.3);
}

.my-story-image-shell img[b-bub07o9spt] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.my-story-link:hover .my-story-image-shell img[b-bub07o9spt],
.my-story-link:focus-visible .my-story-image-shell img[b-bub07o9spt] {
    transform: scale(1.03);
    filter: brightness(0.8);
}

.my-story-play[b-bub07o9spt] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1));
    transition: opacity 0.2s ease;
}

.my-story-play-icon[b-bub07o9spt] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.16rem;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent) 90%, white);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    font-size: 1.15rem;
}

.my-story-link:hover .my-story-play[b-bub07o9spt],
.my-story-link:focus-visible .my-story-play[b-bub07o9spt] {
    opacity: 1;
}

.my-story-copy[b-bub07o9spt] {
    display: grid;
    gap: 0.32rem;
    padding-inline: 0.08rem;
    min-width: 0;
}

.my-story-copy h3[b-bub07o9spt] {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2231;
    min-height: 2.7em;
    overflow-wrap: anywhere;
}

.my-story-meta[b-bub07o9spt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
    color: #35505b;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.my-story-meta span + span[b-bub07o9spt]::before {
    content: "";
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    vertical-align: middle;
    background: color-mix(in srgb, #35505b 55%, transparent);
}

.my-story-progress[b-bub07o9spt] {
    display: block;
    width: 100%;
    height: 0.34rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(53, 80, 91, 0.16);
}

.my-story-progress span[b-bub07o9spt] {
    display: block;
    width: var(--my-story-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2d8d95, #cfbf59);
}

.my-story-card.is-complete .my-story-progress span[b-bub07o9spt] {
    background: linear-gradient(90deg, #2f8c61, #cfbf59);
}

.my-story-link:focus-visible[b-bub07o9spt] {
    outline: 3px solid color-mix(in srgb, #ffffff 40%, var(--accent));
    outline-offset: 4px;
    border-radius: 16px;
}

@media (max-width: 980px) {
    .my-stories-carousel[b-bub07o9spt] {
        grid-auto-columns: clamp(180px, 42vw, 220px);
    }
}

@media (max-width: 680px) {
    .my-stories-page[b-bub07o9spt] {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: 0.85rem;
        gap: 0.9rem;
    }

    .my-stories-hero[b-bub07o9spt] {
        padding: 0.82rem;
        border-radius: 12px;
    }

    .my-stories-hero h1[b-bub07o9spt] {
        font-size: clamp(1.42rem, 7vw, 1.75rem);
        line-height: 1.16;
    }

    .my-stories-hero p[b-bub07o9spt] {
        margin-top: 0.3rem;
        font-size: 0.94rem;
        line-height: 1.45;
    }

    .my-stories-section[b-bub07o9spt] {
        gap: 0.55rem;
    }

    .my-stories-section h2[b-bub07o9spt] {
        font-size: clamp(1.12rem, 5.8vw, 1.38rem);
    }

    .my-stories-carousel[b-bub07o9spt] {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        grid-auto-columns: minmax(146px, 44vw);
        gap: 0.72rem;
        padding-inline: 0.85rem;
        padding-bottom: 0.25rem;
        scroll-padding-inline: 0.85rem;
    }

    .my-story-link[b-bub07o9spt] {
        gap: 0.45rem;
    }

    .my-story-image-shell[b-bub07o9spt] {
        border-radius: 12px;
    }

    .my-story-copy[b-bub07o9spt] {
        gap: 0.24rem;
        padding-inline: 0.02rem;
    }

    .my-story-copy h3[b-bub07o9spt] {
        font-size: 0.94rem;
        line-height: 1.28;
        min-height: 2.56em;
    }

    .my-story-meta[b-bub07o9spt] {
        font-size: 0.78rem;
        gap: 0.2rem 0.34rem;
    }

    .my-story-meta span + span[b-bub07o9spt]::before {
        margin-right: 0.34rem;
    }

    .my-story-progress[b-bub07o9spt] {
        height: 0.3rem;
    }

    .my-stories-actions[b-bub07o9spt] {
        display: grid;
    }

    .my-stories-btn[b-bub07o9spt] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (hover: none) and (pointer: coarse) {
    .my-stories-carousel[b-bub07o9spt] {
        touch-action: auto;
    }

    .my-story-play[b-bub07o9spt] {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.03));
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-shell[b-wqednup1gt] {
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.2rem) 0 clamp(1.4rem, 3.4vw, 2.4rem);
    display: grid;
    grid-template-columns: minmax(240px, 380px) minmax(260px, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.4rem);
}

.not-found-image[b-wqednup1gt] {
    width: min(100%, 360px);
    height: auto;
    display: block;
    justify-self: center;
}

.not-found-copy[b-wqednup1gt] {
    max-width: 58ch;
}

.not-found-copy h1[b-wqednup1gt] {
    margin: 0 0 0.65rem;
    color: #1f2d3d;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
    line-height: 1.15;
}

.not-found-copy p[b-wqednup1gt] {
    margin: 0;
    color: #324a66;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.55;
}

.not-found-home-btn[b-wqednup1gt] {
    margin-top: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.7rem 1.35rem;
    background: #f08273;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 2px solid #2f2f2f;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.not-found-home-btn:hover[b-wqednup1gt] {
    filter: brightness(1.04);
}

.not-found-home-btn:focus-visible[b-wqednup1gt] {
    outline: 3px solid color-mix(in srgb, #ffffff 50%, #f08273);
    outline-offset: 2px;
}

@media (max-width: 820px) {
    .not-found-shell[b-wqednup1gt] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding-top: 0.6rem;
    }

    .not-found-image[b-wqednup1gt] {
        width: min(100%, 300px);
    }

    .not-found-copy[b-wqednup1gt] {
        max-width: 65ch;
    }
}
/* /Components/Pages/Opsies.razor.rz.scp.css */
.opsies-page[b-2n9o258j23] {
    --opsies-ink: #233428;
    --opsies-muted: #5e6f63;
    --opsies-line: rgba(35, 52, 40, 0.12);
    --opsies-accent: #d86f34;
    --opsies-accent-deep: #a74a1f;
    --opsies-bubble-warm: rgba(216, 111, 52, 0.045);
    --opsies-bubble-green: rgba(64, 141, 147, 0.035);
    position: relative;
    width: min(1160px, 100%);
    margin-inline: auto;
    padding: clamp(1.4rem, 2vw, 2.2rem);
    box-sizing: border-box;
    display: grid;
    gap: 1.4rem;
    color: var(--opsies-ink);
    background: #ffffff;
}

.opsies-page > *[b-2n9o258j23] {
    opacity: 0;
    transform: translateY(18px);
    animation: opsies-reveal-b-2n9o258j23 560ms ease-out forwards;
}

.opsies-page > *:nth-child(1)[b-2n9o258j23] { animation-delay: 30ms; }
.opsies-page > *:nth-child(2)[b-2n9o258j23] { animation-delay: 90ms; }
.opsies-page > *:nth-child(3)[b-2n9o258j23] { animation-delay: 150ms; }
.opsies-page > *:nth-child(4)[b-2n9o258j23] { animation-delay: 210ms; }

.opsies-page-logo[b-2n9o258j23] {
    display: flex;
    justify-content: center;
    margin: 0 auto -0.25rem;
}

.opsies-page-logo-image[b-2n9o258j23] {
    display: block;
    width: clamp(180px, 22vw, 280px);
    height: auto;
    filter: drop-shadow(0 16px 24px rgba(28, 86, 88, 0.14));
}

.opsies-payment-status[b-2n9o258j23],
.opsies-hero[b-2n9o258j23],
.opsies-plan-shell[b-2n9o258j23],
.opsies-compare[b-2n9o258j23],
.opsies-faq[b-2n9o258j23],
.opsies-testimonials[b-2n9o258j23],
.opsie-card[b-2n9o258j23] {
    border: 1px solid var(--opsies-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, var(--opsies-bubble-warm), transparent 38%),
        radial-gradient(circle at bottom left, var(--opsies-bubble-green), transparent 42%),
        #ffffff;
    box-shadow: 0 22px 54px rgba(36, 50, 42, 0.075);
}

.opsies-payment-status[b-2n9o258j23] {
    margin: 0;
    padding: 0.95rem 1.1rem;
    font-weight: 700;
}

.opsies-payment-success[b-2n9o258j23] {
    border-color: rgba(41, 114, 71, 0.22);
    background: linear-gradient(135deg, rgba(228, 247, 235, 0.98) 0%, rgba(246, 255, 249, 0.98) 100%);
    color: #1f5d38;
}

.opsies-payment-cancelled[b-2n9o258j23] {
    border-color: rgba(183, 86, 56, 0.2);
    background: linear-gradient(135deg, rgba(255, 239, 231, 0.98) 0%, rgba(255, 248, 244, 0.98) 100%);
    color: #91451f;
}

.opsies-payment-blocked[b-2n9o258j23] {
    border-color: rgba(57, 95, 150, 0.18);
    background: linear-gradient(135deg, rgba(236, 244, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
    color: #2b4a82;
}

.opsies-hero[b-2n9o258j23],
.opsies-plan-shell[b-2n9o258j23],
.opsies-compare[b-2n9o258j23],
.opsies-faq[b-2n9o258j23],
.opsies-testimonials[b-2n9o258j23] {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.4rem);
    padding: clamp(1.4rem, 2.6vw, 2.3rem);
}

.opsies-hero[b-2n9o258j23] {
    overflow: hidden;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.opsies-hero-copy[b-2n9o258j23] {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    max-width: 48rem;
    order: 2;
}

.opsies-eyebrow[b-2n9o258j23],
.opsies-section-kicker[b-2n9o258j23] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--opsies-accent-deep);
}

.opsies-hero-copy h1[b-2n9o258j23] {
    margin: 0 auto;
    width: fit-content;
    max-width: min(100%, 18ch);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(1.76rem, 3.2vw, 2.72rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.opsies-hero-lead[b-2n9o258j23],
.opsies-section-heading p:last-child[b-2n9o258j23],
.opsies-hero-point span[b-2n9o258j23],
.opsie-summary[b-2n9o258j23],
.opsie-detail[b-2n9o258j23],
.opsie-note[b-2n9o258j23],
.opsies-review-card blockquote[b-2n9o258j23],
.opsies-review-role[b-2n9o258j23] {
    margin: 0;
    color: var(--opsies-muted);
    line-height: 1.68;
}

.opsies-hero-lead[b-2n9o258j23] {
    max-width: 54ch;
}

.opsies-hero-points[b-2n9o258j23] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.opsies-hero-point[b-2n9o258j23] {
    display: grid;
    gap: 0.38rem;
    padding: 1rem;
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(64, 141, 147, 0.035), transparent 44%),
        #ffffff;
    box-shadow: 0 14px 34px rgba(36, 50, 42, 0.06);
}

.opsies-hero-point strong[b-2n9o258j23] {
    color: var(--opsies-ink);
    font-size: 0.96rem;
}

.opsies-plan-shell[b-2n9o258j23] {
    scroll-margin-top: 6rem;
}

.opsies-section-heading[b-2n9o258j23] {
    display: grid;
    justify-items: start;
    gap: 0.62rem;
    max-width: 46rem;
}

.opsies-section-heading-centered[b-2n9o258j23] {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
}

.opsies-section-heading h2[b-2n9o258j23] {
    margin: 0;
    width: fit-content;
    max-width: 100%;
    padding: 0.46rem 0.86rem;
    border-radius: 999px;
    border: 1px solid rgba(216, 111, 52, 0.16);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(36, 50, 42, 0.055);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    line-height: 1.1;
}

.opsies-grid[b-2n9o258j23] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
}

.opsie-card[b-2n9o258j23] {
    --opsie-accent: var(--opsies-accent);
    --opsie-accent-soft: rgba(216, 111, 52, 0.07);
    --opsie-card-start: rgba(216, 111, 52, 0.045);
    --opsie-card-end: rgba(64, 141, 147, 0.025);
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-height: 100%;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    background:
        radial-gradient(circle at top right, var(--opsie-card-start), transparent 46%),
        #ffffff;
    box-shadow: 0 16px 40px rgba(36, 50, 42, 0.07);
}

.opsie-card[b-2n9o258j23]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--opsie-accent) 0%, color-mix(in srgb, var(--opsie-accent) 58%, white) 100%);
}

.opsie-card:hover[b-2n9o258j23],
.opsie-card:focus-within[b-2n9o258j23] {
    transform: translateY(-2px);
    border-color: rgba(167, 74, 31, 0.16);
    box-shadow: 0 22px 54px rgba(78, 58, 32, 0.14);
}

.opsie-monthly[b-2n9o258j23] {
    --opsie-accent: #d86f34;
    --opsie-accent-soft: rgba(216, 111, 52, 0.07);
    --opsie-card-start: rgba(216, 111, 52, 0.045);
    --opsie-card-end: rgba(216, 111, 52, 0.02);
}

.opsie-all[b-2n9o258j23] {
    --opsie-accent: #d86f34;
    --opsie-accent-soft: rgba(216, 111, 52, 0.07);
    --opsie-card-start: rgba(64, 141, 147, 0.04);
    --opsie-card-end: rgba(216, 111, 52, 0.018);
}

.opsie-card.featured[b-2n9o258j23] {
    border-color: rgba(216, 111, 52, 0.24);
    box-shadow: 0 24px 58px rgba(184, 92, 37, 0.16);
}

.opsie-card-selected[b-2n9o258j23] {
    border-color: color-mix(in srgb, var(--opsie-accent) 38%, rgba(35, 52, 40, 0.2));
    box-shadow: 0 24px 52px rgba(15, 77, 97, 0.14);
}

.opsie-head[b-2n9o258j23] {
    display: grid;
    gap: 0.68rem;
    padding: 1rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, var(--opsie-card-start), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, color-mix(in srgb, #ffffff 96%, var(--opsie-card-end)) 100%);
}

.opsie-badge[b-2n9o258j23],
.opsie-pill[b-2n9o258j23],
.opsie-save-badge[b-2n9o258j23],
.opsie-selected-indicator[b-2n9o258j23] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.opsie-badge[b-2n9o258j23] {
    margin: 0;
    padding: 0.34rem 0.72rem;
    color: var(--opsie-accent);
    background: var(--opsie-accent-soft);
    border: 1px solid color-mix(in srgb, var(--opsie-accent) 22%, #ece6da);
}

.opsie-pill[b-2n9o258j23] {
    margin: -0.08rem 0 0;
    padding: 0.26rem 0.64rem;
    color: #8a4f00;
    background: rgba(243, 154, 50, 0.12);
    border: 1px solid rgba(214, 127, 18, 0.26);
}

.opsie-pill-value[b-2n9o258j23] {
    color: #8a3d00;
    background: rgba(171, 93, 21, 0.1);
    border-color: rgba(171, 93, 21, 0.22);
}

.opsie-summary[b-2n9o258j23] {
    font-size: 0.92rem;
    font-weight: 600;
}

.opsie-card h2[b-2n9o258j23] {
    margin: 0;
    font-size: clamp(1.42rem, 2vw, 1.9rem);
    line-height: 1.12;
    color: var(--opsies-ink);
}

.opsie-price[b-2n9o258j23] {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    flex-wrap: wrap;
    font-size: clamp(1.9rem, 2.8vw, 2.3rem);
    line-height: 1;
    color: var(--opsies-ink);
    font-weight: 800;
}

.opsie-price span[b-2n9o258j23] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--opsies-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opsie-save-badge[b-2n9o258j23] {
    margin: 0;
    padding: 0.26rem 0.64rem;
    border: 1px solid rgba(214, 127, 18, 0.28);
    background: rgba(243, 154, 50, 0.14);
    color: #8a4f00;
}

.opsie-detail[b-2n9o258j23] {
    font-size: 0.95rem;
}

.opsie-detail strong[b-2n9o258j23] {
    color: var(--opsies-ink);
}

.opsie-plan-options[b-2n9o258j23] {
    display: grid;
    gap: 0.75rem;
}

.opsie-plan-option[b-2n9o258j23] {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(35, 52, 40, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--opsies-ink);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.opsie-plan-option:hover[b-2n9o258j23] {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.12);
}

.opsie-plan-option.is-selected[b-2n9o258j23] {
    border-color: rgba(216, 111, 52, 0.42);
    background: linear-gradient(180deg, rgba(255, 239, 215, 0.92) 0%, rgba(255, 246, 233, 0.94) 100%);
    box-shadow: 0 18px 40px rgba(184, 92, 37, 0.16);
}

.opsie-plan-option-marker[b-2n9o258j23] {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    border: 1.5px solid rgba(216, 111, 52, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
}

.opsie-plan-option-marker-dot[b-2n9o258j23] {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: transparent;
    transition: background-color 180ms ease;
}

.opsie-plan-option.is-selected .opsie-plan-option-marker-dot[b-2n9o258j23] {
    background: linear-gradient(135deg, var(--opsie-accent) 0%, #c8591f 100%);
}

.opsie-plan-option-copy[b-2n9o258j23] {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.opsie-plan-option-head[b-2n9o258j23] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.opsie-plan-option-price[b-2n9o258j23] {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--opsies-ink);
}

.opsie-plan-option-period[b-2n9o258j23] {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opsies-muted);
}

.opsie-plan-option-note[b-2n9o258j23] {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--opsies-muted);
}

.opsie-selected-indicator[b-2n9o258j23] {
    margin: -0.2rem 0 0;
    padding: 0.26rem 0.64rem;
    color: #0f4d61;
    background: rgba(15, 77, 97, 0.1);
    border: 1px solid rgba(15, 77, 97, 0.18);
}

.opsie-card ul[b-2n9o258j23] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.62rem;
    color: var(--opsies-ink);
}

.opsie-card li[b-2n9o258j23] {
    position: relative;
    padding-left: 1.55rem;
    line-height: 1.5;
    color: #34453a;
}

.opsie-card li[b-2n9o258j23]::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.04rem;
    font-size: 0.94rem;
    color: var(--opsie-accent);
}

.opsie-note[b-2n9o258j23] {
    margin: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 251, 243, 0.9);
    border: 1px solid rgba(35, 52, 40, 0.09);
    font-size: 0.88rem;
    line-height: 1.58;
}

.opsie-btn[b-2n9o258j23] {
    margin-top: auto;
    width: 100%;
    min-height: 3.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.76rem 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    background: linear-gradient(135deg, var(--opsie-accent) 0%, color-mix(in srgb, var(--opsie-accent) 80%, #6d2e14) 100%);
    color: #ffffff;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--opsie-accent) 26%, transparent);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.opsie-btn:hover[b-2n9o258j23] {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--opsie-accent) 30%, transparent);
}

.opsie-btn-disabled[b-2n9o258j23],
.opsie-btn-disabled:hover[b-2n9o258j23] {
    background: #eef0f2;
    color: #7a848b;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    filter: none;
}

.opsies-compare[b-2n9o258j23] {
    gap: 1.2rem;
}

.opsies-compare-scroll[b-2n9o258j23] {
    border: 1px solid rgba(35, 52, 40, 0.1);
    border-radius: 22px;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.78);
}

.opsies-compare-table[b-2n9o258j23] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.opsies-compare-table th[b-2n9o258j23],
.opsies-compare-table td[b-2n9o258j23] {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(35, 52, 40, 0.1);
    vertical-align: top;
}

.opsies-compare-table thead th[b-2n9o258j23] {
    background: rgba(255, 247, 234, 0.88);
    color: var(--opsies-ink);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    text-align: left;
}

.opsies-compare-table tbody tr:last-child th[b-2n9o258j23],
.opsies-compare-table tbody tr:last-child td[b-2n9o258j23] {
    border-bottom: none;
}

.opsies-compare-table th[scope="row"][b-2n9o258j23] {
    width: 21%;
    min-width: 150px;
    color: var(--opsies-ink);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.7);
}

.opsies-compare-plan[b-2n9o258j23] {
    color: #31473d;
}

.opsies-compare-plan.is-selected[b-2n9o258j23] {
    background: linear-gradient(180deg, rgba(255, 239, 215, 0.64) 0%, rgba(255, 247, 235, 0.56) 100%);
    color: var(--opsies-accent-deep);
    font-weight: 700;
}

.opsies-faq[b-2n9o258j23] {
    gap: 1.2rem;
}

.opsies-faq-list[b-2n9o258j23] {
    display: grid;
    gap: 0.68rem;
}

.opsies-faq-item[b-2n9o258j23] {
    border: 1px solid rgba(35, 52, 40, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    overflow: clip;
}

.opsies-faq-item summary[b-2n9o258j23] {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0.86rem 1rem;
    font-weight: 700;
    color: var(--opsies-ink);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.opsies-faq-item summary[b-2n9o258j23]::-webkit-details-marker {
    display: none;
}

.opsies-faq-item summary[b-2n9o258j23]::before {
    content: "\2b";
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(216, 111, 52, 0.38);
    color: var(--opsies-accent-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    line-height: 1;
    flex-shrink: 0;
}

.opsies-faq-item[open] summary[b-2n9o258j23]::before {
    content: "\2212";
}

.opsies-faq-item p[b-2n9o258j23] {
    margin: 0;
    padding: 0 1rem 0.95rem 2.75rem;
    color: var(--opsies-muted);
    line-height: 1.62;
}

.opsies-testimonials[b-2n9o258j23] {
    gap: 1.2rem;
}

.opsies-review-grid[b-2n9o258j23] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opsies-review-card[b-2n9o258j23] {
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 24px;
    padding: 1.05rem;
    display: grid;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 48px rgba(78, 58, 32, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.opsies-review-card:hover[b-2n9o258j23],
.opsies-review-card:focus-within[b-2n9o258j23] {
    transform: translateY(-2px);
    border-color: rgba(167, 74, 31, 0.16);
    box-shadow: 0 22px 54px rgba(78, 58, 32, 0.14);
}

.opsies-review-stars[b-2n9o258j23] {
    margin: 0;
    color: var(--opsies-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.92rem;
}

.opsies-review-stars i[b-2n9o258j23] {
    line-height: 1;
}

.opsies-review-person[b-2n9o258j23] {
    display: grid;
    gap: 0.12rem;
}

.opsies-review-author[b-2n9o258j23] {
    margin: 0;
    color: var(--opsies-ink);
    font-weight: 700;
    font-size: 0.95rem;
}

.opsies-review-role[b-2n9o258j23] {
    font-size: 0.84rem;
}

.opsie-btn:focus-visible[b-2n9o258j23],
.opsie-plan-option:focus-visible[b-2n9o258j23] {
    outline: 3px solid rgba(216, 111, 52, 0.22);
    outline-offset: 2px;
}

@keyframes opsies-reveal-b-2n9o258j23 {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes opsies-float-b-2n9o258j23 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .opsies-page > *[b-2n9o258j23] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .opsie-card[b-2n9o258j23],
    .opsie-btn[b-2n9o258j23],
    .opsies-review-card[b-2n9o258j23],
    .opsies-hero-image[b-2n9o258j23] {
        transition: none;
        animation: none;
    }
}

@media (max-width: 980px) {
    .opsies-page[b-2n9o258j23] {
        gap: 1rem;
    }

    .opsies-hero-copy h1[b-2n9o258j23] {
        max-width: min(100%, 22ch);
    }

    .opsies-hero-points[b-2n9o258j23] {
        grid-template-columns: 1fr;
    }

    .opsies-review-grid[b-2n9o258j23] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .opsies-page[b-2n9o258j23] {
        gap: 0.48rem;
        padding: 0.5rem;
    }

    .opsies-hero[b-2n9o258j23] {
        display: none;
    }

    .opsies-grid[b-2n9o258j23] {
        grid-template-columns: 1fr;
    }

    .opsies-payment-status[b-2n9o258j23],
    .opsies-hero[b-2n9o258j23],
    .opsies-plan-shell[b-2n9o258j23],
    .opsies-compare[b-2n9o258j23],
    .opsies-faq[b-2n9o258j23],
    .opsies-testimonials[b-2n9o258j23],
    .opsie-card[b-2n9o258j23] {
        border-radius: 20px;
    }

    .opsies-hero[b-2n9o258j23],
    .opsies-plan-shell[b-2n9o258j23],
    .opsies-compare[b-2n9o258j23],
    .opsies-faq[b-2n9o258j23],
    .opsies-testimonials[b-2n9o258j23] {
        gap: 0.55rem;
        padding: 0.58rem;
    }

    .opsies-page-logo[b-2n9o258j23] {
        margin-bottom: -0.1rem;
    }

    .opsies-page-logo-image[b-2n9o258j23] {
        width: min(52vw, 172px);
    }

    .opsies-hero-copy[b-2n9o258j23] {
        gap: 0.52rem;
    }

    .opsies-eyebrow[b-2n9o258j23],
    .opsies-section-kicker[b-2n9o258j23] {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .opsies-hero-copy h1[b-2n9o258j23] {
        max-width: 100%;
        padding: 0.42rem 0.72rem;
        border-radius: 20px;
        font-size: clamp(1.22rem, 6vw, 1.62rem);
        line-height: 1.12;
    }

    .opsies-hero-lead[b-2n9o258j23] {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .opsies-hero-points[b-2n9o258j23] {
        display: none;
    }

    .opsies-section-heading[b-2n9o258j23] {
        gap: 0.24rem;
        justify-items: center;
        text-align: center;
        margin-inline: auto;
    }

    .opsies-section-heading h2[b-2n9o258j23] {
        padding: 0.22rem 0.48rem;
        border-radius: 14px;
        font-size: clamp(1.14rem, 5.25vw, 1.42rem);
        line-height: 1.08;
    }

    .opsies-section-heading p:last-child[b-2n9o258j23] {
        font-size: 0.82rem;
        line-height: 1.28;
    }

    .opsie-card[b-2n9o258j23] {
        gap: 0.5rem;
        padding: 0.62rem 0.62rem 0.72rem;
    }

    .opsie-head[b-2n9o258j23] {
        gap: 0.28rem;
        padding: 0.58rem;
        border-radius: 14px;
    }

    .opsie-badge[b-2n9o258j23],
    .opsie-pill[b-2n9o258j23],
    .opsie-save-badge[b-2n9o258j23],
    .opsie-selected-indicator[b-2n9o258j23] {
        font-size: 0.66rem;
        letter-spacing: 0.03em;
    }

    .opsie-badge[b-2n9o258j23] {
        padding: 0.22rem 0.52rem;
    }

    .opsie-summary[b-2n9o258j23],
    .opsie-detail[b-2n9o258j23] {
        font-size: 0.82rem;
        line-height: 1.28;
    }

    .opsie-card h2[b-2n9o258j23] {
        font-size: clamp(1.08rem, 5vw, 1.32rem);
        line-height: 1.05;
    }

    .opsie-price[b-2n9o258j23] {
        font-size: clamp(1.46rem, 8vw, 1.8rem);
    }

    .opsie-price span[b-2n9o258j23] {
        font-size: 0.7rem;
    }

    .opsie-card ul[b-2n9o258j23] {
        gap: 0.28rem;
    }

    .opsie-card li[b-2n9o258j23] {
        padding-left: 1.2rem;
        font-size: 0.84rem;
        line-height: 1.24;
    }

    .opsie-card li[b-2n9o258j23]::before {
        top: 0.01rem;
        font-size: 0.78rem;
    }

    .opsie-note[b-2n9o258j23] {
        padding: 0.5rem 0.58rem;
        border-radius: 14px;
        font-size: 0.78rem;
        line-height: 1.32;
    }

    .opsie-btn[b-2n9o258j23] {
        min-height: 2.52rem;
        padding: 0.56rem 0.8rem;
        font-size: 0.82rem;
    }

    .opsie-plan-option[b-2n9o258j23] {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 0.4rem;
        padding: 0.62rem 0.68rem;
        border-radius: 14px;
    }

    .opsie-plan-option-marker[b-2n9o258j23] {
        width: 1.15rem;
        height: 1.15rem;
    }

    .opsie-plan-options[b-2n9o258j23] {
        gap: 0.45rem;
    }

    .opsie-plan-option-copy[b-2n9o258j23] {
        gap: 0.16rem;
    }

    .opsie-plan-option-head[b-2n9o258j23] {
        gap: 0.28rem;
    }

    .opsie-plan-option-price[b-2n9o258j23] {
        font-size: 1.22rem;
    }

    .opsie-plan-option-period[b-2n9o258j23] {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    .opsie-plan-option-note[b-2n9o258j23] {
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .opsies-compare-table[b-2n9o258j23] {
        min-width: 640px;
    }

    .opsies-compare-table th[b-2n9o258j23],
    .opsies-compare-table td[b-2n9o258j23] {
        padding: 0.7rem 0.72rem;
        font-size: 0.9rem;
    }

    .opsies-compare-table thead th[b-2n9o258j23] {
        font-size: 0.76rem;
    }

    .opsies-faq-item summary[b-2n9o258j23] {
        padding: 0.78rem 0.84rem;
    }

    .opsies-faq-item p[b-2n9o258j23] {
        padding: 0 0.84rem 0.86rem 2.3rem;
        font-size: 0.92rem;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.auth-shell[b-cvnac66kek] {
    width: min(980px, 100%);
    margin: 1.2rem auto 0;
    padding-inline: clamp(0.9rem, 2vw, 1.5rem);
    box-sizing: border-box;
}

.auth-frame[b-cvnac66kek] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
    border: 1px solid color-mix(in srgb, var(--line) 76%, #fff);
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(95% 120% at 10% 5%, rgba(245, 169, 78, 0.26), transparent 58%),
        radial-gradient(90% 110% at 95% 92%, rgba(77, 149, 171, 0.24), transparent 62%),
        linear-gradient(125deg, rgba(254, 251, 243, 0.9) 0%, rgba(243, 250, 251, 0.9) 100%);
    box-shadow:
        0 28px 56px rgba(19, 47, 56, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.auth-aside[b-cvnac66kek] {
    padding: 2rem;
    display: grid;
    align-content: start;
    gap: 0.85rem;
}

.auth-logo[b-cvnac66kek] {
    width: min(185px, 100%);
    height: auto;
}

.auth-kicker[b-cvnac66kek] {
    margin: 0.45rem 0 0;
    color: #0f6178;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.auth-aside h1[b-cvnac66kek] {
    margin: 0;
    color: #123d4d;
    line-height: 1.1;
    font-size: clamp(2rem, 4vw, 2.7rem);
}

.auth-intro[b-cvnac66kek] {
    margin: 0.2rem 0 0.3rem;
    color: color-mix(in srgb, var(--text) 80%, #345463);
    max-width: 38ch;
}

.auth-points[b-cvnac66kek] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.auth-points li[b-cvnac66kek] {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(17, 76, 93, 0.14);
    border-radius: 999px;
    padding: 0.48rem 0.8rem;
    color: #0f4d61;
    font-weight: 600;
    width: fit-content;
}

.auth-card[b-cvnac66kek] {
    background: rgba(255, 255, 255, 0.9);
    border-left: 1px solid color-mix(in srgb, var(--line) 74%, #fff);
    padding: 1.8rem;
    display: grid;
    align-content: center;
    gap: 0.8rem;
}

.login-kicker[b-cvnac66kek] {
    margin: 0;
    display: inline-block;
    color: #1f5e72;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.login-intro[b-cvnac66kek] {
    margin: 0;
    color: color-mix(in srgb, var(--text) 74%, #254958);
    font-size: 0.97rem;
}

.login-form[b-cvnac66kek] {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, white);
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem;
    box-shadow: 0 16px 28px rgba(20, 56, 73, 0.1);
}

.login-field[b-cvnac66kek] {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.82rem;
}

.login-field label[b-cvnac66kek] {
    font-weight: 700;
    color: color-mix(in srgb, var(--ink) 88%, #114655);
    font-size: 0.9rem;
}

.login-field .validation-message[b-cvnac66kek] {
    color: #b42318;
    font-size: 0.83rem;
}

.reset-actions[b-cvnac66kek] {
    display: grid;
    gap: 0.65rem;
}

.login-submit[b-cvnac66kek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 1rem;
    background: linear-gradient(135deg, #2f8a54 0%, #1f7041 100%);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    padding: 0.78rem 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(27, 112, 72, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
}

.login-submit:hover:not(:disabled)[b-cvnac66kek] {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(27, 112, 72, 0.3);
}

.login-submit:disabled[b-cvnac66kek] {
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.login-status[b-cvnac66kek] {
    margin: 0.82rem 0 0;
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
}

.login-status-success[b-cvnac66kek] {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.login-status-error[b-cvnac66kek] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.reset-links[b-cvnac66kek] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.login-link[b-cvnac66kek] {
    display: inline-flex;
    width: fit-content;
    color: #0f4d61;
    text-decoration: none;
    font-weight: 700;
}

.login-link:hover[b-cvnac66kek] {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .auth-frame[b-cvnac66kek] {
        grid-template-columns: 1fr;
    }

    .auth-card[b-cvnac66kek] {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--line) 74%, #fff);
    }
}

@media (max-width: 620px) {
    .auth-shell[b-cvnac66kek] {
        margin-top: 0.7rem;
    }

    .auth-aside[b-cvnac66kek],
    .auth-card[b-cvnac66kek] {
        padding: 1rem;
    }

    .auth-aside[b-cvnac66kek] {
        gap: 0;
    }

    .auth-aside .auth-logo[b-cvnac66kek],
    .auth-aside .auth-kicker[b-cvnac66kek],
    .auth-aside .auth-intro[b-cvnac66kek],
    .auth-aside .auth-points[b-cvnac66kek] {
        display: none;
    }

    .auth-aside h1[b-cvnac66kek] {
        margin: 0;
        text-align: center;
        font-size: clamp(1.7rem, 8vw, 2.1rem);
    }

    .auth-points li[b-cvnac66kek] {
        width: 100%;
        border-radius: 14px;
    }

    .login-form[b-cvnac66kek] {
        padding: 0.82rem;
    }

    .reset-links[b-cvnac66kek] {
        justify-content: center;
    }

    .login-link[b-cvnac66kek] {
        margin-inline: auto;
        text-align: center;
    }
}
/* /Components/Pages/Resources.razor.rz.scp.css */
.resources-page-shell[b-h2s0jpjs09] {
    --resources-ink: #233428;
    --resources-muted: #5e6f63;
    --resources-line: rgba(35, 52, 40, 0.12);
    --resources-cream: #fffaf1;
    --resources-panel: rgba(255, 251, 243, 0.9);
    --resources-accent: #d86f34;
    --resources-accent-deep: #a74a1f;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: clamp(1.2rem, 2vw, 2.2rem);
    display: grid;
    gap: 1.2rem;
    box-sizing: border-box;
    color: var(--resources-ink);
}

.resources-page-shell > *[b-h2s0jpjs09] {
    opacity: 0;
    transform: translateY(18px);
    animation: resources-reveal-b-h2s0jpjs09 560ms ease-out forwards;
}

.resources-page-shell > *:nth-child(1)[b-h2s0jpjs09] { animation-delay: 30ms; }
.resources-page-shell > *:nth-child(2)[b-h2s0jpjs09] { animation-delay: 90ms; }
.resources-page-shell > *:nth-child(3)[b-h2s0jpjs09] { animation-delay: 150ms; }
.resources-page-shell > *:nth-child(4)[b-h2s0jpjs09] { animation-delay: 210ms; }

.resources-hero[b-h2s0jpjs09],
.resources-state[b-h2s0jpjs09],
.resources-tabs[b-h2s0jpjs09],
.resources-panel[b-h2s0jpjs09] {
    border: 1px solid var(--resources-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 179, 0.34), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 248, 237, 0.96) 100%);
    box-shadow: 0 26px 70px rgba(86, 64, 35, 0.12);
}

.resources-hero[b-h2s0jpjs09] {
    padding: clamp(0.75rem, 1.8vw, 1.4rem) clamp(1rem, 2.6vw, 2rem) clamp(1.2rem, 2.2vw, 1.8rem);
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.resources-hero-art[b-h2s0jpjs09] {
    display: flex;
    justify-content: center;
    margin: 0 auto 0.45rem;
}

.resources-hero-art img[b-h2s0jpjs09] {
    width: clamp(180px, 22vw, 270px);
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(74, 56, 34, 0.14));
}

.resources-hero-copy[b-h2s0jpjs09] {
    display: grid;
    justify-items: center;
    gap: 0.72rem;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.resources-eyebrow[b-h2s0jpjs09] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--resources-accent-deep);
}

.resources-hero h1[b-h2s0jpjs09] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.resources-lead[b-h2s0jpjs09] {
    margin: 0;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--resources-muted);
}

.resources-state[b-h2s0jpjs09],
.resources-panel[b-h2s0jpjs09] {
    padding: clamp(1.2rem, 2.6vw, 2rem);
}

.resources-state h2[b-h2s0jpjs09],
.resources-empty h3[b-h2s0jpjs09],
.resources-panel-head h2[b-h2s0jpjs09] {
    margin: 0;
}

.resources-state p[b-h2s0jpjs09],
.resources-panel-head p[b-h2s0jpjs09],
.resources-empty p[b-h2s0jpjs09],
.resources-card-body p[b-h2s0jpjs09] {
    margin: 0;
    color: var(--resources-muted);
    line-height: 1.65;
}

.resources-card-body p[b-h2s0jpjs09] {
    white-space: pre-line;
}

.resources-state-error[b-h2s0jpjs09] {
    border-color: rgba(183, 86, 56, 0.2);
}

.resources-tabs[b-h2s0jpjs09] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.8rem;
}

.resources-tab[b-h2s0jpjs09],
.resources-open-link[b-h2s0jpjs09],
.resources-download-link[b-h2s0jpjs09] {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.resources-tab[b-h2s0jpjs09] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.72);
    color: var(--resources-ink);
    font-weight: 700;
}

.resources-tab:hover[b-h2s0jpjs09],
.resources-tab:focus-visible[b-h2s0jpjs09],
.resources-open-link:hover[b-h2s0jpjs09],
.resources-open-link:focus-visible[b-h2s0jpjs09],
.resources-download-link:hover[b-h2s0jpjs09],
.resources-download-link:focus-visible[b-h2s0jpjs09] {
    transform: translateY(-1px);
}

.resources-tab:hover[b-h2s0jpjs09],
.resources-tab:focus-visible[b-h2s0jpjs09] {
    border-color: rgba(167, 74, 31, 0.18);
    color: var(--resources-accent-deep);
}

.resources-tab.is-active[b-h2s0jpjs09] {
    border-color: rgba(167, 74, 31, 0.22);
    background: rgba(255, 245, 233, 0.96);
    color: var(--resources-accent-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.resources-tab-count[b-h2s0jpjs09] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.95rem;
    height: 1.95rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
}

.resources-panel[b-h2s0jpjs09] {
    display: grid;
    gap: 1.25rem;
}

.resources-panel-head[b-h2s0jpjs09] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.resources-panel-head p[b-h2s0jpjs09] {
    max-width: 58ch;
}

.resources-panel-count[b-h2s0jpjs09] {
    white-space: nowrap;
    font-weight: 700;
    color: var(--resources-accent-deep);
}

.resources-grid[b-h2s0jpjs09] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.resources-card[b-h2s0jpjs09] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(104px, 124px) minmax(0, 1fr);
    gap: 0.95rem;
    padding: 1rem;
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 48px rgba(78, 58, 32, 0.1);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.resources-card[b-h2s0jpjs09]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, rgba(216, 111, 52, 0.84) 0%, rgba(35, 52, 40, 0.7) 100%);
}

.resources-card:hover[b-h2s0jpjs09],
.resources-card:focus-within[b-h2s0jpjs09] {
    transform: translateY(-2px);
    border-color: rgba(167, 74, 31, 0.16);
    box-shadow: 0 22px 54px rgba(78, 58, 32, 0.14);
}

.resources-card-preview[b-h2s0jpjs09] {
    grid-row: 1 / span 2;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 240, 228, 0.94));
    border: 1px solid rgba(35, 52, 40, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.resources-card-preview-image[b-h2s0jpjs09] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: white;
}

.resources-card-icon[b-h2s0jpjs09] {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 245, 233, 0.94);
    color: var(--resources-accent-deep);
    font-size: 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.resources-card-body[b-h2s0jpjs09] {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.resources-card-lock-note[b-h2s0jpjs09] {
    margin-top: 0.25rem;
    color: var(--resources-accent-deep);
    font-size: 0.9rem;
    line-height: 1.45;
}

.resources-card-body h3[b-h2s0jpjs09] {
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.3;
}

.resources-card-actions[b-h2s0jpjs09] {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.65rem;
}

.resources-open-link[b-h2s0jpjs09],
.resources-download-link[b-h2s0jpjs09] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
    text-decoration: none;
}

.resources-upgrade-link[b-h2s0jpjs09] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(167, 74, 31, 0.2);
    border-radius: 14px;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--resources-accent-deep);
    background: rgba(255, 246, 236, 0.9);
}

.resources-open-link i[b-h2s0jpjs09],
.resources-download-link i[b-h2s0jpjs09] {
    font-size: 1rem;
    line-height: 1;
}

.resources-open-link[b-h2s0jpjs09] {
    border: none;
    background: linear-gradient(135deg, var(--resources-accent) 0%, #c8591f 100%);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.24);
    color: #fffefb;
}

.resources-download-link[b-h2s0jpjs09] {
    border: 1px solid rgba(167, 74, 31, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: var(--resources-accent-deep);
}

.resources-empty[b-h2s0jpjs09] {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(35, 52, 40, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.resources-tab:focus-visible[b-h2s0jpjs09],
.resources-open-link:focus-visible[b-h2s0jpjs09],
.resources-download-link:focus-visible[b-h2s0jpjs09],
.resources-upgrade-link:focus-visible[b-h2s0jpjs09] {
    outline: 3px solid rgba(216, 111, 52, 0.22);
    outline-offset: 2px;
}

@keyframes resources-reveal-b-h2s0jpjs09 {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .resources-page-shell > *[b-h2s0jpjs09] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .resources-tab[b-h2s0jpjs09],
    .resources-card[b-h2s0jpjs09],
    .resources-open-link[b-h2s0jpjs09],
    .resources-download-link[b-h2s0jpjs09] {
        transition: none;
    }
}

@media (max-width: 720px) {
    .resources-page-shell[b-h2s0jpjs09] {
        padding: 1rem;
    }

    .resources-hero[b-h2s0jpjs09],
    .resources-state[b-h2s0jpjs09],
    .resources-tabs[b-h2s0jpjs09],
    .resources-panel[b-h2s0jpjs09] {
        border-radius: 24px;
    }

    .resources-hero[b-h2s0jpjs09] {
        padding-inline: 0;
    }

    .resources-hero-art img[b-h2s0jpjs09] {
        width: min(72vw, 230px);
    }

    .resources-tab[b-h2s0jpjs09] {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .resources-panel-head[b-h2s0jpjs09] {
        flex-direction: column;
    }

    .resources-panel-count[b-h2s0jpjs09] {
        white-space: normal;
    }

    .resources-grid[b-h2s0jpjs09] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .resources-card[b-h2s0jpjs09] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        justify-items: center;
        padding: 0.65rem;
        border-radius: 18px;
        text-align: center;
    }

    .resources-card-preview[b-h2s0jpjs09] {
        grid-row: auto;
        max-width: min(100%, 150px);
        border-radius: 14px;
        justify-self: center;
    }

    .resources-card-icon[b-h2s0jpjs09] {
        right: 0.4rem;
        bottom: 0.4rem;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 10px;
        font-size: 0.9rem;
    }

    .resources-card-body[b-h2s0jpjs09] {
        justify-items: center;
        text-align: center;
        gap: 0.28rem;
    }

    .resources-card-body h3[b-h2s0jpjs09] {
        font-size: 0.92rem;
        line-height: 1.22;
    }

    .resources-card-body p[b-h2s0jpjs09],
    .resources-card-lock-note[b-h2s0jpjs09] {
        font-size: 0.72rem;
        line-height: 1.32;
    }

    .resources-card-actions[b-h2s0jpjs09] {
        grid-column: 1;
        justify-content: center;
        gap: 0.45rem;
    }

    .resources-open-link[b-h2s0jpjs09],
    .resources-download-link[b-h2s0jpjs09] {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 12px;
    }

    .resources-upgrade-link[b-h2s0jpjs09] {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        padding: 0.38rem 0.45rem;
        border-radius: 12px;
        font-size: 0.72rem;
        line-height: 1.2;
    }
}
/* /Components/Pages/Signup.razor.rz.scp.css */
.signup-shell[b-p56ffqu55q] {
    width: min(1080px, 100%);
    margin: 1.1rem auto 0;
    padding-inline: clamp(0.9rem, 2vw, 1.5rem);
    box-sizing: border-box;
    display: grid;
    gap: 1rem;
}

.signup-page-header[b-p56ffqu55q] {
    border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
    border-radius: 22px;
    padding: 1rem 1.1rem;
    background:
        radial-gradient(120% 120% at 4% 0%, rgba(243, 154, 50, 0.2), transparent 52%),
        radial-gradient(110% 110% at 100% 100%, rgba(74, 151, 176, 0.16), transparent 56%),
        rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 28px rgba(18, 44, 54, 0.14);
}

.signup-logo[b-p56ffqu55q] {
    width: min(175px, 100%);
    height: auto;
    /*display: block;*/
}

.signup-page-kicker[b-p56ffqu55q] {
    margin: 0.75rem 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent-deep) 72%, #1d3039);
    font-size: 0.74rem;
}

.signup-page-header h1[b-p56ffqu55q] {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.05;
    color: #133f4f;
}

.signup-page-header > p:last-child[b-p56ffqu55q] {
    margin: 0.4rem 0 0;
    color: color-mix(in srgb, var(--text) 80%, #2d4b57);
    max-width: 52ch;
}

.signup-checkout-grid[b-p56ffqu55q] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 1rem;
    align-items: stretch;
}

.signup-card[b-p56ffqu55q] {
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
    box-shadow: 0 18px 32px rgba(17, 39, 47, 0.16);
}

.signup-card-form[b-p56ffqu55q] {
    background:
        radial-gradient(115% 130% at 0% 0%, rgba(243, 154, 50, 0.16), transparent 54%),
        rgba(255, 255, 255, 0.95);
    padding: 1.2rem;
}

.signup-card-header[b-p56ffqu55q] {
    margin-bottom: 0.85rem;
}

.signup-mobile-card-logo[b-p56ffqu55q] {
    display: none;
    width: min(170px, 70vw);
    height: auto;
    margin: 0 auto 0.55rem;
}

.signup-card-header h2[b-p56ffqu55q] {
    margin: 0;
    color: #173f4f;
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
}

.signup-required-note[b-p56ffqu55q] {
    margin: 0.35rem 0 0;
    color: color-mix(in srgb, var(--text) 78%, #37535e);
    font-size: 0.85rem;
}

.required-indicator[b-p56ffqu55q] {
    color: #b42318;
    font-weight: 800;
}

.signup-form[b-p56ffqu55q] {
    display: grid;
    gap: 0.95rem;
}

.signup-grid[b-p56ffqu55q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.signup-grid-security[b-p56ffqu55q] {
    padding-top: 0.2rem;
    border-top: 1px dashed color-mix(in srgb, var(--line) 82%, #ffffff);
}

.signup-field[b-p56ffqu55q] {
    display: grid;
    gap: 0.34rem;
}

.signup-field-full[b-p56ffqu55q] {
    grid-column: 1 / -1;
}

.signup-field label[b-p56ffqu55q] {
    font-weight: 700;
    color: #173f4f;
    font-size: 0.9rem;
}

.signup-field .validation-message[b-p56ffqu55q] {
    color: #b42318;
    font-size: 0.83rem;
}

.signup-actions[b-p56ffqu55q] {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
}

.signup-selected-option[b-p56ffqu55q] {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
    background: color-mix(in srgb, #f7fbfd 86%, #ffffff);
    color: #204a5a;
    font-size: 0.88rem;
    line-height: 1.35;
}

.signup-selected-option strong[b-p56ffqu55q] {
    color: #133f4f;
}

.signup-submit[b-p56ffqu55q] {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #2f8a54 0%, #1f7041 100%);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.84rem 1rem;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(27, 112, 72, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.signup-submit:hover:not(:disabled)[b-p56ffqu55q] {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(27, 112, 72, 0.3);
}

.signup-submit:disabled[b-p56ffqu55q] {
    cursor: not-allowed;
    opacity: 0.72;
    box-shadow: none;
}

.signup-link[b-p56ffqu55q] {
    color: #0f4d61;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
}

.signup-link:hover[b-p56ffqu55q] {
    text-decoration: underline;
}

.signup-status[b-p56ffqu55q] {
    margin: 0;
    border-radius: 12px;
    padding: 0.62rem 0.75rem;
    font-weight: 600;
}

.signup-status-success[b-p56ffqu55q] {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.signup-status-error[b-p56ffqu55q] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.signup-created-popup-backdrop[b-p56ffqu55q] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(7, 55, 66, 0.52);
    backdrop-filter: blur(7px);
}

.signup-created-popup-card[b-p56ffqu55q] {
    position: relative;
    width: min(92vw, 360px);
    background: #ffffff;
    border-radius: 28px;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.signup-created-popup-close[b-p56ffqu55q] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #c1c1c1;
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.signup-created-popup-close:hover[b-p56ffqu55q],
.signup-created-popup-close:focus-visible[b-p56ffqu55q] {
    color: #8e8e8e;
}

.signup-created-popup-image[b-p56ffqu55q] {
    width: clamp(130px, 46vw, 190px);
    height: auto;
    display: block;
    margin: 0.25rem auto 0.5rem;
    transform-origin: center bottom;
    animation: signup-created-popup-image-pop-b-p56ffqu55q 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both,
        signup-created-popup-image-wiggle-b-p56ffqu55q 5s ease-in-out 520ms infinite;
}

@keyframes signup-created-popup-image-pop-b-p56ffqu55q {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    65% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes signup-created-popup-image-wiggle-b-p56ffqu55q {
    0%,
    84%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    88% {
        transform: scale(1) rotate(-2deg);
    }

    92% {
        transform: scale(1) rotate(2.2deg);
    }

    96% {
        transform: scale(1) rotate(-1.6deg);
    }

    98% {
        transform: scale(1) rotate(1deg);
    }
}

.signup-created-popup-card h2[b-p56ffqu55q] {
    margin: 0;
    color: #1f1f1f;
    font-size: clamp(1.75rem, 4.4vw, 2rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.signup-created-popup-card p[b-p56ffqu55q] {
    margin: 0.5rem auto 0;
    max-width: 300px;
    color: #505050;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 500;
}

.signup-created-popup-actions[b-p56ffqu55q] {
    margin-top: 1rem;
    display: grid;
    gap: 0.65rem;
}

.signup-created-popup-button[b-p56ffqu55q] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    transition: transform 120ms ease, filter 120ms ease;
}

.signup-created-popup-button:hover[b-p56ffqu55q],
.signup-created-popup-button:focus-visible[b-p56ffqu55q] {
    transform: translateY(-1px);
    filter: saturate(1.08);
}

.signup-created-popup-button:active[b-p56ffqu55q] {
    transform: translateY(0);
}

.signup-created-popup-button-primary[b-p56ffqu55q] {
    background: linear-gradient(180deg, #03b75a 0%, #01a851 100%);
}

.signup-card-membership[b-p56ffqu55q] {
    background:
        linear-gradient(155deg, rgba(35, 93, 111, 0.96) 0%, rgba(20, 58, 74, 0.98) 55%, rgba(14, 43, 58, 0.99) 100%);
    color: #f0f6fa;
    border-color: rgba(232, 244, 252, 0.2);
    padding: 1.1rem;
}

.signup-card-membership h2[b-p56ffqu55q] {
    margin: 0 0 0.8rem;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.membership-plan[b-p56ffqu55q] {
    border: 1px solid rgba(232, 244, 252, 0.2);
    border-radius: 14px;
    padding: 0.8rem;
    background: rgba(14, 33, 44, 0.35);
}

.membership-plan-selector[b-p56ffqu55q] {
    display: grid;
    gap: 0.72rem;
    margin-bottom: 0.72rem;
}

.membership-plan-option[b-p56ffqu55q] {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    text-align: left;
    border: 1px solid rgba(232, 244, 252, 0.2);
    border-radius: 14px;
    padding: 0.82rem;
    background: rgba(14, 33, 44, 0.28);
    color: #f0f6fa;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.membership-plan-option:hover[b-p56ffqu55q],
.membership-plan-option:focus-visible[b-p56ffqu55q] {
    transform: translateY(-1px);
    border-color: rgba(255, 211, 141, 0.5);
    background: rgba(18, 44, 58, 0.4);
    box-shadow: 0 12px 24px rgba(7, 17, 25, 0.22);
}

.membership-plan-option-selected[b-p56ffqu55q] {
    border-color: rgba(255, 211, 141, 0.95);
    background:
        linear-gradient(180deg, rgba(48, 106, 127, 0.64) 0%, rgba(22, 56, 72, 0.52) 100%);
    box-shadow: 0 18px 30px rgba(7, 17, 25, 0.3);
    outline: 2px solid rgba(255, 211, 141, 0.5);
    outline-offset: 1px;
}

.membership-plan-option-checkbox[b-p56ffqu55q] {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.34rem;
    border: 2px solid rgba(240, 246, 250, 0.72);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.membership-plan-option-selected .membership-plan-option-checkbox[b-p56ffqu55q] {
    border-color: #ffd38d;
    background: #ffd38d;
    color: #173f4f;
}

.membership-plan-option-selected .membership-plan-option-checkbox[b-p56ffqu55q]::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.82rem;
}

.membership-plan-option-content[b-p56ffqu55q] {
    display: grid;
    align-content: start;
    gap: 0.42rem;
    min-width: 0;
}

.membership-plan-option-badge[b-p56ffqu55q] {
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    font-weight: 800;
    color: #ffd38d;
}

.membership-plan-option-name[b-p56ffqu55q] {
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 700;
}

.membership-plan-option-price[b-p56ffqu55q] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}

.membership-plan-option-price strong[b-p56ffqu55q] {
    font-size: 1.16rem;
    color: #ffffff;
}

.membership-plan-option-price span[b-p56ffqu55q] {
    font-size: 0.82rem;
    color: rgba(240, 246, 250, 0.9);
}

.membership-plan + .membership-plan[b-p56ffqu55q] {
    margin-top: 0.72rem;
}

.membership-plan-label[b-p56ffqu55q] {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    font-weight: 800;
    color: #ffd38d;
}

.membership-plan h3[b-p56ffqu55q] {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
}

.membership-plan-price[b-p56ffqu55q] {
    margin: 0.35rem 0 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}

.membership-plan-price strong[b-p56ffqu55q] {
    font-size: 1.22rem;
    color: #ffffff;
}

.membership-plan-price span[b-p56ffqu55q] {
    font-size: 0.86rem;
    color: rgba(240, 246, 250, 0.9);
}

.membership-save-badge[b-p56ffqu55q] {
    margin: 0.32rem 0 0;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(243, 154, 50, 0.78);
    background: rgba(243, 154, 50, 0.18);
    color: #ffd89f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.16rem 0.5rem;
}

.membership-save-badge-inline[b-p56ffqu55q] {
    margin-top: 0.18rem;
    justify-self: start;
}

.membership-plan-copy[b-p56ffqu55q],
.membership-plan p[b-p56ffqu55q] {
    margin: 0.5rem 0 0;
    color: rgba(240, 246, 250, 0.92);
    font-size: 0.92rem;
}

.membership-plan-placeholder h3[b-p56ffqu55q] {
    color: #f9fbfc;
}

.membership-plan-gratis[b-p56ffqu55q] {
    border-color: rgba(106, 201, 124, 0.44);
    background: rgba(19, 72, 51, 0.34);
}

.membership-plan-gratis-selected[b-p56ffqu55q] {
    border-color: rgba(154, 230, 175, 0.92);
    background: linear-gradient(180deg, rgba(23, 88, 61, 0.62) 0%, rgba(19, 72, 51, 0.44) 100%);
    box-shadow: 0 14px 28px rgba(7, 17, 25, 0.22);
    outline: 2px solid rgba(154, 230, 175, 0.4);
    outline-offset: 1px;
}

.membership-plan-gratis .membership-plan-label[b-p56ffqu55q] {
    color: #9ae6af;
}

.membership-total[b-p56ffqu55q] {
    margin: 0.88rem 0 0;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(232, 244, 252, 0.22);
    color: rgba(240, 246, 250, 0.95);
}

.membership-total strong[b-p56ffqu55q] {
    color: #ffffff;
}

.membership-note[b-p56ffqu55q] {
    margin: 0.66rem 0 0;
    font-size: 0.88rem;
    color: rgba(240, 246, 250, 0.86);
}

body.schink-night-mode .signup-page-header[b-p56ffqu55q] {
    border-color: rgba(234, 229, 216, 0.14);
    background:
        radial-gradient(120% 120% at 4% 0%, rgba(243, 154, 50, 0.16), transparent 52%),
        radial-gradient(110% 110% at 100% 100%, rgba(74, 151, 176, 0.12), transparent 56%),
        rgba(17, 24, 29, 0.92);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

body.schink-night-mode .signup-page-header h1[b-p56ffqu55q],
body.schink-night-mode .signup-card-header h2[b-p56ffqu55q] {
    color: #f3f0e8;
}

body.schink-night-mode .signup-page-header > p:last-child[b-p56ffqu55q],
body.schink-night-mode .signup-required-note[b-p56ffqu55q] {
    color: #d2dadd;
}

body.schink-night-mode .signup-card-form[b-p56ffqu55q] {
    background:
        radial-gradient(115% 130% at 0% 0%, rgba(243, 154, 50, 0.12), transparent 54%),
        rgba(17, 24, 29, 0.92);
    border-color: rgba(234, 229, 216, 0.14);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

body.schink-night-mode .signup-grid-security[b-p56ffqu55q] {
    border-top-color: rgba(234, 229, 216, 0.14);
}

body.schink-night-mode .signup-field label[b-p56ffqu55q],
body.schink-night-mode .signup-link[b-p56ffqu55q] {
    color: #9ad8e6;
}

body.schink-night-mode .signup-selected-option[b-p56ffqu55q] {
    border-color: rgba(234, 229, 216, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #d8e3e6;
}

body.schink-night-mode .signup-selected-option strong[b-p56ffqu55q] {
    color: #f3f0e8;
}

body.schink-night-mode .signup-created-popup-card[b-p56ffqu55q] {
    background: #182228;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

body.schink-night-mode .signup-created-popup-card h2[b-p56ffqu55q] {
    color: #f3f0e8;
}

body.schink-night-mode .signup-created-popup-card p[b-p56ffqu55q] {
    color: #d2dadd;
}

body.schink-night-mode .signup-created-popup-close[b-p56ffqu55q] {
    color: #9fb0b7;
}

body.schink-night-mode .signup-created-popup-close:hover[b-p56ffqu55q],
body.schink-night-mode .signup-created-popup-close:focus-visible[b-p56ffqu55q] {
    color: #f3f0e8;
}

@media (max-width: 980px) {
    .signup-checkout-grid[b-p56ffqu55q] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .signup-shell[b-p56ffqu55q] {
        gap: 0.86rem;
    }

    .signup-card-form[b-p56ffqu55q],
    .signup-card-membership[b-p56ffqu55q] {
        padding: 0.92rem;
    }

    .signup-page-header[b-p56ffqu55q] {
        display: none;
    }

    .signup-card-header[b-p56ffqu55q] {
        margin-bottom: 0.65rem;
        text-align: center;
    }

    .signup-mobile-card-logo[b-p56ffqu55q] {
        display: block;
    }

    .signup-form[b-p56ffqu55q] {
        gap: 0.72rem;
    }

    .signup-logo[b-p56ffqu55q] {
        margin-inline: auto;
    }

    .signup-grid[b-p56ffqu55q] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .signup-grid-security[b-p56ffqu55q] {
        padding-top: 0.12rem;
    }

    .signup-field[b-p56ffqu55q] {
        gap: 0.2rem;
    }

    .signup-field label[b-p56ffqu55q] {
        display: none;
    }

    .signup-field .form-control[b-p56ffqu55q] {
        padding: 0.5rem 0.68rem;
    }

    .signup-actions[b-p56ffqu55q] {
        gap: 0.6rem;
        margin-top: 0.25rem;
        padding-top: 0.2rem;
    }

    .signup-selected-option[b-p56ffqu55q] {
        padding: 0.48rem 0.6rem;
        font-size: 0.84rem;
    }

    .signup-field-full[b-p56ffqu55q] {
        grid-column: auto;
    }

    .signup-link[b-p56ffqu55q] {
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    .signup-created-popup-card[b-p56ffqu55q] {
        width: min(90vw, 395px);
        padding: 1.75rem 1.5rem 1.4rem;
    }

    .signup-created-popup-card p[b-p56ffqu55q] {
        font-size: 1.1rem;
    }

    .signup-created-popup-button[b-p56ffqu55q] {
        min-height: 52px;
        font-size: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signup-created-popup-image[b-p56ffqu55q] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Soek.razor.rz.scp.css */
.search-page[b-n97z9o4ial] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 1.1rem;
}

.search-hero[b-n97z9o4ial] {
    display: grid;
    gap: 0.72rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #d8d6ce 86%, #bcc2b8);
    background: color-mix(in srgb, #fffefa 94%, #ffffff);
    box-shadow: 0 10px 26px rgba(12, 43, 58, 0.1);
    padding: clamp(1rem, 2.6vw, 1.35rem);
}

.search-eyebrow[b-n97z9o4ial] {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    color: #4e5f5c;
}

.search-hero h1[b-n97z9o4ial] {
    margin: 0;
    color: #113d4d;
    font-size: clamp(1.5rem, 3.2vw, 1.95rem);
    line-height: 1.16;
}

.search-form[b-n97z9o4ial] {
    display: grid;
    gap: 0.55rem;
}

.search-label[b-n97z9o4ial] {
    font-weight: 700;
    color: #203436;
}

.search-form-controls[b-n97z9o4ial] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
}

.search-input[b-n97z9o4ial] {
    flex: 1 1 260px;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid #c7cec3;
    background: #ffffff;
    color: #113d4d;
    padding: 0.55rem 0.95rem;
    font: inherit;
}

.search-input[b-n97z9o4ial]::placeholder {
    color: #6b7674;
}

.search-input:focus-visible[b-n97z9o4ial] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, #f39a32);
    outline-offset: 2px;
}

.search-submit[b-n97z9o4ial] {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #d67f12 70%, #b37d2e);
    background: #f39a32;
    color: #1e1e1e;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    padding: 0.56rem 1rem;
    cursor: pointer;
}

.search-submit:hover[b-n97z9o4ial] {
    filter: brightness(1.04);
}

.search-submit:focus-visible[b-n97z9o4ial] {
    outline: 3px solid color-mix(in srgb, #ffffff 30%, #f39a32);
    outline-offset: 2px;
}

.search-status[b-n97z9o4ial] {
    margin: 0;
    color: #263739;
}

.search-empty[b-n97z9o4ial] {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #d8d6ce 86%, #bcc2b8);
    background: color-mix(in srgb, #fffefa 94%, #ffffff);
    padding: 1rem 1.1rem;
}

.search-empty h2[b-n97z9o4ial] {
    margin: 0 0 0.4rem;
    font-size: 1.08rem;
    color: #113d4d;
}

.search-empty p[b-n97z9o4ial] {
    margin: 0;
    color: #2e3c3d;
}

.search-results[b-n97z9o4ial] {
    display: grid;
    gap: 0.82rem;
}

.search-result-card[b-n97z9o4ial] {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #d8d6ce 86%, #bcc2b8);
    background: color-mix(in srgb, #fffefa 94%, #ffffff);
    box-shadow: 0 8px 20px rgba(12, 43, 58, 0.08);
    padding: 1rem 1.1rem;
}

.search-result-kind[b-n97z9o4ial] {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #617170;
    font-weight: 700;
}

.search-result-card h2[b-n97z9o4ial] {
    margin: 0.32rem 0 0.42rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.search-result-card h2 a[b-n97z9o4ial] {
    color: #113d4d;
    text-decoration: none;
}

.search-result-card h2 a:hover[b-n97z9o4ial] {
    text-decoration: underline;
}

.search-result-card p[b-n97z9o4ial] {
    margin: 0;
    color: #2c3a3b;
}

.search-result-link[b-n97z9o4ial] {
    margin-top: 0.72rem;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #c7cec3;
    background: color-mix(in srgb, #ffffff 87%, #e6ece8);
    color: #113d4d;
    text-decoration: none;
    font-weight: 700;
}

.search-result-link:hover[b-n97z9o4ial] {
    background: color-mix(in srgb, #ffffff 68%, #f39a32 32%);
}

@media (max-width: 760px) {
    .search-input[b-n97z9o4ial] {
        flex-basis: 100%;
    }

    .search-submit[b-n97z9o4ial] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/StoryAccessPopup.razor.rz.scp.css */
.story-access-popup-backdrop[b-uc6q5esj6f] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(7, 55, 66, 0.52);
    backdrop-filter: blur(7px);
}

.story-access-popup-card[b-uc6q5esj6f] {
    position: relative;
    width: min(92vw, 360px);
    background: #ffffff;
    border-radius: 28px;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.story-access-popup-close[b-uc6q5esj6f] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #c1c1c1;
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.story-access-popup-close:hover[b-uc6q5esj6f],
.story-access-popup-close:focus-visible[b-uc6q5esj6f] {
    color: #8e8e8e;
}

.story-access-popup-image[b-uc6q5esj6f] {
    width: clamp(130px, 46vw, 190px);
    height: auto;
    display: block;
    margin: 0.25rem auto 0.5rem;
    transform-origin: center bottom;
    animation: story-access-popup-image-pop-b-uc6q5esj6f 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both,
        story-access-popup-image-wiggle-b-uc6q5esj6f 5s ease-in-out 520ms infinite;
}

@keyframes story-access-popup-image-pop-b-uc6q5esj6f {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    65% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes story-access-popup-image-wiggle-b-uc6q5esj6f {
    0%,
    84%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    88% {
        transform: scale(1) rotate(-2deg);
    }

    92% {
        transform: scale(1) rotate(2.2deg);
    }

    96% {
        transform: scale(1) rotate(-1.6deg);
    }

    98% {
        transform: scale(1) rotate(1deg);
    }
}

.story-access-popup-card h2[b-uc6q5esj6f] {
    margin: 0;
    color: #1f1f1f;
    font-size: clamp(1.75rem, 4.4vw, 2rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.story-access-popup-card p[b-uc6q5esj6f] {
    margin: 0.5rem auto 0;
    max-width: 300px;
    color: #505050;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 500;
}

.story-access-popup-actions[b-uc6q5esj6f] {
    margin-top: 1rem;
    display: grid;
    gap: 0.65rem;
}

.story-access-popup-actions form[b-uc6q5esj6f] {
    margin: 0;
}

.story-access-popup-button[b-uc6q5esj6f] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
}

.story-access-popup-button:hover[b-uc6q5esj6f],
.story-access-popup-button:focus-visible[b-uc6q5esj6f] {
    transform: translateY(-1px);
    filter: saturate(1.08);
}

.story-access-popup-button:active[b-uc6q5esj6f] {
    transform: translateY(0);
}

.story-access-popup-button-primary[b-uc6q5esj6f] {
    background: linear-gradient(180deg, #03b75a 0%, #01a851 100%);
}

.story-access-popup-button-secondary[b-uc6q5esj6f] {
    background: linear-gradient(180deg, #44bad1 0%, #2ca8c4 100%);
}

@media (min-width: 768px) {
    .story-access-popup-card[b-uc6q5esj6f] {
        width: min(90vw, 395px);
        padding: 1.75rem 1.5rem 1.4rem;
    }

    .story-access-popup-card p[b-uc6q5esj6f] {
        font-size: 1.1rem;
    }

    .story-access-popup-button[b-uc6q5esj6f] {
        min-height: 52px;
        font-size: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-access-popup-image[b-uc6q5esj6f] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Winkel.razor.rz.scp.css */
.winkel-page[b-kuxemlpqyi] {
    --winkel-ink: #233428;
    --winkel-muted: #5e6f63;
    --winkel-line: rgba(35, 52, 40, 0.12);
    --winkel-cream: #fffaf1;
    --winkel-panel: rgba(255, 251, 243, 0.9);
    --winkel-accent: #d86f34;
    --winkel-accent-deep: #a74a1f;
    display: grid;
    gap: 2rem;
    padding: clamp(1.4rem, 2vw, 2.2rem);
    color: var(--winkel-ink);
}

.winkel-page > *[b-kuxemlpqyi] {
    opacity: 0;
    transform: translateY(18px);
    animation: winkel-reveal-b-kuxemlpqyi 560ms ease-out forwards;
}

.winkel-page-logo[b-kuxemlpqyi] {
    display: flex;
    justify-content: center;
    padding-top: 0.4rem;
}

.winkel-page-logo img[b-kuxemlpqyi] {
    width: min(100%, 15rem);
    height: auto;
}

.winkel-shopping-form[b-kuxemlpqyi] {
    display: grid;
    gap: 2rem;
    margin: 0;
}

.winkel-shopping-form > *[b-kuxemlpqyi] {
    opacity: 0;
    transform: translateY(18px);
    animation: winkel-reveal-b-kuxemlpqyi 560ms ease-out forwards;
}

.winkel-page > *:nth-child(1)[b-kuxemlpqyi] { animation-delay: 30ms; }
.winkel-page > *:nth-child(2)[b-kuxemlpqyi] { animation-delay: 90ms; }
.winkel-page > *:nth-child(3)[b-kuxemlpqyi] { animation-delay: 150ms; }
.winkel-page > *:nth-child(4)[b-kuxemlpqyi] { animation-delay: 210ms; }
.winkel-page > *:nth-child(5)[b-kuxemlpqyi] { animation-delay: 270ms; }
.winkel-shopping-form > *:nth-child(1)[b-kuxemlpqyi] { animation-delay: 90ms; }
.winkel-shopping-form > *:nth-child(2)[b-kuxemlpqyi] { animation-delay: 150ms; }

.winkel-payment-status[b-kuxemlpqyi],
.winkel-story-block[b-kuxemlpqyi],
.winkel-order-section[b-kuxemlpqyi] {
    border: 1px solid var(--winkel-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 179, 0.42), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 248, 237, 0.96) 100%);
    box-shadow: 0 26px 70px rgba(86, 64, 35, 0.12);
}

.winkel-payment-status[b-kuxemlpqyi] {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 0.98rem;
    line-height: 1.6;
}

.winkel-payment-status.is-success[b-kuxemlpqyi] {
    border-color: rgba(41, 114, 71, 0.22);
    background:
        linear-gradient(135deg, rgba(228, 247, 235, 0.98) 0%, rgba(246, 255, 249, 0.98) 100%);
}

.winkel-payment-status.is-processing[b-kuxemlpqyi] {
    border-color: rgba(219, 153, 44, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 245, 221, 0.98) 0%, rgba(255, 252, 242, 0.98) 100%);
}

.winkel-payment-status.is-cancelled[b-kuxemlpqyi],
.winkel-payment-status.is-error[b-kuxemlpqyi] {
    border-color: rgba(183, 86, 56, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 239, 231, 0.98) 0%, rgba(255, 248, 244, 0.98) 100%);
}

.winkel-story-block[b-kuxemlpqyi],
.winkel-order-section[b-kuxemlpqyi] {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.4rem);
    padding: clamp(1.4rem, 2.6vw, 2.3rem);
}

.winkel-story-block[b-kuxemlpqyi] {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
}

.winkel-order-copy[b-kuxemlpqyi] {
    display: grid;
    gap: 1rem;
}

.winkel-section-kicker[b-kuxemlpqyi],
.winkel-order-panel-kicker[b-kuxemlpqyi] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--winkel-accent-deep);
}

.winkel-products-header .winkel-section-kicker[b-kuxemlpqyi] {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    line-height: normal;
    color: #a74a1f;
}

.winkel-products-header h2[b-kuxemlpqyi],
.winkel-story-copy h2[b-kuxemlpqyi],
.winkel-order-copy h2[b-kuxemlpqyi] {
    margin: 0;
    line-height: 1.05;
    letter-spacing: 0;
    font-size: 2.35rem;
}

.winkel-intro[b-kuxemlpqyi],
.winkel-story-copy p[b-kuxemlpqyi],
.winkel-products-header p[b-kuxemlpqyi],
.winkel-order-copy p[b-kuxemlpqyi],
.winkel-order-panel p[b-kuxemlpqyi],
.winkel-order-notes li[b-kuxemlpqyi],
.winkel-order-list li[b-kuxemlpqyi] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--winkel-muted);
}

.winkel-submit[b-kuxemlpqyi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.winkel-submit:hover[b-kuxemlpqyi] {
    transform: translateY(-1px);
}

.winkel-submit[b-kuxemlpqyi] {
    border: none;
    color: #fffefb;
    background: linear-gradient(135deg, var(--winkel-accent) 0%, #c8591f 100%);
    box-shadow: 0 16px 36px rgba(184, 92, 37, 0.24);
}

.winkel-submit:focus-visible[b-kuxemlpqyi],
.winkel-quantity-button:focus-visible[b-kuxemlpqyi],
.winkel-product-quantity input:focus-visible[b-kuxemlpqyi],
.winkel-field input:focus-visible[b-kuxemlpqyi],
.winkel-field select:focus-visible[b-kuxemlpqyi],
.winkel-field textarea:focus-visible[b-kuxemlpqyi] {
    outline: 3px solid rgba(216, 111, 52, 0.22);
    outline-offset: 2px;
}

.winkel-order-notes[b-kuxemlpqyi],
.winkel-order-list[b-kuxemlpqyi] {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.65rem;
}

.winkel-story-media[b-kuxemlpqyi] {
    display: flex;
    justify-content: center;
}

.winkel-story-media img[b-kuxemlpqyi] {
    width: min(100%, 32rem);
    height: auto;
    border-radius: 28px;
    box-shadow: 0 26px 60px rgba(72, 48, 23, 0.18);
    background: linear-gradient(180deg, #fff8f0 0%, #f9e9d8 100%);
}

.winkel-story-copy[b-kuxemlpqyi] {
    display: grid;
    gap: 0.9rem;
}

.winkel-products[b-kuxemlpqyi] {
    display: grid;
    gap: 1.4rem;
}

.winkel-products-header[b-kuxemlpqyi] {
    display: grid;
    gap: 0.8rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.winkel-grid[b-kuxemlpqyi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}

.winkel-product[b-kuxemlpqyi] {
    --winkel-product-start: #fff2cf;
    --winkel-product-end: #fffdf8;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(35, 52, 40, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 48px rgba(78, 58, 32, 0.1);
}

.winkel-product-media[b-kuxemlpqyi] {
    padding: 1rem;
    background: linear-gradient(180deg, var(--winkel-product-start) 0%, var(--winkel-product-end) 100%);
}

.winkel-product-media img[b-kuxemlpqyi] {
    width: 100%;
    height: auto;
    border-radius: 18px;
    transition: transform 220ms ease;
}

.winkel-product:hover .winkel-product-media img[b-kuxemlpqyi] {
    transform: scale(1.03);
}

.winkel-product-body[b-kuxemlpqyi] {
    display: grid;
    gap: 0.65rem;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 1.15rem 1.15rem 1.25rem;
    align-content: stretch;
}

.winkel-product-type[b-kuxemlpqyi] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--winkel-accent-deep);
}

.winkel-product h3[b-kuxemlpqyi] {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.18;
}

.winkel-product-price[b-kuxemlpqyi] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--winkel-ink);
}

.winkel-product-description[b-kuxemlpqyi] {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--winkel-muted);
}

.winkel-product-quantity[b-kuxemlpqyi] {
    display: grid;
    grid-template-columns: 2.75rem minmax(3rem, 1fr) 2.75rem;
    gap: 0.45rem;
    align-items: center;
}

.winkel-product-quantity label[b-kuxemlpqyi] {
    display: block;
    min-width: 0;
}

.winkel-product-quantity input[b-kuxemlpqyi] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 1px solid rgba(35, 52, 40, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--winkel-ink);
    font: inherit;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
}

.winkel-product-quantity input[b-kuxemlpqyi]::-webkit-outer-spin-button,
.winkel-product-quantity input[b-kuxemlpqyi]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.winkel-quantity-button[b-kuxemlpqyi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid rgba(167, 74, 31, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--winkel-accent-deep);
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.winkel-quantity-button:hover:not(:disabled)[b-kuxemlpqyi] {
    transform: translateY(-1px);
    border-color: rgba(167, 74, 31, 0.28);
    background: rgba(255, 250, 244, 0.96);
}

.winkel-quantity-button:disabled[b-kuxemlpqyi] {
    cursor: default;
    opacity: 0.42;
}

.is-suurlemoentjie[b-kuxemlpqyi] {
    --winkel-product-start: #fff3b8;
    --winkel-product-end: #fffdf2;
}

.is-tiekie[b-kuxemlpqyi] {
    --winkel-product-start: #ffd9d2;
    --winkel-product-end: #fff8f6;
}

.is-lama[b-kuxemlpqyi] {
    --winkel-product-start: #efe1ff;
    --winkel-product-end: #fff9f3;
}

.is-georgie[b-kuxemlpqyi] {
    --winkel-product-start: #d8f1ff;
    --winkel-product-end: #fffdf7;
}

.winkel-order-section[b-kuxemlpqyi] {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: start;
}

.winkel-order-copy[b-kuxemlpqyi] {
    gap: 1rem;
}

.winkel-order-panel[b-kuxemlpqyi] {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.8rem;
    padding: 1.2rem;
    border: 1px solid rgba(35, 52, 40, 0.09);
    border-radius: 22px;
    background: var(--winkel-panel);
}

.winkel-order-panel h3[b-kuxemlpqyi] {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.winkel-order-panel-price[b-kuxemlpqyi] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--winkel-accent-deep);
}

.winkel-order-form-shell[b-kuxemlpqyi] {
    padding: 1.1rem;
    border-radius: 26px;
    border: 1px solid rgba(35, 52, 40, 0.09);
    background:
        radial-gradient(circle at top, rgba(255, 225, 199, 0.36), transparent 36%),
        rgba(255, 255, 255, 0.92);
}

.winkel-order-form[b-kuxemlpqyi] {
    display: grid;
    gap: 1.2rem;
}

.winkel-form-grid[b-kuxemlpqyi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.winkel-field[b-kuxemlpqyi] {
    display: grid;
    gap: 0.45rem;
}

.winkel-field-full[b-kuxemlpqyi] {
    grid-column: 1 / -1;
}

.winkel-field span[b-kuxemlpqyi] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--winkel-ink);
}

.winkel-field em[b-kuxemlpqyi] {
    font-style: normal;
    font-weight: 500;
    color: var(--winkel-muted);
}

.winkel-field input[b-kuxemlpqyi],
.winkel-field select[b-kuxemlpqyi],
.winkel-field textarea[b-kuxemlpqyi] {
    width: 100%;
    border: 1px solid rgba(35, 52, 40, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--winkel-ink);
    font: inherit;
}

.winkel-field input[b-kuxemlpqyi],
.winkel-field select[b-kuxemlpqyi] {
    min-height: 3.15rem;
    padding: 0.8rem 0.95rem;
}

.winkel-field textarea[b-kuxemlpqyi] {
    min-height: 8rem;
    padding: 0.85rem 0.95rem;
    resize: vertical;
}

.winkel-form-actions[b-kuxemlpqyi] {
    display: grid;
    gap: 0.65rem;
}

.winkel-submit[b-kuxemlpqyi] {
    width: 100%;
    cursor: pointer;
    font: inherit;
}

.winkel-form-fineprint[b-kuxemlpqyi] {
    margin: 0;
    text-align: center;
    color: var(--winkel-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

@keyframes winkel-reveal-b-kuxemlpqyi {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .winkel-page > *[b-kuxemlpqyi],
    .winkel-shopping-form > *[b-kuxemlpqyi] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .winkel-submit[b-kuxemlpqyi],
    .winkel-product-media img[b-kuxemlpqyi],
    .winkel-quantity-button[b-kuxemlpqyi] {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .winkel-grid[b-kuxemlpqyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .winkel-story-block[b-kuxemlpqyi],
    .winkel-order-section[b-kuxemlpqyi] {
        grid-template-columns: 1fr;
    }

    .winkel-story-media img[b-kuxemlpqyi] {
        width: min(100%, 28rem);
    }
}

@media (max-width: 720px) {
    .winkel-page[b-kuxemlpqyi] {
        padding: 1rem;
    }

    .winkel-page-logo img[b-kuxemlpqyi] {
        width: min(100%, 12.5rem);
    }

    .winkel-products-header h2[b-kuxemlpqyi],
    .winkel-story-copy h2[b-kuxemlpqyi],
    .winkel-order-copy h2[b-kuxemlpqyi] {
        font-size: 1.85rem;
        line-height: 1.12;
    }

    .winkel-form-grid[b-kuxemlpqyi] {
        grid-template-columns: 1fr;
    }

    .winkel-grid[b-kuxemlpqyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .winkel-order-form-shell[b-kuxemlpqyi] {
        order: -1;
    }

    .winkel-product[b-kuxemlpqyi] {
        border-radius: 18px;
    }

    .winkel-product-media[b-kuxemlpqyi] {
        padding: 0.65rem;
    }

    .winkel-product-media img[b-kuxemlpqyi] {
        border-radius: 14px;
    }

    .winkel-product-body[b-kuxemlpqyi] {
        gap: 0.45rem;
        padding: 0.75rem;
    }

    .winkel-product-type[b-kuxemlpqyi] {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .winkel-product h3[b-kuxemlpqyi] {
        font-size: 0.98rem;
        line-height: 1.15;
    }

    .winkel-product-price[b-kuxemlpqyi] {
        font-size: 0.9rem;
    }

    .winkel-product-description[b-kuxemlpqyi] {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .winkel-product-quantity[b-kuxemlpqyi] {
        grid-template-columns: 2rem minmax(2.2rem, 1fr) 2rem;
        gap: 0.25rem;
    }

    .winkel-product-quantity input[b-kuxemlpqyi],
    .winkel-quantity-button[b-kuxemlpqyi] {
        min-height: 2.1rem;
    }

    .winkel-product-quantity input[b-kuxemlpqyi] {
        padding: 0.25rem;
        border-radius: 10px;
    }

    .winkel-quantity-button[b-kuxemlpqyi] {
        font-size: 1rem;
    }

    .winkel-submit[b-kuxemlpqyi] {
        width: 100%;
    }

    .winkel-story-block[b-kuxemlpqyi],
    .winkel-order-section[b-kuxemlpqyi] {
        padding: 1.15rem;
        border-radius: 24px;
    }
}