:root {
  --bg: #f6f4ef; --card: #ffffff; --ink: #1d2025; --muted: #6b7078; --line: #e4e1da;
  --accent: #2f6f5e; --accent-ink: #ffffff; --accent-soft: #e2efe9;
  --good: #2f8a4c; --good-soft: #e3f3e7; --bad: #c4453b; --bad-soft: #f8e4e2; --warn: #c98a1b;
  --radius: 18px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  --c-anatomy: #c0563b; --c-structural: #2f6f5e; --c-physiology: #3a6ea5; --c-biochem: #8a5bb0; --c-philosophy: #b08a2e; --c-visceral: #a5476e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14161a; --card: #1d2026; --ink: #eceae6; --muted: #9aa0a8; --line: #2c3038;
    --accent: #5fb39a; --accent-ink: #0d1512; --accent-soft: #1e302a; --good-soft: #17301f; --bad-soft: #3a1d1b;
    --shadow: 0 1px 2px rgba(0,0,0,.4); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Heebo", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.5;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); min-height: 100dvh; }
#app { max-width: 520px; margin: 0 auto; padding: 16px 16px 120px; }
/* mixed Hebrew/English text: each block picks its own direction, English terms stay intact */
.bidi { unicode-bidi: plaintext; text-align: start; }
bdi, .en { unicode-bidi: isolate; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.25; }

/* home */
.top { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.top h1 { font-size: 24px; font-weight: 800; white-space: nowrap; }
.chips { display: flex; gap: 6px; }
.chip { background: var(--card); border-radius: 999px; padding: 6px 10px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); white-space: nowrap; }
.goal { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; gap: 16px; align-items: center; }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; }
.ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.goal p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.btn { display: block; width: 100%; min-height: 54px; border-radius: 16px; font-weight: 700; font-size: 18px; padding: 12px 16px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: var(--card); box-shadow: var(--shadow); }
.btn:disabled { opacity: .45; }
.stack { display: grid; gap: 12px; margin-top: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tile { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); text-align: start; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.tile b { font-size: 17px; } .tile small { color: var(--muted); font-size: 14px; } .tile .ico { font-size: 24px; }
.section { margin: 26px 0 10px; font-size: 15px; font-weight: 700; color: var(--muted); }
.unit { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 10px; width: 100%; text-align: start; }
.unit .dot { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.unit .meta { flex: 1; min-width: 0; } .unit .meta b { display: block; font-size: 16px; }
.unit .meta small { color: var(--muted); font-size: 13px; }
.bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* "what next?" – one main card + small alternatives */
.hero { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 18px; border: 2px solid var(--accent); }
.hero-k { color: var(--accent); font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.hero-t { font-size: 22px; font-weight: 800; margin: 0; }
.hero-s { color: var(--muted); margin: 6px 0 14px; font-size: 15px; }
.alts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 2px 4px; }
.alts .muted { font-size: 14px; }
.pill { background: var(--card); box-shadow: var(--shadow); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 700; min-height: 40px; }
.tiles.three { grid-template-columns: 1fr 1fr 1fr; margin-top: 14px; }
.tiles.three .tile { min-height: 78px; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.tiles.three .tile b { font-size: 15px; }
.unit .meta b { margin-bottom: 2px; }
.suggest { margin-bottom: 14px; }
.suggest h2 { font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.sug { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; }
.sug.first { border: 2px solid var(--accent); }
.sug-text { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 500; }
.sug-ico { font-size: 22px; line-height: 1.2; }
.sug-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn.sm { min-height: 44px; font-size: 15px; padding: 8px 14px; width: auto; flex: 1; }

/* lecture summary */
.summary .q { margin-bottom: 12px; }
.sum-h { font-size: 18px; font-weight: 800; margin: 22px 0 6px; color: var(--accent); }
.sum-p { margin: 6px 0; font-size: 17px; line-height: 1.65; }
.sum-ul { margin: 6px 0; padding-inline-start: 20px; }
.sum-ul li { margin: 6px 0; font-size: 17px; line-height: 1.6; }

/* session */
.sbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sbar .x { width: 40px; height: 40px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 20px; }
.sbar .bar { flex: 1; height: 10px; margin: 0; }
.card { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 18px; }
.kicker { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.tag { border-radius: 999px; padding: 2px 10px; color: #fff; font-size: 12px; font-weight: 700; }
.q { font-size: 21px; font-weight: 700; margin: 4px 0 16px; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 56px; border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; text-align: start; background: var(--card); font-size: 17px; }
.opt .k { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.right { border-color: var(--good); background: var(--good-soft); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.answer { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--bg); font-size: 17px; }
.answer .src { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.term-big { font-size: 26px; font-weight: 800; text-align: center; margin: 18px 0 6px; }
.term-sub { text-align: center; color: var(--muted); }
.dock { position: fixed; inset-inline: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.dock .in { max-width: 520px; margin: 0 auto; display: grid; gap: 10px; }
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grades .btn { font-size: 16px; }
.btn.bad { background: var(--bad-soft); color: var(--bad); } .btn.good { background: var(--good-soft); color: var(--good); }
.feedback { font-weight: 800; font-size: 18px; text-align: center; }
.feedback.ok { color: var(--good); } .feedback.no { color: var(--bad); }

/* pin it */
.figwrap { position: relative; overflow: auto; border-radius: 16px; background: #fff; max-height: 62dvh; touch-action: pan-x pan-y; }
.figwrap img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.figwrap .mark { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); pointer-events: none; }
.mark.tap { background: var(--bad); } .mark.ok { background: var(--good); } .mark.target { background: var(--good); animation: pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { transform: scale(1.5); } }
.zoom { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.zoom button { width: 44px; height: 44px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 20px; font-weight: 800; }

/* summary / exam */
.big-num { font-size: 56px; font-weight: 800; text-align: center; margin: 10px 0 0; }
.center { text-align: center; } .muted { color: var(--muted); }
.course-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.course-pick button { border-radius: 999px; padding: 8px 14px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; font-size: 15px; }
.course-pick button.on { background: var(--accent); color: var(--accent-ink); }
.review-item { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-top: 10px; box-shadow: var(--shadow); font-size: 15px; }
.review-item b { display: block; margin-bottom: 4px; }
.toast { position: fixed; top: calc(12px + env(safe-area-inset-top)); inset-inline: 16px; max-width: 488px; margin: 0 auto; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-size: 15px; text-align: center; z-index: 9; }