:root {
  --bg:#0e0e0e; --sur:#1a1a1a; --sur2:#222; --bor:#2a2a2a;
  --acc:#7c5cbf; --acc2:#9d7de0; --tx:#e0e0e0; --tx2:#999; --tx3:#555;
  --green:#5ce07a; --red:#e05c5c; --nav:52px; --col:220px;
}
[data-theme=light]{--bg:#f5f5f7;--sur:#fff;--sur2:#f0f0f2;--bor:#ddd;--tx:#111;--tx2:#555;--tx3:#aaa}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--tx);font-size:14px;
  height:100vh;overflow:hidden;display:flex;flex-direction:column}
button{font-family:inherit;font-size:14px;cursor:pointer}
/* NAV */
nav{height:var(--nav);background:var(--sur);border-bottom:1px solid var(--bor);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 14px;flex-shrink:0;z-index:100;gap:0}
.nav-left{display:flex;align-items:center;gap:8px}
.nav-center{display:flex;align-items:center;gap:6px;justify-content:center}
.nav-right{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.logo{height:38px;cursor:pointer}
.search{background:var(--sur2);border:1px solid var(--bor);
  border-radius:7px;padding:6px 11px;color:var(--tx);outline:none;font-size:13px;width:280px}
.search:focus{border-color:var(--acc)}
.tabs{display:flex;gap:3px}
.tab{background:none;border:none;padding:6px 13px;border-radius:6px;color:var(--tx2);transition:all .15s}
.tab.on{background:var(--acc);color:#fff}
.tab:hover:not(.on){background:var(--sur2);color:var(--tx)}
.nbtn{background:none;border:none;padding:6px 9px;border-radius:6px;color:var(--tx2);transition:background .15s}
.nbtn:hover{background:var(--sur2);color:var(--tx)}
/* PAGES */
.page{flex:1;overflow:hidden;display:none}
.page.on{display:flex}
/* HOME — overridden by dash-styles */
/* CONTINUE BANNER */
#banner{display:none;align-items:center;gap:0;
  background:var(--sur);border-bottom:1px solid var(--bor);
  font-size:12px;color:var(--tx2);flex-shrink:0;height:32px;min-height:32px;
  overflow:hidden;width:100%;box-sizing:border-box}
#banner-left{width:0;flex-shrink:0;overflow:hidden;display:flex;align-items:center;
  padding:0;transition:width .25s;border-inline-end:0 solid var(--bor)}
#banner-left.theater{width:220px;padding:0 8px;border-inline-end:1px solid var(--bor)}
#banner-msg{display:flex;align-items:center;gap:8px;flex:1;overflow:hidden;padding:0 12px}
#banner-msg.hidden{visibility:hidden}
#banner button.resume-btn{background:var(--acc);border:none;color:#fff;border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;white-space:nowrap}
#banner .x{background:none;border:none;color:var(--tx3);font-size:16px;cursor:pointer;padding:0 2px;flex-shrink:0}
#banner-theater{background:none;border:1px solid var(--acc);color:var(--acc2);
  border-radius:5px;font-size:11px;padding:2px 8px;cursor:pointer;white-space:nowrap;font-family:inherit}
#banner-theater:hover{background:var(--acc);color:#fff}

/* overflow-x על html/body בלבד — לא על * (שובר layout) */
/* iOS Safari: overflow handled via inline JS + touch-action */
/* iOS Safari fix — overflow-x:hidden על html/body לא עובד */
/* wrapper div בלי position:relative כדי לא לשבור fixed elements */
/* iOS Safari: מנע horizontal scroll ב-touch */
.mob body { overscroll-behavior-x: none !important; touch-action: pan-y !important; }

/* ══ MOBILE (.mob class — set by JS on load) ══════════════════
   גם @media כגיבוי למקרה שה-JS רץ מאוחר
   ══════════════════════════════════════════════════════════ */
.mob nav, @media (max-width:768px) { & nav { flex:none; } }

/* NAV — רק logo + search + hist */
.mob nav {
  /* nav — 3 שורות: logo | כפתורים | search+hist */
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  height: auto !important;
  padding: 6px 10px 4px !important;
  gap: 5px !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100vw !important;
}
/* שורה 1: logo בלבד */
.mob .nav-left { width: 100% !important; }
.mob .nav-left .tabs { display: none !important; }
/* שורה 2: כפתורי שליטה — ימין */
.mob .nav-right {
  width: 100% !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  order: 2;
}
/* שורה 3: search + hist */
.mob .nav-center {
  width: 100% !important;
  order: 3;
}
.mob .search { width: 100% !important; min-width: 0 !important; flex: 1 !important; }

/* MOB-NAV */
.mob #mob-nav {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--sur);
  border-bottom: 1px solid var(--bor);
  min-height: 38px;
  flex-shrink: 0;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#mob-nav { display: none; }
#mob-back { display: none; border: 1px solid var(--bor); border-radius:6px; padding:5px 12px; background:none; color:var(--tx1); font-size:14px; cursor:pointer; flex-shrink:0; }
#mob-back.visible { display: block !important; }
#mob-crumbs { display:flex; align-items:center; gap:3px; font-size:12px; color:var(--tx3); overflow:hidden; white-space:nowrap; flex:1; }
.mob-crumb { cursor:pointer; color:var(--acc2); max-width:120px; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; }
.mob-crumb.last { color:var(--tx1); font-weight:600; cursor:default; }
.mob-sep { opacity:.35; flex-shrink:0; }

/* PG-TUT — עמודה אחת */
.mob #pg-tut {
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* כל עמודות — מוסתרות */
.mob #pg-tut .col,
.mob #pg-tut #player {
  display: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-inline-start: none !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* עמודה פעילה */
.mob #pg-tut[data-mob="0"] #p-mc  { display: flex !important; }
.mob #pg-tut[data-mob="1"] #p0    { display: flex !important; }
.mob #pg-tut[data-mob="2"] #p1    { display: flex !important; }
.mob #pg-tut[data-mob="3"] #p2    { display: flex !important; }
.mob #pg-tut[data-mob="4"] #p3    { display: flex !important; }
.mob #pg-tut[data-mob="5"] #p4    { display: flex !important; }
.mob #pg-tut[data-mob="6"] #player {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 120px) !important; /* מסך מלא פחות nav+mob-nav */
  overflow-y: auto !important;
}
/* theater class לא בשימוש במובייל */
.mob #pg-tut.theater #player { display: none !important; }
.mob #pg-tut.theater .col    { display: none !important; }
/* כשdata-mob=6 — הPlayer מלא מסך */
.mob #pg-tut[data-mob="6"] .col { display: none !important; }

/* items — גדולים יותר, padding, thumbnails */
.mob .ci, .mob .vi, .mob .vi-row { width: 100% !important; box-sizing: border-box !important; }
.mob .ci.ci-bg { height: 80px !important; overflow: hidden !important; width: 100% !important; }
.mob .ci:not(.ci-bg) { padding: 14px 18px !important; min-height: 52px !important; }
.mob .ci:not(.ci-bg) .ct { font-size: 17px !important; }
.mob .ci:not(.ci-bg) .cc { font-size: 14px !important; }
.mob .vi-row { padding: 10px 14px !important; gap: 10px !important; display: flex !important; align-items: center !important; }
.vi-row { display: flex !important; align-items: center; gap: 10px; }
.mob .vi-row .vt { font-size: 15px !important; line-height: 1.35 !important; }
.mob .vi-row .vm { font-size: 13px !important; }
/* thumbnail במובייל */
.mob .vi-mob-thumb { width: 70px; height: 40px; border-radius: 5px; object-fit: cover; flex-shrink: 0; background: var(--sur2); }
.mob .vi-mob-info { flex: 1; overflow: hidden; min-width: 0; }

/* player */
.mob .pvid, .mob .pvid iframe { width: 100% !important; height: 210px !important; }
.mob .pmeta { padding: 10px 12px 8px !important; }

/* dropdowns */
.mob #srch-drop, .mob #hist-drop { left: 0 !important; width: 100vw !important; border-radius:0 0 8px 8px !important; }


/* ── MOBILE EXTRA FIXES ─────────────────────────────────── */
/* group headers — עבים יותר */
.mob .sw-group-hd { padding: 16px 18px !important; min-height: 54px !important; font-size: 16px !important; }
.mob .sw-group-hd .cc { font-size: 14px !important; }

/* לוגו ממורכז */
.mob .nav-left { justify-content: center !important; }

/* שורת כפתורים — flex-wrap, לא נחתכים */
.mob .nav-right { flex-wrap: wrap !important; gap: 2px !important; padding: 0 4px !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; }
/* lang-menu: position:fixed במובייל כדי לא להיחתך */
.mob #lang-menu { position: fixed !important; top: auto !important; right: 8px !important; z-index: 9999 !important; }
.mob .nav-right .nbtn { padding: 5px 7px !important; font-size: 14px !important; flex-shrink: 1 !important; }
.mob .nav-right .add-tut-btn { padding: 5px 8px !important; font-size: 12px !important; flex-shrink: 1 !important; }
.mob .user-chip { gap: 3px !important; max-width: 120px !important; overflow: hidden !important; }
.mob .user-chip span:last-child { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 70px !important; }

.mob .nav-left { width: 100% !important; max-width: 100vw !important; }
.mob .nav-center { padding: 0 6px !important; box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important; }
.mob .search { box-sizing: border-box !important; width: 100% !important; }

/* כיוון טקסט בsearch — LTR לאנגלית */
.mob #srch { direction: ltr !important; text-align: right !important; unicode-bidi: plaintext !important; }

/* גיבוי @media */
@media (max-width: 768px) {
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; max-width: 100vw !important; }
}
}

/* ══ FIX: col min-width override — הסיבה האמיתית לoverflow ══ */
html.mob { --col: 100vw !important; }
.mob .col { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
.mob .col.vids { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
.mob #pg-tut { overflow-x: hidden !important; }
/* banner — מניעת overflow */
.mob #banner { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
.mob #banner-msg { overflow: hidden !important; min-width: 0 !important; flex: 1 !important; }
.mob #banner-msg span#btext { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 50vw !important; display: inline-block !important; }
.mob .resume-btn, .mob #banner .x { flex-shrink: 0 !important; }

/* ══ MOBILE: מניעת overflow — כל section לא יותר מ-100% ══ */
.mob nav,
.mob #mob-nav,
.mob #banner,
.mob #pg-tut,
.mob #pg-home,
.mob #pg-favs,
.mob #pg-search,
.mob #pg-history {
  max-width: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* תיקון: ci-bg-txt — ודא שהוא לא גולש מימין */
.mob .ci.ci-bg .ci-bg-txt {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-inline-end: 14px !important;
}
/* banner text ellipsis */
.mob #banner { overflow: hidden !important; }

/* Type C software (no subtopics) — hide empty C2 column */
#pg-tut.type-c #p2 {
  display: none !important;
  flex: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Type B software (auto-skip: topic title == sw title) — hide empty C1 column */
#pg-tut.type-b #p1 {
  display: none !important;
  flex: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* ── vi-row: thumbnail מעל, טקסט מתחת ────────────────────── */
.vi-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}
.vi-row .vi-mob-thumb {
  width: 80% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: cover !important;
  cursor: pointer !important;
  margin: 8px auto 0 !important;
}
/* אזור הטקסט מתחת לטמבנייל */
.vi-row > div:not([class]) ,
.vi-row > div[style*="flex:1"],
.vi-row > div[style*="flex: 1"] {
  padding: 6px 10px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: none !important;
  min-width: 0 !important;
}
/* מניעת ריווח כפול במובייל (כבר מטופל) */
.mob .vi-row { gap: 0 !important; }

/* vi-txt — אזור הטקסט מתחת לטמבנייל */
.vi-row .vi-txt {
  padding: 6px 10px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: none !important;
  min-width: 0 !important;
}

/* Video filter hide — overrides display:flex !important */
.vf-hidden { display: none !important; }