/*
 * skins.css - הסקינים של אתר החברים (הדמיה V10, אושרה 25/10/2026).
 * כל סקין מחליף צבעים תחת html[data-skin], ושני סקינים מביאים גם פריסה משלהם לעמוד הקורס:
 * "נגן" (רצועות כמו אלבום) ו"קולנוע" (כרזה ושורות). "המסע" הוא מה שיש היום ולא צריך כאן כלום.
 */

/* ===================== הפריסות החדשות (משותף לכל צבע) ===================== */

/* נגן: אלבום ורצועות */
.alb { display: flex; flex-direction: column; gap: 6px; padding-bottom: 30px; }
.alb .ah { display: flex; align-items: flex-end; gap: 22px; padding: 6px 0 22px; }
.alb .ah .art { width: 190px; height: 190px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.alb .ai { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }
.alb .ai h2 { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.08; text-wrap: balance; }
.alb .ai p { margin: 0; font-size: 14px; color: var(--mut); }
.alb .ai .gold svg { width: 16px; height: 16px; }
.alb .ai .gold { align-self: flex-end; } /* כפתור ראשי משמאל (02/11) */
.trh { margin: 18px 4px 4px; font-size: 14px; font-weight: 800; color: var(--mut); }
.trks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trk { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; text-align: start; }
.trk:hover { background: rgba(255,255,255,.06); }
.trk.sel { background: rgba(255,255,255,.1); }
.trk .tn { width: 30px; flex: none; text-align: center; font-size: 15px; font-weight: 800; color: var(--mut); display: grid; place-items: center; }
.trk .tn svg { width: 18px; height: 18px; }
.trk.done .tn { color: var(--teal); }
.trk.current .tn { color: var(--gold); }
.trk.bonus .tn { color: var(--gold); }
.trk .tkt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trk .tkt b { font-size: 15px; font-weight: 700; line-height: 1.35; }
.trk.current .tkt b { color: var(--gold); }
.trk .tkt small { font-size: 12.5px; color: var(--mut); }
.trk.locked { opacity: .5; }
.trk .tnow { font-size: 12px; font-weight: 800; color: #1a1236; background: var(--gold); border-radius: 999px; padding: 3px 10px; flex: none; }

/* קולנוע: כרזה ושורות */
.cine { display: flex; flex-direction: column; gap: 22px; padding-bottom: 30px; }
.cine .hero { position: relative; border-radius: 22px; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; }
.cine .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,4,7,.92) 8%, rgba(5,4,7,.35) 55%, rgba(5,4,7,0)); }
.cine .hx { position: relative; z-index: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.cine .hx { color: #fff; }
.cine .hx h2 { margin: 0; font-size: 36px; font-weight: 900; line-height: 1.08; text-wrap: balance; }
.cine .hx p { margin: 0; font-size: 14px; color: rgba(255,255,255,.75); }
.cine .hb { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.cine .hb span { font-size: 13.5px; color: rgba(255,255,255,.75); }
.cplay { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #050407; font-weight: 800; font-size: 16px; padding: 11px 24px; border-radius: 10px; }
.cplay svg { width: 18px; height: 18px; }
.crow { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crh { margin: 0; font-size: 17px; font-weight: 800; }
.rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { height: 0; }
.cc { flex: none; width: 196px; display: flex; flex-direction: column; gap: 6px; text-align: start; scroll-snap-align: start; }
.cc .cth { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 2px solid transparent; }
.cc.sel .cth { border-color: #fff; }
.cc .cth b { position: absolute; bottom: 6px; right: 10px; font-size: 40px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.92); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.cc .cth i { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(5,4,7,.6); color: #fff; }
.cc .cth i svg { width: 15px; height: 15px; }
.cc.done .cth i { background: var(--teal); color: #050407; }
.cc.current .cth { border-color: var(--gold); }
.cc .cth u { position: absolute; bottom: 0; right: 0; left: 0; height: 4px; background: var(--teal); }
.cc .cti { font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc small { font-size: 12px; color: var(--mut); }
.cc.locked { opacity: .55; }

/* ===================== קולנוע: צבעים ===================== */
html[data-skin="cinema"] { --night: #050407; --glass: rgba(255,255,255,.05); --edge: rgba(255,255,255,.08); --hi: rgba(255,255,255,.08); }
html[data-skin="cinema"] body { background: #050407; }
html[data-skin="cinema"] .gl { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; background: #121016; }
html[data-skin="cinema"] .lib, html[data-skin="cinema"] .pan, html[data-skin="cinema"] .pbar { background: #0d0b11; border-color: rgba(255,255,255,.06); }
html[data-skin="cinema"] .k { color: var(--gold); }
html[data-skin="cinema"] .sheet { background: #050407; }
html[data-skin="cinema"] .mini { background: rgba(18,16,22,.94); }

/* ===================== נגן: צבעים ===================== */
html[data-skin="player"] { --night: #0d0b12; --glass: rgba(255,255,255,.05); --edge: rgba(255,255,255,.07); --hi: rgba(255,255,255,.06); }
html[data-skin="player"] body { background: linear-gradient(180deg, #4a2296 0, #241047 300px, #0d0b12 620px) fixed, #0d0b12; }
html[data-skin="player"] .gl { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
html[data-skin="player"] .lib, html[data-skin="player"] .pan { background: rgba(10,8,14,.72); }
html[data-skin="player"] .pbar { background: #17141e; border-color: rgba(255,255,255,.06); border-radius: 16px; }
html[data-skin="player"] .sheet { background: linear-gradient(180deg, #2c1560 0, #0d0b12 380px); }
html[data-skin="player"] .mini { background: rgba(23,20,30,.95); }

/* ===================== בהיר: לכל סקין (data-mode). כהה הוא ברירת המחדל ===================== */
html[data-mode="light"] {
  --ink: #211541; --mut: rgba(33,21,65,.62); --faint: rgba(33,21,65,.12); --teal: #0E9C8C; --night: #F5F2FF;
  --glass: rgba(255,255,255,.82); --edge: rgba(33,21,65,.09); --hi: rgba(255,255,255,.95); color-scheme: light;
}
html[data-mode="light"] body {
  background: radial-gradient(circle at 88% 6%, rgba(112,39,204,.16), transparent 42%), radial-gradient(circle at 6% 55%, rgba(63,227,208,.16), transparent 40%),
    radial-gradient(circle at 70% 98%, rgba(255,79,143,.12), transparent 42%), #F5F2FF;
}
html[data-mode="light"] .gl { box-shadow: 0 10px 30px rgba(52,30,110,.08); }
html[data-mode="light"] .av { background: rgba(33,21,65,.07); border-color: rgba(33,21,65,.12); }
html[data-mode="light"] .ghost { background: #fff; border-color: rgba(33,21,65,.14); }
html[data-mode="light"] .lib .it:hover { background: rgba(33,21,65,.05); }
html[data-mode="light"] .lib .it.on { background: rgba(112,39,204,.1); }
html[data-mode="light"] .sidebtn:hover { color: var(--ink); }
html[data-mode="light"] .chip { background: #fff; border-color: rgba(33,21,65,.12); }
html[data-mode="light"] .st { background: #fff; border-color: rgba(33,21,65,.14); box-shadow: 0 4px 14px rgba(52,30,110,.1); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-mode="light"] .st.locked { color: rgba(33,21,65,.35); }
html[data-mode="light"] .st.open { color: var(--ink); border-color: rgba(112,39,204,.4); }
html[data-mode="light"] .st.done { border-color: rgba(0,109,126,.5); box-shadow: 0 4px 14px rgba(0,109,126,.18); }
html[data-mode="light"] .st.current { background: linear-gradient(180deg, #8A3FE6, #5B1FB8); color: #fff; box-shadow: 0 0 0 7px rgba(112,39,204,.14), 0 10px 30px rgba(112,39,204,.35); }
html[data-mode="light"] .bub { background: #211541; color: #fff; }
html[data-mode="light"] .path svg.ln path:first-child { stroke: rgba(33,21,65,.16); }
html[data-mode="light"] .path svg.ln path:nth-child(2) { filter: none !important; }
html[data-mode="light"] .wv b { background: rgba(33,21,65,.14); }
html[data-mode="light"] .pcard .ctl .pp, html[data-mode="light"] .pbar .pp, html[data-mode="light"] .mini .pp { background: #211541; color: #fff; }
html[data-mode="light"] .parts button { border-color: rgba(33,21,65,.16); }
html[data-mode="light"] .parts button.on { background: #211541; color: #fff; }
html[data-mode="light"] .pbar .bt .sk { border-color: rgba(33,21,65,.16); }
html[data-mode="light"] .task textarea { background: #fff; color: var(--ink); border-color: rgba(33,21,65,.14); }
html[data-mode="light"] .task textarea::placeholder { color: rgba(33,21,65,.4); }
html[data-mode="light"] .vposter .vdur { background: rgba(33,21,65,.7); }
html[data-mode="light"] .sheet { background: #F5F2FF; }
html[data-mode="light"] .sheet .back { background: #fff; border-color: rgba(33,21,65,.12); }
html[data-mode="light"] .mini { background: rgba(255,255,255,.92); }
html[data-mode="light"] .mini .pg { background: rgba(33,21,65,.1); }
html[data-mode="light"] .toast { background: #fff; }
html[data-mode="light"] .lockbox svg { color: var(--mut); }

/* ===================== טלפון ===================== */
@media (max-width: 980px) {
  .alb .ah { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 14px; }
  .alb .ah .art { width: 150px; height: 150px; }
  .alb .ai h2 { font-size: 24px; }
  .trk { padding: 10px 6px; }
  .cine { gap: 18px; margin-top: 14px; }
  .cine .hero { min-height: 260px; margin: 0 -18px; border-radius: 0; }
  .cine .hx { padding: 20px 18px; }
  .cine .hx h2 { font-size: 26px; }
  .rail { margin: 0 -18px; padding: 0 18px 6px; }
  .cc { width: 150px; }
  .cc .cth b { font-size: 32px; }
}

/* ===================== האתגר: כמו אפליקציית עשרת הימים ===================== */
.chl { width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px; font-family: 'Assistant', 'Segoe UI', sans-serif; }
.chh { text-align: center; padding: 6px 0 4px; }
.chh h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.25; color: var(--gold); text-wrap: balance; }
.chh p { margin: 8px 0 0; font-size: 15px; color: var(--mut); }
.chg { border-radius: 18px; padding: 16px 20px; border-right: 4px solid var(--gold); }
.chg p { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.35; }
.chg p span { color: var(--gold); }
.chp { border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.chp > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--mut); }
.chp > div b { color: var(--ink); font-weight: 800; }
.chp i { display: block; height: 12px; border-radius: 999px; background: rgba(0,0,0,.28); overflow: hidden; }
.chp u { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.chs { display: flex; gap: 10px; }
.chs > div { flex: 1; border-radius: 14px; padding: 12px 10px; text-align: center; }
.chs b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--gold); }
.chs .ok b { color: #4ADE80; }
.chs span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--mut); }
.cht { margin: 14px 0 0; font-size: 24px; font-weight: 800; }
.chrs { display: flex; flex-direction: column; gap: 10px; }
.chrow { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 12px 14px; border-radius: 16px; width: 100%; text-align: start; border: 1px solid transparent; }
.chrow .n { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; font-weight: 800; }
.chrow .n svg { width: 20px; height: 20px; }
.chrow .m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chrow .m b { font-size: 17px; font-weight: 700; line-height: 1.4; overflow-wrap: break-word; }
.chrow .m span { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.chrow .m i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(133,119,172,.6); }
.chrow .k { flex: none; font-size: 20px; opacity: .85; display: grid; place-items: center; }
.chrow .k svg { width: 20px; height: 20px; }
.chrow.done { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.35); }
.chrow.done .n { background: #4ADE80; color: #0d2318; }
.chrow.done .m span { color: #4ADE80; }
.chrow.active { background: rgba(253,191,4,.12); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(253,191,4,.16); }
.chrow.active .n { background: linear-gradient(160deg, #ffdb5c, var(--gold)); color: #241B47; }
.chrow.active .m span { color: var(--gold); }
.chrow.open, .chrow.bonus { background: var(--glass); border-color: var(--edge); }
.chrow.open .n { border: 1px solid var(--edge); }
.chrow.bonus .n { color: var(--gold); border: 1px solid rgba(253,191,4,.45); }
.chrow.locked { background: rgba(0,0,0,.12); border: 1px dashed rgba(133,119,172,.6); }
.chrow.locked .n { border: 1px dashed rgba(133,119,172,.6); color: var(--mut); }
.chrow.locked .k { opacity: .55; }
.chrow.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-skin="challenge"] { --night: #241B47; --glass: #2E2359; --edge: #4A3A86; --hi: rgba(255,255,255,.08); --mut: #B7ACD6; }
html[data-skin="challenge"] body { font-family: 'Assistant', 'Segoe UI', sans-serif; background: linear-gradient(180deg, #241B47 0%, #3E1C96 130%) fixed, #241B47; }
html[data-skin="challenge"] .gl, html[data-skin="challenge"] .chg, html[data-skin="challenge"] .chp, html[data-skin="challenge"] .chs > div { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
html[data-skin="challenge"] .chg { border-right: 4px solid var(--gold); }
html[data-skin="challenge"] .sheet { background: linear-gradient(180deg, #241B47 0%, #3E1C96 130%); }
html[data-skin="challenge"] .hd { display: none; }

/* ===================== בהיר לסקינים עם רקע משלהם ===================== */
html[data-mode="light"][data-skin="player"] body { background: linear-gradient(180deg, #D9C8FF 0, #EFE8FF 300px, #F7F5FC 620px) fixed, #F7F5FC; }
html[data-mode="light"][data-skin="player"] .lib, html[data-mode="light"][data-skin="player"] .pan { background: rgba(255,255,255,.8); }
html[data-mode="light"][data-skin="player"] .pbar { background: #fff; border-color: rgba(33,21,65,.08); }
html[data-mode="light"][data-skin="player"] .trk:hover { background: rgba(33,21,65,.05); }
html[data-mode="light"][data-skin="player"] .trk.sel { background: rgba(112,39,204,.1); }
html[data-mode="light"][data-skin="player"] .trk.current .tkt b { color: #7027CC; }
html[data-mode="light"][data-skin="player"] .trk.current .tn, html[data-mode="light"][data-skin="player"] .trk.bonus .tn { color: #B8860B; }
html[data-mode="light"][data-skin="player"] .sheet { background: linear-gradient(180deg, #D9C8FF 0, #F7F5FC 380px); }
html[data-mode="light"][data-skin="player"] .mini { background: rgba(255,255,255,.95); }
html[data-mode="light"][data-skin="cinema"] body { background: #F6F5F9; }
html[data-mode="light"][data-skin="cinema"] .gl { background: #fff; }
html[data-mode="light"][data-skin="cinema"] .lib, html[data-mode="light"][data-skin="cinema"] .pan, html[data-mode="light"][data-skin="cinema"] .pbar { background: #fff; border-color: rgba(33,21,65,.08); }
html[data-mode="light"][data-skin="cinema"] .k { color: #B8860B; }
html[data-mode="light"][data-skin="cinema"] .cc.sel .cth { border-color: #211541; }
html[data-mode="light"][data-skin="cinema"] .sheet { background: #F6F5F9; }
html[data-mode="light"][data-skin="cinema"] .mini { background: rgba(255,255,255,.96); }
html[data-mode="light"][data-skin="challenge"] { --glass: #FFFFFF; --edge: #DDD3F3; --mut: #6B5E92; --gold: #D49B00; }
html[data-mode="light"][data-skin="challenge"] body { background: linear-gradient(180deg, #F6F2FF 0%, #E9E0FF 130%) fixed, #F6F2FF; }
html[data-mode="light"][data-skin="challenge"] .chh h1, html[data-mode="light"][data-skin="challenge"] .chg p span { color: #5B1FB8; }
html[data-mode="light"][data-skin="challenge"] .chp i { background: #ECE6FA; }
html[data-mode="light"][data-skin="challenge"] .chrow.done { background: #EAFBF0; border-color: #9BE3B5; }
html[data-mode="light"][data-skin="challenge"] .chrow.done .m span, html[data-mode="light"][data-skin="challenge"] .chs .ok b { color: #15803D; }
html[data-mode="light"][data-skin="challenge"] .chrow.active { background: #FFF7DB; }
html[data-mode="light"][data-skin="challenge"] .chrow.locked { background: #F3EFFB; border-color: #C9BDE6; }
html[data-mode="light"][data-skin="challenge"] .sheet { background: #F6F2FF; }

@media (max-width: 980px) {
  .chl { margin-top: 6px; }
  html[data-skin="challenge"] .app { padding-top: 20px; }
  .chh h1 { font-size: 27px; }
  .chg p { font-size: 20px; }
  .chrow { gap: 10px; padding: 11px 12px; }
  .chrow .n { width: 42px; height: 42px; font-size: 17px; }
  .chrow .m b { font-size: 16px; }
}

/* ===================== רב מסר: כמו מערכת הקורסים שלהם (Schooler) ===================== */
.lmsbar { display: none; }
html[data-skin="ravmesser"] body { background: #0F1A19; }
html[data-mode="light"][data-skin="ravmesser"] body { background: #F4F6F6; }
html[data-skin="ravmesser"] .app { grid-template-columns: 420px 1fr; grid-template-rows: 64px 1fr 88px; }
html[data-skin="ravmesser"] .lmsbar { display: flex; grid-column: 1 / -1; grid-row: 1; align-items: center; gap: 12px; padding: 0 24px; background: #0B4A46; color: #fff; font-size: 18px; font-weight: 800; }
html[data-skin="ravmesser"] .lmsbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmi0 { width: 40px; height: 40px; border-radius: 10px; background: #fff; color: #0B4A46; display: grid; place-items: center; font-size: 15px; font-weight: 900; flex: none; }
html[data-skin="ravmesser"] .lib, html[data-skin="ravmesser"] .sidebtn, html[data-skin="ravmesser"] .hd { display: none !important; }
html[data-skin="ravmesser"] .mid { grid-row: 2; grid-column: 1; background: #0B4A46; padding: 18px; color: #fff; --ink: #fff; --mut: rgba(255,255,255,.72); }
html[data-skin="ravmesser"] .pan { grid-row: 2; grid-column: 2; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0F1A19; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 28px 40px; }
html[data-mode="light"][data-skin="ravmesser"] .pan { background: #fff; }
html[data-skin="ravmesser"] .pan .stn { max-width: 900px; margin: 0 auto; }
html[data-skin="ravmesser"] .pan .stn h3 { font-size: 30px; }
html[data-skin="ravmesser"] .pbar { grid-row: 3; }
.lms { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.lcv { aspect-ratio: 16 / 9; border-radius: 18px; display: flex; align-items: flex-end; padding: 16px; }
.lcv b { font-size: 21px; font-weight: 900; line-height: 1.2; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); text-wrap: balance; }
.lmh h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.lmh p { margin: 6px 0 0; font-size: 13.5px; color: rgba(255,255,255,.72); }
.lpr { border-radius: 16px; padding: 14px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 10px; }
.lpr > div { display: flex; justify-content: space-between; font-size: 14px; }
.lpr i { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.lpr u { display: block; height: 100%; border-radius: 999px; background: #8FE9DC; }
.lpr small { font-size: 13px; color: rgba(255,255,255,.72); }
.lsr input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font-size: 14.5px; }
.lsr input::placeholder { color: rgba(255,255,255,.6); }
.lml { display: flex; flex-direction: column; gap: 2px; }
.lmi { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; text-align: start; color: #fff; }
.lmi:hover { background: rgba(255,255,255,.06); }
.lmi.sel { background: rgba(255,255,255,.12); }
.lmi .lpl { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); display: grid; place-items: center; }
.lmi .lpl svg { width: 13px; height: 13px; }
.lmi.current .lpl { background: #fff; color: #0B4A46; border-color: #fff; }
.lmi .lmt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lmi .lmt b { font-size: 15px; font-weight: 700; line-height: 1.35; }
.lmi .lmt small { font-size: 12.5px; color: rgba(255,255,255,.7); }
.lmi .lck { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); display: grid; place-items: center; }
.lmi.done .lck { background: #8FE9DC; border-color: #8FE9DC; color: #0B4A46; }
.lmi .lck svg { width: 13px; height: 13px; }
.lmi.locked { opacity: .5; }
.lnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 26px; padding: 12px; border-radius: 18px; background: #0B4A46; }
.lnx { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 20px; border-radius: 14px; background: #fff; color: #0B4A46; }
.lnx span { font-size: 12px; } .lnx b { font-size: 15px; font-weight: 800; }
.lpv { padding: 10px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.8); font-weight: 700; font-size: 14px; }
html[data-skin="ravmesser"] .sheet { background: #0F1A19; }
html[data-mode="light"][data-skin="ravmesser"] .sheet { background: #fff; }
html[data-skin="ravmesser"] .mini { background: rgba(11,74,70,.96); color: #fff; }
@media (max-width: 980px) {
  html[data-skin="ravmesser"] .app { display: block; padding: 0 0 120px; }
  html[data-skin="ravmesser"] .lmsbar { position: sticky; top: 0; z-index: 5; height: 60px; padding: 0 16px; font-size: 16px; }
  html[data-skin="ravmesser"] .mid { min-height: calc(100dvh - 60px); padding: 16px; }
}

/* באנר עליון של התוכנית (V13): ברוחב העמודה, בגובה שהיחס של התמונה קובע */
.cbanner { display: block; width: 100%; height: auto; border-radius: 16px; margin: 0 0 16px; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
html[data-mode="light"] .cbanner { box-shadow: 0 8px 22px rgba(20,10,60,.12); }
html[data-skin="ravmesser"] .cbanner { border-radius: 10px; margin-bottom: 12px; box-shadow: none; }
html[data-skin="challenge"] .cbanner { border-radius: 14px; }

/* בטלפון החיפוש בגופן 16 (נגד הזום של אייפון): ריפוד קטן יותר, כדי שיישאר בגובה 44 */
@media (max-width: 980px) { .lsr input { padding: 11.5px 14px; } }