/* Steel Ball V25.1 — unified loader + safe interaction polish */
#loader{
  position:fixed!important;inset:0!important;z-index:99999!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#050608!important;opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s ease,visibility .28s ease!important;
}
#loader::before{
  content:""!important;position:absolute!important;inset:0!important;
  background:linear-gradient(90deg,transparent,rgba(226,184,87,.10),transparent)!important;
  animation:steelBallLoaderSweep 1.05s linear infinite!important;
}
#loader.is-hidden{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
#loader .steel-ball-container{position:relative!important;width:150px!important;height:150px!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important;}
#loader .steel-ball-container::after{content:""!important;position:absolute!important;inset:7px!important;border-radius:50%!important;border:1px solid rgba(226,184,87,.55)!important;box-shadow:0 0 38px rgba(226,184,87,.42)!important;animation:steelBallGlow 1.2s ease-in-out infinite alternate!important;pointer-events:none!important;}
#loader .spin-ball-img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 0 16px rgba(226,184,87,.48))!important;animation:steelBallSpin .9s linear infinite!important;}
@keyframes steelBallSpin{to{transform:rotate(360deg)}}
@keyframes steelBallGlow{from{transform:scale(.97);opacity:.72}to{transform:scale(1.03);opacity:1}}
@keyframes steelBallLoaderSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Hover feedback is visual only: no width/height/margin/layout changes. */
a,button,.card,.latest-manga-card,.explore-page-item,.filter-option,.login-btn,.search-toggle,.main-btn,.hero-read-btn,.hero-favorite-btn,.footer-title-link{
  -webkit-tap-highlight-color:transparent;
}
button,a,.card,.latest-manga-card,.explore-page-item,.filter-option,.login-btn,.search-toggle,.main-btn,.hero-read-btn,.hero-favorite-btn,.footer-title-link{
  transition-property:background-color,border-color,color,box-shadow,opacity,transform,filter!important;
}
button:focus-visible,a:focus-visible,.card:focus-within,.latest-manga-card:focus-within,.explore-page-item:focus-within{
  outline:2px solid rgba(226,184,87,.62);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  #loader::before,#loader .steel-ball-container::after,#loader .spin-ball-img{animation:none!important;}
}


/* V26.2 — footer is identical to desktop on every viewport */
@media(max-width:700px){
  .site-footer{
    width:min(1160px,calc(100% - 56px))!important;
    max-width:none!important;
    margin:52px auto 96px!important;
    padding:18px 10px 12px!important;
    box-sizing:border-box!important;
  }
  .footer-main.footer-main-simple{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;direction:rtl!important;min-height:0!important;}
  .footer-main-simple .footer-col{padding:0 24px!important;min-width:0!important;}
  .footer-main-simple .footer-col:not(:last-child)::after{top:3px!important;bottom:3px!important;}
  .footer-title-link{font-size:12px!important;padding:3px 0!important;}
  .footer-disclaimer{margin-top:12px!important;padding-top:10px!important;}
  .footer-disclaimer p{font-size:9px!important;line-height:1.65!important;}
  .footer-copy{font-size:10px!important;}
}
@media(max-width:430px){
  .site-footer{width:calc(100% - 28px)!important;margin-bottom:96px!important;}
  .footer-main-simple .footer-col{padding:0 13px!important;}
  .footer-title-link{font-size:10px!important;}
  .footer-disclaimer p{font-size:8px!important;}
  .footer-copy{font-size:9px!important;}
}

/* =========================================================
   V26.6 — ONE MOBILE APP BAR ON EVERY PAGE
   The reader and all site pages use identical geometry and typography.
   ========================================================= */
@media(max-width:700px){
  :root{--mobile-footer-h:74px;}
  .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:var(--mobile-footer-h)!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;margin:0!important;padding:4px 3px calc(4px + env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    border:0!important;border-top:1px solid rgba(226,184,87,.14)!important;
    border-radius:0!important;background:#090a0d!important;
    box-shadow:0 -8px 26px rgba(0,0,0,.35)!important;
    z-index:9990!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .mobile-bottom-item{
    position:relative!important;min-width:0!important;width:100%!important;height:100%!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:10px!important;
    background:transparent!important;box-shadow:none!important;transform:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:4px!important;color:#aaa!important;text-decoration:none!important;
    font-family:'Cairo','Noto Kufi Arabic','Segoe UI',sans-serif!important;
    font-size:10px!important;font-weight:900!important;line-height:1.15!important;
  }
  .mobile-bottom-item i{
    display:block!important;margin:0!important;font-size:18px!important;line-height:1!important;
    color:#96979d!important;transform:none!important;
  }
  .mobile-bottom-item:hover{background:transparent!important;color:#aaa!important;box-shadow:none!important;transform:none!important;}
  .mobile-bottom-item.active{background:rgba(226,184,87,.085)!important;color:#fff!important;box-shadow:none!important;}
  .mobile-bottom-item.active i{color:var(--gold-2)!important;transform:none!important;}
  .mobile-bottom-item.active::after{
    content:""!important;position:absolute!important;left:50%!important;bottom:3px!important;
    width:24px!important;height:2px!important;border-radius:999px!important;background:var(--gold)!important;
    transform:translateX(-50%)!important;
  }
  .reader-controls + .mobile-bottom-nav{z-index:9990!important;}
}


/* V48 requested-only fixes: two-line titles without changing card geometry. */
.latest-manga-meta h3{
  white-space:normal !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow-wrap:anywhere !important;
}
#all-manga-container.catalog-grid .manga-title{
  white-space:normal !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow-wrap:anywhere !important;
}

/* Keep large URL previews cheap to paint/scroll. */
.chapter-form .link-preview-item{content-visibility:auto;contain-intrinsic-size:58px;}

/* Loader reliability: same visual design, cheap fade-out, no touch-blocking overlay. */
#loader.is-hiding{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
@media(max-width:700px){#loader{transition:opacity .18s ease,visibility .18s ease!important;}#loader::before{animation-duration:1.05s!important;}}


/* Reader loader stability: same Steel Ball visual, fixed geometry from first paint.
   Prevent the global 150px override from producing a one-frame oversized ball. */
body.reader-page #loader .steel-ball-container{width:150px!important;height:150px!important;}
body.reader-page #loader .steel-ball-container::after{inset:7px!important;}
body.reader-page #loader .spin-ball-img{width:100%!important;height:100%!important;}

/* =========================================================
   V48 — REAL DEVICE MOBILE BOTTOM BAR RESPONSIVE FIX
   Only the mobile bottom navigation is adjusted here.
   Uses fluid geometry + device safe-area so the same bar keeps
   its proportions on narrow, normal and large phone screens.
   ========================================================= */
@media (max-width:700px){
  :root{
    --mobile-footer-content-h:clamp(62px,16vw,74px);
    --mobile-footer-h:calc(var(--mobile-footer-content-h) + env(safe-area-inset-bottom,0px));
  }

  .mobile-bottom-nav{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:var(--mobile-footer-h)!important;
    min-height:var(--mobile-footer-h)!important;
    max-height:none!important;
    margin:0!important;
    padding:4px max(3px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(3px,env(safe-area-inset-left,0px))!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:minmax(0,1fr)!important;
    gap:0!important;
    overflow:hidden!important;
    transform:translateZ(0)!important;
    -webkit-transform:translateZ(0)!important;
  }

  .mobile-bottom-item{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:100%!important;
    margin:0!important;
    padding:0 clamp(2px,.8vw,6px)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    gap:clamp(3px,.9vw,5px)!important;
    font-size:clamp(9px,2.5vw,11px)!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }

  .mobile-bottom-item span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .mobile-bottom-item i{
    flex:0 0 auto!important;
    font-size:clamp(17px,5vw,21px)!important;
    line-height:1!important;
  }

  .mobile-bottom-item.active{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }

  .mobile-bottom-item.active::after{
    bottom:max(3px,env(safe-area-inset-bottom,0px))!important;
  }

  body{
    padding-bottom:var(--mobile-footer-h)!important;
  }
}

/* Extra-small phones: keep four tabs comfortably inside the viewport. */
@media (max-width:360px){
  .mobile-bottom-item{
    padding:0 1px!important;
    font-size:9px!important;
  }
  .mobile-bottom-item i{font-size:17px!important;}
}

/* =========================================================
   V48.1 — FINAL REAL-PHONE BOTTOM BAR FIX
   Fixed only the mobile app bar. No page/content/header changes.
   The bar uses CSS viewport dimensions (not physical pixels), four equal
   tracks and a separate safe-area strip so Android/iPhone sizes stay stable.
   ========================================================= */
@media (max-width:700px){
  :root{
    --sb-bottom-content-h:72px;
    --sb-bottom-safe:env(safe-area-inset-bottom,0px);
    --sb-bottom-total-h:calc(var(--sb-bottom-content-h) + var(--sb-bottom-safe));
  }

  .mobile-bottom-nav{
    position:fixed!important;
    inset:auto 0 0 0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--sb-bottom-total-h)!important;
    min-height:var(--sb-bottom-total-h)!important;
    max-height:var(--sb-bottom-total-h)!important;
    margin:0!important;
    padding:0 0 var(--sb-bottom-safe)!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:var(--sb-bottom-content-h)!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    gap:0!important;
    overflow:hidden!important;
    border:0!important;
    border-top:1px solid rgba(226,184,87,.14)!important;
    border-radius:0!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  .mobile-bottom-item,
  .mobile-bottom-item.account-nav-item,
  .mobile-bottom-item.active,
  .mobile-bottom-item.account-nav-item.active{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--sb-bottom-content-h)!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 2px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    transform:none!important;
  }

  .mobile-bottom-item span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:0!important;
    overflow:hidden!important;
    text-align:center!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    line-height:1.15!important;
  }

  .mobile-bottom-item i{
    flex:0 0 auto!important;
    margin:0!important;
    line-height:1!important;
    transform:none!important;
  }

  .mobile-bottom-item.active::after,
  .mobile-bottom-item.account-nav-item.active::after{
    left:50%!important;
    bottom:5px!important;
    transform:translateX(-50%)!important;
  }

  body{padding-bottom:var(--sb-bottom-total-h)!important;}
}

@media (max-width:360px){
  :root{--sb-bottom-content-h:68px;}
  .mobile-bottom-item,
  .mobile-bottom-item.account-nav-item,
  .mobile-bottom-item.active,
  .mobile-bottom-item.account-nav-item.active{gap:3px!important;padding:0 1px!important;font-size:9px!important;}
  .mobile-bottom-item i{font-size:17px!important;}
}
\n\n/* FINAL 100% DESKTOP SCALE — matches the established pre-deploy visual scale.\n   This intentionally emulates the old 80% browser appearance in CSS, so users\n   can keep Chrome at its normal 100% zoom. Mobile is untouched. */\n@media (min-width:701px){\n  html{overflow-x:hidden!important;}\n  body{zoom:.8!important;width:125%!important;}\n}\n