/* מרכז הלמידה: צ'אט, גרפים, התראות ואזור התלמיד. משתמש במשתני ערכת הנושא של app.css */

/* ---------- צ'אט ---------- */
.chat { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 150px); min-height: 480px; }
.chat__side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat__side .search { margin: 0; }
.chat__threads { overflow-y: auto; display: grid; gap: 6px; align-content: start; }
.thread { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid transparent; }
.thread.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.thread__main { flex: 1; min-width: 0; display: grid; }
.thread__main small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.thread__end { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: 12px; }
.unread { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 12px; color: var(--on-accent); background: var(--accent); }
.chat__main { display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat__head > div { flex: 1; display: grid; }
.chat__head small { color: var(--muted); }
.chat__body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.bubble { max-width: 68%; padding: 9px 13px 6px; border-radius: 16px; line-height: 1.5; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.bubble time { display: block; margin-top: 3px; font-size: 11.5px; opacity: .7; text-align: end; }
.bubble--them { align-self: flex-start; background: var(--surface); color: var(--text); border-start-start-radius: 4px; }
.bubble--me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 85%, #000 0%); color: var(--on-accent); border-start-end-radius: 4px; }
.bubble__img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin-bottom: 6px; }
.bubble__file { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px 12px; border-radius: 10px; color: inherit; background: rgb(0 0 0 / .12); font-weight: 700; text-decoration: none; }
.bubble__file .i { width: 18px; height: 18px; }
.chat__send { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.chat__send .icon-btn { cursor: pointer; }
.chat__input { flex: 1; display: grid; gap: 4px; }
.chat__input textarea { width: 100%; min-height: 48px; max-height: 140px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; }
.chat__att { font-size: 13px; font-weight: 700; color: var(--accent); }

.live-edit { width: 100%; margin: 12px 0 4px; }

/* ---------- התראות בדשבורד ---------- */
.alerts .alert { border-inline-start: 4px solid var(--c-orange); }
.alerts .alert--urgent { border-inline-start-color: var(--c-red); background: color-mix(in srgb, var(--c-red) 10%, var(--surface)); }
.alerts .alert--quiet { border-inline-start-color: var(--c-gray); }
.alerts .item__main small { white-space: normal; }

/* ---------- כרטיס תלמיד ---------- */
.extras { display: grid; gap: 14px; margin-top: 14px; }
.extras__title { margin: 10px 0 0; font-family: var(--font-head); font-weight: var(--head-weight); }
.prog { display: grid; gap: 6px; margin-top: 10px; }
.prog__row { display: flex; justify-content: space-between; gap: 10px; }
.bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); }

/* ---------- גרפים ---------- */
.report { display: grid; gap: 10px; }
.report__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.report__head h3 { margin: 0; }
.report h4 { margin: 10px 0 0; font-size: 17px; }
.lvl { padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #fff; background: var(--lc); }
.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-axis { fill: var(--muted); font-size: 12px; font-family: Heebo, sans-serif; }
.ch-band { fill: var(--muted); font-size: 11.5px; font-weight: 700; font-family: Heebo, sans-serif; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.ch-pt circle, .ch-dot { fill: var(--surface); stroke: var(--gold, var(--accent)); stroke-width: 3; }
.ch-val { fill: var(--text); font-size: 13px; font-weight: 800; font-family: Heebo, sans-serif; }
.chart-empty { padding: 26px; border-radius: var(--radius); text-align: center; color: var(--muted); background: var(--surface-2); }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.qcard { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.qcard p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.spark { width: 100%; height: 46px; }
.qdir { color: var(--muted); font-weight: 700; }
.qdir--up { color: var(--c-green); }
.qdir--down { color: var(--c-red); }
.qgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.report__meta { margin: -4px 0 0; }
.rtools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 38px; padding: 6px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rhint { margin: 0; }
.chart--sm .ch-axis, .chart--sm .ch-val { font-size: 15px; }
.ch-bar rect { opacity: .92; }
.gauge-wrap { display: grid; justify-items: center; gap: 4px; padding: 6px 0 4px; }
.gauge { width: min(100%, 340px); height: auto; display: block; }
.ch-needle { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.ch-hub { fill: var(--text); }
.gauge__num { display: grid; justify-items: center; line-height: 1.2; }
.gauge__num b { font-size: 40px; font-weight: 900; }
.gauge__num span { font-weight: 700; }
.gauge__num small { color: var(--muted); }
.gauge__prev { display: grid; justify-items: center; gap: 6px; margin-top: 8px; }
.gauge__prev small { color: var(--muted); }
.gauge__prev > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border-inline-start: 4px solid var(--lc); font-size: 14px; color: var(--muted); }
.pchip b { color: var(--text); font-size: 15px; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.subs { display: grid; gap: 8px; }
.subs h4 { margin: 6px 0 0; }
.subs p { margin: 0; }
.sub { display: grid; grid-template-columns: minmax(110px, 9em) 1fr 2.2em 9em; align-items: center; gap: 10px; }
.sub__name { font-weight: 700; font-size: 15px; }
.sub__bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sub__bar i { display: block; height: 100%; border-radius: inherit; }
.sub b { text-align: center; }
@media (max-width: 520px) { .sub { grid-template-columns: 1fr 2.2em; } .sub__bar { grid-column: 1 / -1; grid-row: 2; } .sub small { grid-column: 1 / -1; } }
.meter__seg { display: grid; gap: 4px; text-align: center; }
.meter__seg i { display: block; height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--mc) 22%, transparent); border: 2px solid transparent; }
.meter__seg.is-cur i { background: var(--mc); }
.meter__seg.is-prev i { border-color: var(--mc); border-style: dashed; }
.meter__seg small { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.meter__seg.is-cur small { color: var(--text); font-weight: 800; }
.meter__legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.meter__legend i { width: 14px; height: 10px; border: 2px dashed var(--muted); border-radius: 4px; }
.rhist summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.rtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.rtable th, .rtable td { padding: 8px 6px; text-align: start; border-bottom: 1px solid var(--line); }
.rtable th { color: var(--muted); font-weight: 700; font-size: 14px; }
.dotlvl { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); margin-inline-end: 6px; }

/* ---------- שאלונים: גישה, חובה ורשות, בקשות ---------- */
.score-box { display: grid; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--surface-2); border-inline-start: 6px solid var(--lc); }
.score-box b.score-box__n { font-size: 34px; font-weight: 900; line-height: 1.1; }
.score-box p { margin: 0; }
.tag-req { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; background: color-mix(in srgb, var(--c-orange, #F76B15) 18%, transparent); color: var(--c-orange, #F76B15); }
.tag-opt { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.lock-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.lock-card .item__main { flex: 1 1 200px; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.acc-row:last-child { border-bottom: 0; }
.acc-row b { display: block; }
.acc-row small { color: var(--muted); }
.acc-row > span > small { display: block; }
.item--wait { opacity: .75; }
.acc-ctl { display: grid; gap: 8px; justify-items: end; margin-inline-start: auto; }
.acc-row > span { flex: 1 1 260px; }
.srep, .cf-opts select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; max-width: 100%; }
.linkbtn { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; font-size: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cf-row { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cf-row:last-child { border-bottom: 0; }
.cf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cf-opts { display: flex; gap: 10px 16px; flex-wrap: wrap; }
.cf-opts label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 700; flex: 1 1 200px; }
@media (max-width: 640px) { .acc-ctl { justify-items: stretch; width: 100%; } }
.student .list .item__main small { white-space: normal; overflow: visible; text-overflow: clip; }
.req-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { white-space: nowrap; }
.item.acc-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; padding: 14px 16px; border-bottom: 0; }
.acc-row .seg { max-width: 100%; }

/* ---------- אזור התלמיד ---------- */
.student .nav.snav { gap: 4px; }
.snav__brand { display: flex !important; align-items: center; gap: 10px; height: auto !important; padding: 6px 10px 16px !important; margin-bottom: 8px; border-bottom: 1px solid var(--line); border-radius: 0 !important; font-family: var(--font-head); font-weight: 900; font-size: 19px !important; color: var(--text) !important; }
.snav__brand img { height: 38px; width: auto; padding: 4px 8px; border-radius: 10px; background: #FEFAF0; }
.snav a { position: relative; }
.snav a .unread { margin-inline-start: auto; }
.snav__foot { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.snav__me { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.snav__me > div { display: grid; min-width: 0; }
.snav__me b { font-size: 14.5px; }
.snav__me small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav__btn { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent; color: var(--nav-text); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.snav__btn:hover, .snav a:hover { background: var(--nav-active-bg); }
.sapp { padding-bottom: 60px; }
.sapp .top { margin-bottom: 10px; }
.sapp .top__title h1 { font-size: 30px; }
.err-line { margin: 0; font-weight: 700; color: var(--c-red); }
.btn--lg { min-height: 58px; font-size: 18px; }

.slogin .card { width: min(460px, 100%); text-align: right; }
.slogin h1 { text-align: center; }
.slogin > .card > .muted { text-align: center; }
.slogin__logo { justify-self: center; height: 64px; padding: 6px 14px; border-radius: 16px; background: #FEFAF0; }
.slogin__demo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.continue { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-top: 6px; border-radius: var(--radius-lg); color: var(--on-hero); background: var(--hero); box-shadow: var(--shadow); }
.continue__play { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: rgb(0 0 0 / .18); }
.continue__play .i { width: 30px; height: 30px; }
.continue__txt { display: grid; gap: 2px; }
.continue__txt small { font-weight: 700; opacity: .8; }
.continue__txt b { font-family: var(--font-head); font-size: 26px; font-weight: 900; line-height: 1.15; }
.continue__txt span { opacity: .85; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.note > .i { color: var(--accent); margin-top: 2px; }
.note span { display: grid; gap: 2px; }
.note small { color: var(--muted); line-height: 1.45; }
.note--wait { border-inline-start: 4px solid var(--gold, var(--accent)); }
.note--care { margin-top: 6px; border-inline-start: 4px solid var(--c-teal); background: color-mix(in srgb, var(--c-teal) 10%, var(--surface)); }
.note--care a { color: var(--accent); font-weight: 800; }

.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.course { display: grid; overflow: hidden; color: var(--text); }
.course__img { width: 100%; height: 140px; object-fit: cover; }
.course__img--ph { display: grid; place-items: center; font-family: var(--font-head); font-size: 44px; font-weight: 900; color: var(--gold, var(--accent)); background: radial-gradient(260px 140px at 80% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent), var(--surface-2); }
.course__body { display: grid; gap: 6px; padding: 16px 18px 18px; }
.course__body small { color: var(--muted); font-weight: 700; }
.course__body b { font-family: var(--font-head); font-size: 22px; font-weight: 900; line-height: 1.2; }
.course-hero p { margin: 0; line-height: 1.6; }
.course-hero .btn { justify-self: start; }
.done-note { font-weight: 800; color: var(--c-green); }

.lessons { display: grid; gap: 8px; }
.lesson { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.lesson:hover { border-color: var(--accent); }
.lesson__mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; font-weight: 800; border: 2px solid var(--line); color: var(--muted); }
.lesson--done .lesson__mark { color: #fff; background: var(--c-green); border-color: transparent; }
.lesson--done .lesson__mark .i { width: 20px; height: 20px; }
.lesson__main { flex: 1; display: grid; }
.lesson__main small { color: var(--muted); }
.lesson > .i { color: var(--accent); }

.player { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.player iframe { width: 100%; height: 100%; border: 0; }
.player__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: #F3EBDD; background: radial-gradient(500px 300px at 70% 20%, rgb(0 169 166 / .3), transparent), #0A2426; }
.player__ph .i { width: 54px; height: 54px; color: #C9A45C; }
.player__ph b { font-size: 22px; }
.player__ph span { opacity: .75; }
.lesson-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sapp > .note { margin-top: 14px; }

.schat { height: calc(100vh - 130px); min-height: 460px; }

.qform { display: grid; gap: 12px; max-width: 760px; }
.qform__intro { font-size: 18px; font-weight: 700; }
.qrow { margin: 0; padding: 16px 18px; display: grid; gap: 12px; }
.qrow legend { float: right; width: 100%; padding: 0; font-size: 17px; line-height: 1.5; }
.qrow--bad { border-color: var(--c-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-red) 25%, transparent); }
.pills--col { flex-direction: column; align-items: stretch; }
.pills--col label { height: auto; min-height: 48px; padding: 10px 16px; border-radius: 14px; }
.qform > .btn { justify-self: start; margin-top: 6px; }

.result h2 { font-size: 30px; }
.result__score { font-size: 18px; }
.result__score b { font-family: var(--font-head); font-size: 44px; color: var(--accent); }
.quiz-review { display: grid; gap: 8px; }
.qrev { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; border-inline-start: 4px solid; }
.qrev--ok { border-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 10%, transparent); }
.qrev--no { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 10%, transparent); }
.qrev span { color: var(--muted); }

.meet .btn { flex: none; }

.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pick__c { display: grid; gap: 6px; padding: 18px; text-align: right; color: var(--text); cursor: pointer; border-width: 2px; }
.pick__c.on { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pick__c small { color: var(--muted); font-weight: 700; }
.pick__c b { font-family: var(--font-head); font-size: 21px; font-weight: 900; }
.pick__c span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pick__c em { font-style: normal; font-weight: 800; color: var(--gold, var(--accent)); }
.pay { max-width: 620px; margin-top: 18px; }
.cp-row { display: flex; gap: 8px; }
.cp-row input { flex: 1; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
.sum span { color: var(--muted); }
.sum__total { font-family: var(--font-head); font-size: 26px; color: var(--accent); }
.pay__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pay__note { font-size: 14px; }

/* ---------- בתוך קורס: תפריט הקורס מימין, התפריט הראשי נפתח בכפתור ---------- */
body.in-course .snav { transform: translateX(calc(100% + 40px)); transition: transform .25s ease; z-index: 50; }
body.in-course.menu-open .snav { transform: none; box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.menu-scrim { display: none; }
body.in-course.menu-open .menu-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .45); }
body.in-course .app.sapp { max-width: none; margin: 0; padding: 0; }
.cview { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 100vh; }
.cside { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; background: var(--nav-bg); border-inline-end: 1px solid var(--line); }
.cside__top { display: flex; align-items: center; gap: 10px; }
.cside__top .icon-btn { box-shadow: none; border: 1px solid var(--line); }
.cside__home { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--muted); }
.cside__home:hover { color: var(--accent); }
.cside__title { display: grid; gap: 2px; padding-bottom: 6px; }
.cside__title small { color: var(--gold, var(--accent)); font-weight: 700; }
.cside__title b { font-family: var(--font-head); font-weight: 900; font-size: 24px; line-height: 1.15; }
.cside .prog { margin: 0; }
.cside__chs { display: grid; gap: 8px; }
.chap { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.chap summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; font-weight: 800; list-style: none; }
.chap summary::-webkit-details-marker { display: none; }
.chap summary::after { content: ""; width: 8px; height: 8px; flex: none; border-inline-start: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .2s; margin-inline-start: 4px; }
.chap[open] summary::after { transform: rotate(135deg); }
.chap summary span { flex: 1; line-height: 1.35; }
.chap summary small { color: var(--muted); font-weight: 700; }
.chap__ls { display: grid; gap: 2px; padding: 0 6px 8px; }
.cl { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: right; cursor: pointer; }
.cl:hover { background: var(--surface-2); }
.cl.on { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset -3px 0 0 var(--accent); }
.cl__mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--muted); border: 2px solid var(--line); }
.cl__mark .i { width: 16px; height: 16px; }
.cl.on .cl__mark { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.cl--done .cl__mark { color: #fff; background: var(--c-green); border-color: transparent; }
.cl__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.cl > small { flex: none; font-size: 12px; color: var(--muted); }
.cl--add { color: var(--accent); font-weight: 700; }
.cl--add .i { width: 18px; height: 18px; }
.draft { margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--c-yellow); background: color-mix(in srgb, var(--c-yellow) 16%, transparent); }
.cside__qz { display: grid; gap: 2px; margin-top: 6px; }
.cside__qz h3 { font-size: 15px; color: var(--muted); padding: 0 8px 4px; }
.cside__qz .cl > small { max-width: 110px; text-align: left; }
.cside__empty { padding: 8px; }
.cside__add { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cside__add .btn { flex: 1; }

.cmain { min-width: 0; padding: 28px 36px 60px; }
.lwrap { width: min(100%, 1040px); margin: 0 auto; display: grid; gap: 16px; }
.lhead { text-align: center; display: grid; gap: 4px; }
.lhead small { color: var(--gold, var(--accent)); font-weight: 700; font-size: 15px; }
.lhead h1 { font-size: clamp(28px, 3vw, 40px); }
.cmain { padding: 22px 28px 60px; }
.cmain .lwrap { width: min(100%, 1340px); }
/* בין הגודל המלא לגודל הקטן: בערך 1250 פיקסלים במסך גדול */
.cmain .player { width: min(100%, 1250px, calc((100vh - 120px) * 16 / 9)); max-height: none; margin: 0 auto; }

/* פסי גלילה דקים בצבעי המערכת, במקום הפסים האפורים של הדפדפן */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold, var(--accent)) 55%, transparent) transparent; }
.cside, .chat__threads, .chat__body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold, var(--accent)) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--gold, var(--accent)) 45%, transparent); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--gold, var(--accent)) 75%, transparent); }
.cside::-webkit-scrollbar { width: 6px; }
.localvid { width: 100%; height: 100%; background: #000; }
.localtag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #1B1406; background: #D8B66E; }
.localtag .i { width: 16px; height: 16px; }
.edlocal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.edlocal label { cursor: pointer; }
.edlocal__name { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.edlocal small { flex-basis: 100%; }
.edfixed { display: grid; align-content: center; min-height: 52px; padding: 6px 14px; border-radius: var(--radius); background: var(--surface-2); font-weight: 800; font-size: 17px; }
.edfixed small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.grip { display: inline-grid; color: var(--muted); cursor: grab; }
.grip .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
body.editing [data-drag-l] { cursor: grab; }
body.editing .chap summary { gap: 8px; }
.dragging { opacity: .45; }
.drop-before { box-shadow: 0 -3px 0 var(--gold, var(--accent)) !important; }
.drop-after { box-shadow: 0 3px 0 var(--gold, var(--accent)) !important; }
.drop-into { outline: 2px dashed var(--gold, var(--accent)); outline-offset: 2px; }
.cmain .lesson-bar { justify-content: center; margin-top: 2px; }
.cmain .lesson-nav { justify-content: center; margin-top: 4px; }
.cmain .note { justify-self: center; max-width: 720px; }
.cmain .course-hero { justify-items: center; text-align: center; max-width: 760px; width: 100%; margin: 6px auto 0; padding: 26px; }
.cmain .course-hero .prog { width: 100%; text-align: right; }
.cmain .course-hero .btn { justify-self: center; }

/* ---------- עריכה חיה ---------- */
.editbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #1B1406; background: linear-gradient(90deg, #D8B66E, #C9A45C); font-size: 14.5px; }
.editbar .i { width: 20px; height: 20px; }
.editbar span { flex: 1; opacity: .85; }
.editbar .btn { background: rgb(255 255 255 / .55); color: #1B1406; border-color: transparent; }
body.editing .cside { top: 46px; height: calc(100vh - 46px); }
body.editing .app.sapp:not(:has(.cview)) { max-width: 1060px; margin: 0 auto; padding: 24px 32px 60px; }
.edform { width: 100%; max-width: 760px; margin: 8px auto 0; padding: 22px; border: 2px dashed color-mix(in srgb, var(--gold, var(--accent)) 55%, transparent); }
.edform h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.edgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.edfile { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.edfile label { cursor: pointer; }
.edch { margin-bottom: 6px; }
.edbtns { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.edhint { text-align: center; }
.qedit { display: grid; gap: 10px; margin: 0; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.qedit legend { padding: 0 6px; font-weight: 800; }
.qedit textarea, .qedit input[name="opt"] { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.qedit__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qedit__opt { display: flex; align-items: center; gap: 8px; }
.qedit__opt input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--c-green); }
.qedit > .btn { justify-self: start; }
.course--new { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 220px; border: 2px dashed var(--line); color: var(--accent); cursor: pointer; font: inherit; }
.course--new .i { width: 34px; height: 34px; }

/* ---------- מחשב: רוחב מלא לצ'אט ולכרטיסים ---------- */
@media (min-width: 900px) {
  .app:has(.chat) { max-width: 1200px; }
}

/* ---------- משימות ותזכורות ---------- */
.task-add { display: grid; gap: 12px; padding: 18px; margin-bottom: 14px; }
.task-add > input { font-size: 17px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.task-add__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.task-add__row label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.task-add__row input, .task-add__row select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); color-scheme: light dark; }
.task-add__row label[data-times] input { width: 150px; }
.task-add__none { display: flex !important; align-items: center; gap: 6px; padding-bottom: 10px; cursor: pointer; }
.task-add__row .btn { margin-inline-start: auto; }
.task-notif { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold, var(--accent)) 14%, transparent); font-size: 15px; }
.task-notif svg { width: 20px; height: 20px; color: var(--gold, var(--accent)); flex: none; }
.task-notif .btn { margin-inline-start: auto; }
.tasks { display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.task--due { border-color: var(--gold, var(--accent)); box-shadow: 0 0 0 1px var(--gold, var(--accent)) inset; }
.task__check { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--accent); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--on-accent, #fff); padding: 0; }
.task__check:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.task--done .task__check { background: var(--accent); }
.task__check svg { width: 16px; height: 16px; }
.task__main { flex: 1; min-width: 0; display: grid; gap: 3px; color: inherit; text-decoration: none; }
.task__main b { font-size: 16px; }
.task--done .task__main b { text-decoration: line-through; opacity: .6; }
.task__notes { color: var(--muted); font-size: 14px; }
.task__when { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; }
.task__when svg { width: 15px; height: 15px; }
.task__when.late { color: var(--gold, var(--c-red)); font-weight: 600; }
.task__del { opacity: .45; }
.task__del:hover { opacity: 1; }
.tasks-done summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--muted); }
.remind { position: fixed; z-index: 60; bottom: 24px; left: 24px; width: min(380px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--text); border: 2px solid var(--gold, var(--accent)); box-shadow: 0 18px 50px rgba(0,0,0,.35); display: grid; gap: 12px; animation: remindIn .35s ease; }
@keyframes remindIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.remind__head { display: flex; align-items: center; gap: 8px; color: var(--gold, var(--accent)); font-size: 17px; }
.remind__head svg { width: 22px; height: 22px; }
.remind__item { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.remind__item b { font-size: 17px; }
.remind__item small { color: var(--muted); font-size: 14px; }
.remind__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.remind__more { font-size: 14px; color: var(--accent); }
/* ---------- ניהול אתר ---------- */
.site-admin { display: grid; gap: 14px; justify-items: start; padding: 28px; max-width: 640px; }
.site-admin h2 { font-family: var(--font-head); font-size: 26px; color: var(--gold, var(--accent)); margin: 0; }
.site-admin p { margin: 0; font-size: 17px; line-height: 1.7; }
.site-admin small { color: var(--muted); font-size: 14px; }
/* =========================================================
   טלפון וטאבלט (עד 959 פיקסלים). במחשב שום דבר כאן לא חל
   ========================================================= */
@media (min-width: 960px) { .more-mob { display: none; } }
@media (max-width: 959px) {
  /* תפריט תחתון: 5 כפתורים. קורסים, ניהול אתר והגדרות עוברים ל"עוד" */
  .nav a[data-k="courses"], .nav a[data-k="x-site"], .nav a[data-k="x-mail"], .nav a[data-k="x-tasks"], .nav a[data-k="settings"] { display: none; }
  .more-mob { margin-bottom: 18px; }
  .more-mob .item { border: 1px solid color-mix(in srgb, var(--gold, var(--accent)) 35%, var(--line)); }

  /* כרטיס תלמיד: הכפתורים יורדים שורה */
  .extras .btn-row { flex-wrap: wrap; }
  .extras .btn-row .btn { flex: 1 1 100%; }
}.chat__back { display: none; }
@media (max-width: 959px) {
  /* צ'אט: כמו בוואטסאפ, רשימת השיחות ושיחה פתוחה הם שני מסכים */
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 200px); min-height: 380px; }
  .chat--list .chat__main { display: none; }
  .chat--open .chat__side { display: none; }
  .chat__back { display: inline-grid; flex: none; }
  .chat__head { padding: 10px 12px; gap: 10px; }
  .chat__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat__body { padding: 14px 12px; }
  .bubble { max-width: 86%; }
  .bubble__img { max-width: 100%; }
  .chat__send { padding: 10px; gap: 8px; }
  .chat__send .btn { padding-inline: 14px; }

  /* משימות: השדות אחד מתחת לשני */
  .task-add { padding: 14px; }
  .task-add__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .task-add__row label:first-child { grid-column: 1 / -1; }
  .task-add__row input, .task-add__row select, .task-add__row label[data-times] input { width: 100%; min-height: 46px; }
  .task-add__none { grid-column: 1 / -1; padding: 0; min-height: 40px; }
  .task-add__row .btn { grid-column: 1 / -1; margin: 0; min-height: 48px; justify-content: center; }
  .task-notif { flex-wrap: wrap; }
  .task__del { flex: none; }

  /* תזכורת קופצת: מעל התפריט התחתון, על כל הרוחב */
  .remind { left: 12px; right: 12px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .remind__btns .btn { flex: 1 1 40%; min-height: 44px; justify-content: center; }

  /* ניהול אתר */
  .site-admin { padding: 20px; }
  .site-admin .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .chat__head .btn { display: none; }
}
/* ---------- אזור התלמיד בטלפון ---------- */
.mbar, .cbar { display: none; }
@media (max-width: 959px) {
  /* פס עליון עם כפתור תפריט ולוגו */
  .student .mbar { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--nav-bg); border-bottom: 1px solid var(--line); }
  .mbar .icon-btn { position: relative; flex: none; width: 44px; height: 44px; }
  .mbar__dot { position: absolute; top: -4px; left: -4px; }
  .mbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 900; font-size: 18px; color: var(--text); text-decoration: none; }
  .mbar__brand img { height: 32px; width: auto; padding: 3px 7px; border-radius: 9px; background: #FEFAF0; }
  body.in-course .mbar { display: none; }

  /* התפריט הראשי נפתח מהצד, גם מחוץ לקורס */
  .student .nav.snav { top: 0; bottom: 0; right: 0; left: auto; width: min(300px, 86vw); flex-direction: column; justify-content: flex-start; gap: 2px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); border-top: 0; border-inline-start: 1px solid var(--line); overflow-y: auto; transform: translateX(110%); transition: transform .25s ease; z-index: 50; }
  .student.menu-open .nav.snav { transform: none; box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
  .student .nav.snav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; font-size: 16px; border-radius: 14px; justify-items: initial; }
  .student .nav.snav a span { display: inline; }
  .student .nav.snav a.snav__brand { min-height: 0; }
  .student.menu-open .m-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .45); }
  .student .app.sapp { padding: 14px 16px 40px; max-width: 640px; }
  .sapp .top__title h1 { font-size: 26px; }

  /* בתוך קורס: תוכן הקורס נפתח כמגירה מהצד */
  .cview { display: block; min-height: 0; }
  .cside { position: fixed; top: 0; bottom: 0; right: 0; z-index: 50; width: min(340px, 88vw); height: auto; transform: translateX(110%); transition: transform .25s ease; }
  body.cside-open .cside { transform: none; box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
  body.cside-open .menu-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .45); }
  body.editing .cside { top: 0; height: auto; }
  .cbar { position: sticky; top: 0; z-index: 30; display: flex; gap: 8px; margin: -14px -16px 12px; padding: 10px 16px; background: var(--nav-bg); border-bottom: 1px solid var(--line); }
  body.editing .cbar { top: 44px; }
  .cbar .btn { min-height: 44px; }
  .cmain { padding: 14px 16px 50px; }
  .cmain .player { width: 100%; border-radius: 14px; }
  .lhead h1 { font-size: 24px; }
  .lesson-bar .btn, .lesson-nav .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
  .cmain .course-hero { padding: 20px 16px; }
  .cl { min-height: 46px; }

  /* קורסים, הערות ושאלונים */
  .courses, .pick, .notes { grid-template-columns: minmax(0, 1fr); }
  .continue { padding: 18px; gap: 14px; }
  .continue__play { width: 52px; height: 52px; }
  .continue__txt b { font-size: 21px; }
  .qrow { padding: 14px; }
  .qform > .btn { justify-self: stretch; justify-content: center; }
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .cp-row { flex-wrap: wrap; }
  .cp-row .btn { flex: 1 1 100%; justify-content: center; }
  .pay__opts .btn { flex: 1 1 100%; justify-content: center; }
  .schat { height: calc(100dvh - 190px); min-height: 380px; }

  /* עריכה חיה */
  .editbar { padding: 8px 12px; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
  .editbar span { flex-basis: 100%; order: 3; display: none; }
  body.editing .app.sapp:not(:has(.cview)) { padding: 16px; }
  .edform { padding: 16px; }
  .edgrid { grid-template-columns: minmax(0, 1fr); }
  .qedit__opts { grid-template-columns: minmax(0, 1fr); }
  .edbtns .btn { flex: 1 1 auto; justify-content: center; }
}@media (max-width: 959px) {
  .lwrap { grid-template-columns: minmax(0, 1fr); }
  .cmain .btn, .sapp .btn { white-space: normal; text-align: center; }
}@media (max-width: 959px) {
  .task-add__none input[type="checkbox"] { width: 22px !important; height: 22px; min-height: 0 !important; flex: none; }
  .task-add__none { flex-direction: row; justify-content: flex-start; }
  .remind { padding: 12px 14px; gap: 8px; }
  .remind__item { gap: 4px; padding-top: 8px; }
  .remind__item small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .remind__btns .btn { flex: 1 1 20%; min-height: 40px; padding: 0 6px; font-size: 14px; }
  .remind__btns .btn svg { display: none; }
}
/* ---------- מעבר לענן ---------- */
.import-card { border: 2px solid var(--gold, var(--accent)); margin: 14px 0; }
.import-card h3 { color: var(--gold, var(--accent)); }
.import-card p { margin: 0 0 12px; line-height: 1.6; }