:root{
  /* Reader defaults */
  --mmr-reader-bg: var(--bg, #ffffff);
  --mmr-reader-fg: var(--text, rgba(0,0,0,1));
  --mmr-reader-size: 18px;
  --mmr-reader-line: 1.9;
  --mmr-reader-word: 0px;
  --mmr-reader-font: 'Cairo', sans-serif;
  --mmr-reader-weight: 400;
  --mmr-reader-align: right;
  --mmr-reader-dir: rtl;

  /* Panel defaults */
  --mmr-panel-bg: var(--surface);
  --mmr-panel-fg: var(--text);
  --mmr-panel-border: var(--border);
  --mmr-panel-muted: var(--muted);
  --mmr-panel-card: var(--btn-bg-2);
  /* On desktop we cap the sheet to the chapter text width (JS updates this). */
  --mmr-panel-max-width: 640px;
  --mmr-accent: #ec3649; /* theme main red */
}


/* Force full-viewport background (including side gutters) to follow reader background.
   We MUST beat the theme rule: body.wp-theme-theam-app { background: var(--bg) !important; } */
html[data-theme]{
  background: var(--mmr-reader-bg) !important;
}

/* Keep the site header (app-header) using the theme background.
   The reader background should NOT tint the header area. */
body.single-wp-manga .app-header,
body.reading-manga .app-header,
body.reading-manga.single-wp-manga .app-header{
  background: var(--bg) !important;
  backdrop-filter: blur(12px) !important;
}

/* The app reader shells are full-width; make sure their gutters follow the reader background too. */
body.single-wp-manga .app-container.app-reader,
body.single-wp-manga .app-reader,
body.single-wp-manga .app-reader .read-container{
  background: var(--mmr-reader-bg) !important;
}


/* Highest specificity for Theam App theme body classes */
body.wp-theme-theam-app.reading-manga,
body.theam-app.reading-manga,
body.reading-manga{
  background: var(--mmr-reader-bg) !important;
}

/* IMPORTANT: Desktop "gutters" are the background of .app-main (the centered shell).
   The theme sets .app-main { background: var(--bg); } so we must override it here
   to make the whole page (right/left sides) match the selected reader background. */
body.reading-manga .app-main,
body.reading-manga.single-wp-manga .app-main,
body.reading-manga.wp-manga-template-default .app-main,
body.wp-theme-theam-app.reading-manga .app-main{
  background: var(--mmr-reader-bg) !important;
}

/* Some hosts/themes wrap everything in extra shells; keep them synced too */
body.wp-theme-theam-app.reading-manga #page,
body.wp-theme-theam-app.reading-manga #content,
body.wp-theme-theam-app.reading-manga #main,
body.wp-theme-theam-app.reading-manga .site,
body.wp-theme-theam-app.reading-manga .site-content,
body.wp-theme-theam-app.reading-manga .app-container,
body.wp-theme-theam-app.reading-manga .app-reader,
body.wp-theme-theam-app.reading-manga .read-container{
  background: var(--mmr-reader-bg) !important;
}

/* Apply reader settings only on reading pages */
body.reading-manga .reading-content,
body.reading-manga #oneshot-reader{
  background: var(--mmr-reader-bg) !important;
}

/* Prevent white flash between chapters by also matching the page background */
body.reading-manga,
body.reading-manga #main,
body.reading-manga .site-content{
  background: var(--mmr-reader-bg) !important;
}

body.reading-manga .reading-content .text-left,
body.reading-manga .reading-content .text-right,
body.reading-manga .reading-content .text-center{
  background: var(--mmr-reader-bg) !important;
  color: var(--mmr-reader-fg) !important;
  font-family: var(--mmr-reader-font) !important;
  font-size: var(--mmr-reader-size) !important;
  line-height: var(--mmr-reader-line) !important;
  word-spacing: var(--mmr-reader-word) !important;
  font-weight: var(--mmr-reader-weight) !important;
  text-align: var(--mmr-reader-align) !important;
  direction: var(--mmr-reader-dir) !important;
  unicode-bidi: plaintext;
  /* Keep Madara layout/padding as-is (reading-content already has padding) */
  padding: 0 !important;
  border-radius: 0 !important;
}


/* Ensure chapter title follows reader direction/alignment immediately (prevents left->right flicker). */
body.reading-manga #chapter-heading{
  direction: var(--mmr-reader-dir) !important;
  text-align: var(--mmr-reader-align) !important;
  unicode-bidi: plaintext;
}

/* Reader top bar header must be right-aligned in Arabic/RTL (keeps it on the right side, not stuck near the back button). */
body.reading-manga .reader-head{
  flex: 1 !important;
  text-align: right !important;
  direction: rtl !important;
  align-items: flex-end !important;
}
body.reading-manga .reader-manga,
body.reading-manga .reader-chapter{
  width: 100% !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext;
}

/* Ensure inner text inherits */
body.reading-manga .reading-content .text-left *,
body.reading-manga .reading-content .text-right *,
body.reading-manga .reading-content .text-center *{
  color: inherit !important;
}

/* Hide Madara default text toolbar (gear) to avoid duplication */
body.reading-manga #text-chapter-toolbar{display:none !important;}

/* Hide Madara built-in next/prev buttons (we use the bottom panel) */
body.reading-manga .entry-header .select-pagination .nav-links,
body.reading-manga .c-select-bottom .select-pagination .nav-links{
  display: none !important;
}

/* Prevent background flash between chapters */
html, body{ background: var(--mmr-reader-bg) !important; }


/* === SVG Icons === */
.mmr-ico{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.mmr-icon-btn .mmr-ico{
  pointer-events: none;
}


.mmr-btn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mmr-tabbtn{
  display: flex;
  align-items: center;
  justify-content: center;
}

.mmr-ico-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 6px;
}

.mmr-thumb--placeholder .mmr-ico{
  width: 20px;
  height: 20px;
}
/* === Bottom Panel === */
.mmr-panel{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  pointer-events: none;
}

.mmr-panel.mmr-panel--open{
  pointer-events: auto;
}

.mmr-panel__sheet{
  position: relative;
  height: auto;
  max-height: 50vh;
  min-height: 260px;
  background: var(--mmr-panel-bg);
  color: var(--mmr-panel-fg);
  border-top: 1px solid var(--mmr-panel-border);
  border-radius: 14px 14px 0 0;
  transform: translateY(105%);
  transition: transform 180ms ease;
  box-shadow: 0 -18px 40px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  direction: rtl;
  text-align: right;
}

/* Desktop: keep the sheet width aligned with the chapter text box (instead of full-screen wide). */
@media (min-width: 768px){
  .mmr-panel__sheet{
  position: relative;
    width: 100%;
    max-width: var(--mmr-panel-max-width, 640px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* For lightweight tabs (📖 + ⚠️) we want the panel to hug its content (no big empty gap). */
.mmr-panel--tight .mmr-panel__sheet{
  position: relative;
  min-height: 0;
}
.mmr-panel--tight .mmr-panel__content{
  flex: 0;
  overflow: visible;
  padding-bottom: 8px;
}

.mmr-panel__header{
  position: relative;
  display: block;
  padding: 10px 12px 6px;
  min-height: 44px;
}

/* When the active tab hides the reset button (📖 + ⚠️), we collapse the header
   so it doesn't leave an empty strip at the top of the panel. */
.mmr-panel--compact-header .mmr-panel__header{
  padding: 0;
  min-height: 0;
  height: 0;
}

.mmr-panel__header-spacer{display:block;}

.mmr-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 18px;
  line-height: 1;
}

.mmr-icon-btn:active{transform: scale(0.98);}

.mmr-icon-btn--reset{
  /* Reset button (centered) */
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);

  width: 44px;
  height: 34px;
  padding: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Light blue to make it clearly a reset action */
  color: #38bdf8;
  border-color: rgba(56,189,248,0.55);
  background: rgba(56,189,248,0.16);
  font-weight: 900;

  touch-action: manipulation;
}

.mmr-icon-btn--reset:hover{
  background: rgba(56,189,248,0.22);
}

.mmr-icon-btn--reset:focus{
  border-color: rgba(56,189,248,0.75);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.20);
}

.mmr-icon-btn--reset:active{transform: translateX(-50%) scale(0.98);}


/* Hide the close arrow when the panel is closed (only show the opener FAB) */
.mmr-panel:not(.mmr-panel--open) .mmr-icon-btn--collapse{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mmr-icon-btn--collapse{
  /* Floating close button (centered ABOVE the panel) */
  position: absolute;
  left: 50%;
  top: -48px; /* outside the panel */
  transform: translateX(-50%);

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: 900;
  line-height: 1;

  background: var(--mmr-panel-bg);
  color: var(--mmr-panel-fg);
  border: 1px solid var(--mmr-panel-border);

  box-shadow:
    0 14px 28px rgba(0,0,0,0.22),
    0 2px 6px rgba(0,0,0,0.18);

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
  z-index: 25;
}

.mmr-icon-btn--collapse:hover{
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.26),
    0 4px 10px rgba(0,0,0,0.18);
}

.mmr-icon-btn--collapse:focus{
  border-color: rgba(236,54,73,0.70);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.26),
    0 4px 10px rgba(0,0,0,0.18),
    0 0 0 4px rgba(236,54,73,0.22);
}

.mmr-icon-btn--collapse:active{
  transform: translateX(-50%) translateY(0) scale(0.96);
  filter: brightness(0.98);
}

.mmr-panel--open .mmr-panel__sheet{
  position: relative;
  transform: translateY(0);
}

.mmr-panel__content{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 0;
}

.mmr-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mmr-row--nav{
  justify-content: space-between;
}

.mmr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--mmr-panel-card);
  border: 1px solid var(--mmr-panel-border);
  color: var(--mmr-panel-fg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  min-width: 88px;

  /* Make taps feel instant on mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mmr-btn:active{transform: scale(0.98);}

.mmr-progress{
  /* Progress should read like clean text on the panel (no badge/box). */
  text-align: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  /* Keep layout stable between (السابق/التالي). */
  min-width: 92px;
}

.mmr-progress__fraction{
  font-weight: 700;
  font-size: 14px;
}

.mmr-progress__percent{
  margin-top: 2px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
}

.mmr-row--cards{
  justify-content: space-between;
}

.mmr-row--actions{
  justify-content: space-between;
  align-items: center;
  /* Keep the same spacing as the cards row so widths match exactly */
  gap: 8px;
}

/* Actions row (المفضلة + تغيير الكلمات):
   Make them the same size as the main cards row (صفحة الرواية + قائمة الفصول). */
.mmr-row--actions > .mmr-card,
.mmr-row--actions > .mmr-fav--mini{
  flex: 1 1 0;
  min-width: 0;
}

.mmr-row--actions > .mmr-fav--mini{
  width: auto; /* override the mini button auto sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
  min-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mmr-card{
  min-height: 48px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 14px;
  background: var(--mmr-panel-card);
  border: 1px solid var(--mmr-panel-border);
  color: var(--mmr-panel-fg);
  text-decoration: none;
  font-size: 14px;
}

.mmr-card button{all: unset;}

.mmr-thumb{
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 auto;
}

.mmr-thumb--placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
}

.mmr-card__icon{
  /* Make the chapters card the same height as the manga page card */
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.mmr-row--center{
  justify-content: center;
  flex-direction: column;
}

.mmr-fav{
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(236,54,73,0.18);
  border: 1px solid rgba(236,54,73,0.45);
  color: var(--mmr-panel-fg);
  font-weight: 700;
}

.mmr-fav--mini{
  width: auto;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Secondary button style (used for: "التعليقات / التفاعلات") */
.mmr-fav.mmr-fav--social{
  background: rgba(255,255,255,0.06);
  border-color: var(--mmr-panel-border);
  font-weight: 800;
}

.mmr-fav:active{transform: scale(0.99);}

.mmr-fav-hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
  text-align: right;
}

/* Word Replacer */
.mmr-wr-hint{
  font-size: 12px;
  color: var(--mmr-panel-muted);
  margin-bottom: 10px;
}

.mmr-wr-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.mmr-wr-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
}

.mmr-wr-item__texts{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mmr-wr-item__from{font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mmr-wr-item__to{color: var(--mmr-panel-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.mmr-wr-item__del{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 6px 8px;
  flex: 0 0 auto;
}

.mmr-wr-form{margin-top: 8px; margin-bottom: 8px;}
.mmr-wr-form__row{margin-bottom: 8px;}
.mmr-wr-form__actions{display: flex; gap: 8px;}

.mmr-wr-actions{display: flex; gap: 8px; margin-top: 6px;}

.mmr-wr-btn{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
}

.mmr-wr-btn--primary{
  background: rgba(14,165,233,0.18);
  border-color: rgba(14,165,233,0.45);
}

.mmr-wr-btn--add{flex: 1;}

.mmr-wr-btn--danger{
  background: rgba(236,54,73,0.18);
  border-color: rgba(236,54,73,0.45);
}

.mmr-wr-note{margin-top: 10px; font-size: 12px; color: var(--mmr-panel-muted);}

/* Tabs */
.mmr-panel__tabs{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.12);
}

.mmr-tabbtn{
  flex: 1;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
}

.mmr-tabbtn[aria-selected="true"]{
  outline: none;
  border-color: rgba(236,54,73,0.7);
  box-shadow: 0 0 0 2px rgba(236,54,73,0.25);
}

/* Settings */
.mmr-setting{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

.mmr-setting__title{
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 8px;
}

.mmr-setting__controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mmr-step{
  min-width: 46px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.18);
  color: var(--mmr-panel-fg);
  font-weight: 700;
}

.mmr-setting__value{
  flex: 1;
  text-align: center;
}

.mmr-setting__range{
  display: block;
  font-size: 11px;
  color: var(--mmr-panel-muted);
  margin-top: 2px;
}

.mmr-pill-group{
  display: flex;
  gap: 8px;
}

.mmr-pill{
  flex: 1;
  padding: 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.18);
  color: var(--mmr-panel-fg);
  font-weight: 700;
  font-size: 12px;
}

.mmr-pill[aria-pressed="true"]{
  border-color: rgba(236,54,73,0.7);
  background: rgba(236,54,73,0.18);
}

.mmr-reset{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  font-weight: 700;
}

/* Fonts list */
.mmr-fonts{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mmr-font{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

.mmr-font[aria-selected="true"]{
  border-color: rgba(236,54,73,0.7);
  box-shadow: 0 0 0 2px rgba(236,54,73,0.25);
}

.mmr-font__sample{
  font-size: 14px;
  line-height: 1.6;
}

.mmr-font__label{
  margin-top: 6px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
}

/* Backgrounds */
.mmr-bgs{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mmr-bg{
  border-radius: 14px;
  border: 1px solid var(--mmr-panel-border);
  overflow: hidden;
  cursor: pointer;
}

.mmr-bg[aria-selected="true"]{
  outline: none;
  border-color: rgba(236,54,73,0.8);
  box-shadow: 0 0 0 2px rgba(236,54,73,0.25);
}

.mmr-bg__inner{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.mmr-bg__label{
  padding: 6px 8px;
  font-size: 12px;
  text-align: center;
  background: rgba(0,0,0,0.18);
}

/* Chapters modal */
.mmr-modal{
  position: fixed;
  inset: 0;
  z-index: 1000000;

  display: none;
}
/* Ensure the Word Replace color palette appears above the Word Replace sheet */
#mmr-word-replace{ z-index: 1000001; }
#mmr-wr-colors{ z-index: 1000002; }


.mmr-modal--open{display:block;}

.mmr-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.mmr-modal__sheet{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  background: var(--mmr-panel-bg);
  color: var(--mmr-panel-fg);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--mmr-panel-border);
  display: flex;
  flex-direction: column;
  direction: rtl;
  text-align: right;
}

.mmr-modal__search{
  padding: 0 12px 12px;
}

.mmr-input{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  outline: none;
}

.mmr-input::placeholder{color: var(--mmr-panel-muted);}

.mmr-modal__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mmr-panel-border);
}

.mmr-modal__title{font-weight: 900;}

.mmr-modal__close{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 6px 8px;
}

.mmr-modal__body{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 14px;
}

/* Word Replace modal */
.mmr-wr-hint{
  font-size: 13px;
  color: var(--mmr-panel-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.mmr-wr-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.mmr-wr-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
}

.mmr-wr-item__text{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mmr-wr-pill{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.12);
  color: var(--mmr-panel-fg);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.mmr-wr-arrow{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--mmr-panel-border);
  flex: 0 0 auto;
}

.mmr-wr-del{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 6px 8px;
  flex: 0 0 auto;
}

.mmr-wr-form__actions{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.mmr-wr-actions{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.mmr-wr-btn{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
}

.mmr-wr-btn--primary{
  background: rgba(58,134,255,0.18);
  border-color: rgba(58,134,255,0.45);
}

.mmr-wr-btn--danger{
  background: rgba(236,54,73,0.16);
  border-color: rgba(236,54,73,0.45);
}

.mmr-wr-btn--add{
  flex: 1;
}

.mmr-wr-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
}

/* Word replace: per-term smart mode */
.mmr-wr-smart{ margin-top: 6px; }
.mmr-wr-smart__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mmr-wr-smart__label{
  font-weight: 800;
  font-size: 13px;
}
.mmr-wr-smart__hint{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mmr-panel-muted);
}

.mmr-wr-switch{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.08);
  position: relative;
  cursor: pointer;
}
.mmr-wr-switch::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mmr-panel-fg);
  opacity: 0.85;
  transition: left .18s ease;
}
.mmr-wr-switch[aria-pressed="true"]{
  background: rgba(14,165,233,0.18);
  border-color: rgba(14,165,233,0.45);
}
.mmr-wr-switch[aria-pressed="true"]::after{ left: 21px; }
.mmr-wr-switch:active{ transform: translateY(1px); }

.mmr-chapter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  text-decoration: none;
  margin-bottom: 8px;
}

.mmr-chapter[aria-current="true"]{
  border-color: rgba(236,54,73,0.7);
  box-shadow: 0 0 0 2px rgba(236,54,73,0.25);
}

.mmr-empty{
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--mmr-panel-border);
  background: rgba(255,255,255,0.04);
  color: var(--mmr-panel-muted);
}

.mmr-chapter__title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mmr-chapter__meta{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mmr-chapter__comments{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
  opacity: 0.95;
}

.mmr-chapter__comments-icon svg{
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: currentColor;
}

.mmr-chapter__comments-num{
  font-variant-numeric: tabular-nums;
}


/* Small screens tweaks */
@media (max-width: 420px){
  .mmr-btn{min-width: 90px; padding: 10px 10px;}
}


.mmr-btn__icon--prev{
  display:inline-block;
  transform: scaleX(-1);
}

.mmr-fab{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 999998;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.25);
  color: var(--mmr-panel-fg);
  border-radius: 999px;
  width: 42px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 0.35;
}
.mmr-fab:hover{opacity: 0.7;}
.mmr-fab:active{transform: translateX(-50%) scale(0.98);}
.mmr-panel.mmr-panel--open ~ .mmr-fab{display:none;}

.mmr-panel.mmr-panel--open ~ .mmr-fab{display:none;}


/* === Settings (gear tab) === */
.mmr-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mmr-panel-border);
  border-radius: 16px;
  background: var(--mmr-panel-card);
  margin-bottom: 10px;
}
.mmr-opt__label{
  font-size: 14px;
  line-height: 1.4;
  color: var(--mmr-panel-fg);
}
.mmr-opt__btn{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.08);
  color: var(--mmr-panel-fg);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.mmr-opt__btn[aria-pressed="false"]{
  opacity: 0.75;
}

/* Make close button comfortable on small screens */
@media (max-width: 420px){
  .mmr-icon-btn--collapse{
    width: 48px;
    height: 48px;
    top: -54px;
    font-size: 22px;
  }
}

/* Reduce scroll anchoring surprises when changing font size */
body.reading-manga .reading-content,
body.reading-manga .reading-content .text-left,
body.reading-manga .reading-content .text-right,
body.reading-manga .reading-content .text-center{
  overflow-anchor: none;
}

/* Auto Scroll Clock */
.mmr-clock{
  position: fixed;
  z-index: 25;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  touch-action: manipulation;
}

.mmr-clock:active{
  transform: scale(0.96);
}

.mmr-clock-pop{
  position: fixed;
  z-index: 10000005;
  right: 14px;
  bottom: 62px;
  width: min(320px, calc(100vw - 28px));
  background: var(--mmr-panel-bg);
  color: var(--mmr-panel-fg);
  border: 1px solid var(--mmr-panel-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

.mmr-clock-pop__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.mmr-clock-pop__label{
  font-size: 13px;
  opacity: .92;
  line-height: 1.2;
}

.mmr-clock-pop__ctrl{
  display:flex;
  align-items:center;
  gap: 8px;
}

.mmr-clock-pop__val{
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}

.mmr-step--mini{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.mmr-pill--wide{
  width: 100%;
  justify-content: center;
}

.mmr-clock-pop__row--btn{
  padding-top: 10px;
}


/* Ensure clock doesn't overlay the panel */
body.mmr-panel-open .mmr-clock,
body.mmr-panel-open .mmr-clock-pop{
  display: none !important;
}


/* ---------- Custom Colors (new) ---------- */
.mmr-custom{
  /* This lives inside a 2-column grid (.mmr-bgs). Make it span both columns and center it. */
  grid-column: 1 / -1;
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--mmr-panel-border);
}

.mmr-custom__head{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom: 10px;
}

.mmr-custom__title{
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
}

.mmr-custom__toggle{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(14,165,233,0.10);
  color: #0ea5e9;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.mmr-custom__toggle[aria-pressed="true"]{
  background: rgba(14,165,233,0.18);
}
.mmr-custom__toggle:active{ transform: translateY(1px); }

.mmr-custom__row{
  display:flex;
  gap:10px;
  justify-content:center;
}
.mmr-custom__btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border: 1px solid var(--mmr-panel-border);
  background: var(--mmr-panel-card);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
}
.mmr-custom__btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.mmr-custom__dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--mmr-panel-border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  display:inline-block;
}

.mmr-custom__hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--mmr-panel-muted);
}

.mmr-bg--disabled{
  opacity: 0.45;
}

/* Colors modal */
.mmr-modal__sheet--colors{
  height: auto;
  max-height: 55vh;
}

.mmr-colors-grid{
  padding: 14px 14px 18px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 520px){
  .mmr-colors-grid{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

@media (min-width: 820px){
  .mmr-colors-grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (max-width: 480px){
  .mmr-colors-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.mmr-color-dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mmr-panel-border);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  position: relative;
}
.mmr-color-dot:active{ transform: scale(0.98); }
.mmr-color-dot.is-selected{
  outline: 2px solid rgba(14,165,233,0.9);
  outline-offset: 2px;
}
.mmr-color-dot.is-selected::after{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.9);
  mix-blend-mode: overlay;
}


/* Infinite scroll chapter separators */
body.reading-manga .mmr-inf-title{
margin: 18px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(127,127,127,0.12);
  color: var(--mmr-reader-fg) !important;
  font-family: var(--mmr-reader-font) !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;
  direction: rtl;
  unicode-bidi: plaintext;
}


body.reading-manga .mmr-infinite-status{
  text-align: center;
  padding: 14px 10px;
  font-size: 14px;
  opacity: 0.85;
}

body.reading-manga .mmr-infinite-sentinel{
  width: 100%;
  height: 1px;
}

/* Lightweight toast used for in-page next/prev loading (no full reload). */
body.reading-manga .mmr-nav-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 118px;
  z-index: 999999;
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

body.reading-manga .mmr-inf-anchor{
  width: 1px;
  height: 1px;
}


/* Social (Reactions + Comments) integration */
.mmr-social-mini{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

.mmr-social-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.mmr-social-chip:active{ transform: scale(0.99); }

.mmr-social-label{ opacity: 0.92; }

.mmr-social-count{
  color: #ef4444;
  font-weight: 900;
  min-width: 16px;
  text-align:center;
}

.mmr-social-end{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin: 16px 0 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(127,127,127,0.25);
}

body.reading-manga .mmr-social-end .mmr-social-chip{
  background: rgba(127,127,127,0.10);
  border-color: rgba(127,127,127,0.25);
  font-size: 14px;
  padding: 10px 14px;
}

body.reading-manga .mmr-social-end .mmr-social-count{ font-size: 14px; }

.mmr-modal--social .mmr-modal__sheet{ height: 86vh; }

/* Social modal: on-demand loading overlay */
.mmr-modal--social #mmr-social-body{ position: relative; }

.mmr-social-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 5;
}

.mmr-social-loading__inner{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.10);
  color: var(--mmr-panel-fg);
  font-weight: 800;
  text-align: center;
}

/* Force Novel Comments widget to match our panel colors inside the social modal */
#mmr-social .nvc{
  margin-top: 0 !important;
  background: var(--mmr-panel-bg) !important;
  color: var(--mmr-panel-fg) !important;
  border: 1px solid var(--mmr-panel-border) !important;
  border-radius: 16px !important;
  --nvc-bg: var(--mmr-panel-bg) !important;
  --nvc-text: var(--mmr-panel-fg) !important;
  --nvc-muted: var(--mmr-panel-muted) !important;
  --nvc-border: var(--mmr-panel-border) !important;
  --nvc-line: rgba(127,127,127,0.35) !important;
  --nvc-card-bg: rgba(255,255,255,0.06) !important;
  --nvc-card-bg-alt: rgba(255,255,255,0.04) !important;
  --nvc-link: rgba(255,255,255,0.92) !important;
}

#mmr-social .nvc a{ color: rgba(255,255,255,0.92) !important; }
#mmr-social .nvc .nvc-reactions{ background: transparent !important; }

/* Markazz: in night mode, keep comments widget background true black (#000000). */
html[data-theme='night'] #mmr-social .nvc,
html[data-theme='night'] .mmr-comments-panel .nvc{
  background: var(--bg) !important;
  --nvc-bg: var(--bg) !important;
}


/* Inline comments/reactions at end of chapter (lazy on open) */
.mmr-comments-panel{
  max-width: var(--mmr-panel-max-width, 720px);
  margin: 16px auto 6px;
  border: 1px solid var(--mmr-panel-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  overflow: hidden;
}
html[data-theme='day'] .mmr-comments-panel,
html[data-theme='paper'] .mmr-comments-panel{
  background: rgba(0,0,0,0.04);
}

.mmr-comments-toggle{
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}

.mmr-comments-body{
  position: relative;
  padding: 12px;
  border-top: 1px solid rgba(127,127,127,0.25);
}

.mmr-comments-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 5;
}

.mmr-comments-loading__inner{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.10);
  color: var(--mmr-panel-fg);
  font-weight: 800;
  text-align: center;
}

/* Force Novel Comments widget to match our reader panel colors when rendered inline */
.mmr-comments-panel .nvc{
  margin-top: 0 !important;
  background: var(--mmr-panel-bg) !important;
  color: var(--mmr-panel-fg) !important;
  border: 1px solid var(--mmr-panel-border) !important;
  border-radius: 16px !important;
  --nvc-bg: var(--mmr-panel-bg) !important;
  --nvc-text: var(--mmr-panel-fg) !important;
  --nvc-muted: var(--mmr-panel-muted) !important;
  --nvc-border: var(--mmr-panel-border) !important;
  --nvc-line: rgba(127,127,127,0.35) !important;
  --nvc-card-bg: rgba(255,255,255,0.06) !important;
  --nvc-card-bg-alt: rgba(255,255,255,0.04) !important;
  --nvc-link: rgba(255,255,255,0.92) !important;
}

.mmr-comments-panel .nvc a{ color: rgba(255,255,255,0.92) !important; }
.mmr-comments-panel .nvc .nvc-reactions{ background: transparent !important; }

/* Night mode readability:
   Translator/Author + VIP 3 have gold/light highlight backgrounds.
   In night mode, force their comment text to black so it doesn't disappear.
   Keep reply/editor inputs using the default panel colors.
*/
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-meta,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-body,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-body *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-response-link,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-meta,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-body,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-body *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-response-link{
  color: #000 !important;
}

/* Night mode: ensure author/VIP3 name text is also black on gold backgrounds (better contrast). */
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-author,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-author *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-author,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-author *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-meta *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-author,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-author *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-author,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-author *{
  color: #000 !important;
}

/* Ensure reply/editor fields stay readable (they use panel colors). */
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-reply-box,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-reply-box,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-reply-box,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-reply-box,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-reply-box *,
html[data-theme='night'] .mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-reply-box *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-author .nvc-reply-box *,
html[data-theme='night'] #mmr-social .nvc .nvc-comment.rank-vip3 .nvc-reply-box *{
  color: var(--nvc-text) !important;
}


/* Inline settings trigger (verification + accessibility) */
.mmr-inline-settings{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:10px 0;border-radius:12px;background:rgba(255,255,255,.06);}
html[data-theme='day'] .mmr-inline-settings{background:rgba(0,0,0,.05);} 
html[data-theme='paper'] .mmr-inline-settings{background:rgba(0,0,0,.04);} 
.mmr-gear-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;}
html[data-theme='day'] .mmr-gear-btn,html[data-theme='paper'] .mmr-gear-btn{border-color:rgba(0,0,0,.15);} 
.mmr-gear-btn svg{width:22px;height:22px;}
.mmr-inline-settings__label{font-weight:600;opacity:.95;}


/* === Word Replace enhancements (edit + color + highlight) === */
.mmr-wr-item__actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.mmr-wr-edit, .mmr-wr-color{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 6px 8px;
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mmr-wr-color-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(0,0,0,0.15);
}

.mmr-wr-edit:active, .mmr-wr-color:active, .mmr-wr-del:active{
  transform: scale(0.98);
}

.mmr-wr-mark{
  font-weight: 800;
  padding: 0 3px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* No-color button inside the word color palette */
.mmr-color-dot.mmr-wr-nocolor{
  background: rgba(255,255,255,0.06) !important;
  color: var(--mmr-panel-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  font-weight: 900;
}


/* === Word Replace: scopes (tabs) + quota + tools === */
.mmr-wr-tabs{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.mmr-wr-tab{
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  line-height: 1.2;
}

.mmr-wr-tab[aria-selected="true"]{
  background: rgba(58,134,255,0.18);
  border-color: rgba(58,134,255,0.45);
}

.mmr-wr-status{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}

.mmr-wr-usage{
  font-size: 12px;
  color: var(--mmr-panel-muted);
  font-weight: 800;
}

.mmr-wr-buy{
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--mmr-panel-fg);
  border-radius: 12px;
  padding: 7px 10px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.mmr-wr-buy:active{
  transform: scale(0.99);
}

.mmr-wr-buy[aria-disabled="true"]{
  opacity: 0.55;
  pointer-events: none;
}

.mmr-wr-tools{
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--mmr-panel-border);
  background: rgba(255,255,255,0.04);
}

.mmr-wr-tools__info{
  font-size: 12px;
  color: var(--mmr-panel-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}

.mmr-wr-tools__actions{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}

.mmr-wr-tools__actions .mmr-wr-btn{
  flex: 1 1 0;
  min-width: 0;
}


/* === Reader panel/mobile overflow hardening ===
   Fixes rare device-specific cases where the TT panel can overflow/crop on the right
   after changing reading text settings (font size / spacing / browser text inflation). */
body.reading-manga,
body.reading-manga .app-container.app-reader,
body.reading-manga .read-container,
body.reading-manga .reading-content,
body.reading-manga .reading-content .text-left,
body.reading-manga .reading-content .text-right,
body.reading-manga .reading-content .text-center,
body.reading-manga #mmr-panel,
body.reading-manga #mmr-panel *{
  box-sizing: border-box;
}

html,
body.reading-manga,
body.reading-manga #mmr-panel{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.reading-manga .app-container.app-reader,
body.reading-manga .read-container,
body.reading-manga .reading-content,
body.reading-manga .reading-content .text-left,
body.reading-manga .reading-content .text-right,
body.reading-manga .reading-content .text-center{
  width: 100%;
  max-width: 100%;
}

body.reading-manga .reading-content .text-left,
body.reading-manga .reading-content .text-right,
body.reading-manga .reading-content .text-center{
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.reading-manga #mmr-panel{
  width: auto;
  max-width: 100vw;
  overflow-x: clip;
}

body.reading-manga #mmr-panel .mmr-panel__sheet{
  width: 100%;
  max-width: 100vw;
  margin: 0;
  overflow-x: hidden;
}

body.reading-manga #mmr-panel .mmr-panel__content,
body.reading-manga #mmr-panel .mmr-panel__tabs{
  max-width: 100%;
  min-width: 0;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

body.reading-manga #mmr-panel .mmr-panel__tabs{
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body.reading-manga #mmr-panel .mmr-tab,
body.reading-manga #mmr-panel .mmr-setting,
body.reading-manga #mmr-panel .mmr-pill-group,
body.reading-manga #mmr-panel .mmr-row,
body.reading-manga #mmr-panel .mmr-card,
body.reading-manga #mmr-panel .mmr-btn,
body.reading-manga #mmr-panel .mmr-setting__value,
body.reading-manga #mmr-panel .mmr-tabbtn{
  min-width: 0;
  max-width: 100%;
}

body.reading-manga #mmr-panel .mmr-setting__controls{
  display: grid;
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr) minmax(54px, auto);
  align-items: center;
}

body.reading-manga #mmr-panel .mmr-step{
  width: 100%;
  min-width: 54px;
  max-width: 100%;
  white-space: nowrap;
}

body.reading-manga #mmr-panel .mmr-setting__value{
  overflow: hidden;
  text-overflow: ellipsis;
}

@supports not (overflow: clip){
  body.reading-manga #mmr-panel{
    overflow-x: hidden;
  }
}