/* Manga-Corporation. Presentation only: never style the chapter reading surface. */
body {
    --mc-bg: #f7f7fb;
    --mc-surface: #ffffff;
    --mc-ink: #22232e;
    --mc-muted: #686977;
    --mc-line: #e5e5ef;
    --mc-accent: #7054d9;
    --mc-soft: #eeebfa;
    --bkg: var(--mc-bg);
    background: var(--mc-bg);
    color: var(--mc-ink);
    font-family: 'Nunito', system-ui, sans-serif;
    line-height: 1.6;
}
body.dark {
    --mc-bg: #14151b;
    --mc-surface: #1d1e27;
    --mc-ink: #f2f1f8;
    --mc-muted: #aaa9bc;
    --mc-line: #30313f;
    --mc-accent: #b19aff;
    --mc-soft: #2a243e;
}
body #header {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-line);
    box-shadow: none !important;
    padding: 18px 24px;
}
body #header > .container { max-width: 1360px; flex-wrap: wrap; gap: 12px; }
body .navbar-brand { color: var(--mc-ink); font-size: 18px; font-weight: 900; letter-spacing: -.6px; }
body .navbar-nav .nav-link { color: var(--mc-muted); font-size: 16px; font-weight: 800; padding: 9px 10px; border-radius: 8px; white-space: nowrap; }
body .navbar-nav .nav-link:hover,
body .navbar-nav .nav-link.router-link-exact-active { background: var(--mc-soft); color: var(--mc-accent); }
body .navbar-nav { gap: 12px; align-items: center; }
body .navbar-nav.ms-auto { gap: 12px; }
body .form-switch { white-space: nowrap; font-size: 12px; }
body #header .mc-theme-toggle {display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:0;padding:10px 15px;border-radius:999px;border:1px solid var(--mc-line);background:var(--mc-bg);color:var(--mc-muted);line-height:1;font-size:19px}
body #header .mc-theme-toggle .fa-moon {color:var(--mc-accent)}
body #header .mc-theme-toggle .fa-sun {display:none;color:var(--mc-accent)}
body.dark #header .mc-theme-toggle .fa-sun {display:inline}
body.dark #header .mc-theme-toggle .fa-moon {display:none}
body #header .mc-theme-toggle:hover {background:var(--mc-soft)}
body #header .form-check-input:checked { background-color: var(--mc-accent); border-color: var(--mc-accent); }
body #header .form-control { border: 1px solid var(--mc-line); border-radius: 10px; background: var(--mc-bg) !important; color: var(--mc-ink); padding: 10px 12px; font-size: 13px; }
body #header .form-control::placeholder { color: var(--mc-muted); }
body.dark #header .form-control { background: #232530 !important; }
body #nav-search, body #nav-filter { min-width: 170px; }
body .navbar-toggler { border-color: var(--mc-line); }
body.dark .navbar-toggler-icon { filter: none; }
body #results-box { border: 1px solid var(--mc-line); border-radius: 12px; background: var(--mc-surface); }
body #results-box a { color: var(--mc-ink); background: var(--mc-surface); }
body { --mc-header-height: 90px; --mc-reader-header-height:var(--mc-header-height); }
body.hide-header { --mc-reader-header-height:0px; }
body.dark { --black-0:var(--mc-bg);--black-1:var(--mc-bg);--black-2:var(--mc-soft);--black-3:var(--mc-surface);--black-6:var(--mc-line);--white-6:var(--mc-ink);--white-5:var(--mc-muted); }

body #header {height:auto!important;min-height:0;font-family:'Nunito',system-ui,sans-serif;line-height:1.6;}
body:not(.body-reader) #header {position:sticky;top:0;z-index:1030;}
/* Translucent background only: links and controls remain fully legible. */
body #app #header {transition:background-color 200ms ease,backdrop-filter 200ms ease}
body #app #header.mc-is-scrolled {background:rgba(255,255,255,.65)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.dark #app #header.mc-is-scrolled {background:rgba(29,30,39,.65)!important}
@media(prefers-reduced-motion:reduce){body #app #header{transition:none}}
body #header .navbar-brand {color:var(--mc-ink)!important}
/* Apply the same vertical alignment to the brand, links and utility controls. */
body #header .navbar-brand,body #header .navbar-nav.me-auto,body #header .navbar-nav.ms-auto {position:relative;top:6px}
body #header .nav-link {color:var(--mc-muted)!important}
body #header .nav-link:hover,body #header .nav-link.router-link-exact-active {color:var(--mc-accent)!important;background:var(--mc-soft)}
body #header .dropdown-menu {background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:10px;}
body #header .dropdown-item {color:var(--mc-ink)}
body #header .dropdown-item:hover {background:var(--mc-soft)}
body #header .logo {display:block;flex:0 0 auto;width:auto;height:clamp(32px,4vw,40px);max-width:60px;object-fit:contain;object-position:center;margin:0}
body #header #results-box {position:absolute;z-index:1050;max-height:360px;overflow:auto;min-width:240px}
body #header #results-box a {display:block;padding:10px 14px;text-decoration:none}
body #header #results-box p {padding:10px 14px;margin:0}
body #header #results-box:empty {display:none!important}
.mc-admin-nav {background:var(--mc-surface);border-bottom:1px solid var(--mc-line);padding:12px 24px}
.mc-admin-nav>.container {max-width:1360px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:0}
.mc-admin-nav .navbar-nav {flex-direction:row;flex-wrap:wrap;gap:6px}
.mc-admin-label {font-size:12px;font-weight:800;color:var(--mc-muted)}
.mc-admin-nav .nav-link.active {background:var(--mc-soft);color:var(--mc-accent)}
body.mc-admin {background:var(--mc-bg);color:var(--mc-ink);font-family:'Nunito',system-ui,sans-serif}
.mc-admin main.container-lg {max-width:1600px;padding:24px!important}
.mc-admin .card,.mc-admin .modal-content {background:var(--mc-surface);color:var(--mc-ink);border:1px solid var(--mc-line);border-radius:12px}
.mc-admin .card-header,.mc-admin .modal-header {background:var(--mc-soft)!important;color:var(--mc-ink);border-bottom:1px solid var(--mc-line)}
.mc-admin .form-control,.mc-admin .form-select {background-color:var(--mc-bg)!important;color:var(--mc-ink);border-color:var(--mc-line);border-radius:8px}
.mc-admin .form-control:focus,.mc-admin .form-select:focus {border-color:var(--mc-accent);box-shadow:0 0 0 3px var(--mc-soft)}
.mc-admin .table {--bs-table-bg:var(--mc-surface);--bs-table-color:var(--mc-ink);--bs-table-border-color:var(--mc-line);--bs-table-striped-bg:var(--mc-bg);--bs-table-striped-color:var(--mc-ink)}
.mc-admin .breadcrumb {background:transparent!important;color:var(--mc-muted)}
.mc-admin .btn-primary {background:#7054d9;border-color:#7054d9;color:#fff}
.mc-admin .btn-primary:hover {background:#6044c4;border-color:#6044c4}
body.body-reader {background:var(--mc-bg)!important;color:var(--mc-ink);padding-top:var(--mc-reader-header-height)}
body.body-reader #reader .bg-reader-controls {background:var(--mc-surface)!important;color:var(--mc-ink)}
body.body-reader #reader #reader-controls-mode {background:var(--mc-surface);color:var(--mc-ink)}
body.body-reader #reader .form-select {background-color:var(--mc-bg)!important;color:var(--mc-ink);border-color:var(--mc-line)}
body.body-reader #reader .rs-mode.is-selected,body.body-reader #reader .rs-direction .is-selected {background:var(--mc-soft);border-color:var(--mc-accent);color:var(--mc-ink)}
body.body-reader #reader #reader-main {min-height:calc(100vh - var(--mc-reader-header-height))}
body.body-reader #reader .reader-image-wrapper {scroll-margin-top:var(--mc-reader-header-height)}
@media(min-width:992px){body.body-reader #reader.layout-horizontal #reader-controls-wrapper {top:var(--mc-reader-header-height)}}
/* Compact, centered labels for the two reader action buttons. */
@media(min-width:992px){
    body.body-reader #reader #reader-controls-actions :is(#hide-header-button,#fullscreen-button) {display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:38px;padding:7px 4px;font-size:clamp(10px,.75vw,12px);line-height:1.2;text-align:center}
    body.body-reader #reader #reader-controls-actions :is(#hide-header-button,#fullscreen-button) > .fa-fw {flex:0 0 auto;margin:0}
    body.body-reader #reader #reader-controls-actions :is(#hide-header-button,#fullscreen-button) > span:last-child {min-width:0;text-wrap:balance}
}
/* Keep every reader setting reachable inside the fixed desktop/tablet sidebar. */
@media(min-width:992px){
    body.body-reader #reader.layout-horizontal #reader-controls {height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
    body.body-reader #reader.layout-horizontal #reader-controls > * {flex-shrink:0}
    body.body-reader #reader.layout-horizontal.hide-sidebar #reader-controls {overflow:hidden}
}
@media(max-width:1399px){body #header .navbar-collapse{flex-basis:100%;flex-wrap:wrap;gap:12px}body #header .navbar-nav.me-auto{flex-wrap:wrap}}
@media(max-width:767px){body #header{padding:14px 16px}body #header>.container{padding:0}body #header .navbar-nav{align-items:stretch}body #header .navbar-nav.ms-auto{gap:6px}.mc-admin-nav{padding:12px 16px}.mc-admin main.container-lg{padding:16px!important}}

/* One aligned desktop row; a collapsible menu when space is limited. */
body #header .navbar-brand {display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:0;justify-content:flex-start}
body #header .navbar-brand,body #header .navbar-nav.me-auto,body #header .navbar-nav.ms-auto {top:0}
@media(min-width:1400px){
    body #header>.container {max-width:1600px;display:flex;flex-wrap:nowrap;align-items:center;gap:18px}
    body #header .navbar-brand {margin-right:0}
    body #header .navbar-collapse {flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:center;gap:12px}
    body #header .navbar-nav {flex-wrap:nowrap;align-items:center}
    body #header .navbar-nav.me-auto {gap:12px;flex-shrink:0}
    body #header .navbar-nav.ms-auto {gap:8px;flex-shrink:0}
    body #header .nav-link {padding-left:10px;padding-right:10px}
    body #header .navbar-nav.ms-auto>li[style] {width:auto!important;flex:0 1 170px}
    body #header .form-switch {margin-left:24px!important;margin-right:0;padding-right:0!important}
    body #header #nav-filter,body #header #nav-search {width:170px;min-width:140px}
}
@media(max-width:1399px){
    body #header>.container {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
    body #header .navbar-brand {margin-right:auto}
    body #header .navbar-toggler {display:block}
    body #header .navbar-collapse {flex-basis:100%;width:100%}
    body #header .navbar-collapse.collapse:not(.show) {display:none!important}
    body #header .navbar-collapse.show {display:flex!important;flex-direction:column;align-items:stretch;gap:12px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:16px}
    body.mc-menu-open {overflow:hidden}
    body #header .navbar-nav {flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;margin-left:0!important;margin-right:0!important}
    body #header .navbar-nav .nav-item {width:100%}
    body #header .navbar-nav .nav-link {display:block;padding:11px 14px;font-size:15px;white-space:normal}
    body #header .navbar-nav.me-auto {padding-bottom:10px;border-bottom:1px solid var(--mc-line)}
    body #header .navbar-nav.ms-auto {gap:8px}
    body #header .navbar-nav.ms-auto>li[style] {width:100%!important;flex:none}
}

/* Slightly lower the complete header row, preserving alignment. */
body #header>.container {position:relative;top:8px}

/* Groupe de droite (mode jour/nuit, recherche, connexion) : colle au menu, meme ecart que les autres boutons. */
body #header .navbar-nav.me-auto {margin-right:0!important}
body #header .navbar-nav.ms-auto {margin-left:0!important;gap:12px}

/* Alerte globale (bannissement, suspension, connexion echouee). */
.mc-flash-error{position:relative;z-index:1200;background:#b3261e;color:#fff;padding:12px 16px;text-align:center;font-weight:700;font-size:14px}

/* Telephones (detectes par user-agent) : header facon application mobile.
   Logo a gauche, icones rondes a droite (Suivis, Recherche, Connexion). */
body #header .mc-phone-bar {display:none}
body #header.mc-phone .navbar-toggler {display:none!important}
body #header.mc-phone .navbar-collapse {display:none!important}
body #header.mc-phone>.container {flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;position:relative!important;padding-right:174px!important}
body #header.mc-phone .navbar-brand {font-size:14px;margin-right:0!important;flex-shrink:1;min-width:0;overflow:hidden;white-space:nowrap}
body #header.mc-phone .navbar-brand .logo {height:clamp(24px,7vw,30px);max-width:44px}
body #header.mc-phone .mc-phone-bar {display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%);align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:6px;margin:0}
body #header.mc-phone .mc-bar-btn {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--mc-line);background:var(--mc-bg);color:var(--mc-muted);font-size:14px;padding:0;text-decoration:none}
body #header.mc-phone .mc-bar-btn:hover,
body #header.mc-phone .mc-bar-btn:focus {color:var(--mc-accent);background:var(--mc-soft)}
body #header.mc-phone .mc-phone-bar .dropdown-toggle {width:auto;min-width:44px;padding:0 6px;border-radius:16px}
body #header.mc-phone .mc-phone-bar .dropdown-toggle img {width:20px!important;height:20px!important}
body #header.mc-phone .mc-brand-name {min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:359px){body #header.mc-phone .navbar-brand{font-size:12px;gap:6px}}
body #header.mc-phone.mc-search-open>.container {padding-right:14px!important;flex-wrap:wrap!important}
body #header.mc-phone.mc-search-open .mc-phone-bar {position:static;transform:none;width:100%;flex-wrap:wrap}
body #header.mc-phone .mc-phone-search-input {flex-basis:100%;width:100%}


/* ==========   RECHERCHE DU SITE : PANNEAU DE RESULTATS (couvertures completes)   ========== */
body:not(.mc-admin) #header #results-box {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    min-width: 340px;
    max-width: 430px;
    max-height: 470px;
    overflow: auto;
    padding: 6px;
}
body:not(.mc-admin) #header #results-box .mc-search-count {
    padding: 10px 10px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mc-muted);
}
body:not(.mc-admin) #header #results-box .mc-search-list {
    display: flex;
    flex-direction: column;
}
body:not(.mc-admin) #header #results-box .mc-search-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
body:not(.mc-admin) #header #results-box .mc-search-item:hover {
    background: var(--mc-soft);
    color: inherit;
}
body:not(.mc-admin) #header #results-box .mc-search-cover {
    flex: 0 0 auto;
    width: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mc-soft);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
body:not(.mc-admin) #header #results-box .mc-search-cover img {
    display: block;
    width: 100%;
    height: auto;
}
body:not(.mc-admin) #header #results-box .mc-search-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}
body:not(.mc-admin) #header #results-box .mc-search-title {
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--mc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body:not(.mc-admin) #header #results-box .mc-search-author {
    font-size: 12.5px;
    color: var(--mc-muted);
}
body:not(.mc-admin) #header #results-box .mc-search-badge {
    align-self: flex-start;
    margin-top: 3px;
    background: rgba(116, 92, 247, 0.15);
    color: var(--mc-accent);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
}
body:not(.mc-admin) #header #results-box .mc-search-empty {
    padding: 12px 10px 16px;
    font-size: 13px;
    color: var(--mc-muted);
}

/* Barre Administration : categories en menus deroulants */
.mc-admin-nav .navbar-nav{flex:1;align-items:center}
.mc-admin-nav .nav-link{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:8px 12px;font-weight:700;color:var(--mc-ink);white-space:nowrap}
.mc-admin-nav .nav-link:hover,.mc-admin-nav .nav-link.show{background:var(--mc-soft);color:var(--mc-accent)}
.mc-admin-nav .dropdown-toggle::after{margin-left:2px;vertical-align:.1em}
.mc-admin-nav .mc-nav-reader{margin-left:auto}
.mc-admin-nav .mc-nav-reader .nav-link{color:var(--mc-muted);font-weight:600}
.mc-admin-nav .dropdown-menu{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:12px;padding:6px;min-width:230px;margin-top:8px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.mc-admin-nav .dropdown-item{display:flex;align-items:center;gap:10px;border-radius:8px;padding:9px 10px;font-weight:600;color:var(--mc-ink)}
.mc-admin-nav .dropdown-item .fas{color:var(--mc-muted);width:1.1em}
.mc-admin-nav .dropdown-item .badge{margin-left:auto}
.mc-admin-nav .dropdown-item:hover,.mc-admin-nav .dropdown-item:focus{background:var(--mc-soft);color:var(--mc-accent)}
.mc-admin-nav .dropdown-item:hover .fas,.mc-admin-nav .dropdown-item.active .fas{color:var(--mc-accent)}
.mc-admin-nav .dropdown-item.active{background:var(--mc-soft);color:var(--mc-accent)}
@media(max-width:575.98px){.mc-admin-nav .mc-nav-reader{margin-left:0}.mc-admin-nav .dropdown-menu{min-width:min(260px,calc(100vw - 32px))}}

/* ===== Ajustements responsive (audit des tailles d'ecran) ===== */

/* 1. En-tete : entre 1400 et 1599px le menu tenait sur une ligne rigide d'environ 1530px et depassait de la fenetre.
      Les espaces se compriment maintenant progressivement (rien n'est cache) ; au-dela de 1600px rien ne change. */
@media (min-width:1400px) and (max-width:1599.98px){
    body #header .nav-link{padding-left:clamp(5px,calc(5px + (100vw - 1400px) / 40),10px);padding-right:clamp(5px,calc(5px + (100vw - 1400px) / 40),10px)}
    body #header .navbar-nav.me-auto{gap:clamp(3px,calc(3px + (100vw - 1400px) / 22),12px)}
    body #header .navbar-nav.ms-auto{gap:clamp(6px,calc(6px + (100vw - 1400px) / 33),12px)}
    body #header .navbar-nav.ms-auto>li[style]{flex-basis:140px}
    body #header #nav-filter,body #header #nav-search{width:140px;min-width:120px}
    body #header .form-switch{margin-left:10px!important}
}

/* 2. Barre Administration sur telephone : deux colonnes au lieu d'une entree par ligne (elle occupait la moitie de l'ecran). */
@media (max-width:575.98px){
    .mc-admin-nav>.container{flex-direction:column;align-items:stretch;gap:8px}
    .mc-admin-nav .navbar-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,146px),1fr));gap:6px;flex:none;width:100%}
    .mc-admin-nav .nav-item{min-width:0}
    .mc-admin-nav .nav-link{justify-content:space-between;min-height:38px;padding:7px 10px;white-space:normal;line-height:1.2}
    .mc-admin-nav .mc-nav-reader{margin-left:0}
}

/* 3. Reader (< 992px) : les boutons flottants commentaires / signalement recouvraient le titre et le selecteur de page.
      Ils passent en bas a gauche, au-dessus de la zone de securite, a l'oppose du compteur de pages. */
@media (max-width:991.98px){
    #reader #comments-fab,#comments-fab{top:auto!important;right:auto!important;left:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
    #reader #report-fab,#report-fab{top:auto!important;right:auto!important;left:14px;bottom:calc(108px + env(safe-area-inset-bottom,0px))}
}

/* 4. Ecrans tactiles : zones de toucher plus grandes (sans changer la mise en page au curseur). */
@media (pointer:coarse){
    body #header.mc-phone .mc-bar-btn{width:36px;height:36px}
    #reader .mc-star{width:32px;height:32px;font-size:20px}
    #reader #reader-controls-groups a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px}
    .form-check-input{width:1.35em;height:1.35em}
    .mc-admin .item .small a{display:inline-block;padding-block:8px;margin-block:-8px}
    #page-editor .btn-sm,#page-editor .form-control-sm,#page-editor .pe-card input[type=number]{min-height:38px}
    .mc-chapter-actions a,.mc-chapter-actions .cursor-pointer{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}
}

/* Readers : bouton « barre de pages » (mc-reader-theme.js) - masque la barre de progression en bas. */
body.mc-hide-pagebar #reader-page-bar{display:none!important}

/* ===== Barre de pages des readers : piste fine et flottante, aux couleurs du site (violet), qui s'epaissit au survol.
   Le balisage (piste #track, progression #trail, page courante #thumb, crans .notch, bulle #notch-display) ne change pas :
   seules les regles visuelles de reader.css sont remplacees, pour le reader du site, la preview PSD et le lecteur local. ===== */
#reader #reader-page-bar{--pb-track:rgba(255,255,255,.13);--pb-line:rgba(255,255,255,.14);--pb-hover:rgba(255,255,255,.2);--pb-ring:rgba(255,255,255,.14);--pb-stripe-a:rgba(255,255,255,.04);--pb-stripe-b:rgba(255,255,255,.11);--pb-from:#7054d9;--pb-to:#b19aff;--pb-trail-a:rgba(112,84,217,.5);--pb-trail-b:rgba(177,154,255,.5);height:48px;margin:0 14px;pointer-events:none}
body:not(.dark) #reader #reader-page-bar{--pb-track:rgba(40,36,70,.13);--pb-line:rgba(40,36,70,.14);--pb-hover:rgba(40,36,70,.2);--pb-ring:rgba(40,36,70,.12);--pb-stripe-a:rgba(40,36,70,.04);--pb-stripe-b:rgba(40,36,70,.1);--pb-trail-a:rgba(112,84,217,.38);--pb-trail-b:rgba(138,112,235,.38)}
#reader #reader-page-bar #track{pointer-events:auto;height:8px;left:0;right:0;bottom:16px;width:100%;border:0!important;border-radius:999px;background:var(--pb-track);box-shadow:0 0 0 1px var(--pb-ring),0 6px 18px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:visible;transition:height .18s ease,bottom .18s ease,box-shadow .18s ease}
#reader.layout-horizontal #reader-page-bar:hover #track,#reader #reader-page-bar #track:hover,#reader #reader-page-bar #track:focus-within{height:16px;bottom:12px;box-shadow:0 0 0 1px var(--pb-ring),0 8px 24px rgba(0,0,0,.34)}
#reader #reader-page-bar #notches,#reader #reader-page-bar #trail{border-radius:999px;overflow:hidden}
#reader #reader-page-bar #trail{background:linear-gradient(90deg,var(--pb-trail-a),var(--pb-trail-b))}
#reader[data-direction="rtl"] #reader-page-bar #trail{background:linear-gradient(270deg,var(--pb-trail-a),var(--pb-trail-b))}
#reader #reader-page-bar #thumb{background:linear-gradient(90deg,var(--pb-from),var(--pb-to));border-radius:999px;box-shadow:0 0 12px rgba(177,154,255,.6)}
#reader[data-direction="rtl"] #reader-page-bar #thumb{background:linear-gradient(270deg,var(--pb-from),var(--pb-to))}
#reader #reader-page-bar:hover #thumb{background:linear-gradient(90deg,#8266ec,#c6b4ff)}
#reader #reader-page-bar .notch{transition:background-color .12s ease}
#reader[data-direction="ltr"] #reader-page-bar .notch:not(:first-child),#reader[data-direction="rtl"] #reader-page-bar .notch:not(:last-child){border-left:1px solid var(--pb-line)}
#reader #reader-page-bar .notch:hover{background:var(--pb-hover)}
#reader #reader-page-bar .notch:not(.loaded){background:repeating-linear-gradient(-45deg,var(--pb-stripe-a),var(--pb-stripe-a) 4px,var(--pb-stripe-b) 4px,var(--pb-stripe-b) 8px)}
#reader #reader-page-bar .notch.failed{background:rgba(220,53,69,.38)}
#reader #reader-page-bar #notch-display{position:absolute;top:auto;left:var(--pb-x,50%);bottom:calc(100% + 12px);transform:translateX(-50%);width:auto;height:auto;margin:0!important;padding:5px 14px!important;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.02em;color:#fff;background:rgba(26,22,48,.94);border:1px solid rgba(177,154,255,.45);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .12s ease}
#reader #reader-page-bar #track:hover #notch-display{opacity:1}
@media (prefers-reduced-motion:reduce){#reader #reader-page-bar #track,#reader #reader-page-bar .notch,#reader #reader-page-bar #notch-display{transition:none}}