:root{
  --bg:#000000;
  --surface:#14161b;
  --surface-2:#1b1e25;
  --text:#ffffff;
  --muted:#9aa0aa;
  --primary:#5c7cff;
  --danger:#ff4d4d;
  --warning:#ffb020;
  --success:#24d18b;
  --radius:18px;
  --radius-sm:12px;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  --nav-h:72px;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.06);
  --border-3: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --btn-bg: rgba(255,255,255,0.02);
  --btn-bg-2: rgba(255,255,255,0.03);
  --btn-bg-3: rgba(255,255,255,0.04);
  --header-bg: rgba(0,0,0,0.92);
  --nav-bg: rgba(0,0,0,0.92);
  --scroll-thumb: rgba(255,255,255,0.08);
}

html[data-theme="day"]{
  --bg:#ffffff;
  --surface:#f7f9fc;
  --surface-2:#eef2f8;
  --text:#000000;
  --muted:#4b5563;
  --border: rgba(0,0,0,0.10);
  --border-2: rgba(0,0,0,0.06);
  --border-3: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.18);
  --btn-bg: rgba(0,0,0,0.03);
  --btn-bg-2: rgba(0,0,0,0.05);
  --btn-bg-3: rgba(0,0,0,0.07);
  --header-bg: rgba(255,255,255,0.92);
  --nav-bg: rgba(255,255,255,0.92);
  --shadow: 0 8px 24px rgba(0,0,0,0.12);
  --scroll-thumb: rgba(0,0,0,0.18);
}

html[data-theme="paper"]{
  --bg:#f7f1e6;
  --surface:#fffaf1;
  --surface-2:#f1e6d4;
  --text:#1b1b1b;
  --muted:#5b5246;
  --border: rgba(0,0,0,0.10);
  --border-2: rgba(0,0,0,0.06);
  --border-3: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.18);
  --btn-bg: rgba(0,0,0,0.03);
  --btn-bg-2: rgba(0,0,0,0.05);
  --btn-bg-3: rgba(0,0,0,0.07);
  --header-bg: rgba(247,241,230,0.92);
  --nav-bg: rgba(247,241,230,0.92);
  --shadow: 0 8px 24px rgba(0,0,0,0.10);
  --scroll-thumb: rgba(0,0,0,0.18);
}

html,body{
  height:100%;
}

/* Make native form controls follow theme (select dropdown background, etc.) */
html{
  color-scheme: dark;
}
html[data-theme="day"],
html[data-theme="paper"]{
  color-scheme: light;
}
.ch-order{
  color-scheme: inherit;
}
.ch-order option{
  background: var(--surface);
  color: var(--text);
}


/*
  Force the global background to follow the selected theme.
  Some plugins/admin styles may set a white body background.
*/
html{
  background: var(--bg) !important;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

body.theam-app,
body.wp-theme-theam-app{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Safety: if any wrapper exists (from plugins/theme builders), keep it transparent. */
#page, #content, .site, .site-content, .content-area{
  background: transparent !important;
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; height:auto; display:block; }

.muted{ color:var(--muted); }

.app-header{
  position: sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  /* Fix RTL flex-start/end swapping header sides.
     Keep header layout LTR, while keeping center text RTL. */
  direction:ltr;
  background:var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-2);
}

.app-header__left,.app-header__right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:84px;
}

/* Keep icons flush to corners (mobile) */
.app-header__left{ justify-content:flex-start; direction:ltr; }
.app-header__right{ justify-content:flex-end; direction:ltr; }

@media (max-width: 640px){
  .app-header{ 
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .app-header__left,.app-header__right{ min-width:0; }
}

.app-header__center{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  direction:rtl;
}

.app-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:0.2px;
  color:var(--primary);
}

.app-logo img{
  width:52px;
  height:52px;
  border-radius:14px;
  object-fit:cover;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.icon-btn svg{
  width:22px;
  height:22px;
  fill: currentColor;
}

.icon-btn--menu{
  position: relative;
}

.theam-menu-alert-badge{
  position: absolute;
  inset-inline-start: -7px;
  top: -7px;
  z-index: 3;
  pointer-events: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5a5f, #ef4444);
  color: #fff;
  border: 2px solid var(--bg);
  box-shadow: 0 10px 24px rgba(239,68,68,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

.icon-btn--solid{
  background:rgba(92,124,255,0.18);
  border-color: rgba(92,124,255,0.25);
}

.app-main{
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
}

.app-container{
  max-width: 980px;
  margin:0 auto;
  padding:14px;
}

.section{
  margin: 12px 0 22px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.section-head--center{
  justify-content:center;
}
.section-head--center .section-title{
  justify-content:center;
}

/* Center section title while keeping the "عرض المزيد" button aligned to the edge */
.section-head--center-title .section-title{
  flex: 1;
  justify-content: center;
}

.section-head--center-title .section-more{
  flex: 0 0 auto;
}

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.section-title h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}

.section-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  opacity:0.9;
}

.section-icon svg{
  width:22px;
  height:22px;
  fill: currentColor;
}

.section-more{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius: 999px;
  border:1px solid var(--border-3);
  background:var(--btn-bg);
  color:var(--text);
  font-weight:600;
  font-size:14px;
}

/* App Store Banner (Home) */
.store-banner{
  display:block;
  width:100%;
  max-width: var(--theam-banner-maxw, 100%);
  margin: 2px auto 18px;
  border-radius: 22px;
  overflow:hidden;
  background: var(--surface);
  border: 1px solid var(--border-3);
  box-shadow: var(--shadow);
  text-decoration:none;
}

.store-banner__img{
  display:block;
  width:100%;
  height:auto;
  /* helps reserve space before image is loaded */
  aspect-ratio: var(--theam-banner-aw, 4) / var(--theam-banner-ah, 1);
}

@media (max-width: 520px){
  .store-banner{ border-radius: 18px; }
}

/* Discord CTA (Home) */
.discord-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 2px 0 18px;
  padding: 16px 18px;
  border-radius: 28px;
  /* keep brand look consistent across modes */
  background: linear-gradient(135deg, #5b66ff 0%, #4a5cff 45%, #3b7bff 100%);
  color:#fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.14);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  direction:ltr; /* fix RTL flex reversal so arrow stays on the left */
}

.discord-banner::before{
  content:"";
  position:absolute;
  inset:-40% -30% auto auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  filter: blur(0px);
}

.discord-banner:active{
  transform: translateY(1px);
}

.discord-banner__right{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

.discord-banner__text{
  position:relative;
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:right;
  direction:rtl;
  align-items:flex-end;
}

.discord-banner__title{
  font-size:22px;
  font-weight:900;
  letter-spacing:0.2px;
}

.discord-banner__subtitle{
  font-size:15px;
  font-weight:600;
  opacity:0.88;
}

.discord-banner__icon,
.discord-banner__arrow{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
}

.discord-banner__icon{
  width:64px;
  height:64px;
  border-radius: 999px;
}

.discord-banner__icon svg{
  width:28px;
  height:28px;
  fill: currentColor;
}

.discord-banner__arrow{
  width:48px;
  height:48px;
  border-radius: 999px;
  margin-right: 0;
  border: 0;
  background: transparent;
  opacity: 0.92;
}

.discord-banner__arrow:focus-visible,
.discord-banner:hover .discord-banner__arrow{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

.discord-banner__arrow svg{
  width:26px;
  height:26px;
  fill: currentColor;
}

@media (max-width: 520px){
  .discord-banner{
    padding: 10px 12px;
    border-radius: 22px;
    gap: 10px;
  }

  .discord-banner__right{ gap: 10px; }
  .discord-banner__text{ gap: 4px; flex: 1 1 auto; max-width: 100%; }
  .discord-banner__title{ font-size:18px; line-height:1.25; }
  .discord-banner__subtitle{ font-size:12.5px; line-height:1.25; opacity:0.9; }

  /* keep the banner compact on small screens */
  .discord-banner__title,
  .discord-banner__subtitle{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .discord-banner__title{ -webkit-line-clamp: 1; }
  .discord-banner__subtitle{ -webkit-line-clamp: 1; }

  .discord-banner__icon{ width:50px; height:50px; }
  .discord-banner__icon svg{ width:24px; height:24px; }
  .discord-banner__arrow{ width:40px; height:40px; border-radius: 999px; }
  .discord-banner__arrow svg{ width:22px; height:22px; }
}

@media (max-width: 380px){
  .discord-banner{ padding: 9px 10px; border-radius: 20px; }
  .discord-banner__title{ font-size:16.5px; }
  .discord-banner__subtitle{ font-size:12px; }
  .discord-banner__icon{ width:46px; height:46px; }
  .discord-banner__arrow{ width:36px; height:36px; }
}

.h-scroll{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  gap:12px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.h-scroll::-webkit-scrollbar{ height:8px; }
.h-scroll::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius: 999px; }

.feature-card{
  flex: 0 0 86%;
  max-width: 560px;
  height: 240px;
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  background: var(--surface);
  scroll-snap-align: start;
  box-shadow: var(--shadow);
}

.feature-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature-card__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);
}

.feature-card__overlay h3{
  margin:0;
  font-size:20px;
  font-weight:900;
  line-height:1.2;
  text-shadow:0 6px 18px rgba(0,0,0,0.55);
}

.h-scroll--small .novel-card{
  flex: 0 0 140px;
}

.novel-card{
  flex: 0 0 140px;
  scroll-snap-align:start;
}

.novel-card__img{
  position:relative;
  width: 140px;
  height: 200px;
  border-radius: var(--radius-sm);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.novel-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.novel-card__title{
  margin-top:8px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:right;
  direction:rtl;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Home: make novel titles match section title color (day/night) */
body.home .novel-card__title{
  color: var(--text);
}

.latest-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.latest-card{
  display:flex;
  gap:12px;
  align-items:stretch;
  background: var(--surface);
  border:1px solid var(--border-2);
  border-radius: var(--radius);
  padding:12px;
}

/* Home: subtle blue glow (CSS only) for latest cards */
body.home .latest-card{
  position: relative;
  overflow: hidden;
}

/* Scale the glow on larger screens so it doesn't look like a tiny corner */
body.home{
  --latest-glow-size: 220px;
  --latest-glow-x: 10%;
  --latest-glow-y: 18%;
}

@media (min-width: 992px){
  body.home{ --latest-glow-size: 360px; }
}

@media (min-width: 1280px){
  body.home{ --latest-glow-size: 420px; }
}

body.home .latest-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(var(--latest-glow-size) var(--latest-glow-size) at var(--latest-glow-x) var(--latest-glow-y), rgba(62,166,255,.14) 0%, rgba(62,166,255,0) 62%);
}

html[data-theme="day"] body.home .latest-card::before,
html[data-theme="paper"] body.home .latest-card::before{
  background:
    radial-gradient(var(--latest-glow-size) var(--latest-glow-size) at var(--latest-glow-x) var(--latest-glow-y), rgba(26,115,232,.12) 0%, rgba(26,115,232,0) 62%);
}

body.home .latest-card{
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 0 0 1px rgba(62,166,255,.06);
}

html[data-theme="day"] body.home .latest-card,
html[data-theme="paper"] body.home .latest-card{
  box-shadow:
    0 18px 45px rgba(0,0,0,.08),
    0 0 0 1px rgba(26,115,232,.05);
}

.latest-cover{
  flex: 0 0 84px;
  width:84px;
  border-radius: 14px;
  overflow:hidden;
  background: var(--surface-2);
  /* Fill full card height (no empty space under image) */
  align-self:stretch;
  display:flex;
}

.latest-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.latest-content{
  flex:1;
  text-align:right;
  direction:rtl;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.latest-title{
  font-size:18px;
  text-align:right;
  direction:rtl;
  unicode-bidi: plaintext;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Home: latest novel title color */
body.home .latest-title{
  color: var(--text);
}

.latest-time{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}

.latest-time__icon svg{
  width:18px;
  height:18px;
  fill: currentColor;
}

.latest-chapters{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.latest-ch-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-width:0;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  direction: rtl;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid rgba(92,124,255,0.35);
  background: rgba(92,124,255,0.10);
  color: var(--primary);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  direction:rtl;
  unicode-bidi: plaintext;
}

/* Home: chapter names should be white/black (keep early access gold unchanged) */
body.home .latest-ch-row:not(.is-early-access) .chip{
  color: var(--text);
}

/* Home: infinite status line */
body.home .latest-infinite{
  margin-top: 10px;
}

body.home .latest-infinite-status{
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 900;
}

body.home .latest-infinite-sentinel{
  height: 1px;
}

.chip-time{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Latest chapters (home): VIP early access highlight */
.latest-ch-row.is-early-access .chip{
  background: #b08d2f;
  border-color: rgba(176,141,47,0.85);
  color: #111;
}
.latest-ch-row.is-early-access .chip-time{
  color: #b08d2f;
  font-weight: 900;
}


.btn{
  width:100%;
  padding:14px 16px;
  border-radius: 16px;
  border:1px solid var(--border-3);
  background: var(--btn-bg-2);
  color:var(--text);
  font-weight:800;
  font-size:15px;
  cursor:pointer;
}

.btn--ghost{
  background: var(--btn-bg);
}

.btn--primary{
  background: rgba(92,124,255,0.18);
  border-color: rgba(92,124,255,0.3);
  color: var(--text);
}

.btn--danger{
  background: rgba(255,77,77,0.18);
  border-color: rgba(255,77,77,0.35);
  color: var(--text);
}

.page-title{
  margin: 8px 0 14px;
  font-size: 24px;
  font-weight: 900;
}

.page-title--center{
  text-align: center;
}

/* Bottom nav */
.app-bottom-nav{
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 60;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-around;
}

.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 4px;
  color: var(--muted);
  font-weight:700;
  font-size:11px;
}

.nav-item.is-active{
  color: var(--primary);
}

.nav-icon svg{
  width:24px;
  height:24px;
  fill: currentColor;
}

.nav-avatar{
  width:26px;
  height:26px;
  border-radius: 999px;
  object-fit:cover;
  border: 2px solid rgba(92,124,255,0.35);
}

/* Library */
.library-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}

.search-input{
  flex:1;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--text);
  padding: 0 14px;
  font-size: 15px;
  outline:none;
}

.search-input::placeholder{ color: rgba(154,160,170,0.8); }

.library-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 520px){
  .library-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px){
  .library-grid{ grid-template-columns: repeat(6, 1fr); }
}

.lib-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lib-card__img{
  position:relative;
  border-radius: var(--radius-sm);
  overflow:hidden;
  background: var(--surface);
  aspect-ratio: 2 / 3;
}

.lib-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.lib-card__title{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align:right;
  direction:rtl;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 32px;
}

.status-pill{
  position:absolute;
  top:8px;
  right:8px;
  padding:6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-strong);
}

.status-pill.is-ongoing{ color: var(--success); }
.status-pill.is-complete{ color: var(--danger); }
.status-pill.is-stopped{ color: var(--warning); }

/* Library (page-library): redesigned cards (scoped to #library-app only) */
#library-app .library-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom: 14px;
}

#library-app .lib-novel{
  position:relative;
  overflow:hidden;
  background: var(--surface);
  border:1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px;
}

/* Subtle blue glow (CSS only) – same style language as Home latest cards */
body{
  --lib-glow-size: 320px;
  --lib-glow-x: 88%;
  --lib-glow-y: 18%;
}

@media (min-width: 992px){
  body{ --lib-glow-size: 420px; }
}

@media (min-width: 1280px){
  body{ --lib-glow-size: 520px; }
}

#library-app .lib-novel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(var(--lib-glow-size) var(--lib-glow-size) at var(--lib-glow-x) var(--lib-glow-y), rgba(62,166,255,.12) 0%, rgba(62,166,255,0) 62%);
}

html[data-theme="day"] #library-app .lib-novel::before,
html[data-theme="paper"] #library-app .lib-novel::before{
  background:
    radial-gradient(var(--lib-glow-size) var(--lib-glow-size) at var(--lib-glow-x) var(--lib-glow-y), rgba(26,115,232,.10) 0%, rgba(26,115,232,0) 62%);
}

#library-app .lib-novel{
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 0 0 1px rgba(62,166,255,.05);
}

html[data-theme="day"] #library-app .lib-novel,
html[data-theme="paper"] #library-app .lib-novel{
  box-shadow:
    0 18px 45px rgba(0,0,0,.08),
    0 0 0 1px rgba(26,115,232,.04);
}

#library-app .lib-novel__main{
  display:flex;
  gap:12px;
  /* Keep the cover proportionate (avoid over-tall covers) */
  align-items:flex-start;
  direction: rtl;
  text-align:right;
}

#library-app .lib-novel__head{
  direction: rtl;
  text-align:right;
  display:flex;
  /* In RTL, flex-start is the right side (so use it to keep the title on the right) */
  justify-content:flex-start;
  margin-bottom: 10px;
  /* Small inset so the title sits nicely on the right */
  padding-right: 10px;
}

#library-app .lib-summary-title{
  font-weight: 950;
  font-size: 13px;
  opacity: .95;
}

#library-app .lib-novel__cover{
  position:relative;
  /* Slightly wider + a bit taller to show more of the cover */
  flex: 0 0 110px;
  width:110px;
  height:180px;
  display:block;
  /* Center the cover vertically between the stats/tags block */
  align-self:center;
  border-radius: 16px;
  overflow:hidden;
  background: var(--surface-2);
}

@media (min-width: 520px){
  #library-app .lib-novel__cover{ flex-basis: 124px; width:124px; height:192px; }
}

#library-app .lib-novel__cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}

#library-app .lib-novel__flag{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--border-strong);
  overflow:hidden;
}

html[data-theme="day"] #library-app .lib-novel__flag,
html[data-theme="paper"] #library-app .lib-novel__flag{
  background: rgba(0,0,0,.28);
}

#library-app .lib-novel__flag img{
  width:18px;
  height:18px;
  display:block;
}

#library-app .lib-novel__info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#library-app .lib-novel__title{
  display:block;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
  color: var(--text);
  /* RTL title alignment fix (Library only) */
  direction: rtl;
  text-align: right;
  justify-self: end;
}

#library-app .lib-novel__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 850;
  font-size: 13px;
}

#library-app .lib-novel__row .sep{
  opacity: .65;
  padding: 0 6px;
}

/* Two-column meta rows (views|rank, chapters|status) – center split for a tidy layout */
#library-app .lib-novel__row--two{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  justify-content:initial;
  gap:0;
}

#library-app .lib-novel__row--two::after{
  content:"|";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  opacity: .65;
  pointer-events:none;
}

#library-app .lib-novel__row--two .cell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  white-space:nowrap;
}

#library-app .lib-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: rgba(0,0,0,0.24);
  font-weight: 950;
  font-size: 12px;
}

html[data-theme="day"] #library-app .lib-status-badge,
html[data-theme="paper"] #library-app .lib-status-badge{
  background: rgba(0,0,0,0.06);
}

#library-app .lib-status-badge.is-ongoing{ color: var(--success); }
#library-app .lib-status-badge.is-complete{ color: var(--danger); }
#library-app .lib-status-badge.is-stopped{ color: var(--warning); }

#library-app .lib-novel__chipsbox{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  min-height: 44px;
}

#library-app .lib-novel__chipslabel{
  flex:0 0 auto;
  font-weight: 950;
  font-size: 12px;
  white-space:nowrap;
  opacity: .9;
}

#library-app .lib-novel__chips{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#library-app .lib-novel__chips::-webkit-scrollbar{ display:none; }

#library-app .lib-chip{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: var(--surface);
  font-weight: 850;
  font-size: 12px;
  white-space:nowrap;
}

#library-app .lib-novel__summary{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  padding: 10px 10px;
  direction: rtl;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Summary (preview: 3 paragraphs, full: same rendering style as single page) */
#library-app .lib-summary-preview,
#library-app .lib-summary-full{
  color: var(--text);
  opacity: .88;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.7;
}

#library-app .lib-summary-preview p,
#library-app .lib-summary-full p{
  margin: 0 0 6px;
}

#library-app .lib-summary-preview p{
  position:relative;
}

#library-app .lib-summary-preview p:last-child,
#library-app .lib-summary-full p:last-child{ margin-bottom:0; }

#library-app .lib-novel__more{
  flex:0 0 auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--text);
  font-weight: 950;
  cursor:pointer;
  align-self:flex-start;
}

#library-app .library-infinite{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 10px 0 24px;
}

#library-app .library-infinite-status{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 900;
}

#library-app .library-infinite-sentinel{
  height: 2px;
  width: 100%;
}

/* Simple modal (used for library summary) */
.theam-modal{
  position: fixed;
  inset: 0;
  z-index: 95;
}

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

.theam-modal__panel{
  position:absolute;
  left: 10px;
  right: 10px;
  top: 10vh;
  background: var(--surface);
  border: 1px solid var(--border-3);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow);
  max-height: 80vh;
  overflow:auto;
}

@media (min-width: 720px){
  .theam-modal__panel{ left: 50%; right: auto; width: 640px; transform: translateX(-50%); }
}

.theam-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
  direction: rtl;
  text-align:right;
}

.theam-modal__body{
  direction: rtl;
  text-align:right;
  line-height: 1.8;
  font-weight: 750;
  color: var(--text);
}

/* Ranking star (popular lists) */
.rank-star{
  position:absolute;
  top:8px;
  left:8px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
  --rank-num: #ffffff;
  color: var(--primary);
}

.rank-star svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill: currentColor;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

.rank-star__num{
  position:relative;
  z-index:1;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: var(--rank-num);
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

.rank-star.is-gold{ color:#f4c542; --rank-num:#1b1b1b; }
.rank-star.is-silver{ color:#c0c0c0; --rank-num:#1b1b1b; }
.rank-star.is-bronze{ color:#cd7f32; --rank-num:#1b1b1b; }
.rank-star.is-red{ color: var(--danger); --rank-num:#ffffff; }
.rank-star.is-purple{ color:#a855f7; --rank-num:#ffffff; }
.rank-star.is-default{ color: var(--primary); --rank-num:#ffffff; }

.chapter-count{
  position:absolute;
  bottom:8px;
  right:8px;
  padding:6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* Tabs */
.tabs{
  display:flex;
  gap:10px;
  margin: 10px 0 16px;
  overflow-x:auto;
  padding-bottom: 6px;
}

/* Full-width segmented tabs (used in Profile/Ranking pages) */
.tabs--segmented{
  gap: 10px;
  overflow: hidden;
}

.tabs--segmented .tab{
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
}

.tab{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid var(--border-3);
  background: var(--btn-bg);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

.tab.is-active{
  background: rgba(92,124,255,0.18);
  border-color: rgba(92,124,255,0.30);
  color: var(--primary);
}

/* Side Drawer (Modern, lightweight, RTL) */
.app-drawer{
  position: fixed;
  inset: 0;
  z-index: 200;
}

.app-drawer[hidden]{
  display:none !important;
}

body.is-drawer-open{
  overflow: hidden;
}

.app-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 160ms ease;
  will-change: opacity;
}

.app-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  left:auto;
  width: min(420px, 60vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(110%);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  display:flex;
  flex-direction:column;
}

.app-drawer.is-open .app-drawer__backdrop{ opacity:1; }
.app-drawer.is-open .app-drawer__panel{ transform: translateX(0); }

@media (prefers-reduced-motion: reduce){
  .app-drawer__backdrop, .app-drawer__panel{ transition:none !important; }
}

.app-drawer__head{
  padding: 14px 14px 10px;
  display:flex;
  align-items:center;
  flex-direction: row-reverse;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-2);
}

.app-drawer__title{
  font-weight: 900;
  letter-spacing: .2px;
  text-align:center;
  flex:1;
}

.app-drawer__close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.app-drawer__close svg{ width: 22px; height: 22px; fill: currentColor; }

.app-drawer__body{
  padding: 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  display:flex;
  flex-direction:column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Prevent the account card and other blocks from being squashed when the menu grows.
   Instead, let the drawer body scroll naturally. */
.app-drawer__body > *{ flex-shrink: 0; }

.drawer-divider{
  height: 1px;
  background: var(--border-2);
  border-radius: 999px;
}

/* Account card */
.drawer-account{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface-2);
  padding: 14px;
  position:relative;
  overflow:hidden;
  text-align:center;
}

.drawer-account:before{
  content:"";
  position:absolute;
  inset:-80px -60px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(92,124,255,0.18), rgba(92,124,255,0));
  pointer-events:none;
}

.drawer-account__avatar{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  overflow:hidden;
  background: var(--btn-bg);
  display:block;
  flex: 0 0 auto;
  margin-inline:auto;
}

.drawer-avatar{ width:100%; height:100%; object-fit:cover; }

.drawer-account__meta{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}

.drawer-account__nameRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap:wrap;
}

.drawer-account__name{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  text-decoration:none;
}

.drawer-account__level{
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(92,124,255,0.30);
  background: rgba(92,124,255,0.16);
  color: var(--primary);
  white-space:nowrap;
}

.drawer-xp__bar{
  position:relative;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--btn-bg-2);
  overflow:hidden;
}

.drawer-xp__fill{
  position:absolute;
  inset:0;
  width:0;
  background: rgba(92,124,255,0.75);
}

.drawer-xp__txt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.drawer-account__logout{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  font-weight: 900;
}

/* Guest actions */
.drawer-account__guestTitle{
  font-weight: 900;
  margin-bottom: 12px;
}

.drawer-account__guestActions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.drawer-btn{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(92,124,255,0.28);
  background: rgba(92,124,255,0.18);
  color: var(--text);
  font-weight: 900;
}

.drawer-btn--outline{
  border-color: var(--border);
  background: var(--btn-bg);
}

.drawer-btn__icon svg{ width: 20px; height: 20px; fill: currentColor; }

/* Menu items */
.drawer-menu{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.drawer-item,
.drawer-sub__item{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-start;
  direction: rtl;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  font-weight: 900;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.drawer-item:hover,
.drawer-sub__item:hover{
  background: var(--btn-bg-2);
}

.drawer-item:active,
.drawer-sub__item:active{
  transform: translateY(1px);
}

.drawer-item.is-active{
  border-color: rgba(92,124,255,0.30);
  background: rgba(92,124,255,0.14);
}

.drawer-sub__item.is-active{
  border-color: rgba(92,124,255,0.30);
  background: rgba(92,124,255,0.14);
}

/* Store menu item (subtle gold glow, low-cost) */
.drawer-item--store{
  border-color: rgba(245,158,11,0.30);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.10), 0 0 18px rgba(245,158,11,0.18);
}

.drawer-item--store:hover{
  box-shadow: 0 0 0 1px rgba(245,158,11,0.14), 0 0 22px rgba(245,158,11,0.22);
}

.drawer-item--store.is-active{
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.14);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.16), 0 0 26px rgba(245,158,11,0.26);
}

.drawer-item__icon,
.drawer-sub__icon{
  width: 24px;
  height: 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.drawer-item__icon svg,
.drawer-sub__icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.drawer-item__label{ flex:1; text-align:right; }

.drawer-alert-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6f, #ef4444);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.14), 0 0 22px rgba(239,68,68,0.28);
  flex: 0 0 auto;
}

.drawer-count-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,107,111,0.22), rgba(239,68,68,0.20));
  border: 1px solid rgba(239,68,68,0.34);
  color: #ef4444;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(239,68,68,0.10);
  margin-inline-start: auto;
}

html[data-theme="day"] .drawer-count-badge,
html[data-theme="paper"] .drawer-count-badge{
  background: linear-gradient(135deg, rgba(255,107,111,0.14), rgba(239,68,68,0.10));
  color: #b91c1c;
  border-color: rgba(239,68,68,0.24);
}

.drawer-sub__label{
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.drawer-sub__item--reports .drawer-sub__label{
  flex: 1 1 auto;
  text-align: right;
}

.drawer-sub__item--reports .drawer-count-badge{
  margin-inline-start: 0;
  margin-inline-end: 0;
  flex: 0 0 auto;
}

.drawer-item--toggle{
  cursor:pointer;
}

.drawer-item__chev{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .75;
  transition: transform 160ms ease;
}

.drawer-item[aria-expanded="true"] .drawer-item__chev{
  transform: rotate(180deg);
}

.drawer-sub{
  margin-top: -4px;
  margin-inline: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--border-2);
  background: rgba(0,0,0,0.06);
}

html[data-theme="day"] .drawer-sub,
html[data-theme="paper"] .drawer-sub{
  background: rgba(0,0,0,0.03);
}

.drawer-sub__item{
  border-radius: 14px;
  border-color: var(--border-2);
  background: transparent;
}


/* Filter sheet */
.filter-sheet{
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.filter-sheet.is-open{
  opacity: 1;
  pointer-events: auto;
}


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

.filter-sheet__panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background: var(--surface);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-top: 1px solid var(--border-3);
  padding: 14px;
  box-shadow: var(--shadow);
  max-height: 80vh;
  overflow:auto;
  transform: translateY(26px);
  transition: transform 180ms ease;
}

.filter-sheet.is-open .filter-sheet__panel{
  transform: translateY(0);
}


.filter-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
  direction: rtl;
  text-align:right;
}


.filter-group{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--btn-bg);
  margin-bottom: 10px;
  overflow:hidden;
}

.filter-toggle{
  width:100%;
  text-align:right;
  padding: 12px 12px;
  background: transparent;
  border:0;
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}

.filter-body{
  padding: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg);
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
}

.filter-chip input{ display:none; }

.filter-chip.is-on{
  border-color: rgba(92,124,255,0.35);
  background: rgba(92,124,255,0.14);
  color: var(--primary);
}

/* Library filter tiles + panels (new UI) */
.lib-filter-tiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  direction: rtl;
  /* tiles content is centered, keep RTL for grid flow */
  text-align:center;
  margin-bottom: 14px;
}

.lib-filter-tile{
  position:relative;
  border: 1px solid rgba(92,124,255,0.22);
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
  padding: 14px 14px;
  color: var(--text);
  /* Center title + hint inside each tile */
  text-align:center;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  /* subtle border glow only (no big outer blue haze) */
  box-shadow:
    0 0 0 1px rgba(92,124,255,0.10) inset,
    0 0 10px rgba(92,124,255,0.12),
    0 18px 28px rgba(0,0,0,0.30);
  transition: transform .12s ease, box-shadow .12s ease;
  overflow:hidden;
}

/* remove full-area glow layer (keep glow limited to border via box-shadow) */
.lib-filter-tile::before{ content:none; }

.lib-filter-tile > *{ position:relative; z-index:1; }

.lib-filter-tile:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(92,124,255,0.14) inset,
    0 0 12px rgba(92,124,255,0.14),
    0 12px 22px rgba(0,0,0,0.34);
}

.lib-filter-tile--full{ grid-column: 1 / -1; }

.lib-filter-tile__title{
  font-weight: 1000;
  letter-spacing: .1px;
  width: 100%;
  text-align:center;
}

.lib-filter-tile__hint{
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  opacity: .95;
  width: 100%;
  text-align:center;
}

.lib-filter-modal{
  direction: rtl;
  text-align:right;
}

/* Make filter modal usable on long lists: fixed head/foot, scroll body only */
.theam-modal__panel.lib-filter-modal{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.lib-filter-modal__search{
  margin: 6px 0 10px;
}

.lib-filter-modal__body{
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.lib-filter-modal__foot{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-3);
  background: var(--surface);
}

.lib-filter-modal__foot .btn{ flex: 1; }

/* Clear button must be visible in dark mode */
#lib-filter-modal-clear{
  border-color: rgba(255, 77, 77, 0.60);
  color: #ff4d4d;
}
#lib-filter-modal-clear:hover{
  background: rgba(255, 77, 77, 0.10);
}

.lf-section-title{
  font-weight: 950;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 2px 6px;
}

.lf-option{
  display:block;
  user-select:none;
}

.lf-option input{ display:none; }

.lf-option__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg);
}

.lf-option__text{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 850;
}

.lf-flag{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lf-flag img{ width: 20px; height: 20px; }

.lf-option__mark{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(92,124,255,0.35);
  box-shadow: 0 0 18px rgba(92,124,255,0.16);
}

.lf-option input:checked + .lf-option__row{
  border-color: rgba(92,124,255,0.40);
  background: rgba(92,124,255,0.12);
}

.lf-option input:checked + .lf-option__row .lf-option__mark{
  background: rgba(92,124,255,0.75);
  border-color: rgba(92,124,255,0.70);
}


/* Profile */
.profile-card{
  display:flex;
  gap:14px;
  align-items:center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.profile-avatar{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--btn-bg-3);
  border: 2px solid rgba(92,124,255,0.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-name{
  font-size: 18px;
  font-weight: 900;
}

.profile-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}

/* States */
.library-grid.is-loading{ opacity:0.65; filter: saturate(0.9); }
.empty{
  padding: 16px;
  text-align:center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* =============================
   Manga single page (wp-manga)
   ============================= */

.single-wp-manga .app-bottom-nav{ display:none; }
.single-wp-manga .app-main{
  padding-bottom: calc(92px + env(safe-area-inset-bottom) + 18px);
}

.single-wp-manga .app-header__center{ opacity:1; pointer-events:auto; }

.single-wp-manga .app-header{
  border-bottom-color: transparent;
}

html[data-theme="night"] .single-wp-manga .app-header{ background: rgba(0,0,0,0.18); }
html[data-theme="day"] .single-wp-manga .app-header{ background: rgba(255,255,255,0.20); }
html[data-theme="paper"] .single-wp-manga .app-header{ background: rgba(247,241,230,0.22); }

.manga-hero{
  position:relative;
  padding-top: 8px;
  padding-bottom: 18px;
  overflow:hidden;
}

.manga-hero__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.12);
  opacity: 0.55;
}

.manga-hero__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 420px at 50% 0%, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
  pointer-events:none;
}

html[data-theme="day"] .manga-hero__overlay,
html[data-theme="paper"] .manga-hero__overlay{
  background: radial-gradient(1200px 420px at 50% 0%, rgba(255,255,255,0.00), rgba(0,0,0,0.08));
}

.manga-hero__inner{
  position:relative;
}

.manga-like-btn{
  position:absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
}

.manga-edit-btn{
  position:absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  font-size: 13px;
}

html[data-theme="day"] .manga-edit-btn,
html[data-theme="paper"] .manga-edit-btn{
  background: rgba(255,255,255,0.65);
}

.manga-cover-wrap{
  position:relative;
  width: 170px;
  max-width: 56vw;
  margin: 26px auto 14px;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-strong);
}

.manga-country-flag{
  position:absolute;
  top:8px;
  left:8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-strong);
  font-size: 18px;
  line-height: 1;
}

html[data-theme="day"] .manga-country-flag,
html[data-theme="paper"] .manga-country-flag{
  background: rgba(255,255,255,0.80);
}

.manga-country-flag img{ width: 18px; height: 18px; }

.manga-adult-badge{
  position:absolute;
  top:-10px;
  left:-10px;
  z-index: 4;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--danger);
  color: #fff;
  font-weight: 1000;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* Move +18 badge to the bottom of the cover (same side) */
.manga-adult-badge--bottom{
  top: auto;
  bottom: 8px;
  left: 8px;
  right: auto;
  padding: 6px 8px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.manga-cover-wrap .country-flag{
  position:absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
}

html[data-theme="day"] .manga-cover-wrap .country-flag,
html[data-theme="paper"] .manga-cover-wrap .country-flag{
  background: rgba(255,255,255,0.65);
}

.manga-cover-wrap .country-flag img{
  width: 22px;
  height: 22px;
}

.manga-cover-wrap .adult-badge{
  position:absolute;
  top: -12px;
  left: -12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 4px solid var(--bg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.manga-cover-wrap img{
  width:100%;
  height:auto;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.manga-title{
  margin: 0;
  text-align:center;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.25;
}

.manga-author{
  margin-top: 8px;
  text-align:center;
  color: var(--muted);
  font-weight: 700;
}

.manga-author__link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

.manga-author__link:hover,
.manga-author__link:focus-visible{
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--text) 55%, transparent);
  opacity: 1;
}

.manga-credits{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  text-align:center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.manga-credits b{ color: var(--text); font-weight: 900; }

.manga-credits{
  margin-top: 10px;
  text-align:center;
  color: var(--muted);
  font-weight: 700;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.manga-credit strong{
  color: var(--text);
  font-weight: 900;
}

.manga-credits{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  text-align:center;
}

.manga-credit{
  font-weight: 800;
  color: var(--text);
}

.manga-credit .muted{
  font-weight: 700;
}

.manga-stats{
  margin: 16px auto 0;
  max-width: 520px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--border);
  border-radius: 20px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow:hidden;
  backdrop-filter: blur(10px);
}

html[data-theme="day"] .manga-stats,
html[data-theme="paper"] .manga-stats{
  background: rgba(255,255,255,0.65);
}

.manga-stat{
  padding: 10px 8px;
  text-align:center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.manga-stat + .manga-stat{ border-left: 1px solid var(--border-2); }

.manga-stat__icon{ display:inline-flex; align-items:center; justify-content:center; opacity:0.9; }
.manga-stat__icon svg{ width:18px; height:18px; fill: currentColor; }

.manga-stat__value{
  margin-top: 6px;
  font-size: 17px;
  font-weight: 900;
}

.manga-stat__label{ margin-top: 2px; font-size: 11px; color: var(--muted); font-weight: 700; }

.manga-stat:not(.manga-stat--rating){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height: 100%;
}

.manga-section{
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.manga-section__head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
}

.manga-section__title{
  margin:0;
  font-size: 20px;
  font-weight: 900;
}

.manga-summary{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 650;
  text-align: right;
  direction: rtl;
}

.manga-summary.is-collapsed{
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.link-btn{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--primary);
  font-weight: 900;
  background: transparent;
  border: 0;
  cursor:pointer;
}

/* Summary toggle button (RTL): place on the right */
button.link-btn[data-summary-toggle]{
  display:flex;
  width:fit-content;
  margin-left:auto;
}


.pill-list{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.pill-heading{
  margin-top: 14px;
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  text-align: right;
  direction: rtl;
}

.pill{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.manga-tabs{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
}

.manga-tab{
  padding: 12px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor:pointer;
}

.manga-tab .tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-inline-start: 8px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2) !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}


.manga-tab.is-active{
  background: rgba(92,124,255,0.25);
  color: var(--text) !important;
}

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }


.ch-controls{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}

.ch-order-wrap{ position: relative; }

.ch-order{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--text);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ch-order-wrap::after{
  content: '▾';
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  pointer-events:none;
}
.ch-list{ margin-top: 12px; display:flex; flex-direction:column; gap: 12px; }
.ch-search-results{ margin-top: 12px; display:flex; flex-direction:column; gap: 12px; }

/* --------------------------------------------------------------------------
   Scheduled chapters panel ("مواعيد نزول الفصول")
   -------------------------------------------------------------------------- */

.ch-schedule{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.sched-head{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: right;
  direction: rtl;
}

.ch-schedule.is-open .sched-head{
  border-bottom: 1px solid var(--border-2);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.sched-title{
  flex: 1;
  min-width: 0;
  font-weight: 950;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.sched-badge{
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
}

.sched-chevron{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--muted);
}

.sched-chevron svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 180ms ease;
}

.ch-schedule.is-open .sched-chevron svg{
  transform: rotate(180deg);
}

.sched-panel{
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 200ms ease;
}

.ch-schedule.is-open .sched-panel{
  padding: 0 12px 12px;
  opacity: 1;
  /* Allow natural page scroll after expansion (JS sets max-height:none). */
  overflow: visible;
}

.sched-top{
  margin-top: 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  direction: rtl;
}

.sched-top__note{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
  flex: 1;
  text-align: right;
  padding-right: 8px;
}

.sched-shop-btn{
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--text);
  border-radius: 12px;
  padding: 7px 10px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.sched-shop-btn:active{ transform: scale(0.99); }

.sched-loading{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--muted);
  font-weight: 850;
  text-align: right;
  direction: rtl;
}

/* Small loader inside each VIP tier (used for paginated requests). */
.sched-subloading{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--muted);
  font-weight: 850;
  text-align: right;
  direction: rtl;
}

.sched-content{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.sched-empty{
  padding: 12px;
  border: 1px dashed var(--border-3);
  border-radius: 16px;
  color: var(--muted);
  font-weight: 850;
  text-align: right;
  direction: rtl;
}

.sched-group{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.sched-ghead{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: right;
  direction: rtl;
}

.sched-group.is-open .sched-ghead{
  border-bottom: 1px solid var(--border-2);
  background: rgba(0,0,0,0.02);
}

.sched-gtitle{
  flex: 1;
  min-width: 0;
  font-weight: 950;
}

.sched-gdesc{
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
  white-space: nowrap;
}

.sched-gchev{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--muted);
}

.sched-gchev svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 180ms ease;
}

.sched-group.is-open .sched-gchev svg{
  transform: rotate(180deg);
}

.sched-gpanel{
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 240ms ease, opacity 180ms ease;
}

.sched-group.is-open .sched-gpanel{
  padding: 12px;
  opacity: 1;
  overflow: visible;
}

.sched-gmsg{
  font-size: 12px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.55;
  margin-bottom: 10px;
  text-align: right;
  direction: rtl;
  padding-right: 8px;
  unicode-bidi: plaintext;
}

.sched-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  /* Make long lists scrollable (mobile + desktop) */
  max-height: min(60vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Infinite loading indicator at the bottom of the scrollable list */
.sched-inf-loading{
  position: sticky;
  bottom: 0;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 850;
  text-align: center;
  direction: rtl;
}

.sched-sentinel{
  height: 1px;
}

.sched-more.btn{
  margin-top: 10px;
}

.sched-more.btn[disabled]{
  opacity: 0.65;
  cursor: default;
}

.sched-row{
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--btn-bg);
  display:flex;
  align-items:center;
  gap: 12px;
  direction: rtl;
}

.sched-row__num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: var(--muted);
  background: var(--btn-bg-2);
  flex: 0 0 auto;
}

.sched-row__main{
  flex: 1;
  min-width: 0;
  /* Ensure chapter title + date align to the right in RTL */
  text-align: right;
}

.sched-row__title{
  display: block;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.sched-row a.sched-row__title{
  color: var(--text);
  text-decoration: none;
}

.sched-row a.sched-row__title:active{ transform: scale(0.99); }

.sched-row__meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 850;
  text-align: right;
  direction: rtl;
  unicode-bidi: plaintext;
}

.sched-row__timer{
  flex: 0 0 auto;
  text-align: left;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 2px;
}

.sched-row__timer small{
  font-size: 11px;
  color: var(--muted);
  font-weight: 850;
}

.sched-countdown{
  border: 1px solid var(--border-3);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 950;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.sched-row.is-can-read .sched-countdown{
  border-color: rgba(176,141,47,0.55);
  background: rgba(176,141,47,0.10);
}

/* --------------------------------------------------------------------------
   Volumes (chapters grouping) - modern, RTL, mobile-first
   -------------------------------------------------------------------------- */

.ch-volumes{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.vol-item{
  /* We style the header/panel as one rounded card (like the schedule panel) */
  border: 0;
  background: transparent;
}

.vol-head{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: right;
  direction: rtl;
  position: sticky;
  top: 0;
  z-index: 5;
}

.vol-item.is-open .vol-head{
  border-bottom: 1px solid var(--border-2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.vol-title{
  flex: 1;
  min-width: 0;
  font-weight: 950;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.vol-badge{
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
}

.vol-chevron{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border-3);
  background: var(--btn-bg-2);
  color: var(--muted);
}

.vol-chevron svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 180ms ease;
}

.vol-item.is-open .vol-chevron svg{
  transform: rotate(180deg);
}

.vol-panel{
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 200ms ease;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}

.vol-item.is-open .vol-panel{
  padding: 0 12px 12px;
  opacity: 1;
}

.vol-chapters{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Slightly tighter rows inside volumes */
.vol-chapters .ch-row{
  margin: 0;
}

.vol-more{
  margin-top: 12px;
}

/* Ensure "عرض المزيد" داخل المجلدات يبقى مقروء في جميع الثيمات (خصوصاً الوضع الليلي)
   بعض الإضافات/الستايلات قد تغيّر لون الأزرار العامة؛ نثبتها هنا بشكل محدد للمجلدات. */
.vol-more.btn{
  color: var(--text) !important;
  background: var(--btn-bg-2) !important;
  border-color: var(--border-3) !important;
}

.vol-empty{
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border-3);
  border-radius: 16px;
  color: var(--muted);
  font-weight: 800;
  text-align: right;
  direction: rtl;
}

.vol-loading{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--muted);
  font-weight: 800;
  text-align: right;
  direction: rtl;
}

.ch-row{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.ch-row a{ display:flex; align-items:center; gap: 12px; }

.ch-num{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--muted);
  background: var(--btn-bg-2);
  flex: 0 0 auto;
}

/* VIP early access chapters: golden highlight */
.ch-row.is-early-access{
  border-color: rgba(176,141,47,0.55);
}
.ch-row.is-early-access .ch-num{
  background: #b08d2f;
  border-color: rgba(176,141,47,0.85);
  color: #111;
}

/* Make the full chapter title golden for Early Access items (chapter list only) */
.ch-row.is-early-access .ch-title{
  color: #b08d2f;
}

.ch-main{ flex: 1; min-width: 0; }

/* RTL: chapter title + meta align to the right */
.ch-main, .ch-title, .ch-meta{
  text-align: right;
  direction: rtl;
}

.ch-meta{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.ch-title{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.ch-time{ margin-top: 6px; color: var(--muted); font-weight: 700; font-size: 12px; }

.manga-readbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap: 12px;
  background: var(--nav-bg);
  border-top: 1px solid var(--border-2);
  backdrop-filter: blur(12px);
}

.readbar-main{
  flex: 1;
  height: 56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  background: linear-gradient(90deg, rgba(92,124,255,0.85), rgba(92,124,255,0.55));
  color: #ffffff;
  font-weight: 950;
}

.readbar-main svg{ width: 22px; height: 22px; fill: currentColor; }

/* Bottom sheet (library status) */
.sheet{ position: fixed; inset: 0; z-index: 80; }
.sheet[hidden]{ display:none; }
.sheet__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.sheet__panel{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid var(--border);
  padding: 14px;
  transform: translateY(8px);
}

.sheet__handle{
  width: 52px;
  height: 5px;
  border-radius: 99px;
  background: var(--border-strong);
  margin: 4px auto 10px;
}

.sheet__close{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sheet__close svg{ width: 18px; height: 18px; fill: currentColor; }

.sheet__title{ margin: 0 0 10px; font-size: 18px; font-weight: 950; text-align:center; }
.sheet-item{
  width: 100%;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
  text-align:right;
}

.sheet-item + .sheet-item{ margin-top: 10px; }
.sheet-divider{ height: 1px; background: var(--border-2); margin: 12px 0; }
.sheet-item.is-danger{ color: var(--danger); border-color: rgba(255,77,77,0.35); }

/* Reading log sheet: half-height panel with internal scrolling */
#readinglog-sheet .sheet__panel{
  height: 50vh;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#readinglog-sheet .sheet__title{ padding: 0 44px; }
#readinglog-sheet .sheet__content{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* Reading log: icon-only back button (hide visible text label) */
#readinglog-sheet .nrsus-rl-back--icon{
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

/* User request: in this sheet only, remove the back arrow entirely and keep only the (X) close button */
#readinglog-sheet .nrsus-rl-back{ display:none !important; }

#readinglog-sheet .nrsus-rl-back--icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  /* chevron-left -> right (RTL back) */
  transform: rotate(180deg);
}

/* Reading log page + sheet refresh */
.app-history-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.history-hero{
  position:relative;
  overflow:hidden;
  padding:22px 20px;
  border-radius:calc(var(--radius) + 10px);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(92,124,255,0.24), transparent 34%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  direction: rtl;
  text-align: right;
}

.history-hero::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 66%);
  pointer-events:none;
}

.history-hero__eyebrow{
  display:flex;
  align-items:center;
  width:fit-content;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(92,124,255,0.16);
  color:var(--primary);
  font-size:12px;
  font-weight:900;
  margin:0 0 12px auto;
}

.history-hero__title{
  margin:0 0 10px;
  font-size:clamp(26px, 5vw, 34px);
  font-weight:900;
}

.history-hero__desc{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  max-width:760px;
}

.history-hero__chips{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  gap:10px;
  margin:16px 0 0 auto;
  justify-content:flex-start;
}

.history-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  font-size:12px;
  font-weight:800;
}

.history-stream{
  position:relative;
}

.history-empty{
  padding:24px 18px;
}

.app-history-page .nrsus-wrap.nrsus-page{
  max-width:100%;
}

#readinglog-sheet .sheet__panel{
  height:min(76vh, 760px);
  max-height:min(76vh, 760px);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 24px 70px rgba(0,0,0,0.42);
}

#readinglog-sheet .sheet__title{
  position:sticky;
  top:0;
  z-index:2;
  padding:0 52px 0 16px;
  margin:0;
  text-align:right;
  direction:rtl;
}

#readinglog-sheet .sheet__content{
  padding: 10px 4px 12px;
}

#readinglog-sheet .nrsus-wrap{
  padding: 0 6px 4px;
}

#readinglog-sheet .nrsus-rl-detail-title{
  margin-top: 4px;
}

#readinglog-sheet .nrsus-rl-summary .nrsus-empty,
#readinglog-sheet .nrsus-rl-detail-list .nrsus-empty,
#readinglog-sheet .nrsus-rl-wrap > .nrsus-empty{
  margin: 6px 0;
}

#readinglog-sheet .nrsus-rl-load-more{
  margin-top: 8px;
}

@media (max-width: 640px){
  .history-hero{ padding:18px 16px; }
  .history-hero__chips{ gap:8px; }
  #readinglog-sheet .sheet__panel{ height:78vh; max-height:78vh; }
}

/* Rating sheet */
.rating-note{ margin: 0 0 10px; text-align:center; color: var(--muted); font-size: 12px; }
.rating-stars{ display:flex; align-items:center; justify-content:center; gap: 10px; margin: 0 0 8px; }
.rating-star{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.rating-star svg{ width: 22px; height: 22px; fill: currentColor; }
.rating-star.is-active{ color: var(--accent); }



@media (max-width:480px){
  .manga-stats{ max-width: 100%; border-radius: 18px; }
  .manga-stat{ padding: 9px 6px; }
  .manga-stat__value{ font-size: 16px; }
  .manga-stat__label{ font-size: 10px; }
}

/* --------------------------------------------------------------------------
   v0.2.3.5 UI Fixes (rating + chapters + drawer)
   -------------------------------------------------------------------------- */

/* Rating stat: two lines (⭐ 4.5 تقييم / 16 مقيم) */
.manga-stat--rating{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.manga-stat__value-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 900;
}

.manga-stat__value-line .manga-stat__value{ margin-top: 0; }

.manga-stat__unit{
  font-size: 13px;
  font-weight: 800;
}

.manga-stat__sub{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

/* Rating stars: number inside each star */
.rating-star{ position: relative; }
.rating-star__num{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  pointer-events:none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Chapters list: match competitor layout (number right / stats left) */
.ch-row{ padding: 10px 12px; }
.ch-row a{ width:100%; }

.ch-num{
  background: var(--primary);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
}

.ch-meta{ margin-top: 6px; color: var(--muted); font-weight: 700; font-size: 12px; }

.ch-stats{
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.ch-stat{
  min-width: 64px;
  height: 28px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-weight: 900;
  font-size: 12px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
}

.ch-stat svg{ width: 16px; height: 16px; fill: currentColor; }

.ch-stat--views{
  background: var(--primary);
  color: #fff;
  border-color: rgba(0,0,0,0.15);
}

.ch-stat--comments{
  background: var(--btn-bg-2);
  color: var(--text);
}

.ch-stat__num{ line-height: 1; }

/* Drawer menu: icons + right alignment */
.drawer-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
}

.drawer-link__icon{ display:inline-flex; align-items:center; justify-content:center; opacity: 0.95; }
.drawer-link__icon svg{ width: 18px; height: 18px; fill: currentColor; }

@media (max-width:480px){
  .manga-stat__value-line{ font-size: 16px; }
  .manga-stat__unit{ font-size: 12px; }
}

/* Ensure rating stars order is 1 ➜ 5 (LTR) even on RTL pages */
.rating-stars{ direction: ltr; }



/* RTL: Summary toggle button should be on the right */
.single-wp-manga .link-btn[data-summary-toggle]{
  display: block;
  width: fit-content;
  margin-inline-end: auto;
}


/* Favorites (Bookmark) + Toast */
.manga-like-btn{
  color:#fff;
}
.manga-like-btn.is-favorited{
  color:#ff3b30;
}

.theam-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  z-index: 999999;
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

@media (min-width: 960px){
  .theam-toast{ bottom: 28px; }
}

/* === Markaz Notifications: Theme bell badge + RTL defaults === */
.icon-btn{ text-decoration: none; }

.icon-btn--bell{ position: relative; }

.theam-bell-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* Default RTL for page/post titles + content without touching the whole layout */
.post .page-title,
.post .content{
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/* ======================================
   Readability fixes
   ====================================== */

/* Force key CTA labels to remain readable in night mode */
html:not([data-theme="day"]):not([data-theme="paper"]) #latest-load-more,
html:not([data-theme="day"]):not([data-theme="paper"]) .empty .btn,
html:not([data-theme="day"]):not([data-theme="paper"]) .btn--primary,
html:not([data-theme="day"]):not([data-theme="paper"]) .btn--danger{
  color: #fff !important;
}

/* Ranking: ensure Novel Rankings container follows current theme vars */
html[data-theme="day"] .nrsus-novel-wrap,
html[data-theme="paper"] .nrsus-novel-wrap,
html:not([data-theme="day"]):not([data-theme="paper"]) .nrsus-novel-wrap{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Ranking: remove duplicate inner title inside the Novel Rankings container */
[data-tab-panel="novel_rankings"] .nrsus-novel-head{
  display: none !important;
}

/* Manga page: Chapters "Load more" must be visible in Dark mode */
html:not([data-theme="day"]):not([data-theme="paper"]) #manga-chapters-load-more{
  color: #fff !important;
}
html:not([data-theme="day"]):not([data-theme="paper"]) #manga-chapters-load-more:disabled{
  color: rgba(255,255,255,0.85) !important;
}

/* Adult warning sheet */
.sheet-desc{
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
  text-align: right;
}

/* =====================================================
   Quick Search Overlay (Header Search)
   ===================================================== */

.app-search{
  position: fixed;
  inset: 0;
  z-index: 240;
}

.app-search[hidden]{
  display:none !important;
}

body.is-search-open{ overflow:hidden; }

.app-search__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.70);
  opacity: 0;
  transition: opacity 160ms ease;
}

.app-search__panel{
  position:absolute;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  display:flex;
  flex-direction:column;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.app-search.is-open .app-search__backdrop{ opacity:1; }
.app-search.is-open .app-search__panel{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .app-search__backdrop,
  .app-search__panel{ transition:none !important; }
}

.app-search__top{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 12px 10px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-direction: row-reverse;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-2);
  backdrop-filter: blur(10px);
}

.app-search__close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border:1px solid var(--border-3);
  background: var(--btn-bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
}

.app-search__close svg{ width: 22px; height: 22px; fill: currentColor; }

.app-search__inputWrap{
  position: relative;
  flex: 1;
  min-width: 0;
}

.app-search__icon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.app-search__icon svg{ width: 18px; height: 18px; fill: currentColor; }

.app-search__input{
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  outline: none;
  text-align: right;
}

.app-search__input::placeholder{ color: rgba(154,160,170,0.95); }
html[data-theme="day"] .app-search__input::placeholder,
html[data-theme="paper"] .app-search__input::placeholder{ color: rgba(75,85,99,0.95); }

.app-search__input:focus{
  border-color: rgba(92,124,255,0.50);
  box-shadow: 0 0 0 3px rgba(92,124,255,0.18);
}

.app-search__body{
  padding: 14px 12px 120px;
  overflow:auto;
}

.app-search__state{
  color: var(--muted);
  font-weight: 900;
  padding: 6px 2px 12px;
  text-align: right;
}

.app-search__list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.as-item{
  display:flex;
  /* RTL: keep cover on the right (before title/meta) */
  direction: rtl;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-2);
  background: var(--surface);
}

.as-item:active{ transform: scale(0.995); }

.as-cover{
  width: 54px;
  height: 74px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid var(--border-2);
  background: var(--btn-bg);
}

.as-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.as-meta{
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 6px;
  text-align:right;
}

.as-title{
  font-weight: 1000;
  line-height: 1.25;
  font-size: 16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.as-genres{
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.as-chapters{
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  opacity: 0.92;
}

@media (min-width: 720px){
  .as-cover{ width: 64px; height: 88px; }
  .as-title{ font-size: 18px; }
}

/* Ranking page refresh */
.app-ranking-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.app-ranking-page .nrsus-ranking-page-summary{
  width:100%;
}

.ranking-guest-card{
  padding:24px 22px;
  border-radius:calc(var(--radius) + 12px);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);
  text-align:right;
}

.ranking-guest-card__title{
  margin:0 0 10px;
  font-size:clamp(28px, 5vw, 36px);
  font-weight:900;
}

.ranking-guest-card__desc{
  margin:0;
  color:var(--muted);
  line-height:1.9;
}

.ranking-hero{
  position:relative;
  overflow:hidden;
  padding:24px 22px;
  border-radius:calc(var(--radius) + 12px);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(92,124,255,0.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(120,209,255,0.14), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  direction:rtl;
  text-align:right;
}

.ranking-hero::after{
  content:"";
  position:absolute;
  inset:auto auto -38px -34px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 68%);
  pointer-events:none;
}

.ranking-hero__eyebrow{
  display:flex;
  align-items:center;
  width:fit-content;
  min-height:30px;
  padding:0 12px;
  margin:0 0 12px auto;
  border-radius:999px;
  background:rgba(92,124,255,0.16);
  color:var(--primary);
  font-size:12px;
  font-weight:900;
}

.ranking-hero__title{
  margin:0 0 10px;
  font-size:clamp(28px, 5vw, 36px);
  font-weight:900;
}

.ranking-hero__desc{
  margin:0;
  max-width:760px;
  color:var(--muted);
  line-height:1.95;
}

.ranking-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
  justify-content:flex-start;
}

.ranking-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  font-size:12px;
  font-weight:800;
}

.ranking-tabs{
  position:sticky;
  top:12px;
  z-index:12;
  margin:0;
  padding:10px;
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.ranking-tabs .tab{
  min-height:48px;
  border-radius:18px;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.ranking-tabs .tab:hover{
  transform:translateY(-1px);
  border-color:rgba(92,124,255,0.26);
}

.ranking-tabs .tab.is-active{
  background:linear-gradient(135deg, rgba(92,124,255,0.22), rgba(92,124,255,0.12));
  border-color:rgba(92,124,255,0.38);
  box-shadow:0 14px 30px rgba(92,124,255,0.16);
}

.ranking-surface{
  position:relative;
}

.ranking-empty{
  padding:24px 18px;
}

.app-ranking-page .nrsus-wrap.nrsus-page{
  max-width:100%;
}

@media (max-width: 640px){
  .ranking-hero{ padding:20px 16px; }
  .ranking-hero__chips{ gap:8px; }
  .ranking-tabs{ top:8px; padding:8px; }
}


/* === Header notifications preview panel === */
.theam-notify{
  position: relative;
  display: inline-flex;
}

.theam-notify-panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: min(430px, calc(100vw - 22px));
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(10,14,22,.98), rgba(6,10,18,.98));
  box-shadow: 0 28px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  isolation: isolate;
  z-index: 95;
  direction: rtl;
}

.theam-notify-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px 160px at 14% 0%, rgba(62,166,255,.22) 0%, rgba(62,166,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
}

html[data-theme="day"] .theam-notify-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88)),
    linear-gradient(180deg, #ffffff, #f3f7fd);
  box-shadow: 0 22px 46px rgba(15,23,42,.16);
}

html[data-theme="paper"] .theam-notify-panel{
  background:
    linear-gradient(180deg, rgba(255,251,244,.96), rgba(250,244,232,.92)),
    linear-gradient(180deg, #fffaf1, #f4ebdc);
  box-shadow: 0 22px 46px rgba(88,69,42,.14);
}

html[data-theme="day"] .theam-notify-panel::before,
html[data-theme="paper"] .theam-notify-panel::before{
  background:
    radial-gradient(240px 160px at 14% 0%, rgba(26,115,232,.14) 0%, rgba(26,115,232,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
}

.theam-notify-panel.is-open{
  animation: theamNotifyDrop .18s ease-out both;
}

@keyframes theamNotifyDrop{
  from{ opacity:0; transform: translateY(-8px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.theam-notify-panel__head,
.theam-notify-panel__footer,
.theam-notify-panel__body{
  position: relative;
  z-index: 1;
}

.theam-notify-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 14px;
  border-bottom: 1px solid var(--border-2);
}

.theam-notify-panel__titlebox{
  display:grid;
  gap:4px;
  min-width:0;
}

.theam-notify-panel__title{
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.theam-notify-panel__subtitle{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theam-notify-panel__headlink{
  flex:0 0 auto;
  min-width: 42px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border:1px solid rgba(92,124,255,.22);
  background: rgba(92,124,255,.10);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
}

.theam-notify-panel__body{
  padding: 10px;
  overflow:auto;
  max-height: min(52vh, 390px);
}

.theam-notify-list{
  display:grid;
  gap:10px;
}

.theam-notify-item{
  display:flex;
  direction: rtl;
  align-items:flex-start;
  gap:12px;
  padding: 13px 14px;
  border-radius: 20px;
  border:1px solid var(--border-2);
  background: var(--btn-bg-2);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.theam-notify-item:hover{
  transform: translateY(-1px);
  border-color: rgba(92,124,255,.26);
  background: var(--btn-bg-3);
}

.theam-notify-item.is-unread{
  border-color: rgba(92,124,255,.26);
  box-shadow: inset 0 0 0 1px rgba(92,124,255,.10);
}

.theam-notify-item__icon{
  order: 3;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(92,124,255,.14);
  color: var(--text);
  border:1px solid rgba(92,124,255,.20);
  flex:0 0 auto;
}

.theam-notify-item__icon svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

html[data-theme="day"] .theam-notify-item__icon,
html[data-theme="paper"] .theam-notify-item__icon{
  color: #1a56c5;
  background: rgba(26,115,232,.10);
  border-color: rgba(26,115,232,.14);
}

.theam-notify-item__content{
  order: 1;
  flex: 1 1 auto;
  min-width:0;
  display:grid;
  gap:6px;
  text-align:right;
}

.theam-notify-item__row{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items:start;
  gap:8px 10px;
  min-width:0;
}

.theam-notify-item__title{
  min-width:0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--text);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.theam-notify-item__time{
  flex:0 0 auto;
  align-self:start;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.theam-notify-item__meta{
  font-size: 12px;
  line-height: 1.6;
  color: var(--primary);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.theam-notify-item__excerpt{
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.theam-notify-item__dot{
  order: 2;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  margin-top: 7px;
  background: #3ea6ff;
  box-shadow: 0 0 0 6px rgba(62,166,255,.10);
}

.theam-notify-item:not(.is-unread) .theam-notify-item__dot{
  opacity:0;
}

.theam-notify-state{
  display:grid;
  gap:10px;
  padding: 12px 4px 6px;
}

.theam-notify-state.is-empty,
.theam-notify-state.is-login,
.theam-notify-state.is-error{
  place-items:center;
  text-align:center;
  gap:12px;
  padding: 24px 18px 18px;
}

.theam-notify-state__icon{
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--btn-bg-2);
  border:1px solid var(--border-2);
  color: var(--muted);
}

.theam-notify-state__icon svg{
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.theam-notify-state__title{
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.theam-notify-state__text{
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 270px;
}

.theam-notify-state__action{
  min-width: 152px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border:1px solid rgba(92,124,255,.22);
  background: rgba(92,124,255,.12);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 800;
}

.theam-notify-skeleton{
  height: 84px;
  border-radius: 20px;
  border:1px solid var(--border-2);
  background:
    linear-gradient(100deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.03) 63%),
    var(--btn-bg-2);
  background-size: 220% 100%;
  animation: theamNotifyShimmer 1.15s linear infinite;
}

html[data-theme="day"] .theam-notify-skeleton,
html[data-theme="paper"] .theam-notify-skeleton{
  background:
    linear-gradient(100deg, rgba(26,115,232,.03) 25%, rgba(26,115,232,.08) 37%, rgba(26,115,232,.03) 63%),
    var(--btn-bg-2);
  background-size: 220% 100%;
}

@keyframes theamNotifyShimmer{
  from{ background-position: 220% 0; }
  to{ background-position: -20% 0; }
}

.theam-notify-panel__footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 54px;
  padding: 0 18px;
  border-top:1px solid var(--border-2);
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  background: linear-gradient(180deg, rgba(92,124,255,.10), rgba(92,124,255,.05));
}

.theam-notify-panel__footer::after{
  content:"←";
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 640px){
  .theam-notify-panel{
    position: fixed;
    top: calc(env(safe-area-inset-top) + 54px);
    right: 10px;
    left: auto;
    width: min(338px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    height: min(460px, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px));
    max-height: min(460px, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px));
    border-radius: 20px;
  }

  .theam-notify-panel__head{
    gap: 10px;
    padding: 13px 14px 11px;
  }

  .theam-notify-panel__title{
    font-size: 15px;
  }

  .theam-notify-panel__subtitle{
    font-size: 11px;
  }

  .theam-notify-panel__headlink{
    min-width: 38px;
    height: 31px;
    padding: 0 10px;
    font-size: 11px;
  }

  .theam-notify-panel__body{
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 8px 6px;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .theam-notify-list{
    gap: 8px;
    align-content: start;
  }

  .theam-notify-item{
    gap: 9px;
    padding: 10px 11px;
    border-radius: 16px;
  }

  .theam-notify-item__icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .theam-notify-item__icon svg{
    width: 18px;
    height: 18px;
  }

  .theam-notify-item__row{
    grid-template-columns: minmax(0,1fr);
    gap: 5px;
  }

  .theam-notify-item__title{
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  .theam-notify-item__time,
  .theam-notify-item__meta,
  .theam-notify-item__excerpt{
    font-size: 11px;
  }

  .theam-notify-panel__footer{
    min-height: 48px;
    padding: 0 14px calc(env(safe-area-inset-bottom) * .4);
    font-size: 13px;
  }
}


/* DMCA page */
.app-dmca-page{
  display:flex;
  flex-direction:column;
  gap:18px;
  direction:ltr;
}

.dmca-hero{
  position:relative;
  overflow:hidden;
  padding:24px 22px;
  border-radius:calc(var(--radius) + 12px);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(92,124,255,0.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(120,209,255,0.14), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  text-align:left;
}

.dmca-hero::after{
  content:"";
  position:absolute;
  inset:auto -26px -48px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 68%);
  pointer-events:none;
}

.dmca-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  margin:0 0 12px;
  border-radius:999px;
  background:rgba(92,124,255,0.16);
  color:var(--primary);
  font-size:12px;
  font-weight:900;
}

.dmca-hero__title{
  margin:0 0 10px;
  font-size:clamp(28px, 5vw, 38px);
  font-weight:900;
  line-height:1.18;
}

.dmca-hero__desc{
  margin:0;
  max-width:820px;
  color:var(--muted);
  line-height:1.9;
}

.dmca-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
}

.dmca-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  font-size:12px;
  font-weight:800;
}

.dmca-contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.dmca-contact-card,
.dmca-surface{
  border-radius:calc(var(--radius) + 10px);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow);
}

.dmca-contact-card{
  padding:18px;
}

.dmca-contact-card__label{
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dmca-contact-card__value,
.dmca-contact-card__value a{
  color:var(--text);
  font-size:16px;
  font-weight:900;
  word-break:break-word;
  text-decoration:none;
}

.dmca-contact-card__value a:hover{
  color:var(--primary);
}

.dmca-tabs{
  position:sticky;
  top:12px;
  z-index:12;
  margin:0;
  padding:10px;
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.dmca-tabs .tab{
  min-height:48px;
  border-radius:18px;
  font-weight:800;
}

.dmca-tabs .tab.is-active{
  background:linear-gradient(135deg, rgba(92,124,255,0.22), rgba(92,124,255,0.12));
  border-color:rgba(92,124,255,0.38);
  box-shadow:0 14px 30px rgba(92,124,255,0.16);
}

.dmca-surface{
  padding:22px;
}

.dmca-lang{
  text-align:left;
}

.dmca-lang[dir="rtl"]{
  text-align:right;
}

.dmca-lang__title{
  margin:0 0 14px;
  font-size:clamp(24px, 4vw, 32px);
  font-weight:900;
}

.dmca-lang__intro,
.dmca-lang p{
  margin:0 0 14px;
  color:var(--text);
  line-height:1.95;
}

.dmca-lang__note{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(92,124,255,0.18);
  background:rgba(92,124,255,0.08);
  color:var(--muted);
}

.dmca-section{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.dmca-section:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.dmca-section__title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
}

.dmca-list{
  margin:0;
  padding-left:20px;
  color:var(--text);
}

.dmca-lang[dir="rtl"] .dmca-list{
  padding-left:0;
  padding-right:20px;
}

.dmca-list li{
  margin:0 0 10px;
  line-height:1.9;
}

.dmca-contact-list{
  display:grid;
  gap:10px;
}

.dmca-contact-list strong{
  display:inline-block;
  min-width:128px;
}

.dmca-contact-list a{
  color:var(--primary);
  text-decoration:none;
}

.dmca-contact-list a:hover{
  text-decoration:underline;
}

@media (max-width: 768px){
  .dmca-contact-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .dmca-hero,
  .dmca-surface,
  .dmca-contact-card{
    padding:18px 16px;
  }

  .dmca-tabs{
    top:8px;
    padding:8px;
  }
}