/* ═══════════════════════════════════════════════════════════════════
   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 ─────────────────────────────────────────────────────── */

.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}
.mbt-head__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  min-height:56px;display:flex;align-items:center;gap:16px}

.mbt-brand{display:flex;flex-direction:column;text-decoration:none;flex:none;line-height:1.15}
.mbt-brand__name{font-size:16px;font-weight:800;letter-spacing:-.02em}
/* 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:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}

/* ── 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. */
.mbt-nav{display:flex;align-items:center;flex:1;min-width:0}
.mbt-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none}
.mbt-nav__list::-webkit-scrollbar{display:none}
.mbt-nav__list li{position:relative;flex:none}
.mbt-nav__list a{display:inline-flex;align-items:center;padding:7px 12px;border-radius:var(--r-xs);
  font-size:13.5px;font-weight:500;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 somebody using a
   menu as a sitemap. */
.mbt-nav__list .sub-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:5px;list-style:none;margin:0;
  display:none;flex-direction:column;z-index:20}
.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%}

.mbt-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:34px;padding:0 8px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer}
.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)}

.mbt-head__tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.mbt-search{display:flex;align-items:stretch;background:var(--bg-4);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.mbt-search input{width:150px;background:none;border:0;color:var(--ink);font:13px var(--sans);padding:7px 11px}
.mbt-search input:focus{outline:none}
.mbt-search input::placeholder{color:var(--ink-3)}
.mbt-search button{flex:none;width:34px;display:grid;place-items:center;border:0;cursor:pointer;
  background:var(--mbt-accent);color:#fff}
.mbt-icon{display:grid;place-items:center;width:34px;height:34px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-size:18px;line-height:1}
.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:14px 18px;font-size:15px;font-weight:700}
.mbt-box__head small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:3px}
.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}
.mbt-page img{display:block;width:100%;height:auto}
/* Hotlinked pages carry no stored dimensions. A typical page ratio stops them
   collapsing to zero height and shoving the layout as they load; any image
   that does have width/height overrides this with its real ratio. */
.mbt-page img:not([width]){aspect-ratio:2/3;object-fit:contain}
/* 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}
  .mbt-search input{width:112px}
}

@media (max-width:640px){
  .mbt-head__in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:10px}
  .mbt-burger{display:flex}
  /* Below this width the menu is a panel, not a row — a horizontally
     scrolling nav hides its own items and nobody scrolls it. */
  .mbt-nav{order:3;width:100%;display:none}
  .mbt-nav.is-open{display:block}
  .mbt-nav__list{flex-direction:column;align-items:stretch;gap:0;overflow:visible;
    border-top:1px solid var(--line);padding-top:6px}
  .mbt-nav__list a{padding:11px 4px}
  .mbt-nav__list .sub-menu{position:static;display:flex;box-shadow:none;border:0;
    background:transparent;padding:0 0 0 14px}
  .mbt-head__tools{margin-left:auto}
  .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)}