* {
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark body {
    background-color: rgb(var(--bgb));
    color: #f1f5f9;
}

html:not(.dark) body {
    background-color: rgb(var(--c50));
    color: #1e293b;
}

/* 🌸 1. HOME ENTRY ANIMATION (Intro Delay 0.6s သို့ တိုးမြှင့်ထားသည်) */
@keyframes homeCinematicEntry {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.home-cinematic-entry:not(.hidden) {
    animation: homeCinematicEntry 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 🚀 2. FORWARD LOBBY TRANSITION: ညာမှ ဘယ်သို့ Slide ဝင်လာခြင်း (0.7s) */
@keyframes slideRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(28px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.lobby-slide-right-transition:not(.hidden) {
    animation: slideRightToLeft 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 🔄 3. REVERSE LOBBY TRANSITION: Reading မှ Chapter Lobby သို့ ဘယ်မှ ညာသို့ ထွက်လာခြင်း (0.7s) */
@keyframes slideLeftToRight {
    0% {
        opacity: 0;
        transform: translateX(-28px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.lobby-slide-left-transition:not(.hidden) {
    animation: slideLeftToRight 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Header Glassmorphism */
html.dark .sakura-header-bar {
    background: rgba(var(--bgs), 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.reader-floating-top-bar {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 60;
    background: rgba(var(--bgs), 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reader-floating-top-bar.show {
    top: 0;
}

.settings-modal-box {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: rgba(var(--bgs), 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1.5px solid rgba(var(--c500), 0.3);
    border-left: 1.5px solid rgba(var(--c500), 0.15);
    border-right: 1.5px solid rgba(var(--c500), 0.15);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px;
    z-index: 80;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7);
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-modal-box.show {
    bottom: 0;
}

.setting-btn-active {
    background: linear-gradient(135deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 10px rgba(var(--c500), 0.3);
}

.setting-btn-inactive {
    background: rgb(var(--bgb));
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

.setting-btn-inactive:hover {
    border-color: rgba(var(--c500), 0.4);
    color: #ffffff;
}

/* 🌟 PREMIUM FILTER BUTTON STYLING */
.premium-filter-btn {
    background: linear-gradient(135deg, rgba(var(--bgc), 0.9) 0%, rgba(var(--c900), 0.6) 100%);
    border: 1px solid rgba(var(--c500), 0.35);
    color: rgb(var(--c100));
    box-shadow: 0 3px 10px rgba(var(--c500), 0.15);
    transition: all 0.25s ease;
}

.premium-filter-btn:hover {
    background: linear-gradient(135deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(var(--c500), 0.4);
    transform: translateY(-1px);
}

html.dark .text-sakura-glow {
    background: linear-gradient(135deg, #ffffff 0%, rgb(var(--c100)) 40%, rgb(var(--c400)) 80%, rgb(var(--c500)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(var(--c500), 0.3));
}

@keyframes sakuraRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-sakura-spin {
    animation: sakuraRotate 10s linear infinite;
}

.showcase-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.showcase-scroll::-webkit-scrollbar {
    display: none;
}

.showcase-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.showcase-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c500), 0.5);
    box-shadow: 0 6px 20px rgba(var(--c500), 0.25);
}

.sakura-slight-divider {
    width: 85%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

.top-slight-headline {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    z-index: 10;
    border-radius: 999px;
}

.cinematic-blur-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.cinematic-blur-hero::before {
    content: "";
    position: absolute;
    inset: -15px;
    background-image: var(--hero-bg, url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop'));
    background-size: cover;
    background-position: center;
    filter: blur(10px) brightness(0.35);
    transform: scale(1.1);
    z-index: 0;
}

.cinematic-blur-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(var(--bgb), 0.5) 0%, rgba(var(--bgb), 0.8) 70%, rgba(var(--bgb), 0.95) 100%);
    z-index: 1;
    pointer-events: none;
}

.cinematic-content {
    position: relative;
    z-index: 2;
}

.lobby-box {
    background: rgba(var(--bgs), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.lobby-box:hover {
    border-color: rgba(var(--c500), 0.3);
}

.genres-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.individual-genre-frame {
    background-color: rgb(var(--bgb));
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 8px;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.individual-genre-frame:hover {
    border-color: rgba(var(--c500), 0.5);
    color: rgb(var(--c300));
    transform: translateY(-1px);
}

.chapter-grey-box {
    background: rgba(var(--bgc), 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.chapter-grey-box:hover {
    background: rgba(var(--bgc), 0.95);
    border-color: rgba(var(--c500), 0.4);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.premium-bookmark-btn {
    background: rgba(var(--bgs), 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.premium-bookmark-btn:hover {
    border-color: rgb(var(--c500));
    background: rgba(var(--c500), 0.15);
}

.premium-bookmark-btn.active {
    background: linear-gradient(135deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 100%);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 15px rgba(var(--c500), 0.4);
}

.formula-manga-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 155px;
    margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .formula-manga-card:hover {
        transform: translateY(-3px);
    }
}

.clean-single-bold-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: rgb(var(--bgs));
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.clean-single-bold-frame::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: linear-gradient(to top, rgba(var(--bgb), 0.9) 0%, rgba(var(--bgs), 0.5) 50%, transparent 100%);
    pointer-events: none;
    z-index: 25;
}

@media (hover: hover) and (pointer: fine) {
    .formula-manga-card:hover .clean-single-bold-frame {
        border-color: rgba(var(--c500), 0.5);
        box-shadow: 0 10px 24px rgba(var(--c500), 0.25);
    }
}
/* the cover picture itself never animates (no transform/transition -> no half-rastered black cover when the page snapshot is taken) */
.clean-single-bold-frame > .bg-cover {
    transition: none !important;
    transform: none !important;
    will-change: auto;
}

.formula-type-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    overflow: hidden;
    z-index: 30;
    pointer-events: none;
}

.formula-type-badge span {
    position: absolute;
    top: 8px;
    right: -14px;
    width: 58px;
    transform: rotate(45deg);
    background: rgba(var(--bgs), 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 7px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.formula-new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 35;
    background: linear-gradient(135deg, #ff8a4c 0%, #f0532a 100%);
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    box-shadow: 0 0 8px rgba(240, 83, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    animation: pulseNew 2s infinite;
}

@keyframes pulseNew {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
    100% { transform: scale(1); opacity: 1; }
}

.formula-chapter-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 30;
    background: rgba(var(--bgb), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.5px 6px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
}

.status-ongoing {
    color: rgb(var(--c300));
    border-color: rgba(var(--c400), 0.3);
}

.status-complete {
    color: #7cc4ff;
    border-color: rgba(124, 196, 255, 0.3);
}

.status-pause {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.3);
}

.formula-manga-title {
    margin-top: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.first-read-btn {
    background: linear-gradient(135deg, rgb(var(--bgc)) 0%, rgb(var(--bgs)) 100%);
    border: 1.5px solid rgba(var(--c500), 0.45);
    box-shadow: 0 0 12px rgba(var(--c500), 0.15);
    transition: all 0.25s ease;
}

.first-read-btn:hover {
    background: linear-gradient(135deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 100%);
    box-shadow: 0 0 18px rgba(var(--c500), 0.4);
    transform: translateY(-1.5px);
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 35%, rgba(2, 4, 8, 0.75) 100%);
    z-index: 2;
}

#readerPagesContainer {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    background-color: #000;
}

.manga-page-wrapper {
    position: relative;
    width: 100%;
    max-width: 768px;
    min-height: 400px;
    margin: 0 auto;
    background-color: rgb(var(--bgs));
    display: flex;
    align-items: center;
    justify-content: center;
}

.manga-page-wrapper.page-mode {
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    visibility: hidden;
}

.manga-page-wrapper.page-mode.dragging {
    transition: none !important;
}

.manga-page-wrapper.page-mode.active-page {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.manga-page-wrapper.page-mode.next-page {
    visibility: visible;
    transform: translate3d(100%, 0, 0);
    z-index: 20;
}

.manga-page-wrapper.page-mode.prev-page {
    visibility: visible;
    transform: translate3d(-100%, 0, 0);
    z-index: 20;
}

.simple-loading-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: radial-gradient(circle at 50% 45%, rgb(var(--bgc)) 0%, rgb(var(--bgs)) 62%);
    color: rgb(var(--c300));
    z-index: 2;
    transition: opacity 0.25s ease;
}
.ld-box { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.ld-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--c300), 0.14);
    border-top-color: rgb(var(--c300));
    border-right-color: rgba(var(--c300), 0.5);
    box-shadow: 0 0 16px rgba(var(--c500), 0.35);
    animation: ldSpin 1.1s linear infinite;
}
.ld-ring2 { inset: 8px; border-top-color: rgba(167, 139, 250, 0.9); border-right-color: transparent; box-shadow: none; animation-duration: 1.7s; animation-direction: reverse; }
.ld-flower {
    width: 30px; height: 30px;
    filter: drop-shadow(0 0 7px rgba(var(--c300), 0.7));
    animation: ldBloom 1.8s ease-in-out infinite;
}
.ld-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--c100));
    display: flex; align-items: center; gap: 2px;
    padding-left: 0.28em;
}
.ld-dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.ld-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--c300)); animation: ldDot 1.1s ease-in-out infinite; }
.ld-dots i:nth-child(2) { animation-delay: 0.15s; }
.ld-dots i:nth-child(3) { animation-delay: 0.3s; }
.ld-box-fail { border-radius: 50%; border: 2px solid rgba(248, 113, 113, 0.5); font-size: 22px; color: #fca5a5; }
.ld-text-fail { flex-direction: column; gap: 4px; letter-spacing: 0.14em; color: #fecaca; }
.ld-text-fail small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: rgba(254, 202, 202, 0.65); }
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldBloom { 0%, 100% { transform: rotate(0deg) scale(0.85); } 50% { transform: rotate(72deg) scale(1.1); } }
@keyframes ldDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ld-ring, .ld-flower, .ld-dots i { animation: none; } }

.manga-page-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    z-index: 3;
    position: relative;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.manga-page-wrapper.page-mode .manga-page-img {
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100vw;
    object-fit: contain;
    margin: auto;
}

.manga-page-img.loaded {
    opacity: 1;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    min-height: 25px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.75);
}

#sakuraCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

html.dark .glass-card {
    background: rgba(var(--bgc), 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.hidden {
    display: none !important;
}


/* ---- "New Ch" tag next to the title (24h) - same look as the NEW cover badge ---- */
.formula-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    width: 100%;
}
.formula-title-row .formula-manga-title {
    margin-top: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
}
.formula-newch-tag {
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff8a4c 0%, #f0532a 100%);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(240, 83, 42, 0.45);
    animation: pulseNew 2s infinite;
}


/* ---- View Transitions: cross-fade + a small slide in the direction of travel ---- */
@keyframes vtOutLeft  { to   { opacity: 0; transform: translateX(-22px); } }
@keyframes vtInRight  { from { opacity: 0; transform: translateX(28px); } }
@keyframes vtOutRight { to   { opacity: 0; transform: translateX(22px); } }
@keyframes vtInLeft   { from { opacity: 0; transform: translateX(-28px); } }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-nav="forward"]::view-transition-old(root) { animation-name: vtOutLeft; }
html[data-nav="forward"]::view-transition-new(root) { animation-name: vtInRight; }
html[data-nav="back"]::view-transition-old(root)    { animation-name: vtOutRight; }
html[data-nav="back"]::view-transition-new(root)    { animation-name: vtInLeft; }

/* Respect "reduce motion" in the OS settings */
@media (prefers-reduced-motion: reduce) {
    .home-cinematic-entry:not(.hidden),
    .lobby-slide-right-transition:not(.hidden),
    .lobby-slide-left-transition:not(.hidden) { animation: none; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}


/* =====================================================================
   WELCOME HERO v2  -  Reze (teal)  |  diagonal groove  |  Latest Update
   ===================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.welcome-hero {
    --seam-top: 50%;      /* where the diagonal seam meets the top edge   */
    --seam-bot: 39%;      /* ...and the bottom edge                       */
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding-top: 13px;    /* room for the title tab that overlaps the top edge */
}

.welcome-hero-inner {
    position: relative;
    isolation: isolate;
    height: clamp(238px, 66vw, 284px);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(167, 139, 250, 0.40), transparent 62%),
        radial-gradient(60% 50% at 62% 108%, rgba(var(--c500), 0.30), transparent 70%),
        linear-gradient(160deg, #1b1237 0%, #281a52 55%, #151a44 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 32px rgba(var(--c500), 0.18);
}
/* gradient frame: teal on the Reze side melting into violet */
.welcome-hero-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: inherit;
    padding: 1.3px;
    pointer-events: none;
    background: linear-gradient(120deg, rgb(var(--c300)) 0%, rgba(var(--c500), 0.28) 38%, rgba(167, 139, 250, 0.28) 62%, #a78bfa 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* ---- left: Reze on teal, cut by the diagonal seam ---- */
.wh-left {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(80% 70% at 76% 30%, rgba(var(--c100), 0.50), transparent 62%),
        linear-gradient(150deg, rgb(var(--c400)) 0%, rgb(var(--c500)) 46%, rgb(var(--c600)) 100%);
    clip-path: polygon(0 0, var(--seam-top) 0, var(--seam-bot) 100%, 0 100%);
}
.wh-deco {                              /* manga screen-tone dots */
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 1.7px) 0 0 / 10px 10px;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
}
.wh-ring {                              /* halo behind her head */
    position: absolute;
    width: 118%;
    aspect-ratio: 1;
    left: 6%;
    top: -16%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.05), 0 0 22px rgba(255, 255, 255, 0.12);
}
.wh-reze {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--seam-top);
    background-image: var(--wh-art, url("reze.webp"));
    background-repeat: no-repeat;
    background-size: auto 100%;          /* scale by HEIGHT only -> same size/crop at every screen width */
    background-position: right top;      /* always anchored to the seam side */
    filter: drop-shadow(0 0 9px rgba(var(--c100), 0.55)) drop-shadow(0 10px 12px rgba(var(--c900), 0.5));
}
.wh-spark {
    position: absolute;
    width: 10px; height: 10px;
    background: #ffffff;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
    animation: whTwinkle 2.8s ease-in-out infinite;
}
.wh-spark.s1 { left: 9%;  top: 42%; }
.wh-spark.s2 { left: 31%; top: 14%; width: 7px; height: 7px; animation-delay: 0.9s; }
.wh-spark.s3 { left: 6%;  bottom: 20%; width: 8px; height: 8px; animation-delay: 1.7s; }
@keyframes whTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(35deg); } }

/* ---- the "groove": teal melts into violet along the diagonal ---- */
.wh-groove {
    position: absolute;
    inset: 0;
    z-index: 3;
    clip-path: polygon(
        calc(var(--seam-top) - 4.5%) 0, calc(var(--seam-top) + 7%) 0,
        calc(var(--seam-bot) + 7%) 100%, calc(var(--seam-bot) - 4.5%) 100%);
    background: linear-gradient(98deg,
        rgba(var(--c500), 0) 44%,
        rgba(var(--c500), 0.38) 49%,
        rgba(var(--c300), 0.45) 52%,
        rgba(122, 82, 230, 0.75) 55.5%,
        rgba(122, 82, 230, 0) 62%);
    filter: blur(2px);
}
.wh-groove-line,
.wh-groove-line2 { position: absolute; inset: 0; z-index: 4; }
.wh-groove-line {
    clip-path: polygon(
        calc(var(--seam-top) - 0.5%) 0, calc(var(--seam-top) + 0.5%) 0,
        calc(var(--seam-bot) + 0.5%) 100%, calc(var(--seam-bot) - 0.5%) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(var(--c100), 0.6) 55%, rgba(255, 255, 255, 0.2));
    filter: drop-shadow(0 0 5px rgba(var(--c300), 0.9));
    animation: whGroovePulse 3.6s ease-in-out infinite;
}
.wh-groove-line2 {
    clip-path: polygon(
        calc(var(--seam-top) + 3.2%) 0, calc(var(--seam-top) + 3.7%) 0,
        calc(var(--seam-bot) + 3.7%) 100%, calc(var(--seam-bot) + 3.2%) 100%);
    background: linear-gradient(180deg, rgba(196, 175, 255, 0.95), rgba(167, 139, 250, 0.25));
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));
}
@keyframes whGroovePulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ---- title tab on the TOP-LEFT corner ---- */
.lh-tab {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(8, 20, 22, 0.97), rgba(16, 38, 42, 0.97));
    border: 1px solid rgba(var(--c500), 0.7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(var(--c500), 0.32);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.lh-tab:active { transform: scale(0.96); }
.lh-live {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff7a4d;
    box-shadow: 0 0 6px rgba(255, 122, 77, 0.9);
    animation: lhLive 1.8s ease-out infinite;
}
@keyframes lhLive {
    0%   { box-shadow: 0 0 0 0 rgba(255, 122, 77, 0.65); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 122, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 77, 0); }
}

/* ---- right: latest-update cover carousel ---- */
.wh-right {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: calc(var(--seam-top) + 3%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 14px 18px 8px;
}
.wh-right::before {                      /* faint diagonal beams */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 16px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.lh-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-slides {
    position: relative;
    height: 100%;
    aspect-ratio: 2 / 3;
    max-width: 100%;
    touch-action: pan-y;            /* horizontal swipe is ours, vertical scroll stays native */
    user-select: none;
    -webkit-user-select: none;
}
.lh-cover { -webkit-user-drag: none; user-drag: none; }
.lh-slides.lh-nofx .lh-slide,
.lh-slides.lh-nofx .lh-slide.active { transition: none !important; }   /* used only to swap state silently after a manual swipe */
/* two ghost cards peeking out behind the cover = "a stack of updates" */
.lh-slides::before,
.lh-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 0;
}
.lh-slides::before { background: linear-gradient(160deg, rgba(var(--c500), 0.6), rgba(var(--c500), 0.14)); transform: rotate(-8deg) translateX(-11%) scale(0.93); }
.lh-slides::after  { background: linear-gradient(160deg, rgba(167, 139, 250, 0.55), rgba(167, 139, 250, 0.12)); transform: rotate(7deg) translateX(11%) scale(0.93); }

.lh-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 18px rgba(var(--c500), 0.22);          /* teal glow only - the black drop shadow flashed around the card when a new cover came in */
    background: #14102b;
    opacity: 0;
    transform: translateY(6px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;          /* leaving: fades out first */
}
.lh-slide.active {
    z-index: 2;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.6s ease 0.35s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;   /* entering: waits, then fades in */
}
.lh-slide::before {                                               /* light sweep when a new cover appears */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
    transform: translateX(-130%);
}
.lh-slide.active::before { animation: lhShine 1.1s ease 0.8s 1 both; }
@keyframes lhShine { to { transform: translateX(130%); } }
.lh-slides.lh-nofx .lh-slide.active::before { animation: none !important; }
.lh-slides.lh-nofx .lh-slide, .lh-slides.lh-nofx .lh-slide * { transition: none !important; }
.lh-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lh-slide .lh-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 6, 22, 0.95) 0%, rgba(8, 6, 22, 0.55) 36%, transparent 66%);
}
.lh-info {
    position: absolute;
    left: 8px; right: 8px; bottom: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lh-title {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.lh-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lh-ch {
    flex-shrink: 1;
    min-width: 0;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(var(--c100));
    background: rgba(var(--c500), 0.3);
    border: 1px solid rgba(var(--c300), 0.45);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-time { flex-shrink: 0; font-size: 8.5px; font-weight: 700; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.lh-new {
    position: absolute;
    top: 7px; left: 7px;
    z-index: 4;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.07em;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #ff8a4c 0%, #f0532a 100%);
    box-shadow: 0 0 8px rgba(240, 83, 42, 0.5);
}

/* ---- slide counter: little blocks, a bright block glides from one to the next ---- */
.lh-dots {
    --bw: 16px;
    --bgap: 6px;
    --lh-ms: 3800ms;
    --i: 0;
    --n: 6;
    position: relative;
    flex-shrink: 0;
    display: flex;
    gap: var(--bgap);
    height: 6px;
    margin-top: 14px;
}
.lh-block {
    width: var(--bw);
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}
.lh-glider {
    position: absolute;
    left: 0;
    top: -1px;
    width: var(--bw);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--c400)), rgb(var(--c300)));
    box-shadow: 0 0 10px rgba(var(--c300), 0.85);
    transform: translateX(calc(var(--i) * (var(--bw) + var(--bgap))));
    transition: transform 0.65s cubic-bezier(0.65, 0, 0.25, 1);
}
.lh-glider::after {                         /* time left until the next cover */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    transform: scaleX(0);
    transform-origin: left center;
}
.lh-dots.run .lh-glider::after { animation: lhProgress var(--lh-ms) linear forwards; }
@keyframes lhProgress { to { transform: scaleX(1); } }
.lh-empty {
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 10px;
}

@media (max-width: 345px) { .lh-time { display: none; } }   /* very narrow phones: keep the chapter name readable */

@media (prefers-reduced-motion: reduce) {
    .lh-slide, .lh-slide.active, .lh-glider { transition: none; }
    .wh-groove-line, .wh-spark, .lh-live, .lh-slide.active::before { animation: none; }
}

/* =====================================================================
   SEARCH DROPDOWN  -  animated glass panel + recent searches
   ===================================================================== */
.search-drop {
    --sd-panel: rgba(255, 255, 255, 0.96);
    --sd-border: rgba(var(--c500), 0.28);
    --sd-text: rgb(var(--bgc));
    --sd-sub: rgba(15, 42, 46, 0.55);
    --sd-field: rgba(var(--c500), 0.08);
    --sd-hover: rgba(var(--c500), 0.10);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 12px 14px;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
    z-index: 41;
}
html.dark .search-drop {
    --sd-panel: rgba(9, 22, 25, 0.90);
    --sd-border: rgba(var(--c400), 0.26);
    --sd-text: rgb(var(--c50));
    --sd-sub: rgba(var(--c100), 0.55);
    --sd-field: rgba(255, 255, 255, 0.06);
    --sd-hover: rgba(var(--c400), 0.12);
}
.search-drop.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.search-drop-panel {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--sd-panel);
    border: 1px solid var(--sd-border);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 26px rgba(var(--c500), 0.14);
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
    transform-origin: 88% 0;
    transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.search-drop-panel::before {            /* soft teal glow along the top edge */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 90px;
    background: radial-gradient(70% 100% at 50% 0%, rgba(var(--c400), 0.20), transparent 70%);
    pointer-events: none;
}
.search-drop.is-open .search-drop-panel {
    opacity: 1;
    transform: none;
}

/* dim backdrop behind the panel */
.search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(2, 10, 12, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.search-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---- input pill ---- */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 6px;
    padding: 0 6px 0 14px;
    height: 46px;
    border-radius: 14px;
    background: var(--sd-field);
    border: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.search-field:focus-within {
    border-color: rgba(var(--c400), 0.6);
    box-shadow: 0 0 0 4px rgba(var(--c400), 0.14), 0 0 18px rgba(var(--c400), 0.22);
}
.search-field-icon { color: rgb(var(--c400)); font-size: 14px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.search-field:focus-within .search-field-icon { transform: scale(1.15) rotate(-8deg); }
.search-field input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--sd-text);
    font-size: 14px;
    font-weight: 600;
    height: 100%;
}
.search-field input::placeholder { color: var(--sd-sub); font-weight: 500; }
.search-clear {
    display: none;
    color: var(--sd-sub);
    font-size: 16px;
    padding: 6px;
    line-height: 1;
}
.search-field.has-value .search-clear { display: block; animation: sdPop 0.2s ease; }
.search-clear:hover { color: rgb(var(--c400)); }
.search-cancel {
    color: rgb(var(--c400));
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 10px;
}
.search-cancel:hover { background: var(--sd-hover); }

/* ---- list ---- */
.search-body {
    position: relative;
    max-height: min(58vh, 420px);
    overflow-y: auto;
    padding: 4px 8px 10px;
    overscroll-behavior: contain;
}
.search-body::-webkit-scrollbar { width: 4px; }
.search-body::-webkit-scrollbar-thumb { background: rgba(var(--c400), 0.3); border-radius: 4px; }

.search-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sd-sub);
}
.search-section i { color: rgb(var(--c400)); margin-right: 4px; }
.search-section em {
    font-style: normal;
    color: rgb(var(--c400));
    background: rgba(var(--c400), 0.14);
    border-radius: 999px;
    padding: 1px 8px;
    letter-spacing: 0;
}
.search-clear-all {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgb(var(--c400));
    padding: 3px 8px;
    border-radius: 8px;
}
.search-clear-all:hover { background: var(--sd-hover); }

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 14px;
    cursor: pointer;
    color: var(--sd-text);
    transition: background 0.18s, transform 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.search-item:hover, .search-item:focus-visible { background: var(--sd-hover); outline: none; }
.search-item:active { transform: scale(0.985); }

.search-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 58px;
    border-radius: 10px;
    background: rgb(var(--bgc)) center / cover no-repeat;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.search-thumb-badge {                    /* little clock icon on the cover */
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    background: linear-gradient(135deg, rgb(var(--c400)), rgb(var(--c600)));
    border: 2px solid var(--sd-panel);
}
.search-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-title mark { background: rgba(var(--c400), 0.25); color: rgb(var(--c400)); border-radius: 4px; padding: 0 2px; }
.search-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--sd-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-go { color: var(--sd-sub); font-size: 11px; margin-right: 4px; transition: transform 0.2s, color 0.2s; }
.search-item:hover .search-go { color: rgb(var(--c400)); transform: translateX(3px); }
.search-remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sd-sub);
    font-size: 12px;
    transition: background 0.18s, color 0.18s;
}
.search-remove:hover, .search-remove:focus-visible { background: rgba(244, 63, 94, 0.15); color: #fb7185; outline: none; }
.search-more { text-align: center; font-size: 11px; color: var(--sd-sub); padding: 6px 0 2px; }
.search-empty { text-align: center; padding: 26px 16px 24px; color: var(--sd-sub); }
.search-empty i { font-size: 28px; color: rgba(var(--c400), 0.7); margin-bottom: 10px; display: block; }
.search-empty p { font-size: 12.5px; font-weight: 500; margin: 0; }

/* staggered fade-in of the rows (only when the list changes mode / opens) */
.search-body.stagger .search-item { animation: sdRowIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 70ms); }
.search-body.stagger .search-empty { animation: sdRowIn 0.4s ease both 0.08s; }
@keyframes sdRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sdPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* ---- header search button: magnifier  <->  X morph ---- */
.search-toggle { position: relative; overflow: hidden; }
.search-toggle .st-icon { position: absolute; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; }
.search-toggle .st-search { transform: none; opacity: 1; }
.search-toggle .st-close { transform: rotate(-90deg) scale(0.4); opacity: 0; }
.search-toggle.is-active { background: rgb(var(--c500)); color: #fff; box-shadow: 0 0 14px rgba(var(--c500), 0.45); }
.search-toggle.is-active .st-search { transform: rotate(90deg) scale(0.4); opacity: 0; }
.search-toggle.is-active .st-close { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .search-drop, .search-drop-panel, .search-backdrop, .search-toggle .st-icon { transition-duration: 0.01ms !important; }
    .search-body.stagger .search-item, .search-body.stagger .search-empty, .search-field.has-value .search-clear { animation: none !important; }
}

/* keep the header (and the search dropdown inside it) above the dim backdrop, independent of utility classes */
#mainHeaderBar { position: sticky; top: 0; z-index: 40; }
.search-clear, .search-cancel, .search-clear-all { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.search-clear-all:hover, .search-cancel:hover { background: var(--sd-hover); }


/* ---- "Clear all" dust effect ---- */
.dust-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; }
.search-body .search-item.dust-hide, .search-body.stagger .search-item.dust-hide { visibility: hidden; animation: none !important; pointer-events: none; }
.search-clear-all.dust-fade { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }


/* single-row dust: the row collapses so the rows below slide up */
.search-body .search-item.dust-collapse {
    overflow: hidden;
    padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =====================================================================
   CHAPTER LOBBY  -  visual polish (everything scoped to #detailView,
   so the Home cards that share some class names are not touched)
   ===================================================================== */
@keyframes lobbyUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lobbyShine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes lobbyGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }

/* back button */
#detailView > div:first-child > button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 14px;
}

/* hero: deeper blurred cover, teal + pink colour wash, soft fade at the bottom */
#detailView .cinematic-blur-hero {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--c400), 0.06) inset;
}
#detailView .cinematic-blur-hero::before {
    inset: -30px;
    filter: blur(24px) brightness(0.45) saturate(1.4);
    transform: scale(1.15);
}
#detailView .cinematic-blur-hero::after {
    background:
        radial-gradient(110% 70% at 12% 0%, rgba(var(--c400), 0.26), transparent 58%),
        radial-gradient(90% 65% at 100% 100%, rgba(255, 143, 171, 0.16), transparent 62%),
        linear-gradient(to bottom, rgba(var(--bgb), 0.3) 0%, rgba(var(--bgb), 0.78) 72%, rgba(var(--bgb), 0.96) 100%);
}
#detailView .top-slight-headline { width: 64px; height: 3px; background: linear-gradient(90deg, transparent, rgb(var(--c300)), transparent); box-shadow: 0 0 12px rgba(var(--c300), 0.7); }

/* cover */
#detailView .formula-manga-card { max-width: none; cursor: default; position: relative; }
#detailView .formula-manga-card:hover { transform: none; }
#detailView .formula-manga-card::before {              /* glow behind the cover */
    content: ""; position: absolute; left: 8%; right: 8%; top: 10%; height: 70%;
    background: radial-gradient(closest-side, rgba(var(--c400), 0.5), transparent);
    filter: blur(22px); z-index: 0; pointer-events: none;
    animation: lobbyGlow 4s ease-in-out infinite;
}
#detailView .clean-single-bold-frame {
    z-index: 1;
    border-radius: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(255, 255, 255, 0.04);
}
#detailView .clean-single-bold-frame::after {          /* slow light sweep over the cover */
    content: ""; position: absolute; inset: 0; z-index: 26; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: lobbyShine 5s ease-in-out 1.2s infinite;
}
#detailView .formula-manga-card:hover .clean-single-bold-frame { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 22px 40px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(255, 255, 255, 0.04); }
#detailView .formula-manga-title {
    margin-top: 14px; font-size: 15px; line-height: 1.35;
    -webkit-line-clamp: 3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* info boxes: frosted glass + teal accent line */
#detailView .lobby-box {
    position: relative; overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.11);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#detailView .lobby-box::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(to bottom, rgb(var(--c300)), rgb(var(--c500)));
    box-shadow: 0 0 10px rgba(var(--c400), 0.6);
}
#detailView .lobby-box:hover { border-color: rgba(var(--c400), 0.4); }

/* genre chips -> pills */
#detailView .individual-genre-frame {
    border-radius: 999px;
    padding: 4px 11px;
    background: rgba(var(--c400), 0.1);
    border: 1px solid rgba(var(--c400), 0.3);
    color: rgb(var(--c100));
    box-shadow: none;
}
#detailView .individual-genre-frame:hover {
    background: rgba(var(--c400), 0.22);
    border-color: rgba(var(--c300), 0.7);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--c400), 0.35);
}

/* bookmark button */
#detailView .premium-bookmark-btn {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
#detailView .premium-bookmark-btn:hover { background: rgba(var(--c400), 0.16); border-color: rgba(var(--c300), 0.7); }
#detailView .premium-bookmark-btn:active { transform: scale(0.97); }
#detailView .premium-bookmark-btn.active {
    background: linear-gradient(135deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 100%);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 18px rgba(var(--c500), 0.5);
}

/* First Read button: glowing gradient with a moving shine */
#detailView .first-read-btn {
    position: relative; overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(120deg, rgb(var(--c500)) 0%, rgb(var(--c600)) 50%, rgb(var(--c400)) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 28px rgba(var(--c500), 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
#detailView .first-read-btn i { color: #fff !important; }
#detailView .first-read-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: lobbyShine 3.8s ease-in-out 1.6s infinite;
}
#detailView .first-read-btn:hover { background: linear-gradient(120deg, rgb(var(--c400)) 0%, rgb(var(--c500)) 50%, rgb(var(--c400)) 100%); box-shadow: 0 14px 32px rgba(var(--c500), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); transform: translateY(-2px); }
#detailView .first-read-btn:active { transform: scale(0.98); }

/* description card */
#detailView .lobby-desc-card {
    position: relative; overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#detailView .lobby-desc-card::before {
    content: ""; position: absolute; top: 0; left: 20px; width: 46px; height: 2px;
    background: linear-gradient(90deg, rgb(var(--c300)), transparent); border-radius: 2px;
}
#detailView .lobby-desc-card p { line-height: 1.75; color: #cbd5e1; }

/* chapter list header */
.lobby-count {
    min-width: 26px; padding: 2px 9px;
    border-radius: 999px;
    text-align: center;
    font-size: 11px; font-weight: 800;
    color: rgb(var(--c300));
    background: rgba(var(--c400), 0.13);
    border: 1px solid rgba(var(--c400), 0.3);
}

/* chapter rows */
#detailView .chapter-grey-box {
    position: relative; overflow: hidden;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}
#detailView .chapter-grey-box::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, rgb(var(--c300)), rgb(var(--c500)));
    transform: scaleY(0); transform-origin: center;
    transition: transform 0.25s ease;
}
#detailView .chapter-grey-box:hover {
    transform: translateX(3px);
    background: linear-gradient(135deg, rgba(var(--c400), 0.14), rgba(255, 255, 255, 0.03));
    border-color: rgba(var(--c400), 0.5);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(var(--c400), 0.14);
}
#detailView .chapter-grey-box:hover::before { transform: scaleY(1); }
#detailView .chapter-grey-box:active { transform: scale(0.985); }

.ch-badge {
    width: 40px; height: 40px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff;
    background: linear-gradient(135deg, rgb(var(--c400)) 0%, rgb(var(--c600)) 100%);
    box-shadow: 0 6px 14px rgba(var(--c500), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ch-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ch-meta i { color: rgb(var(--c300)); margin-right: 3px; font-size: 9.5px; }
.ch-go {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgb(var(--c300));
    background: rgba(var(--c400), 0.12);
    border: 1px solid rgba(var(--c400), 0.25);
    transition: background 0.22s, color 0.22s, transform 0.22s;
}
#detailView .chapter-grey-box:hover .ch-go { background: rgb(var(--c500)); color: #fff; transform: translateX(2px); }

/* staggered entrance when the lobby opens */
#detailView.lobby-enter:not(.hidden) .lobby-box:nth-child(1) { animation: lobbyUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
#detailView.lobby-enter:not(.hidden) .lobby-box:nth-child(2) { animation: lobbyUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }
#detailView.lobby-enter:not(.hidden) .premium-bookmark-btn { animation: lobbyUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s backwards; }
#detailView.lobby-enter:not(.hidden) .lobby-desc-card { animation: lobbyUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }

@media (prefers-reduced-motion: reduce) {
    #detailView *, #detailView *::before, #detailView *::after { animation: none !important; }
}

/* ---- chapter list tools: sort + layout toggle (always on the same row as the "Chapter List" title) ---- */
#detailView .ch-head { flex-wrap: nowrap; gap: 8px; }
#detailView .ch-head h3 { white-space: nowrap; flex-shrink: 0; letter-spacing: 0.04em; font-size: 13px; }
#detailView .ch-head > i { font-size: 15px; }
.ch-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ch-sort-box {
    height: 30px; padding: 0 10px 0 9px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    color: rgb(var(--c300)); cursor: pointer;
    background: rgba(var(--c400), 0.12);
    border: 1px solid rgba(var(--c400), 0.28);
    transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ch-sort-box:hover { background: rgba(var(--c400), 0.22); color: #fff; border-color: rgba(var(--c300), 0.55); }
.ch-sort-box:active { transform: scale(0.94); }
.ch-sort-ico { font-size: 11px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ch-sort-box[data-sort="oldest"] .ch-sort-ico { transform: scaleY(-1); }
/* the two labels sit in a tiny window; tapping slides one out and the other in */
.ch-sort-window { display: block; height: 15px; width: 46px; overflow: hidden; }
.ch-sort-track { display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ch-sort-track > span { display: block; height: 15px; line-height: 15px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-align: left; }
.ch-sort-box[data-sort="oldest"] .ch-sort-track { transform: translateY(-15px); }
.ch-view-btn {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: rgb(var(--c300)); cursor: pointer;
    background: rgba(var(--c400), 0.12);
    border: 1px solid rgba(var(--c400), 0.28);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ch-view-btn:hover { background: rgb(var(--c500)); color: #fff; }
.ch-view-btn:active { transform: scale(0.92); }
@media (min-width: 640px) {
    .ch-sort-box { height: 34px; padding: 0 12px 0 11px; }
    .ch-sort-window { width: 50px; }
    .ch-sort-track > span { font-size: 12px; }
    .ch-view-btn { width: 34px; height: 34px; font-size: 14px; }
    .ch-tools { gap: 8px; }
}
/* very narrow phones: drop the decorative icon so everything stays on ONE row */
@media (max-width: 380px) {
    #detailView .ch-head > i { display: none; }
    #detailView .ch-head h3 { font-size: 12px; }
}

/* block layout: 5 per row, each block reads "CH 1" on a single line */
.ch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ch-tile {
    position: relative; overflow: hidden;
    height: 42px; min-width: 0; padding: 0 2px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    white-space: nowrap; border-radius: 13px; cursor: pointer; color: #fff;
    background: linear-gradient(160deg, rgba(var(--c400), 0.16), rgba(255, 255, 255, 0.035) 70%);
    border: 1px solid rgba(var(--c400), 0.22);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ch-tile::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--c300)), transparent);
    opacity: 0; transition: opacity 0.2s;
}
.ch-tile:hover {
    transform: translateY(-2px); border-color: rgba(var(--c300), 0.65);
    background: linear-gradient(160deg, rgba(var(--c400), 0.34), rgba(255, 255, 255, 0.05) 75%);
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--c400), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ch-tile:hover::after { opacity: 1; }
.ch-tile:active { transform: scale(0.94); }
.ch-tile-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; color: rgb(var(--c300)); }
.ch-tile-num { font-size: 12.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
    .ch-grid { gap: 10px; }
    .ch-tile { height: 50px; gap: 6px; }
    .ch-tile-label { font-size: 15px; }
    .ch-tile-num { font-size: 15px; }
}

/* "Show more" */
.ch-show-more {
    width: 100%; padding: 11px 14px; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; font-weight: 800; color: rgb(var(--c300));
    background: rgba(var(--c400), 0.08);
    border: 1px dashed rgba(var(--c400), 0.4);
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ch-show-more:hover { background: rgba(var(--c400), 0.18); color: #fff; }
.ch-more-count { padding: 1px 8px; border-radius: 999px; font-size: 10px; background: rgba(var(--c400), 0.18); }


/* ===== Reader: chapter navigation  [Back Chapter] [select] [Next Chapter] ===== */
.rcn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.rcn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 6px 8px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    color: rgb(var(--c50));
    background: rgba(var(--c500), 0.14);
    border: 1px solid rgba(var(--c300), 0.35);
    transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.rcn-btn i { font-size: 11px; flex-shrink: 0; color: rgb(var(--c300)); }
.rcn-btn:active:not(:disabled) { transform: scale(0.95); }
.rcn-next {
    background: linear-gradient(135deg, rgb(var(--c500)), rgb(var(--c600)));
    border-color: rgba(var(--c300), 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(var(--c500), 0.3);
}
.rcn-next i { color: #fff; }
.rcn-btn:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
/* middle: chapter selection box */
.rcn-select { position: relative; display: block; min-width: 0; }
.rcn-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;          /* text in the middle */
    width: 100%;
    height: 100%;
    min-height: 46px;
    padding: 6px 28px;                /* equal side room so the text is truly centred */
    border-radius: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: center;
    color: rgb(var(--c50));
    background: linear-gradient(160deg, rgba(var(--c500), 0.16), rgba(var(--bgs), 0.95));
    border: 1px solid rgba(var(--c300), 0.32);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.rcn-trigger:active { transform: scale(0.97); }
.rcn-select.open .rcn-trigger { border-color: rgba(var(--c300), 0.8); box-shadow: 0 0 16px rgba(var(--c500), 0.35); }
.rcn-trigger-text { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcn-caret {
    position: absolute;
    right: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgb(var(--c300));
    transition: transform 0.25s ease;
}
.rcn-select.open .rcn-caret { transform: translateY(-50%) rotate(180deg); }

/* the list that opens above the box */
.rcn-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    width: min(290px, 88vw);
    z-index: 50;
    border-radius: 18px;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: rgba(8, 18, 20, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--c300), 0.3);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.75), 0 0 26px rgba(var(--c500), 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px) scale(0.96);
    transform-origin: 50% 100%;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
}
.rcn-select.open .rcn-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.rcn-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid rgba(var(--c300), 0.16);
    background: linear-gradient(180deg, rgba(var(--c500), 0.18), transparent);
}
.rcn-pop-head span { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: rgb(var(--c100)); }
.rcn-pop-head em {
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: rgb(var(--c300));
    background: rgba(var(--c500), 0.2);
    border: 1px solid rgba(var(--c300), 0.35);
    padding: 1px 8px;
    border-radius: 999px;
}
.rcn-list {
    max-height: min(46vh, 262px);     /* 5 chapters + a peek of the 6th = "scroll for more" */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.rcn-list::-webkit-scrollbar { width: 4px; }
.rcn-list::-webkit-scrollbar-thumb { background: rgba(var(--c300), 0.4); border-radius: 4px; }
.rcn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex: 0 0 auto;
    height: 42px;
    padding: 0 10px;
    border-radius: 12px;
    text-align: left;
    color: rgb(var(--c100));
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.rcn-item:active { transform: scale(0.97); background: rgba(var(--c500), 0.22); }
.rcn-item-num {
    flex: 0 0 auto;
    min-width: 34px;
    height: 28px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    color: rgb(var(--c300));
    background: rgba(var(--c500), 0.16);
    border: 1px solid rgba(var(--c300), 0.28);
}
.rcn-item-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcn-item-check { flex: 0 0 auto; font-size: 11px; color: #fff; }
.rcn-item.current {
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--c500), 0.55), rgba(var(--c600), 0.35));
    border-color: rgba(var(--c300), 0.6);
    box-shadow: 0 0 14px rgba(var(--c500), 0.25);
}
.rcn-item.current .rcn-item-num { color: #fff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
@media (hover: hover) { .rcn-item:not(.current):hover { background: rgba(var(--c500), 0.16); border-color: rgba(var(--c300), 0.3); } }
.rcn-end {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 12px 36px;
    cursor: default;
}
/* page mode: bar floats at the bottom, only on the last page */
.rcn-fixed {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0));
    transform: translateY(110%);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.rcn-fixed .rcn { max-width: 480px; margin: 0 auto; }
.rcn-fixed.show { transform: translateY(0); pointer-events: auto; }


/* Entrance animation of the Chapter Lobby: ONLY when it is opened from Home / Genres (class set in applyView).
   Coming back from the Reader the class is removed, so nothing replays. */
#detailView.lobby-enter .chapter-grey-box {
    animation: lobbyUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 260ms);
}
#detailView.lobby-enter .ch-tile {
    animation: lobbyUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 30ms + 200ms);
}


/* sidebar footer: "Welcome To Sakura Realm" - simple, clean, one line */
.sidebar-welcome {
    text-align: center;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgb(var(--c300));
    padding-bottom: 2px;
}


/* ---- Reading progress (Chapter Lobby) ---- */
/* list rows: thin progress line along the bottom edge of the box */
#detailView .chapter-grey-box .ch-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
#detailView .chapter-grey-box .ch-progress > i {
    display: block; height: 100%;
    background: linear-gradient(90deg, rgb(var(--c500)), rgb(var(--c300)));
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(var(--c300), 0.55);
}
/* fully read (100%): colours fade, in the list and in the blocks */
#detailView .chapter-grey-box.is-read > div,
#detailView .ch-tile.is-read {
    filter: saturate(0.25) brightness(0.62);
    transition: filter 0.25s ease;
}
#detailView .chapter-grey-box.is-read:hover > div,
#detailView .ch-tile.is-read:hover { filter: saturate(0.7) brightness(0.85); }


/* ---- "New" chapter (uploaded within the last 24 hours) ---- */
@keyframes chNewFade {
    0%, 100% { opacity: 0.38; box-shadow: 0 0 0 rgba(255, 107, 129, 0); }
    50%      { opacity: 1;    box-shadow: 0 0 10px rgba(255, 107, 129, 0.45); }
}
@keyframes chNewGlow {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 1; }
}
/* list row: small soft-red "New" next to the chapter name */
.ch-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-title-row .ch-title { flex: 0 1 auto; min-width: 0; }
.ch-new {
    flex-shrink: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 8.5px; font-weight: 800; line-height: 1;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    color: #ffa3b1;
    background: rgba(255, 107, 129, 0.13);
    border: 1px solid rgba(255, 107, 129, 0.38);
    animation: chNewFade 2.2s ease-in-out infinite;
}
/* block tile, not read yet: the INSIDE of the box is red */
.ch-tile.is-new {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.62), rgba(185, 28, 28, 0.42) 75%);
    border-color: rgba(248, 113, 113, 0.75);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ch-tile.is-new:hover {
    background: linear-gradient(160deg, rgba(248, 90, 90, 0.75), rgba(200, 38, 38, 0.52) 75%);
    border-color: rgba(252, 165, 165, 0.9);
}
.ch-tile.is-new .ch-tile-label { color: #ffe1e1; }
@media (prefers-reduced-motion: reduce) {
    .ch-new { animation: none; }
}


/* ---- Chapter row = chapter box + separate Download box ---- */
#detailView .ch-row { display: flex; align-items: stretch; gap: 10px; }
#detailView .ch-row > .chapter-grey-box { flex: 1 1 auto; min-width: 0; }
.ch-dl {
    flex: 0 0 auto;
    width: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    font-size: 15px;
    color: rgb(var(--c300));
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ch-dl:hover { border-color: rgba(var(--c400), 0.5); background: linear-gradient(135deg, rgba(var(--c400), 0.22), rgba(255, 255, 255, 0.03)); color: #fff; }
.ch-dl:active { transform: scale(0.92); }
#detailView.lobby-enter .ch-dl {
    animation: lobbyUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 260ms);
}


/* =====================================================================
   HOME QUICK DOCK  -  fixed corner button + long bar that rolls out to the left
   ===================================================================== */
.home-dock {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 45;                         /* above the page, below sidebar (50) / search / modals */
    display: flex; align-items: center; justify-content: flex-end; gap: 0;
    opacity: 0; transform: scale(0.6); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.dock-fab {
    position: relative; z-index: 2; flex: 0 0 auto;
    width: 50px; height: 50px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: rgb(var(--c100)); cursor: pointer;
    background: linear-gradient(135deg, rgba(var(--c600), 0.92) 0%, rgba(var(--c600), 0.94) 100%);
    border: 1px solid rgba(var(--c100), 0.22);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(var(--c600), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.6s ease, box-shadow 0.25s ease;
}
.dock-fab:active { filter: brightness(0.92); }
/* the little box spins a full turn (and rounds off) while the bar rolls out from it */
.home-dock[data-open="true"] .dock-fab { transform: rotate(360deg); border-radius: 50%; }

.dock-bar {
    flex: 0 1 auto;
    display: flex; align-items: center; gap: 4px;
    height: 50px; padding: 0 6px;
    margin-right: -25px; padding-right: 31px;            /* tucks under the round button */
    max-width: 0; opacity: 0; overflow: hidden;
    border-radius: 25px;
    background: rgba(var(--bgs), 0.96);
    border: 1px solid rgba(var(--c400), 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--c500), 0.18);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, padding 0.4s ease;
    pointer-events: none;
}
.home-dock[data-open="true"] .dock-bar { max-width: min(calc(100vw - 80px), 350px); opacity: 1; padding-left: 8px; pointer-events: auto; }

.dock-item {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 12px; border-radius: 19px;
    font-size: 12px; font-weight: 800; color: #cbd5e1; white-space: nowrap; cursor: pointer;
    background: transparent; border: 0;
    -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateX(14px) scale(0.85);
    transition: opacity 0.25s ease, transform 0.3s ease, background 0.2s, color 0.2s;
}
.dock-item i { color: rgb(var(--c300)); font-size: 13px; transition: color 0.2s; }
.dock-item:hover, .dock-item:active { background: rgba(var(--c400), 0.18); color: #fff; }
.dock-item:hover i, .dock-item:active i { color: #fff; }
.home-dock[data-open="true"] .dock-item {
    opacity: 1; transform: none;
    transition-delay: calc(var(--k, 0) * 70ms + 160ms), calc(var(--k, 0) * 70ms + 160ms), 0s, 0s;
}
@media (max-width: 380px) { .dock-item { padding: 0 9px; gap: 5px; font-size: 11px; } }
@media (max-width: 340px) { .dock-item span { display: none; } .dock-item { padding: 0 15px; } .dock-item i { font-size: 15px; } }

/* ---- Bookmark / History sheet ---- */
.lib-backdrop {
    position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.lib-backdrop.show { opacity: 1; pointer-events: auto; }
.lib-sheet {
    position: fixed; left: 0; right: 0; bottom: -100%; z-index: 71;
    width: 100%; max-width: 480px; margin: 0 auto;
    max-height: 78vh; display: flex; flex-direction: column;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--bgs), 0.98);
    border: 1.5px solid rgba(var(--c500), 0.3); border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lib-sheet.show { bottom: 0; }
.lib-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(var(--c400), 0.2); }
.lib-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: rgb(var(--c300)); }
.lib-head-actions { display: flex; align-items: center; gap: 8px; }
.lib-clear { padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #ffa3b1; cursor: pointer; background: rgba(255, 107, 129, 0.12); border: 1px solid rgba(255, 107, 129, 0.35); }
.lib-close { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: rgb(var(--c300)); cursor: pointer; background: rgba(var(--c400), 0.12); border: 1px solid rgba(var(--c400), 0.28); }
.lib-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
.lib-item {
    display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.lib-item:hover { border-color: rgba(var(--c400), 0.5); background: rgba(var(--c400), 0.1); }
.lib-item:active { transform: scale(0.985); }
.lib-thumb { flex: 0 0 auto; width: 44px; height: 62px; border-radius: 8px; background-size: cover; background-position: center; background-color: rgb(var(--bgc)); border: 1px solid rgba(255, 255, 255, 0.12); }
.lib-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-name { font-size: 13px; font-weight: 800; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-sub { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-remove { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #94a3b8; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.lib-remove:hover { color: #ffa3b1; border-color: rgba(255, 107, 129, 0.45); }
.lib-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0; color: #64748b; font-size: 12px; }
.lib-empty i { font-size: 26px; color: rgba(var(--c300), 0.5); }

@media (prefers-reduced-motion: reduce) {
    .home-dock, .dock-fab, .dock-bar, .dock-item, .lib-sheet { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* =====================================================================
   HISTORY PAGE  -  "Latest Reading" card + Download Management
   ===================================================================== */
#historyView,
#settingsView {
    position: fixed; inset: 0; z-index: 40; width: 100%; margin: 0; padding: 0;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(120% 50% at 100% 0%, rgba(255, 70, 50, 0.10), transparent 60%),
        radial-gradient(100% 45% at 0% 100%, rgba(var(--c400), 0.09), transparent 60%),
        #050b0d;
}
.hx-wrap { max-width: 520px; margin: 0 auto; padding: calc(22px + env(safe-area-inset-top, 0px)) 18px 60px; }

.hx-title {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
    margin: 0 0 14px;
}
.hx-title-bar { width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(to bottom, #ff5a4d, rgb(var(--c400))); box-shadow: 0 0 12px rgba(255, 90, 77, 0.55); }

/* the card */
.hx-card {
    position: relative; overflow: hidden; height: 276px; border-radius: 24px; cursor: pointer; isolation: isolate;
    border: 1px solid transparent;
    background:
        radial-gradient(90% 120% at 12% 20%, rgba(255, 255, 255, 0.045), transparent 55%) padding-box,
        linear-gradient(112deg, #0a0e10 0%, #0d1214 42%, #1a0a0d 78%, #2a0c10 100%) padding-box,
        linear-gradient(135deg, rgba(255, 130, 105, 0.85), rgba(255, 255, 255, 0.10) 38%, rgba(140, 175, 185, 0.32) 70%, rgba(255, 110, 90, 0.55)) border-box;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 70, 50, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hx-card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.65), 0 0 44px rgba(255, 70, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.hx-card:active { transform: scale(0.985); }
.hx-card.is-empty { cursor: default; }
.hx-card::after {                           /* slow light sweep across the glass */
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 6; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.07) 55%, transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: hxSweep 7.5s ease-in-out 1.2s infinite;
}
@keyframes hxSweep { 0% { transform: translateX(-140%) skewX(-18deg); } 38%, 100% { transform: translateX(380%) skewX(-18deg); } }

.hx-glow {                                  /* crimson aura behind Makima, slowly breathing */
    position: absolute; right: -50px; top: -40px; width: 270px; height: 300px; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 76, 52, 0.55), rgba(220, 40, 40, 0.16) 58%, transparent 76%);
    filter: blur(8px); animation: hxBreath 4.8s ease-in-out infinite alternate;
}
@keyframes hxBreath { from { opacity: 0.65; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }

.hx-embers { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; z-index: 1; pointer-events: none; overflow: hidden; }
.hx-embers i {
    position: absolute; bottom: -8px; width: var(--sz); height: var(--sz); border-radius: 50%;
    background: #ff8a5c; box-shadow: 0 0 8px 1px rgba(255, 100, 60, 0.9); opacity: 0;
    animation: hxEmber 7s linear infinite;
}
@keyframes hxEmber { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: translate(var(--dx), -240px); opacity: 0; } }

.hx-makima {
    position: absolute; right: -4px; bottom: 0; height: 100%; width: auto; max-width: none;
    object-fit: contain; object-position: right bottom; pointer-events: none; user-select: none; z-index: 4;
    filter: drop-shadow(0 0 16px rgba(255, 80, 60, 0.4)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.65));
    animation: hxFloat 6s ease-in-out infinite alternate; transform-origin: 70% 100%;
}
@keyframes hxFloat { from { transform: translateY(2px) scale(1); } to { transform: translateY(-2px) scale(1.012); } }

/* cover (left, centred in its half) with the title underneath */
.hx-info {
    position: relative; z-index: 5; width: 62%; height: 100%; padding: 0 0 0 4%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
}
.hx-cover {
    position: relative; flex: 0 0 auto; width: 112px; height: 164px; border-radius: 13px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 90, 70, 0.24);
    animation: hxCover 5.4s ease-in-out infinite alternate;
}
.hx-cover::after {                          /* glossy streak that drifts over the cover */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 46%, transparent 60%);
    transform: translateX(-120%); animation: hxGloss 6s ease-in-out 2s infinite;
}
@keyframes hxGloss { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
@keyframes hxCover { from { transform: translateY(2px) rotate(-1.2deg); } to { transform: translateY(-3px) rotate(0.6deg); } }
.hx-thumb { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.05); }
.hx-card.is-empty .hx-cover { border-style: dashed; }
.hx-name {
    max-width: 100%; text-align: center;
    font-family: 'Cinzel', serif; font-weight: 900; font-size: 15.5px; line-height: 1.2; letter-spacing: 0.03em; color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 350px) { .hx-cover { width: 96px; height: 140px; } .hx-name { font-size: 13.5px; } }

/* slight bar */
.hx-slight { position: relative; height: 22px; margin: 28px 6px 26px; display: flex; align-items: center; justify-content: center; }
.hx-slight::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--c400), 0.7) 25%, rgba(255, 90, 77, 0.8) 75%, transparent);
    box-shadow: 0 0 12px rgba(var(--c400), 0.35);
}
.hx-slight i { position: relative; width: 10px; height: 10px; transform: rotate(45deg); background: #050b0d; border: 2px solid #ff5a4d; box-shadow: 0 0 12px rgba(255, 90, 77, 0.8); }

@media (prefers-reduced-motion: reduce) { .hx-card, .hx-card::after, .hx-glow, .hx-embers i, .hx-makima, .hx-cover, .hx-cover::after { animation: none !important; transition: none; } }

/* title text colour: soft pearl -> rose gold */
.hx-title {
    background: linear-gradient(95deg, #ffffff 0%, #f3e3dc 45%, #ffb7a3 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hx-title-bar { -webkit-text-fill-color: initial; }

/* "read up to" chip under the manga title */
.hx-chap {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 4px 11px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; color: #ffd2c8;
    background: rgba(255, 90, 70, 0.13); border: 1px solid rgba(255, 120, 100, 0.38);
}
.hx-chap[hidden] { display: none; }
.hx-chap i { font-size: 9.5px; color: #ff8d7a; }
.hx-chap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-info { gap: 11px; }
@media (max-width: 350px) { .hx-card { height: 262px; } }

/* ---------- Download Management ---------- */
.dm-list { display: flex; flex-direction: column; gap: 10px; }
.dm-empty {
    display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 30px 0;
    font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: 0.04em;
    border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(255, 255, 255, 0.02);
}
.dm-empty i { font-size: 24px; color: rgba(255, 140, 120, 0.55); }
.dm-item {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    animation: dmIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes dmIn { from { opacity: 0; transform: translateY(8px); } }
.dm-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #ffb36b; }
.dm-item.done::before { background: rgb(var(--c400)); box-shadow: 0 0 10px rgba(var(--c400), 0.6); }
.dm-item.error::before { background: #ff5a4d; box-shadow: 0 0 10px rgba(255, 90, 77, 0.6); }
.dm-thumb { flex: 0 0 auto; width: 44px; height: 64px; border-radius: 9px; background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); }
.dm-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-name { font-size: 13px; font-weight: 800; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-chap { font-size: 11px; font-weight: 700; color: #ffb3a2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 10.5px; font-weight: 800; }
.dm-count { color: #94a3b8; font-weight: 700; }
.dm-dl { color: #ffc27a; }
.dm-dl b { font-weight: 800; animation: dmDot 1.2s infinite; opacity: 0.2; }
.dm-dl b:nth-child(2) { animation-delay: 0.2s; } .dm-dl b:nth-child(3) { animation-delay: 0.4s; }
@keyframes dmDot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.dm-ok { color: rgb(var(--c400)); } .dm-bad { color: #ff7d70; }
.dm-bar { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.dm-bar > i {
    display: block; height: 100%; border-radius: 3px; transition: width 0.3s ease;
    background: linear-gradient(90deg, #ff8a4d, #ffd08a, #ff8a4d); background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(255, 150, 80, 0.55); animation: dmShimmer 1.4s linear infinite;
}
@keyframes dmShimmer { to { background-position: -200% 0; } }
.dm-retry { padding: 3px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #ffd2c8; cursor: pointer; background: rgba(255, 90, 70, 0.15); border: 1px solid rgba(255, 120, 100, 0.45); }
.dm-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #94a3b8; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.dm-x:hover { color: #ffa3b1; border-color: rgba(255, 107, 129, 0.45); }

/* chapter-list download button states */
.ch-dl.is-busy { color: #ffc27a; cursor: progress; }
.ch-dl.is-done { color: rgb(var(--c400)); border-color: rgba(var(--c300), 0.45); }

/* ---------- toast ---------- */
.toast-host { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px); padding: 9px 16px 9px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 800; color: #f1f5f9;
    background: rgba(12, 20, 22, 0.94); border: 1px solid rgba(var(--c300), 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--c400), 0.2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(34px) scale(0.96); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.in { opacity: 1; transform: none; }
.toast-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgb(var(--c900)); background: linear-gradient(135deg, rgb(var(--c300)), rgb(var(--c400))); }
.toast.err { border-color: rgba(255, 110, 95, 0.5); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 90, 77, 0.22); }
.toast.err .toast-ico { color: #2a0906; background: linear-gradient(135deg, #ff9a8d, #ff5a4d); }
.toast-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* History: a finished download can be tapped to read it */
.dm-item.readable { cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.dm-item.readable:active { transform: scale(0.985); }

/* toast for "Downloading..." (amber, arrow keeps sliding down) */
.toast.busy { border-color: rgba(255, 194, 122, 0.5); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 179, 107, 0.22); }
.toast.busy .toast-ico { color: #2a1604; background: linear-gradient(135deg, #ffd9a0, #ffb36b); overflow: hidden; }
.toast.busy .toast-ico i { animation: dlSlide 0.9s ease-in infinite; }

/* chapter-list download button while downloading: arrow slides down into a little tray */
.dl-anim { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 20px; overflow: hidden; }
.dl-anim i { font-size: 13px; animation: dlSlide 0.9s ease-in infinite; }
.dl-anim::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 1px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.85; }
@keyframes dlSlide {
    0%   { transform: translateY(-150%); opacity: 0; }
    30%  { opacity: 1; }
    80%  { transform: translateY(30%); opacity: 1; }
    100% { transform: translateY(60%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dl-anim i, .toast.busy .toast-ico i { animation: none; } }


/* ===================== Settings: Data Storage Manager ===================== */
.st-file { position: relative; margin-top: 22px; }
.st-tab {
    position: absolute; top: -17px; left: 18px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 7px; border-radius: 12px 12px 0 0;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: rgb(var(--c50));
    background: linear-gradient(160deg, rgba(var(--c400), 0.45), rgba(var(--c400), 0.18));
    border: 1px solid rgba(var(--c300), 0.45); border-bottom: none;
}
.st-tab i { color: rgb(var(--c300)); }
.st-body {
    position: relative; padding: 20px 18px 16px; border-radius: 0 22px 22px 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(var(--c300), 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(var(--c400), 0.08);
}
.st-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.st-head b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 800; color: #fff; }
.st-head span { font-size: 12px; font-weight: 700; color: #94a3b8; }
.st-bar { display: flex; width: 100%; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.st-bar i { display: block; height: 100%; width: 0; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.st-bar .seg-dl { background: linear-gradient(90deg, #ff8d5a, #ff5a4d); }
.st-bar .seg-other { background: linear-gradient(90deg, #a78bfa, #7c5cf0); }
.st-bar .seg-free { background: linear-gradient(90deg, rgb(var(--c400)), rgb(var(--c300))); }
.st-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.st-legend li { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: #cbd5e1; }
.st-legend .lg { flex: 1; }
.st-legend em { font-style: normal; font-weight: 800; color: #fff; }
.st-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.st-legend .dot.dl { background: #ff6f55; box-shadow: 0 0 8px rgba(255, 90, 77, 0.6); }
.st-legend .dot.other { background: #8f72f5; box-shadow: 0 0 8px rgba(124, 92, 240, 0.6); }
.st-legend .dot.free { background: rgb(var(--c400)); box-shadow: 0 0 8px rgba(var(--c400), 0.6); }
.st-chap {
    display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 13px; border-radius: 14px;
    font-size: 12px; font-weight: 700; color: #e2e8f0;
    background: rgba(255, 110, 85, 0.09); border: 1px solid rgba(255, 130, 105, 0.3);
}
.st-chap i { color: #ff8d7a; font-size: 15px; }
.st-chap span { flex: 1; }
.st-chap b { color: #fff; font-weight: 800; }
.st-note { margin: 12px 2px 0; font-size: 10.5px; line-height: 1.45; color: #64748b; }
.st-note:empty { display: none; }

.st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.st-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 15px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800; color: rgb(var(--c50));
    background: rgba(var(--c400), 0.12); border: 1px solid rgba(var(--c300), 0.4);
    transition: transform 0.15s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.st-btn:active { transform: scale(0.96); }
.st-btn i { font-size: 13px; color: rgb(var(--c300)); }
.st-btn.danger { background: rgba(255, 90, 77, 0.14); border-color: rgba(255, 120, 105, 0.5); color: #ffd9d3; }
.st-btn.danger i { color: #ff8d7a; }

.st-backdrop { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.st-backdrop.show { opacity: 1; pointer-events: auto; }
.st-confirm {
    position: fixed; left: 50%; top: 50%; z-index: 100002; width: min(88vw, 340px); padding: 22px 20px 18px; text-align: center; border-radius: 22px;
    background: rgba(10, 18, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(0.94);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-confirm.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.st-confirm-ico { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #ff8d7a; background: rgba(255, 90, 77, 0.14); border: 1px solid rgba(255, 120, 105, 0.4); }
.st-confirm h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; }
.st-confirm p { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: #94a3b8; }
.st-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


/* ---------- Setting Management ---------- */
.st-mgmt-title { margin-top: 30px; }
.st-sub { margin: -4px 0 12px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.st-list { display: flex; flex-direction: column; gap: 10px; }
.st-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.st-row-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgb(var(--c300)); background: rgba(var(--c400), 0.12); border: 1px solid rgba(var(--c300), 0.3); }
.st-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-txt b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 800; color: #f1f5f9; }
.st-row-txt small { font-size: 10.5px; font-weight: 600; line-height: 1.35; color: #94a3b8; }
.st-switch {
    position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; padding: 0;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.25s ease, border-color 0.25s ease; -webkit-tap-highlight-color: transparent;
}
.st-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #cbd5e1; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease; }
.st-switch.on { background: linear-gradient(135deg, rgb(var(--c400)), rgb(var(--c600))); border-color: rgba(var(--c300), 0.7); box-shadow: 0 0 12px rgba(var(--c400), 0.4); }
.st-switch.on i { transform: translateX(20px); background: #fff; }

/* ---------- Battery Saver: fewer animations, no blur ---------- */
html.battery-saver *:not(.ld-ring):not(.ld-ring2):not(.ld-flower):not(.ld-dots i):not(.dl-anim i):not(.toast-ico i),
html.battery-saver *::before,
html.battery-saver *::after { animation-iteration-count: 1 !important; }
html.battery-saver * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.battery-saver .lh-slides .lh-slide::before { animation: none !important; }


/* ---------- Low-end Mode: lighter rendering for slow phones ---------- */
html.lite *:not(.ld-ring):not(.ld-ring2):not(.ld-flower):not(.ld-dots i):not(.dl-anim i):not(.toast-ico i),
html.lite *::before,
html.lite *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
}
html.lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; scroll-behavior: auto !important; }
html.lite .showcase-card, html.lite .formula-manga-card, html.lite .glass-card, html.lite .search-drop-panel, html.lite .st-switch.on {
    box-shadow: none !important;
}
html.lite .search-drop-panel { background: var(--sd-panel, rgb(var(--bgs))) !important; }
html.lite .st-switch, html.lite .st-switch i { transition-duration: 0.1s !important; }
html.lite .formula-manga-card, html.lite .showcase-card { transition: none !important; will-change: auto !important; }
html.lite .formula-manga-card:hover, html.lite .showcase-card:hover { transform: none !important; }
html.lite #sakuraCanvas, html.lite #sidebarSakuraCanvas { display: none !important; }

/* ==========================================================================
   DESKTOP LAYOUT (PC / laptop / phone in 'Desktop site' mode, >= 768px)
   Everything is inside this one media query, so phones and tablets are untouched.
   ========================================================================== */
@media (min-width: 768px) {
    /* page + header content sit in a centred 1280px column instead of stretching edge to edge */
    main.relative { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 24px 28px 48px; }
    .sakura-header-bar > div { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }

    /* manga grids: many columns, cards keep a sane size (ids beat the Tailwind utilities) */
    #mainMangaGridContainer,
    #genresGrid {
        max-width: none;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 24px;
    }

    /* hot trending: bigger cards */
    #showcaseScrollContainer { gap: 20px; }
    #showcaseScrollContainer .showcase-card { width: 190px; height: 262px; }

    /* chapter lobby: readable width, centred */
    #detailView { max-width: 1000px; margin-left: auto; margin-right: auto; }
    #detailView .ch-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }

    /* genres page header + chips follow the same column */
    #genresView { max-width: 1280px; margin-left: auto; margin-right: auto; }

    /* history page: a bit wider than the phone card */
    .hx-wrap { max-width: 640px; }

    /* floating quick-menu: a little further from the corner on big screens */
    .home-dock { right: 36px; bottom: 32px; }

    /* reader top bar + search panel line up with the content column */
    .reader-floating-top-bar > div { max-width: 768px; }
    .search-drop-panel { max-width: 720px; }
}

/* real PC screens: more breathing room */
@media (min-width: 1100px) {
    main.relative { padding: 28px 40px 48px; }
    .sakura-header-bar > div { padding-left: 40px; padding-right: 40px; }
    #mainMangaGridContainer, #genresGrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; }
}

/* very large monitors: allow a few more columns */
@media (min-width: 1600px) {
    main.relative, .sakura-header-bar > div { max-width: 1440px; }
    #mainMangaGridContainer, #genresGrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}


/* ---- right menu drawer: the page behind must not scroll / shake while the menu is open ---- */
html.sidebar-open, html.sidebar-open body { overflow: hidden !important; overscroll-behavior: none; }
#rightSidebar { height: 100vh; height: 100dvh; height: var(--sb-h, 100dvh); overscroll-behavior: contain; touch-action: none; }   /* --sb-h is frozen by script.js so the on-screen keyboard cannot squash the menu / move the branches */
#sidebarBackdrop { touch-action: none; }


/* ---------- About & Legal (Settings) ---------- */
.st-sub-gap { margin-top: 26px; }
.st-link { width: 100%; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.st-link:hover, .st-link:focus-visible { border-color: rgba(var(--c400), 0.5); background: rgba(var(--c400), 0.08); outline: none; }
.st-link:active { transform: scale(0.985); }
.st-chev { flex: 0 0 auto; font-size: 12px; color: #64748b; }
.st-foot { margin: 18px 4px 6px; text-align: center; font-size: 10.5px; font-weight: 600; line-height: 1.5; color: #64748b; }

.legal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.legal-backdrop.show { opacity: 1; pointer-events: auto; }
.legal-sheet {
    position: fixed; left: 0; right: 0; bottom: -100%; z-index: 91;
    width: 100%; max-width: 560px; margin: 0 auto;
    height: 86vh; height: 86dvh; display: flex; flex-direction: column;
    padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--bgs), 0.99);
    border: 1.5px solid rgba(var(--c500), 0.3); border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.65);
    transition: bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.legal-sheet.show { bottom: 0; }
.legal-grab { width: 42px; height: 4px; border-radius: 4px; margin: 2px auto 12px; background: rgba(255, 255, 255, 0.2); }
.legal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 2px 10px; outline: none; color: #cbd5e1; font-size: 13px; line-height: 1.65; }
.legal-body .lg-upd { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: rgb(var(--c300)); background: rgba(var(--c400), 0.12); border: 1px solid rgba(var(--c300), 0.28); }
.legal-body .lg-intro { margin: 0 0 14px; color: #e2e8f0; }
.legal-body h4 { margin: 18px 0 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 800; color: rgb(var(--c300)); }
.legal-body p { margin: 0 0 8px; }
.legal-body ul { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.legal-body li { margin: 0 0 5px; }
.legal-body li::marker { color: rgb(var(--c300)); }
.legal-body b { color: #f1f5f9; font-weight: 700; }
.legal-body .lg-end { margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: #64748b; text-align: center; }
@media (prefers-reduced-motion: reduce) { .legal-sheet, .legal-backdrop { transition-duration: 0.01s !important; } }

/* ============ COLOUR THEMES ============
   c50..c900 = accent shades (light -> dark), bgb/bgs/bgc = page / surface / card backgrounds (R, G, B).
   Two-colour blends use one hue for the light shades (c300/c400) and another for the dark ones (c500/c600/c900). */
:root, html[data-theme="teal"] {
    --c50: 236, 253, 248; --c100: 208, 247, 236; --c300: 95, 224, 194; --c400: 44, 199, 169; --c500: 14, 166, 145; --c600: 11, 138, 121; --c900: 7, 46, 41;
    --bgb: 6, 14, 16; --bgs: 10, 22, 24; --bgc: 15, 33, 36;
}
html[data-theme="rose"] {
    --c50: 255, 241, 245; --c100: 255, 218, 228; --c300: 255, 143, 171; --c400: 244, 99, 140; --c500: 225, 62, 112; --c600: 190, 40, 90; --c900: 76, 12, 36;
    --bgb: 16, 7, 11; --bgs: 24, 11, 16; --bgc: 36, 16, 24;
}
html[data-theme="violet"] {
    --c50: 245, 241, 255; --c100: 232, 222, 255; --c300: 183, 164, 255; --c400: 150, 120, 245; --c500: 124, 92, 232; --c600: 98, 66, 200; --c900: 38, 22, 84;
    --bgb: 10, 8, 20; --bgs: 16, 12, 30; --bgc: 24, 18, 44;
}
html[data-theme="amber"] {
    --c50: 255, 249, 235; --c100: 255, 236, 196; --c300: 255, 207, 120; --c400: 255, 179, 71; --c500: 245, 142, 20; --c600: 205, 106, 10; --c900: 80, 40, 4;
    --bgb: 16, 11, 6; --bgs: 24, 17, 9; --bgc: 36, 26, 12;
}
html[data-theme="aurora"] {   /* teal + violet */
    --c50: 236, 253, 248; --c100: 208, 247, 236; --c300: 95, 224, 194; --c400: 44, 199, 169; --c500: 124, 92, 232; --c600: 98, 66, 200; --c900: 38, 22, 84;
    --bgb: 7, 10, 20; --bgs: 11, 16, 30; --bgc: 16, 24, 42;
}
html[data-theme="sunset"] {   /* amber + rose */
    --c50: 255, 245, 238; --c100: 255, 224, 205; --c300: 255, 190, 110; --c400: 255, 150, 80; --c500: 232, 62, 112; --c600: 190, 40, 90; --c900: 76, 12, 36;
    --bgb: 16, 8, 10; --bgs: 24, 12, 14; --bgc: 36, 18, 20;
}
html[data-theme="smoke"] {   /* grey + white blend */
    --c50: 250, 250, 252; --c100: 240, 241, 245; --c300: 226, 228, 235; --c400: 190, 194, 205; --c500: 128, 134, 148; --c600: 96, 102, 116; --c900: 44, 47, 56;
    --bgb: 22, 24, 29; --bgs: 31, 34, 40; --bgc: 42, 45, 53;
}
html[data-theme="goldgrey"] {   /* gold + grey blend */
    --c50: 255, 250, 235; --c100: 250, 238, 200; --c300: 240, 212, 130; --c400: 222, 185, 85; --c500: 128, 132, 142; --c600: 98, 102, 112; --c900: 42, 44, 50;
    --bgb: 17, 17, 20; --bgs: 26, 26, 30; --bgc: 37, 37, 42;
}
html[data-theme="black"] {   /* pure black */
    --c50: 245, 245, 245; --c100: 229, 229, 229; --c300: 212, 212, 212; --c400: 163, 163, 163; --c500: 115, 115, 115; --c600: 82, 82, 82; --c900: 28, 28, 28;
    --bgb: 0, 0, 0; --bgs: 10, 10, 10; --bgc: 20, 20, 20;
}
html[data-theme="white"] {   /* light / white */
    --c50: 255, 255, 255; --c100: 71, 85, 105; --c300: 71, 85, 105; --c400: 100, 116, 139; --c500: 71, 85, 105; --c600: 51, 65, 85; --c900: 226, 232, 240;
    --bgb: 255, 255, 255; --bgs: 246, 247, 249; --bgc: 237, 239, 243;
    color-scheme: light;
}
html[data-theme="white"] body { color: #0f172a; }
html[data-theme="white"] .text-white, html[data-theme="white"] .text-slate-100, html[data-theme="white"] .text-slate-200,
html[data-theme="white"] .text-slate-300 { color: #1e293b; }
html[data-theme="white"] .text-slate-400, html[data-theme="white"] .text-slate-500 { color: #475569; }
html[data-theme="white"] .theme-opt .tp-name, html[data-theme="white"] .legal-body, html[data-theme="white"] .legal-body .lg-intro,
html[data-theme="white"] .legal-body b { color: #1e293b; }
html[data-theme="white"] .theme-pop, html[data-theme="white"] .legal-sheet { border-color: rgba(15, 23, 42, 0.15); }
html[data-theme="white"] .wh-left .text-white, html[data-theme="white"] button.bg-sakura-500, html[data-theme="white"] .premium-filter-btn.active { color: #fff; }
body, .view-section { transition: background-color 0.35s ease; }

/* theme picker (drops down under the palette button) */
.theme-pop {
    position: absolute; top: calc(100% + 12px); right: -44px; z-index: 60; width: min(272px, calc(100vw - 24px)); padding: 12px;
    border-radius: 20px; background: rgba(var(--bgs), 0.97);
    border: 1px solid rgba(var(--c300), 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 26px rgba(var(--c500), 0.2);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.96); transform-origin: 80% 0;
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
}
.theme-pop.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.theme-pop-head { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c100)); padding: 2px 4px 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.theme-opt {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 8px; border-radius: 14px; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-opt:active { transform: scale(0.96); }
.theme-opt .tp-sw { height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); }
.theme-opt .tp-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 800; color: #e2e8f0; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.theme-opt .tp-tag { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c300)); opacity: 0.85; }
.theme-opt .tp-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 9px; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); }
.theme-opt.active { border-color: rgba(var(--c300), 0.8); background: rgba(var(--c500), 0.16); box-shadow: 0 0 14px rgba(var(--c500), 0.3); }
.theme-opt.active .tp-check { display: flex; }



/* ============================================================================
   LANGUAGE BOX (Settings > User Setting > Language)
   ============================================================================ */
.st-lang { position: relative; z-index: 6; }
.lang-box { position: relative; flex: 0 0 auto; }
.lang-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 120px;
    padding: 9px 12px 9px 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: #f1f5f9;
    background: rgba(var(--c400), 0.12); border: 1px solid rgba(var(--c300), 0.4);
    transition: border-color .2s, background .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent;
}
.lang-trigger:hover, .lang-trigger:focus-visible, .lang-box.open .lang-trigger {
    background: rgba(var(--c400), 0.2); border-color: rgba(var(--c300), 0.75); box-shadow: 0 0 12px rgba(var(--c400), 0.28); outline: none;
}
.lang-caret { font-size: 10px; color: rgb(var(--c300)); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.lang-box.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px); width: 100%; min-width: 150px; z-index: 20; margin: 0; padding: 6px; list-style: none;
    border-radius: 14px; background: rgb(var(--bgs)); border: 1px solid rgba(var(--c300), 0.4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--c400), 0.15);
    opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none; visibility: hidden;
    transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .25s;
}
.lang-box.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.lang-menu li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 700; color: #cbd5e1; cursor: pointer; transition: background .15s, color .15s;
}
.lang-menu li + li { margin-top: 2px; }
.lang-menu li i { font-size: 12px; color: rgb(var(--c300)); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.lang-menu li:hover, .lang-menu li:focus-visible { background: rgba(var(--c400), 0.16); color: #fff; outline: none; }
.lang-menu li[aria-selected="true"] { background: rgba(var(--c400), 0.2); color: #fff; }
.lang-menu li[aria-selected="true"] i { opacity: 1; transform: none; }

/* ============================================================================
   MYANMAR MODE (html.lang-my): proper Myanmar font + spacing. The header brand (.brand-lock) is left exactly as it is.
   ============================================================================ */
html.lang-my :where(body, div, span, p, b, em, small, strong, h1, h2, h3, h4, label, li, a, button, input, textarea, select):not(.brand-lock):not(.brand-lock *) {
    font-family: 'Noto Sans Myanmar', 'Plus Jakarta Sans', 'Myanmar Text', 'Myanmar Sangam MN', 'Padauk', sans-serif !important;
}
/* Myanmar letters must never be spaced out or upper-cased, and stacked marks need more line height */
html.lang-my *:not(.brand-lock):not(.brand-lock *) { letter-spacing: normal !important; text-transform: none !important; word-spacing: normal; }
html.lang-my body { line-height: 1.7; }
html.lang-my :where(p, small, b, em, strong, h1, h2, h3, h4, label, li, button, span):not(.brand-lock):not(.brand-lock *):not(.st-switch *):not(.lh-dots *) { line-height: 1.7; }
html.lang-my h1, html.lang-my h2, html.lang-my h3, html.lang-my h4, html.lang-my .formula-manga-title { line-height: 1.75 !important; }
html.lang-my [class*="text-[8px]"], html.lang-my [class*="text-[9px]"], html.lang-my [class*="text-[10px]"] { font-size: 11.5px !important; }
html.lang-my .text-xs { font-size: 13px; }
html.lang-my .st-row-txt b { font-size: 14px; font-weight: 700; }
html.lang-my .st-row-txt small { font-size: 11.5px; line-height: 1.6; }
html.lang-my .st-sub { font-size: 12px; }
html.lang-my .st-btn span, html.lang-my .dock-item span, html.lang-my .premium-filter-btn span { font-size: 12.5px; }
html.lang-my .legal-body { line-height: 1.95; font-size: 13.5px; }
html.lang-my .legal-body h4 { font-size: 14.5px; font-weight: 700; margin-top: 20px; }
html.lang-my .lang-trigger, html.lang-my .lang-menu li { font-weight: 600; }
/* keep fixed-height pills / chips from clipping the taller Myanmar glyphs */
html.lang-my .setting-btn-active, html.lang-my .setting-btn-inactive, html.lang-my .dm-retry, html.lang-my .search-cancel { line-height: 1.5; }

/* ============================================================================
   MYANMAR MODE - layout fixes (only places where the longer / taller Myanmar text did not fit)
   ============================================================================ */
/* 1) tiny labels: Myanmar needs about 2px more to stay readable (tags, badges, meta lines) */
html.lang-my .formula-type-badge span { font-size: 9px; }
html.lang-my .formula-newch-tag, html.lang-my .lh-new, html.lang-my .formula-new-badge, html.lang-my .ch-new { font-size: 9.5px; line-height: 1.5 !important; }
html.lang-my .theme-opt .tp-tag { font-size: 9.5px; }
html.lang-my .lh-ch, html.lang-my .lh-time { font-size: 10.5px; }
html.lang-my .formula-chapter-tag { font-size: 10.5px; line-height: 1.5 !important; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
html.lang-my .ld-text-fail small, html.lang-my .search-thumb-badge { font-size: 10.5px; }
html.lang-my .dm-retry, html.lang-my .dm-status, html.lang-my .hx-chap, html.lang-my .individual-genre-frame,
html.lang-my .search-section, html.lang-my .st-foot, html.lang-my .st-note, html.lang-my .legal-body .lg-upd { font-size: 11.5px; }
html.lang-my .st-note, html.lang-my .st-foot { line-height: 1.7; }
html.lang-my .dm-chap, html.lang-my .lib-sub, html.lang-my .search-sub, html.lang-my .lobby-count, html.lang-my .st-tab,
html.lang-my .lh-title, html.lang-my .lib-clear, html.lang-my .search-clear-all, html.lang-my .search-more { font-size: 12px; }
html.lang-my .rcn-btn { font-size: 12px; line-height: 1.5 !important; }
html.lang-my .rcn-trigger { font-size: 12.5px; }
html.lang-my .dock-item { font-size: 12px; }

/* 2) chapter sort pill: the two labels live in a small fixed window, so give it a taller and wider one */
html.lang-my .ch-sort-window { height: 22px; width: 64px; }
html.lang-my .ch-sort-track > span { height: 22px; line-height: 22px !important; font-size: 12px; white-space: nowrap; }
html.lang-my .ch-sort-box[data-sort="oldest"] .ch-sort-track { transform: translateY(-22px); }
html.lang-my .ch-sort-box { height: 34px; }
html.lang-my .ch-view-btn { width: 34px; height: 34px; }
html.lang-my #detailView .ch-head { gap: 8px; }
html.lang-my #detailView .ch-head h3 { font-size: 14px; }

/* 3) chapter blocks (5 per row): "အခန်း 12" label + number, keep on one line */
html.lang-my .ch-tile { gap: 3px; }
html.lang-my .ch-tile-label, html.lang-my .ch-tile-num { font-size: 11px; line-height: 1.2 !important; }
@media (min-width: 640px) { html.lang-my .ch-tile-label, html.lang-my .ch-tile-num { font-size: 13px; } }

/* 4) toast: let long Myanmar messages wrap instead of being cut with "..." */
html.lang-my .toast { border-radius: 22px; align-items: center; }
html.lang-my .toast-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.6 !important; }

/* 5) sidebar welcome + theme names: allow a second line, never push the icon / tag out */
html.lang-my .sidebar-welcome { white-space: normal; line-height: 1.7 !important; font-size: 14.5px; }
html.lang-my .theme-opt .tp-name { flex-wrap: wrap; font-size: 12px; row-gap: 0; }

/* 6) buttons / pills with a fixed height or one-line text: let them breathe a little */
html.lang-my .premium-filter-btn, html.lang-my .lh-tab { line-height: 1.6; }
html.lang-my .premium-filter-btn span, html.lang-my .lh-tab span { white-space: nowrap; }
html.lang-my .first-read-btn { font-size: 15px; line-height: 1.5 !important; }
html.lang-my .premium-bookmark-btn { min-height: 44px; }
html.lang-my .st-btn { font-size: 13px; line-height: 1.5 !important; }
html.lang-my .st-confirm h3 { font-size: 17px; line-height: 1.6; font-weight: 700; }
html.lang-my .st-confirm p { line-height: 1.8; }
html.lang-my .hx-title { font-size: 15px; }
html.lang-my .hx-name { line-height: 1.7 !important; }
html.lang-my .lib-title, html.lang-my .lib-name { line-height: 1.6; }

/* 7) the language box itself: keep Myanmar and English names on one line */
html.lang-my .lang-trigger, html.lang-my .lang-menu li { font-size: 13px; line-height: 1.5; white-space: nowrap; }


/* ===== Adult Content mode: other characters + rose/wine colours instead of Reze / Makima ===== */
html.adult-mode { --wh-art: url("adult-hero.webp"); }
/* Latest Update box: the left panel colour and the picture glow now come from the chosen theme (--c100/--c400/--c500/--c600/--c900),
   the same as in normal mode, so it changes together with the theme. Only the picture itself differs in Adult mode. */
html.adult-mode .hx-makima { filter: drop-shadow(0 0 16px rgba(190, 80, 255, 0.4)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.65)); }

/* =====================================================================
   ADULT PICTURES - adjust here (no limits, any number works, decimals ok)
   Right / Down / Big  = positive number      Left / Up / Small = negative (or smaller) number
   ===================================================================== */
html.adult-mode {
    /* ---- Adult Hero picture (Home page) ---- */
    --ah-size: 100;   /* Big / Small : 100 = normal, 120 = bigger, 80 = smaller       */
    --ah-x: 0;        /* Left / Right: px.  +10 = 10px to the RIGHT, -10 = to the LEFT */
    --ah-y: 14;       /* Up / Down   : px.  +10 = 10px DOWN,  -10 = UP                 */

    /* ---- Adult History picture (History page) ---- */
    --ahist-size: 100; /* Big / Small : 100 = normal, 120 = bigger, 80 = smaller       */
    --ahist-x: 0;      /* Left / Right: px.  +10 = RIGHT, -10 = LEFT                   */
    --ahist-y: 0;      /* Up / Down   : px.  +10 = DOWN,  -10 = UP                     */
}
html.adult-mode .wh-reze { background-size: auto calc(var(--ah-size) * 1.37%); background-position: calc(100% + var(--ah-x) * 1px) calc(var(--ah-y) * 1px); }
html.adult-mode .hx-makima { right: calc(5px - var(--ahist-x) * 1px); bottom: calc(var(--ahist-y) * -1px); height: calc(var(--ahist-size) * 1%); max-width: none; }


/* ===== 18+ confirm box ===== */
.adult-gate { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 22px; }
.adult-gate[hidden] { display: none; }
.adult-gate-bd { position: absolute; inset: 0; background: rgba(6, 4, 12, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s ease; }
.adult-gate-card {
    position: relative; width: 100%; max-width: 340px; padding: 30px 22px 22px; text-align: center; border-radius: 26px;
    background: radial-gradient(120% 70% at 50% 0%, rgba(255, 90, 140, 0.20), transparent 60%), linear-gradient(165deg, #1d1330 0%, #130d22 60%, #0d0a18 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 44px rgba(255, 70, 130, 0.22);
    opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.adult-gate-card::before {                       /* gradient frame: rose -> violet */
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
    background: linear-gradient(140deg, #ff5c93, rgba(255, 92, 147, 0.25) 40%, rgba(167, 139, 250, 0.3) 62%, #a78bfa);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.adult-gate.show .adult-gate-bd { opacity: 1; }
.adult-gate.show .adult-gate-card { opacity: 1; transform: none; }
.adult-gate-badge {
    width: 74px; height: 74px; margin: -66px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #ff5c93, #c0245f); border: 3px solid #1d1330;
    box-shadow: 0 0 0 1.5px rgba(255, 140, 180, 0.55), 0 10px 26px rgba(255, 60, 120, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.35);
}
.adult-gate-badge span { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; font-size: 25px; letter-spacing: -0.5px; color: #fff; text-shadow: 0 2px 6px rgba(90, 0, 40, 0.6); }
.adult-gate-title { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.adult-gate-text { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: rgba(226, 220, 244, 0.78); }
.adult-gate-ask { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #ffc2d6; }
.adult-gate-actions { display: flex; gap: 10px; margin-top: 20px; }
.adult-gate-btn { flex: 1; padding: 13px 10px; border-radius: 15px; font-size: 13px; font-weight: 800; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, filter 0.2s ease; -webkit-tap-highlight-color: transparent; }
.adult-gate-btn:active { transform: scale(0.96); }
.adult-gate-btn.ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #d8d2ec; }
.adult-gate-btn.primary { background: linear-gradient(135deg, #ff5c93, #c0245f); color: #fff; box-shadow: 0 8px 22px rgba(255, 60, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
html.lite .adult-gate-bd { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 4, 12, 0.88); }
@media (prefers-reduced-motion: reduce) { .adult-gate-bd, .adult-gate-card { transition: none; } }


/* ===== Jelly touch effect (jelly.js) ===== */
.jelly-cv { display: block; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wh-reze .jelly-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.wh-reze.jelly-on { background-image: none; }
.wh-reze.jelly-on .jelly-cv { opacity: 1; }
.hx-makima.hx-jelly { pointer-events: auto; cursor: grab; visibility: hidden; }
.hx-makima.hx-jelly.jelly-on { visibility: visible; }
img.hx-makima.jelly-src { visibility: hidden !important; }
.hx-makima.hx-jelly:active { cursor: grabbing; }


/* =====================================================================
   LAYOUT CONTROL (Normal mode) - values come from the Uploader's "Layout Control" tab
   (saved in Firebase: layoutControl). Defaults below = the original look.
   ===================================================================== */
:root {
    --nh-size: 100;  --nh-x: 0;  --nh-y: 0;          /* Normal Home hero (Reze)      */
    --nhist-size: 100; --nhist-x: 0; --nhist-y: 0;   /* Normal History card (Makima) */
}
html:not(.adult-mode) .wh-reze { background-size: auto calc(var(--nh-size) * 1%); background-position: calc(100% + var(--nh-x) * 1px) calc(var(--nh-y) * 1px); }
html:not(.adult-mode) .hx-makima { right: calc(-4px - var(--nhist-x) * 1px); bottom: calc(var(--nhist-y) * -1px); height: calc(var(--nhist-size) * 1%); max-width: none; }

/* ===== Jelly Touch OFF (Settings): plain pictures, no wobble ===== */
html.jelly-off .jelly-cv { display: none !important; }
html.jelly-off .wh-reze.jelly-on { background-image: var(--wh-art, url("reze.webp")); }
html.jelly-off img.hx-makima.jelly-src { visibility: visible !important; }


/* ===== INTRO SCREEN (premium: black + muted teal) ===== */
html.intro-lock, html.intro-lock body { overflow: hidden; }
.intro { --u: min(1vw, 0.55vh); position: fixed; inset: 0; z-index: 99999; overflow: hidden; background: #040b0b; transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s; }
.intro.out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.55s ease 0.4s, visibility 0s linear 0.95s; }
.intro.out .in-stagebox, .intro.out .in-bar-wrap { animation: inOut 0.35s ease forwards; }
.intro.out .in-brand, .intro.out .in-grain, .intro.out .in-vig { opacity: 0; transition: opacity 0.3s ease; }
@keyframes inOut { from { opacity: 1; } to { opacity: 0; } }
.in-bg { position: absolute; inset: 0; background:
    radial-gradient(70% 50% at 88% 8%, rgba(32, 108, 100, 0.34), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(20, 70, 66, 0.28), transparent 72%),
    linear-gradient(155deg, #0a2321 0%, #061413 42%, #030808 100%); }
.in-grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.in-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 60% 35%, transparent 50%, rgba(0, 6, 6, 0.72) 100%); }

/* video panel, top-right: 3D perspective - the LEFT side sinks into the screen */
.in-stagebox { position: absolute; top: calc(var(--u) * -17); right: calc(var(--u) * 0); width: calc(var(--u) * 106); height: calc(var(--u) * 164); perspective: calc(var(--u) * 190); perspective-origin: 100% 40%; pointer-events: none; opacity: 0; animation: inScreen 1.8s 0.3s ease forwards;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.5) 9%, #000 24%), linear-gradient(180deg, #000 0%, #000 66%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.5) 9%, #000 24%), linear-gradient(180deg, #000 0%, #000 66%, transparent 96%);
    mask-composite: intersect; }
.in-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 4); overflow: hidden; transform-origin: 100% 40%; transform: rotateY(-26deg) rotateX(4deg); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 7%, rgba(0, 0, 0, 0.8) 16%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 7%, rgba(0, 0, 0, 0.8) 16%, #000 28%);
    background: #061413; border: 1px solid rgba(255, 255, 255, 0.16); border-left: 0; border-radius: 0 calc(var(--u) * 4) calc(var(--u) * 4) 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(40, 140, 128, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.in-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); transform-origin: 100% 45%; }
.in-mist { position: absolute; top: 0; bottom: 0; right: 0; width: 26%; background: linear-gradient(270deg, rgba(110, 190, 180, 0.22), rgba(110, 190, 180, 0.07) 45%, transparent); filter: blur(6px); }
.in-veil { display: none; }
.in-gloss { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, transparent 34%), linear-gradient(0deg, rgba(3, 12, 11, 0.55), transparent 35%); }
@keyframes inScreen { from { opacity: 0; } to { opacity: 1; } }

/* brand block: bottom-left, calm and spaced */
.in-brand { position: absolute; left: max(28px, 7vw); bottom: calc(15vh + 50px); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.in-logo { margin-bottom: 22px; opacity: 0; transform: translateY(10px); animation: inUp 1.1s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.in-logo-box { width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)), #0a2624;
    border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.in-logo-box svg { width: 44px; height: 44px; animation: inSpin 22s linear infinite; }
@keyframes inSpin { to { transform: rotate(360deg); } }
@keyframes inUp { to { opacity: 1; transform: none; } }

.in-title { display: flex; flex-direction: column; align-items: flex-start; }
.in-t1, .in-t2 { display: block; white-space: nowrap; opacity: 0; transform: translateY(10px); animation: inUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.in-t1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(21px, 5.8vw, 28px); letter-spacing: 0.2em; line-height: 1.2; text-transform: uppercase; color: #f1faf8; animation-delay: 0.8s; }
.in-t2 { margin-top: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.52em; text-transform: uppercase; color: #7fb9b1; padding-left: 2px; position: relative; animation-delay: 1.05s; }
.in-t2::before { content: ""; position: absolute; left: 2px; top: -8px; width: 34px; height: 1px; background: rgba(127, 185, 177, 0.55); }

/* progress: thin, full width, bottom */
.in-bar-wrap { position: absolute; left: max(28px, 7vw); right: max(28px, 7vw); bottom: 15vh; z-index: 2; opacity: 0; animation: inUp 0.7s 0.15s ease forwards; contain: layout style; }
.in-meta { display: flex; justify-content: space-between; margin-bottom: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(214, 240, 236, 0.55); }
.in-pct { color: rgba(238, 252, 249, 0.85); }
.in-bar { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.in-fill { height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #2c8379, #9ad9cf); }
@media (prefers-reduced-motion: reduce) { .in-logo-box svg { animation: none; } }

/* soft blurred sakura petals drifting in the free top-left area (bokeh) */
.in-petals { position: absolute; top: 0; left: 0; width: 62%; height: 46%; overflow: hidden; pointer-events: none; opacity: 0; animation: inPetalsIn 2s 0.6s ease forwards;
    -webkit-mask-image: radial-gradient(120% 105% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 85%); mask-image: radial-gradient(120% 105% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 85%); }
.in-petals::before { content: ""; position: absolute; top: -20%; left: -25%; width: 90%; height: 70%; background: radial-gradient(closest-side, rgba(120, 215, 200, 0.16), transparent 100%); }
.in-petals i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * 1.45); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, rgba(235, 255, 251, 0.95), rgba(125, 214, 200, 0.55)); filter: blur(var(--b)); opacity: 0; will-change: transform, opacity; animation: inPetal var(--d) var(--l) ease-in-out infinite; }
.in-petals i:nth-child(1) { --x: 12%; --y: 8%;  --s: 11px; --b: 0.6px; --d: 9s;  --l: 0.8s; }
.in-petals i:nth-child(2) { --x: 38%; --y: 3%;  --s: 17px; --b: 3px;   --d: 12s; --l: 2.2s; }
.in-petals i:nth-child(3) { --x: 24%; --y: 22%; --s: 8px;  --b: 0.4px; --d: 8s;  --l: 4s; }
.in-petals i:nth-child(4) { --x: 6%;  --y: 30%; --s: 20px; --b: 4px;   --d: 14s; --l: 1.4s; }
.in-petals i:nth-child(5) { --x: 48%; --y: 26%; --s: 12px; --b: 1.4px; --d: 10s; --l: 3.2s; }
.in-petals i:nth-child(6) { --x: 30%; --y: 40%; --s: 9px;  --b: 0.8px; --d: 11s; --l: 5.5s; }
@keyframes inPetalsIn { to { opacity: 1; } }
@keyframes inPetal {
    0%   { opacity: 0;    transform: translate(0, 0) rotate(0deg); }
    20%  { opacity: 0.85; }
    75%  { opacity: 0.7; }
    100% { opacity: 0;    transform: translate(46px, 96px) rotate(150deg); }
}
.intro.out .in-petals { animation: inOut 0.35s ease forwards; }
@media (prefers-reduced-motion: reduce) { .in-petals i { animation: none; opacity: 0.6; } .in-petals { opacity: 1; animation: none; } }

/* ===== intro polish v6 ===== */
/* video: wait for real frames, keep it on its own GPU layer */
.intro:not(.vid-ready) .in-stagebox { animation-play-state: paused; }
.in-video { backface-visibility: hidden; }

/* logo: glowing halo + light comet ring behind the box */
.in-logo { position: relative; }
.in-logo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(closest-side, rgba(110, 225, 205, 0.42), rgba(60, 170, 155, 0.14) 55%, transparent 100%); animation: inHalo 3.6s ease-in-out infinite alternate; }
.in-logo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; pointer-events: none; z-index: -1;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(150, 240, 224, 0.15) 78%, rgba(220, 255, 249, 0.95) 100%);
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px)); mask-image: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
    filter: drop-shadow(0 0 4px rgba(130, 235, 218, 0.7)); animation: inOrbit 3.2s linear infinite; }
@keyframes inHalo { from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes inOrbit { to { transform: rotate(360deg); } }
.in-logo-box { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(100, 220, 200, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

/* title: white -> mint gradient with a slow light sweep */
.in-t1 { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg, #ffffff 0%, #dffff9 24%, #86e0d0 48%, #ffffff 66%, #a9efe2 84%, #ffffff 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 12px rgba(90, 205, 188, 0.38)); animation: inUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards, inShimmer 6s linear 2.2s infinite; }
@keyframes inShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* progress: no percentage, thicker glowing bar with a bright head and moving sheen */
.in-pct { display: none; }
.in-dots { display: inline-flex; gap: 5px; align-items: center; }
.in-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(190, 245, 235, 0.85); opacity: 0.25; animation: inDot 1.2s ease-in-out infinite; }
.in-dots i:nth-child(2) { animation-delay: 0.2s; } .in-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes inDot { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
.in-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.in-fill { position: relative; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #1f6f66 0%, #3fb5a5 55%, #b8f5ea 100%); box-shadow: 0 0 14px rgba(80, 210, 190, 0.55); }
.in-fill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) no-repeat; background-size: 38% 100%; animation: inSheen 1.7s ease-in-out infinite; }
.in-fill::after { content: ""; position: absolute; right: -4px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0 30%, rgba(190, 255, 245, 0.85) 55%, rgba(120, 235, 215, 0) 100%); box-shadow: 0 0 12px 3px rgba(140, 240, 222, 0.7); }
@keyframes inSheen { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .in-logo::before, .in-logo::after, .in-t1, .in-dots i, .in-fill::before { animation: none; } .in-t1 { opacity: 1; transform: none; } }

/* Latest Update hero: Reze / adult character floats gently, same motion as Makima / adult in the History card */
.wh-reze { animation: hxFloat 6s ease-in-out infinite alternate; transform-origin: 70% 100%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .wh-reze { animation: none; will-change: auto; } }


/* ===== COINS / LOCKED CHAPTERS ===== */
.ch-tile { position: relative; }
.cx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #2b1d00; background: linear-gradient(135deg, #f5d98a, #c99a3b); box-shadow: 0 4px 12px -4px rgba(232,199,122,.7); flex: none; margin: 0 8px; white-space: nowrap; }
.cx-badge i { font-size: 10px; } .cx-badge b { font-weight: 800; }
.cx-badge.is-open { color: #04201c; background: linear-gradient(135deg, #5eead4, #0d9488); box-shadow: 0 4px 12px -4px rgba(45,212,191,.7); }
.ch-tile .cx-badge { position: absolute; top: 4px; right: 4px; margin: 0; padding: 2px 6px; font-size: 9.5px; }
.cx-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 18px; background: rgba(2,8,9,.72); backdrop-filter: blur(6px); }
.cx-sheet, .cx-lockcard { width: 100%; max-width: 360px; padding: 22px 20px 18px; border-radius: 22px; text-align: center; color: #e6efee;
  background: linear-gradient(180deg, #122123, #0a1415); border: 1px solid rgba(232,199,122,.3); box-shadow: 0 30px 80px -20px #000, 0 0 50px -25px rgba(232,199,122,.5); }
.cx-ico { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; color: #e8c77a; background: radial-gradient(circle at 30% 20%, rgba(232,199,122,.28), rgba(232,199,122,.05)); box-shadow: inset 0 0 0 1px rgba(232,199,122,.38); }
.cx-sheet h3, .cx-lockcard h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.cx-sheet p, .cx-lockcard p { font-size: 13px; color: #9fb3b1; margin-bottom: 12px; }
.cx-rows { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.cx-rows div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #9fb3b1; }
.cx-rows b { color: #f5d98a; font-weight: 800; } .cx-rows div:last-child { padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.12); }
.cx-foot { display: flex; gap: 10px; } .cx-foot button { flex: 1; }
.cx-no, .cx-yes { padding: 11px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; transition: .18s; }
.cx-no { background: rgba(255,255,255,.07); color: #cfe0de; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .cx-no:hover { background: rgba(255,255,255,.12); }
.cx-yes { background: linear-gradient(135deg, #f5d98a, #c99a3b); color: #2b1d00; box-shadow: 0 8px 20px -8px rgba(232,199,122,.8); } .cx-yes:hover { filter: brightness(1.08); }
.cx-lockcard { margin: 80px auto; } .cx-lockcard .cx-yes { width: 100%; }

/* =====================================================================
   ACCOUNT PANEL (sidebar) - glass card so the branches behind never hurt readability
   ===================================================================== */
.ac-wrap { position: relative; width: 100%; }
.ac-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 14px; border-radius: 24px; overflow: hidden;
    background: linear-gradient(165deg, rgba(10,26,28,.80) 0%, rgba(5,14,16,.72) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(var(--c400), .28);
    box-shadow: 0 22px 44px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.02); }
.ac-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, rgba(var(--c300), .95), #e8c77a, rgba(var(--c300), .95), transparent); opacity: .9; }
.ac-card.hidden { display: none !important; }

/* login header */
.ac-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.ac-medal { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: 4px;
    background: linear-gradient(145deg, rgb(var(--c400)), rgb(var(--c600)));
    box-shadow: 0 10px 24px -8px rgba(var(--c500), .75), inset 0 1px 0 rgba(255,255,255,.35); }
.ac-title, .ac-sub { margin: 0; }
.ac-title { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 800; letter-spacing: .06em; color: #fff; line-height: 1.2; }
.ac-sub { font-family: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif; font-size: 12.5px; color: rgba(var(--c100), .72); line-height: 1.5; }

/* inputs */
.ac-form { display: flex; flex-direction: column; gap: 10px; }
.ac-field { position: relative; display: flex; align-items: center; height: 50px; border-radius: 4px; cursor: text;
    background: rgba(0,0,0,.38); border: 1px solid rgba(var(--c400), .26);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.35); transition: border-color .2s, box-shadow .2s, background .2s; }
.ac-field:focus-within { border-color: rgba(var(--c300), .9); background: rgba(0,0,0,.5);
    box-shadow: 0 0 0 3px rgba(var(--c500), .28), inset 0 2px 8px rgba(0,0,0,.35); }
.ac-field-ico { width: 42px; text-align: center; font-size: 14px; color: rgba(var(--c300), .8); flex: none; transition: color .2s; }
.ac-field:focus-within .ac-field-ico { color: rgb(var(--c300)); }
.ac-field input { flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 0; background: transparent; border: 0; outline: 0; color: #fff;
    font-family: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0; }   /* 16px = iOS never zooms the page on focus */
.ac-field input::placeholder { color: rgba(255,255,255,.38); font-weight: 400; font-family: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif; }
.ac-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0b1a1c inset; caret-color: #fff; }
.ac-eye { flex: none; width: 44px; height: 100%; display: grid; place-items: center; background: transparent; border: 0; color: rgba(255,255,255,.5); font-size: 15px; cursor: pointer; }
.ac-eye:hover, .ac-eye.on { color: rgb(var(--c300)); }
.ac-remember { display: flex; align-items: center; gap: 10px; padding: 2px 4px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.ac-remember input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ac-remember-box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 3px; font-size: 11px; color: transparent;
    border: 1.5px solid rgba(var(--c300), .55); background: rgba(0,0,0,.35); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.ac-remember:active .ac-remember-box { transform: scale(.92); }
.ac-remember input:checked + .ac-remember-box { background: rgb(var(--c300)); border-color: rgb(var(--c300)); color: #04201f; }
.ac-remember input:focus-visible + .ac-remember-box { outline: 2px solid rgba(var(--c300), .9); outline-offset: 2px; }
.ac-remember-txt { font-family: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.72); }
.ac-err { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #fecdd3;
    background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.35); font-family: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif; }
.ac-err:empty { display: none; }
.ac-err:not(:empty)::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fb7185; flex: none; margin-top: 1px; }

/* buttons */
.ac-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; margin-top: 2px; border: 0; border-radius: 4px; cursor: pointer;
    font-family: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .03em; color: #fff;
    background: linear-gradient(135deg, rgb(var(--c400)) 0%, rgb(var(--c600)) 100%);
    box-shadow: 0 14px 26px -12px rgba(var(--c500), .9), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s, filter .2s, box-shadow .2s; }
.ac-btn:hover { filter: brightness(1.08); } .ac-btn:active { transform: scale(.98); }
.ac-btn:disabled { opacity: .75; cursor: progress; }
.ac-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 11.5px; color: rgba(var(--c100), .55); font-family: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif; }
.ac-note i { color: rgba(var(--c300), .75); }

/* logged-in card */
.ac-top { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.ac-ring { flex: none; width: 66px; height: 66px; padding: 3px; border-radius: 50%;
    background: conic-gradient(from 210deg, rgb(var(--c300)), #e8c77a, rgb(var(--c500)), rgb(var(--c300))); box-shadow: 0 8px 22px -8px rgba(var(--c500), .8); }
.ac-avatar { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #0a1a1c; color: #fff;
    font-family: 'Cinzel', serif; font-size: 26px; font-weight: 800; }
.ac-who { min-width: 0; flex: 1; }
.ac-name { font-family: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; word-break: break-word; }
.ac-mail { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: rgba(var(--c100), .65); min-width: 0; }
.ac-mail i { font-size: 10px; color: rgba(var(--c300), .8); flex: none; } .ac-mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ac-plan, .ac-coins { align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.34); }
.ac-plan { flex-wrap: wrap; row-gap: 12px; }
.ac-plan { border: 1px solid rgba(var(--c400), .32); }
.ac-plan-ico, .ac-coins-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 16px; }
.ac-plan-ico { color: #fff; background: linear-gradient(145deg, rgb(var(--c400)), rgb(var(--c600))); box-shadow: 0 8px 16px -8px rgba(var(--c500), .9); }
.ac-plan-body { flex: 1; min-width: 0; }
.ac-plan-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ac-plan-name { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.25; }
.ac-plan-foot { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.12); }
.ac-plan-date { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,.62); }
.ac-plan-date:empty { display: none; }
.ac-plan-date::before { content: "\f133"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: rgba(var(--c300), .8); }
.ac-plan-state { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.ac-plan-state b { font-weight: 800; }
.ac-plan-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px 1px rgba(34,197,94,.85); }
.ac-plan.is-off { border-color: rgba(244,63,94,.4); }
.ac-plan.is-off .ac-plan-ico { background: linear-gradient(145deg, #64748b, #334155); box-shadow: none; }
.ac-plan.is-off .ac-plan-state { color: #fda4af; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.4); }
.ac-plan.is-off .ac-plan-dot { background: #ef4444; box-shadow: 0 0 8px 1px rgba(239,68,68,.85); }
.ac-coins { border: 1px solid rgba(232,199,122,.35); }
.ac-coins-ico { color: #2b1d00; background: linear-gradient(135deg, #f5d98a, #c99a3b); box-shadow: 0 8px 16px -8px rgba(232,199,122,.8); }
.ac-coins-body { display: flex; flex-direction: column; line-height: 1.25; }
.ac-coins-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ac-coins-body b { font-size: 22px; font-weight: 800; color: #f5d98a; }

.ac-logout { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 14px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif; font-size: 14px; font-weight: 700; color: rgb(var(--c100));
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: background .2s, border-color .2s, color .2s; }
.ac-logout:hover { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.5); color: #fecdd3; }

/* =====================================================================
   SIDEBAR TWEAK: no box around Account panel (full menu width) + soft blurred branches
   ===================================================================== */
#rightSidebar { padding-left: 18px; padding-right: 18px; }
.ac-card {
    padding: 8px 0 4px; border-radius: 0; overflow: visible;
    background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ac-card::before { display: none; }
.ac-field, .ac-btn, .ac-logout, .ac-plan, .ac-coins { width: 100%; box-sizing: border-box; }

/* background (branches) a little blurred + slightly dimmed so nothing hurts readability */
#rightSidebar #sidebarSakuraCanvas { filter: blur(2.5px); transform: scale(1.03); opacity: .85; }
#rightSidebar > div.absolute.inset-0 { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); background: rgba(4,12,14,.28); }