/*
 * members.css — אתר החברים. השפה של ההדמיות שאושרו (V6 לתלמיד, V7 לניהול, 18/10/2026):
 * רקע כהה עם אור צבעוני, משטחים של זכוכית, מסלול של תחנות ונגן שנשאר למטה.
 * עולם כהה אחד בכוונה, בתלמיד ובניהול.
 */
:root {
  --ink: #FFFFFF; --mut: rgba(255,255,255,.68); --faint: rgba(255,255,255,.14);
  --gold: #FDBF04; --teal: #3FE3D0; --pink: #FF4F8F; --vio: #7027CC; --night: #0E0B1F;
  --glass: rgba(255,255,255,.08); --edge: rgba(255,255,255,.15); --hi: rgba(255,255,255,.2);
  --ui: 'Heebo', 'Rubik', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { direction: rtl; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  background: radial-gradient(circle at 85% 8%, rgba(112,39,204,.75), transparent 42%),
              radial-gradient(circle at 8% 50%, rgba(63,227,208,.28), transparent 40%),
              radial-gradient(circle at 70% 96%, rgba(255,79,143,.32), transparent 42%), var(--night);
  background-attachment: fixed;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; text-align: inherit; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[hidden] { display: none !important; }
.gl { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--edge); border-radius: 24px; box-shadow: inset 0 1px 0 var(--hi), 0 18px 40px rgba(0,0,0,.28); }
.sc { overflow-y: auto; overflow-x: hidden; } .sc::-webkit-scrollbar { width: 0; height: 0; }
.k { font-size: 12.5px; color: var(--teal); font-weight: 700; letter-spacing: .03em; }
.mut { color: var(--mut); }
.av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 800; flex: none; }
.gold { background: linear-gradient(180deg, #FFE27A, var(--gold)); color: #1a1236; font-weight: 800; border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 22px rgba(253,191,4,.28); white-space: nowrap; }
.ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-weight: 700; border-radius: 999px; padding: 9px 16px; white-space: nowrap; font-size: 14px; }
.art { border-radius: 10px; flex: none; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(253,191,4,.6), transparent 45%), radial-gradient(circle at 80% 85%, rgba(63,227,208,.45), transparent 45%), linear-gradient(160deg, #5a2fb0, #1a1236); }
.art.a2 { background: radial-gradient(circle at 70% 30%, rgba(255,79,143,.6), transparent 50%), linear-gradient(160deg, #5a2fb0, #1a1236); }
.art.a3 { background: radial-gradient(circle at 30% 70%, rgba(63,227,208,.6), transparent 50%), linear-gradient(160deg, #2b1f63, #120b26); }
.art.a4 { background: radial-gradient(circle at 60% 20%, rgba(253,191,4,.5), transparent 50%), linear-gradient(160deg, #3d1278, #120b26); }
.art.a5 { background: radial-gradient(circle at 20% 40%, rgba(255,243,92,.45), transparent 50%), linear-gradient(160deg, #4a1d6e, #120b26); }
.art.a6 { background: radial-gradient(circle at 80% 70%, rgba(255,79,143,.45), transparent 50%), radial-gradient(circle at 20% 20%, rgba(63,227,208,.35), transparent 45%), linear-gradient(160deg, #24123f, #0E0B1F); }
.art.a7 { background: linear-gradient(160deg, #3a3a52, #16141f); }
.pp { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1a1236; display: grid; place-items: center; flex: none; }
.pp svg { width: 18px; height: 18px; }
.toast { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); padding: 11px 18px; font-weight: 700; font-size: 14px; z-index: 30; display: flex; gap: 8px; align-items: center; background: rgba(30,22,64,.88); border-radius: 18px; border: 1px solid var(--edge); }

/* ===================== התלמיד ===================== */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 250px 1fr 360px; grid-template-rows: 1fr 88px; }
.lib { grid-row: 1; margin: 14px 14px 0 0; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lib .lt { font-weight: 900; font-size: 17px; padding: 0 38px 12px 8px; display: flex; align-items: center; gap: 8px; min-height: 30px; }
/* כפתור קיפול התפריט, כמו במפקדה: אייקון בלי רקע, באותו מקום כשהתפריט פתוח וכשהוא מקופל */
.sidebtn { position: fixed; top: 29px; right: 30px; z-index: 6; width: 32px; height: 32px; display: grid; place-items: center; color: var(--mut); border-radius: 8px; }
.sidebtn:hover { color: #fff; }
.sidebtn svg { width: 20px; height: 20px; }
.app.folded { grid-template-columns: 1fr 360px; }
.app.folded .lib { display: none; }
.app.folded .mid { padding-right: 66px; }
.lib .it { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; width: 100%; }
.lib .it:hover { background: rgba(255,255,255,.06); }
.lib .it.on { background: rgba(255,255,255,.1); }
.lib .it .art { width: 46px; height: 46px; }
.lib .it b { font-size: 14px; font-weight: 700; line-height: 1.25; flex: 1; min-width: 0; }
.lib .it b span { display: block; font-size: 12px; color: var(--mut); font-weight: 400; }
.lib .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; font-size: 14px; font-weight: 700; }
.lib .me button { margin-inline-start: auto; font-size: 12.5px; color: var(--mut); font-weight: 500; }
.mid { grid-row: 1; padding: 22px 20px 10px; display: flex; flex-direction: column; min-width: 0; }
.mid h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; line-height: 1.05; text-wrap: balance; }
.hd { display: none; align-items: center; gap: 12px; }
.hd .hi { font-weight: 900; font-size: 27px; line-height: 1.15; text-wrap: balance; }
.hd .av { margin-inline-start: auto; }
.chips { display: none; gap: 8px; overflow-x: auto; margin: 16px -18px 0; padding: 0 18px; }
.chips::-webkit-scrollbar { height: 0; }
.chip { flex: none; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--mut); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.chip.on { color: #1a1236; background: linear-gradient(180deg, #FFE27A, var(--gold)); border-color: transparent; font-weight: 800; }
.stats { display: flex; gap: 10px; margin-top: 14px; max-width: 440px; }
.stats .gl { flex: 1; padding: 10px 12px; border-radius: 18px; display: flex; flex-direction: column; }
.stats b { font-size: 22px; font-weight: 900; line-height: 1.1; }
.stats span { font-size: 12px; color: var(--mut); }

.path { position: relative; margin: 10px auto 30px; flex: none; }
.path svg.ln { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.node { position: absolute; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; }
.node small { font-size: 11.5px; color: var(--mut); text-align: center; line-height: 1.3; }
.st { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 17px; position: relative;
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.st svg { width: 24px; height: 24px; }
.st.done { color: var(--teal); border-color: rgba(63,227,208,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 18px rgba(63,227,208,.35); }
.st.locked { color: rgba(255,255,255,.45); } .st.locked svg { width: 20px; height: 20px; }
.st.open { color: #fff; border-color: rgba(253,191,4,.45); }
.st.current { width: 80px; height: 80px; border: 0; background: linear-gradient(180deg, #fff, #E9E2FF); color: #2a1150; box-shadow: 0 0 0 7px rgba(253,191,4,.18), 0 0 40px rgba(112,39,204,.8); }
.st.current svg { width: 30px; height: 30px; }
.st.current::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(253,191,4,.55); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .35; } }
.st.bonus { width: 40px; height: 40px; color: var(--gold); border-color: rgba(253,191,4,.5); } .st.bonus svg { width: 18px; height: 18px; }
.node.sel .st:not(.current) { outline: 2px solid var(--gold); outline-offset: 4px; }
.bub { background: #fff; color: #1a1236; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 12px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.3); }

.pan { grid-row: 1; margin: 14px 0 0 14px; padding: 22px 20px; min-height: 0; }
.stn { display: flex; flex-direction: column; gap: 12px; }
.stn > * { flex: none; }
.stn h3 { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.1; text-wrap: balance; }
.pcard { padding: 14px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; }
.wv { display: flex; align-items: center; gap: 2px; height: 46px; cursor: pointer; }
.wv b { flex: 1; border-radius: 2px; background: rgba(255,255,255,.18); }
.wv b.p { background: linear-gradient(0deg, var(--teal), #9ff3ea); }
.pcard .ctl { display: flex; align-items: center; gap: 12px; }
.pcard .ctl .pp { width: 48px; height: 48px; } .pcard .ctl .pp svg { width: 20px; height: 20px; }
.pcard .tm { font-size: 13px; color: var(--mut); }
.pcard .ok { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal); }
.pcard .ok svg { width: 16px; height: 16px; }
.parts { display: flex; gap: 6px; }
/* נגן לכל חלק (02/11): כותרת החלק מעל הכרטיס, כמו כותרת של קטע בדף, ורווח לפני החלק הבא */
.ppart { display: flex; flex-direction: column; gap: 8px; }
/* עמוד מרווח (אייל, 02/11: "תרווח קצת בין חלק א' לחלק ב'... ובין הכותרת... לבין חלק א'"): 28 מכותרת השיעור לחלק הראשון, 34 בין חלקים, כמו אחרי סרטון.
   המרווח הרגיל בין רכיבים בשיעור הוא 12, ולכן כאן התוספת */
/* כותרת השיעור בכרטיס זכוכית (V32, אפשרות 1, 02/11): 20 פיקסלים עד מה שאחריו */
.shead { display: flex; flex-direction: column; gap: 0; padding: 14px 16px 16px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
html[data-mode="light"] .shead { background: rgba(33,21,65,.05); border-color: rgba(33,21,65,.12); }
/* בדיוק כמו בהדמיה V32 (.eye ו-h1), בכל הסקינים: "שלב 02" 14 במשקל 700 בזהב, והכותרת 22 במשקל 800, 6 פיקסלים מתחתיו */
html[data-skin] body .stn .shead h3 { font-family: 'Rubik', var(--ui); }
/* הכותרת הקטנה ("שלב #02") בכתב יד, באותו טיפול כמו ".csh .k" ברשימת השיעורים: אותו גודל, אותו צבע, והספרות והסולמית ב-Heebo */
html[data-skin] body .stn .shead .k { font-family: "Levin", var(--ui); font-weight: 400; font-synthesis: none; font-size: 16px; line-height: 1.2; letter-spacing: 0; color: var(--c-tx2); }
html[data-skin] body .stn .shead .k.cur { color: var(--c-acc, #e9c46a); }
html[data-skin][data-mode="light"] body .stn .shead .k.cur { color: #8a5a00; }
/* מספר השלב מעל הכותרת בטורקיז בגרסה הכהה, בכל הסקינים. בבהירה נשאר כמו שהוא (אייל, 09/11/2026: "תעשה שמספרי השלבים בגרסה הכהה יהיו בטורקיז", "בגרסה הבהירה זה ישאר בסגול") */
html[data-skin]:not([data-mode="light"]) body .stn .shead .k, html[data-skin]:not([data-mode="light"]) body .stn .shead .k.cur { color: #3FE3D0; }
/* ובבהירה בסגול של המערכת, בכל השלבים (אייל, 09/11/2026: "ביקשתי שכל מספרי השלבים בלהמציא תצוגה בהירה - יהיו בסגול שהיה בגרסה הכהה או סגול שיש כבר במערכת הבהירה"). .k.k.k גובר על הצבעים של הפלטות */
html[data-skin][data-mode="light"] body .stn .shead .k.k.k { color: #5C1CAB; }
html[data-skin] body .stn .shead .k .kn { font-family: inherit; font-size: inherit; font-weight: inherit; } /* גברת לוין בלבד (אייל, 07/11) */
/* שיעור סגור לא לחיץ, בכל הסקינים ובכל הקורסים (אייל, 09/11/2026). הבדיקה עצמה ב-openStation, וכאן רק שלא ייראה לחיץ */
:is(.locked, .lock) :is([data-open], [data-dopen]), :is([data-open], [data-dopen]):is(.locked, .lock) { cursor: default; pointer-events: none; }
@media (max-width: 980px) { html[data-skin] body .stn .shead .k { font-size: 19px; } }
html[data-skin][data-mode="light"] body .stn .shead h3 { color: #3b3646; } /* כותרת השיעור בבהיר: אפור כהה כמו שם החלק (אייל, 10/11: "הכותרת תיהיה כתובה בשחור אפור כמו הצבע של החלק של השיעור"). "שלב #" מעליה נשאר בצבע שלו. קודם: סגול, נפסל */
html[data-skin] body .stn .shead h3 { font-size: 22px; font-weight: 800; line-height: 1.35; margin: 6px 0 0; text-wrap: balance; max-width: none; }
.shead + * { margin-top: 8px; }
/* בטלפון: 16 פיקסלים מהבאנר לכרטיס (המרווח הרגיל 12) */
@media (max-width: 980px) { .shead { margin-top: 4px; } }
.ppart + .ppart { margin-top: 22px; }
/* "סימון התחנה כהושלמה" 34 פיקסלים מתחת לנגן האחרון (אייל, 02/11: "תוריד קצת למטה"), גם בשיעור עם חלק אחד */
.ppart + .donebtn, .pcard + .donebtn { margin-top: 22px; }
/* בגופן גברת לוין (אייל, 02/11: "ושזה יהיה כתוב בגברת לוין"), קטן ודק ("יותר קטן... ממש טיפה פונט יותר דק"): 19 פיקסלים, בלי הדגשה ובלי קו מתאר */
.ptitle { font-family: "Levin", var(--ui); font-size: 19px; font-weight: 400; font-synthesis: none; -webkit-text-stroke: 0; color: var(--c-tx, #fff); margin: 0; padding-inline: 4px; line-height: 1.3; text-align: right; text-wrap: balance; }
/*
 * הכותרת של חלק (V49, אייל 10/11/2026: "סוג של צבע אבל שקוף יותר - רק על השם של השיעור עצמו"): משטח בצבע שקוף עם קו דק,
 * תווית "חלק א' · 1:17:45" ומתחתיה השם. ארבעה צבעים לפי הסדר של החלק בשיעור: סגול, טורקיז, זהב, אדום (pt0 עד pt3).
 * השם: בבהיר אפור כהה, בכהה לבן ("לא שחור-שחור, אבל שחור בהיר או אפור כהה"). שבירה רגילה: נכנס בשורה אחת נשאר בשורה אחת,
 * ושם ארוך ממלא את השורה הראשונה ועובר לשורה מתחת. הכללים והצבעים: docs/SPEC.md כלל 4.11
 */
.ppart .ptitle { --pt-bg: rgba(167,139,250,.13); --pt-edge: rgba(167,139,250,.24); --pt-chip: rgba(167,139,250,.2); --pt-chipx: #d4c4ff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px 14px; border-radius: 18px; background: var(--pt-bg); border: 1px solid var(--pt-edge); color: #fff; text-wrap: wrap; }
.ppart.pt1 .ptitle { --pt-bg: rgba(63,227,208,.10); --pt-edge: rgba(63,227,208,.22); --pt-chip: rgba(63,227,208,.16); --pt-chipx: #6ff0df; }
.ppart.pt2 .ptitle { --pt-bg: rgba(242,193,78,.11); --pt-edge: rgba(242,193,78,.26); --pt-chip: rgba(242,193,78,.18); --pt-chipx: #f6cd6a; }
.ppart.pt3 .ptitle { --pt-bg: rgba(251,113,133,.11); --pt-edge: rgba(251,113,133,.24); --pt-chip: rgba(251,113,133,.18); --pt-chipx: #fb94a7; }
html[data-mode="light"] .ppart .ptitle { --pt-bg: rgba(109,40,217,.08); --pt-edge: rgba(109,40,217,.16); --pt-chip: rgba(109,40,217,.12); --pt-chipx: #6d28d9; color: #3b3646; }
html[data-mode="light"] .ppart.pt1 .ptitle { --pt-bg: rgba(0,109,126,.09); --pt-edge: rgba(0,109,126,.18); --pt-chip: rgba(0,109,126,.13); --pt-chipx: #006D7E; }
html[data-mode="light"] .ppart.pt2 .ptitle { --pt-bg: rgba(214,158,16,.10); --pt-edge: rgba(214,158,16,.26); --pt-chip: rgba(214,158,16,.16); --pt-chipx: #8f6200; }
html[data-mode="light"] .ppart.pt3 .ptitle { --pt-bg: rgba(225,29,72,.07); --pt-edge: rgba(225,29,72,.18); --pt-chip: rgba(225,29,72,.11); --pt-chipx: #be123c; }
.ptitle .pchip { font: 700 12px/1 Heebo, Arial, sans-serif; color: var(--pt-chipx); padding: 5px 10px; border-radius: 999px; background: var(--pt-chip); white-space: nowrap; }
.ptitle .pname { display: block; width: 100%; text-align: right; letter-spacing: .017em; word-spacing: .055em; line-height: 1.38; } /* אוויר בין האותיות, בין "קצת" ל"בינוני" בהדמיה (אייל, 10/11). .06em/.14em נפסל: "זה יותר מדי" */
/* בכהה אותו עובי נראה כמו בבהיר: לבן על כהה נראה עבה, ולכן קו דק בצבע הרקע מדלל את האותיות. אייל, 10/11: "תעשה שהעובי של הגופן בכהה יהיה כמו הבהיר" */
html:not([data-mode="light"]) .ptitle .pname { -webkit-text-stroke: .35px #1c1530; }
.ptitle .pname .kn { font-family: Heebo, Arial, sans-serif; font-size: .82em; font-weight: 700; }
/* שם החלק בגברת לוין מיושר חלקית: מחזירים 6 מעלות מתוך ה-16 של הפונט, פחות מהיישור של הטקסט הקטן בתפריט הצד (אייל, 10/11: "את הגודל גופן הזה של גברת לוין ניישר ביישור פחות חזק מהיישור של הקטן - אפילו 2"). בכל האתרים */
.ptitle .pname { transform: skewX(6deg); transform-origin: 100% 100%; }
.ptitle .pname .kn { display: inline-block; transform: skewX(-6deg); }
/* אותו יישור ב"שלב #01" ובשאר הכותרות הקטנות בגברת לוין בשיעור, ובטקסט של בועות הדמות (אונבורדינג, סיור). אייל, 10/11: "כן שניהם יישור 2" */
html[data-skin] body .stn .shead .k { display: inline-block; transform: skewX(6deg); transform-origin: 100% 100%; }
.obsay .sbt, .obtour .obbub.obsay p { transform: skewX(6deg); transform-origin: 50% 100%; }
.obsay .obdg { display: inline-block; transform: skewX(-6deg); }
.parts button { padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(255,255,255,.18); color: var(--mut); }
.parts button.on { background: #fff; color: #1a1236; border-color: transparent; }
.video { border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }
.vposter { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; flex: none;
  background: radial-gradient(circle at 30% 25%, rgba(253,191,4,.35), transparent 45%), linear-gradient(160deg, #3d1278, #120b26); border: 1px solid var(--edge); }
.vposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vposter .pp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.vposter .pp svg { width: 24px; height: 24px; }
.vposter .vdur { position: absolute; bottom: 10px; left: 10px; background: rgba(14,11,31,.72); color: #fff; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.row svg { width: 20px; height: 20px; flex: none; color: var(--teal); }
.task { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; }
.task .q { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.task textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(0,0,0,.18); color: #fff; padding: 9px 11px; font-size: 14px; line-height: 1.45; }
.task textarea::placeholder { color: rgba(255,255,255,.5); }
.task textarea:focus { outline: 1.5px solid var(--gold); }
.saved { font-size: 12px; color: var(--teal); min-height: 16px; }
.donebtn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 16px; font-weight: 800; font-size: 15px; border: 1px solid rgba(63,227,208,.5); color: var(--teal); background: rgba(63,227,208,.08); }
.donebtn.on { background: var(--teal); color: #0E0B1F; border-color: transparent; }
.donebtn svg { width: 18px; height: 18px; }
.lockbox { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; text-align: center; }
.lockbox svg { width: 34px; height: 34px; color: var(--mut); }
.lockbox b { font-size: 18px; font-weight: 800; }
.soon { padding: 14px; border-radius: 18px; font-size: 14px; color: var(--mut); }
/* רצף התוכן של שיעור: כותרת, סרטון, קישור, תמונה */
.btext { margin: 4px 0 0; font-size: 15px; line-height: 1.6; font-weight: 600; white-space: pre-line; }
/* מרווחים בשיעור (אייל, 18/10): כותרת צמודה לסרטון שלה, ומרווח אחרי כל סרטון לפני הכותרת הבאה */
.btext + .vposter, .btext + .video, .btext + .bimg { margin-top: -4px; }
.vposter + :not(.barrows), .video + :not(.barrows), .bimg + .btext { margin-top: 22px; }
.row + .btext, .row + .vposter, .row + .video { margin-top: 34px; }
.vposter + .barrows, .video + .barrows { margin-top: 2px; }
.barrows { display: block; width: 116px; height: auto; align-self: center; margin-bottom: 14px; opacity: .9; }
.bimg { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--edge); }
button.row { width: 100%; }
.stn .row { justify-content: center; text-align: center; }
/* שמע בתוך השיעור (21/10): צמוד לכותרת שמעליו כמו סרטון, ומסומן כשהוא מתנגן */
.btext + .arow { margin-top: -4px; }
.arow.on { border-color: rgba(63,227,208,.55); box-shadow: 0 0 18px rgba(63,227,208,.18); }
/* דפי עבודה: ה-PDF בחלון בתוך האפליקציה */
.docv { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: rgba(8,6,20,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.docbar { margin: 12px 12px 0; padding: 10px 12px 10px 10px; border-radius: 20px; display: flex; align-items: center; gap: 10px; }
.docbar b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docbar .gold, .docbar .ghost { padding: 8px 14px; font-size: 14px; text-decoration: none; }
.docbar .gold svg { width: 16px; height: 16px; }
.docbar .x { width: 38px; height: 38px; display: grid; place-items: center; color: var(--mut); flex: none; }
.docbar .x svg { width: 20px; height: 20px; }
.docpages { flex: 1; overflow-y: auto; padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.docpage { width: 100%; max-width: 860px; background: #fff; border-radius: 10px; overflow: hidden; flex: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.docpage canvas { display: block; width: 100%; height: auto; }
.docpage { display: grid; place-items: center; }
.docpage .ld { color: #6B6B6B; font-size: 14px; font-weight: 600; }

.pbar { grid-column: 1 / -1; margin: 12px 14px 14px; border-radius: 22px; display: flex; align-items: center; gap: 18px; padding: 0 22px; }
.pbar .now { display: flex; align-items: center; gap: 12px; width: 260px; min-width: 0; }
.pbar .now .art { width: 52px; height: 52px; }
.pbar .now b { font-size: 14.5px; font-weight: 800; display: block; line-height: 1.25; }
.pbar .now span { font-size: 12px; color: var(--mut); }
.pbar .ctr { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pbar .bt { display: flex; align-items: center; gap: 18px; }
.pbar .bt .sk { font-size: 12px; font-weight: 700; color: var(--mut); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); }
.pbar .wv { height: 24px; width: 100%; max-width: 560px; }
.pbar .tm { font-size: 12px; color: var(--mut); width: 200px; text-align: left; }
.mini { display: none; }
.sheet { display: none; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.center .gl .cact { display: flex; justify-content: flex-end; }
.center .gl { max-width: 440px; padding: 28px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.center h1 { margin: 0; font-size: 26px; font-weight: 900; }

@media (max-width: 980px) {
  .app { display: block; height: auto; min-height: 100dvh; padding: 52px 18px 120px; }
  .lib, .pan, .pbar, .sidebtn { display: none; }
  .mid { padding: 0; }
  .mid .mh { display: block; margin-top: 16px; }
  .mid .mh h2 { font-size: 23px; line-height: 1.2; }
  .hd, .chips { display: flex; }
  .mini { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 10px 12px; align-items: center; gap: 10px; border-radius: 18px; z-index: 12; overflow: hidden; background: rgba(28,20,58,.72); }
  .mini .art { width: 42px; height: 42px; }
  .mini .op { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .mini .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mini .tt b { font-size: 14px; font-weight: 800; line-height: 1.25; }
  .mini .tt span { font-size: 12px; color: var(--mut); }
  .mini .pg { position: absolute; bottom: 0; right: 0; left: 0; height: 3px; background: rgba(255,255,255,.12); }
  .mini .pg i { display: block; height: 100%; background: linear-gradient(270deg, var(--teal), var(--gold)); margin-inline-start: auto; }
  /* בטלפון התחנה נפתחת כעמוד מלא בגובה המסך, כמו עמוד חדש, ולא כחלון שעולה מלמטה (אייל, 18/10) */
  .sheet { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 11; padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(-100%); visibility: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
    background: radial-gradient(circle at 85% 8%, rgba(112,39,204,.75), transparent 42%), radial-gradient(circle at 8% 50%, rgba(63,227,208,.28), transparent 40%), radial-gradient(circle at 70% 96%, rgba(255,79,143,.32), transparent 42%), var(--night); }
  .sheet.on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.16,1,.3,1); }
  /* כשהתחנה פתוחה, הדף שמאחור לא זז, כדי שהגלילה תישאר בתחנה */
  html.sheet-open, html.sheet-open body { overflow: hidden; }
  .sheet .shd { flex: none; display: flex; align-items: center; padding: 12px 14px 4px; }
  .sheet .back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
  .sheet .back svg { width: 18px; height: 18px; }
  .sheet .stn::-webkit-scrollbar { width: 0; }
  .sheet .stn { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 120px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* מסכי הכניסה (25/10/2026): כניסה, שכחתי סיסמה, סיסמה חדשה, והחלפת סיסמה בתוך האתר */
.lg-card { width: 100%; max-width: 400px !important; text-align: right !important; gap: 14px !important; }
.lg-card h1 { text-align: center; }
.lg-sub { margin: -4px 0 4px; font-size: 15px; line-height: 1.6; text-align: center; }
.lg-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.lg-f input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(0,0,0,.22); color: #fff; padding: 12px 14px; font-size: 16px; text-align: left; }
.lg-f input:focus { outline: 1.5px solid var(--gold); border-color: transparent; }
.lg-err { margin: 0; color: #FF8FB1; font-size: 14px; font-weight: 600; }
.lg-hint { margin: -6px 0 0; font-size: 13px; }
.lg-go { justify-content: center; width: 100%; padding: 13px 18px; font-size: 16px; text-decoration: none; box-sizing: border-box; }
.lg-go:disabled { opacity: .6; cursor: default; }
/* כפתור ראשי משמאל וקישור משני מימין, באותה שורה (02/11: הכלל של אייל) */
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lg-row .lg-go { width: auto; padding-inline: 26px; }
.lg-link { color: var(--mut); font-size: 14px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.lg-link:hover { color: #fff; }
.lg-note { margin: 0; font-size: 13px; text-align: center; line-height: 1.5; }
.pwdlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5,4,12,.62); }
.pwdlg .lg-card { background: var(--night); }
/* ראשי משמאל וביטול מימין (02/11) */
.pwdlg .pwb { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pwdlg .pwb .lg-go { width: auto; padding-inline: 28px; }
.pwdlg .lg-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; text-align: right; border-radius: 22px; }
/* מסכי הכניסה והחלפת הסיסמה בבהיר (03/11/2026): כרטיס לבן עם צל רך, שדות לבנים, הודעת שגיאה בוורוד כהה */
html[data-mode="light"] .lg-card { background: #fff; border-color: rgba(30,21,56,.07); box-shadow: 0 1px 2px rgba(30,21,56,.05), 0 18px 44px -18px rgba(76,40,160,.3); }
html[data-mode="light"] .lg-f input { background: #fff; border-color: rgba(30,21,56,.16); color: var(--ink); }
html[data-mode="light"] .lg-f input:focus { outline-color: var(--vio); }
html[data-mode="light"] .lg-err { color: #c2185b; }
html[data-mode="light"] .lg-link:hover { color: var(--ink); }
html[data-mode="light"] .pwdlg { background: rgba(30,21,56,.32); }
.lib .me button { white-space: nowrap; }
.lib .me #out { margin-inline-start: 0; }

/* ===================== נגן השמע (אייל, 28/10/2026): גל אמיתי, זמן, פליי משמאל, קפיצות וגרירה ===================== */
/* מה שכבר נשמע: טורקיז (אייל, 28/10/2026: "לא צריך את הגל בצהוב... אולי טורקיז"). בפלטה: צבע ההצלחה שלה */
:root { --wv-on: var(--teal); --wv-ink: var(--ink); }
.pcard { gap: 10px; }
.aw { position: relative; height: 66px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 8px; }
.aw:focus-visible { outline: 2px solid var(--wv-on); outline-offset: 3px; }
.awc { display: block; width: 100%; height: 100%; }
.actl { display: flex; align-items: center; gap: 8px; }
.pcard .actl .pp { width: 48px; height: 48px; flex: none; } .pcard .actl .pp svg { width: 20px; height: 20px; }
.sk { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); opacity: .78; border: 1px solid rgba(255,255,255,.16); }
.sk:hover { opacity: 1; }
.sk svg { width: 21px; height: 21px; }
html[data-mode="light"] .sk { border-color: rgba(33,21,65,.16); }
/* מהירות השמעה (08/11/2026): כפתור ליד הקפיצות ותפריט קטן מעליו */
.sk.spd { width: auto; min-width: 46px; padding: 0 9px; border-radius: 19px; font: 700 13px/1 Heebo, Arial, sans-serif; letter-spacing: .2px; }
.spdm { position: fixed; z-index: 3000; display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: #1f1838; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 28px rgba(0,0,0,.35); direction: ltr; }
.spdm button { min-width: 48px; height: 38px; border-radius: 10px; font: 700 14px/1 Heebo, Arial, sans-serif; color: #fff; opacity: .82; }
.spdm button:hover, .spdm button:focus-visible { opacity: 1; background: rgba(255,255,255,.08); }
.spdm button.on { opacity: 1; background: #3FE3D0; color: #10202a; }
html[data-mode="light"] .spdm { background: #fff; border-color: rgba(33,21,65,.12); box-shadow: 0 10px 28px rgba(76,52,140,.18); }
html[data-mode="light"] .spdm button { color: #1E1538; }
html[data-mode="light"] .spdm button.on { background: #006D7E; color: #fff; }
@media (max-width: 420px) { .spdm button { min-width: 44px; } }
.actl .tm { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; margin-left: 4px; white-space: nowrap; }
.actl .ok { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal); }
.actl .ok svg { width: 16px; height: 16px; }
/* הפס הקבוע במחשב: פליי, קפיצות, הגל והזמן בשורה אחת */
.pbar .ctr { flex-direction: row; align-items: center; gap: 10px; }
.pbar .ctr .pp { flex: none; }
.pbar .aw { flex: 1; height: 30px; min-width: 120px; max-width: 640px; }
.pbar .ctr .tm { width: auto; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini .tt .ltr { font-variant-numeric: tabular-nums; }
/* בבהיר: Play בסגול של הר הגעש, כמו "שיעור מקדים" וה-V ברשימה (אייל, 03/11: "בצבע סגול, דומה להר געש"). בכהה נשאר הטורקיז */
html[data-mode="light"] .pcard .actl .pp, html[data-mode="light"] .pbar .ctr .pp { background: var(--c-acc, #6D28D9); color: #fff; }
.mini .pg i { background: var(--wv-on); }
/* נגן הווידאו (אייל, 28/10/2026: "נראה פח אשפה"). הנגן של דרייב בטלפון שם פס עליון ופקדים מתחת לסרטון, וב-16:9 הם נחתכים */
.video.drive { position: relative; }
@media (max-width: 600px) { .video.drive { aspect-ratio: auto; height: max(300px, calc((100vw - 32px) * 9 / 16)); } }
.vposter .vgo { position: absolute; top: 10px; right: 10px; background: rgba(14,11,31,.78); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.vposter .vres { color: var(--teal); }

/*
 * אונבורדינג לתלמיד חדש (V23, אושרה 01/11/2026): המסכים, הסיור והכרטיס "המטרה שלי".
 * בטלפון מסך מלא, במחשב חלון במרכז. הצבעים של ההדמיה, ובסקין עם צבעים משלו הצבעים שלו
 */
html.obon { overflow: hidden; }
.obv { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; direction: rtl;
  --ob-bg: var(--c-bg, #141026); --ob-tx: var(--c-tx, #f1effa); --ob-tx2: var(--c-tx2, #dcd8f0); --ob-acc: var(--c-acc, #f2c14e); --ob-ok: var(--c-ok, #3fe3d0);
  --ob-ring: var(--c-ring, rgba(255,255,255,.12)); --ob-chip: var(--c-chip, rgba(255,255,255,.08)); --ob-card: rgba(255,255,255,.055);
  background: rgba(8,6,20,.62); color: var(--ob-tx); font-family: inherit; }
.obc { position: relative; display: flex; flex-direction: column; width: min(440px, 100vw); height: min(760px, 100dvh); overflow: hidden; padding: 18px 20px 20px; border-radius: 26px; border: 1px solid var(--ob-ring);
  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%), var(--ob-bg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: obIn .22s ease both; }
/* בבהיר: הקווים הדקים של הרקע המרוקע, כמו באתר (אייל, 04/11: "תעשה את הרקע עם דוגמא של מרוקע של הקווים"). רק ברקע, הבועות והכרטיסים מעליהם */
html[data-mode="light"] .obc { background: repeating-linear-gradient(to bottom, rgba(30,21,56,.055) 0 1px, transparent 1px 3px), var(--c-bg, #fff); }
@media (max-width: 980px) {
  .obv { background: var(--ob-bg); place-items: stretch; }
  .obc { width: 100vw; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes obIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* מסך עם הדמות מחכה עד שהתמונה מוכנה, ואז הכל נכנס יחד (03/11/2026). עד 2.5 שניות */
.obwait .obc, .obtour.obwait > *, .obwait .obstage .obsay.laid { visibility: hidden; animation: none; }
.obp { display: flex; gap: 5px; flex: none; }
.obp i { flex: 1; height: 4px; border-radius: 2px; background: var(--ob-chip); }
.obp i.on { background: var(--ob-acc); }
.obtop { min-height: 34px; flex: none; display: flex; }
.obl { align-self: center; font-size: 13.5px; color: var(--ob-tx2); padding: 6px 0; }
.obb { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.obban { display: block; width: 100%; height: auto; border-radius: 14px; margin: 2px 0 18px; }
.obb h2 { font-size: 24px; line-height: 1.3; margin: 0 0 8px; font-weight: 800; text-wrap: balance; }
.obs { font-size: 15px; line-height: 1.6; color: var(--ob-tx2); margin: 0; text-wrap: pretty; }
.obs b { color: var(--ob-tx); }
.obh { display: block; font-size: 13px; color: var(--ob-tx2); text-align: center; margin: 8px 0 0; }
.obcta { flex: none; margin-top: 14px; background: var(--ob-acc); color: #2a1d02; border-radius: 14px; padding: 14px; font-weight: 800; font-size: 16px; }
.obcta:disabled { opacity: .6; }
.obe { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: var(--ob-card); border: 1px solid var(--ob-ring); }
.oba { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #2a1d02; background: linear-gradient(135deg, #f6d27a, #c8901c); }
.obet2 { font-size: 14px; line-height: 1.4; font-weight: 600; }
.obet2 small { display: block; font-size: 12px; color: var(--ob-tx2); font-weight: 400; }
.obpp { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1a1236; display: grid; place-items: center; flex: none; margin-inline-start: auto; }
.obpp svg { width: 15px; height: 15px; }
.obev { flex-direction: column; align-items: stretch; }
.obet { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.obev video { width: 100%; max-height: 260px; border-radius: 10px; background: #000; }
.obring { width: 160px; height: 160px; border-radius: 50%; margin: 26px auto 18px; border: 2px dashed color-mix(in srgb, var(--ob-ok) 55%, transparent); display: grid; place-items: center; position: relative;
  background: color-mix(in srgb, var(--ob-ok) 6%, transparent); }
.obface { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #6d4bd8; color: #fff; font-size: 52px; font-weight: 800; }
.obface img { width: 100%; height: 100%; object-fit: cover; }
.obcam { position: absolute; bottom: 8px; left: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--ob-ok); color: #062420; display: grid; place-items: center; border: 3px solid var(--ob-bg); }
.obcam svg { width: 19px; height: 19px; }
.obta { display: block; width: 100%; min-height: 128px; margin: 18px 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ob-acc) 55%, transparent);
  background: rgba(0,0,0,.18); color: var(--ob-tx); font: inherit; font-size: 15.5px; line-height: 1.6; resize: none; }
.obta:focus { outline: 2px solid var(--ob-acc); outline-offset: 1px; }
.obchips { display: flex; flex-wrap: wrap; gap: 8px; }
.obchips button { font-size: 13.5px; padding: 7px 13px; border-radius: 999px; background: var(--ob-chip); color: var(--ob-tx2); border: 1px solid var(--ob-ring); }
.obpost { margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--ob-card); border: 1px solid var(--ob-ring); }
.obph { display: flex; align-items: center; gap: 10px; }
.obph b { display: block; font-size: 15px; }
.obph small { display: block; font-size: 12.5px; color: var(--ob-tx2); }
.obpa { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: #6d4bd8; color: #fff; font-weight: 800; }
.obpa img { width: 100%; height: 100%; object-fit: cover; }
#ob-post { display: block; width: 100%; min-height: 60px; overflow: hidden; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--ob-tx); font: inherit; font-size: 15px; line-height: 1.65; resize: none; }
#ob-post:focus { outline: none; }
.obpost .obh { text-align: start; }
/* הסיור: חור מואר סביב הנקודה, ובועה עם "הבא" */
.obtour { position: fixed; inset: 0; z-index: 61; direction: rtl; }
.obhole { position: fixed; border-radius: 14px; border: 2px solid var(--c-acc, #f2c14e); box-shadow: 0 0 0 200vmax rgba(8,6,20,.72); transition: all .25s ease; pointer-events: none; }
.obbub { position: fixed; padding: 16px 16px 14px; border-radius: 16px; background: var(--c-drawer, #241b48); color: var(--c-tx, #f1effa); border: 1px solid var(--c-ring, rgba(255,255,255,.14)); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
html[data-mode="light"] .obbub { background: var(--c-main, #fff); }
.obbub::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 8px); top: -8px; width: 14px; height: 14px; background: inherit; border-top: 1px solid var(--c-ring, rgba(255,255,255,.14)); border-left: 1px solid var(--c-ring, rgba(255,255,255,.14)); transform: rotate(45deg); }
.obbub.up::after { top: auto; bottom: -8px; transform: rotate(225deg); }
.obbub b { display: block; font-size: 16px; margin: 0 0 6px; padding-inline-end: 30px; }
.obbub p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-tx2, #dcd8f0); }
.obbf { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--c-tx2, #dcd8f0); }
.obnext { background: var(--c-acc, #f2c14e); color: var(--c-okfg, #2a1d02); border-radius: 999px; padding: 7px 18px; font-weight: 800; font-size: 14px; }
.obx { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--c-tx2, #dcd8f0); }
.obx svg { width: 17px; height: 17px; }
/* "המטרה שלי" */
.ccard.cgoal .lbl { display: flex; align-items: center; justify-content: space-between; }
.cged { font-size: 12.5px; font-weight: 400; color: var(--c-tx2); text-decoration: underline; text-underline-offset: 3px; }
.cgt { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.cgadd { margin-top: 10px; font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--c-acc, #f2c14e); color: #2a1d02; }
.cgb { display: flex; gap: 8px; margin-top: 10px; }
.cgs { font-size: 13.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; background: var(--c-acc, #f2c14e); color: #2a1d02; }
.cgx { font-size: 13.5px; padding: 7px 12px; color: var(--c-tx2); }
/*
 * תיקון אחרי פריסה (אייל, 01/11: "איך זה לא נראה כמו אצלך, הכפתור, הגודל של הטקסט בכפתור ועוד").
 * הכפתורים ממורכזים (הכלל הכללי של button יורש יישור), ובטלפון הגדלים לפי היחס של ההדמיה: היא צוירה ברוחב 300, הטלפון ברוחב 390
 */
.obnext, .obpp { text-align: center; }
.obhole { border-width: 3px; }
.obbub { border-color: color-mix(in srgb, var(--c-acc, #f2c14e) 50%, transparent); }
@media (max-width: 980px) {
  .obb h2 { font-size: 28px; margin-bottom: 10px; }
  .obs { font-size: 17px; }
  .obcta { font-size: 18px; padding: 16px; border-radius: 16px; }
  .obl { font-size: 15px; }
  .obtop { min-height: 40px; }
  .obban { border-radius: 18px; margin-bottom: 20px; }
  .obe { padding: 13px 15px; border-radius: 18px; gap: 13px; margin-top: 20px; }
  .oba { width: 48px; height: 48px; font-size: 19px; }
  .obet2 { font-size: 16.5px; }
  .obet2 small { font-size: 14px; }
  .obpp { width: 44px; height: 44px; }
  .obpp svg { width: 17px; height: 17px; }
  .obring { width: 195px; height: 195px; margin: 30px auto 20px; }
  .obface { width: 172px; height: 172px; font-size: 64px; }
  .obcam { width: 48px; height: 48px; }
  .obcam svg { width: 22px; height: 22px; }
  .obh { font-size: 14px; }
  .obta { font-size: 16px; min-height: 150px; padding: 15px 16px; border-radius: 18px; margin-top: 20px; }
  .obchips { gap: 8px; }
  .obchips button { font-size: 15px; padding: 8px 14px; }
  .obpost { padding: 16px; border-radius: 20px; margin-top: 20px; }
  .obpa { width: 48px; height: 48px; }
  .obph b { font-size: 18px; }
  .obph small { font-size: 14.5px; }
  #ob-post { font-size: 16px; }
  .obbub b { font-size: 17px; }
  .obbub p { font-size: 15px; }
  .obbf { font-size: 14px; }
  .obnext { font-size: 15px; padding: 8px 20px; }
}

/*
 * המסכים ממורכזים, עם פעולה אחת (אייל, 01/11). מסך התמונה: העיגול הוא הכפתור, וטעינה עליו בזמן ההעלאה.
 * הכפתור (V24, אייל: "תעשה את התלת מימדי אבל עם חץ"): גלולה בזהב תלת ממדי, ממורכזת ולא לכל הרוחב, עם חץ בעיגול. בלי ברק ובלי קווים
 */
.obtop { justify-content: center; }
.obb h2, .obs { text-align: center; }
.obchips { justify-content: center; }
/* כפתור ראשי לבד עומד משמאל (אייל, 02/11: "בכלל, כפתורים בעברית הם יותר בצד שמאל") */
.obcta { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 220px; padding: 16px 26px 16px 22px; border-radius: 999px;
  font-size: 17px; font-weight: 800; color: #2a1d02; text-align: center;
  background: linear-gradient(180deg, #F7E3A6 0%, #E9C46A 52%, #D2A64C 100%); box-shadow: inset 0 -5px 10px rgba(110,72,18,.22), 0 14px 34px -12px rgba(233,196,106,.55); }
.obcta:disabled { opacity: .5; cursor: default; }
.obar { width: 30px; height: 30px; border-radius: 50%; background: rgba(42,29,2,.14); display: grid; place-items: center; flex: none; }
.obring { cursor: pointer; padding: 0; width: 170px; height: 170px; }
.obface { width: 150px; height: 150px; }
.obring:focus-visible { outline: 2px solid var(--ob-acc); outline-offset: 4px; border-radius: 50%; }
.obspin { position: absolute; inset: 9px; border-radius: 50%; background: rgba(8,6,20,.55); display: none; }
.obspin::after { content: ""; position: absolute; inset: calc(50% - 20px); border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--ob-ok); animation: obSpin .8s linear infinite; }
.obring.busy .obspin { display: block; }
@keyframes obSpin { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  .obcta { font-size: 19px; padding: 16px 26px 16px 22px; border-radius: 999px; }
  .obring { width: 205px; height: 205px; margin: 30px auto 18px; }
  .obface { width: 184px; height: 184px; font-size: 68px; }
  .obspin { inset: 10px; }
}

/*
 * V25 (אושרה 01/11/2026): "איך לקרוא לך", התוכן באמצע המסך לגובה, טקסט משני בהיר יותר, וצל עדין לכל טקסט.
 * אייל: "עשה את הפונט קצת יותר לבן, פחות דהוי", "אל תשים דברים מיושרים למעלה, אלא דווקא באמצע"
 */
.obv { --ob-tx2: #efedf9; }
.obb { display: flex; flex-direction: column; }
.obi { margin: auto 0; padding: 8px 0; }
.obb h2, .obs, .obh, .obl, .obopt b, .obpost .obh { text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.35); }
.obpick { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 30px; }
.obopt { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 20px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1.5px solid var(--ob-ring); color: var(--ob-tx); transition: border-color .15s, background .15s, box-shadow .15s; }
.obopt b { font-size: 22px; font-weight: 800; }
.obcr { font-size: 30px; line-height: 1; }
.obopt.on { border-color: var(--ob-acc); background: rgba(242,193,78,.1); box-shadow: 0 0 0 4px rgba(242,193,78,.14); }
.obpick + .obh { margin-top: 20px; font-size: 15px; }
@media (max-width: 980px) {
  .obopt b { font-size: 26px; }
  .obcr { font-size: 34px; }
}
/* "המסע שלי": המלך או המלכה */
.cgsel { display: flex; gap: 6px; flex: none; }
.cgsel button { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--c-chip, rgba(255,255,255,.08)); color: var(--c-tx2, #dcd8f0); border: 1px solid transparent; white-space: nowrap; }
.cgsel button.on { color: var(--c-acc, #f2c14e); border-color: color-mix(in srgb, var(--c-acc, #f2c14e) 55%, transparent); font-weight: 700; }
.obb > .obban { flex: none; margin-bottom: 0; }

/* V25 מסך 1ב: "ואיזה מלך אתה?" וחמשת הגוונים. ב"המסע שלי" אפשר לשנות */
.obtq { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; animation: obIn .22s ease both; }
.obq { margin: 0; font-size: 20px; font-weight: 700; color: var(--ob-tx); text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.35); }
.obtones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.obtone { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1.5px solid var(--ob-ring); font-size: 32px; line-height: 1; display: grid; place-items: center; transition: border-color .15s, box-shadow .15s; }
.obtone.on { border-color: var(--ob-acc); box-shadow: 0 0 0 4px rgba(242,193,78,.18); }
.cuser { flex-wrap: wrap; }
.rmenu.cuser { flex-wrap: wrap; white-space: normal; max-width: min(420px, calc(100vw - 32px)); }
.cgbox { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cgtones { display: flex; gap: 4px; }
.cgtones button { width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; display: grid; place-items: center; background: var(--c-chip, rgba(255,255,255,.08)); border: 1px solid transparent; }
.cgtones button.on { border-color: var(--c-acc, #f2c14e); }
/*
 * אייל, 01/11: "שים את הכפתור למטרה טיפה יותר גבוה ואת הטקסט שבאמצע גם". בכל המסכים: הטקסט מעט מעל האמצע
 * (הרווח מתחתיו גדול פי 1.4 מזה שמעליו), ובטלפון הכפתור עולה ב-26 ולא נדבק לסרגל של הדפדפן. הבאנר בפתיחה נשאר למעלה
 */
.obi { margin: 0; flex: none; }
.obsp { flex: 1 1 0; min-height: 0; }
.obsp.b { flex-grow: 1.4; }
@media (max-width: 980px) {
  .obc { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
}

/*
 * הדמות של אייל ובועת הדיבור: בפתיחת האונבורדינג, בסיור ובסיום תחנה (V29, אושרה 01/11/2026).
 * V30 (אייל, 01/11: "הדמות שלי קטנה מדי תגדיל אותה", ואחר כך "תגדיל את הדמות שלי, שתהיה יותר גדולה"): בפתיחה ובסיום 70% מהרוחב ובולטת 4% החוצה משמאל, בסיור 76%.
 * הבועה (אייל, 01/11: "היא קטועה ולא מסודרת בצורה שלה, המשולש לא יושב טוב", "תשים לב לזה בכל תיבת דיבור"):
 * הגוף והזנב בשכבת רקע אחת עם צללית אחת, כך שאין תפר. הזנב יוצא מהחלק הישר של התחתית ומכוון אל הדמות.
 * אייל, 01/11: "לנסות יותר לבן", "שהכול יהיה באותו עובי", "סדר את המשולש שזה ייראה כמו בועת דיבור נורמלית":
 * לבן ב-96%, כל הטקסט באותו עובי (גם החלק בשורה משלו), והזנב משולש ישר שהקצה שלו נוטה אל הדמות
 */
@font-face { font-family: "Levin"; src: url(levin.ttf) format("truetype"); font-weight: 400; font-display: swap; }
.obsay { position: relative; color: #1b1430; padding: 18px 26px; font-family: "Levin", var(--ui); font-size: 23px; line-height: 1.38; font-weight: 400; text-align: center; text-wrap: balance; text-shadow: none !important; -webkit-text-stroke: 0; }
/* הטקסט דק ובעובי אחד, בלי קו מתאר (אייל, 02/11: "למה הטקסט של בועת הדיבור כזה עבה? אני לא רוצה אותו כזה עבה") */
.obsay b { display: block; font-weight: 400; color: #1b1430; text-wrap: balance; }
.sbg { position: absolute; inset: 0; opacity: .96; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); pointer-events: none; }
.sbg i { position: absolute; inset: 0; background: #fff; border-radius: 40px; }
.sbg svg { position: absolute; width: 38px; height: 34px; bottom: -30px; left: var(--ax, 36px); }
.obsay.flip .sbg svg { transform: scaleX(-1); }
.sbt { position: relative; display: block; }
/* אימוג'י ריאליסטי בגובה השורה, צמוד לטקסט (אייל, 02/11: "האימוג'י צריך להיות יותר קרוב לטקסט") */
.remo { display: inline-block; height: 1.15em; width: auto; vertical-align: -0.2em; margin-inline-start: 4px; }
.obcel .remo { height: 1.3em; margin: 0; vertical-align: top; }
.obchar { pointer-events: none; }
/* הזוהר סביב הדמות ניטרלי וחלש (02/11): הכתום הוסיף לאדום. צל העומק מתחת נשאר */
.obchar img { display: block; width: 100%; height: auto; filter: drop-shadow(-6px -2px 10px rgba(255,255,255,.12)) drop-shadow(0 24px 30px rgba(8,0,22,.65)); }
/*
 * פתיחה וסיום תחנה (אייל, 02/11: "הדמות שלי צריכה להיות קצת יותר גדולה, יותר מצד ימין, והכפתור בצד שמאל",
 * "בועת הדיבור יותר קרובה לראש שלי"): הדמות ב-82% מהרוחב וצמודה לימין, הכפתור למטה משמאל ובשכבה מעליה,
 * והבועה מעל הראש עם הזנב אליו. את המקום של הבועה מחשב layStage ב-app.js לפי הראש בתמונה
 */
.obstage { --cwp: 82; --cwmax: 369px; --cw: min(calc(var(--cwp) * 1%), var(--cwmax)); position: relative; flex: none; display: flex; flex-direction: column; margin: 6px -20px -20px; }
.obstage .obsay { position: absolute; z-index: 2; top: 0; left: 16px; width: max-content; max-width: calc(100% - 32px); visibility: hidden; }
.obstage .obsay.laid { visibility: visible; }
.obstand { position: relative; margin-top: auto; }
.obstand .obchar { width: var(--cw); margin-right: 0; margin-left: auto; }
.obstand .obcta { position: absolute; z-index: 2; left: 14px; bottom: 20px; margin: 0; min-width: 0; padding: 15px 20px 15px 16px; font-size: 17px; }
.obcel { font-size: 44px; line-height: 1; text-align: center; margin-bottom: 12px; }
@media (max-width: 980px) {
  .obstage { margin: 6px -18px calc(-44px - env(safe-area-inset-bottom, 0px)); }
  .obstand .obcta { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); left: 16px; font-size: 17px; padding: 15px 20px 15px 16px; }
}
/*
 * הדמות ממלאת את המקום שנשאר מתחת לכותרת ולבועה, ולא דוחקת אותן (02/11: בכרטיס של המחשב, בגובה 760, הכותרת נעלמה והבאנר נחתך).
 * הרוחב עד --cw, והגובה עד מה שנשאר. התמונה נשארת בפרופורציה, צמודה לתחתית ולשמאל
 */
.obwith .obb { flex: none; }
/* סיום תחנה: הכותרת זזה למרכז שבין ראש המסך לבועה (layStage), ולכן לא נחתכת בגבול של .obb */
.obcele .obb { overflow: visible; position: relative; z-index: 3; }
/* היי-פייב (02/11): "כיף!" ליד היד של הדמות. לחיצה מקרבת את היד קצת קדימה, וקונפטי */
.obhf { position: absolute; z-index: 3; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 16px; color: #2a1d02;
  background: linear-gradient(180deg, #F7E3A6 0%, #E9C46A 52%, #D2A64C 100%); box-shadow: 0 10px 24px -10px rgba(233,196,106,.6); }
.obchar.hf { animation: obHf .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 70% 100%; }
@keyframes obHf { 40% { transform: translateX(-10px) scale(1.04); } 100% { transform: none; } }
.cfp { position: fixed; z-index: 200; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
.obwith .obstage { flex: 1 1 auto; min-height: 0; container-type: inline-size; }
/* הגובה הטבעי של הדמות (רוחב כפול 1.25), ומתכווץ רק כשאין מקום. המקום הפנוי עובר מעל הבועה, כך שהבועה נשארת צמודה לראש */
.obwith .obstand { flex: 0 1 auto; height: calc(min(calc(var(--cwp) * 1cqw), var(--cwmax)) * 1.25); min-height: 170px; }
.obwith .obstand .obchar { position: absolute; right: 0; bottom: 0; height: 100%; margin: 0; }
.obwith .obstand .obchar img { height: 100%; object-fit: contain; object-position: right bottom; }
@media (max-height: 700px) { .obstage { --cwp: 64; --cwmax: 308px; } .obstage .obsay { font-size: 20px; padding: 15px 20px; } }
/* הסיור: הבועה הלבנה במקום הסגולה, בשכבה מעל הדמות שמעל מה שמודגש */
.obtc { position: fixed; z-index: 1; }
.obtour .obbub.obsay { position: fixed; z-index: 2; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 18px 26px 16px; color: #1b1430; }
.obtour .obbub.obsay::after { content: none; }
.obtour .obbub.obsay > :not(.sbg):not(.obx) { position: relative; }
.obtour .obbub.obsay .obx { z-index: 1; color: #5b5470; top: 12px; left: 14px; }
.obtour .obbub.obsay .obtt { display: none; }
.obtour .obbub.obsay p { margin: 0; padding: 0 16px; font-size: 23px; line-height: 1.38; color: #1b1430; }
.obtour .obbub.obsay p b { display: block; margin: 0; padding: 0; font-size: inherit; }
.obtour .obbub.obsay .obbf { font-family: var(--ui); -webkit-text-stroke: 0; color: #4a4360; font-size: 13.5px; }
.obtour .obbub.obsay .obnext { -webkit-text-stroke: 0; }
/* הבועה מתחת למה שמודגש: הזנב למעלה */
.obtour .obbub.obsay:not(.up):not(.side) .sbg svg { top: -30px; bottom: auto; transform: scaleY(-1); }
.obtour .obbub.obsay.flip:not(.up):not(.side) .sbg svg { transform: scale(-1, -1); }
/* במחשב הדמות מצביעה הצידה אל פס הצד, והזנב יוצא מהצד השמאלי של הבועה אל הראש */
.obtour .obbub.obsay.side .sbg svg { top: var(--ay, 40px); bottom: auto; left: -30px; transform: rotate(90deg); }
/* באמצע המסך החיתוך של התמונה במותניים לא נראה: התחתית דוהה */
.obtc.side img { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
/* בטלפון, הדמות שמצביעה למטה: התחתית נעלמת לתוך הרקע במקום להיחתך בקו ישר (אייל, 03/11: "זה נראה חתוך למטה בתמונה") */
.obtc:not(.side) img { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }

/* סגירת ההקלטה בפס הצף: בצד הנגדי לכפתור הניגון, גודל מגע 44 (אייל, 01/11) */
.mx { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--mut); margin-inline-start: -6px; }
.mx svg { width: 20px; height: 20px; }
.pbar .mx { margin-inline-start: -10px; }

/* אייפון מגדיל את כל הדף כשנכנסים לשדה כתיבה שהגופן בו קטן מ-16 (אייל, 01/11: "בכתיבת התגובה התמונה והשליחה יוצא חתוך מהצדדים").
   לכן בטלפון כל שדה כתיבה הוא 16 לפחות. לא נוגעים ב-viewport ולא חוסמים זום */
@media (max-width: 980px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; }
  /* ריפוד קטן יותר, כדי שהשדות יישארו באותו גובה */
  .task textarea { padding: 8px 11px; }
}

/* המעבר האוטומטי לחלק הבא נחסם בטלפון: הכפתור בפס אומר מה הוא עושה */
.pp.nxt { width: auto; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; }

/*
 * האונבורדינג והדמות בבהיר (03/11/2026, "גרסה בהירה מקצה לקצה"): הטקסט כהה בלי הצל של הכהה, טקסט משני בסגול אפור,
 * שדה הכתיבה, הצ'יפים והבחירות לבנים עם מסגרת עדינה, והחלון במחשב על רקע לילך בהיר במקום כהה
 */
html[data-mode="light"] .obv { --ob-tx2: var(--c-tx2, #5E5480); --ob-card: #fff; background: rgba(30,21,56,.28); }
html[data-mode="light"] .obc { box-shadow: 0 30px 80px -20px rgba(76,40,160,.35); }
html[data-mode="light"] .obb h2, html[data-mode="light"] .obs, html[data-mode="light"] .obh, html[data-mode="light"] .obl,
html[data-mode="light"] .obopt b, html[data-mode="light"] .obpost .obh, html[data-mode="light"] .obq { text-shadow: none; }
html[data-mode="light"] .obta { background: #fff; box-shadow: 0 1px 2px rgba(30,21,56,.05), 0 10px 28px -14px rgba(76,40,160,.22); }
html[data-mode="light"] .obta::placeholder { color: var(--ob-tx2); opacity: .8; }
html[data-mode="light"] .obchips button { background: #fff; border-color: rgba(30,21,56,.12); }
html[data-mode="light"] .obopt, html[data-mode="light"] .obtone { background: #fff; border-color: rgba(30,21,56,.1); box-shadow: 0 1px 2px rgba(30,21,56,.05), 0 10px 28px -14px rgba(76,40,160,.22); }
html[data-mode="light"] .obopt.on { background: #FFF8E1; border-color: #E0A800; box-shadow: 0 0 0 4px rgba(224,168,0,.16); }
html[data-mode="light"] .obpost, html[data-mode="light"] .obe { box-shadow: 0 1px 2px rgba(30,21,56,.05), 0 10px 28px -14px rgba(76,40,160,.22); }
html[data-mode="light"] .obchar img { filter: drop-shadow(0 18px 24px rgba(76,40,160,.28)); }
html[data-mode="light"] .sbg { filter: drop-shadow(0 10px 20px rgba(76,40,160,.22)); }
html[data-mode="light"] .obhole { box-shadow: 0 0 0 200vmax rgba(30,21,56,.45); }

/* המתג של בהיר וכהה (03/11/2026): שמש וירח, שני צדדים באותו גודל, והנבחר מודגש. ב"המסע שלי" ובפינה של מסכי הכניסה */
.clook { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 999px; background: var(--c-chip, rgba(255,255,255,.08)); border: 1px solid var(--c-ring, rgba(255,255,255,.14)); }
.clook button { width: 30px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--c-tx2, var(--mut)); padding: 0; }
.clook button svg { width: 15px; height: 15px; }
.clook button[aria-pressed="true"] { background: var(--c-acc, var(--gold)); color: #1a1236; }
html[data-mode="light"] .clook button[aria-pressed="true"] { color: #fff; }
.lg-look { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 40; }
.lg-look button { width: 38px; height: 32px; }
.lg-look button svg { width: 17px; height: 17px; }
html[data-mode="light"] .lg-look { background: #fff; border-color: rgba(30,21,56,.1); box-shadow: 0 6px 18px -10px rgba(76,40,160,.35); }
html[data-mode="light"] .lg-look button[aria-pressed="true"] { background: #6D28D9; }

/* ===== V39 (אושרה 03/11/2026): כניסה לפריים, מסך המטרה, סרטון ההיכרות ומסך החיזוק ===== */
/* כניסה א (אייל: "מלמטה זה בסדר"): הכל מוסתר עד שהתמונה מוכנה, ואז obgo. הבאנר יורד, הכותרת עולה, הדמות קופצת מלמטה,
   הבועה יוצאת מהראש והכפתור נכנס מהצד. אחר כך נשימה עדינה, ובמסך הפתיחה לבבות שעולים מהיד שעל הלב */
.obwith .obc > * { opacity: 0; }
.obwith.obgo .obc > * { opacity: 1; }
.obwith.obgo .obp { animation: obFade .5s ease-out both; }
.obwith.obgo .obban { animation: obDown .7s cubic-bezier(.2,.8,.3,1) .05s both; }
.obwith.obgo .obi h2 { animation: obUp .7s cubic-bezier(.2,.8,.3,1) .25s both; }
.obwith.obgo .obchar { animation: obRise .9s cubic-bezier(.2,1.25,.35,1) .35s both; transform-origin: 70% 100%; }
.obwith.obgo .obchar.hf { animation: obHf .45s cubic-bezier(.3,1.6,.5,1); }
.obwith.obgo .obsay { animation: obPop .55s cubic-bezier(.3,1.6,.5,1) 1.05s both; transform-origin: var(--tx, 70%) 120%; }
.obwith.obgo .obstand .obcta, .obwith.obgo .obnl { animation: obSlide .6s cubic-bezier(.2,.9,.3,1) 1.4s both; }
.obwith.obgo .obchar img { animation: obBreathe 4.5s ease-in-out 2.6s infinite; transform-origin: 60% 100%; }
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes obDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes obUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes obRise { from { opacity: 0; transform: translateY(70%); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes obPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes obSlide { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes obBreathe { 0%, 100% { transform: none; } 50% { transform: scale(1.012); } }
.obhearts { position: absolute; z-index: 3; pointer-events: none; }
.obhearts i { position: absolute; font-style: normal; font-size: 20px; opacity: 0; animation: obHeart 2.6s ease-out var(--d) infinite; }
@keyframes obHeart { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -150px) scale(1.15); } }
/* מסך הפתיחה: הכותרת זזה לאמצע שבין הבאנר לבועה (layStage), ולכן לא נחתכת */
.obwith:not(.obgoal) .obb, .obwith:not(.obgoal) .obi { overflow: visible; }
/* גם במטרה, כשהמקלדת סגורה: הכותרת והשדה זזים לאמצע בין פס ההתקדמות לבועה, ולא נחתכים בקצה העליון של האזור שלהם */
.obwith.obgoal:not(.kb) .obb, .obwith.obgoal:not(.kb) .obi { overflow: visible; }
/* מסך המטרה: הדמות שמסבירה, קטנה יותר כדי לא לדחוק את השדה */
.obgoal .obb { justify-content: flex-start; }
.obgoal .obi { display: flex; flex-direction: column; }
.obgoal .obi h2 { font-size: 24px; }
.obgoal .obta { min-height: 84px; margin: 12px 0 6px; }
/* בלי הצעות (אייל, 03/11: "לא צריך הצעות של דברים לכתוב"), רק שורה קטנה באפור מתחת לשדה. נשארת גם כשהמקלדת פתוחה */
.obgh { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ob-tx2); opacity: .75; text-align: start; text-shadow: none; }
.obgoal.kb .obgh { margin-bottom: 8px; }
/* אייל, 03/11: "כאן התמונה שלי קטנה מדי והבועת דיבור גדולה מדי". הדמות בגודל של מסך הפתיחה (מתכווצת רק כשאין מקום), והבועה צרה וקטנה, קרוב מעל הראש */
.obgoal .obstage { --cwp: 82; --cwmax: 369px; }
.obgoal .obstage .obsay { font-size: 18px; padding: 12px 18px; max-width: min(240px, calc(100% - 32px)); }
.obgoal .obstand .obcta, .obvid .obstand .obcta { padding: 13px 18px 13px 14px; font-size: 16px; }
/* מקלדת פתוחה (אייל: "העיקר זה הטקסט"): רק השאלה בשורה אחת, השדה וכפתור קטן, בגובה שנשאר מעל המקלדת. בלי גלילה */
.obkb { display: none; align-self: flex-end; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; font: 800 15px var(--ui); color: #2a1d02; background: linear-gradient(180deg, #f6dc8f, #e2b54b); border: 0; }
.obkb .obar { width: 24px; height: 24px; }
.obv.kb .obc { height: 100%; padding-bottom: 12px; }
/* כלל אחד לכל שדה כתיבה באונבורדינג (המטרה, הפוסט): בלי הפס העליון, בלי הרווחים, בלי ההסבר ובלי הכפתור הגדול */
.obv.kb .obstage, .obv.kb .obchips, .obv.kb .obtop, .obv.kb .obsp, .obv.kb .obs, .obv.kb .obban, .obv.kb .obc > .obcta, .obv.kb .obc > .obl { display: none; }
.obv.kb .obi { transform: none !important; }
.obv.kb .obi h2 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; margin-bottom: 0; }
.obv.kb .obb, .obv.kb .obi { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
.obv.kb .obta { flex: 1; min-height: 0; margin: 10px 0 6px; }
.obv.kb .obpost { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 10px 0 8px; }
.obv.kb #ob-post { flex: 1; min-height: 0; height: auto !important; overflow-y: auto; }
.obv.kb .obkb { display: inline-flex; }
/* סרטון היכרות 2 (אושר 03/11/2026): בלי כותרת, תמונה גדולה עם הטלפון, הבועה מעל הראש והשאלות על החלק התחתון. המיקומים ב-laySelf */
.obself .obc { display: block; }
.obself .obp { position: relative; z-index: 3; }
/* נורת הקלטה אדומה שמהבהבת בעדינות, בפינה השמאלית העליונה כמו במצלמה */
.obrec { position: absolute; top: calc(38px + env(safe-area-inset-top, 0px)); left: 22px; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.18), 0 0 14px 2px rgba(255,59,48,.55); animation: obRec 1.8s ease-in-out infinite; }
@keyframes obRec { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 0 2px rgba(255,59,48,.08), 0 0 6px 0 rgba(255,59,48,.25); } }
.obself .obc > .obrec { opacity: 1; }
.obsf { position: absolute; width: 400px; left: 2px; top: 120px; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%); mask-image: linear-gradient(to bottom, #000 80%, transparent 97%); }
.obself .obsay { position: absolute; left: 32px; right: 32px; z-index: 2; font-size: 23px; line-height: 1.38; padding: 16px 8px; }
.obself .obsay .sbg svg { width: 57px; height: 51px; bottom: -49px; }
.obdg { font-family: Heebo, var(--ui); font-weight: 700; font-size: .92em; }
.obself .obsq { position: absolute; left: 14px; right: 14px; z-index: 3; margin: 0; gap: 8px; }
.obself .obsq li { background: rgba(22,17,44,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14.5px; padding-top: 10px; padding-bottom: 10px; }
.obself .obsq li::before { top: 9px; }
html[data-mode="light"] .obself .obsq li { background: rgba(255,255,255,.9); }
/* התמונה נמוכה ב-3% מהמקור, כדי שהצוואר לא ייראה ארוך (אייל, 05/11, אחרי השוואה ל-5%). היחס גם ב-laySelf */
.obsf img { aspect-ratio: 800 / 970; height: auto; object-fit: fill; }
.obsfb { position: absolute; left: 20px; right: 20px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.obsfb .obl { order: -1; padding: 8px 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.obsfb .obcta { margin: 0; min-width: 0; padding: 12px 18px 12px 16px; font-size: 15.5px; gap: 10px; }
.obsfb .obar { width: auto; height: auto; background: none; }
.obself.obgo .obsq li { animation: obUp .6s cubic-bezier(.2,.8,.3,1) both; }
.obself.obgo .obsq li:nth-child(1) { animation-delay: 1.5s; } .obself.obgo .obsq li:nth-child(2) { animation-delay: 1.62s; } .obself.obgo .obsq li:nth-child(3) { animation-delay: 1.74s; }
.obself.obgo .obsfb .obcta { animation: obSlide .6s cubic-bezier(.2,.9,.3,1) 2s both; }
/* סרטון ההיכרות: שלוש שאלות מנחות */
.obvid .obb { justify-content: flex-start; }
.obvid .obi h2 { font-size: 26px; }
.obvid .obstage { --cwp: 52; --cwmax: 240px; }
.obvq { list-style: none; counter-reset: q; margin: 16px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.obvq li { counter-increment: q; position: relative; padding: 12px 14px; padding-inline-start: 50px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 15.5px; line-height: 1.5; color: var(--ob-tx2); text-align: start; }
.obvq li::before { content: counter(q); position: absolute; inset-inline-start: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--ob-acc); color: #2a1d02; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.obvq b { color: #fff; }
.obvg { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ob-acc); }
.obvw { align-self: center; margin-top: 4px; }
html[data-mode="light"] .obvq li { background: #fff; border-color: rgba(30,21,56,.1); box-shadow: 0 1px 2px rgba(30,21,56,.05), 0 10px 28px -14px rgba(76,40,160,.22); }
html[data-mode="light"] .obvq b { color: var(--c-tx, #1E1538); }
html[data-mode="light"] .obvg { color: #8a5a00; }
/* מסך החיזוק: "בפעם אחרת" קטן למטה, והכפתור מעליו */
.obnl { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: max-content; margin: 0 auto; font-size: 14px; padding: 6px 14px; border-radius: 999px; background: var(--ob-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* הדמות גדלה ועכשיו מאחורי הקישור: רקע קטן משלו, כדי שהטקסט לא ישב על הדמות (אייל: טקסט לא על אלמנטים) */
.obnudge .obstand .obcta { bottom: 62px; }
.obnudge:not(.obwith) .obc > .obcta { margin-bottom: 40px; }
/* החשבון בטלפון: התמונה של התלמיד בשורה העליונה, ליד הפעמון */
.cuav { display: none; }
@media (max-width: 980px) {
  html[data-skin="columns"] .ctop .cuav { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none; pointer-events: auto; }
  html[data-skin="columns"] .ctop .cuav .av { width: 40px; height: 40px; object-fit: cover; }
  html[data-skin="columns"] .ctop:not(:has(.gbell)) .cuav { margin-inline-start: auto; }
}
.cacct .cuser { flex-wrap: wrap; gap: 12px; margin: 0; }
/* דף המשתמש (אושר 03/11/2026): התמונה עם מונה ההתראות, ובדף: התראות מכל הקורסים, הקורסים שלי והחשבון */
.cuav, .rail .rme { position: relative; }
.uvn { position: absolute; top: -3px; left: -3px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #ff3b5c; color: #fff; border: 2px solid #fff; font: 700 11px/16px var(--ui); text-align: center; pointer-events: none; }
.uvn[hidden] { display: none; }
.upg { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.gpage .upg { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.upbox { max-width: 460px; }
.uph { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; color: var(--c-tx); margin-bottom: 4px; }
.uph .av, .uph .cavb .av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; font-size: 20px; }
.uph .cavb { padding: 0; border-radius: 50%; }
.ush { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--c-tx2); }
.unts, .ucs { display: flex; flex-direction: column; gap: 8px; }
.unone { margin: 0; font-size: 13.5px; color: var(--c-tx2); }
.unt { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; background: var(--c-chip); color: var(--c-tx); font-size: 14px; line-height: 1.5; text-align: start; }
.unt .av { width: 34px; height: 34px; flex: none; }
.unt span { min-width: 0; }
.unt small { display: block; font-size: 12px; color: var(--c-tx2); }
.ud { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #ff3b5c; visibility: hidden; }
.unt.new .ud { visibility: visible; }
.uct { display: block; width: max-content; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; margin: 3px 0 1px; font-style: normal; font-size: 11.5px; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-acc, #f2c14e) 16%, transparent); color: var(--c-acc, #f2c14e); white-space: nowrap; vertical-align: 1px; }
html[data-mode="light"] .uct { color: #6b4a00; background: rgba(242,193,78,.28); }
.uc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 14px; border-radius: 14px; background: var(--c-chip); color: var(--c-tx); font-size: 15px; text-align: start; }
.uc.on { box-shadow: inset 0 0 0 1.5px var(--c-acc, #f2c14e); }
.uc em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--c-acc, #f2c14e); white-space: nowrap; }
html[data-mode="light"] .uc em { color: #8a5a00; }
.upg .uacct { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--c-chip); }
.cacct .cuser b { flex: 1 1 calc(100% - 60px); font-size: 16px; white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .obwith.obgo .obc *, .obhearts i { animation: none !important; }
  .obhearts { display: none; }
}
/* "ואיזה מלך אתה?" בעמוד משלו (V39, אייל 03/11): עיגולים של 96 ואימוג'י 60, שלושה בשורה ושניים מתחת, נכנסים אחד אחרי השני */
.obtbig { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 16px; max-width: 340px; margin: 26px auto 0; }
.obtbig .obtone { width: 96px; height: 96px; font-size: 60px; padding: 0; animation: obPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.obtbig .obtone.on { box-shadow: 0 0 0 5px rgba(242,193,78,.2); }
@media (prefers-reduced-motion: reduce) { .obtbig .obtone { animation: none; } }

/* בנק ההצלחות בשיעור (אייל, 10/11/2026, הדמיה V5): כותרת כמו של שלב, וכל הצלחה כמו חלק, עם "לשמוע את הרגע" ו"זה אני" */
.wshead { margin-top: 26px; }
.wwin .wbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 8px; }
.wwin .wbar > * { flex: 1; min-width: 180px; margin: 0; }
.wwin .wlisten { justify-content: center; }
.wwin .wlisten svg { width: 16px; height: 16px; }
.wwin .wtaken { opacity: .6; cursor: default; }
.wwin .wclaim[disabled] { cursor: default; }

/* "ההצלחות שלי": לשונית שלישית במחשב ורביעית בטלפון (הדמיה V5). המדליות בזהב השמפניה של עיגולי המספרים */
.mtabs .wic, .ctabs .wic { font-size: 16px; line-height: 1; }
.ctabs .wic { font-size: 20px; display: block; }
@media (max-width: 980px) {
  html[data-skin="columns"] .app[data-tab="wins"] .pan { display: block; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0 16px 16px; }
  html[data-skin="columns"] .app[data-tab="wins"] .cphb { margin-bottom: 12px; }
}
.wbank .wprog { margin: 0 0 14px; }
html[data-skin] body .wbank .shead.wlv.wlv { margin: 0 0 14px; padding: 18px 18px 20px; border: 1px solid rgba(217,185,122,.45); }
.wbank .wlv .k { color: #D9B97A; }
.wlvg { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 12px; }
.wlvc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 10px 14px; border-radius: 18px; border: 1px solid rgba(217,185,122,.25); background: rgba(255,255,255,.04); }
.wlvc.now { border: 2px solid #D9B97A; background: rgba(217,185,122,.10); box-shadow: 0 0 0 4px rgba(217,185,122,.14); }
/* המדליות של הדרגות: ארד, כסף, זהב, ובמצליחן אגדי טורקיז במסגרת זהב. כוכב אחד בכל מדליה, ומה שמראה את העלייה הוא המתכת והבוהק, בכל מצב ובכל הקורסים.
 * אייל, 10/11/2026: "כוכב אחד נראה יותר מרשים מ-4 כוכבים תנסה למצוא דרך אחרת להמחיש את זה", בחר ארד, כסף, זהב "עם טורקיז במקום סגול", "יותר תלת מימדיים",
 * "גם עם בוהק קטן של אור", "יותר מטאלים בגוון ובניראות". שוליים עם החזר אור מסתובב, פנים שקועות עם פסי אור, ברק חד בפינה וכוכב חרוט.
 * הכוכבים שבטקסט (מספר הדרגה) מוסתרים (font-size: 0) והכוכב מצויר ב-::after. גובר על הצבע והקו של .wmed בבהיר */
html[data-skin] body .wmed.wmed { --hi: #FFF8D6; --lt: #F6D77A; --md: #D4A231; --dk: #8E6410; --xd: #5E3F05; --fhi: var(--hi); --flt: var(--lt); --fmd: var(--md); --fdk: var(--dk); --fxd: var(--xd);
  --st: #553903; --glow: rgba(230,180,50,.5); --gl: 18px 4px;
  position: relative; isolation: isolate; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 0; font-size: 0; letter-spacing: 0;
  background: conic-gradient(from 210deg, var(--hi), var(--md) 10%, var(--dk) 20%, var(--lt) 32%, var(--hi) 40%, var(--md) 52%, var(--xd) 64%, var(--md) 76%, var(--lt) 88%, var(--hi));
  box-shadow: 0 2px 0 var(--xd), 0 9px 14px -5px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.18), 0 0 var(--gl) var(--glow); }
html[data-skin] body .wmed.wmed::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse 46% 26% at 38% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.35) 40deg, rgba(255,255,255,0) 80deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.28) 220deg, rgba(255,255,255,0) 260deg),
    linear-gradient(160deg, var(--fhi) 0%, var(--flt) 16%, var(--fmd) 36%, var(--fdk) 54%, var(--fmd) 68%, var(--flt) 84%, var(--fhi) 100%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.4), inset 0 -2px 2px rgba(255,255,255,.6), 0 -1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(0,0,0,.25); }
/* הכוכב מצויר (מסכה של SVG) ולא תו של גופן, כדי שיהיה בדיוק באמצע המדליה (אייל, 10/11/2026: "למה הכוכב לא באמצע") */
html[data-skin] body .wmed.wmed::after { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--st) 80%, #000), var(--st));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.2 6.75.85-4.98 4.66 1.3 6.74L12 17.3l-6.02 3.35 1.3-6.74L2.3 9.25l6.75-.85z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.2 6.75.85-4.98 4.66 1.3 6.74L12 17.3l-6.02 3.35 1.3-6.74L2.3 9.25l6.75-.85z'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-skin] body .wmed.wmed.s1 { --hi: #FFE3C8; --lt: #E9A877; --md: #B8743F; --dk: #7A421D; --xd: #4E2510; --st: #45200A; --glow: rgba(205,125,60,.42); --gl: 16px 3px; }
html[data-skin] body .wmed.wmed.s2 { --hi: #FFFFFF; --lt: #E3E8EE; --md: #A9B1BC; --dk: #6E7682; --xd: #474E58; --st: #363D47; --glow: rgba(170,185,205,.55); --gl: 16px 3px; }
html[data-skin] body .wmed.wmed.s4 { --fhi: #E0FFFC; --flt: #6FE0DB; --fmd: #17A9AC; --fdk: #006A75; --fxd: #00434C; --st: #fff; --glow: rgba(0,150,160,.45); --gl: 24px 6px;
  }
.wlvc:not(.now):not(.got) .wmed { filter: saturate(.35) brightness(1.05); opacity: .7; }
.wln { font-family: Levin, Heebo, sans-serif; font-size: 21px; line-height: 1.15; }
.wls { font: 700 12px Heebo, Arial, sans-serif; opacity: .7; }
.wlvc.now .wls { color: #D9B97A; opacity: 1; }
.wbank .wadd textarea { min-height: 84px; }
.wshare { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; cursor: pointer; }
.wshare input { width: 18px; height: 18px; accent-color: #BC954E; }
.wbank .wsave { margin-top: 12px; width: 100%; }
.wlist { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.wsub { margin: 0 0 14px; }
/* בנק ההצלחות נקי (אייל, 10/11: "עמוס מאד ולא מובן"): משפט אחד, שורת מפגש קצרה, והצלחה בשורה אחת בגופן הרגיל */
.wbx2 { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.wbx2h { margin: 0 0 2px; text-align: center; font-size: 15px; color: var(--c-tx2); }
.wm2h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.wm2h .wmk { flex: 1; min-width: 0; text-align: right; font-family: "Levin", var(--ui); font-weight: 400; font-synthesis: none; font-size: 19px; color: #D9B97A; }
html[data-mode="light"] .wm2h .wmk { color: #8C6A2E; }
.wm2h .wmn { font-size: 13px; font-weight: 700; color: var(--c-tx2); white-space: nowrap; }
.wm2h .wmc { display: inline-flex; color: var(--c-tx2); transition: transform .2s; }
.wm2h .wmc svg { width: 16px; height: 16px; }
.wm2.on .wmc { transform: rotate(180deg); }
.wl2 { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-direction: column; }
.wl2 .wr { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--c-ring, rgba(255,255,255,.1)); }
.wl2 .wr:last-child { border-bottom: 0; }
.wl2 .wt { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--c-tx); }
.wl2 .wa { display: flex; align-items: center; gap: 8px; flex: none; }
.wl2 .wplay { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-tx2); background: color-mix(in srgb, var(--c-tx) 8%, transparent); }
.wl2 .wplay svg { width: 12px; height: 12px; }
.wl2 .wme { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--c-ok); border: 1.5px solid var(--c-ok); background: none; }
@media (max-width: 600px) { .wl2 .wr { flex-direction: column; align-items: stretch; gap: 8px; } .wl2 .wa { justify-content: flex-end; } }
/* בטלפון הלשוניות הראשיות בסרגל התחתון, אבל לשוניות המשנה של הבנק נשארות למעלה */
@media (max-width: 980px) { html[data-skin="columns"] .mtabs.wsub { display: flex; margin: 6px 0 14px; } }
html[data-skin][data-mode="light"] body .wbank .shead.wlv.wlv { background: linear-gradient(180deg, rgba(255,250,236,.95), rgba(255,255,255,.92)); border-color: rgba(140,106,46,.4); box-shadow: 0 18px 40px -22px rgba(150,105,20,.45); }
html[data-mode="light"] .wbank .wlv .k, html[data-mode="light"] .wlvc.now .wls { color: #8C6A2E; }
html[data-mode="light"] .wlvc { background: rgba(255,255,255,.7); border-color: rgba(140,106,46,.25); }
html[data-mode="light"] .wlvc.now { border-color: #BC954E; background: rgba(188,149,78,.10); }
html[data-mode="light"] .wln { color: #3b3646; }
html[data-mode="light"] .wmed { color: #2a1a05; border: 1px solid rgba(110,80,30,.35); }