:root{
  /* Dark theme defaults (also mirrored below) */
  --bg: #0e1a14;
  --panel: #13251c;
  --panel-2: #0f1f18;
  --text: #ecf6f0;
  --muted: #b7d0c2;
  --brand: #16a34a; /* brand green */
  --brand-2: #22c55e;
  --chip: #163224;
  --danger: #ef4444;
  --ok: #6ee7b7;
  --border: #1f3b2d;
  --focus: #86efac;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --grad-header-start: rgba(12,23,18,.9);
  --grad-header-end: rgba(12,23,18,.65);
  --card-grad-start: #153628;
  --card-grad-end: #112a20;
  --thumb-bg: #07140e;

  /* Active bar (blue ribbon) */
  --act-blue-1: rgba(37, 99, 235, .14);
  --act-blue-2: rgba(37, 99, 235, .08);
  --act-blue-br: rgba(37, 99, 235, .35);

  /* Hint native widgets */
  color-scheme: dark;
}

html[data-theme="dark"]{
  --bg: #0e1a14;
  --panel: #13251c;
  --panel-2: #0f1f18;
  --text: #ecf6f0;
  --muted: #b7d0c2;
  --brand: #16a34a;
  --brand-2: #22c55e;
  --chip: #163224;
  --danger: #ef4444;
  --ok: #6ee7b7;
  --border: #1f3b2d;
  --focus: #86efac;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --grad-header-start: rgba(12,23,18,.9);
  --grad-header-end: rgba(12,23,18,.65);
  --card-grad-start: #153628;
  --card-grad-end: #112a20;
  --thumb-bg: #07140e;
  /* blue ribbon tints */
  --act-blue-1: rgba(37, 99, 235, .14);
  --act-blue-2: rgba(37, 99, 235, .08);
  --act-blue-br: rgba(37, 99, 235, .35);
}



/* Light theme overrides */
html[data-theme="light"]{
  --bg: #f4faf7;
  --panel: #ffffff;
  --panel-2: #f6fbf8;
  --text: #0b231a;
  --muted: #5f6f66;
  --brand: #16a34a;
  --brand-2: #22c55e;
  --chip: #e7f3ed;
  --danger: #dc2626;
  --ok: #059669;
  --border: #d9e7df;
  --focus: #86efac;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --grad-header-start: rgba(255,255,255,.85);
  --grad-header-end: rgba(255,255,255,.65);
  --card-grad-start: #ffffff;
  --card-grad-end: #f5faf7;
  --thumb-bg: #eaf5ef;

  --act-blue-1: rgba(37, 99, 235, .10);
  --act-blue-2: rgba(37, 99, 235, .06);
  --act-blue-br: rgba(37, 99, 235, .25);

  color-scheme: light;
}

[hidden]{ display:none !important; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% -10%, #1a3a2b33, transparent 60%),
              linear-gradient(180deg, #0c1712 0%, #0b1511 30%, var(--bg) 100%);
  color:var(--text);
}
/* Explicit body override for light (kept) */
html[data-theme="light"] body{
  background: radial-gradient(1200px 600px at 20% -10%, #cfeadd55, transparent 60%),
              linear-gradient(180deg, #f8fdfa 0%, #f5fbf8 30%, var(--bg) 100%);
}
/* Explicit body override for dark (mirrors defaults; helps some engines) */
html[data-theme="dark"] body{
  background: radial-gradient(1200px 600px at 20% -10%, #1a3a2b33, transparent 60%),
              linear-gradient(180deg, #0c1712 0%, #0b1511 30%, var(--bg) 100%);
}

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1200px; margin:0 auto; padding:16px 16px 120px}
header.top{position:sticky; top:0; z-index:50; backdrop-filter: saturate(1.2) blur(6px); background: linear-gradient(180deg, var(--grad-header-start), var(--grad-header-end)); border-bottom:1px solid var(--border); box-shadow: var(--shadow);}
.top .bar{display:flex; align-items:center; gap:12px; padding:14px 16px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo svg{width:28px; height:28px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--muted); font-size:12px}
.pill b{color:var(--text)}

.searchbar{flex:1; display:flex; align-items:center}
.searchbar input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel); color:var(--text); outline:none;
}
.searchbar input:focus{border-color:var(--focus); box-shadow:0 0 0 4px rgba(134,239,172,.25)}

.actions{display:flex; gap:8px}
button, .btn{appearance:none; border:none; background:var(--brand); color:#072014; padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer; transition:.15s transform ease, .15s filter ease; box-shadow: var(--shadow);}    
html[data-theme="light"] button, html[data-theme="light"] .btn{color:#05331f}
.btn.secondary{background:var(--panel); color:var(--text); border:1px solid var(--border)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
button:hover, .btn:hover{filter:brightness(1.07)}
button:active, .btn:active{transform:translateY(1px)}

/* Blue ribbon for active categories */
.activebar{
  margin:10px auto 0;
  padding:10px 14px;
  max-width:1200px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-radius:12px;
  background: linear-gradient(180deg, var(--act-blue-1), var(--act-blue-2));
  border:1px solid var(--act-blue-br);
}
.activebar .label{ font-size:12px; color:var(--muted) }
.activebar .tag{
  font-weight:800; letter-spacing:.2px;
  padding:6px 12px; border-radius:999px;
  background: var(--panel); color: var(--text);
  border:1px solid var(--border);
}
.activebar .tag:hover{ filter:brightness(1.05); cursor:pointer }

main{display:grid; grid-template-columns: 300px 1fr; gap:16px; margin-top:14px}

aside.filters{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; position:sticky; top:96px; align-self:start}

/* Make the left sidebar scrollable when it becomes taller than the viewport */
@media (min-width: 921px){
  aside.filters{
    /* keep it sticky */
    position: sticky;
    top: 96px;

    /* NEW: independent scroll area */
    max-height: calc(100vh - 96px - 24px); /* tweak the last number if you see clipping */
    overflow: auto;
    padding-right: 6px;         /* space for scrollbar so content doesn't jump */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* If categories get very long, make *only* the categories list scroll too */
  aside.filters .section:first-of-type .chips{
    max-height: 50vh;   /* adjust to taste: 40–60vh works well */
    overflow: auto;
    padding-right: 4px;
  }
}

/* Better behavior on browsers with modern viewport units (Safari iOS etc.) */
@supports (height: 100dvh) {
  @media (min-width: 921px){
    aside.filters{
      max-height: calc(100dvh - 96px - 24px);
    }
  }
}


.section{margin-bottom:14px}
.section h3{margin:10px 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--chip); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--text); cursor:pointer}
html[data-theme="light"] .chip{color:#0b231a}
.chip.active{outline:2px solid var(--brand)}
.chip .x{margin-left:6px; opacity:.8}
.counts{color:var(--muted); font-size:12px}
.inline{display:flex; gap:8px}
.inline > *{flex:1}
select, input[type="date"], input[type="number"], input[type="text"], input[type="time"]{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2); color:var(--text)}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}

.summary{display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px}
.summary .left{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px}
.summary .right{display:flex; gap:10px; align-items:center}

.grid{display:grid; grid-template-columns: repeat( auto-fill, minmax(260px, 1fr) ); gap:14px}
.card{background:linear-gradient(180deg, var(--card-grad-start), var(--card-grad-end)); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.thumb{aspect-ratio:16/9; background:var(--thumb-bg); position:relative}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.6); color:#fff; padding:4px 8px; border-radius:999px; font-size:12px}
html[data-theme="light"] .badge{background:rgba(0,0,0,.45)}
.meta{padding:12px}
.title{font-weight:700; line-height:1.3; margin:0 0 6px}
.meta .small{display:flex; gap:10px; color:var(--muted); font-size:12px; margin-bottom:8px}
.meta .chips{gap:6px}

.empty{opacity:.7; text-align:center; padding:40px 10px; border:1px dashed var(--border); border-radius:16px}

/* Player (Theater mode) */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; padding:24px; z-index:100}
.overlay.show{display:flex}
.player{width:min(1080px, 98vw); background:#000; border-radius:16px; overflow:hidden; box-shadow: var(--shadow); position:relative}
.player header{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:linear-gradient(180deg, rgba(18,38,30,.95), rgba(18,38,30,.6)); color:#fff}
html[data-theme="light"] .player header{background:linear-gradient(180deg, rgba(15,70,40,.85), rgba(15,70,40,.55))}
.player h4{margin:0; font-size:16px}
.controls{display:flex; gap:8px}
.controls .btn{padding:6px 10px}
.iframeWrap{aspect-ratio:16/9; background:#000}
.iframeWrap iframe{width:100%; height:100%; border:0; display:block}

dialog{border:1px solid var(--border); border-radius:16px; background:var(--panel); color:var(--text); width:min(760px, 96vw)}
dialog header{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border)}
dialog .body{padding:14px}
dialog .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
dialog form .row{margin-bottom:10px}

.footerNote{margin-top:14px; color:var(--muted); font-size:12px}

.row{display:flex; gap:8px; align-items:center}
.grow{flex:1}
.right{text-align:right}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

@media (max-width: 920px){
  .activebar{margin:8px 16px 0}
  main{grid-template-columns:1fr}
  aside.filters{position:static}
}


/* --- RTL helpers (Arabic default) --- */
html[dir="rtl"] .top .bar { direction: rtl; }
html[dir="rtl"] .summary { direction: rtl; }
html[dir="rtl"] .row { direction: rtl; }
html[dir="rtl"] .searchbar input { text-align: right; }


/* Arabic typography boost */
html[lang="ar"] body{
  font-family: "Noto Naskh Arabic", "Tajawal", "Segoe UI", "Roboto", "Arial", system-ui, -apple-system, "Helvetica Neue", "Apple Color Emoji","Segoe UI Emoji";
  font-size: 17.5px;
  line-height: 1.6;
}

html[lang="ar"] .section h3{ font-size: 15px; }
html[lang="ar"] .pill{ font-size: 13.5px; }
html[lang="ar"] .chip{ font-size: 13.5px; }
html[lang="ar"] label{ font-size: 13.5px; }
html[lang="ar"] .summary .left{ font-size: 15.5px; }
html[lang="ar"] .searchbar input{ text-align: right; }

/* Admin list table */
.adm-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.adm-table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th,.adm-table td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.adm-table th{position:sticky;top:0;background:var(--panel-2);text-align:left}
.adm-actions{display:flex;gap:6px}


/* Article cards */
.card.article .thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--thumb-bg);
  display: flex;
  align-items: center; justify-content: center;
}
.card.article .thumb img{
  width:100%; height:100%; object-fit: cover; display:block;
}
.card.article .thumb .thumb-placeholder{
  width:100%; height:100%;
  background: repeating-linear-gradient(
    45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 10px,
    transparent 10px, transparent 20px
  );
}
.card.article .siteicon{
  position:absolute; right:8px; bottom:8px;
  padding:6px; border-radius:10px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
html[data-theme="light"] .card.article .siteicon{ background: rgba(0,0,0,.30); }
.card.article .siteicon img{ width:16px; height:16px; display:block; }

/* Section headings above each grid */
.sectionHead{
  display:flex; align-items:center; gap:10px;
  margin:12px 0 8px;
}
.sectionHead h3{ margin:0; font-size:18px; }
.sectionHead .smallCount{ font-size:12px; color:var(--muted); }

/* Article cards (unchanged if you already added these) */
.card.article .thumb{ position:relative; aspect-ratio:16/9; background:var(--thumb-bg); display:flex; align-items:center; justify-content:center; }
.card.article .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card.article .thumb .thumb-placeholder{ width:100%; height:100%;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 10px, transparent 10px, transparent 20px); }
.card.article .siteicon{ position:absolute; right:8px; bottom:8px; padding:6px; border-radius:10px; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
html[data-theme="light"] .card.article .siteicon{ background:rgba(0,0,0,.30); }
.card.article .siteicon img{ width:16px; height:16px; display:block; }

/* === Mobile polish (phones & small tablets) ============================== */
/* Everything here only activates on smaller screens and keeps desktop intact */

@media (max-width: 600px){
  /* Header & topbar */
  .top .bar{ padding:10px 12px; gap:8px }
  .logo svg{ width:22px; height:22px }
  .logo .pill{ display:none }                     /* hide long pill on phones */
  .searchbar input{ padding:10px 12px; font-size:14px }

  /* Layout & filters */
  aside.filters{ padding:12px; border-radius:12px }
  .section{ margin-bottom:12px }
  .section h3{ font-size:12px; letter-spacing:.06em }
  .chips{ gap:6px }
  .chip{ padding:5px 8px; font-size:11.5px }

  /* Active categories ribbon */
  .activebar{ padding:8px 10px; border-radius:10px }
  .activebar .label{ font-size:11.5px }
  .activebar .tag{ padding:5px 10px; font-size:12px }

  /* Cards grid & cards */
  .grid{ gap:10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
  .card{ border-radius:12px }
  .meta{ padding:10px }
  .title{ font-size: clamp(14px, 4.4vw, 16px); line-height:1.3;
          display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
  .meta .small{ font-size:11.5px; gap:8px; flex-wrap:wrap }
  .summary .left{ font-size:13px }

  /* Buttons (compact, still touch‑friendly) */
  .btn{ padding:8px 10px; font-weight:600 }
  .controls .btn{ padding:6px 8px }

  /* Action row inside cards: allow wrapping */
  .card .meta .row{ flex-wrap:wrap; gap:8px }
  .card .meta .row .btn{ flex:1 1 140px }

  /* Player overlay soft rounding */
  .player{ border-radius:12px }
}

/* Ultra‑small phones */
@media (max-width: 360px){
  .grid{ grid-template-columns: 1fr }
  .btn{ padding:7px 9px; font-size:13px }
  .title{ font-size: clamp(13.5px, 5vw, 15px) }
}

/* Arabic typography: slightly smaller & more open on narrow screens */
@media (max-width: 600px){
  html[lang="ar"] body{ font-size:15.5px; line-height:1.6 }
  html[lang="ar"] .section h3,
  html[lang="ar"] .pill,
  html[lang="ar"] .chip,
  html[lang="ar"] label{ font-size:12.5px }
}

/* --- Admin (creator console) tweaks ------------------------------------- */
@media (max-width: 680px){
  .admin-wrap{ padding:12px }
  .grid3, .grid2{ grid-template-columns:1fr }   /* stack form fields */
  .preview img{ width:96px; height:54px }       /* reasonable thumb size */
  #myList .my-item{ padding:10px }
  #myList .my-item .s{ font-size:11.5px }
}

/* Optional: if you want to hide the "Open ↗" link on very tiny phones,
   uncomment this block.
@media (max-width: 340px){
  .card .meta .row a.btn.ghost{ display:none }
}
*/


/* === Mobile header tweaks (≤ 560px) === */
@media (max-width: 560px) {
  header.top .bar { gap: 8px; padding: 10px 12px; }

  /* Hide the pill tagline on mobile (both AR/EN) */
  .pill { display: none !important; }

  /* Make header buttons small */
  .actions .btn {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1;
    min-height: 30px;
  }
  /* Theme/lang: icon-sized on mobile */
  #btn-theme, #btn-lang {
    padding: 6px;
    min-width: 32px;
  }

  /* Give the search bar more breathing room */
  .searchbar input {
    padding: 10px 12px;
    font-size: 15px;
  }
}


/* =======================================================================
   GROUPED CATEGORIES (parents in <details>, children as chips)
   Works the same on desktop & mobile
   ======================================================================= */
.cat-group{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel-2);
  margin-bottom:8px;
  padding:8px;
}
.cat-group > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  color:var(--muted);
  font-weight:700;
}
.cat-group > summary::-webkit-details-marker{ display:none; }
.cat-group .chip.parent{ background:var(--chip); }
.cat-children{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }

/* Make the sidebar scroll only on desktop (mobile uses page scroll) */
@media (min-width: 921px){
  aside.filters{
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 96px - 24px);
    overflow: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* If parents are many, keep child list usable too */
  aside.filters .cat-children{
    max-height: none; /* let it grow, desktop sidebar can scroll */
  }
}

/* Mobile polish (keeps everything visible; page scrolls naturally) */
@media (max-width: 920px){
  .cat-group{ padding:8px; border-radius:12px }
  .cat-group .chip { padding:5px 8px; font-size:12px }
  .cat-children{ gap:6px }
  aside.filters{ position:static; max-height:none; overflow:visible }
}