/* ═══════════════════════════════════════════════════════════════════
   MangaBest Reader

   Layout brief: the homepage IS the series page. A visitor wants one of
   two things — start at chapter 1, or read the newest one — so both are
   buttons above the fold, and the chapter list gets its own scroll box
   instead of pushing the FAQ and comments a mile down the page.

   Near-black with a slight cool cast rather than pure #000: pure black
   next to a bright manga page produces a harsh edge and makes the scan
   look like it is glowing. The accent is admin-configurable and used
   only where a decision is offered, never as decoration.

   No webfont. On a page whose LCP is a 900KB scan, a font request is
   competing with the thing the reader came for.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --mbt-accent:#c0392b;

  --bg:#0b0d10; --bg-2:#12151a; --bg-3:#171b21; --bg-4:#1e232b;
  --line:#242932; --line-2:#333944;
  --ink:#e8eaed; --ink-2:#a6adb8; --ink-3:#6b7280;
  --gold:#f5b301;

  --r:12px; --r-sm:8px; --r-xs:5px;
  --pad:clamp(14px,3.5vw,26px);
  --max:1180px; --max-read:900px;
  --side:255px;

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

[data-theme="light"]{
  --bg:#f4f5f7; --bg-2:#fff; --bg-3:#fff; --bg-4:#f0f2f5;
  --line:#e2e5ea; --line-2:#cbd0d8;
  --ink:#14171c; --ink-2:#4b5563; --ink-3:#8b929c;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{line-height:1.2}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--mbt-accent);outline-offset:2px;border-radius:var(--r-xs)}

.screen-reader-text,.mbt-skip{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.mbt-skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip-path:none;
  z-index:200;background:var(--bg-4);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm)}

.mbt-main{padding-bottom:60px}
.mbt-muted{color:var(--ink-3)}
.mbt-dim{color:var(--ink-3);font-weight:400}

/* ── Header ─────────────────────────────────────────────────────────
   One bar that has to hold a wordmark, a menu of unknown length, a search
   box and two icon buttons — on a 320px phone and a 1440px desktop.

   The sizes scale with clamp() rather than stepping at breakpoints, so there
   is no width where the bar is awkwardly between two layouts. Only the
   structural change (menu becomes a panel) is left to a media query, because
   that one genuinely is a different layout rather than a smaller one. */

.mbt-head{position:relative;z-index:60;background:var(--bg-2);
  border-bottom:1px solid var(--line)}
.mbt-head.is-sticky{position:sticky;top:0}
/* A shadow only once the page has moved. Permanently on, it reads as a
   floating slab; permanently off, the bar and the content underneath merge
   while scrolling. */
.mbt-head.is-stuck{box-shadow:0 6px 24px rgba(0,0,0,.28)}

.mbt-head__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  min-height:clamp(64px,5.5vw,80px);display:flex;align-items:center;gap:clamp(12px,2vw,26px)}

/* Capped, and allowed to shrink. The site title comes from WordPress and can
   be any length — "Read manga Online in English" is 540px of the bar, which
   starved the navigation until items were clipped. A wordmark is a fixed slot
   on every site that has one; this is that slot. */
.mbt-brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.15;
  flex:0 1 auto;min-width:0;max-width:clamp(140px,22vw,300px)}
.mbt-brand__name{font-size:clamp(19px,2.3vw,26px);font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The first word takes the accent — a wordmark's worth of identity with
   nothing to load and nothing to go stale. Split server-side, because there
   is no ::first-word selector. */
.mbt-brand__name em{font-style:normal;color:var(--mbt-accent)}
.mbt-brand__tag{font-size:clamp(9px,0.9vw,10.5px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Navigation ─────────────────────────────────────────────────── */
/* Menu contents come from Appearance → Menus, so the theme cannot assume a
   fixed number of items — it has to survive both three links and fifteen. */
/* The script moves items that do not fit into a dropdown. When it does not run
   — an error earlier in the file, an extension, JS off — this is what happens
   instead: the row scrolls rather than being clipped.
   overflow:hidden was the previous fallback and it silently ATE menu items;
   a link nobody can reach is worse than one they have to scroll to. */
/* flex-shrink allowed, but the tools beside it are flex:none and win every
   contest for space — without a basis of 0 the nav claims its content width
   first and then everything overlaps rather than collapsing. */
.mbt-nav{display:flex;align-items:center;flex:1 1 0;min-width:0;
  overflow-x:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none}
.mbt-nav::-webkit-scrollbar{display:none}
/* flex:none, and no min-width:0.

   With min-width:0 the list shrank below the width of its own items. The items
   are flex:none so they did not shrink with it — they simply painted outside
   the list's box, on top of whatever sat next to it. That is what printed
   "Privacy Policy" over "More".

   Refusing to shrink pushes the overflow up to .mbt-nav, where overflow-x
   handles it and the script can move items into the More menu. */
.mbt-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap;flex:none}
.mbt-nav__list li{position:relative;flex:none}
.mbt-nav__list a{display:inline-flex;align-items:center;padding:9px clamp(10px,1.2vw,15px);
  border-radius:var(--r-sm);font-size:clamp(13.5px,1.2vw,15px);font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.mbt-nav__list a:hover{color:var(--ink);background:var(--bg-4)}
.mbt-nav__list .current-menu-item>a,
.mbt-nav__list .current_page_item>a{color:var(--ink);background:var(--bg-4)}

/* One level of submenu. Deeper than that on a manga site is someone using the
   menu as a sitemap. */
.mbt-nav__list .sub-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;list-style:none;margin:0;
  display:none;flex-direction:column;z-index:80}
.mbt-nav__list li:hover>.sub-menu,
.mbt-nav__list li:focus-within>.sub-menu{display:flex}
.mbt-nav__list .sub-menu a{width:100%;font-weight:500}

/* ── Overflow menu ──────────────────────────────────────────────────
   A menu comes from Appearance → Menus, so its length is whatever someone
   typed — and past a handful of items it wraps and shoves the search box
   onto a second line. Items that no longer fit are moved into this dropdown
   by script; with JavaScript off the row simply scrolls instead. */
/* No margin-left:auto. Inside a scrolling flex row that does not reserve
   space for the button, it only pushes — which is how "Privacy Policy" ended
   up printed on top of "More". It sits at the end of the row instead. */
.mbt-more{position:relative;flex:none;display:none}
.mbt-more.is-on{display:block}
.mbt-more__btn{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;
  border:0;background:none;cursor:pointer;border-radius:var(--r-xs);
  color:var(--ink-2);font:600 clamp(13px,1.15vw,15px)/1 var(--sans);white-space:nowrap}
.mbt-more__btn:hover,.mbt-more__btn[aria-expanded="true"]{color:var(--ink);background:var(--bg-4)}
.mbt-more__btn::after{content:"";width:5px;height:5px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
/* Fixed rather than absolute: the nav clips its overflow, and an absolutely
   positioned panel inside a clipped box gets cut off at the header edge.
   Placed by script. */
.mbt-more__list{position:fixed;min-width:200px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;list-style:none;margin:0;z-index:80}
.mbt-more__list[hidden]{display:none}
.mbt-more__list li{position:relative}
.mbt-more__list a{display:block;width:100%;padding:9px 12px;border-radius:var(--r-xs);
  color:var(--ink-2);text-decoration:none;font-size:14px;white-space:nowrap}
.mbt-more__list a:hover{background:var(--bg-4);color:var(--ink)}
/* A submenu inside the overflow list is nested rather than floating — there
   is no room to fly a second panel out beside the first. */
.mbt-more__list .sub-menu{position:static;display:flex;flex-direction:column;
  box-shadow:none;border:0;background:transparent;padding:0 0 0 12px;margin:0;list-style:none}

.mbt-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:40px;padding:0 9px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;flex:none}
.mbt-burger span{display:block;height:2px;background:var(--ink-2);border-radius:2px;
  transition:transform .18s,opacity .18s}
.mbt-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mbt-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mbt-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Header tools ───────────────────────────────────────────────── */
.mbt-head__tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}

/* ── Search ─────────────────────────────────────────────────────── */
/* Wider than it needs to be for the text: on a site whose whole product is
   the library, the search field is the primary control and reads as one. */
.mbt-search-wrap{position:relative;flex:none}

.mbt-search{display:flex;align-items:center;gap:8px;background:var(--bg-4);
  border:1px solid var(--line);border-radius:999px;padding:0 6px 0 14px;
  transition:border-color .15s,box-shadow .15s}
.mbt-search:focus-within{border-color:var(--mbt-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mbt-accent) 18%, transparent)}
.mbt-search__icon{flex:none;color:var(--ink-3)}
.mbt-search:focus-within .mbt-search__icon{color:var(--mbt-accent)}
.mbt-search input{width:clamp(160px,20vw,300px);background:none;border:0;color:var(--ink);
  font:14px var(--sans);padding:11px 0;min-width:0}
.mbt-search input:focus{outline:none}
.mbt-search input::placeholder{color:var(--ink-3)}
.mbt-search input::-webkit-search-cancel-button{display:none}

.mbt-search__clear{flex:none;width:24px;height:24px;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font-size:19px;line-height:1;border-radius:50%}
.mbt-search__clear:hover{color:var(--ink);background:var(--bg-3)}
.mbt-search__go{flex:none;border:0;cursor:pointer;background:var(--mbt-accent);color:#fff;
  font:700 12.5px var(--sans);padding:8px 16px;border-radius:999px}
.mbt-search__go:hover{filter:brightness(1.08)}

/* ── Autocomplete ───────────────────────────────────────────────── */
/* Fixed rather than absolute so it is never clipped by the header's own
   overflow, and wide enough that a title does not truncate at four words. */
.mbt-ac{position:absolute;top:calc(100% + 8px);right:0;width:min(420px,92vw);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.5);padding:6px;z-index:90;
  max-height:min(70vh,520px);overflow-y:auto}
.mbt-ac[hidden]{display:none}

.mbt-ac__item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--r-sm);
  text-decoration:none;color:inherit}
.mbt-ac__item:hover,.mbt-ac__item.is-on{background:var(--bg-4)}
.mbt-ac__art{flex:none;width:42px;aspect-ratio:3/4.3;border-radius:4px;overflow:hidden;
  background:var(--bg-4);border:1px solid var(--line)}
.mbt-ac__art img{width:100%;height:100%;object-fit:cover;display:block}
.mbt-ac__body{min-width:0;display:flex;flex-direction:column;gap:2px}
.mbt-ac__body b{font-size:13.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mbt-ac__body small{font-size:11.5px;color:var(--ink-3)}
.mbt-ac__none{margin:0;padding:18px 12px;text-align:center;font-size:13px;color:var(--ink-3)}

/* The icon trigger belongs to narrow screens only; on desktop the field is
   already there and a button to reveal it would be a second way in.

   Declared with .mbt-icon as well, not alone: on its own it has the same
   specificity as the generic .mbt-icon rule below and loses on source order,
   which is why the magnifier sat next to the search box on desktop. */
.mbt-icon.mbt-icon--search{display:none}

/* 38px minimum: below that an icon button is smaller than a fingertip, and
   these two sit right next to each other. */
.mbt-icon{display:grid;place-items:center;width:clamp(38px,3.6vw,44px);height:clamp(38px,3.6vw,44px);
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);cursor:pointer;font-size:18px;line-height:1;flex:none}
.mbt-icon:hover{color:var(--ink);border-color:var(--line-2)}

/* ── Banner ─────────────────────────────────────────────────────── */
/* Shown at full width, not blurred into a backdrop: on a single-series
   site this is the one piece of key art there is, and hiding it behind a
   48px blur wastes the only visual the page has. */

.mbt-banner{position:relative;width:100%;height:clamp(150px,26vw,340px);overflow:hidden;background:var(--bg-2)}
.mbt-banner img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.mbt-banner__fade{position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,var(--bg) 100%)}

/* ── Shell ──────────────────────────────────────────────────────── */

.mbt-shell{max-width:var(--max);margin:0 auto;padding:22px var(--pad) 0;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start}
/* The cover rides up over the banner: it ties the two blocks together and
   buys back the vertical space the banner spent. */
.mbt-shell.has-banner{margin-top:clamp(-120px,-12vw,-70px);position:relative;z-index:2}

.mbt-side{position:sticky;top:72px}
.mbt-cover img{width:100%;aspect-ratio:3/4.3;object-fit:cover;display:block;
  border-radius:var(--r);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.5)}

.mbt-follow{width:100%;margin-top:14px}
.mbt-follow .mbt-follow__on{display:none}
.mbt-follow.is-on .mbt-follow__on{display:inline}
.mbt-follow.is-on .mbt-follow__off{display:none}
.mbt-followers{margin:8px 0 0;text-align:center;font-size:12px;color:var(--ink-3)}
.mbt-followers b{color:var(--ink-2)}

.mbt-score{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 14px}
/* Two stacked star rows clipped by a percentage — gives real half-stars
   without an icon font or an SVG sprite. */
.mbt-stars{position:relative;display:inline-block;font-size:16px;letter-spacing:1px;line-height:1}
.mbt-stars__bg{color:var(--line-2)}
.mbt-stars__fg{position:absolute;inset:0;color:var(--gold);overflow:hidden;width:var(--pct);white-space:nowrap}
.mbt-score__num{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

.mbt-facts{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mbt-fact{display:flex;align-items:baseline;gap:10px;padding:9px 13px;font-size:12.5px}
.mbt-fact+.mbt-fact{border-top:1px solid var(--line)}
.mbt-fact dt{color:var(--ink-3);flex:none}
.mbt-fact dd{margin:0 0 0 auto;text-align:right;color:var(--ink);font-weight:600}

/* ── Intro ──────────────────────────────────────────────────────── */

.mbt-intro{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px var(--pad)}
.mbt-title{margin:0 0 5px;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.mbt-alt{margin:0 0 14px;color:var(--ink-3);font-size:13px}
.mbt-h{margin:16px 0 7px;font-size:14px;font-weight:700;letter-spacing:-.01em}

.mbt-genres{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.mbt-genres li{font-size:12.5px;padding:5px 13px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg-3)}

.mbt-synopsis{color:var(--ink-2);font-size:14.5px;max-width:74ch}
.mbt-synopsis p{margin:0}

/* Visible text, not a meta tag. Styled quietly: it is there to be crawled and
   occasionally read, not to compete with the synopsis. */
.mbt-keywords{margin:14px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink-3);max-width:80ch}
.mbt-keywords b{color:var(--ink-2)}

/* ── Jump buttons ───────────────────────────────────────────────── */

.mbt-jump{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.mbt-jump__btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 16px;border-radius:var(--r);text-decoration:none;
  background:var(--mbt-accent);color:#fff;transition:filter .14s}
.mbt-jump__btn:hover{filter:brightness(1.1)}
.mbt-jump__kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.mbt-jump__num{font-size:17px;font-weight:700}

/* ── Chapter box ────────────────────────────────────────────────── */

.mbt-input{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink);font:14px/1.5 var(--sans)}
.mbt-input::placeholder{color:var(--ink-3)}
.mbt-input:focus{outline:none;border-color:var(--mbt-accent)}
.mbt-chsearch{margin-bottom:12px}

.mbt-chbox{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mbt-chbox__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.mbt-chbox__empty{padding:26px 14px;text-align:center;margin:0}

/* Its own scroll container. 232 chapters rendered inline would push the FAQ,
   the comments and everything below them off the page entirely. */
.mbt-ch-list{list-style:none;margin:0;padding:0;max-height:min(620px,72vh);overflow-y:auto;overscroll-behavior:contain}
.mbt-ch-list::-webkit-scrollbar{width:9px}
.mbt-ch-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.mbt-ch-list::-webkit-scrollbar-track{background:var(--bg-3)}

.mbt-ch{border-bottom:1px solid var(--line)}
.mbt-ch:last-child{border-bottom:0}
.mbt-ch[hidden]{display:none}
.mbt-ch>a{display:flex;align-items:center;gap:10px;padding:13px 15px;text-decoration:none;
  border-left:2px solid transparent;transition:background .12s,border-color .12s}
.mbt-ch>a:hover{background:var(--bg-4);border-left-color:var(--mbt-accent)}
.mbt-ch__num{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.mbt-ch__title{color:var(--ink-3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbt-ch__date{margin-left:auto;flex:none;color:var(--ink-3);font-size:12px}
.mbt-ch__new{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--mbt-accent);color:#fff;border-radius:3px;padding:2px 6px}
/* Already-read chapters dim. On a 232-chapter series, knowing where you
   stopped is the single most useful thing this list can tell you. */
.mbt-ch.is-read .mbt-ch__num,.mbt-ch.is-read .mbt-ch__title{color:var(--ink-3);font-weight:500}

/* ── Generic box (FAQ, comments) ────────────────────────────────── */

.mbt-box{max-width:var(--max);margin:22px auto 0;padding:0 var(--pad)}
.mbt-box__head{background:var(--bg-2);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;margin:0;padding:12px 18px;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The heading is a flex row now, so the subtitle has to claim a full line —
   otherwise it lines up beside the title instead of under it. */
.mbt-box__head small{flex:1 0 100%;order:2;font-weight:400;font-size:12px;
  color:var(--ink-3);margin:2px 0 0}
.mbt-box__body{background:var(--bg-2);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
  padding:6px 18px 18px}

.mbt-faq__item{border-bottom:1px solid var(--line);padding:12px 0}
.mbt-faq__item:last-child{border-bottom:0}
.mbt-faq__item summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;
  display:flex;align-items:center;gap:10px}
.mbt-faq__item summary::-webkit-details-marker{display:none}
.mbt-faq__item summary::before{content:"\25B8";color:var(--mbt-accent);display:inline-block;transition:transform .15s}
.mbt-faq__item[open] summary::before{transform:rotate(90deg)}
.mbt-faq__item p{margin:8px 0 2px 22px;color:var(--ink-2);font-size:13.5px}

/* ── Continue reading ───────────────────────────────────────────── */

.mbt-continue{max-width:var(--max);margin:22px auto 0;padding:16px var(--pad);
  border-radius:var(--r);
  background:linear-gradient(100deg,color-mix(in srgb,var(--mbt-accent) 88%,#000),
                                    color-mix(in srgb,var(--mbt-accent) 45%,var(--bg-4)));
  color:#fff}
.mbt-continue[hidden]{display:none}
.mbt-continue__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mbt-continue__head h2{margin:0;font-size:15px;font-weight:700}
.mbt-continue__head .mbt-btn{margin-left:auto;border-color:rgba(255,255,255,.4);color:#fff}
.mbt-continue__head .mbt-btn:hover{background:rgba(255,255,255,.14)}
.mbt-continue__row{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.mbt-continue__row a{flex:none;min-width:150px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm);padding:10px 14px;text-decoration:none;color:#fff}
.mbt-continue__row a:hover{background:rgba(0,0,0,.45)}
.mbt-continue__row b{display:block;font-size:13.5px}
.mbt-continue__row time{display:block;font-size:11px;opacity:.7;margin-top:2px}

/* ── Buttons ────────────────────────────────────────────────────── */

.mbt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--bg-4);color:var(--ink);font:600 14px/1 var(--sans);
  text-decoration:none;cursor:pointer;transition:border-color .14s,background .14s}
.mbt-btn:hover{border-color:var(--ink-3)}
.mbt-btn--primary{background:var(--mbt-accent);border-color:var(--mbt-accent);color:#fff}
.mbt-btn--primary:hover{filter:brightness(1.1)}
.mbt-btn--ghost{background:transparent;border-color:var(--line)}
.mbt-btn--sm{padding:7px 12px;font-size:12.5px}
.mbt-btn.is-disabled{opacity:.32;pointer-events:none}
.mbt-linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--mbt-accent);font:inherit;font-size:13px}

.mbt-top{position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--mbt-accent);color:#fff;cursor:pointer;text-decoration:none;
  display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:opacity .18s,transform .18s,filter .14s}
.mbt-top:hover{filter:brightness(1.12)}
/* Clear of the iOS home indicator and the Android gesture bar, which sit
   exactly where a bottom-right floating button wants to be. */
@supports (padding:max(0px)){
  .mbt-top{bottom:max(18px,env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right))}
}
/* Hiding it near the top of the page is an ENHANCEMENT, so it is gated on the
   class the script adds to <html>. Without the script the button is simply
   always there, which is the correct failure. */
html.mbt-js .mbt-top{opacity:0;transform:translateY(10px);pointer-events:none}
html.mbt-js .mbt-top.is-in{opacity:1;transform:none;pointer-events:auto}

@media (max-width:640px){ .mbt-top{width:42px;height:42px} }



/* ── Reader ─────────────────────────────────────────────────────── */
/* Centred, because the chapter number is the one thing a reader checks before
   they start scrolling — and centring puts it in the same place regardless of
   how long the chapter title happens to be. */

.mbt-reader-top{max-width:var(--max-read);margin:0 auto;padding:20px var(--pad) 0;text-align:center}

.mbt-reader-head h1{margin:0;font-size:clamp(21px,3.4vw,30px);letter-spacing:-.025em;
  font-weight:800;text-wrap:balance}
.mbt-reader-head__sub{display:block;font-size:.62em;font-weight:600;color:var(--ink-2);margin-top:5px}
.mbt-reader-meta{margin:7px 0 0;color:var(--ink-3);font-size:13.5px}
.mbt-reader-meta a{color:var(--gold);text-decoration:none;font-weight:600}
.mbt-reader-meta a:hover{text-decoration:underline}

/* Breadcrumb bar. The plugin already emits BreadcrumbList structured data;
   Google renders breadcrumbs in results from that, but cross-checks it against
   what is actually on the page. */
.mbt-crumbbar{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 16px;margin:16px 0 0;font-size:13.5px;color:var(--ink-3);
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mbt-crumbbar::-webkit-scrollbar{display:none}
.mbt-crumbbar a{color:var(--ink-2);text-decoration:none}
.mbt-crumbbar a:hover{color:var(--ink)}
.mbt-crumbbar span{margin:0 7px;color:var(--line-2)}
.mbt-crumbbar [aria-current]{color:var(--ink-2);margin:0}

/* The only prose on a page that is otherwise forty images and nothing a
   crawler can read. */
.mbt-reader-intro{margin:16px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.7;text-wrap:pretty}

.mbt-reader-actions{display:flex;justify-content:center;gap:8px;
  max-width:var(--max-read);margin:0 auto 4px;padding:0 var(--pad)}
.mbt-bookmark .mbt-bookmark__on{display:none}
.mbt-bookmark.is-on .mbt-bookmark__on{display:inline}
.mbt-bookmark.is-on .mbt-bookmark__off{display:none}
.mbt-bookmark.is-on{border-color:var(--mbt-accent);color:var(--mbt-accent)}

/* ── Share row ──────────────────────────────────────────────────── */
/* Brand colours, because these buttons only work if they are recognised at a
   glance — a row of five identical grey pills is a row nobody reads. */
.mbt-sharerow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0}
.mbt-sharerow__btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
  border:0;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  font:600 13px/1 var(--sans);color:#fff;transition:filter .14s,transform .08s}
.mbt-sharerow__btn:hover{filter:brightness(1.12)}
.mbt-sharerow__btn:active{transform:translateY(1px)}
.is-facebook{background:#1877f2}
.is-twitter{background:#1d9bf0}
.is-whatsapp{background:#25d366}
.is-pinterest{background:#e60023}
.is-telegram{background:#229ed9}
.is-copy{background:var(--bg-4);color:var(--ink-2);border:1px solid var(--line)}
.is-copy:hover{color:var(--ink)}
.is-native{background:var(--mbt-accent)}

/* ── Reader control bar ─────────────────────────────────────────── */
/* Left: which chapter, and how to read it. Right: where you are, and how to
   move. Grouped by question rather than by control type — that is what keeps
   the bar scannable once there are five things in it. */
.mbt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  max-width:var(--max-read);margin:16px auto;padding:0 var(--pad)}
.mbt-bar__group{display:flex;align-items:center;gap:8px;min-width:0}
.mbt-bar__group--right{margin-left:auto}

.mbt-sel{display:block;min-width:0}
.mbt-sel select{
  max-width:230px;padding:9px 32px 9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-3);color:var(--ink);cursor:pointer;
  font:600 13px/1.2 var(--sans);
  /* The native arrow sits hard against the edge of a pill and looks wrong, so
     it is replaced with one drawn at a fixed offset. */
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  text-overflow:ellipsis}
.mbt-sel select:hover{border-color:var(--line-2)}
.mbt-sel select:focus{outline:none;border-color:var(--mbt-accent)}
/* The dropdown list is drawn by the OS, so its colours have to be set on the
   options or a dark theme gets black text on a black list. */
.mbt-sel option{background:var(--bg-2);color:var(--ink)}
.mbt-sel--page select{max-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.mbt-sel--page[hidden]{display:none}

.mbt-navbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 17px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  font:700 13px/1 var(--sans);text-decoration:none;transition:filter .14s,border-color .14s}
.mbt-navbtn:hover{border-color:var(--line-2)}
.mbt-navbtn--primary{background:var(--gold);border-color:var(--gold);color:#1a1400}
.mbt-navbtn--primary:hover{filter:brightness(1.08)}
.mbt-navbtn.is-disabled{opacity:.35;pointer-events:none}

/* ── Pages ──────────────────────────────────────────────────────── */
.mbt-reader{max-width:var(--max-read);margin:0 auto;background:#000;border-radius:var(--r);overflow:hidden}
[data-theme="light"] .mbt-reader{background:var(--bg-4)}
.mbt-page{content-visibility:auto;contain-intrinsic-size:auto 1200px}
/* Fill the column and keep the image's own proportions. No forced ratio.
   The previous rule gave dimension-less images `aspect-ratio:2/3` plus
   `object-fit:contain` to stop layout shift while they loaded. That works for
   a single manga page and destroys a webtoon: a long strip is far taller than
   2:3, so `contain` shrank it to a thumbnail floating in a tall black box.
   Layout shift is handled by `contain-intrinsic-size` on the wrapper above,
   which reserves space without lying about the shape. */
.mbt-page img{display:block;width:100%;height:auto;max-width:100%}
/* Single-page mode: everything but the current page is out of the flow, so
   scroll position and the browser's own page-height estimate stay honest. */
.mbt-reader[data-mode="single"] .mbt-page{display:none}
.mbt-reader[data-mode="single"] .mbt-page.is-current{display:block}
.mbt-reader__empty{padding:60px 20px;text-align:center}

/* ── Ads ────────────────────────────────────────────────────────── */

.mb-ad{margin:16px auto;text-align:center;max-width:var(--max-read);min-height:1px}
.mb-ad--sidebar{margin:14px 0 0;max-width:none}
.mb-ad--reader_inline{margin:6px auto}

/* ── Comments ───────────────────────────────────────────────────── */
/* The form mirrors WordPress's own order — comment, then details, then the
   remember box. It is the layout every reader has already used a hundred
   times, and there is nothing to gain from being different here. */

.mbt-cform{margin:8px 0 26px}
.mbt-cform__title{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.mbt-cform__note{margin:0 0 16px;color:var(--ink-3);font-size:13px}
.mbt-cform__note b{color:var(--ink-2)}
.mbt-cform__note a,.mbt-cform__hint a{color:var(--mbt-accent);text-decoration:none}
.mbt-cform__note a:hover,.mbt-cform__hint a:hover{text-decoration:underline}
.mbt-req{color:var(--mbt-accent)}

.mbt-field{margin:0 0 14px}
.mbt-field label{display:block;margin-bottom:6px;font-size:13.5px;color:var(--ink-2)}
.mbt-field textarea{min-height:150px;resize:vertical;line-height:1.6}
.mbt-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mbt-field--check label{display:flex;align-items:flex-start;gap:9px;margin:0;
  font-size:13px;color:var(--ink-3);cursor:pointer;line-height:1.5}
.mbt-field--check input{margin-top:2px;accent-color:var(--mbt-accent);flex:none}

.mbt-cform__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.mbt-cform__hint{font-size:12.5px}
.mbt-cform__foot .mbt-btn{margin-left:auto}
.mbt-replying{font-size:13px;color:var(--ink-3)}

.mbt-clist{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mbt-clist--sub{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--line);gap:14px}
.mbt-c__head{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.mbt-c__head a{text-decoration:none}
.mbt-c__head a:hover b{color:var(--mbt-accent)}
.mbt-c__head time{color:var(--ink-3);font-size:12px}
.mbt-c__body{margin:6px 0 6px;color:var(--ink-2);font-size:14.5px;overflow-wrap:anywhere;line-height:1.7}

.mbt-clogin{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:22px;text-align:center;margin:12px 0 22px}
.mbt-clogin__msg{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.mbt-clogin__actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0}

/* ── History drawer ─────────────────────────────────────────────── */

.mbt-drawer{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:flex;justify-content:flex-end}
.mbt-drawer[hidden]{display:none}
.mbt-drawer__panel{width:min(400px,92vw);background:var(--bg-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column}
.mbt-drawer__head{display:flex;align-items:center;padding:16px var(--pad);border-bottom:1px solid var(--line)}
.mbt-drawer__head h2{margin:0;font-size:16px}
.mbt-drawer__head .mbt-icon{margin-left:auto}
.mbt-drawer__body{overflow-y:auto;padding:8px 0}
.mbt-drawer__body a{display:flex;align-items:baseline;gap:10px;padding:11px var(--pad);
  text-decoration:none;font-size:14px}
.mbt-drawer__body a:hover{background:var(--bg-4)}
.mbt-drawer__body time{margin-left:auto;color:var(--ink-3);font-size:12px}
.mbt-drawer__empty{padding:30px var(--pad);color:var(--ink-3);font-size:14px}

/* ── Pages / 404 / footer ───────────────────────────────────────── */

.mbt-page-body,.mbt-prose{max-width:70ch;margin:30px auto;padding:0 var(--pad)}
.mbt-prose h1{font-size:clamp(24px,4vw,36px);letter-spacing:-.02em}
.mbt-prose a{color:var(--mbt-accent)}

.mbt-empty{text-align:center;padding:90px 20px}
.mbt-empty__code{font:800 68px/1 var(--mono);color:var(--line-2);margin:0 0 8px}
.mbt-empty h1{font-size:24px;margin:0 0 8px;letter-spacing:-.02em}
.mbt-empty p{color:var(--ink-2);margin:0 0 22px}

/* ── Footer ─────────────────────────────────────────────────────── */
/* Minimal and centred. A footer on a reading site is where someone goes to
   find the DMCA page — not a second homepage. Three columns of links at the
   end of a forty-image chapter is furniture nobody asked for. */

.mbt-foot{border-top:1px solid var(--line);margin-top:56px;background:var(--bg-2)}
.mbt-foot__in{max-width:var(--max);margin:0 auto;padding:30px var(--pad);text-align:center}

.mbt-foot__nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0;list-style:none;margin:0;padding:0}
.mbt-foot__nav li{display:flex;align-items:center}
/* A separator drawn between items rather than after them, so the row never
   ends on a dangling dot when the page count changes. */
.mbt-foot__nav li+li::before{content:"·";color:var(--line-2);margin:0 14px}
.mbt-foot__nav a{color:var(--ink-2);text-decoration:none;font-size:14px;padding:4px 0}
.mbt-foot__nav a:hover{color:var(--ink)}

.mbt-social{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  list-style:none;margin:0 0 16px;padding:0}
.mbt-social a{display:inline-block;font-size:12px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-2);text-decoration:none}
.mbt-social a:hover{border-color:var(--mbt-accent);color:var(--ink)}

.mbt-foot__copy{margin:14px 0 0;color:var(--ink-3);font-size:13.5px}
.mbt-foot__note{margin:10px auto 0;max-width:70ch;color:var(--ink-3);font-size:11.5px;line-height:1.6;opacity:.75}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width:900px){
  .mbt-shell{grid-template-columns:150px minmax(0,1fr)}
  .mbt-shell.has-banner{margin-top:-56px}
  .mbt-side{position:static}
  .mbt-brand__tag{display:none}
}

/* The menu becomes a panel here rather than at 640px.
   Between roughly 700 and 900 the row still fits by arithmetic — brand, menu,
   search and two icons — but only by squeezing every one of them to the point
   where nothing is comfortably tappable. A tablet gets the phone layout on
   purpose. */
@media (max-width:900px){
  .mbt-head__in{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .mbt-burger{display:flex;order:1}
  .mbt-brand{order:0;flex:1}
  .mbt-head__tools{order:2;margin-left:auto}
  .mbt-nav{order:3;width:100%;display:none;flex:1 0 100%}
  .mbt-nav.is-open{display:block}
  .mbt-nav__list{flex-direction:column;align-items:stretch;gap:0;overflow:visible;
    flex-wrap:wrap;border-top:1px solid var(--line);padding-top:6px}
  /* Everything is visible in the panel, so nothing needs collapsing. */
  .mbt-more{display:none!important}
  .mbt-nav__list a{padding:12px 4px;font-size:15px}
  .mbt-nav__list .sub-menu{position:static;display:flex;box-shadow:none;border:0;
    background:transparent;padding:0 0 0 14px}
}

@media (max-width:640px){
  /* The field is hidden until the icon is pressed, then takes a full row.
     Permanently visible it would eat half the bar; permanently hidden behind
     a page load it would not be used at all. */
  .mbt-icon.mbt-icon--search{display:grid}
  .mbt-search-wrap{order:4;flex:1 0 100%;display:none}
  .mbt-search-wrap.is-open{display:block}
  .mbt-search input{width:100%;min-width:0}
  .mbt-ac{width:100%;right:auto;left:0}
  .mbt-search__go{padding:8px 13px}
  .mbt-brand__name{font-size:17px}
  .mbt-foot__nav li+li::before{margin:0 9px}
  .mbt-shell{grid-template-columns:1fr}
  .mbt-shell.has-banner{margin-top:-44px}
  .mbt-cover{width:132px}
  .mbt-follow,.mbt-followers,.mbt-score{max-width:132px}
  .mbt-jump{grid-template-columns:1fr}
  .mbt-ch__title{display:none}
  .mbt-field-row{grid-template-columns:1fr}
  .mbt-search input{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ── Read also ──────────────────────────────────────────────────── */
/* Covers at a fixed ratio so a mixed bag of source images still lines up —
   nothing looks more unfinished than a row of cards at seven heights. */
.mbt-ra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;padding:12px 0 4px}
.mbt-ra{display:block;text-decoration:none;color:inherit}
.mbt-ra__art{position:relative;display:block;aspect-ratio:3/4.3;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-4);border:1px solid var(--line)}
.mbt-ra__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.mbt-ra:hover .mbt-ra__art img{transform:scale(1.04)}
.mbt-ra:hover .mbt-ra__art{border-color:var(--mbt-accent)}
.mbt-ra__badge{position:absolute;top:6px;left:6px;background:var(--mbt-accent);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px}
.mbt-ra__rating{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.72);color:var(--gold);
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px}
.mbt-ra__title{display:block;margin-top:7px;font-size:13px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mbt-ra:hover .mbt-ra__title{color:var(--mbt-accent)}
.mbt-ra__latest{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}

@media (max-width:640px){
  .mbt-ra-grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px}
}

/* ── Share ──────────────────────────────────────────────────────── */
/* Plain links, no third-party widgets. An official share button means loading
   their JavaScript on every chapter page — more cost than the share is worth,
   and it hands them a view of your traffic for free. */
.mbt-share{position:relative;display:inline-flex}
.mbt-share__btn{gap:7px}
.mbt-share__btn svg{flex:none}

.mbt-share__menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:160px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;display:flex;flex-direction:column}
.mbt-share__menu[hidden]{display:none}
/* Right-aligned when the button sits near the right edge, so the menu never
   opens off-screen. Set by JS, which is the only place that knows. */
.mbt-share__menu.is-right{left:auto;right:0}

.mbt-share__menu a,.mbt-share__menu button{
  display:block;width:100%;text-align:left;padding:8px 11px;border:0;background:none;
  color:var(--ink-2);font:500 13px/1 var(--sans);text-decoration:none;cursor:pointer;
  border-radius:var(--r-xs)}
.mbt-share__menu a:hover,.mbt-share__menu button:hover{background:var(--bg-4);color:var(--ink)}
.mbt-share__copy{border-top:1px solid var(--line)!important;border-radius:0 0 var(--r-xs) var(--r-xs)!important;
  margin-top:3px;padding-top:10px!important;color:var(--mbt-accent)!important}

.mbt-side__share{display:flex;justify-content:center;margin-top:8px}
.mbt-side__share .mbt-share,.mbt-side__share .mbt-share__btn{width:100%}
.mbt-side__share .mbt-share__btn{justify-content:center}

/* ── Chapter tags ───────────────────────────────────────────────── */
/* Muted on purpose. This block earns its place with crawlers, not readers —
   styling it to compete with the chapter itself would be dishonest about what
   it is for. */
.mbt-tags{max-width:var(--max-read);margin:4px auto 0;padding:13px 16px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-3);font-size:13px;line-height:1.7}
.mbt-tags b{color:var(--ink-2);font-weight:600}
@media (max-width:640px){ .mbt-tags{font-size:12px;padding:11px 13px} }

.mbt-cform__note a{color:var(--mbt-accent);text-decoration:none}
.mbt-cform__note a:hover{text-decoration:underline}
.mbt-cform__note b{color:var(--ink-2)}

/* ── Sign in / register ─────────────────────────────────────────── */
.mbt-auth{position:fixed;inset:0;z-index:140;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;padding:20px}
.mbt-auth[hidden]{display:none}
.mbt-auth__panel{width:min(400px,100%);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.mbt-auth__head{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.mbt-auth__head h2{margin:0;font-size:16px}
.mbt-auth__head .mbt-icon{margin-left:auto}

.mbt-auth__tabs{display:flex;border-bottom:1px solid var(--line)}
.mbt-auth__tab{flex:1;padding:12px 8px;background:none;border:0;cursor:pointer;
  color:var(--ink-3);font:600 13.5px/1 var(--sans);border-bottom:2px solid transparent}
.mbt-auth__tab.is-on{color:var(--ink);border-bottom-color:var(--mbt-accent)}

.mbt-auth__form{display:grid;gap:10px;padding:18px}
.mbt-auth__form[hidden]{display:none}
.mbt-auth__remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);cursor:pointer}
.mbt-auth__remember input{accent-color:var(--mbt-accent)}
.mbt-auth__msg{margin:0;font-size:13px;min-height:0}
.mbt-auth__msg.is-bad{color:#ef6b6b}
.mbt-auth__msg.is-ok{color:var(--ok,#4ade80)}
.mbt-auth__alt{margin:0;font-size:12.5px;text-align:center}
.mbt-auth__alt a{color:var(--ink-3);text-decoration:none}
.mbt-auth__alt a:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   LIBRARY

   The front page changed job when the site went multi-series: it is a
   feed of what changed, not a page about one thing. So the grid leads
   and everything else sits in a rail beside it.
   ═══════════════════════════════════════════════════════════════════ */

.mbt-lib{max-width:var(--max);margin:0 auto;padding:20px var(--pad) 0}
.mbt-lib__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(16px,2.4vw,26px);align-items:start}
.mbt-lib__main{min-width:0}
.mbt-lib__side{position:sticky;top:72px;display:grid;gap:16px}
.mbt-lib__more{text-align:center;margin:18px 0 0}
.mbt-lib__none{padding:40px 0;text-align:center}

.mbt-lib__head{margin-bottom:18px}
.mbt-lib__head h1{margin:0 0 12px;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.025em}

/* ── Filters ────────────────────────────────────────────────────── */
/* Selects submit on change so a filter takes one interaction, not two —
   the Filter button is there for the search box and for keyboards. */
.mbt-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mbt-filters__q{flex:1 1 220px;min-width:0;max-width:340px}
.mbt-filters .mbt-sel select{max-width:none}

/* ── Hot tiles ──────────────────────────────────────────────────── */
/* Covers at one fixed ratio. A mixed bag of source images at seven different
   heights is exactly what makes a grid look unfinished, and cropping is the
   only fix that survives whatever the next source hands over. */
.mbt-hot .mbt-box__body{padding:14px}
.mbt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}

.mbt-tile{position:relative;display:block;aspect-ratio:3/4.3;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-4);border:1px solid var(--line);text-decoration:none}
.mbt-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.mbt-tile:hover img{transform:scale(1.05)}
.mbt-tile:hover{border-color:var(--mbt-accent)}

/* The caption sits on the artwork, so it carries its own gradient — a pale
   cover would swallow white text without one. */
.mbt-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 8px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 35%,rgba(0,0,0,.55) 70%,transparent);
  color:#fff;display:block}
.mbt-tile__cap b{display:block;font-size:12px;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbt-tile__cap em{display:block;font-style:normal;font-size:11px;opacity:.82;margin-top:2px}

/* Pushed right and given a chip so it reads as something to press. As plain
   grey text at the end of a heading it looked like part of the label. */
.mbt-box__more{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--ink-2);background:var(--bg-4);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 13px;white-space:nowrap}
.mbt-box__more:hover{color:#fff;background:var(--mbt-accent);border-color:var(--mbt-accent)}

/* ── Latest rows ────────────────────────────────────────────────── */
/* Two columns of compact rows rather than cards: someone coming back is
   scanning for one title, and a card grid makes them read pictures to do it. */
.mbt-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.mbt-row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r-sm);
  background:var(--bg-3);min-width:0}
.mbt-row:hover{background:var(--bg-4)}
.mbt-row__art{flex:none;width:76px;aspect-ratio:3/4.3;border-radius:5px;overflow:hidden;
  background:var(--bg-4);display:block}
.mbt-row__art img{width:100%;height:100%;object-fit:cover;display:block}
.mbt-row__body{min-width:0;flex:1}
.mbt-row__title{margin:0;font-size:14.5px;font-weight:700;line-height:1.3;
  display:flex;align-items:center;gap:5px}
.mbt-row__title a{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbt-row__title a:hover{color:var(--mbt-accent)}
.mbt-row__dot{flex:none;font-size:10px}
/* A row holds up to three chapters, so the cover is aligned to the top rather
   than centred against a single line — and sized to roughly match that stack,
   because a thumbnail next to three rows of text reads as an afterthought. */
.mbt-row{align-items:flex-start}
.mbt-row__art{width:76px}

.mbt-row__chaps{list-style:none;margin:5px 0 0;padding:0;display:grid;gap:2px}
.mbt-row__chaps a{display:flex;align-items:baseline;gap:8px;padding:4px 6px;
  border-radius:var(--r-xs);text-decoration:none;font-size:12.5px;color:var(--ink-2)}
.mbt-row__chaps a:hover{background:var(--bg-2);color:var(--mbt-accent)}
.mbt-row__chaps span{font-weight:600;white-space:nowrap}
.mbt-row__chaps time{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}

/* ── Series cards (library grid) ────────────────────────────────── */
.mbt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.mbt-cards--grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.mbt-card{display:block;min-width:0}
.mbt-card__art{position:relative;display:block;width:100%;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-4);border:1px solid var(--line);aspect-ratio:3/4.3}
.mbt-card__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.mbt-card:hover .mbt-card__art img{transform:scale(1.04)}
.mbt-card:hover .mbt-card__art{border-color:var(--mbt-accent)}

.mbt-card__score{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.74);color:var(--gold);
  font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:3px}
.mbt-card__type{position:absolute;left:5px;top:5px;background:var(--mbt-accent);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:3px}

.mbt-card__body{margin-top:8px;min-width:0}
.mbt-card__title{margin:0 0 4px;font-size:13px;font-weight:700;line-height:1.35}
.mbt-card__title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.mbt-card__title a:hover{color:var(--mbt-accent)}
.mbt-card__meta{margin:0;font-size:11.5px;color:var(--ink-3)}
.mbt-card__meta a{color:var(--ink-2);text-decoration:none}
.mbt-card__none{font-size:12px;color:var(--ink-3)}

.mbt-card__chaps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mbt-card__chaps a{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r-xs);
  background:var(--bg-3);text-decoration:none;font-size:12px}
.mbt-card__chaps a:hover{background:var(--bg-4)}
.mbt-card__chaps time{margin-left:auto;color:var(--ink-3);font-size:11px;white-space:nowrap}
.mbt-new{font-style:normal;background:var(--mbt-accent);color:#fff;font-size:9px;font-weight:700;
  text-transform:uppercase;padding:1px 5px;border-radius:3px}

/* ── Hot series panel ───────────────────────────────────────────── */
.mbt-periods{margin-left:auto;display:inline-flex;background:var(--bg-4);border-radius:999px;padding:2px}
.mbt-periods__btn{border:0;background:none;cursor:pointer;color:var(--ink-3);
  font:600 11px/1 var(--sans);padding:5px 10px;border-radius:999px}
.mbt-periods__btn.is-on{background:var(--mbt-accent);color:#fff}

.mbt-hotlist{list-style:none;margin:0;padding:0;counter-reset:hot}
.mbt-hotlist[hidden]{display:none}
/* Both rails carry a cover now. 40px is the smallest a cover can be and still
   be recognisable — below that it is a coloured rectangle and the title is
   doing all the work anyway. */
.mbt-hotlist li{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.mbt-hotlist li:last-child{border-bottom:0}
.mbt-hotlist__n{flex:none;width:15px;text-align:center;font-weight:800;font-size:12px;
  color:var(--line-2);font-variant-numeric:tabular-nums}
.mbt-hotlist li:nth-child(-n+3) .mbt-hotlist__n{color:var(--mbt-accent)}

.mbt-hotlist__art,.mbt-plainlist__art{flex:none;width:40px;aspect-ratio:3/4.3;
  border-radius:4px;overflow:hidden;background:var(--bg-4);display:block;
  border:1px solid var(--line)}
.mbt-hotlist__art img,.mbt-plainlist__art img{width:100%;height:100%;object-fit:cover;display:block}
.mbt-hotlist li:hover .mbt-hotlist__art,
.mbt-plainlist li:hover .mbt-plainlist__art{border-color:var(--mbt-accent)}

.mbt-hotlist__body,.mbt-plainlist__body{min-width:0;display:flex;flex-direction:column;gap:1px}
.mbt-hotlist__body a,.mbt-plainlist__body a{font-size:12.5px;font-weight:600;text-decoration:none;
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mbt-hotlist__body a:hover,.mbt-plainlist__body a:hover{color:var(--mbt-accent)}
.mbt-hotlist__body small,.mbt-plainlist__body small{font-size:11px;color:var(--ink-3)}

.mbt-plainlist{list-style:none;margin:0;padding:0}
.mbt-plainlist li{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.mbt-plainlist li:last-child{border-bottom:0}

/* ── Rails ──────────────────────────────────────────────────────── */
.mbt-box--tight .mbt-box__body{padding:10px 14px 14px}
.mbt-box--tight .mbt-box__head{font-size:14px;display:flex;align-items:center;gap:10px}
.mbt-box--tight .mbt-box__head .mbt-linkbtn{margin-left:auto;font-size:12px}

.mbt-feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mbt-feed li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.mbt-feed li:last-child{border-bottom:0}
.mbt-feed a{text-decoration:none;min-width:0;flex:1}
.mbt-feed b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbt-feed a:hover b{color:var(--mbt-accent)}
.mbt-feed span{display:block;font-size:11.5px;color:var(--ink-3)}
.mbt-feed time{flex:none;font-size:11px;color:var(--ink-3)}

.mbt-rank{list-style:none;margin:0;padding:0;counter-reset:rank;display:grid;gap:10px}
.mbt-rank li{display:flex;align-items:center;gap:10px}
.mbt-rank__n{flex:none;width:20px;text-align:center;font-weight:800;font-size:15px;color:var(--line-2);
  font-variant-numeric:tabular-nums}
.mbt-rank li:nth-child(-n+3) .mbt-rank__n{color:var(--mbt-accent)}
.mbt-rank__art{flex:none;width:36px;aspect-ratio:3/4.3;border-radius:4px;overflow:hidden;
  background:var(--bg-4);display:block}
.mbt-rank__art img{width:100%;height:100%;object-fit:cover;display:block}
.mbt-rank__body{min-width:0}
.mbt-rank__body a{display:block;font-size:12.5px;font-weight:600;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbt-rank__body a:hover{color:var(--mbt-accent)}
.mbt-rank__body small{color:var(--ink-3);font-size:11px}

.mbt-genrelist{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.mbt-genrelist a{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px;
  border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);text-decoration:none}
.mbt-genrelist a:hover{border-color:var(--mbt-accent);color:var(--ink)}
.mbt-genrelist span{color:var(--ink-3);font-size:10.5px}

@media (max-width:1000px){
  .mbt-lib__grid{grid-template-columns:1fr}
  /* The rail stops being a rail once it is full width, and a sticky
     full-width block covers the content it is meant to sit beside. */
  .mbt-lib__side{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}
}

@media (max-width:640px){
  .mbt-tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .mbt-tile__cap b{font-size:11px}
  .mbt-rows{grid-template-columns:1fr}
  .mbt-row__art{width:64px}
  .mbt-cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .mbt-cards--grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .mbt-filters__q{flex:1 1 100%;max-width:none}
}

/* The intro paragraph sits with the other boxes but reads as prose, not as a
   panel of links — so it gets body width and body colour, not card styling. */
.mbt-intro-box{margin-top:16px}
.mbt-intro-box .mbt-box__body{border-radius:var(--r);border-top:1px solid var(--line);
  color:var(--ink-2);font-size:14.5px;line-height:1.75}
.mbt-intro-box p{margin:0;max-width:80ch}

/* Homepage intro. Muted on purpose: it earns its place with crawlers on a page
   that is otherwise covers and chapter numbers, and dressing it up to compete
   with the updates would be dishonest about what it is for. */
.mbt-intro-box{margin:16px 0 0}
.mbt-intro-box .mbt-box__body{border-radius:var(--r);border-top:1px solid var(--line);padding:16px 18px}
.mbt-intro-box p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.7;max-width:80ch}

/* ── Pager ──────────────────────────────────────────────────────── */
/* Numbers are tabular so the row does not shift width as the page changes,
   and every target is 38px because these are the easiest links on the page
   to miss on a phone. */
.mbt-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  margin:26px 0 8px}
.mbt-pager a,.mbt-pager span{display:grid;place-items:center;min-width:38px;height:38px;
  padding:0 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;text-decoration:none}
.mbt-pager a{color:var(--ink-2);background:var(--bg-3);border:1px solid var(--line)}
.mbt-pager a:hover{color:var(--ink);border-color:var(--mbt-accent)}
.mbt-pager .is-on{background:var(--mbt-accent);color:#fff;border:1px solid var(--mbt-accent)}
.mbt-pager__gap{color:var(--ink-3);background:none;border:0;min-width:auto;padding:0 2px}
.mbt-pager__step{font-weight:700}
@media (max-width:520px){
  /* Prev/Next survive; the numbers between them are the first thing to go. */
  .mbt-pager a:not(.mbt-pager__step):not(:first-child):not(:last-child){display:none}
  .mbt-pager .mbt-pager__gap{display:none}
}

/* ── Report a chapter ───────────────────────────────────────────── */
/* Quiet until needed: this sits under every chapter and should not compete
   with the comments for attention — but it has to be findable the moment
   something is wrong. */
.mbt-report{max-width:var(--max-read);margin:14px auto 0;padding:0 var(--pad);text-align:center}
.mbt-report__open{background:none;border:0;cursor:pointer;color:var(--ink-3);
  font:500 12.5px var(--sans);padding:8px 12px;border-radius:var(--r-xs)}
.mbt-report__open:hover{color:var(--ink-2);background:var(--bg-3)}
.mbt-report__panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-top:6px;text-align:left}
.mbt-report__lead{margin:0 0 10px;font-size:13.5px;font-weight:600}
.mbt-report__reasons{display:flex;flex-wrap:wrap;gap:7px}
.mbt-report__reason{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-xs);
  color:var(--ink-2);cursor:pointer;font:500 12.5px var(--sans);padding:8px 13px}
.mbt-report__reason:hover:not(:disabled){border-color:var(--mbt-accent);color:var(--ink)}
.mbt-report__reason:disabled{opacity:.5;cursor:default}
.mbt-report__note{margin:10px 0 0;font-size:11.5px;color:var(--ink-3)}
.mbt-report__done{margin:10px 0 0;font-size:13px;color:var(--ink-2)}

/* Genre links on a series page. Chips rather than plain text: they are
   navigation now, and something you can click should look like it. */
.mbt-genres a{color:inherit;text-decoration:none}
.mbt-genres a:hover{color:var(--mbt-accent)}

.mbt-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 10px;
  font-size:12.5px;color:var(--ink-3)}
.mbt-crumbs a{color:var(--ink-3);text-decoration:none}
.mbt-crumbs a:hover{color:var(--mbt-accent)}
.mbt-crumbs strong{color:var(--ink-2);font-weight:600}
.mbt-othergenres{margin-top:26px}

/* ── Logo ───────────────────────────────────────────────────────── */
/* A logo replaces the text wordmark entirely, so the brand slot stops needing
   the two-line stack and centres on one image. Height comes from the setting;
   width follows the file, capped so a wide banner cannot retake the bar. */
.mbt-brand--logo{justify-content:center;max-width:clamp(150px,24vw,340px)}
.mbt-brand__logo{display:block;width:auto;max-width:100%;object-fit:contain}

/* ── Rate this ──────────────────────────────────────────────────── */
/* The stars fill up to whatever is hovered, which is what makes the control
   read as a rating rather than five separate buttons. */
.mbt-rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.mbt-rate__label{font-size:12.5px;color:var(--ink-3)}
.mbt-rate__stars{display:inline-flex}
.mbt-star{border:0;background:none;cursor:pointer;padding:0 2px;line-height:1;
  font-size:22px;color:var(--line-2);transition:color .12s,transform .12s}
.mbt-star:hover{transform:scale(1.15)}
.mbt-star.is-on{color:var(--gold)}
/* Hovering a star lights it and every star before it — done with a reversed
   row so plain CSS can reach the earlier siblings. */
.mbt-rate__stars:hover .mbt-star{color:var(--gold)}
.mbt-rate__stars .mbt-star:hover ~ .mbt-star{color:var(--line-2)}
.mbt-star:focus-visible{outline:2px solid var(--mbt-accent);outline-offset:2px;border-radius:3px}
.mbt-rate__msg{font-size:12px;color:var(--ink-3)}

/* ── Discord ────────────────────────────────────────────────────── */
/* Discord's own blurple rather than the site accent: readers recognise the
   colour before they read the word, and that recognition is the whole reason
   the button is in the header instead of the footer. */
.mbt-discord{display:inline-flex;align-items:center;gap:8px;flex:none;
  background:#5865f2;color:#fff;text-decoration:none;
  border-radius:999px;padding:9px 16px;font:700 13px var(--sans);white-space:nowrap}
.mbt-discord:hover{filter:brightness(1.1);color:#fff}
.mbt-discord svg{flex:none}

/* ── How the header gives up space ──────────────────────────────────
   Eight things want room in one bar: wordmark, menu, Discord, search field,
   search icon, account, history, theme. Left to fight it out they overlap,
   which is what "Privacy PolicyMore" was.

   So the order they surrender is written down rather than emergent. Least
   useful first, and nothing that can only be reached one way ever disappears:

     1240  Create account  — Sign in opens the same modal, which has a register tab
     1100  Discord label   — the mark is recognisable without the words
      980  History icon    — the same list is on the bookmarks page
      900  Account label   — the icon still opens the modal
      640  Search field    — moves to its own row behind the magnifier
      900  Menu            — becomes a panel behind the burger
*/
@media (max-width:1240px){
  .mbt-account--up{display:none}
}
@media (max-width:1100px){
  .mbt-discord__text{display:none}
  .mbt-discord{padding:9px 11px}
}
@media (max-width:980px){
  #mbt-history-btn{display:none}
}

/* ── Account ────────────────────────────────────────────────────── */
.mbt-account{display:inline-flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  border-radius:999px;padding:8px 14px;font:600 12.5px var(--sans);
  text-decoration:none;white-space:nowrap}
.mbt-account:hover{color:var(--ink);border-color:var(--mbt-accent)}
/* Create account is the one that should look like the offer. */
.mbt-account--up{background:var(--mbt-accent);border-color:var(--mbt-accent);color:#fff}
.mbt-account--up:hover{color:#fff;filter:brightness(1.08)}
.mbt-account__badge{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--mbt-accent);color:#fff;font-weight:800;font-size:11px}

@media (max-width:900px){
  .mbt-account__text{display:none}
  .mbt-account{padding:8px 10px}
}