/*
 * columns.css - הסקין "שלושה טורים" (הדמיה V16 א, אושרה 27/10/2026).
 * בתוך הקורס רואים רק אותו: השיעורים מימין, השיעור באמצע, "המסע שלי" משמאל, ומעל שלושתם רצועה עם מפת המסע.
 * פריסה אחת בשני מצבים: כהה, ובהיר בסגנון "מחברת" (תוכן עניינים מנוקד ודף לבן).
 * הצבעים לא קבועים כאן (28/10/2026, אייל: "תחזיר לצבעים שהיו לפני השינוי"): --c-* נלקחים מהפלטה ומהמצב של הקורס.
 * בפלטה "auto" אלה הצבעים של המסע (members.css), ובכל פלטה אחרת האסימונים מ-palettes.css. גם הרקע של העמוד והמפה.
 * בטלפון: שלוש לשוניות בתחתית, וכל לשונית היא עמוד מלא.
 * האלמנטים #band, #me, #ctop ו-#ctabs קיימים בכל סקין ומוסתרים כאן לכל השאר.
 */
.cband, .cme, .ctop, .ctabs, .cstrip, .cvmap { display: none; }

html[data-skin="columns"] {
  --c-bg: var(--p-bg, var(--night)); --c-panel: var(--glass); --c-main: var(--glass); --c-tx: var(--ink); --c-tx2: var(--mut); --c-ring: var(--edge);
  --c-acc: var(--p-accent, var(--gold)); --c-ok: var(--teal); --c-okfg: var(--c-bg);
  --c-hov: color-mix(in srgb, var(--c-tx) 6%, transparent); --c-sel: color-mix(in srgb, var(--c-acc) 14%, transparent); --c-accsoft: color-mix(in srgb, var(--c-acc) 24%, transparent);
  --c-chip: color-mix(in srgb, var(--c-tx) 9%, transparent); --c-r: 20px; --c-r2: 16px;
}
html[data-skin="columns"][data-mode="light"] {
  --c-main: var(--p-surface, #fff); --c-ring: color-mix(in srgb, var(--c-tx) 13%, transparent); --c-acc: var(--p-accent, var(--vio)); --c-okfg: #fff;
  --c-sel: color-mix(in srgb, var(--c-acc) 9%, transparent); --c-chip: color-mix(in srgb, var(--c-tx) 7%, transparent); --c-r: 12px; --c-r2: 10px; --hi: #fff;
}
html[data-skin="columns"] .gl { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
html[data-skin="columns"] .lib, html[data-skin="columns"] .sidebtn, html[data-skin="columns"] .lmsbar, html[data-skin="columns"] .sheet { display: none !important; }

/* ===================== מחשב: רצועה ושלושה טורים ===================== */
html[data-skin="columns"] .app { grid-template-columns: 300px minmax(0, 1fr) 290px; grid-template-rows: 116px minmax(0, 1fr); gap: 18px; padding: 18px;
  grid-template-areas: "band band band" "mid pan me"; }
html[data-skin="columns"] .app.aud { grid-template-rows: 116px minmax(0, 1fr) 76px; grid-template-areas: "band band band" "mid pan me" "pbar pbar pbar"; }
html[data-skin="columns"] .pbar { grid-area: pbar; margin: 0; display: none; background: var(--c-panel); border-color: var(--c-ring); border-radius: var(--c-r); }
html[data-skin="columns"] .app.aud .pbar { display: flex; }
html[data-skin="columns"] .cband { display: block; grid-area: band; position: relative; overflow: hidden; border: 1px solid var(--c-ring); border-radius: var(--c-r); background: var(--c-panel); }
html[data-skin="columns"][data-mode="light"] .cband { background: var(--c-main); }
.cband .mh { position: absolute; top: 12px; right: 18px; z-index: 1; font-size: 12.5px; color: var(--c-tx2); pointer-events: none; }
.cband .mh b { display: block; color: var(--c-tx); font-size: 14px; }
canvas.cmap { display: block; width: 100%; height: 100%; cursor: pointer; }

/* ימין: הבאנר, שם הקורס, ההתקדמות והשיעורים */
html[data-skin="columns"] .mid { grid-area: mid; margin: 0; padding: 14px; background: var(--c-panel); border: 1px solid var(--c-ring); border-radius: var(--c-r); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chead { flex: none; padding: 4px 4px 12px; border-bottom: 1px solid var(--c-ring); margin-bottom: 8px; }
.chead .cbanner { margin: 0; border-radius: 12px; box-shadow: none; }
html[data-mode="light"] .chead .cbanner { border-radius: 8px; box-shadow: none; }
.chead .nm { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 10px 0 8px; }
.chead .pr { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-tx2); margin-bottom: 6px; }
.cbar { height: 6px; border-radius: 9px; background: var(--c-chip); overflow: hidden; }
.cbar i { display: block; height: 100%; background: var(--c-acc); border-radius: 9px; }
.chome { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--c-tx2); padding: 2px 4px 10px; }
.chome:hover { color: var(--c-tx); }
.chome svg { width: 15px; height: 15px; }
.cls { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; list-style: none; margin: 0; padding: 0; }
.cls button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 12px; border-radius: 10px; line-height: 1.35; font-size: 13.5px; color: var(--c-tx); text-align: start; }
.cls button:hover { background: var(--c-hov); }
.cls li.sel button { background: var(--c-sel); }
html[data-mode="light"] .cls button { border-radius: 0; border-bottom: 1px dotted var(--c-ring); padding: 10px 4px; }
html[data-mode="light"] .cls li.sel button { background: var(--c-sel); }
.cls .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--c-ring); color: var(--c-tx2); font-variant-numeric: tabular-nums; }
.cls .n svg { width: 13px; height: 13px; }
html[data-mode="light"] .cls .n { border-radius: 6px; }
.cls .done .n { background: var(--c-ok); border-color: var(--c-ok); color: var(--c-okfg); }
.cls .current .n { border-color: var(--c-acc); color: var(--c-acc); box-shadow: 0 0 0 3px var(--c-accsoft); }
.cls .t { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.cls .t > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cls .t small { font-size: 11.5px; color: var(--c-tx2); }
.cls .locked button { color: var(--c-tx2); }
.cls .bonus button { padding-inline-start: 22px; font-size: 12.5px; color: var(--c-tx2); }
.cls .bonus .n { width: 18px; height: 18px; border: 0; background: var(--c-chip); color: var(--c-acc); }
.cls .bonus .n svg { width: 10px; height: 10px; }
.cls .bonus .t { padding-top: 0; }
.ctag { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--c-chip); color: var(--c-tx2); margin-inline-start: 6px; vertical-align: 1px; }

/* אמצע: השיעור */
html[data-skin="columns"] .pan { grid-area: pan; margin: 0; padding: 26px 34px; background: var(--c-main); border: 1px solid var(--c-ring); border-radius: var(--c-r); }
html[data-skin="columns"][data-mode="light"] .pan { box-shadow: 0 1px 3px color-mix(in srgb, var(--c-tx) 7%, transparent); }
html[data-skin="columns"] .pan .stn { max-width: 760px; margin: 0 auto; }
html[data-skin="columns"] .stn .k { color: var(--c-acc); font-size: 12px; }
html[data-skin="columns"] .stn h3 { font-size: 24px; font-weight: 800; line-height: 1.3; }
html[data-skin="columns"][data-mode="light"] .stn h3 { font-size: 27px; }
html[data-skin="columns"] .stn .btext { font-weight: 500; line-height: 1.75; }
html[data-skin="columns"] .vposter, html[data-skin="columns"] .video { border-radius: 14px; }
html[data-skin="columns"][data-mode="light"] .vposter, html[data-skin="columns"][data-mode="light"] .video, html[data-skin="columns"][data-mode="light"] .bimg { border-radius: 6px; }
html[data-skin="columns"] .row, html[data-skin="columns"] .task, html[data-skin="columns"] .pcard { border-radius: 12px; background: transparent; border-color: var(--c-ring); }
html[data-skin="columns"] .donebtn { border-radius: 12px; border: 1.5px solid var(--c-ok); color: var(--c-ok); background: transparent; }
html[data-skin="columns"] .donebtn.on { background: var(--c-ok); color: var(--c-okfg); }
html[data-skin="columns"][data-mode="light"] .barrows { filter: invert(1) hue-rotate(180deg); opacity: .7; }
.cnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }
.cnav button { display: inline-flex; align-items: center; gap: 6px; background: var(--c-chip); color: var(--c-tx); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; }
.cnav button svg { width: 15px; height: 15px; }
.cnav .nx svg { transform: scaleX(-1); }

/* שמאל: המסע שלי */
html[data-skin="columns"] .cme { display: flex; grid-area: me; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.cme .mehead { font-size: 14px; font-weight: 700; margin: 4px 4px 0; }
.ccard { background: var(--c-panel); border: 1px solid var(--c-ring); border-radius: var(--c-r2); padding: 16px; flex: none; }
html[data-mode="light"] .ccard { background: var(--c-main); }
.ccard .lbl { font-size: 12px; color: var(--c-tx2); margin: 0 0 8px; font-weight: 700; letter-spacing: .02em; }
.ccard .empty { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--c-tx2); }
.clined { display: block; width: 100%; min-height: 112px; resize: vertical; border-radius: 8px; border: 1px solid var(--c-ring); padding: 0 10px; font-size: 13.5px; line-height: 28px; color: var(--c-tx);
  background: repeating-linear-gradient(transparent 0 27px, var(--c-ring) 27px 28px); background-attachment: local; }
html[data-mode="light"] .clined { background: repeating-linear-gradient(var(--c-main) 0 27px, var(--c-ring) 27px 28px); background-attachment: local; }
.clined::placeholder { color: var(--c-tx2); }
.clined:focus { outline: 1.5px solid var(--c-acc); border-color: transparent; }
.ccard .sv { display: block; min-height: 16px; margin-top: 6px; font-size: 12px; color: var(--c-ok); }
.cuser { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px; font-size: 13.5px; font-weight: 700; }
.cuser .av { width: 32px; height: 32px; font-size: 14px; background: var(--c-chip); border-color: var(--c-ring); }
.cuser b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuser button { font-size: 12.5px; color: var(--c-tx2); font-weight: 500; white-space: nowrap; }
.cuser button:hover { color: var(--c-tx); }
.cvmap { position: relative; }

/* הקורסים שלי: מעבר לקורס אחר */
.chomev { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5,4,12,.62); }
.chomev .box { width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto; padding: 22px; border-radius: 18px; background: var(--c-bg, var(--night)); border: 1px solid var(--c-ring, var(--edge)); display: flex; flex-direction: column; gap: 6px; }
html[data-mode="light"] .chomev .box { background: var(--c-main, #fff); }
.chomev h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.chomev .it { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; width: 100%; text-align: start; }
.chomev .it:hover { background: var(--c-hov, rgba(255,255,255,.06)); }
.chomev .it.on { background: var(--c-sel, rgba(255,255,255,.1)); }
.chomev .it .art { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
/* הבאנר של הקורס שלם, בלי חיתוך, במחשב ובטלפון (אייל, 10/11: "כשרואים את כל הקורסים - התמונות חתוכות") */
.chomev .it img { width: 112px; height: auto; max-height: 72px; border-radius: 10px; object-fit: contain; flex: none; }
@media (max-width: 980px) { .chomev .it img { width: 92px; max-height: 60px; } }
.chomev .it b { font-size: 14px; font-weight: 700; line-height: 1.3; flex: 1; min-width: 0; }
.chomev .it b span { display: block; font-size: 12px; font-weight: 400; color: var(--c-tx2, var(--mut)); }
.chomev .x { align-self: center; margin-top: 8px; font-size: 14px; color: var(--c-tx2, var(--mut)); text-decoration: underline; text-underline-offset: 3px; }

/* ===================== טלפון: שלוש לשוניות, כל אחת עמוד מלא ===================== */
@media (max-width: 980px) {
  html[data-skin="columns"] .app, html[data-skin="columns"] .app.aud { display: block; height: auto; min-height: 100dvh; padding: calc(58px + env(safe-area-inset-top, 0px)) 0 calc(76px + env(safe-area-inset-bottom, 0px)); }
  html[data-skin="columns"] .cband, html[data-skin="columns"] .pbar { display: none !important; }
  html[data-skin="columns"] .ctop { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 14; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; min-height: 58px;
    background: var(--c-bg); border-bottom: 1px solid var(--c-ring); }
  .ctop .bk { width: 34px; height: 34px; border-radius: 50%; background: var(--c-chip); display: grid; place-items: center; flex: none; }
  .ctop .bk svg { width: 18px; height: 18px; }
  .ctop .ct { font-size: 13.5px; font-weight: 700; line-height: 1.3; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-skin="columns"] .ctabs { display: grid; position: fixed; bottom: 0; left: 0; right: 0; z-index: 14; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-ring);
    background: var(--c-bg); padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* מקלדת פתוחה: הלשוניות יורדות, בלי פס מעל המקלדת */
  html.kbopen[data-skin="columns"] .ctabs { display: none; }
  html[data-skin="columns"]:not([data-mode="light"]) .ctabs, html[data-skin="columns"]:not([data-mode="light"]) .ctop { background: color-mix(in srgb, var(--c-bg) 94%, var(--c-tx)); }
  .ctabs button { text-align: center; padding: 9px 4px 10px; font-size: 12.5px; color: var(--c-tx2); display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .ctabs button svg { width: 20px; height: 20px; }
  .ctabs button[aria-pressed="true"] { color: var(--c-acc); font-weight: 700; }
  /* הלשונית הפעילה בזהב, בכל הקורסים: אותו זהב של שורת "מפגש חי" (אייל, 10/11: "הצבע של השיעור הפעיל או החלק הפעיל צריך להיות בזהב") */
  html[data-skin][data-mode] .ctabs button[aria-pressed="true"] { color: #D9B97A; }
  html[data-skin][data-mode="light"] .ctabs button[aria-pressed="true"] { color: #8C6A2E; }
  /* רק הלשונית הפתוחה נראית */
  html[data-skin="columns"] .mid, html[data-skin="columns"] .pan, html[data-skin="columns"] .cme { display: none; }
  html[data-skin="columns"] .app[data-tab="list"] .mid { display: block; border: 0; border-radius: 0; background: none; padding: 16px; overflow: visible; }
  html[data-skin="columns"] .app[data-tab="lesson"] .pan { display: block; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0 16px 16px; }
  html[data-skin="columns"] .app[data-tab="me"] .cme { display: flex; padding: 16px; gap: 12px; overflow: visible; }
  html[data-skin="columns"] .chead { border: 0; margin: 0; padding: 0 0 10px; }
  html[data-skin="columns"] .cls { overflow: visible; }
  html[data-skin="columns"] .cvmap { display: block; }
  html[data-skin="columns"] .stn h3 { font-size: 20px; }
  html[data-skin="columns"] .cme .mehead { display: none; }
  html[data-skin="columns"] .cuser { margin-top: 6px; }
  /* הנגן הקטן יושב מעל הלשוניות, ורק כשיש הקלטה שהופעלה */
  html[data-skin="columns"] .mini { display: none; }
  html[data-skin="columns"] .app.aud ~ .mini { display: flex; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); background: var(--c-bg); border: 1px solid var(--c-ring); }
  html[data-skin="columns"] .app.aud { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 980px) {
  /* בטלפון הפס העליון כבר מראה את שם הקורס ואת החזרה לקורסים */
  html[data-skin="columns"] .chead .chome, html[data-skin="columns"] .chead .nm { display: none; }
  html[data-skin="columns"] .chead .cbanner { margin-bottom: 12px; }
}

/* ===================== מקטעים ברשימת השיעורים (הדמיה אושרה 28/10/2026) ===================== */
/* מקטע לכל שיעור חי, ובו מה שנפתח איתו. מקטע שהסתיים מכווץ, של עכשיו פתוח, ושעוד לא נפתח מראה רק תאריך */
.csegs { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.cseg { flex: none; border: 1px solid var(--c-ring); border-radius: 14px; background: color-mix(in srgb, var(--c-tx) 3.5%, transparent); overflow: hidden; }
.cseg.sel { border-color: color-mix(in srgb, var(--c-acc) 55%, transparent); }
.csh { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; text-align: start; color: var(--c-tx); }
.csh:hover { background: var(--c-hov); }
.cseg.sel:not(.exp) { border-color: var(--c-acc); }
/*
 * V34 (אייל, 02/11/2026: "תוסיף למערכת שלנו את הכתב של גברת לוין, את הדרך שיש ריבוע מסביב לשיעור, ושזה עם הוי בצד שמאל ועגול כזה...
 * וגם יש שם אייקונים יותר תלת מימדיים. אבל בצבעים שלנו"). כל סימן הוא עיגול תלת ממדי בצבע הסוג (--tc): המספר של השיעור מימין, האייקון של כל פריט משמאל.
 * עיגול רגיל: מילוי שקוף בגוון הסוג. העיגול של מה שפתוח עכשיו: מלא ובולט, והסימן בצבע הרקע (--tg). גם ברשימה במחשב (.dln, .dit)
 */
.cseg .n, .cit .ic b, .dln > button .n, .dit .ic {
  --tg: var(--c-okfg); border-radius: 50%; color: var(--tc); border: 1px solid color-mix(in srgb, var(--tc) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 34%, transparent), color-mix(in srgb, var(--tc) 11%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.16), 0 3px 8px -3px color-mix(in srgb, var(--tc) 40%, rgba(0,0,0,.6));
}
.cseg.cur .n, .cit.sel .ic b, .dln.cur > button .n, .dit.sel .ic {
  color: var(--tg); border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff) 0%, var(--tc) 52%, color-mix(in srgb, var(--tc) 72%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.26), 0 6px 16px -4px color-mix(in srgb, var(--tc) 75%, transparent);
}
/* פריט פתוח: העיגול של האייקון מלא בצבע הסוג, גם כשהוא לא נבחר. רק פריט סגור נשאר חיוור (אייל, 09/11/2026: "אם השיעור פתוח למה הפליי באפור") */
.cit:not(.locked) .ic b, .dit:not(.locked) .ic {
  color: var(--tg); border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff) 0%, var(--tc) 52%, color-mix(in srgb, var(--tc) 72%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.26), 0 4px 10px -4px color-mix(in srgb, var(--tc) 70%, transparent);
}
.cseg .n { --tc: var(--c-tx); flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cseg .n svg { width: 14px; height: 14px; }
.cseg.cur .n, .dln.cur > button .n { --tc: var(--c-acc); }
/* שיעור פתוח שעוד לא התחילו: בצבע של השיעור הנוכחי, בהיר ובלי מילוי מלא. רק נעול נשאר אפור (אייל, 03/11: "למה שיעור פתוח הוא באפור") */
.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n { --tc: var(--c-acc); }
.csh .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* התוויות הקטנות בכתב של לוין, בלי גלולה. "· עוד N פריטים" נשאר בגופן של האתר, שהמספר יהיה קריא */
.csh .k, .cit .lb, .dit .lb { font-family: "Levin", var(--ui); font-weight: 400; font-synthesis: none; line-height: 1.2; padding: 0 0 .06em; background: none; border-radius: 0; }
.csh .k { font-size: 16px; color: var(--c-tx2); }
.csh .k .km { font-family: var(--ui); font-size: .72em; }
.csh .k .kn { font-family: inherit; font-size: inherit; font-weight: inherit; } /* מספר השלב בגברת לוין כמו המילה שלידו (אייל, 07/11: "רק גברת לוין בלי עוד גופן במספר השלב, גם באתר של הפריצה ובכל האתרים") */
.csh .tt { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.csh .cv { flex: none; min-width: 34px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--c-tx2); }
.csh .cv svg { width: 14px; height: 14px; }
.cseg.lock .csh { opacity: .62; }
.citems { list-style: none; margin: 0; padding: 6px 6px 8px; border-top: 1px solid var(--c-ring); display: flex; flex-direction: column; gap: 4px; }
/* הפריט שפתוח עכשיו במסגרת מעוגלת בצבע ההדגשה (V34, li.nw) */
.cit button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 16px; text-align: start; color: var(--c-tx); }
.cit.sel button { background: var(--c-sel); border-color: var(--c-acc); }
.cit .ic { flex: none; order: 2; width: 30px; display: grid; place-items: center; }
.cit .ic b { width: 26px; height: 26px; display: grid; place-items: center; }
.cit .ic svg { width: 13px; height: 13px; }
.cit .t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cit .lb { font-size: 15px; color: var(--tc); }
.cit .tt { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* צבע לכל סוג: השיעור, מחממים מנועים, שיעור בונוס, סרט, חוברת עבודה. פריט שנצפה: עיגול ירוק */
.cit.tl, .dit.tl { --tc: var(--c-tx); }
.cit.tw, .dit.tw { --tc: var(--c-ok); }
.cit.tb, .dit.tb { --tc: var(--c-acc); }
.cit.tm, .dit.tm { --tc: #ff8fb1; }
.cit.tk, .dit.tk { --tc: #b8bfff; }
.cit.tn, .dit.tn { --tc: #FFB48C; } /* שיעור נלווה: צבע משלו. התכלת נפסל על רקע כהה (אייל 07/11: "ניגודיות גרועה") */
html[data-mode="light"] .cit.tn, html[data-mode="light"] .dit.tn { --tc: #B4501E; }
html[data-mode="light"] .cit.tm, html[data-mode="light"] .dit.tm { --tc: #c2185b; }
html[data-mode="light"] .cit.tk, html[data-mode="light"] .dit.tk { --tc: #4b55c9; }
.cit.ok .ic b, .dit.ok .ic { --tc: var(--c-ok); }
.cit.ok .tt { color: var(--c-tx2); }
.cit.locked { opacity: .55; }
/* בטלפון: הכותרת הקצרה למעלה, והבאנר שלם */
@media (max-width: 980px) {
  html[data-skin="columns"] .ctop { min-height: 50px; padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px; }
  html[data-skin="columns"] .ctop .ct.one { font-size: 13px; font-weight: 500; color: var(--c-tx2); -webkit-line-clamp: 1; }
  html[data-skin="columns"] .app, html[data-skin="columns"] .app.aud { padding-top: calc(50px + env(safe-area-inset-top, 0px)); }
  /*
   * קורס אחד עם באנר (אייל, 02/11: "הוא רואה את הקורס בבאנר", ואחר כך "המקום לא מנוצל, השורה הזאת תופסת מקום"):
   * אין שורה עליונה. הפעמון צף בפינה השמאלית העליונה, 10 מהפינה של הבאנר, והבאנר מתחיל בראש המסך
   */
  html[data-skin="columns"] .ctop.solo { right: auto; left: 26px; top: calc(16px + 10px + env(safe-area-inset-top, 0px)); min-height: 0; padding: 0; border: 0; background: none !important; pointer-events: none; }
  html[data-skin="columns"] .ctop.solo:empty { display: none; }
  /* בלי מלבן סביב העיגולים, בכל מצב ופלטה (אייל, 03/11: "תמונה לא שקופה, יש רקע מכוער"): בלי טשטוש, צל ומסגרת של הסרגל */
  html[data-skin="columns"] .ctop.solo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; }
  /* כשהבאנר הופך לפס הקבוע (64) בגלילה, הפעמון יושב באמצע הגובה שלו, בצד השמאלי שנשאר ריק */
  html[data-skin="columns"]:has(.cphb.fx) .ctop.solo { top: calc(12px + env(safe-area-inset-top, 0px)); }
  html[data-skin="columns"] .ctop.solo .gbell { pointer-events: auto; margin: 0; background: rgba(14, 11, 31, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
  html[data-skin="columns"] .app:has(.ctop.solo), html[data-skin="columns"] .app.aud:has(.ctop.solo) { padding-top: env(safe-area-inset-top, 0px); }
  html[data-skin="columns"] .csegs { overflow: visible; }
  .cseg { border-radius: 14px; }
  /* V28 (אייל, 01/11/2026: הטקסט "ממש קטן ועמוס"): רשימת השיעורים בטלפון גדולה ומרווחת יותר */
  html[data-skin="columns"] .csegs { gap: 14px; }
  html[data-skin="columns"] .cseg { border-radius: 18px; }
  html[data-skin="columns"] .csh { padding: 16px; gap: 14px; }
  html[data-skin="columns"] .cseg .n { width: 38px; height: 38px; font-size: 15px; }
  html[data-skin="columns"] .csh .k { font-size: 19px; }
  html[data-skin="columns"] .csh .t { gap: 5px; }
  html[data-skin="columns"] .csh .tt { font-size: 17.5px; font-weight: 700; line-height: 1.4; -webkit-line-clamp: 3; }
  html[data-skin="columns"] .citems { padding: 8px 8px 10px; gap: 6px; }
  html[data-skin="columns"] .cit button { padding: 11px 10px; gap: 12px; align-items: flex-start; }
  html[data-skin="columns"] .cit .ic b { width: 32px; height: 32px; }
  html[data-skin="columns"] .cit .ic svg { width: 15px; height: 15px; }
  html[data-skin="columns"] .cit .t { gap: 4px; }
  html[data-skin="columns"] .cit .lb { font-size: 17px; }
  html[data-skin="columns"] .cit .tt { font-size: 15.5px; line-height: 1.45; -webkit-line-clamp: 3; }
}
/* באנר הקורס בראש כל לשונית בטלפון (אייל, 28/10/2026: "בכל מסך בטלפון למעלה, התמונה של הקורס"). במחשב רק בטור השיעורים */
.cphb { display: none; }
@media (max-width: 980px) {
  html[data-skin="columns"] .cphb { display: block; padding-top: 16px; }
  html[data-skin="columns"] .cphb:empty { display: none; }
  html[data-skin="columns"] .cphb .cbanner { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px; box-shadow: none; }
  html[data-skin="columns"][data-mode="light"] .cphb .cbanner { border-radius: 8px; }
  html[data-skin="columns"] .app[data-tab="lesson"] .cphb { margin-bottom: 12px; }
  html[data-skin="columns"] .app[data-tab="me"] .cphb { padding-top: 0; }
}
/* נגן השמע: הגל בצבעי הסקין */
html[data-skin="columns"] { --wv-on: var(--c-ok); --wv-ink: var(--c-tx); }
html[data-skin="columns"] body { overflow-anchor: none; }

/*
 * הצבעים של הדמיה V17 בכל הסקין, במצב כהה ובצבעים של הקורס עצמו (אייל, 29.10: "ובכלל בוא תנסה לעשות את הצבעים כמו שעשית בהדמיה").
 * רקע כהה יותר עם כתמים שקטים, טורי הצד שקופים מעט, הטור האמצעי כהה, וכרטיסים .055. קורס עם ערכת צבעים אחרת לא משתנה.
 */
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] {
  --c-bg: #141026; --c-panel: rgba(255,255,255,.045); --c-main: rgba(0,0,0,.16); --c-ring: rgba(255,255,255,.12);
  --c-tx2: #dcd8f0; --c-acc: #f2c14e; --c-ok: #3fe3d0; --c-okfg: #062420; --c-chip: rgba(255,255,255,.08);
  --c-accsoft: rgba(242,193,78,.18); --c-sel: rgba(242,193,78,.12); --mut: #dcd8f0;
}
/*
 * הטקסט המשני בהיר יותר (אייל, 02/11: "יש פה הרבה טקסטים שהם אפורים, תעשה אותם יותר לבנים"): #dcd8f0 כמו באונבורדינג,
 * והחלק בגל שעוד לא נוגן ושנתות הזמן בהירים יותר. הטקסט הראשי נשאר לבן מלא. רק במצב הכהה
 */
html[data-skin="columns"]:not([data-mode="light"]) { --mut: #dcd8f0; --wv-off: .45; --wv-tick: .86; }
html[data-skin="columns"]:not([data-mode="light"]) .sk { opacity: 1; color: var(--c-tx2); }
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] body {
  background: radial-gradient(70% 50% at 100% 0, #3b1f78 0, transparent 60%), radial-gradient(60% 50% at 0 40%, #14504c 0, transparent 65%),
    radial-gradient(60% 50% at 30% 100%, #4a1d48 0, transparent 60%), #141026;
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .cband { background: linear-gradient(90deg, rgba(84,40,170,.45), rgba(255,255,255,.03)); }
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .cseg,
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .task,
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .pcard,
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .stn .row { background: rgba(255,255,255,.055); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .ctabs,
  html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .ctop { background: #100c20; } /* בהדמיה .92. כאן אטום, כי אחרת הטקסט של השיעור נראה מתחת לסרגל */
}

/*
 * אותה שפה כמו V17, בצבעים אחרים ללהמציא (אייל, 07/11: "יותר לכיוון של טורקיז או צבעים שמתכתבים עם הבאנר").
 * dawn: טורקיז עמוק עם נגיעה של סגול וזריחה. sky: כחול של שמי הבוקר בבאנר. ההדגשה בזהב, כמו התגית בבאנר
 */
html[data-skin="columns"][data-mode="dark"][data-pal="dawn"] {
  --c-bg: #081a1f; --c-panel: rgba(120,230,220,.05); --c-main: rgba(0,0,0,.16); --c-ring: rgba(255,255,255,.12);
  --c-tx2: #d6ecea; --c-acc: #f2c14e; --c-ok: #5ee6d6; --c-okfg: #04211f; --c-chip: rgba(255,255,255,.08);
  --c-accsoft: rgba(242,193,78,.18); --c-sel: rgba(242,193,78,.12); --mut: #d6ecea;
}
html[data-skin="columns"][data-mode="dark"][data-pal="dawn"] body {
  background: radial-gradient(70% 55% at 100% 0, #17797f 0, transparent 62%), radial-gradient(60% 55% at 0 40%, #0f5e62 0, transparent 66%),
    radial-gradient(60% 50% at 30% 100%, #3d2f5c 0, transparent 60%), #081a1f;
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="dark"][data-pal="dawn"] .cband { background: linear-gradient(90deg, rgba(20,120,120,.45), rgba(255,255,255,.03)); }
html[data-skin="columns"][data-mode="dark"][data-pal="sky"] {
  --c-bg: #0E1A33; --c-panel: rgba(255,255,255,.045); --c-main: rgba(0,0,0,.16); --c-ring: rgba(255,255,255,.12);
  --c-tx2: #dbe4f5; --c-acc: #f2c14e; --c-ok: #6fe3d6; --c-okfg: #04211f; --c-chip: rgba(255,255,255,.08);
  --c-accsoft: rgba(242,193,78,.18); --c-sel: rgba(242,193,78,.12); --mut: #dbe4f5;
}
html[data-skin="columns"][data-mode="dark"][data-pal="sky"] body {
  background: radial-gradient(70% 50% at 100% 0, #2a5aa0 0, transparent 60%), radial-gradient(60% 50% at 0 40%, #15565a 0, transparent 65%),
    radial-gradient(60% 50% at 30% 100%, #6a3a3a 0, transparent 60%), #0E1A33;
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="dark"][data-pal="sky"] .cband { background: linear-gradient(90deg, rgba(60,110,200,.45), rgba(255,255,255,.03)); }
/* עוד ארבע אפשרויות ללהמציא (אייל, 07/11: "תציע עוד 4") */
html[data-skin="columns"][data-mode="dark"]:is([data-pal="lagoon"], [data-pal="aurora"], [data-pal="mint"], [data-pal="glow"]) {
  --c-panel: rgba(255,255,255,.045); --c-main: rgba(0,0,0,.16); --c-ring: rgba(255,255,255,.12); --c-chip: rgba(255,255,255,.08);
  --c-acc: #f2c14e; --c-ok: #5ee6d6; --c-okfg: #04211f; --c-accsoft: rgba(242,193,78,.18); --c-sel: rgba(242,193,78,.12);
}
html[data-skin="columns"][data-mode="dark"][data-pal="lagoon"] { --c-bg: #062126; --c-tx2: #d3efec; --mut: #d3efec; --c-ok: #62f0df; }
html[data-skin="columns"][data-mode="dark"][data-pal="lagoon"] body { background: radial-gradient(70% 55% at 100% 0, #1a8f8a 0, transparent 60%), radial-gradient(55% 50% at 0 45%, #0d6466 0, transparent 66%), radial-gradient(60% 50% at 25% 100%, #7a4a35 0, transparent 60%), #062126; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="lagoon"] .cband { background: linear-gradient(90deg, rgba(26,143,138,.5), rgba(255,255,255,.03)); }
html[data-skin="columns"][data-mode="dark"][data-pal="aurora"] { --c-bg: #0B1622; --c-tx2: #dde6f2; --mut: #dde6f2; }
html[data-skin="columns"][data-mode="dark"][data-pal="aurora"] body { background: radial-gradient(70% 55% at 100% 0, #0f6d6d 0, transparent 60%), radial-gradient(55% 50% at 0 40%, #6a1f5c 0, transparent 64%), radial-gradient(60% 50% at 40% 100%, #1f3f7a 0, transparent 60%), #0B1622; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="aurora"] .cband { background: linear-gradient(90deg, rgba(106,31,92,.5), rgba(15,109,109,.25)); }
html[data-skin="columns"][data-mode="dark"][data-pal="mint"] { --c-bg: #0D2629; --c-tx2: #dcf3f0; --mut: #dcf3f0; --c-panel: rgba(255,255,255,.06);
  --c-acc: #5ee6d6; --c-ok: #f2c14e; --c-okfg: #1d1400; --c-accsoft: rgba(94,230,214,.2); --c-sel: rgba(94,230,214,.13); }
html[data-skin="columns"][data-mode="dark"][data-pal="mint"] body { background: radial-gradient(70% 55% at 100% 0, #2ba59a 0, transparent 60%), radial-gradient(55% 50% at 0 45%, #13585c 0, transparent 66%), radial-gradient(60% 50% at 30% 100%, #1d4a52 0, transparent 60%), #0D2629; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="mint"] .cband { background: linear-gradient(90deg, rgba(43,165,154,.5), rgba(255,255,255,.03)); }
html[data-skin="columns"][data-mode="dark"][data-pal="glow"] { --c-bg: #171426; --c-tx2: #efe2ea; --mut: #efe2ea; }
html[data-skin="columns"][data-mode="dark"][data-pal="glow"] body { background: radial-gradient(70% 55% at 100% 0, #8a4a3a 0, transparent 60%), radial-gradient(55% 50% at 0 40%, #0f5a5c 0, transparent 64%), radial-gradient(60% 50% at 35% 100%, #6a2a50 0, transparent 60%), #171426; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="glow"] .cband { background: linear-gradient(90deg, rgba(138,74,58,.5), rgba(255,255,255,.03)); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="lagoon"] :is(.ctabs, .ctop) { background: #05191d; }
  html[data-skin="columns"][data-mode="dark"][data-pal="aurora"] :is(.ctabs, .ctop) { background: #08111b; }
  html[data-skin="columns"][data-mode="dark"][data-pal="mint"] :is(.ctabs, .ctop) { background: #0a1f22; }
  html[data-skin="columns"][data-mode="dark"][data-pal="glow"] :is(.ctabs, .ctop) { background: #120f1e; }
}
/* מהצבעים של הבאנר (אייל, 07/11: "כתום, סגלגל, כחלחל של השמיים"): כחול של השמיים למעלה, סגול באמצע, ואופק כתום למטה */
html[data-skin="columns"][data-mode="dark"]:is([data-pal="bsky"], [data-pal="bviolet"], [data-pal="bdawn"]) {
  --c-panel: rgba(255,255,255,.05); --c-main: rgba(0,0,0,.14); --c-ring: rgba(255,255,255,.13); --c-chip: rgba(255,255,255,.08); --c-okfg: #0b1430;
}
html[data-skin="columns"][data-mode="dark"][data-pal="bsky"] { --c-bg: #121A3A; --c-tx2: #e3e6f7; --mut: #e3e6f7; --c-acc: #ffa25c; --c-ok: #8ec9ff; --c-accsoft: rgba(255,162,92,.2); --c-sel: rgba(255,162,92,.13); }
html[data-skin="columns"][data-mode="dark"][data-pal="bsky"] body { background: radial-gradient(75% 55% at 100% 0, #3b6fc4 0, transparent 62%), radial-gradient(55% 55% at 0 35%, #5b3a9e 0, transparent 66%), radial-gradient(70% 45% at 40% 105%, #b5602a 0, transparent 62%), #121A3A; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="bsky"] .cband { background: linear-gradient(90deg, rgba(59,111,196,.5), rgba(91,58,158,.3)); }
html[data-skin="columns"][data-mode="dark"][data-pal="bviolet"] { --c-bg: #1A1534; --c-tx2: #e8e2f7; --mut: #e8e2f7; --c-acc: #f2c14e; --c-ok: #8ec9ff; --c-accsoft: rgba(242,193,78,.18); --c-sel: rgba(242,193,78,.12); }
html[data-skin="columns"][data-mode="dark"][data-pal="bviolet"] body { background: radial-gradient(75% 55% at 100% 0, #6a45b8 0, transparent 62%), radial-gradient(55% 55% at 0 35%, #2f5fa8 0, transparent 66%), radial-gradient(70% 45% at 30% 105%, #c46a2c 0, transparent 62%), #1A1534; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="bviolet"] .cband { background: linear-gradient(90deg, rgba(106,69,184,.5), rgba(47,95,168,.3)); }
html[data-skin="columns"][data-mode="dark"][data-pal="bdawn"] { --c-bg: #141F3D; --c-tx2: #e6e8f6; --mut: #e6e8f6; --c-acc: #c9b6ff; --c-ok: #ffa25c; --c-accsoft: rgba(201,182,255,.2); --c-sel: rgba(201,182,255,.13); --c-okfg: #2a1204; }
html[data-skin="columns"][data-mode="dark"][data-pal="bdawn"] body { background: linear-gradient(180deg, #1c3566 0%, #141F3D 38%, #2c2350 70%, #6a3a3a 100%); background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="bdawn"] .cband { background: linear-gradient(90deg, rgba(196,106,44,.45), rgba(110,76,200,.3)); }
/* שיעור נלווה באפרסק מתנגש בהדגשה הכתומה: כאן בלבנדר */
html[data-skin="columns"][data-pal="bsky"] :is(.cit.tn, .dit.tn), html[data-skin="columns"][data-pal="bdawn"] :is(.cit.tn, .dit.tn) { --tc: #c9b6ff; }
html[data-skin="columns"][data-pal="bdawn"] :is(.cit.tn, .dit.tn) { --tc: #ffc9a3; }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="bsky"] :is(.ctabs, .ctop) { background: #0f1631; }
  html[data-skin="columns"][data-mode="dark"][data-pal="bviolet"] :is(.ctabs, .ctop) { background: #15112b; }
  html[data-skin="columns"][data-mode="dark"][data-pal="bdawn"] :is(.ctabs, .ctop) { background: #111a34; }
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dawn"], [data-pal="sky"], [data-pal="lagoon"], [data-pal="aurora"], [data-pal="mint"], [data-pal="glow"], [data-pal="bsky"], [data-pal="bviolet"], [data-pal="bdawn"]) :is(.cseg, .task, .pcard, .stn .row) { background: rgba(255,255,255,.055); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="dawn"] :is(.ctabs, .ctop) { background: #08171c; }
  html[data-skin="columns"][data-mode="dark"][data-pal="sky"] :is(.ctabs, .ctop) { background: #0b1529; }
}

/*
 * הטור הימני במחשב כמו בהדמיה V17 (אייל, 29.10): בלי פס ההתקדמות (המסע הוא פס ההתקדמות), ורשימה ממוספרת פשוטה.
 * לחיצה על שיעור פותחת מתחתיו את הפריטים שלו, מוזזים פנימה וקטנים יותר. בטלפון: המקטעים כמו שהיו.
 */
.dlist { display: none; }
@media (min-width: 981px) {
  html[data-skin="columns"] .chead .pr, html[data-skin="columns"] .chead .cbar { display: none; }
  html[data-skin="columns"] .chead { border-bottom: 0; margin-bottom: 4px; }
  html[data-skin="columns"] .mid .csegs { display: none; }
  html[data-skin="columns"] .dlist { display: block; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; list-style: none; margin: 0; padding: 0; }
  .dln > button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 6px; border-bottom: 1px dotted var(--c-ring); font-size: 13px; line-height: 1.4; color: var(--c-tx); text-align: start; }
  .dln > button:hover { background: var(--c-hov); }
  .dln > button .n { --tc: var(--c-tx); flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; }
  .dln .n svg { width: 12px; height: 12px; }
  .dln.sel > button { border: 1px solid var(--c-acc); border-radius: 16px; background: var(--c-sel); }
  .dln .t { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dln.sel > button .t { font-weight: 700; }
  .dln.locked > button { color: var(--c-tx2); }
  .dits { list-style: none; margin: 0; padding: 2px 0 6px; padding-inline-start: 34px; border-bottom: 1px dotted var(--c-ring); }
  .dit button { display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 8px; row-gap: 3px; align-items: start; width: 100%; padding: 7px 8px; font-size: 12px; line-height: 1.4; color: var(--c-tx); text-align: start; border: 1px solid transparent; border-radius: 16px; }
  .dit button:hover { background: var(--c-hov); }
  .dit.sel button { background: var(--c-sel); border-color: var(--c-acc); }
  .dit .ic { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; display: grid; place-items: center; }
  .dit .ic svg { width: 11px; height: 11px; }
  .dit .lb { grid-column: 1; justify-self: start; font-size: 14px; color: var(--tc); }
  .dit .tt { grid-column: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dit.ok .tt { color: var(--c-tx2); }
  .dit.locked { opacity: .55; }
  /* בלשונית הקבוצה הכותרת רק בקופסה בטור השמאלי, כמו בהדמיה */
  html[data-skin="columns"] .gmain .ghead { display: none; }
}
/* באנר הקורס במחשב: בראש הטור האמצעי, ברוחב השיעור ובלי חיתוך, מעל "השיעור" ו"הקבוצה". בטור הימני כבר אין באנר (אייל, 29.10) */
@media (min-width: 981px) {
  html[data-skin="columns"] .chead .cbanner { display: none; }
  html[data-skin="columns"] .pan .cphb { display: block; max-width: 760px; margin: 0 auto 18px; }
  html[data-skin="columns"] .pan .cphb .cbanner { display: block; width: 100%; height: auto; margin: 0; border-radius: 14px; box-shadow: none; }
  html[data-skin="columns"][data-mode="light"] .pan .cphb .cbanner { border-radius: 8px; }
  html[data-skin="columns"] .chead .nm { margin-top: 2px; }
}

/*
 * עמוד השיעור במחשב, הדמיה V19 (אושרה 31.10, אייל: "כן תעשה", עם שתי ההצעות). בכל הלשוניות של הסקין.
 * ימין: המסע הוא הרשימה, עם קו אנכי בין התחנות, ואפשר לקפל אותה לפס של 76. אמצע: הבאנר דביק ומתכווץ בגלילה,
 * והכרטיסים של "המסע שלי" מתחת לשיעור. שמאל: פס אייקונים של 84. בלי רצועת המסע למעלה, כי הרשימה היא המסע.
 * בטלפון לא משתנה כלום.
 */
.dfb, .dstrip, .djh, .dmeh, .dme, .rail, .cpht { display: none; }
html[data-skin="columns"] { --c-pantop: var(--c-bg); --c-drawer: var(--c-bg); --c-circ: var(--c-bg); }
html[data-skin="columns"][data-mode="light"] { --c-pantop: var(--c-main); --c-drawer: var(--c-main); --c-circ: var(--c-main); }
html[data-skin="columns"][data-mode="dark"][data-pal="auto"] { --c-pantop: #17122b; --c-drawer: #1d1736; --c-circ: #1c1636; }
@media (min-width: 981px) {
  html[data-skin="columns"] .app { grid-template-columns: 300px minmax(0, 1fr) 84px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "mid pan me"; }
  html[data-skin="columns"] .app.aud { grid-template-rows: minmax(0, 1fr) 76px; grid-template-areas: "mid pan me" "pbar pbar pbar"; }
  html[data-skin="columns"] .app.dfold, html[data-skin="columns"] .app.dfold.aud { grid-template-columns: 76px minmax(0, 1fr) 84px; }
  html[data-skin="columns"] .cband { display: none; }

  /* ימין: כפתור הקיפול, "המסע שלך", והקו שמחבר בין התחנות */
  html[data-skin="columns"] .mid { position: relative; }
  /* בלי שם הקורס (10/11) הכותרת יכולה להיות ריקה: גובה מינימלי, כדי שהשיעור הראשון לא יתחיל מתחת לכפתור הקיפול */
  html[data-skin="columns"] .chead { padding-inline-end: 44px; min-height: 44px; }
  html[data-skin="columns"] .dfb { display: grid; place-items: center; position: absolute; top: 14px; left: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 10px; background: var(--c-chip); border: 1px solid var(--c-ring); color: var(--c-tx); }
  .dfb svg { width: 17px; height: 17px; }
  .dfb:hover { background: color-mix(in srgb, var(--c-tx) 13%, transparent); }
  html[data-skin="columns"] .djh { display: block; flex: none; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c-acc) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-acc) 25%, transparent); }
  .djh b { display: block; color: var(--c-acc); font-size: 15px; }
  .djh span { color: var(--c-tx2); font-size: 13px; }
  .dlist > li { position: relative; }
  /* המספרים מימין והקו עובר דרכם (אייל, 02/11: "המספרים בצד ימין, האייקונים בצד שמאל"). מתחת למילוי השקוף יש רקע אטום, שהקו לא ייראה דרכו */
  .dln > button .n { width: 30px; height: 30px; font-size: 13px; position: relative; z-index: 1; }
  .dit .ic { position: relative; z-index: 1; }
  /* פריט פתוח נשאר מלא גם כאן, ורק פריט סגור חיוור (אייל, 09/11/2026: "אם השיעור פתוח למה הפליי באפור") */
  .dln:not(.cur) > button .n, .dit.locked:not(.sel) .ic { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 34%, transparent), color-mix(in srgb, var(--tc) 11%, transparent)), var(--c-circ); }
  .dln > button .n svg { width: 14px; height: 14px; }
  .dlist > li:not(:last-child)::before { content: ""; position: absolute; right: 20px; top: 34px; bottom: -14px; width: 2px; z-index: 0;
    background: linear-gradient(var(--c-ok), color-mix(in srgb, var(--c-tx) 14%, transparent) 30%); }

  /* מקופל: פס של 76 עם ☰, "השיעורים" ועיגול לכל שיעור. לחיצה פותחת בחזרה */
  html[data-skin="columns"] .app.dfold .mid { padding: 16px 0 10px; }
  html[data-skin="columns"] .app.dfold .mid > :not(.dstrip) { display: none; }
  html[data-skin="columns"] .app.dfold .dstrip { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .dstrip .dtg { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-chip); border: 1px solid var(--c-ring); color: var(--c-tx); margin-bottom: 4px; }
  .dstrip .dtg svg { width: 20px; height: 20px; }
  .dstrip small { color: var(--c-tx2); font-size: 12px; margin-bottom: 10px; }
  .dstrip .dd { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--c-tx); background: var(--c-circ);
    border: 1.5px solid color-mix(in srgb, var(--c-tx) 30%, transparent); font-variant-numeric: tabular-nums; }
  .dstrip .dd:not(:last-child)::after { content: ""; position: absolute; top: 28px; height: 10px; width: 2px; background: color-mix(in srgb, var(--c-tx) 14%, transparent); }
  .dstrip .dd.done { border-color: var(--c-ok); color: var(--c-ok); }
  .dstrip .dd.locked { color: var(--c-tx2); }
  .dstrip .dd.cur { border-color: var(--c-acc); color: var(--c-acc); box-shadow: 0 0 0 4px var(--c-accsoft), 0 0 16px color-mix(in srgb, var(--c-acc) 50%, transparent); }

  /* אמצע: הבאנר דביק, והשיעור גולל מתחתיו. בגלילה הוא מתכווץ לפס עם שם השיעור */
  html[data-skin="columns"] .pan .cphb { position: sticky; top: -26px; z-index: 5; margin: -26px auto 18px; padding: 26px 0 12px; background: var(--c-pantop); box-shadow: 0 14px 18px -8px var(--c-pantop); }
  html[data-skin="columns"] .pan .cphi { display: flex; align-items: center; gap: 14px; }
  html[data-skin="columns"] .pan .cphb.xs { padding-bottom: 8px; }
  html[data-skin="columns"] .pan .cphb.xs .cbanner { flex: none; width: auto; height: 64px; border-radius: 10px; }
  html[data-skin="columns"] .pan .cphb.xs .cpht { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.35; }
  html[data-skin="columns"] .pan .cphb.xs .cphi { animation: cphA .25s ease both; }
  html[data-skin="columns"] .pan .cphb.grow .cphi { animation: cphB .3s ease both; }
  /* הכרטיסים של "המסע שלי" מתחת לשיעור */
  html[data-skin="columns"] .dmeh { display: block; margin-top: 30px; font-weight: 700; font-size: 16px; }
  html[data-skin="columns"] .dme { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 14px; margin-top: 14px; }

  /* שמאל: פס האייקונים, עם מספר על "הקבוצה" ו"משימה", והתמונה למטה */
  html[data-skin="columns"] .cme { overflow: visible; }
  html[data-skin="columns"] .rail { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; gap: 20px; padding-top: 18px; }
  .rail .rl { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; color: var(--c-tx2); font-size: 12px; line-height: 1.3; text-align: center; }
  .rail .rl i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-chip); border: 1px solid var(--c-ring); color: var(--c-tx); }
  .rail .rl i svg { width: 20px; height: 20px; }
  .rail .rl:hover i { background: color-mix(in srgb, var(--c-tx) 13%, transparent); }
  .rail .rl.on i { background: var(--c-acc); border-color: var(--c-acc); color: var(--c-okfg); }
  .rail .rl em { position: absolute; top: -4px; left: 2px; z-index: 1; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center;
    background: var(--c-ok); color: var(--c-okfg); font-size: 11px; font-style: normal; font-weight: 700; }
  .rail .rl em[hidden] { display: none; }
  .rail .rme { margin-top: auto; margin-bottom: 18px; border-radius: 50%; }
  .rail .rme .av { width: 40px; height: 40px; font-size: 16px; font-weight: 700; background: #6d4bd8; border: 0; color: #fff; object-fit: cover; }
}
@keyframes cphA { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cphB { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* "הדרך שלי" (והתיבות של הקבוצה) במגירה מעל השיעור */
.ddrawer { position: fixed; top: 12px; bottom: 12px; left: 104px; width: 330px; z-index: 30; overflow: auto; scrollbar-width: thin; padding: 18px; border-radius: 20px;
  background: var(--c-drawer); border: 1px solid var(--c-ring); box-shadow: 24px 0 60px rgba(0,0,0,.55); animation: ddIn .2s ease both; }
.ddrawer .ddh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 17px; font-weight: 700; }
.ddrawer .ddh button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--c-tx2); }
.ddrawer .ddh button:hover { color: var(--c-tx); background: var(--c-chip); }
.ddrawer .ddh svg { width: 20px; height: 20px; }
.ddrawer .ccard { margin: 0 0 12px; }
.ddrawer .cvmap { display: block; }
.dshade { position: fixed; inset: 0; z-index: 29; background: rgba(10,8,20,.45); }
html[data-mode="light"] .dshade { background: rgba(20,16,40,.22); }
@keyframes ddIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* התפריט של התמונה בפס האייקונים */
.rmenu.cuser { position: fixed; z-index: 40; margin: 0; padding: 12px 14px; gap: 12px; border-radius: 14px; background: var(--c-drawer); border: 1px solid var(--c-ring); box-shadow: 0 18px 40px rgba(0,0,0,.45); white-space: nowrap; }
.rmenu.cuser b { flex: none; max-width: 180px; }

/*
 * השיעור בטלפון, הדמיה V20 (אושרה 01/11/2026, אייל: "כן אבל בלי התצוגה של המסע מתחת לבאנר").
 * בלי רצועת המסע מתחת לבאנר: המסע נשאר בלשונית "המסע שלי". בגלילה הבאנר הופך לפס קבוע של 64 מתחת לסרגל העליון,
 * עם תמונה בגובה 48 ושם השיעור. ועיגול טורקיז עם מספר על "השיעור" (משימה שלא נענתה) ועל "הקבוצה" (פוסטים חדשים).
 */
@media (max-width: 980px) {
  html[data-skin="columns"] .pan .cphb.fx .cphi { position: fixed; left: 0; right: 0; z-index: 13; height: 64px; box-sizing: border-box; padding: 8px 16px;
    display: flex; align-items: center; gap: 12px; background: var(--c-bg); border-bottom: 1px solid var(--c-ring); animation: cphA .25s ease both; }
  html[data-skin="columns"]:not([data-mode="light"]) .pan .cphb.fx .cphi { background: color-mix(in srgb, var(--c-bg) 94%, var(--c-tx)); }
  html[data-skin="columns"][data-mode="dark"][data-pal="auto"] .pan .cphb.fx .cphi { background: #100c20; }
  html[data-skin="columns"] .pan .cphb.fx .cbanner { flex: none; width: auto; height: 48px; border-radius: 10px; }
  html[data-skin="columns"] .pan .cphb.fx .cpht { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0;
    font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--c-tx); }
  html[data-skin="columns"] .ctabs .gdot { top: 4px; left: calc(50% + 3px); min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    background: #3fe3d0; color: #141026; font-size: 11px; font-weight: 700; }
}

/*
 * המצב הבהיר בצבעים של הקורס עצמו (הדמיה בהירה, אייל 03/11/2026: "כן תכניס ותעשה גרסה בהירה מקצה לקצה").
 * כמו שהכהה קיבל את V17: רקע לילך בהיר עם שלושה כתמים רכים, טורי צד לבנים שקופים, כרטיסים לבנים עם צל רך,
 * הדגשה סגולה והושלם בטורקיז כהה. כפתור הזהב נשאר זהב. קורס עם ערכת צבעים אחרת לא משתנה
 */
html[data-skin="columns"][data-mode="light"][data-pal="auto"] {
  --ink: #1E1538; --mut: #5E5480; --night: #F7F4FC; --teal: #0E9C8C; --vio: #6D28D9;
  --c-bg: #F7F4FC; --c-panel: rgba(255,255,255,.78); --c-main: #FFFFFF; --c-ring: rgba(30,21,56,.09);
  --c-tx: #1E1538; --c-tx2: #5E5480; --c-acc: #6D28D9; --c-ok: #0E9C8C; --c-okfg: #fff; --c-chip: rgba(30,21,56,.06);
  --c-accsoft: rgba(109,40,217,.14); --c-sel: rgba(109,40,217,.06); --c-hov: rgba(30,21,56,.04);
  --c-pantop: #fff; --c-drawer: #fff; --c-circ: #fff; --c-r: 18px; --c-r2: 14px;
  --sh: 0 1px 2px rgba(30,21,56,.05), 0 10px 28px -14px rgba(76,40,160,.22);
}
html[data-skin="columns"][data-mode="light"][data-pal="auto"] body {
  background: radial-gradient(70% 50% at 100% 0, #E7DCFF 0, transparent 60%), radial-gradient(60% 50% at 0 40%, #D9F4F0 0, transparent 65%),
    radial-gradient(60% 50% at 30% 100%, #FBE0EC 0, transparent 60%), #F7F4FC;
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .mid,
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cme,
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cband { box-shadow: var(--sh); border-color: rgba(255,255,255,.9); }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .pan { background: #fff; box-shadow: var(--sh); border-color: rgba(30,21,56,.06); }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cseg,
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .task,
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .pcard,
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .stn .row { background: #fff; border-color: rgba(30,21,56,.07); box-shadow: var(--sh); }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .shead { background: #fff; border-color: rgba(30,21,56,.07); box-shadow: var(--sh); }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] body .stn .shead .k.cur { color: #9A6A00; }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cit.sel button { background: linear-gradient(180deg, rgba(109,40,217,.07), rgba(109,40,217,.03)); border-color: rgba(109,40,217,.55); box-shadow: 0 6px 18px -10px rgba(109,40,217,.45); }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cseg.cur .n { --tc: #6D28D9; }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cseg.open .n, html[data-skin="columns"][data-mode="light"][data-pal="auto"] .dln:not(.cur):not(.done):not(.locked) > button .n { --tc: #6D28D9; }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] :is(.cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #0B8A7C; }
html[data-skin="columns"][data-mode="light"][data-pal="auto"] .gold { background: linear-gradient(180deg, #FFE27A, #FDBF04); color: #1a1236; box-shadow: 0 8px 20px -8px rgba(205,150,0,.6); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="light"][data-pal="auto"] .ctabs,
  html[data-skin="columns"][data-mode="light"][data-pal="auto"] .ctop { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(30,21,56,.07); box-shadow: 0 -6px 20px -12px rgba(76,40,160,.25); }
  html[data-skin="columns"][data-mode="light"][data-pal="auto"] .mid,
  html[data-skin="columns"][data-mode="light"][data-pal="auto"] .cme { background: transparent; box-shadow: none; border-color: transparent; }
}

/* בבהיר הבאנר בולט מהרקע הצבעוני, עם צל סגול חזק משל הכרטיסים (אייל, 03/11: "בבהיר תעשה קצת הבלטה / עומק מאחורי הבאנר עם צל"). בכהה בלי שינוי */
html[data-mode="light"] .cbanner, html[data-mode="light"] .chomev .it img { box-shadow: 0 16px 36px -12px rgba(52,30,110,.38), 0 2px 6px rgba(52,30,110,.12) !important; }

/*
 * "כמו הבאנר" (אייל, 07/11: "זה צריך לדבר את הצבעים של הבאנר: כתום, סגלגל, כחלחל של השמיים").
 * בהיר: הרקע הוא השמיים של הבאנר, מתכלת למעלה דרך סגלגל לזריחה כתומה למטה. טורי הצד וכרטיסים לבנים שקופים,
 * הדגשה בכתום, הושלם בסגול, טקסט בכחול כהה. במצב כהה: הגרסה הכהה של אותם צבעים (כמו "שמי הבאנר")
 */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) {
  --ink: #1E2350; --mut: #4E5482; --c-bg: #E9F1FD; --c-panel: rgba(255,255,255,.62); --c-main: rgba(255,255,255,.82); --c-ring: rgba(30,35,80,.1);
  --c-tx: #1E2350; --c-tx2: #4E5482; --c-acc: #E8752E; --c-ok: #6E52D0; --c-okfg: #fff; --c-chip: rgba(30,35,80,.06);
  --c-accsoft: rgba(232,117,46,.16); --c-sel: rgba(232,117,46,.08); --c-hov: rgba(30,35,80,.04);
  --c-pantop: #fff; --c-drawer: #fff; --c-circ: #fff; --c-r: 18px; --c-r2: 14px;
  --sh: 0 1px 2px rgba(30,35,80,.06), 0 12px 30px -14px rgba(46,58,134,.3);
}
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) body {
  background: radial-gradient(60% 40% at 15% 100%, rgba(255,170,110,.55) 0, transparent 70%), linear-gradient(180deg, #A9CCF3 0%, #C8D7F6 32%, #DCD3F3 58%, #F6D6D6 80%, #FFD3B4 100%);
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.mid, .cme, .cband) { background: rgba(255,255,255,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--sh); border-color: rgba(255,255,255,.85); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .pan { background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--sh); border-color: rgba(255,255,255,.9); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cseg, .task, .pcard, .stn .row, .shead) { background: #fff; border-color: rgba(30,35,80,.08); box-shadow: var(--sh); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .cit.sel button { background: linear-gradient(180deg, rgba(232,117,46,.09), rgba(232,117,46,.03)); border-color: rgba(232,117,46,.6); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cseg.cur .n, .cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #E8752E; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cit.tn, .dit.tn) { --tc: #6E52D0; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #0B8A7C; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .gold { background: linear-gradient(180deg, #FFB27A, #E8752E); color: #fff; box-shadow: 0 8px 20px -8px rgba(232,117,46,.6); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.ctabs, .ctop) { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(30,35,80,.08); }
  html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] { --c-bg: #121A3A; --c-panel: rgba(255,255,255,.05); --c-main: rgba(0,0,0,.14); --c-ring: rgba(255,255,255,.13); --c-chip: rgba(255,255,255,.08); --c-okfg: #0b1430;
  --c-tx2: #e3e6f7; --mut: #e3e6f7; --c-acc: #ffa25c; --c-ok: #8ec9ff; --c-accsoft: rgba(255,162,92,.2); --c-sel: rgba(255,162,92,.13); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body { background: radial-gradient(75% 55% at 100% 0, #3b6fc4 0, transparent 62%), radial-gradient(55% 55% at 0 35%, #5b3a9e 0, transparent 66%), radial-gradient(70% 45% at 40% 105%, #b5602a 0, transparent 62%), #121A3A; background-attachment: fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg, .task, .pcard, .stn .row) { background: rgba(255,255,255,.055); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cit.tn, .dit.tn) { --tc: #c9b6ff; }

/*
 * הבאנר נקי, בלי מסגרת כהה למעלה ולמטה (אייל, 07/11: "למה הבאנר חתוך עם גריד שחור למעלה ולמטה, שים אותו נקי כמו שהוא").
 * בערכות שאינן ברירת המחדל הטור האמצעי שקוף מעל רקע צבעוני, והפס הדביק בצבע הרקע נראה כמו מסגרת.
 * כאן הוא שקוף, ורק כשהבאנר מתכווץ בגלילה מקבל טשטוש כדי שהשיעור לא ייקרא מתחתיו
 */
@media (min-width: 981px) {
  html[data-skin="columns"]:not([data-pal="auto"]) .pan .cphb { background: transparent; box-shadow: none; }
  html[data-skin="columns"]:not([data-pal="auto"]) .pan .cphb.xs { background: color-mix(in srgb, var(--c-bg) 55%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}
/* בבהיר של "כמו הבאנר" הרקע הוא השמיים של הבאנר: בלי שכבת הכתמים והרשת של הבהיר (sky.css), וכותרת השיעור בסגול-כחול ולא בכתום */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .lgs { display: none; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) body .stn .shead h3 { color: #33307A; }

/*
 * "כמו הבאנר" בצבעי הטקסט של המערכות (פלטת המותג, כמו בפיננסית). אייל, 07/11 על הרשימה בכתום וסגלגל:
 * "לא התחברתי לכתום ולסגול פה, יש לנו צבעים שלנו של המערכות כמו בפיננסית - תיקח משם צבעים לטקסט".
 * טקסט #1F1F1F ומשני #767676 (בכהה לבן ואפור קריא), סגול המערכת רק לשיעור של עכשיו ולמה שנבחר,
 * טורקיז המערכת להושלם ולתווית של שיעור נלווה. המספרים של שאר השיעורים בצבע הטקסט. הרקע נשאר השמיים של הבאנר
 */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) {
  --ink: #1F1F1F; --mut: #767676; --c-tx: #1F1F1F; --c-tx2: #767676;
  --c-acc: #5C1CAB; --c-ok: #007785; --c-okfg: #fff; --c-accsoft: rgba(92,28,171,.14); --c-sel: rgba(92,28,171,.06);
}
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #1F1F1F; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cseg.cur .n.n.n.n, .dln.cur > button .n.n.n.n) { --tc: #D2A64C; --tg: #2a1a05; } /* .n.n.n.n: גובר על הכלל של .cseg.open בשורה 592, שהמשקל שלו גבוה בגלל ה-:not שבתוך ה-:is */
/* בבהירה: המספר בעיגול בזהב, ושם הפריט ברשימה בסגול במקום טורקיז (אייל, 09/11/2026: "המספרים בזהב גם בגרסה הבהירה", "השם של השיעור בסגול במקום טורקיז שם בתפריט של השיעורים") */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #007785; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .cit.tl, .dit.tl):not(.locked) .lb { color: #5C1CAB; } /* גם "השיעור החי": שיעור פתוח אף פעם לא באפור (אייל, 09/11/2026) */
/* "שיעור חי #2" בתפריט השיעורים: בבהירה בסגול של המערכת כמו מספר השלב בשיעור, ובשיעור סגור באפור (אייל, 09/11/2026: "כל מספרי השלבים... בסגול") */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .cit.sel button { background: rgba(92,28,171,.05); border-color: rgba(92,28,171,.5); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .djh { background: rgba(255,255,255,.7); border-color: rgba(31,31,31,.08); }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .djh b, html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) body .stn .shead h3 { color: #1F1F1F; }
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .gold { background: #5C1CAB; color: #fff; box-shadow: 0 8px 20px -8px rgba(92,28,171,.55); }

/* הכהה של "כמו הבאנר" (אייל, 07/11: "צריך לעשות גם כהה"): שמי הבאנר בדמדומים, כחול לילה למעלה, סגלגל באמצע וגחלת כתומה באופק */
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] {
  --ink: #FFFFFF; --mut: #C3C6D4; --c-bg: #17203F; --c-tx: #FFFFFF; --c-tx2: #C3C6D4;
  --c-panel: rgba(255,255,255,.05); --c-main: rgba(10,14,34,.28); --c-ring: rgba(255,255,255,.12); --c-chip: rgba(255,255,255,.08);
  --c-acc: #7027CC; --c-ok: #3FE3D0; --c-okfg: #0b1430; --c-accsoft: rgba(112,39,204,.28); --c-sel: rgba(112,39,204,.16); --c-pantop: #17203F;
}
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body {
  background: radial-gradient(55% 35% at 12% 100%, rgba(255,140,80,.32) 0, transparent 70%), linear-gradient(180deg, #1C3263 0%, #1E2752 34%, #2A2350 64%, #3E2638 100%);
  background-attachment: fixed;
}
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg, .task, .pcard, .stn .row) { background: rgba(255,255,255,.06); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .cband { background: linear-gradient(90deg, rgba(60,100,190,.4), rgba(255,255,255,.03)); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg.cur .n, .dln.cur > button .n) { --tc: #7027CC; --tg: #fff; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .djh { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .djh b { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .gold { background: #7027CC; color: #fff; box-shadow: 0 8px 20px -8px rgba(112,39,204,.6); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.ctabs, .ctop) { background: #141c38; }
}
/* הלשונית הפעילה (השיעור / הקבוצה) בסגול המערכת עם טקסט לבן, לא בשחור (אייל, 07/11: "שחור פה לא טוב בכפתורים") */
html[data-skin="columns"][data-mode="light"]:is([data-pal="banner"], [data-pal="gl5"]) .mtabs button.on { background: #5C1CAB; color: #fff; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .mtabs button.on { background: #7027CC; color: #fff; }

/*
 * הכהה של להמציא (אייל, 07/11: "תעשה את האתר הכהה בסוג כהה של המפקדה או הפיננסית, אבל עם משחקי אור מאחורה וקצת צבעוניות מהצדדים").
 * הבסיס של המערכות: רקע #1F1F1F, משטחים #2B2B2B, טקסט לבן ומשני אפור קריא, סגול #7027CC לפעיל וטורקיז #3FE3D0 להושלם.
 * מאחור שלושה אורות רכים בצבעי הבאנר שזזים לאט: תכלת השמיים משמאל, סגול מימין למעלה וזריחה כתומה מימין למטה
 */
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] {
  --ink: #FFFFFF; --mut: #ABABAB; --c-bg: #1F1F1F; --c-tx: #FFFFFF; --c-tx2: #ABABAB;
  --c-panel: rgba(43,43,43,.8); --c-main: rgba(31,31,31,.72); --c-ring: rgba(255,255,255,.09); --c-chip: #353535; --c-hov: rgba(255,255,255,.05);
  --c-acc: #7027CC; --c-ok: #3FE3D0; --c-okfg: #1F1F1F; --c-accsoft: rgba(112,39,204,.3); --c-sel: rgba(112,39,204,.16);
  --c-pantop: #1F1F1F; --c-drawer: #2B2B2B; --c-circ: #2B2B2B;
}
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body { background: #1F1F1F; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 4% 52%, rgba(86,150,230,.34) 0, transparent 70%),
    radial-gradient(34% 40% at 98% 10%, rgba(112,39,204,.36) 0, transparent 70%),
    radial-gradient(36% 38% at 96% 96%, rgba(255,138,80,.24) 0, transparent 70%),
    radial-gradient(30% 30% at 50% 0, rgba(63,227,208,.08) 0, transparent 70%);
  animation: lzLight 26s ease-in-out infinite alternate;
}
@keyframes lzLight { 0% { transform: translate3d(0,0,0) scale(1); opacity: .9; } 50% { transform: translate3d(1.5%,-2%,0) scale(1.05); opacity: 1; } 100% { transform: translate3d(-1.5%,1.5%,0) scale(1.02); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body::before { animation: none; } }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.mid, .cme, .cband) { background: rgba(43,43,43,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.07); box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .pan { background: rgba(31,31,31,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.07); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: #2B2B2B; border-color: rgba(255,255,255,.06); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .djh { background: #353535; border-color: transparent; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .djh b, html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body .stn .shead h3 { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cseg.cur .n, .dln.cur > button .n) { --tc: #7027CC; --tg: #fff; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.cit.sel button, .dit.sel button, .dln.sel > button) { background: rgba(112,39,204,.16); border-color: #7027CC; }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.ctabs, .ctop) { background: #1F1F1F; border-color: rgba(255,255,255,.07); }
  html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* האורות חזקים יותר, והטורים שקופים מעט יותר כדי שהצבע יעבור מהצדדים */
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body::before {
  background: radial-gradient(42% 55% at 0 50%, rgba(86,150,230,.62) 0, transparent 70%),
    radial-gradient(40% 48% at 100% 6%, rgba(130,60,220,.6) 0, transparent 70%),
    radial-gradient(42% 46% at 100% 100%, rgba(255,138,80,.46) 0, transparent 70%),
    radial-gradient(30% 30% at 45% 0, rgba(63,227,208,.14) 0, transparent 70%);
}
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] :is(.mid, .cme, .cband) { background: rgba(43,43,43,.64); }
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] .pan { background: rgba(31,31,31,.8); }
/* האורות בתוך המסך (לא מחוצה לו), גדולים יותר */
html[data-skin="columns"][data-mode="dark"][data-pal="banner"] body::before {
  inset: 0;
  background: radial-gradient(52% 70% at 3% 50%, rgba(86,150,230,.85) 0, transparent 72%),
    radial-gradient(46% 55% at 95% 8%, rgba(130,60,220,.6) 0, transparent 72%),
    radial-gradient(48% 52% at 94% 96%, rgba(255,138,80,.48) 0, transparent 72%),
    radial-gradient(34% 34% at 45% 0, rgba(63,227,208,.16) 0, transparent 72%);
}

/*
 * חמישה כהים בכיווני צבע שונים (אייל, 07/11: "תן לי עוד 5 גרסאות של כהה, כל גרסה תהיה בכיוון של צבע אחר, אף אחת לא דומה לשנייה").
 * אותו מבנה כמו המפקדה: רקע, טורים ומשטחים בגוון אחד, טקסט לבן ומשני קריא, הדגשה אחת, ואורות רכים מהצדדים בגוון של הכיוון
 */
html[data-skin="columns"][data-mode="dark"][data-pal="dk1"] { --dk-bg: #0D1526; --dk-surf: #16223A; --dk-raise: #1F2E4C; --dk-tx2: #A9B6CC; --dk-acc: #3FE3D0; --dk-on: #06231F; --dk-g1: rgba(47,107,214,.7); --dk-g2: rgba(63,227,208,.32); --dk-g3: rgba(110,150,255,.4); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk2"] { --dk-bg: #170E22; --dk-surf: #221733; --dk-raise: #2D1F44; --dk-tx2: #BBAFCC; --dk-acc: #FF4F8F; --dk-on: #FFFFFF; --dk-g1: rgba(142,47,208,.7); --dk-g2: rgba(255,79,143,.4); --dk-g3: rgba(120,70,220,.45); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk3"] { --dk-bg: #081B1C; --dk-surf: #11292A; --dk-raise: #183637; --dk-tx2: #A6C4C1; --dk-acc: #FFF35C; --dk-on: #1F1F1F; --dk-g1: rgba(17,166,154,.65); --dk-g2: rgba(63,227,208,.35); --dk-g3: rgba(255,243,92,.16); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk4"] { --dk-bg: #1B130E; --dk-surf: #281C15; --dk-raise: #34251C; --dk-tx2: #CDB9A9; --dk-acc: #7027CC; --dk-on: #FFFFFF; --dk-g1: rgba(224,112,42,.62); --dk-g2: rgba(255,170,80,.36); --dk-g3: rgba(170,60,40,.5); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk5"] { --dk-bg: #1C1518; --dk-surf: #2A2024; --dk-raise: #372A30; --dk-tx2: #C2B3B9; --dk-acc: #FF4F8F; --dk-on: #FFFFFF; --dk-g1: rgba(224,69,126,.8); --dk-g2: rgba(255,140,120,.5); --dk-g3: rgba(200,80,150,.6); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) {
  --ink: #FFFFFF; --mut: var(--dk-tx2); --c-bg: var(--dk-bg); --c-tx: #FFFFFF; --c-tx2: var(--dk-tx2);
  --c-panel: color-mix(in srgb, var(--dk-surf) 80%, transparent); --c-main: color-mix(in srgb, var(--dk-bg) 78%, transparent);
  --c-ring: rgba(255,255,255,.09); --c-chip: var(--dk-raise); --c-hov: rgba(255,255,255,.05);
  --c-acc: var(--dk-acc); --c-ok: #3FE3D0; --c-okfg: var(--dk-bg); --c-accsoft: color-mix(in srgb, var(--dk-acc) 28%, transparent); --c-sel: color-mix(in srgb, var(--dk-acc) 13%, transparent);
  --c-pantop: var(--dk-bg); --c-drawer: var(--dk-surf); --c-circ: var(--dk-surf);
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) body { background: var(--dk-bg); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 70% at 0 45%, var(--dk-g1) 0, transparent 72%), radial-gradient(44% 60% at 100% 10%, var(--dk-g3) 0, transparent 72%), radial-gradient(46% 55% at 100% 100%, var(--dk-g2) 0, transparent 72%);
  animation: lzLight 26s ease-in-out infinite alternate;
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.mid, .cme, .cband) { background: color-mix(in srgb, var(--dk-surf) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.07); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) .pan { background: color-mix(in srgb, var(--dk-bg) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.07); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.cseg, .task, .pcard, .stn .row, .shead) { background: var(--dk-surf); border-color: rgba(255,255,255,.06); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) .djh { background: var(--dk-raise); border-color: transparent; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.djh b, body .stn .shead h3) { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.cseg.cur .n, .dln.cur > button .n) { --tc: var(--dk-acc); --tg: var(--dk-on); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.cit.sel button, .dit.sel button, .dln.sel > button) { background: color-mix(in srgb, var(--dk-acc) 13%, transparent); border-color: var(--dk-acc); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) .mtabs button.on { background: var(--dk-acc); color: var(--dk-on); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) .gold { background: var(--dk-acc); color: var(--dk-on); box-shadow: none; }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.ctabs, .ctop) { background: var(--dk-bg); border-color: rgba(255,255,255,.07); }
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk1"], [data-pal="dk2"], [data-pal="dk3"], [data-pal="dk4"], [data-pal="dk5"]) :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/*
 * ארבעה כיוונים שונים במבנה (אייל, 07/11: "הכל נראה לא טוב, קשה להסביר את זה. תראה לי עוד 4 דוגמאות שונות לכיוונים שונים").
 * dk6 אווירת הבאנר: שחור, והבאנר עצמו מטושטש מאוד מאחור כאור סביבה. dk7 זכוכית על שמיים: הבאנר כמעט חד ברקע, טורים מזכוכית.
 * dk8 מפקדה נקי: שטוח, בלי אורות, בדיוק כמו המערכות. dk9 דמדומים: רקע מלמעלה למטה, מלילה כחול לזריחה ורודה-כתומה, עם כוכבים
 */
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] { --dk-bg: #0B0B0D; --dk-surf: #17171B; --dk-raise: #222228; --dk-tx2: #B4B4BC; --dk-acc: #7027CC; --dk-on: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk7"] { --dk-bg: #101A33; --dk-surf: #121A33; --dk-raise: rgba(255,255,255,.12); --dk-tx2: #D3D9EA; --dk-acc: #FFF35C; --dk-on: #1F1F1F; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk8"] { --dk-bg: #1F1F1F; --dk-surf: #2B2B2B; --dk-raise: #353535; --dk-tx2: #A0A0A0; --dk-acc: #7027CC; --dk-on: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] { --dk-bg: #0C1430; --dk-surf: #161C3A; --dk-raise: rgba(255,255,255,.1); --dk-tx2: #C9C3DA; --dk-acc: #FF4F8F; --dk-on: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) {
  --ink: #FFFFFF; --mut: var(--dk-tx2); --c-bg: var(--dk-bg); --c-tx: #FFFFFF; --c-tx2: var(--dk-tx2);
  --c-ring: rgba(255,255,255,.1); --c-chip: var(--dk-raise); --c-hov: rgba(255,255,255,.06);
  --c-acc: var(--dk-acc); --c-ok: #3FE3D0; --c-okfg: #1F1F1F; --c-accsoft: color-mix(in srgb, var(--dk-acc) 28%, transparent); --c-sel: color-mix(in srgb, var(--dk-acc) 14%, transparent);
  --c-pantop: var(--dk-bg); --c-drawer: var(--dk-surf); --c-circ: var(--dk-surf);
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.djh b, body .stn .shead h3) { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) .djh { background: var(--dk-raise); border-color: transparent; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.cseg.cur .n, .dln.cur > button .n) { --tc: var(--dk-acc); --tg: var(--dk-on); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.cit.sel button, .dit.sel button, .dln.sel > button) { background: color-mix(in srgb, var(--dk-acc) 14%, transparent); border-color: var(--dk-acc); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.mtabs button.on, .gold) { background: var(--dk-acc); color: var(--dk-on); box-shadow: none; }

/* dk6: הבאנר כאור סביבה */
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] body { background: #0B0B0D; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] body::before { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: var(--cban, none) center / cover no-repeat; filter: blur(90px) saturate(1.5); opacity: .55; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] :is(.mid, .cme, .cband) { background: rgba(23,23,27,.72); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(255,255,255,.08); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] .pan { background: rgba(11,11,13,.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(255,255,255,.08); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk6"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: #17171B; border-color: rgba(255,255,255,.07); }

/* dk7: זכוכית על שמיים */
html[data-skin="columns"][data-mode="dark"][data-pal="dk7"] body { background: #101A33; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk7"] body::before { content: ""; position: fixed; inset: -4%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8,12,30,.35), rgba(8,12,30,.6)), var(--cban, none) 30% center / cover no-repeat; filter: blur(14px); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk7"] :is(.mid, .cme, .cband, .pan) { background: rgba(14,20,42,.52); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border-color: rgba(255,255,255,.18); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk7"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* dk8: מפקדה נקי, שטוח */
html[data-skin="columns"][data-mode="dark"][data-pal="dk8"] body { background: #1F1F1F; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk8"] :is(.mid, .cme, .cband) { background: #2B2B2B; border-color: transparent; box-shadow: none; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk8"] .pan { background: #262626; border-color: transparent; box-shadow: none; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk8"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: #2B2B2B; border-color: transparent; }

/* dk9: דמדומים עם כוכבים */
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] body { background: linear-gradient(180deg, #0C1430 0%, #1B1C48 38%, #3A1E4A 70%, #6A2A3E 90%, #8A3A2E 100%) fixed; }
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.2px 1.2px at 12% 8%, #fff 99%, transparent), radial-gradient(1px 1px at 28% 18%, #fff 99%, transparent), radial-gradient(1.4px 1.4px at 46% 6%, #fff 99%, transparent), radial-gradient(1px 1px at 63% 14%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 81% 9%, #fff 99%, transparent), radial-gradient(1px 1px at 92% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 7% 30%, #fff 99%, transparent), radial-gradient(1.3px 1.3px at 36% 34%, #fff 99%, transparent), radial-gradient(1px 1px at 72% 31%, #fff 99%, transparent); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] :is(.mid, .cme, .cband) { background: rgba(22,28,58,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.1); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] .pan { background: rgba(12,20,48,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(255,255,255,.1); }
html[data-skin="columns"][data-mode="dark"][data-pal="dk9"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.ctabs, .ctop) { background: var(--dk-bg); border-color: rgba(255,255,255,.08); }
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="dk6"], [data-pal="dk7"], [data-pal="dk8"], [data-pal="dk9"]) :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/*
 * גרסאות של "זכוכית על שמיים" (אייל, 07/11: "זה הכי טוב, תן לי כמה גרסאות של זה (הזכוכית השקופה)... גם הכהה יותר טובה...
 * תעשה את השקופה יותר כהה באחת הגרסאות"). הבאנר ברקע, והטורים זכוכית. משתנים: כמה הרקע מטושטש וכהה, כמה הזכוכית כהה, וההדגשה.
 * gl1 זכוכית כהה (הרקע והזכוכית כהים יותר, צהוב) · gl2 זכוכית לילה (זכוכית שחורה ניטרלית, סגול) ·
 * gl3 זכוכית פתוחה (רקע בהיר וחד יותר, טורקיז) · gl4 זכוכית ושחור (הבאנר מטושטש מאוד כאור על שחור, וזכוכית מעליו, צהוב)
 */
html[data-skin="columns"][data-mode="dark"][data-pal="gl1"] { --gl-blur: 16px; --gl-ov1: .55; --gl-ov2: .8; --gl-panel: rgba(8,12,26,.66); --gl-card: rgba(255,255,255,.06); --gl-pos: 30% center; --gl-op: 1; --dk-acc: #FFF35C; --dk-on: #1F1F1F; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl2"] { --gl-blur: 22px; --gl-ov1: .45; --gl-ov2: .7; --gl-panel: rgba(12,12,14,.62); --gl-card: rgba(255,255,255,.07); --gl-pos: 30% center; --gl-op: 1; --dk-acc: #7027CC; --dk-on: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl3"] { --gl-blur: 8px; --gl-ov1: .2; --gl-ov2: .45; --gl-panel: rgba(16,24,52,.42); --gl-card: rgba(255,255,255,.1); --gl-pos: 30% center; --gl-op: 1; --dk-acc: #3FE3D0; --dk-on: #06231F; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl4"] { --gl-blur: 60px; --gl-ov1: .3; --gl-ov2: .55; --gl-panel: rgba(14,14,18,.5); --gl-card: rgba(255,255,255,.07); --gl-pos: center; --gl-op: .8; --dk-acc: #FFF35C; --dk-on: #1F1F1F; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) {
  --ink: #FFFFFF; --mut: #D3D9EA; --c-bg: #0E1428; --c-tx: #FFFFFF; --c-tx2: #D3D9EA;
  --c-ring: rgba(255,255,255,.12); --c-chip: rgba(255,255,255,.1); --c-hov: rgba(255,255,255,.06);
  --c-acc: var(--dk-acc); --c-ok: #3FE3D0; --c-okfg: #1F1F1F; --c-accsoft: color-mix(in srgb, var(--dk-acc) 28%, transparent); --c-sel: color-mix(in srgb, var(--dk-acc) 14%, transparent);
  --c-pantop: #0E1428; --c-drawer: #18203F; --c-circ: #18203F;
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) body { background: #0B0F1E; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) body::before {
  content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none; opacity: var(--gl-op);
  background: linear-gradient(180deg, rgba(6,9,22,var(--gl-ov1)), rgba(6,9,22,var(--gl-ov2))), var(--cban, none) var(--gl-pos) / cover no-repeat;
  filter: blur(var(--gl-blur));
}
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.mid, .cme, .cband, .pan) { background: var(--gl-panel); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border-color: rgba(255,255,255,.16); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.cseg, .task, .pcard, .stn .row, .shead) { background: var(--gl-card); border-color: rgba(255,255,255,.13); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) .djh { background: rgba(255,255,255,.08); border-color: transparent; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.djh b, body .stn .shead h3) { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.cseg.cur .n, .dln.cur > button .n) { --tc: var(--dk-acc); --tg: var(--dk-on); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.cit.sel button, .dit.sel button, .dln.sel > button) { background: color-mix(in srgb, var(--dk-acc) 14%, transparent); border-color: var(--dk-acc); }
html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.mtabs button.on, .gold) { background: var(--dk-acc); color: var(--dk-on); box-shadow: none; }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.ctabs, .ctop) { background: rgba(10,14,30,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,.1); }
  html[data-skin="columns"][data-mode="dark"]:is([data-pal="gl1"], [data-pal="gl2"], [data-pal="gl3"], [data-pal="gl4"]) :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* gl5: בין "זכוכית לילה" (gl2) ל"זכוכית ושחור" (gl4) ברמת הכהות (אייל, 07/11: "תעשה גרסה בין 2 ל-4 ברמת הכהות"). ההדגשה בסגול כמו ב-2 */
/* להמציא בכהה: הרקע והמשטחים כהים יותר (אייל, 10/11: "תראה לי את השחור פה קצת יותר כהה ממש בטיפה יותר", ומההדמיה בחר 3 "הכהה יותר"). היה: ov1 .38, ov2 .62, panel rgba(13,13,16,.56) */
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] { --gl-blur: 40px; --gl-ov1: .52; --gl-ov2: .76; --gl-panel: rgba(9,9,12,.70); --gl-card: rgba(255,255,255,.07); --gl-pos: 30% center; --gl-op: .9; --dk-acc: #7027CC; --dk-on: #FFFFFF;
  --ink: #FFFFFF; --mut: #D3D9EA; --c-bg: #0E1428; --c-tx: #FFFFFF; --c-tx2: #D3D9EA; --c-ring: rgba(255,255,255,.12); --c-chip: rgba(255,255,255,.1); --c-hov: rgba(255,255,255,.06);
  --c-acc: #7027CC; --c-ok: #3FE3D0; --c-okfg: #1F1F1F; --c-accsoft: rgba(112,39,204,.28); --c-sel: rgba(112,39,204,.14); --c-pantop: #0E1428; --c-drawer: #18203F; --c-circ: #18203F; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] body { background: #0B0F1E; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] body::before { content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none; opacity: var(--gl-op); background: linear-gradient(180deg, rgba(6,9,22,var(--gl-ov1)), rgba(6,9,22,var(--gl-ov2))), var(--cban, none) var(--gl-pos) / cover no-repeat; filter: blur(var(--gl-blur)); }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.mid, .cme, .cband, .pan) { background: var(--gl-panel); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border-color: rgba(255,255,255,.16); }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.cseg, .task, .pcard, .stn .row, .shead) { background: var(--gl-card); border-color: rgba(255,255,255,.13); }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .djh { background: rgba(255,255,255,.08); border-color: transparent; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.djh b, body .stn .shead h3) { color: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.cseg.open .n, .dln:not(.cur):not(.done):not(.locked) > button .n) { --tc: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.cseg.cur .n, .dln.cur > button .n) { --tc: #7027CC; --tg: #FFFFFF; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw, .dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #3FE3D0; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.cit.sel button, .dit.sel button, .dln.sel > button) { background: rgba(112,39,204,.14); border-color: #7027CC; }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.mtabs button.on, .gold) { background: #7027CC; color: #FFFFFF; box-shadow: none; }
@media (max-width: 980px) {
  html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.ctabs, .ctop) { background: rgba(10,14,30,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,.1); }
  html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] :is(.mid, .cme) { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* שיעור בונוס בזהב, בכהה ובבהיר, בכל הקורסים. אדום הוא צבע של התרעה (אייל, 10/11: "שיעור בונוס אדום... זה לא טוב... תעשה שיעור בונוס בזהב").
   קודם: ורוד-אדום #ff7a9a / #e0476f, נפסל */
html[data-skin][data-mode] :is(.cit.tb, .dit.tb) { --tc: #E2B64F; }
html[data-skin][data-mode="light"] :is(.cit.tb, .dit.tb) { --tc: #9A6A08; }

/* צל מתחת לבאנר גם בכהה, שהתמונה תבלוט החוצה (אייל, 07/11: "באתר תעשה צל מאחורי התמונה שיהיה עם הבלטה החוצה"). בבהיר יש כבר צל. כל הקורסים */
html[data-mode="dark"] :is(.chead, .cphb:not(.xs):not(.fx)) .cbanner { box-shadow: 0 24px 48px -14px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) !important; }

/* עיגולי המספרים בזהב: כלל אחד לכל הקורסים בסוף הקובץ (SPEC 7.7) */

/* המתג "השיעור / הקבוצה" באותו זהב של עיגולי המספרים (אייל, 07/11: "גם את המתג הזה בזהב"). להמציא בכהה */
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .mtabs button.on {
  color: #1C0A3D;
  background: linear-gradient(150deg, #FFF1C2 0%, #F3D68C 22%, #E2B64F 52%, #C9A24A 82%, #F7E4A6 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,78,0,.3), 0 6px 16px -6px rgba(226,182,79,.6);
}

/* כותרת השיעור: השורה שאחרי הנקודתיים בשורה משלה, ובכהה בזהב של הבאנר. הצללה עדינה לכותרת ולשורת "שלב #" שמעליה. כל הקורסים, במצב כהה.
   אייל, 07/11: "בכל שיעור תעשה שהשורה השנייה תהיה בזהב והשורה הראשונה בלבן", "תעשה הצללה עדינה לטקסט הזה וגם לחלק שמעל" */
/* הכותרת לא יורדת שורה אחרי הנקודתיים כשיש מקום (אייל, 10/11: "את הכותרות לא צריך לרדת שורה אם אין צורך ויש מקום לכתוב"). השורה האחרונה שמוצגת עדיין בזהב */
.stn .shead h3 .hl2 { display: inline; }
html[data-mode="dark"] body .stn .shead h3 .hl2 .hw.hgold {
  background: linear-gradient(180deg, #F2CF74 0%, #E2B64F 55%, #CFA03E 100%); /* זהב אחיד מלמעלה למטה, בלי ברק לבן בתוך המילים (אייל, 07/11: "יש פה יותר מדי הצללות של לבן בתוך הזהב הזה, זה פחות קריא") */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-mode="dark"] body .stn .shead :is(h3, .k) { filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }

/* בלי פס גלילה בכל האתר (הגלילה עצמה עובדת). אייל, 07/11: "לא רוצה לראות את הפס גלילה, תעשה אותו נסתר, גם באתר של הפריצה". כל הקורסים */
html[data-skin="columns"], html[data-skin="columns"] * { scrollbar-width: none !important; }
html[data-skin="columns"] ::-webkit-scrollbar { width: 0; height: 0; }

/* במקום "המסע שלך · שלב 1 מתוך 25": מד התקדמות באחוזים (אייל, 07/11: "תסיר את המסע ותעשה גרף התקדמות באחוזים"). כל הקורסים */
/* נמוך (אייל, 10/11: "תעשה את פס ההתקדמות פחות גבוה בגובה שלו"): ריפוד 8, רווח 6, אחוז 17, פס 6 */
html[data-skin="columns"] .djh.dprog { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
html[data-skin="columns"] .djh.dprog .dpt b { font-size: 14px; line-height: 1.2; }
.dprog .dpt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dprog .dpt span { font-size: 17px; font-weight: 800; line-height: 1; color: var(--c-tx); font-variant-numeric: tabular-nums; }
.dprog .dpbar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--c-tx) 12%, transparent); overflow: hidden; }
.dprog .dpbar i { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: var(--c-acc); }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .dprog .dpbar i { background: linear-gradient(90deg, #C9A24A 0%, #E2B64F 40%, #FFF1C2 75%, #F3D68C 100%); box-shadow: 0 0 12px rgba(243,214,140,.45); }
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .dprog .dpt span { color: #F3D68C; }

/* תפריט הצד המקופל: אותם עיגולים בזהב כמו ברשימה הפתוחה (אייל, 07/11: "כשהמספרים סגורים זה עדיין בזהב", כלומר גם שם בזהב). להמציא בכהה */
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .dstrip .dd:not(.done):not(.locked) {
  color: #1C0A3D; font-weight: 800; border-color: transparent;
  background: linear-gradient(150deg, #FFF1C2 0%, #F3D68C 22%, #E2B64F 52%, #C9A24A 82%, #F7E4A6 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,78,0,.35), 0 4px 12px -4px rgba(226,182,79,.6);
}
html[data-skin="columns"][data-mode="dark"][data-pal="gl5"] .dstrip .dd.cur { box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 0 0 4px rgba(243,214,140,.22), 0 0 16px rgba(243,214,140,.6); }

/* הכותרת בפס הדביק: בשורה אחת רציפה, ואותן מילים בזהב כמו בכותרת השיעור (אייל, 07/11: "מה שמודגש בזהב מודגש גם פה") */
.cpht .hl1::after { content: " "; }
html[data-mode="dark"] .cpht .hw.hgold { background: linear-gradient(180deg, #F2CF74 0%, #E2B64F 55%, #CFA03E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* מקטעים ברשימה במחשב (אייל 07/11): כל שיעור חי והנלווים שלו פתוחים יחד, עם רווח בין מקטע למקטע */
@media (min-width: 981px) {
  html[data-skin="columns"] .dln.open { padding-bottom: 6px; }
}

/* שם של שיעור או פריט בתפריט השיעורים מופיע במלואו, בלי חיתוך ושלוש נקודות, במחשב ובטלפון. כל הקורסים.
   אייל, 10/11: "כשיש שיעור שהוא עם טקסט ארוך - כל הטקסט מופיע בתצוגה גם בדסקטופ וגם במובייל" */
html[data-skin] :is(.cls .t > span, .csh .tt, .cit .tt, .dln .t, .dit .tt) { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

/* במחשב, שורה של מפגש: למעלה "18.10.26 מפגש חי #1" בגברת לוין, ומתחת שם השיעור. כמו בכרטיס בטלפון. כל הקורסים.
   אייל, 10/11: "תאריך מפגש חי #1 (עד 11) - בגברת לוין, מתחת השם של השיעור" */
html[data-skin] .dln > button .t .mk { display: block; font-family: "Levin", var(--ui); font-weight: 400; font-synthesis: none; font-size: 1.05em; line-height: 1.2; padding-bottom: .1em; color: var(--c-tx2); }
html[data-skin] .dln > button .t .mn { display: block; }
/* צבע אחד לשורה בגברת לוין בכל מצב, במחשב ובטלפון, בכל הקורסים (אייל, 10/11: "הצבעים של מפגש חי בגברת לוין לא טובים ולא אחידים זה צריך להיות אחיד בכל האתר").
   בכהה זהב שמפניה כהה (10/11: "תעשה זהב שמפניה בטיפה יותר כהה", בחר "כהה יותר", #D9B97A). בבהיר זהב כהה #8C6A2E, באותה משפחה של העיגולים (10/11: "תעשה זהב") */
html[data-skin]:not([data-mode="light"]) body :is(.dln, .dln.cur):not(.locked) > button .t .mk, html[data-skin]:not([data-mode="light"]) body :is(.cseg, .cseg.cur):not(.lock) .csh .k.k.k { color: #D9B97A; }
html[data-skin][data-mode="light"] body :is(.dln, .dln.cur):not(.locked) > button .t .mk, html[data-skin][data-mode="light"] body :is(.cseg, .cseg.cur):not(.lock) .csh .k.k.k { color: #8C6A2E; }
/* שיעור נעול: כל השורה באפור, גם "מפגש חי" בגברת לוין ו"עוד N פריטים", בצבע של שם השיעור (אייל, 10/11: "כשהשיעור נעול כל הצבע של השיעור הוא אפור כולל הכותרת") */
html[data-skin][data-mode] body .dln.locked > button .t .mk.mk, html[data-skin][data-mode] body .cseg.lock .csh :is(.k.k.k.k, .km.km.km), html[data-skin][data-mode] body :is(.dit, .cit).locked .lb.lb.lb.lb { color: inherit; }
/*
 * גברת לוין בתפריט הצד מיושרת חלקית: הפונט נוטה 16 מעלות בקובץ עצמו, ובטקסט קטן זה "אלכסוני מדי ולא ממש קריא".
 * מחזירים 11 מעלות, כך שנשארת נטייה של 5 (אייל, 10/11, בחר יישור 3: "רק בתפריט צד - בכל האתרים ובכל טקסט שאני יכתוב מתישהו בתפריט צד").
 * כל טקסט חדש בגברת לוין בתפריט הצד נכנס לרשימה כאן, או מקבל את המחלקה lvs. מחוץ לתפריט הצד (השיעור, הבועות) הפונט נשאר כמו שהוא
 */
html[data-skin] #mid :is(.csh .k, .cit .lb, .dit .lb, .lvs) { display: inline-block; transform: skewX(11deg); transform-origin: 50% 100%; }
html[data-skin] #mid .dln > button .t .mk { transform: skewX(11deg); transform-origin: 50% 100%; }
/* "עוד N פריטים" בתוך השורה כתוב בגופן הרגיל, ולכן מבטלים לו את היישור */
html[data-skin] #mid .csh .k .km { display: inline-block; transform: skewX(-11deg); }

/* עיגולי המספרים בזהב של הבאנר בכל הקורסים, בכהה ובבהיר. שיעור שהושלם או נעול שומר על הסימן שלו.
   אייל, 10/11: "למה המספרים של השיעור לא בזהב בבהיר... אתה לא משנה הדברים" (היה רק בלהמציא בכהה) */
html[data-skin][data-mode] :is(.cseg.open .n.n.n.n, .cseg.done .n.n.n.n, .cseg.cur .n.n.n.n, .dln.cur > button .n.n.n.n, .dln:not(.cur):not(.locked) > button .n.n.n.n) {
  color: #1C0A3D; font-weight: 800; border: 0;
  /* בכהה זהב שמפניה כהה, כמו השורה בגברת לוין (אייל, 10/11: "צהוב זה לא נראה זהב בכלל גם לא המספרים", בחר "כהה יותר") */
  background: linear-gradient(150deg, #F7E8C2 0%, #DFC385 30%, #BC954E 65%, #977335 90%, #E6CE97 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,78,0,.35), 0 4px 12px -4px rgba(188,149,78,.6);
}
/* הווי של שיעור שהושלם יושב משמאל (.dck), ומימין נשאר המספר בזהב (אייל, 10/11: "הוי לא יהיה יותר בצד ימין אלא רק בצד שמאל").
   מלא ובולט, בטורקיז של אייקון "מחממים מנועים" (10/11). הגוון (--tc) מוגדר יחד עם "מחממים מנועים" בכל ערכת צבעים */
.dck { --tc: var(--c-ok); --tg: var(--c-okfg); flex: none; margin-inline-start: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff) 0%, var(--tc) 52%, color-mix(in srgb, var(--tc) 72%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.26), 0 4px 10px -4px color-mix(in srgb, var(--tc) 70%, transparent); }
.dck svg { width: 13px; height: 13px; }
/* משמאל אין אייקון של סוג או מנעול. רק פריט שהושלם מקבל וי (אייל, 10/11: "בצד שמאל לא יהיה אייקון ליד המודול של השיעור - יהיה ריק. אם התלמיד משלים את השיעור רק אז מופיע שם אייקון של וי") */
:is(.dit:not(.ok) .ic, .cit:not(.ok) .ic b) { visibility: hidden; }
html[data-skin][data-mode] :is(.cseg.cur .n.n.n.n, .dln.cur > button .n.n.n.n) {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(120,78,0,.35), 0 0 0 3px rgba(243,214,140,.22), 0 6px 18px -4px rgba(243,214,140,.75);
}

/* בבהיר: השמפניה של הכהה עם ברק עדין מאוד בפינה, וקו דק כהה סביב, כדי שלא ייראה צהוב (אייל, 10/11: "זה לא זהב דביל זה צהוב", "הכפתורים הם לא זהב הם צהוב כהה מאד",
   "תראה שמפניה כמו בכהה - אבל עם זהב וברק בפינה ברק עדין", ובחר 1 "ברק עדין מאוד"). ספרה כהה */
html[data-skin][data-mode="light"] :is(.cseg.open .n.n.n.n, .cseg.done .n.n.n.n, .cseg.cur .n.n.n.n, .dln.cur > button .n.n.n.n, .dln:not(.cur):not(.locked) > button .n.n.n.n) {
  color: #2a1a05; border: 1px solid rgba(110,80,30,.35);
  background: radial-gradient(circle at 30% 26%, rgba(255,251,238,.45) 0%, rgba(255,251,238,0) 40%), linear-gradient(150deg, #F7E8C2 0%, #DFC385 30%, #BC954E 65%, #977335 90%, #E6CE97 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(80,55,15,.32), 0 3px 8px -3px rgba(90,65,25,.45);
}

/* בבהיר: צבע אחד לכל מה שירוק, טורקיז כהה #006D7E, בכל הקורסים ובכל ערכות הצבעים: הווי, כפתור "סיימתי את השלב", פסי ההתקדמות, החלק השני בשיעור.
 * בתפריט השיעורים: "השיעור החי" בטורקיז הזה (הצבע הקבוע של שמות השיעורים), והשיעור הנלווה (מחממים מנועים, הגשמה מעשית, אמנות הלמידה) בסגול #5C1CAB.
 * אייל, 10/11/2026: "השיעור החי יהיה בטורקיז - קצת יותר כהה ממה שיש עכשיו במחממים מנועים (וזה יהיה הצבע הקבוע של שמות השיעורים) והשיעור הנלווה... בסגול", "שים לב שיש גוון אחיד בכל המקומות",
 * ובחר את גוון 3 מההדמיה: "גם הוי משתנה בצבע וכל האלמנטים שהם בירוקים משתנים לזה". :root[...][data-pal] גובר על הכללים של כל ערכת צבעים */
:root[data-skin][data-mode="light"][data-pal] { --teal: #006D7E; --c-ok: #006D7E; --g-ok: #006D7E; }
:root[data-skin][data-mode="light"][data-pal] :is(.dck, .dit.ok .ic, .cit.ok .ic b) { --tc: #006D7E; }
:root[data-skin][data-mode="light"][data-pal] :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw):not(.ok) { --tc: #5C1CAB; }
:root[data-skin][data-mode="light"][data-pal] :is(.cit.tn, .dit.tn, .cit.tw, .dit.tw):not(.locked) .lb.lb { color: #5C1CAB; }
:root[data-skin][data-mode="light"][data-pal] :is(.cit.tl, .dit.tl):not(.locked) .lb.lb { color: #006D7E; }
/* palettes.css צובע את כפתור "סיימתי את השלב", פסי ההתקדמות והווי ב---p-ok של ערכת הצבעים. בערכות שהצבע הזה בהן טורקיז, גם הוא #006D7E */
:root[data-skin][data-mode="light"]:is([data-pal^="dk"], [data-pal="levilife"], [data-pal="teal"], [data-pal="dawn"], [data-pal="sky"], [data-pal="lagoon"], [data-pal="aurora"], [data-pal^="gl"]) { --p-ok: #006D7E; }