:root{
  --bg:#0c0c10;
  --bg-soft:#12121a;
  --text:#e9e9ee;
  --muted:#b4b4c0;
  --accent:#6a39ff;
  --card:#14141d;
  --border:#232334;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Cairo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.7}
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.site-header{position:sticky;top:0;background:rgba(12,12,16,.85);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border);z-index:20}
.brand img{display:block}
.search-box{display:flex;gap:8px}
.search-box input{background:var(--bg-soft);color:var(--text);border:1px solid var(--border);padding:10px 12px;border-radius:8px;min-width:280px}
.search-box button{background:var(--accent);border:none;padding:10px 16px;border-radius:8px;color:#fff;font-weight:700;cursor:pointer}
.site-footer{border-top:1px solid var(--border);margin-top:60px;padding:24px 0;color:var(--muted)}

.hero h1{font-size:28px;margin:24px 0}
.grid.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.grid.cards.sm{grid-template-columns:repeat(8,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.2s transform}
.card:hover{transform:translateY(-3px)}
.cover{background-size:cover;background-position:center;height:180px}
.grid.cards.sm .cover{height:140px}
.card-body{padding:10px}
.card h3{font-size:16px;margin:0 0 6px 0}
.card .meta{color:var(--muted);font-size:13px}

.mt-4{margin-top:32px}

.manga-hero .info{display:grid;grid-template-columns:160px 1fr;gap:20px;background:linear-gradient(180deg,rgba(106,57,255,0.15),transparent);padding:20px;border:1px solid var(--border);border-radius:14px}
.manga-cover{width:160px;height:220px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;margin:0 4px 4px 0;background:var(--bg-soft);font-size:12px}
.meta-line{display:flex;gap:16px;color:var(--muted);margin:10px 0}
.cta{display:flex;gap:10px;margin:10px 0}
.btn{background:var(--accent);padding:10px 16px;border:none;border-radius:10px;color:#fff;cursor:pointer;font-weight:700;display:inline-block}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.views{color:var(--muted)}

.chapters-list{display:flex;flex-direction:column;margin-top:10px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.chapter-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.chapter-row:hover{background:#171723}
.chapter-row .muted{color:var(--muted)}

.chapter-header,.chapter-footer{display:flex;justify-content:space-between;align-items:center;margin:16px 0}
.reader .page{width:100%;height:auto;display:block;margin:0 auto 10px auto;max-width:980px;border:1px solid var(--border);border-radius:6px;background:#000}
.breadcrumb a{color:var(--muted)}
.rating{display:flex;align-items:center;gap:8px}
.stars{position:relative;width:120px;height:22px;background:linear-gradient(90deg,#444 50%,transparent 50%);background-size:24px 100%;border-radius:4px;overflow:hidden;border:1px solid var(--border);cursor:pointer}
.stars::before{content:'★★★★★';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#333;font-size:16px;letter-spacing:2px}
.stars-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}

@media (max-width: 1000px){
  .grid.cards{grid-template-columns:repeat(3,1fr)}
  .grid.cards.sm{grid-template-columns:repeat(4,1fr)}
  .manga-hero .info{grid-template-columns:120px 1fr}
  .manga-cover{width:120px;height:170px}
}
.social a{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;color:var(--text)} .social a:hover{background:var(--bg-soft)} .brand img{display:block;}

/* Light Theme */
.theme-light{
  --bg:#f6f7fb;
  --bg-soft:#ffffff;
  --text:#1a1a23;
  --muted:#5e6270;
  --accent:#6a39ff;
  --card:#ffffff;
  --border:#e6e7ee;
}
.theme-light .site-header{background:rgba(255,255,255,.9); border-bottom:1px solid var(--border)}
.theme-light .chapter-row{background:#fff}

/* Icon button (theme toggle) */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer
}
.icon-btn:hover{background:var(--bg-soft)}
.icon-btn .icon-sun{display:none}
.theme-light .icon-btn .icon-sun{display:block}
.theme-light .icon-btn .icon-moon{display:none}
.social a,.social-link{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;color:var(--text)}
.social a:hover,.social-link:hover{background:var(--bg-soft)}

/* ??? ?????? */
.brand img{
  height: 56px;      /* ???? 56 ?? 64 ??? ???? */
  width: auto;
  display: block;
}

/* ??? ???????? */
@media (max-width: 768px){
  .brand img{ height: 40px; }
}


/* -------------------------
   أساسيات الاستجابة للجوال
--------------------------*/
html{ font-size: clamp(14px, 1.8vw, 16px); }
img{ max-width:100%; height:auto; }

/* حواف آمنة للهواتف ذات النوتش */
body{
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.site-header{ padding-top: env(safe-area-inset-top, 0); }

/* الحاوية العامة */
:root{ --gutter: 12px; }
.container{ width: min(1200px, 100% - var(--gutter)*2); margin-inline:auto; }

/* رأس الموقع */
.site-header{ position: sticky; top:0; z-index: 50; backdrop-filter: saturate(130%) blur(6px); }
.site-header .container{ gap:8px; }
.brand img{ height: 48px; width:auto; display:block; }
@media (max-width: 768px){
  .brand img{ height: 34px; }
}

/* صندوق البحث: مخفي على الجوال ويُفتح بزر */
.search-box{ display:flex; gap:6px; min-width: 240px; flex:1; }
.search-box input{ flex:1; }
@media (max-width: 768px){
  .search-box{ display:none; }
  .search-box.is-open{ display:flex; width:100%; }
}

/* زر بحث للجوال */
.mob-only{ display:none; }
@media (max-width: 768px){ .mob-only{ display:inline-flex; } }

/* أزرار قابلة للنقر على الجوال */
.btn, .icon-btn{ min-width:44px; min-height:44px; }

/* شبكات الكروت (صفحة الرئيسية/البحث/تفاصيل مانجا) */
.manga-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
}
.manga-card .cover{ aspect-ratio: 3 / 4; object-fit: cover; width:100%; border-radius:10px; }
@media (max-width: 768px){
  .manga-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .manga-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .manga-grid{ grid-template-columns: 1fr; }
}

/* تفاصيل المانجا */
.manga-hero{
  display:grid; grid-template-columns: 220px 1fr; gap:16px; align-items:start;
}
@media (max-width: 768px){
  .manga-hero{ grid-template-columns: 1fr; }
  .manga-hero .cover{ max-width: 260px; margin-inline:auto; }
}

/* قائمة الفصول */
.chapter-row{ display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); }
@media (max-width: 600px){
  .chapter-row{ flex-direction:column; align-items:stretch; gap:6px; }
}

/* قارئ الفصول (الصور) */
.reader{ max-width: 980px; margin: 12px auto; }
.reader .page{ margin-bottom: 8px; }
.reader img{ width:100%; height:auto; display:block; touch-action: pan-y; object-fit: contain; }
@media (max-width: 768px){
  .reader{ margin-top: 8px; }
}

/* جداول لوحة التحكم — قابلة للتمرير على الجوال */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:8px; border-bottom:1px solid var(--border); }
@media (max-width: 768px){
  .table{ display:block; overflow-x:auto; white-space:nowrap; }
  .table thead{ position: sticky; top: 0; background: var(--bg-soft); }
}

/* نماذج لوحة التحكم */
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }

/* تحسينات بسيطة */
.card{ border-radius:12px; }
.chapter-row a.btn{ width: fit-content; }

/* تحسين الهيدر على الجوال */
@media (max-width: 768px){
  .site-header .container{ flex-wrap: wrap; }
}

/* ======= تحسين العرض على الديسكتوب/الشاشات الكبيرة ======= */

/* حاوية أوسع قليلاً للديسكتوب */
:root{ --gutter: 16px; }
.container{ width: min(1280px, 100% - var(--gutter)*2); margin-inline:auto; }

/* شبكة الكروت: توزع نفسها تلقائيًا حسب المساحة */
.grid.cards{ 
  display:grid; 
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); 
  gap:16px; 
}
.grid.cards.sm{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
}

/* عنوان قسم واضح ومسافات مناسبة */
section > h1, section > h2{ margin: 18px 0 14px; }

/* بطل صفحة المانجا: تخطيط أقوى على الديسكتوب وأنيق على الجوال */
.manga-hero .info{
  max-width: 1100px;
  margin-inline: auto;
  grid-template-columns: 260px 1fr;
  align-items: start;
  padding: 22px;
  background: radial-gradient(1200px 300px at 100% 0%, rgba(106,57,255,.18), transparent), var(--bg-soft);
  box-shadow: 0 8px 30px rgba(0,0,0,.20);
}
@media (min-width: 1280px){
  .manga-hero .info{ grid-template-columns: 300px 1fr; }
}
@media (max-width: 900px){
  .manga-hero .info{ grid-template-columns: 1fr; }
  .manga-cover{ margin-inline:auto; }
}

/* قارئ الفصول: أعرض وأجمل على الديسكتوب، ويبقى مريح على الجوال */
.reader{ max-width: 1100px; margin: 12px auto; }
@media (min-width: 1440px){
  .reader{ max-width: 1200px; }
}
.reader .page{ border-radius:10px; }

/* أزرار الدعوة للفعل */
.cta{ flex-wrap: wrap; }
.cta .btn{ min-width: 160px; text-align: center; }

/* صف الفصل في القائمة: لا ينكسر على الديسكتوب، ويتكدّس على الموبايل */
.chapter-row{ gap:10px; }
@media (min-width: 901px){
  .chapter-row{ flex-direction: row; }
}

/* الهيدر: تأكد أن العناصر ما تتزاحم على الديسكتوب */
@media (min-width: 1024px){
  .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .search-box{ display:flex !important; max-width:520px; }
}

/* ضبط اللوجو على الديسكتوب */
.brand img{ height: 56px; }
@media (max-width: 768px){ .brand img{ height: 34px; } }

/* تفاصيل نصوص وصف المانجا */
.manga-hero p{ text-wrap: pretty; }
.meta-line{ flex-wrap: wrap; row-gap: 6px; }
/* Sidebar (desktop) */
.manga-sidebar{
  display:none;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  min-width:240px;
}
@media (min-width: 1024px){
  .manga-hero .info{ grid-template-columns: 260px 1fr 280px; }
  .manga-sidebar{ display:block; }
}
.manga-sidebar h3{ margin:6px 0 10px; }
.sidebar-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.sidebar-list li a{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg);
}
.sidebar-list .title{ font-weight:700; margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-list .sub{ color:var(--muted); font-size:.9em; }
/* Float navigation buttons */
.float-nav{
  position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; gap:8px;
}
.float-btn{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:20px; cursor:pointer;
}
.float-btn:hover{ background:var(--card); }
@media (max-width: 640px){
  .float-nav{ right:10px; bottom:10px; }
}

/* Page counter for paged mode */
.page-counter{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:20px; background:rgba(0,0,0,.5); color:#fff; padding:4px 10px; border-radius:10px; z-index:59;
  font-weight:700; backdrop-filter: blur(4px);
}

/* Paged mode hides all but one image */
.paged-mode .reader .page{ display:none; }
.paged-mode .reader .page.is-current{ display:block; }
/* Segmented toggle */
.segmented{
  display:inline-flex; gap:0; border:1px solid var(--accent);
  border-radius:12px; padding:2px; background:transparent;
}
.seg-btn{
  border:none; background:transparent; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
}
.seg-btn[aria-selected="true"]{
  background:var(--accent); color:#fff;
}
.seg-btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }
/* Reader toolbar */
.reader-toolbar{
  position: sticky; top: 58px; z-index: 40;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:8px 10px;
}
.progress-wrap{ display:flex; align-items:center; gap:8px; flex:1; }
.progress{ flex:1; height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.progress .bar{ height:100%; width:0%; background:var(--accent); transition:width .2s; }
.toolbar-share{ display:flex; gap:8px; }
.icon-btn.share-x, .icon-btn.share-tg{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border); display:inline-grid; place-items:center;
}

/* Dropzone (admin) */
.dropzone{ border:2px dashed var(--border); border-radius:12px; padding:16px; text-align:center; }
.dropzone.drag{ background:rgba(255,255,255,.04); }
.pages-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:10px; }
.page-item{ border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.page-item img{ width:100%; display:block; aspect-ratio: 3/4; object-fit:cover; }
.pi-tools{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; }

/* Admin KPIs */
.admin-kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin:10px 0 16px; }
.kpi{ background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:10px; text-align:center; }
/* إظهار عدّاد الصفحات فقط عندما نكون في وضع الصفحات */
.page-counter{ display:none; }
.paged-mode .page-counter{ display:block; }
.icon-btn svg{ width:18px; height:18px; display:block; }
.icon-btn svg{ width:18px; height:18px; display:block; }
.icon-btn svg{ width:18px; height:18px; display:block; }