/*
 * Genzo App Core 0.10.2 — Seamless Dark Paint & Image Delivery layer
 * Loaded after the route/adapter stylesheet so it can normalize every app view
 * without changing Astra Child, Titan Membership or Reader OS source files.
 */
:root {
    --gac-visual-viewport-height: 100dvh;
    --gac-keyboard-height: 0px;
    --gac-chrome-top-total: calc(var(--gac-topbar-height, 68px) + var(--gac-safe-top, 0px));
    --gac-chrome-bottom-total: calc(var(--gac-bottom-height, 72px) + 18px + var(--gac-safe-bottom, 0px));
    --gac-tap-min: 44px;
}

html.genzo-app-consistency,
html.genzo-app-consistency body {
    max-width: 100%;
    overflow-x: clip;
}

html.genzo-app-consistency body.genzo-app-mode,
html.genzo-app-consistency body.gac-app-theme {
    min-height: var(--gac-visual-viewport-height);
    text-rendering: optimizeLegibility;
}


/* Never expose the browser/WebView default white canvas. These declarations
   remain active before, during and after route transitions. */
html,
body,
html.genzo-app-consistency,
html.genzo-app-consistency body,
html.genzo-app-consistency .gac-app-root {
    background-color: var(--gac-bg, #07080d) !important;
    color-scheme: dark;
}
html.genzo-app-consistency body::before {
    content: "";
    position: fixed;
    z-index: -2147483647;
    inset: 0;
    pointer-events: none;
    background: var(--gac-bg, #07080d);
}
html.genzo-app-consistency :is(
    .gac-image-shell,
    .gac-series-card__cover,
    .gac-continue-card__cover,
    .gac-content-card__media,
    .gac-news-card__media,
    .gac-playlab-card__media,
    .gac-chapter-thumb-v2,
    .gac-profile-work-card__media,
    .gac-artwork-card__media,
    .gac-artwork-final__canvas,
    .gac-artwork-final__linked-image
) {
    background-color: var(--gac-surface, #11131b);
}

/* Same-document hand-off veil. It has no spinner; only a very soft card-like
   sheen while the next WordPress document is being committed. */
#gac-navigation-veil {
    position: fixed;
    z-index: 2147483646;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(circle at 82% -8%, rgba(255,122,38,.08), transparent 38rem),
        var(--gac-bg, #07080d);
    transition: opacity .12s ease, visibility .12s ease;
}
#gac-navigation-veil::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.025) 44%, rgba(255,122,38,.03) 50%, rgba(255,255,255,.02) 56%, transparent 78%);
    transform: translateX(-110%);
}
html.gac-page-leaving #gac-navigation-veil {
    visibility: visible;
    opacity: 1;
}
html.gac-page-leaving #gac-navigation-veil::before {
    animation: gac-page-handoff 1.2s ease-in-out infinite;
}
@keyframes gac-page-handoff { to { transform: translateX(110%); } }

/* Keep the main viewport clear of fixed navigation on every app route. */
html.genzo-app-consistency .gac-app-root {
    min-height: var(--gac-visual-viewport-height);
    padding-bottom: var(--gac-chrome-bottom-total);
}
html.genzo-app-consistency .gac-app-main {
    min-width: 0;
    max-width: 100%;
}
html.genzo-app-consistency .gac-topbar,
html.genzo-app-consistency .gac-bottom-nav {
    transform: translateZ(0);
    contain: layout style;
}
html.genzo-app-consistency .gac-topbar {
    isolation: isolate;
}
html.genzo-app-consistency .gac-bottom-nav {
    isolation: isolate;
}

/* Central media ratios: manga/story are 3:4, all editorial/test/chapter media 16:9,
   artwork keeps its original ratio. */
html.genzo-app-consistency [data-gac-ratio="cover"],
html.genzo-app-consistency .gac-image-shell--cover,
html.genzo-app-consistency .gac-series-card__cover,
html.genzo-app-consistency .gac-profile-work-card[data-gac-work-type="manga"] .gac-profile-work-card__media,
html.genzo-app-consistency .gac-profile-work-card[data-gac-work-type="story"] .gac-profile-work-card__media {
    aspect-ratio: 3 / 4 !important;
}
html.genzo-app-consistency [data-gac-ratio="landscape"],
html.genzo-app-consistency .gac-image-shell--landscape,
html.genzo-app-consistency .gac-content-card__media,
html.genzo-app-consistency .gac-news-card__media,
html.genzo-app-consistency .gac-chapter-thumb-v2,
html.genzo-app-consistency .gac-playlab-card__media {
    aspect-ratio: 16 / 9 !important;
}
html.genzo-app-consistency [data-gac-ratio="artwork"],
html.genzo-app-consistency .gac-image-shell--artwork,
html.genzo-app-consistency .gac-artwork-card__media {
    aspect-ratio: auto !important;
}

/* Modern card-native image loading. No circular spinner: the whole media surface
   becomes a quiet Genzo skeleton until the decoded image is ready. */
html.genzo-app-consistency .gac-image-shell,
html.genzo-app-consistency [data-gac-media-shell] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #11141d;
}
html.genzo-app-consistency [data-gac-media-shell] > img,
html.genzo-app-consistency .gac-image-shell > img {
    display: block;
    width: 100%;
    max-width: 100%;
    opacity: 0;
    transition: opacity .34s cubic-bezier(.2,.7,.2,1), filter .34s ease, transform .34s ease;
}
html.genzo-app-consistency [data-gac-media-shell].is-gac-media-loaded > img,
html.genzo-app-consistency .is-gac-media-loaded > img {
    opacity: 1;
}
html.genzo-app-consistency [data-gac-media-shell].is-gac-media-error > img {
    visibility: hidden !important;
    opacity: 0 !important;
}
.gac-media-status,
.gac-artwork-media-loader {
    position: absolute;
    z-index: 2;
    inset: 0;
    min-height: 72px;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,122,38,.08), transparent 34%),
        linear-gradient(145deg, #171a24 0%, #10131b 58%, #0c0f16 100%);
}
.gac-media-status::before,
.gac-artwork-media-loader::before,
.gac-list-skeleton__row::before,
.gac-feed-skeleton__tile::before,
.gac-thread-skeleton__bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.075) 43%, rgba(255,122,38,.045) 50%, rgba(255,255,255,.07) 57%, transparent 72%);
    transform: translateX(-105%);
    animation: gac-card-sheen 1.55s cubic-bezier(.4,0,.2,1) infinite;
}
.gac-media-skeleton {
    position: absolute;
    inset: auto 8% 9% 8%;
    display: grid;
    gap: 7px;
}
.gac-media-skeleton i {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}
.gac-media-skeleton i:nth-child(1) { width: 62%; height: 10px; }
.gac-media-skeleton i:nth-child(2) { width: 88%; }
.gac-media-skeleton i:nth-child(3) { width: 42%; }
.gac-media-error-copy {
    position: absolute;
    inset: 0;
    display: none;
    place-content: center;
    justify-items: center;
    gap: 5px;
    padding: 14px;
    color: #d9deea;
    text-align: center;
    pointer-events: auto;
}
.gac-media-error-copy strong { font-size: .72rem; }
.gac-media-error-copy small { max-width: 220px; color: #8992a4; font-size: .62rem; line-height: 1.4; }
.is-gac-media-loaded > .gac-media-status,
.gac-artwork-media--loaded > .gac-artwork-media-loader {
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
}
.is-gac-media-error > .gac-media-status { pointer-events: auto; }
.is-gac-media-error > .gac-media-status::before,
.is-gac-media-error .gac-media-skeleton { display: none; }
.is-gac-media-error .gac-media-error-copy { display: grid; }
.gac-media-retry {
    min-height: 36px;
    margin-top: 5px;
    padding: 0 13px;
    border: 1px solid rgba(255,122,38,.28);
    border-radius: 999px;
    background: rgba(255,122,38,.1);
    color: #fff;
    font: 850 .67rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;
    pointer-events: auto;
    cursor: pointer;
}
.gac-media-retry:active { transform: scale(.97); }

/* Reusable loading surfaces for lists, messages and infinite feeds. */
.gac-list-skeleton { width: 100%; display: grid; gap: 8px; padding: 4px 0; }
.gac-list-skeleton__row {
    position: relative;
    overflow: hidden;
    min-height: 64px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 16px;
    background:
        radial-gradient(circle at 28px 50%, rgba(255,255,255,.07) 0 18px, transparent 19px),
        linear-gradient(rgba(255,255,255,.075),rgba(255,255,255,.075)) 58px 18px/42% 8px no-repeat,
        linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)) 58px 36px/66% 7px no-repeat,
        #11141d;
}
.gac-thread-skeleton { width: min(100%,520px); display: grid; gap: 12px; padding: 18px 14px; }
.gac-thread-skeleton__bubble {
    position: relative;
    overflow: hidden;
    width: 72%;
    min-height: 58px;
    border-radius: 17px 17px 17px 5px;
    background: #151923;
}
.gac-thread-skeleton__bubble:nth-child(even) { justify-self: end; width: 58%; border-radius: 17px 17px 5px 17px; background: rgba(255,122,38,.105); }
.gac-feed-skeleton { width: min(280px,92%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gac-feed-skeleton__tile { position: relative; overflow: hidden; min-height: 82px; border-radius: 14px; background: #141721; }
.gac-feed-skeleton__tile:nth-child(2) { min-height: 112px; }

/* Save rendering work for far-below-fold cards without changing layout. */
@supports (content-visibility: auto) {
    .gac-section :is(.gac-series-card,.gac-content-card,.gac-news-card,.gac-artwork-card,.gac-profile-work-card):nth-child(n+5) {
        content-visibility: auto;
        contain-intrinsic-size: auto 320px;
    }
}

/* Consistent interaction states and minimum touch targets. */
html.genzo-app-consistency button,
html.genzo-app-consistency [role="button"],
html.genzo-app-consistency .gac-button,
html.genzo-app-consistency .gac-icon-button,
html.genzo-app-consistency .gac-bottom-nav__item {
    touch-action: manipulation;
}
html.genzo-app-consistency button:not(.gac-media-retry),
html.genzo-app-consistency .gac-button {
    min-height: var(--gac-tap-min);
}
html.genzo-app-consistency :where(a,button,input,select,textarea,[role="button"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gac-accent, #ff7a26) 82%, white);
    outline-offset: 3px;
}
html.genzo-app-consistency [aria-busy="true"],
html.genzo-app-consistency .is-gac-busy {
    cursor: wait !important;
    opacity: .66;
    pointer-events: none !important;
}
html.genzo-app-consistency form.is-gac-submitting {
    pointer-events: none;
}
html.genzo-app-consistency form.is-gac-submitting :is(button[type="submit"],input[type="submit"]) {
    opacity: .66;
}

/* Stale modal/body locks are recovered by JS; keep genuine open layers isolated. */
html.genzo-app-consistency.gac-dialog-open,
html.genzo-app-consistency.gac-artwork-lightbox-open {
    overflow: hidden !important;
}
html.genzo-app-consistency:not(.gac-dialog-open):not(.gac-artwork-lightbox-open) body.gac-app-theme {
    overflow-y: auto;
}

/* A stable, unobtrusive global error notice used only for fatal interaction errors. */
.gac-stability-notice {
    position: fixed;
    z-index: 2147483600;
    left: max(14px, calc(14px + var(--gac-safe-left, 0px)));
    right: max(14px, calc(14px + var(--gac-safe-right, 0px)));
    bottom: calc(var(--gac-chrome-bottom-total) + 10px);
    max-width: 620px;
    margin: 0 auto;
    padding: 11px 13px;
    border: 1px solid rgba(248,113,113,.28);
    border-radius: 14px;
    background: rgba(50,16,20,.96);
    color: #fecaca;
    font: 750 .72rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
    box-shadow: 0 16px 42px rgba(0,0,0,.42);
}
.gac-stability-notice[hidden] { display: none !important; }

/* Keyboard opens: navigation gets out of the way and content uses visual viewport. */
html.gac-keyboard-open .gac-app-root {
    min-height: var(--gac-visual-viewport-height);
    padding-bottom: 18px;
}
html.gac-keyboard-open .gac-bottom-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes gac-card-sheen { to { transform: translateX(105%); } }

@media (prefers-reduced-motion: reduce) {
    .gac-media-status::before, .gac-artwork-media-loader::before, .gac-list-skeleton__row::before, .gac-feed-skeleton__tile::before, .gac-thread-skeleton__bubble::before { animation: none !important; }
    html.genzo-app-consistency [data-gac-media-shell] > img,
    html.genzo-app-consistency .gac-image-shell > img { transition: none !important; }
}

@media (max-width: 420px) {
    :root { --gac-tap-min: 42px; }
    html.genzo-app-consistency .gac-app-main { padding-left: 13px; padding-right: 13px; }
}