:root {
  --cyan-bright: #41d9f8;
  --purple: #484dd2;
  --turquoise: #00c4dc;
  --blue: #4ca9ff;
  --lavender: #b9a8ff;
  --paper: #f7fafc;
  --ink: #02102b;
  --navy: #003a7d;
  --cyan: #00c4dc;
  --sky: #eef6fb;
  --sky-2: #e4eef8;
  --mute: #355a7a;
  --line: #c5d5e8;
  --card: #ffffff;
  --live: #e11d48;
  --ok: #bbf7d0;
  --font: "Rubik", "Noto Sans Hebrew", "Segoe UI", sans-serif;
  --pad: 18px;
  --max: 1080px;
  --accent: #41d9f8;
  --accent-ink: #02102b;
  --yellow: #41d9f8;
  --gold: linear-gradient(135deg, #41d9f8 0%, #4ca9ff 50%, #484dd2 100%);
  --gold-shadow: 0 10px 22px rgba(76, 169, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --dock: radial-gradient(120% 90% at 100% 0%, rgba(65, 217, 248, 0.28), transparent 55%),
    linear-gradient(165deg, #484dd2 0%, #003a7d 58%, #02102b 100%);
  --dock-lashon: radial-gradient(120% 90% at 0% 0%, rgba(185, 168, 255, 0.35), transparent 55%),
    linear-gradient(165deg, #484dd2 0%, #003a7d 58%, #02102b 100%);
  --dock-shadow: 0 10px 24px rgba(2, 16, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --wash: radial-gradient(90% 70% at 100% 0%, rgba(65, 217, 248, 0.1), transparent 50%),
    radial-gradient(80% 60% at 0% 8%, rgba(185, 168, 255, 0.12), transparent 48%),
    linear-gradient(180deg, #f9fcff 0%, #eef6fb 55%, #e8f2f8 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--wash);
  color: var(--ink);
  direction: rtl;
  padding-bottom: 24px;
}
button, input, select { font-family: inherit; }
button { cursor: pointer; }
button:not(.zoom-enter) {
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

body:not(.is-lab) .lab-strip,
body:not(.is-lab) .device-preview-stage {
  display: none !important;
}
body:not(.is-lab) {
  --lab-strip-h: 0px;
}

.lab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  background: linear-gradient(90deg, #ffe566, #fff3a8);
  color: #1a1200;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 12px;
  position: relative;
  z-index: 50;
  border-bottom: 2px solid #c9a400;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.lab-badge {
  background: #02102b;
  color: #ffe566;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900;
}
.lab-url {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.65);
  padding: 3px 8px;
  border-radius: 8px;
}
.lab-note { color: #4a3b00; font-weight: 700; }
.lab-warn {
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: #ff4d6a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.theme-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 12px;
}
.theme-btn.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.card-style-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-style-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.card-style-btn.is-on {
  background: #484dd2;
  border-color: #484dd2;
  color: #fff;
}
.device-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.device-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.device-btn.is-on {
  background: #003a7d;
  border-color: #003a7d;
  color: #fff;
}
.device-btn-strong {
  background: #02102b;
  border-color: #02102b;
  color: #ffe566;
  font-weight: 900;
}
.room-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--mute);
  font-weight: 700;
  line-height: 1.35;
}
.device-preview-stage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    linear-gradient(180deg, #d9e4f0 0%, #eef2f7 40%, #dfe7f0 100%);
  padding: 0 0 16px;
}
.device-preview-stage.hidden {
  display: none !important;
}
body.is-device-preview {
  overflow: hidden;
}
body.is-device-preview > .lab-strip {
  position: relative;
  z-index: 95;
}
body.is-device-preview > :not(.lab-strip):not(.device-preview-stage):not(script) {
  display: none !important;
}
body.is-device-preview .device-preview-stage {
  position: fixed;
  top: var(--lab-strip-h, 52px);
  inset-inline: 0;
  bottom: 0;
  height: auto;
}
.device-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 10px 14px;
  color: #02102b;
  font-weight: 800;
}
.device-preview-bar b { font-size: 14px; }
.device-preview-bar span {
  font-size: 12px;
  color: #355a7a;
  font-weight: 700;
}
.device-preview-hint {
  color: #7a5200;
  font-weight: 800;
}
.device-preview-frame-wrap {
  justify-self: center;
  width: min(100% - 24px, var(--device-w, 390px));
  height: calc(100% - 8px);
  max-height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #02102b;
  box-shadow:
    0 18px 40px rgba(2, 16, 43, 0.28),
    0 0 0 8px rgba(255, 255, 255, 0.35);
  background: #fff;
  transition: width 0.2s ease;
}
.device-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
body.is-embed .lab-strip,
body.is-embed .device-preview-stage,
body.is-embed .staff-lock {
  display: none !important;
}
body.is-embed {
  background: #fff;
}
body.is-embed.is-learn {
  overflow: hidden;
  height: 100dvh;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
body.is-embed.is-learn .learn-page {
  height: calc(100dvh - 58px - 70px - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 58px - 70px - env(safe-area-inset-bottom));
  padding: 6px 0 8px;
}
body.is-embed.is-learn .learn-wrap {
  padding-inline: 8px;
}
body.is-embed.is-learn .learn-main {
  padding: 10px;
}
.lab-menu {
  position: relative;
}
.lab-menu summary {
  list-style: none;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 900;
}
.lab-menu summary::-webkit-details-marker { display: none; }
.lab-menu nav {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  min-width: 240px;
  background: var(--dock);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--dock-shadow);
  z-index: 80;
}
.lab-menu nav button {
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: #cfefff;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}
.lab-menu nav button:hover {
  background: var(--gold);
  color: var(--ink);
}
.lab-menu[open] summary { background: #02102b; }

.mail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  text-align: right;
  box-shadow: 0 10px 30px rgba(0, 58, 125, 0.08);
}
.mail-from { margin: 0 0 8px; color: var(--mute); font-size: 12px; font-weight: 700; }
.mail h2 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.mail p { color: var(--mute); font-weight: 600; line-height: 1.45; }
.mail-kids {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.mail-kid {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: right;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.mail-kid:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.mail-kid b { font-size: 16px; }
.mail-kid small { color: #003a7d; font-weight: 700; }

.page.teen {
  background:
    radial-gradient(1200px 420px at 80% -10%, rgba(65, 217, 248, 0.22), transparent 55%),
    radial-gradient(800px 380px at 0% 100%, rgba(91, 46, 176, 0.28), transparent 50%),
    #071018;
  color: #f4f7fb;
  min-height: 100vh;
}
.teen-stack { padding-bottom: 40px; max-width: 560px; }
.teen .kicker { color: #41d9f8; letter-spacing: 0.08em; }
.teen h1 { color: #fff; font-size: clamp(32px, 8vw, 48px); }
.teen .lead, .teen .hint { color: #9fb0c8; }
.teen-label {
  margin: 18px 0 10px;
  font-weight: 800;
  color: #fff;
}
.teen label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}
.teen input[name="nick"] {
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #2a3d5c;
  border-radius: 14px;
  background: #101b2c;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.teen .text-link { color: #41d9f8; }
.teen .btn-pay {
  width: 100%;
  margin-top: 22px;
  background: var(--gold);
  color: #02102b;
  box-shadow: var(--gold-shadow);
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.avatar {
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  color: #fff;
  padding: 0;
  overflow: hidden;
  background: #101b2c;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-mark {
  width: 56%;
  height: 56%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.account-face {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  padding: 0;
  border: 2px solid transparent;
  overflow: hidden;
  background: #101b2c;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.account-face img,
.learn-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-face:hover,
.learn-face:hover {
  border-color: var(--yellow);
}
.avatar:hover { transform: translateY(-2px) scale(1.04); }
.avatar.is-on { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(65, 217, 248, 0.35); transform: scale(1.06); }
.pin-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  direction: ltr;
}
.pin-row input {
  width: 52px;
  height: 56px;
  min-height: 0;
  flex: 0 0 52px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  border: 2px solid #2a3d5c;
  border-radius: 14px;
  background: #101b2c;
  color: #fff;
  caret-color: #41d9f8;
}
.pin-row input:not(:placeholder-shown) {
  border-color: #4ca9ff;
  background: #16324f;
}
.pin-row input:focus {
  outline: 0;
  border-color: #41d9f8;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.28);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
}
.pin-pad button {
  height: 52px;
  border: 1px solid #2a3d5c;
  border-radius: 14px;
  background: #152238;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.pin-pad button:hover,
.pin-pad button:focus-visible {
  background: var(--gold);
  border-color: transparent;
  color: var(--ink);
  outline: 0;
}
.pin-pad [data-pin-key="del"] {
  font-size: 13px;
  color: #41d9f8;
}
.pin-pad-skip { visibility: hidden; }
.account-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
body.is-teen {
  background: #071018;
  padding-bottom: 0;
}
body.is-teen .sticky-bar { display: none; }
body.is-teen .top {
  background: rgba(7, 16, 24, 0.88);
  border-bottom-color: #1e2d45;
}
body.is-teen .brand { color: #fff; }
body.is-teen .top-nav button {
  background: #101b2c;
  border-color: #2a3d5c;
  color: #dbeafe;
}
body.is-teen .top-nav .go-live {
  background: #00c4dc;
  border-color: #00c4dc;
  color: #fff;
}
@media (max-width: 600px) {
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }
}

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px var(--pad);
  background: rgba(247, 251, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.kid-hello {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 7px 18px 7px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #04122c 0%, #003a7d 52%, #3a1f8c 100%);
  box-shadow:
    0 6px 16px rgba(0, 58, 125, 0.28),
    0 0 0 1px rgba(65, 217, 248, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.kid-hello:not([hidden]) { display: flex; }
.kid-hello-rail {
  flex: 0 0 auto;
  align-self: center;
}
.kid-hello-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.kid-hello-smile-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.kid-hello-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: start;
}
.kid-hello-copy b {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}
.kid-hello-copy small {
  color: #41d9f8;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.brand {
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 900;
  font-size: 18px;
  padding: 0;
}
.brand-logo {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(65, 217, 248, 0.35)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.28));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.brand-logo img {
  display: block;
  height: 64px;
  width: auto;
  max-width: min(240px, 70vw);
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.brand-logo:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(65, 217, 248, 0.5)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.4)) brightness(1.06);
}
.brand-logo:focus-visible {
  outline: 3px solid #41d9f8;
  outline-offset: 3px;
}
.learn-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 6px 16px rgba(2, 16, 43, 0.18);
  line-height: 0;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.learn-logo img {
  height: auto;
  width: auto;
  max-width: min(280px, 34vw);
  object-fit: contain;
  object-position: center;
}
.learn-logo img.learn-logo-wide {
  display: block;
  width: min(150px, 18vw);
  max-width: 150px;
  height: auto;
  object-fit: contain;
}
.learn-logo-round { display: none; }
.learn-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}
.learn-action-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.learn-zoom-slot,
.learn-rec-slot {
  display: block;
  width: 100%;
  line-height: 0;
}
.learn-zoom-slot:has(.zoom-live-btn[hidden]) {
  display: none;
}
.learn-rec-slot {
  line-height: normal;
}
.learn-rail .zoom-live-btn {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(2, 16, 43, 0.18));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.learn-rail .zoom-live-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 800;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
}
.learn-rail .zoom-live-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 14px rgba(2, 16, 43, 0.24)) brightness(1.04);
}
.learn-rail .zoom-live-btn:focus-visible {
  outline: 3px solid #41d9f8;
  outline-offset: 3px;
}
.learn-action-row .dated-rec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 52px;
  max-height: 56px;
  height: auto;
  box-sizing: border-box;
}
.wa-class-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 148px;
  min-height: 38px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(18, 140, 126, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}
.wa-class-btn[hidden] {
  display: none !important;
}
.wa-class-btn-ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.wa-class-btn-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}
.wa-class-btn-copy {
  min-width: 0;
}
.wa-class-btn:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  filter: brightness(1.04);
}
.wa-class-btn:focus-visible {
  outline: 3px solid #41d9f8;
  outline-offset: 3px;
}
.learn-rail .learn-side-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.top-nav .site-tour-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: #fff;
  color: #003a7d;
  box-shadow: inset 0 0 0 2px #003a7d;
}
.top-nav .site-tour-open:hover,
.top-nav .site-tour-open:focus-visible {
  background: #e8f7ff;
  color: #003a7d;
}
.site-tour-q {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #003a7d;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.top-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 100%; }
.top-nav button {
  border: 0;
  background: var(--sky);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(0, 58, 125, 0.08);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.top-nav button:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-1px);
}
.top-nav .site-menu-open {
  min-width: 118px;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 8px 18px rgba(0, 58, 125, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.top-nav .site-menu-open:hover,
.top-nav .site-menu-open:focus-visible {
  background: #00285a;
  color: #fff;
  transform: translateY(-1px);
}
.top-nav .site-menu-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.top-nav .find-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  flex: 0 0 38px;
}
.top-nav .find-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}
.top-nav .find-btn:hover,
.top-nav .find-btn:focus-visible {
  background: var(--navy);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(65, 217, 248, 0.2);
}
.top-nav .go-live {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}

.page { padding: 0 0 36px; }
.wrap { width: min(var(--max), calc(100% - 28px)); margin: 0 auto; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #8fe0ff 0%, #4fc3f7 42%, #2ea8e8 100%);
  color: #fff;
}
.hero-math { background: linear-gradient(180deg, #41d9f8 0%, #4ca9ff 50%, #003a7d 100%); }
.hero-lashon { background: linear-gradient(180deg, #b9a8ff 0%, #484dd2 50%, #02102b 100%); }
.hero-home { background: linear-gradient(135deg, #41d9f8 0%, #4ca9ff 42%, #484dd2 100%); }

/* השוואת רקעים: א רך / ב חזק */
body.theme-a {
  --wash: transparent;
  background: url("../assets/theme-a.jpg") center top / cover no-repeat fixed;
}
body.theme-b {
  --wash: transparent;
  background: url("../assets/theme-b.jpg") center top / cover no-repeat fixed;
}
body.theme-a .hero,
body.theme-a .hero-home,
body.theme-a .hero-math,
body.theme-a .hero-lashon {
  background: url("../assets/theme-a.jpg") center / cover no-repeat;
  color: var(--ink);
}
body.theme-b .hero,
body.theme-b .hero-home,
body.theme-b .hero-math,
body.theme-b .hero-lashon {
  background: url("../assets/theme-b.jpg") center / cover no-repeat;
  color: var(--ink);
}
body.theme-a .hero-copy,
body.theme-b .hero-copy {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
}
body.theme-a .hero-copy .kicker,
body.theme-a .hero-copy .lead,
body.theme-b .hero-copy .kicker,
body.theme-b .hero-copy .lead { color: var(--ink); }
body.theme-a .hero-copy h1,
body.theme-b .hero-copy h1 { color: var(--ink); }
body.theme-a .hero-accent,
body.theme-b .hero-accent { color: #484dd2; }
body.theme-a .lab-strip,
body.theme-b .lab-strip {
  background: linear-gradient(90deg, #ffe566, #fff3a8);
  color: #1a1200;
  backdrop-filter: none;
}

.hero-inner {
  width: min(var(--max), calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 28px;
  display: grid;
  gap: 18px;
  align-items: center;
}
.hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 52px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.hero-accent { color: var(--yellow); }
.hero-lashon .hero-copy .lead,
.hero-lashon .hero-copy .kicker { color: #f9fcff; }
.hero-lashon .hero-accent { color: #41d9f8; }
.includes {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.include {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
}
.include b { display: block; color: var(--ink); font-size: 17px; }
.include small { color: var(--mute); font-weight: 600; }
.door-do {
  display: flex;
  align-items: center;
  gap: 8px;
}
.door-do img { width: 28px; height: 28px; }
.hero-copy .kicker {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--ink);
  font-size: 14px;
}
.hero-copy .lead {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.45;
  color: #0f2a4a;
  font-weight: 600;
}
.hero-photo {
  margin: 0 auto;
  width: min(280px, 70vw);
  filter: drop-shadow(0 18px 24px rgba(16, 32, 71, 0.25));
}
.hero-photo img { width: 100%; }

.doors {
  display: grid;
  gap: 10px;
}
.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  padding: 16px 18px;
  border: 0;
  border-radius: 20px;
  text-align: right;
}
.door-who { font-size: 13px; font-weight: 700; opacity: 0.75; }
.door-do { font-size: 20px; font-weight: 900; }
.door-student {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.door-parent {
  background: var(--dock);
  color: #fff;
  box-shadow: var(--dock-shadow);
}
.door-subject {
  background: var(--dock-lashon);
  color: #fff;
  box-shadow: var(--dock-shadow);
}
.door:hover { transform: translateY(-2px); }

.band { padding: 28px 0 8px; }
.band h2 {
  margin: 0 0 14px;
  font-size: 26px;
  color: var(--ink);
}
.band p.intro {
  margin: -4px 0 16px;
  color: var(--mute);
  font-weight: 600;
  line-height: 1.45;
}

.price-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.price-subject-block {
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
}
.price-subject-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.price-subject-label {
  margin: 0;
  font-weight: 900;
  font-size: clamp(18px, 4vw, 22px);
  color: var(--navy);
  line-height: 1.2;
}
.btn-register-top,
.btn.btn-pay.btn-register-top {
  margin: 0;
  width: auto;
  min-height: 52px;
  min-width: 140px;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #7dffa3 0%, #22c55e 42%, #15803d 100%) !important;
  color: #052e16 !important;
  border: 2px solid #14532d !important;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.28),
    0 14px 28px rgba(21, 128, 61, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.btn-register-top:hover,
.btn.btn-pay.btn-register-top:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.36),
    0 18px 32px rgba(21, 128, 61, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
.btn-register,
.btn.btn-pay.btn-register {
  background: linear-gradient(145deg, #7dffa3 0%, #22c55e 42%, #15803d 100%) !important;
  color: #052e16 !important;
  border: 2px solid #14532d !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.24),
    0 12px 24px rgba(21, 128, 61, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.subject-switch {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}
.subject-switch-or {
  display: grid;
  place-items: center;
  align-self: center;
  min-width: 68px;
  min-height: 68px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #003a7d 0%, #484dd2 100%);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.04em;
  box-shadow:
    0 0 0 4px rgba(65, 217, 248, 0.6),
    0 10px 18px rgba(0, 58, 125, 0.3);
}
.subject-switch button {
  min-height: 76px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 2px solid #003a7d;
  background: #fff;
  font-weight: 900;
  font-size: clamp(20px, 4.5vw, 26px);
  color: #003a7d;
  box-shadow: 0 8px 18px rgba(0, 58, 125, 0.1);
}
.subject-switch button small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #355a7a;
  opacity: 1;
}
.subject-switch button:hover:not(.is-on) {
  color: #003a7d;
  background: #e8f7ff;
  transform: translateY(-1px);
}
.subject-switch button:active { transform: translateY(1px); }
.subject-switch button.is-on {
  background: linear-gradient(145deg, #003a7d 0%, #02102b 100%);
  color: #fff;
  border-color: #41d9f8;
  box-shadow:
    0 0 0 3px rgba(65, 217, 248, 0.45),
    0 12px 24px rgba(2, 16, 43, 0.28);
}
.subject-switch button.is-on small {
  color: #cfefff;
  opacity: 1;
}

@media (max-width: 559px) {
  .price-subject-head {
    flex-wrap: wrap;
  }
  .price-subject-head .btn-register-top {
    width: 100%;
  }
  .subject-switch-or {
    min-width: 58px;
    min-height: 58px;
    font-size: 30px;
  }
}

.picker-layout {
  display: grid;
  gap: 18px;
  grid-template-areas:
    "list"
    "detail";
}
.picker-layout .pick-detail {
  grid-area: detail;
  min-width: 0;
}
.picker-layout .pick-list { grid-area: list; }
.pick-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid rgba(170, 190, 255, 0.65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.88) 55%, rgba(232, 240, 255, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 18px 40px rgba(55, 80, 180, 0.14),
    0 0 40px rgba(90, 140, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: right;
  padding: 14px 16px;
  border: 1.5px solid rgba(150, 170, 230, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.9));
  color: #0f2f6e;
  box-shadow:
    0 8px 18px rgba(50, 80, 170, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  cursor: pointer;
}
.pick-row:hover {
  background: linear-gradient(180deg, #ffffff, #eef3ff);
  transform: translateY(-1px);
  border-color: rgba(90, 120, 230, 0.55);
}
.pick-row:active { transform: none; }
.pick-row.is-on {
  background: linear-gradient(180deg, rgba(238, 243, 255, 0.98), rgba(228, 234, 255, 0.94));
  color: #0f2f6e;
  border-color: #6a4dff;
  box-shadow:
    0 0 0 3px rgba(106, 77, 255, 0.18),
    0 12px 28px rgba(70, 80, 230, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.pick-row b { display: block; font-size: 19px; font-weight: 900; color: #003a7d; line-height: 1.3; }
.pick-copy { min-width: 0; }
.pick-row small,
.pick-row .pick-when {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  height: 30px;
  width: 190px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  background: linear-gradient(145deg, #003a7d 0%, #3558ff 100%);
  box-shadow: 0 4px 10px rgba(0, 58, 125, 0.22);
}
.pick-row.is-on small,
.pick-row.is-on .pick-when { color: #fff; }
.pick-side { display: grid; justify-items: start; gap: 6px; }
.pick-row .pick-price { display: none; }
.pick-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: #3558ff;
  border: 1.5px solid rgba(77, 124, 255, 0.55);
  border-radius: 999px;
  padding: 0 12px;
  height: 30px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}
.pick-row.is-on .pick-go {
  background: linear-gradient(135deg, #3d6bff, #7a3dff);
  color: #fff;
  border-color: transparent;
}
.pick-empty {
  margin: 0;
  padding: 22px 16px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--mute);
  font-weight: 700;
  text-align: center;
}
.course-grid {
  display: grid;
  gap: 14px;
}
.course-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 24px rgba(0, 58, 125, 0.05);
}

/* כרטיס חדש · זכוכית / גרדיאנט כמו בעיצוב */
.course-card-glass {
  --g-navy: #0f2f6e;
  --g-blue: #2f6dff;
  --g-violet: #7a3dff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: 22px 18px 16px;
  border: 1px solid rgba(170, 190, 255, 0.65);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.88) 55%, rgba(232, 240, 255, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 22px 50px rgba(55, 80, 180, 0.18),
    0 0 60px rgba(90, 140, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.course-card-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 100% -5%, rgba(130, 90, 255, 0.28), transparent 58%),
    radial-gradient(80% 50% at -5% 105%, rgba(40, 170, 255, 0.26), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.65), transparent 42%);
}
.course-card-glass > * { position: relative; z-index: 1; }
.glass-orb {
  position: absolute !important;
  z-index: 0 !important;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.glass-orb-a {
  width: 140px;
  height: 140px;
  top: -48px;
  left: -40px;
  background: radial-gradient(circle, rgba(70, 180, 255, 0.45), transparent 70%);
}
.glass-orb-b {
  width: 160px;
  height: 160px;
  right: -50px;
  bottom: 80px;
  background: radial-gradient(circle, rgba(140, 90, 255, 0.38), transparent 70%);
}
.glass-spark {
  position: absolute !important;
  z-index: 0 !important;
  color: rgba(90, 140, 255, 0.55);
  pointer-events: none;
  line-height: 0;
}
.glass-spark .g-spark { width: 14px; height: 14px; display: block; }
.glass-spark-1 { top: 18%; left: 8%; transform: rotate(18deg); opacity: 0.7; }
.glass-spark-2 { top: 42%; right: 7%; color: rgba(150, 100, 255, 0.5); }
.glass-spark-2 .g-spark { width: 11px; height: 11px; }
.glass-spark-3 { bottom: 28%; left: 14%; opacity: 0.45; }
.glass-spark-3 .g-spark { width: 9px; height: 9px; }
.glass-head {
  text-align: center;
  margin-bottom: 16px;
}
.course-card-glass h3 {
  margin: 0;
  font-family: "Heebo", var(--font);
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--g-navy);
  line-height: 1.15;
  text-wrap: balance;
}
.glass-sub {
  margin: 6px 0 14px;
  font-family: "Heebo", var(--font);
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 800;
  background: linear-gradient(90deg, #3558ff 0%, #6b3dff 45%, #9a35ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass-when {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.glass-when-line {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(100, 130, 220, 0.55), transparent);
  position: relative;
}
.glass-when-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b8cff, #7a4dff);
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.18);
  transform: translateY(-50%);
}
.glass-when-line:first-child::after { left: auto; right: 0; }
.glass-when-line:last-child::after { left: 0; right: auto; }
.glass-when-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(145deg, #003a7d 0%, #3558ff 55%, #6b3dff 100%);
  box-shadow:
    0 0 0 3px rgba(65, 217, 248, 0.45),
    0 10px 18px rgba(0, 58, 125, 0.28);
}
.glass-when-chip b {
  font-weight: 900;
  color: #fff;
}
.glass-when-chip .g-ico {
  width: 22px;
  height: 22px;
  color: #41d9f8;
  flex: 0 0 auto;
}
.glass-body {
  display: grid;
  gap: 14px;
  margin-bottom: 10px;
  align-items: stretch;
}
.glass-features {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}
.glass-price {
  margin: 0;
  padding: 14px 14px 10px;
  width: 100%;
  max-width: none;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94));
  border: 1px solid rgba(150, 170, 230, 0.45);
  box-shadow:
    0 10px 28px rgba(50, 80, 170, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.glass-price-main {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  line-height: 0.88;
}
.glass-ils {
  margin-top: 14px;
  font-family: "Heebo", var(--font);
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(180deg, #3d6bff, #7a3dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass-num {
  font-family: "Heebo", var(--font);
  font-size: clamp(48px, 8vw, 68px);
  font-weight: 900;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #2f6dff 0%, #5b4dff 40%, #8b2dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.glass-pays {
  margin: 4px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--g-navy);
}
.glass-price-rule {
  height: 1px;
  margin: 0 auto;
  max-width: 86%;
  background: linear-gradient(90deg, transparent, rgba(120, 145, 210, 0.45), transparent);
}
.glass-price-foot {
  padding: 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: #7a88b0;
}
.glass-was {
  margin: 8px 0 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: #8b95b3;
}
.glass-was-num {
  font-family: "Heebo", var(--font);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #6b7694;
  text-decoration: line-through;
  text-decoration-color: #e11d48;
  text-decoration-thickness: 3px;
}
.glass-was-label {
  font-size: 13px;
  font-weight: 800;
  color: #8b95b3;
}
.glass-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  min-width: 0;
  align-items: stretch;
}
.glass-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  min-width: 0;
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  color: #163a7a;
  direction: rtl;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 20px rgba(40, 70, 160, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.glass-badge-rec {
  background: linear-gradient(135deg, rgba(210, 245, 255, 0.95), rgba(175, 230, 255, 0.88));
  border: 1.5px solid rgba(70, 190, 230, 0.55);
  box-shadow:
    0 8px 22px rgba(40, 160, 220, 0.18),
    0 0 18px rgba(80, 200, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.glass-badge-zoom {
  background: linear-gradient(135deg, rgba(232, 222, 255, 0.95), rgba(210, 198, 255, 0.88));
  border: 1.5px solid rgba(140, 110, 230, 0.5);
  box-shadow:
    0 8px 22px rgba(110, 80, 210, 0.16),
    0 0 18px rgba(150, 110, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.glass-badge-orb {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow:
    0 4px 12px rgba(40, 70, 160, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.glass-badge-rec .glass-badge-orb {
  background: linear-gradient(145deg, #4ec8ff, #2f8fff);
}
.glass-badge-zoom .glass-badge-orb {
  background: linear-gradient(145deg, #9b6bff, #6a3dff);
}
.glass-badge-orb .g-ico {
  width: 16px;
  height: 16px;
  display: block;
}
.glass-badge-txt {
  flex: 1 1 auto;
  text-align: right;
}
.glass-badge-cal {
  flex: 0 0 auto;
  color: #4a6fd0;
  opacity: 0.85;
  line-height: 0;
}
.glass-badge-cal .g-ico-sm {
  width: 15px;
  height: 15px;
  display: block;
}
.glass-includes {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.glass-includes h4 {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Heebo", var(--font);
  font-size: 15px;
  font-weight: 900;
  color: var(--g-navy);
}
.glass-diamond {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #4d7cff, #7a45ff);
  transform: rotate(45deg);
  border-radius: 1.5px;
  box-shadow: 0 2px 6px rgba(80, 100, 220, 0.35);
}
.glass-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.glass-facts li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid rgba(150, 170, 230, 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--g-navy);
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.4;
  text-align: right;
}
.glass-facts li:last-child { border-bottom: 0; }
.glass-fact-ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #d7e4ff;
  border: 1.5px solid #7ea0f0;
  box-shadow: 0 2px 7px rgba(29, 78, 216, 0.2);
  color: #1d4ed8;
}
.glass-fact-ico .g-ico,
.glass-fact-ico .g-ico-tile {
  width: 16px;
  height: 16px;
  display: block;
}
.glass-fact-ico.is-wa {
  background: #25D366;
  border-color: #1ebe57;
  box-shadow: 0 3px 10px rgba(18, 140, 126, 0.38);
}
.glass-fact-ico.is-zoom {
  background: #2D8CFF;
  border-color: #1f7cf0;
  box-shadow: 0 3px 10px rgba(45, 140, 255, 0.42);
}
.glass-fact-ico.is-wa .g-ico-tile,
.glass-fact-ico.is-zoom .g-ico-tile {
  width: 16px;
  height: 16px;
}
.glass-tiles,
.glass-tiles-assets {
  display: none;
}
.glass-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
}
.course-card-glass .btn-topics-year,
.course-card-glass .glass-extra .zoom-dates-summary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 220px;
  width: auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px !important;
  border: 1.5px solid rgba(80, 110, 210, 0.4) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #163a7a !important;
  font-family: "Heebo", var(--font);
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  box-shadow:
    0 8px 18px rgba(50, 80, 170, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  cursor: pointer;
  list-style: none;
}
.course-card-glass .btn-topics-year:hover,
.course-card-glass .glass-extra .zoom-dates-summary:hover {
  filter: none;
  background: #eef3ff !important;
  border-color: #4a62d8 !important;
  color: #0f2f6e !important;
}
.course-card-glass .glass-extra,
.course-card-glass .glass-extra.zoom-dates-fold {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.course-card-glass .glass-extra[open],
.course-card-glass .glass-extra.zoom-dates-fold[open] {
  flex: 1 1 100%;
}
.course-card-glass .glass-extra.zoom-dates-fold[open] .zoom-dates-summary {
  background: #e8eeff !important;
  color: #0f2f6e !important;
  margin-bottom: 10px;
}
.course-card-glass .glass-extra .zoom-dates-summary::-webkit-details-marker { display: none; }
.course-card-glass .glass-extra .zoom-dates-summary::marker { content: ""; }
.glass-cta,
.glass-cta.btn-register {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 420px);
  margin: 8px auto 0;
  padding: 15px 18px;
  border: 0 !important;
  border-radius: 20px;
  cursor: pointer;
  font: inherit;
  font-family: "Heebo", var(--font);
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 900;
  color: #fff !important;
  background: linear-gradient(90deg, #2a78ff 0%, #4f55ff 42%, #7a35ff 78%, #9228ff 100%) !important;
  box-shadow:
    0 14px 32px rgba(70, 80, 230, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.glass-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}
.glass-cta:hover,
.glass-cta.btn-register:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 36px rgba(70, 80, 230, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.glass-cta-label {
  position: relative;
  z-index: 1;
}
.glass-cta-orb {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 40, 140, 0.28);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(20, 30, 100, 0.2);
  color: #fff;
}
.glass-cta-orb .g-ico {
  width: 16px;
  height: 16px;
  display: block;
}
.fine-print-btn {
  position: relative;
  display: block;
  width: min(100%, 340px);
  margin: 8px auto 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fine-print-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 18px rgba(140, 60, 220, 0.35));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.fine-print-btn:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 12px 22px rgba(80, 140, 255, 0.42)) brightness(1.04);
}
.fine-print-btn.is-ack::after {
  content: "✓";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a9b4a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(10, 80, 30, 0.28);
}
.course-card-classic .fine-print-btn {
  width: min(100%, 300px);
  margin: 12px auto 8px;
}
.fine-print-card,
.need-fine-print-card {
  width: min(520px, 100%);
  max-height: min(92vh, 820px);
  overflow: auto;
}
.fine-print-card h2,
.need-fine-print-card h2 {
  padding-left: 36px;
  color: #7a1010;
  font-weight: 800;
}
.fine-print-list {
  margin: 12px 0 16px;
  padding: 0 1.35em 0 0.2em;
  display: grid;
  gap: 12px;
  color: #02102b;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
}
.fine-print-list li::marker {
  color: #b31d1d;
  font-weight: 900;
}
.fine-print-list-emoji {
  list-style: none;
  padding: 0;
  gap: 14px;
}
.fine-print-list-emoji li {
  padding: 12px 14px;
  border: 1px solid #e3b4b4;
  border-radius: 12px;
  background: #fff7f7;
  font-size: 15.5px;
  line-height: 1.55;
}
.fine-print-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px;
  border: 2px solid #e3b4b4;
  border-radius: 12px;
  background: #fff7f7;
  color: #2a1212;
  font-weight: 800;
  cursor: pointer;
}
.fine-print-ack input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  accent-color: #9b1c1c;
}
.need-fine-print-card .btn-pay {
  width: 100%;
  margin-top: 14px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1.35px #02102b;
  paint-order: stroke fill;
  text-shadow:
    0 0 2px #02102b,
    0 1px 0 #02102b,
    0 2px 8px rgba(2, 16, 43, 0.45);
}
.need-fine-print-card .btn-pay:hover {
  color: #fff;
}
.glass-cta.glass-cta-img,
.glass-cta.glass-cta-img.btn-register {
  width: min(100%, 400px);
  margin: 4px auto 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.glass-cta.glass-cta-img::before { display: none; }
.glass-cta.glass-cta-img img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 28px rgba(70, 80, 230, 0.35));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.glass-cta.glass-cta-img:hover,
.glass-cta.glass-cta-img.btn-register:hover {
  transform: none;
  filter: none;
  box-shadow: none !important;
}
.glass-cta.glass-cta-img:hover img {
  transform: translateY(-2px);
  filter: drop-shadow(0 16px 32px rgba(70, 80, 230, 0.45)) brightness(1.04);
}
@media (max-width: 640px) {
  .glass-badge { min-height: 44px; font-size: 11px; padding: 6px 8px 6px 10px; }
  .glass-badge-orb { width: 28px; height: 28px; }
  .glass-badge-cal { display: none; }
  .glass-num { font-size: 52px; }
  .course-card-glass { padding: 16px 12px 12px; border-radius: 24px; }
  .glass-facts li { font-size: 13px; gap: 8px; }
  .glass-badges { grid-template-columns: 1fr; }
}

@container (min-width: 520px) {
  .course-card-glass { padding: 18px 22px 14px; }
  .glass-head { margin-bottom: 12px; }
  .glass-body {
    grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.22fr);
    align-items: stretch;
    gap: 18px;
    margin-bottom: 8px;
  }
  .glass-features {
    align-content: center;
  }
  .glass-when-chip {
    font-size: 24px;
    padding: 11px 20px;
  }
  .glass-cta.glass-cta-img,
  .glass-cta.glass-cta-img.btn-register {
    width: min(100%, 360px);
  }
  .fine-print-btn {
    width: min(100%, 320px);
  }
  .glass-includes h4 {
    font-size: 21px;
    margin-bottom: 12px;
  }
  .glass-facts {
    gap: 10px;
  }
  .glass-facts li {
    font-size: 16px;
    min-height: 48px;
    gap: 14px;
    grid-template-columns: 44px 1fr;
  }
  .glass-fact-ico {
    width: 44px;
    height: 44px;
  }
  .glass-fact-ico .g-ico,
  .glass-fact-ico .g-ico-tile {
    width: 28px;
    height: 28px;
  }
  .glass-fact-ico.is-wa .g-ico-tile,
  .glass-fact-ico.is-zoom .g-ico-tile {
    width: 28px;
    height: 28px;
  }
}
@container (min-width: 720px) {
  .course-card-glass { padding: 20px 24px 14px; }
  .glass-cta.glass-cta-img,
  .glass-cta.glass-cta-img.btn-register {
    width: min(100%, 380px);
  }
  .fine-print-btn {
    width: min(100%, 340px);
  }
  .glass-includes h4 {
    font-size: 22px;
  }
  .glass-facts li {
    font-size: 17px;
  }
  .glass-was-num {
    font-size: 24px;
  }
}
.course-card .band-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
}
.course-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #003a7d;
}
.meta-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.meta {
  background: linear-gradient(135deg, #e8f4ff, #f3fbff);
  border: 1px solid rgba(0, 58, 125, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
}
.meta b { display: block; font-size: 16px; color: #003a7d; font-weight: 900; }
.meta small { color: #1e4d7b; font-weight: 650; }
.price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #003a7d 0%, #1a6fd0 48%, #41d9f8 120%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 58, 125, 0.28);
}
.price-box .now {
  font-size: clamp(26px, 4.5vw, 34px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(2, 16, 43, 0.35);
}
.price-box .now-total {
  width: 100%;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
}
.price-box .was {
  color: #ffd0d0;
  text-decoration: line-through;
  text-decoration-color: #ff4d4d;
  text-decoration-thickness: 3px;
  font-weight: 900;
  font-size: 20px;
  background: rgba(155, 0, 0, 0.45);
  padding: 2px 8px;
  border-radius: 8px;
}
.price-box .was-note {
  width: 100%;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #ffe566;
}
.price-box small {
  width: 100%;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
}
.card-view-until {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #e53935;
  background: #fff0f0;
  color: #b71c1c;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  text-align: center;
}
.card-view-until-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #b71c1c;
}
.package-lead {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #003a7d;
  line-height: 1.45;
}
.btn-topics-year,
.btn-prorate {
  display: block;
  width: 100%;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border: 2px solid #484dd2;
  border-radius: 12px;
  background: #ebe6ff;
  color: #2a2f7a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.btn-prorate {
  margin-top: 10px;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 13px;
}
.btn-topics-year:hover,
.btn-prorate:hover { filter: brightness(1.05); }
.field-note {
  font-weight: 700;
  color: #003a7d;
  font-size: 0.92em;
}
.mail-warn-danger {
  margin-top: 14px;
  padding: 14px 16px;
  border: 3px solid #9b0000;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe5e5, #ffd0d0);
  box-shadow: 0 0 0 4px rgba(155, 0, 0, 0.12);
}
.mail-warn-danger b {
  display: block;
  color: #7a0000;
  font-size: 17px;
  margin-bottom: 10px;
}
.mail-warn-danger p {
  margin: 0 0 8px;
  color: #5c0000;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.45;
}
.mail-warn-danger p:last-child { margin-bottom: 0; }
.year-topics-list {
  margin: 0;
  padding: 0 1.2em;
  display: grid;
  gap: 8px;
  font-weight: 700;
  color: #02102b;
}
.video-preview-card {
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
}
.video-preview-frame {
  background: transparent;
  border-radius: 12px;
  overflow: visible;
  position: relative;
}
.video-preview-player {
  aspect-ratio: 16 / 9;
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
}
.video-preview-player iframe,
.video-preview-native {
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 320px;
  display: block;
  background: #000;
}
.video-preview-scrub {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 4px 0;
}
.video-preview-scrub input[type="range"] {
  width: 100%;
  accent-color: #003a7d;
  cursor: pointer;
}
.video-preview-scrub button {
  border: 1px solid #c5d4ea;
  background: #f4f8ff;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
  color: #003a7d;
}
.video-preview-hint { margin: 8px 0 0; font-size: 12px; }
.pricing-table input[type="number"] {
  width: 100%;
  max-width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.price-per-cell { font-weight: 900; color: #003a7d; }
.admin-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.season-note {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 2px solid #c1121f;
  border-radius: 12px;
  background: #fff4f4;
  color: #7a0000;
  font-weight: 800;
  line-height: 1.4;
}
.season-note-card {
  margin: 0 0 12px;
  font-size: 13px;
}
.season-note-admin {
  margin: 0 0 14px;
}
.notify-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  margin: 10px 0;
}
.notify-compose textarea { width: 100%; margin: 0; }
.notify-emoji-wrap { position: relative; }
.notify-emoji-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #c5d4ea;
  border-radius: 12px;
  background: #fff;
  font-size: 22px;
  cursor: pointer;
}
.notify-emoji-panel {
  position: absolute;
  top: 48px;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 220px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #c5d4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(2, 16, 43, 0.16);
}
.emoji-pick {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
}
.emoji-pick:hover { background: #eef5ff; }
.claim-wrap { max-width: 720px; }
.claim-alarm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 3px solid #9b0000;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff1f1, #ffe3e3);
  color: #5c0000;
}
.claim-alarm-icon { font-size: 28px; line-height: 1; }
.claim-alarm-icon svg {
  display: block;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 10px;
  background: #9b0000;
  color: #fff;
}
.claim-alarm-title {
  display: block;
  margin: 0 0 12px;
  color: #7a0000;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}
.claim-alarm-copy {
  display: grid;
  gap: 12px;
}
.claim-alarm-copy p {
  margin: 0;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.45;
}
.claim-alarm-copy strong {
  color: #7a0000;
  font-weight: 900;
}
.claim-alarm-list {
  margin: 0;
  padding: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 8px;
}
.claim-alarm-list li {
  font-weight: 700;
  line-height: 1.45;
}
.claim-form { margin-top: 8px; }
.claim-done { margin-top: 12px; color: #0a7a3e; font-weight: 800; }
.invite-mail { max-width: 720px; }
.invite-mail-cta { margin: 16px 0; }
.invite-link {
  display: inline-block;
  direction: ltr;
  font-weight: 700;
  color: #003a7d;
  word-break: break-all;
}
.mail-foot { margin-top: 18px; color: #667; font-size: 13px; }
.btn-preview {
  border: 0;
  background: #e8eef8;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 16px;
}
.admin-absence-alert {
  border: 3px solid #9b0000 !important;
  background: linear-gradient(180deg, #fff1f1, #ffe0e0) !important;
}
.admin-absence-alert h2 { color: #7a0000; }
.absence-jump {
  border-color: #c1121f !important;
  background: #fff !important;
}
.absence-jump b { color: #7a0000; display: block; }
.notify-send-trial {
  background: #ffd400 !important;
  color: #02102b !important;
}
.facts {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: var(--mute);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
}
.facts li { margin: 0 0 6px; padding-right: 2px; }
.facts li::before { content: "• "; color: var(--cyan); font-weight: 900; }
.more {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 10px;
}
.more > b {
  display: block;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 6px;
}
.zoom-dates-fold {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 10px;
}
.zoom-dates-summary {
  list-style: none;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #003a7d;
  background: #eef6ff;
  color: #02102b;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.zoom-dates-summary::-webkit-details-marker { display: none; }
.zoom-dates-fold[open] .zoom-dates-summary {
  background: #003a7d;
  color: #fff;
  margin-bottom: 12px;
}
.zoom-dates-title {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  color: var(--blue);
}
.dates {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.dates th, .dates td {
  text-align: right;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}
.cta {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  background: var(--gold);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  box-shadow: var(--gold-shadow);
}

.rec-row {
  overflow: hidden;
  padding: 4px 0 16px;
  mask-image: linear-gradient(to left, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.rec-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: rec-loop var(--rec-speed, 42s) linear infinite;
}
.rec-set {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
.rec-row:hover .rec-track,
.rec-row:focus-within .rec-track {
  --rec-speed: 110s;
}
@keyframes rec-loop {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--rec-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-row {
    overflow-x: auto;
    mask-image: none;
    -webkit-overflow-scrolling: touch;
  }
  .rec-track { animation: none; }
}
.rec-card {
  flex: 0 0 auto;
  width: min(88vw, 380px);
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.rec-card img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  display: block;
  background: #f4f4f5;
}

.prices-page {
  padding: 22px 0 36px;
}
.prices-page h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 42px);
  color: var(--ink);
}
.prices-page .pay {
  width: 100%;
  margin: 22px 0 0;
}

.bio-card {
  display: grid;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
}
.bio-card img {
  width: 140px;
  margin: 0 auto;
}
.bio-card p { margin: 0; color: var(--mute); font-weight: 600; line-height: 1.5; }

.stack, .pay { width: min(640px, calc(100% - 28px)); margin: 22px auto 0; }
.stack h1, .pay h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 42px);
  color: var(--ink);
}
.kicker { margin: 0 0 8px; color: var(--navy); font-weight: 800; }
.lead, .hint { color: var(--mute); font-weight: 600; line-height: 1.45; }
.hint { font-size: 13px; }

.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  margin: 0;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--dock);
  border: 0;
  font-weight: 800;
  color: #cfefff;
  box-shadow: var(--dock-shadow);
}
.chip:has(input:checked) {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }

.group-list { display: grid; gap: 10px; margin: 14px 0 18px; }
.group-card {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: right;
  padding: 14px 16px;
  border-radius: 18px;
  border: 0;
  background: var(--dock);
  color: #e8f6ff;
  box-shadow: var(--dock-shadow);
}
.group-card.is-on {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.group-card b { font-size: 18px; color: inherit; }
.group-card small { color: #9ec9ea; font-weight: 700; }
.group-card.is-on small { color: #003a7d; }
.group-card .ready { color: #047857; font-size: 12px; font-weight: 800; }
.group-card .wait { color: #b45309; font-size: 12px; font-weight: 800; }

.btn {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  font-size: 20px;
  font-weight: 900;
}
.btn-live { background: var(--live); color: #fff; }
.btn-pay {
  background: var(--gold);
  color: var(--ink);
  margin-top: 8px;
  box-shadow: var(--gold-shadow);
}
.btn-pay:hover { transform: translateY(-1px); filter: brightness(1.05); }
.text-link {
  display: block;
  margin: 16px auto 0;
  border: 0;
  background: none;
  color: var(--mute);
  font-weight: 800;
}

.zoom-box { margin-top: 16px; }
.zoom-fake {
  min-height: 220px;
  padding: 18px;
  border-radius: 22px;
  background: #02102b;
  color: #fff;
  display: grid;
  gap: 14px;
}
.zoom-fake-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fb7185;
}
.zoom-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zoom-tile {
  background: #1e293b;
  border-radius: 16px;
  min-height: 110px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.zoom-tile.teacher { background: #1d4ed8; }

fieldset { border: 0; margin: 0 0 18px; padding: 0; }
legend, .pay label { display: block; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
.pay-card {
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 24px;
  padding: 18px 16px 16px;
  box-shadow: 0 16px 40px rgba(0, 58, 125, 0.12);
}
.pay-card h2 {
  margin: 8px 0 12px;
  font-size: 26px;
  color: var(--ink);
}
.pay-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--ink);
}
.pay-chosen {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--gold);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1.05px #02102b;
  paint-order: stroke fill;
  text-shadow:
    0 0 2px #02102b,
    0 1px 0 #02102b,
    0 2px 6px rgba(2, 16, 43, 0.4);
}
.pay-card .btn-pay {
  color: #fff;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1.35px #02102b;
  paint-order: stroke fill;
  text-shadow:
    0 0 2px #02102b,
    0 1px 0 #02102b,
    0 2px 8px rgba(2, 16, 43, 0.45);
}
.pay-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pay-progress span {
  display: grid;
  gap: 3px;
  text-align: center;
  padding: 12px 10px;
  border-radius: 14px;
  background: #eef7ff;
  color: #003a7d;
  border: 2px solid #7ec8e8;
  font-weight: 800;
  line-height: 1.2;
}
.pay-progress span b {
  font-size: clamp(14px, 3.4vw, 16px);
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: normal;
}
.pay-progress span small {
  display: block;
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 800;
  line-height: 1.35;
  color: #003a7d;
}
.pay-progress span.is-on {
  background: #ffd400;
  border-color: #003a7d;
  box-shadow: 0 4px 0 #003a7d;
}
.pay-progress span.is-on b,
.pay-progress span.is-on small {
  color: #003a7d;
}
.pay-progress span.is-done {
  background: #dff7fc;
  border-color: #41d9f8;
}
.pay-progress span.is-done b,
.pay-progress span.is-done small {
  color: #003a7d;
}
.pay-next-student {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  white-space: normal;
  line-height: 1.4;
  text-align: center;
}
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pay-card .field-line {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.pay-card .field-label {
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.pay-card .field-control {
  position: relative;
  display: grid;
}
.pay-card .field-control input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  margin-top: 0;
  padding-block: 12px;
  padding-inline-start: 52px;
  padding-inline-end: 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-weight: 600;
}
.pay-card .field-control input:focus {
  outline: 3px solid rgba(65, 217, 248, 0.45);
  border-color: #003a7d;
}
.pay-grid .field-line {
  margin-bottom: 0;
}
.pay input[type="text"],
.pay input[type="email"],
.pay input[type="tel"],
.pay input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.pay input:focus {
  outline: 0;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(65, 217, 248, 0.2);
}
.pay .field-control input:not([type="radio"]):not([type="checkbox"]) {
  margin-top: 0;
  padding-block: 12px;
  padding-inline-start: 52px;
  padding-inline-end: 14px;
}
.email-echo {
  margin: 6px 0 14px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--sky);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
}
.email-echo b { font-weight: 900; }
.same-mail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: #e8f6ff;
  font-weight: 800;
  color: var(--ink);
}
.pay-note {
  margin: 8px 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f7fb;
  color: var(--mute);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}
.pay-nav {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 8px;
  margin-top: 8px;
}
.btn-back {
  background: var(--dock);
  color: #cfefff;
  box-shadow: var(--dock-shadow);
}
.btn-back:hover { color: #fff; }
.pay input[readonly] {
  background: #eef6ff;
  color: var(--mute);
}
.price-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--gold);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.price-card small {
  display: block;
  margin-top: 6px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 600;
}
.need-terms-stage {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 18px 12px;
  background: rgba(16, 32, 71, 0.55);
}
.need-terms-card {
  width: min(640px, 100%);
  max-height: min(92vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid #02102b;
  border-radius: 18px;
}
.need-terms-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #41d9f8 0%, #484dd2 100%);
  color: #fff;
}
.need-terms-head h2 {
  margin: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.need-terms-lead {
  margin: 0;
  padding: 12px 14px 0;
  flex: 0 0 auto;
  color: #003a7d;
  font-weight: 800;
  line-height: 1.4;
}
.need-terms-x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #02102b;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 36px;
}
.need-terms-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  direction: ltr;
  scrollbar-gutter: stable;
  scrollbar-color: #484dd2 rgba(65, 217, 248, 0.28);
}
.need-terms-scroll::-webkit-scrollbar {
  width: 22px;
}
.need-terms-scroll::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(65, 217, 248, 0.2), rgba(185, 168, 255, 0.28));
  border-radius: 999px;
  margin: 6px 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
}
.need-terms-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #41d9f8 0%, #4ca9ff 45%, #484dd2 100%);
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  min-height: 48px;
}
.need-terms-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6ae3ff 0%, #6bb6ff 45%, #5a5fe0 100%);
}
.need-terms-scroll::-webkit-scrollbar-button:single-button {
  display: block;
  height: 28px;
  width: 22px;
  background-color: #484dd2;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.need-terms-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='white' d='M7 3.5 11.5 9h-9z'/%3E%3C/svg%3E");
}
.need-terms-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='white' d='M7 10.5 2.5 5h-9z'/%3E%3C/svg%3E");
}
.need-terms-scroll::-webkit-scrollbar-button:single-button:hover {
  background-color: #003a7d;
}
.need-terms-list {
  display: grid;
  gap: 8px;
  padding: 12px 10px 4px;
  direction: rtl;
}
.need-terms-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 12px 12px 10px;
  border: 1px solid #d7dee7;
  border-radius: 12px;
  background: #fff;
  color: #1c2430;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.45;
}
.need-terms-row input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  accent-color: #003a7d;
}
.need-terms-row b { font-weight: 800; }
.need-terms-link {
  margin: 4px 16px 8px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
}
.need-terms-link a { color: #003a7d; }
.need-terms-go {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 14px;
  flex: 0 0 auto;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: #d6e6f8;
  color: #003a7d;
  font-weight: 800;
  font-size: 16px;
}
.need-terms-go:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}
.need-terms-go:not(:disabled) {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}

.checkout-page {
  max-width: 720px;
  padding-bottom: 56px;
}
.checkout-card {
  margin: 18px 0 22px;
  padding: 22px 24px;
  border: 2px solid rgba(2, 16, 43, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.85), rgba(255, 255, 255, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(47, 168, 212, 0.12), transparent 42%);
}
.checkout-course {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--ink);
  font-size: 18px;
}
.checkout-price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 0 0 18px;
}
.checkout-price b {
  font-size: clamp(32px, 7vw, 44px);
  color: var(--ink);
  letter-spacing: -0.03em;
}
.checkout-price span {
  color: #41557a;
  font-weight: 650;
}
.checkout-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.checkout-facts li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid rgba(2, 16, 43, 0.08);
}
.checkout-facts span {
  color: #61708c;
  font-size: 14px;
  font-weight: 650;
}
.checkout-facts b {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.checkout-page .text-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: #003a7d;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.learn-page { padding: 18px 0 48px; }
.learn-wrap { position: relative; }
.learn-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.learn-top {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  min-height: 0;
}
.learn-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 8px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0 0 4px;
}
.learn-head-actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  z-index: 2;
}
.learn-stage-stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.learn-stage-brand {
  display: none;
}
.learn-head .learn-cal-btn,
.learn-head .learn-year-cal-btn {
  position: static;
  width: auto;
  height: 40px;
  min-height: 36px;
  max-height: 42px;
  min-width: 0;
  max-width: 148px;
  padding: 6px 10px;
  gap: 5px;
}
.learn-head .learn-cal-btn:hover,
.learn-head .learn-year-cal-btn:hover {
  transform: translateY(-2px);
}
.learn-head .wa-class-btn {
  position: static;
  height: 40px;
  min-height: 36px;
  max-height: 42px;
  min-width: 0;
  max-width: 118px;
  padding: 6px 10px;
  font-size: 12px;
}
.learn-head-center {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  z-index: 1;
}

@media (max-width: 900px) {
  .learn-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }
  .learn-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 0;
    border-radius: 50%;
  }
  .learn-logo-wide { display: none; }
  .learn-logo-round { display: block; }
  .learn-logo img,
  .learn-logo-round {
    height: 44px;
    width: 44px;
    max-width: 44px;
    object-fit: cover;
    border-radius: 50%;
  }
  .learn-head-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .learn-head .learn-cal-btn,
  .learn-head .learn-year-cal-btn {
    height: 36px;
    min-height: 0;
    max-height: 36px;
    min-width: 0;
    max-width: 132px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .learn-head .wa-class-btn {
    height: 36px;
    min-height: 0;
    max-height: 36px;
    min-width: 0;
    max-width: 96px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .learn-head-center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-items: start;
  }
}
.learn-head-center .learn-logo {
  margin: 0;
}
.learn-head-center .learn-logo img {
  height: clamp(58px, 8vw, 78px);
  max-width: min(200px, 46vw);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(2, 16, 43, 0.28));
}
.learn-head-center .learn-banner {
  width: min(640px, 86%);
  filter: none;
}
.learn-head-center .learn-banner:hover {
  transform: translateY(-1px);
  filter: none;
}
.learn-head-center .learn-banner img {
  height: auto;
  width: 100%;
  max-width: 100%;
  max-height: 128px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 8px 18px rgba(2, 16, 43, 0.16));
}
.learn-top-copy {
  text-align: center;
  width: 100%;
  display: grid;
  gap: 1px;
  justify-items: center;
}
.learn-top-copy .kicker {
  display: none;
}
.learn-top-copy h1 {
  margin: 0;
  font-family: "Heebo", var(--font);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #003a7d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 10px rgba(2, 16, 43, 0.16);
}
.learn-stage-chrome {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 68px;
  flex: 0 0 auto;
}
.learn-stage-chrome .learn-cal-btn,
.learn-stage-chrome .learn-year-cal-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(230px, 48%);
  z-index: 2;
}
.learn-stage-chrome .learn-cal-btn,
.learn-stage-chrome .learn-year-cal-btn:hover {
  transform: translateY(calc(-50% - 2px)) scale(1.03);
}
.learn-stage-chrome .learn-logo {
  position: relative;
  z-index: 1;
  margin: 0;
}
.learn-stage-chrome .learn-logo img {
  height: clamp(58px, 8vw, 78px);
  max-width: min(200px, 46vw);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(2, 16, 43, 0.28));
}
.learn-face {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid rgba(46, 196, 182, 0.45);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #3a2a8c, #1a1450);
  box-shadow: 0 8px 20px rgba(42, 31, 110, 0.22);
}
.learn-wrap h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 42px);
  color: var(--ink);
}
.learn-shell {
  display: grid;
  gap: 12px;
  margin-top: 0;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

/* עמוד שיעורים: מסך קבוע, רק רשימת הקורסים גוללת */
body.is-learn {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  padding-bottom: 0;
}
body.is-learn > .lab-strip,
body.is-learn > header.top {
  flex: 0 0 auto;
}
body.is-learn > main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.is-learn .learn-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 10px 0 12px;
  overflow: hidden;
  box-sizing: border-box;
}
body.is-learn .learn-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
body.is-learn .learn-shell {
  margin-top: 8px;
  height: 100%;
  min-height: 0;
}
body.is-learn .learn-side-panel,
body.is-learn .learn-stage-box,
body.is-learn .learn-stage {
  max-height: none;
  min-height: 0;
}
body.is-learn .learn-stage-box,
body.is-learn .learn-stage {
  height: 100%;
}
body.is-learn .learn-main {
  min-height: 0;
  height: 100%;
}
body.is-learn .learn-stage-box {
  flex: 1 1 auto;
}
@media (max-width: 900px) {
  body.is-learn {
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.is-learn .top {
    flex-wrap: nowrap;
    padding: 6px 10px;
  }
  body.is-learn .top-nav {
    flex-wrap: nowrap;
  }
  body.is-learn .site-tour-label {
    display: none;
  }
  body.is-learn .learn-page {
    height: auto;
    max-height: none;
    padding: 4px 0 6px;
  }
  body.is-learn .learn-wrap {
    padding-inline: 6px;
    height: 100%;
  }

  /* YouTube: כותרת → מסך למעלה → כפתורים קטנים → סרגל שיעורים מתחת */
  body.is-learn .learn-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(160px, auto) auto minmax(0, 1fr);
    grid-template-areas:
      "head"
      "stage"
      "actions"
      "list";
    gap: 6px;
    height: 100%;
    min-height: 0;
  }
  body.is-learn .learn-main,
  body.is-learn .learn-rail {
    display: contents;
  }
  body.is-learn .learn-head {
    grid-area: head;
    padding: 0 2px 2px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
  }
  body.is-learn .learn-action-row {
    grid-area: actions;
  }
  body.is-learn .learn-stage-stack {
    grid-area: stage;
    min-height: 0;
    flex: none;
  }
  body.is-learn .learn-stage-brand img {
    width: min(240px, 68%);
    max-height: 56px;
  }
  body.is-learn .learn-stage-box {
    min-height: 0;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: min(32vh, 240px);
    border-radius: 14px;
    overflow: hidden;
    background: #0b2748;
    box-shadow: 0 8px 22px rgba(2, 16, 43, 0.14);
  }
  body.is-learn .learn-stage-box .learn-stage {
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.is-learn .learn-side-panel {
    grid-area: list;
    min-height: 0;
    max-height: none;
    flex: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
  }
  body.is-learn .learn-side {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
    border-radius: 0 0 14px 14px;
  }

  /* זום פתוח: כפתורים מתקפלים, מסך בקוביה, רשימה למטה */
  body.is-learn.is-mobile-zoom .learn-shell {
    grid-template-rows: auto minmax(0, 40vh) minmax(0, 1fr);
    grid-template-areas:
      "head"
      "stage"
      "list";
  }
  body.is-learn.is-mobile-zoom .learn-action-row {
    display: none !important;
  }

  /* שיעור נבחר: מסך קצת יותר נמוך, סרגל נשאר מתחת */
  body.is-learn.is-mobile-watch .learn-shell {
    grid-template-rows: auto minmax(140px, auto) auto minmax(0, 1fr);
  }
  body.is-learn.is-mobile-watch .learn-stage-box {
    max-height: min(28vh, 220px);
  }

  body.is-learn .learn-main {
    order: unset;
    flex: unset;
    display: contents;
    padding: 0;
    min-height: 0;
  }
  body.is-learn .learn-rail {
    order: unset;
    flex: unset;
    display: contents;
    min-height: 0;
    max-height: none;
  }

  body.is-learn .learn-head-center .learn-logo img {
    height: 48px;
    max-width: 120px;
  }
  body.is-learn .learn-head-center .learn-banner {
    width: min(100%, 92vw);
  }
  body.is-learn .learn-head-center .learn-banner img {
    height: auto;
    max-height: 78px;
    max-width: 100%;
  }
  body.is-learn .learn-top-copy h1 {
    font-size: clamp(15px, 4.2vw, 20px);
    margin: 0;
    text-align: start;
  }
  body.is-learn .learn-top-copy .kicker {
    display: none;
  }
  body.is-learn .learn-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 0;
    border-radius: 50%;
  }
  body.is-learn .learn-logo-wide { display: none; }
  body.is-learn .learn-logo-round { display: block; }
  body.is-learn .learn-logo img {
    height: 44px;
    width: 44px;
    max-width: 44px;
    object-fit: cover;
    border-radius: 50%;
  }
  body.is-learn .learn-head-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  body.is-learn .learn-head .learn-cal-btn,
  body.is-learn .learn-head .learn-year-cal-btn {
    max-width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 0;
    max-height: 36px;
    padding: 5px 8px;
  }
  body.is-learn .learn-head .wa-class-btn {
    min-width: 0;
    max-width: 100%;
    height: 36px;
    min-height: 0;
    max-height: 36px;
    padding: 5px 8px;
    font-size: 12px;
    gap: 5px;
  }
  body.is-learn .learn-head-center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-items: start;
  }

  .learn-action-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    align-items: stretch;
  }
  body.is-learn .kid-hello-rail {
    flex: 1 1 100%;
    width: fit-content;
  }
  body.is-learn .learn-zoom-slot,
  body.is-learn .learn-rec-slot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
  }
  body.is-learn .learn-action-row .dated-rec-btn {
    height: auto;
    min-height: 56px;
    max-height: none;
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
    white-space: normal;
    overflow: hidden;
  }
  body.is-learn .learn-action-row .dated-rec-btn .dated-rec-copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
  }
  body.is-learn .learn-action-row .dated-rec-btn .dated-rec-ico {
    width: 20px;
    height: 20px;
  }
  body.is-learn .learn-action-row .dated-rec-btn .dated-rec-ico svg {
    width: 20px;
    height: 20px;
  }
  body.is-learn .learn-rail .zoom-live-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 52px;
    padding: 10px 16px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3fa8 0%, #2563eb 100%);
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(2, 16, 43, 0.16));
    transition: transform 0.16s ease, filter 0.16s ease;
  }
  body.is-learn .learn-rail .zoom-live-btn img {
    display: none;
  }
  body.is-learn .learn-rail .zoom-live-btn .zoom-live-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
  }
  body.is-learn .learn-rail .zoom-live-btn .zoom-live-ico svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  body.is-learn .learn-rail .zoom-live-btn .zoom-live-copy {
    display: block;
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
  }
  body.is-learn .learn-rail .zoom-live-btn:hover {
    transform: translateY(-1px) scale(1.01);
    filter: drop-shadow(0 4px 10px rgba(2, 16, 43, 0.22)) brightness(1.04);
  }

  /* מסך תצוגה כמו נגן YouTube */
  body.is-learn .learn-stage .stage-frame {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.is-learn .learn-stage .stage-bar {
    padding: 8px 10px;
    flex: 0 0 auto;
  }
  body.is-learn .learn-stage .stage-bar b {
    font-size: 13px;
  }
  body.is-learn .learn-stage .stage-body {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 100%;
  }
  body.is-learn .learn-stage .stage-body .zoom-live,
  body.is-learn .learn-stage .stage-body .watch-placeholder,
  body.is-learn .learn-stage .stage-body iframe,
  body.is-learn .learn-stage .stage-body video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }
  body.is-learn .learn-stage .stage-home {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 0;
  }
  body.is-learn .learn-stage .stage-home .zoom-enter {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  body.is-learn .learn-stage .stage-home .zoom-enter img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    background: #071a36;
  }
  body.is-learn .learn-stage .stage-hint {
    display: none;
  }

  body.is-embed.is-learn .learn-page {
    height: calc(100dvh - 58px - 70px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 58px - 70px - env(safe-area-inset-bottom));
  }
  body.is-embed.is-learn .learn-shell {
    gap: 4px;
  }
}

/* Short landscape screens keep controls reachable by hiding nonessential chrome. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body.is-learn .learn-head { display: none; }
  body.is-learn .learn-shell {
    grid-template-rows: minmax(112px, 42vh) auto minmax(0, 1fr);
    grid-template-areas: "stage" "actions" "list";
  }
  body.is-learn .learn-stage-box { max-height: 42vh; }
  body.is-learn .learn-action-row .dated-rec-btn,
  body.is-learn .learn-rail .zoom-live-btn { min-height: 42px; padding-block: 5px; }
  body.is-learn .learn-side-panel { min-height: 78px; }
  body.is-learn .learn-side-title,
  body.is-learn .learn-side-search { display: none; }
}

.learn-side-panel {
  min-height: 0;
  overflow: hidden;
}
.learn-side-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, #003a7d 0%, #484dd2 100%);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(0, 58, 125, 0.2);
}
.learn-side-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #003a7d;
  background: #41d9f8;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 3px 0 #02102b, inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: learn-side-bounce 1.15s ease-in-out infinite;
}
.learn-side-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 9px;
  background: linear-gradient(180deg, #dbe7ff 0%, #eef4ff 100%);
  border-inline: 2px solid rgba(185, 168, 255, 0.45);
  direction: rtl;
}
.learn-side-search-ico { flex: 0 0 auto; width: 22px; height: 22px; color: #003a7d; }
.learn-side-search-ico svg { display: block; width: 22px; height: 22px; }
.learn-side-search input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; border-radius: 999px;
  padding: 8px 12px; font: inherit; font-weight: 800; font-size: 14px;
  color: #003a7d; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 58, 125, 0.14);
}
.learn-side-search input::placeholder { color: #6b7aa8; font-weight: 700; }
.learn-side-search input:focus { outline: 2px solid #41d9f8; outline-offset: 1px; }
.tree-search-empty {
  margin: 8px 2px 4px; padding: 12px 10px; text-align: center; font-weight: 800;
  color: #003a7d; background: rgba(255, 255, 255, 0.7); border-radius: 12px;
}
.tree-lesson.is-search-match { box-shadow: inset 0 0 0 2px #41d9f8; }
@keyframes learn-side-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .learn-side-arrow { animation: none; }
}
.learn-side {
  display: block;
  direction: ltr;
  padding: 12px;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(2, 16, 43, 0.08);
  max-height: min(72vh, 720px);
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  border: 2px solid rgba(185, 168, 255, 0.45);
  border-top: 0;
  scrollbar-gutter: stable;
}
.learn-side > * {
  direction: rtl;
}
.learn-side::-webkit-scrollbar {
  width: 22px;
}
.learn-side::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(65, 217, 248, 0.2), rgba(185, 168, 255, 0.28));
  border-radius: 999px;
  margin: 6px 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
}
.learn-side::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #41d9f8 0%, #4ca9ff 45%, #484dd2 100%);
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  min-height: 48px;
}
.learn-side::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6ae3ff 0%, #6bb6ff 45%, #5a5fe0 100%);
}
.learn-side::-webkit-scrollbar-button:single-button {
  display: block;
  height: 28px;
  width: 22px;
  background-color: #484dd2;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.learn-side::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='white' d='M7 3.5 11.5 9h-9z'/%3E%3C/svg%3E");
}
.learn-side::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='white' d='M7 10.5 2.5 5h9z'/%3E%3C/svg%3E");
}
.learn-side::-webkit-scrollbar-button:single-button:hover {
  background-color: #003a7d;
}
/* mobile learn YouTube grid in @media max-width 759px above */
[data-view="learn-math"] .learn-side,
[data-view="learn-lashon"] .learn-side {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(197, 213, 232, 0.85);
}
.learn-stage-box {
  position: relative;
  display: block;
  min-height: 280px;
  min-height: 0;
  flex: 1 1 auto;
}
.learn-stage-box .learn-stage {
  min-height: 280px;
  height: 100%;
}
.learn-stage {
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(197, 213, 232, 0.85);
  box-shadow: 0 8px 22px rgba(2, 16, 43, 0.08);
  display: grid;
}
.dated-rec-btn {
  border: 0;
  border-radius: 16px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  color: #1b1400;
  background: linear-gradient(180deg, #fff56a 0%, #ffd400 48%, #f5b800 100%);
  box-shadow:
    0 0 0 1px rgba(255, 244, 140, 0.95),
    0 0 18px rgba(255, 214, 0, 0.72),
    0 8px 18px rgba(196, 140, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.dated-rec-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #1b1400;
}
.dated-rec-ico svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.dated-rec-dot {
  fill: #c1121f;
}
.dated-rec-copy {
  display: block;
  font-weight: 900;
  text-align: center;
  text-wrap: balance;
}
.dated-rec-btn:hover,
.dated-rec-btn:focus-visible {
  background: linear-gradient(180deg, #fff89a 0%, #ffe14a 48%, #ffc400 100%);
  filter: brightness(1.04);
  outline: 3px solid #41d9f8;
  outline-offset: 2px;
}
.rec-list-card {
  width: min(520px, 94vw);
}
.dated-rec-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dated-rec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f4f8fc;
  border: 2px solid rgba(0, 58, 125, 0.12);
}
.dated-rec-play {
  border: 0;
  background: transparent;
  text-align: right;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #003a7d;
  cursor: pointer;
  padding: 4px 0;
}
.dated-rec-play:hover { color: #00285a; }
.dated-rec-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(0, 58, 125, 0.35);
  background: #fff;
  color: transparent;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.dated-rec-mark.is-done {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}
.dated-rec-empty {
  margin: 8px 0 0;
  font-weight: 700;
  color: #355a7a;
}
.year-topics-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 8px;
}
.year-topics-pick label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #003a7d;
}
.year-topics-pick select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(0, 58, 125, 0.18);
  background: #fff;
  color: #02102b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 10px;
}
.rec-admin-form {
  display: grid;
  gap: 12px;
  margin: 12px 0 18px;
}
.rec-admin-form label {
  display: grid;
  gap: 6px;
  font-weight: 800;
  color: #003a7d;
  font-size: 13px;
}
.rec-admin-form input,
.rec-admin-form select {
  min-height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(0, 58, 125, 0.16);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 15px;
}
.rec-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f8fc;
  border: 1px solid rgba(0, 58, 125, 0.12);
}
.rec-admin-row b { color: #003a7d; }
.rec-admin-list { display: grid; gap: 8px; }
.stage-home {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  height: 100%;
  min-height: 280px;
  box-sizing: border-box;
  background: #071a36;
}
.stage-home .zoom-enter {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}
.stage-home .zoom-enter img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: contain;
  background: #071a36;
}
.stage-home .stage-hint {
  flex: 0 0 auto;
}
.stage-hint {
  margin: 0;
  padding: 12px 14px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  background: #f7fafc;
  border-top: 2px solid #c5d5e8;
}
.stage-home-card {
  padding: 28px 22px;
  text-align: center;
  align-self: center;
}
.stage-home-card h2 { margin: 0 0 8px; color: var(--ink); }
.stage-home-card p { margin: 0; color: var(--mute); font-weight: 600; }
.stage-frame {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 320px;
  height: 100%;
  background: #0b2748;
  color: #f9fcff;
}
.stage-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: #003a7d;
  border-bottom: 1px solid rgba(185, 168, 255, 0.25);
}
.stage-bar b {
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.stage-back {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #41d9f8;
  color: #02102b;
  font-weight: 800;
  font-size: 13px;
}
.stage-body {
  position: relative;
  min-height: 240px;
  display: grid;
}
.watch-embed,
.zoom-embed,
.zoom-wait-card,
.zoom-sdk-stage,
.zoom-meeting-mount {
  position: relative;
}
.watch-stamp {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  animation: watch-stamp-drift 32s steps(1, end) infinite;
}
.zoom-wait-card .watch-stamp {
  color: rgba(0, 58, 125, 0.42);
  text-shadow: none;
}
@keyframes watch-stamp-drift {
  0%, 24% { top: auto; right: 10px; bottom: 10px; left: auto; }
  25%, 49% { top: 10px; right: 10px; bottom: auto; left: auto; }
  50%, 74% { top: 10px; right: auto; bottom: auto; left: 10px; }
  75%, 100% { top: auto; right: auto; bottom: 10px; left: 10px; }
}
.stage-frame:fullscreen .watch-stamp,
.stage-frame:-webkit-full-screen .watch-stamp {
  z-index: 2147483000;
}
.stage-body .zoom-live,
.stage-body .watch-placeholder {
  min-height: 240px;
  height: 100%;
  border-radius: 0;
}
.lesson-tree { display: grid; gap: 10px; }
.tree-domain-btn,
.tree-topic-btn,
.tree-lesson {
  width: 100%;
  text-align: right;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.tree-domain-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  color: #02102b;
  background: linear-gradient(135deg, #dff7fc 0%, #d6ebff 100%);
  border: 2px solid #7ec8e8;
  box-shadow: none;
}
.tree-domain-btn:hover {
  filter: none;
  color: #02102b;
  background: linear-gradient(135deg, #e8fbfd 0%, #e4f0ff 100%);
  border-color: #41d9f8;
}
.tree-domain.is-open > .tree-domain-btn {
  background: #ffffff;
  color: #02102b;
  border-color: #484dd2;
  box-shadow: none;
}
.tree-domain-name { font-size: 17px; line-height: 1.3; }
.tree-domain-btn .tree-caret {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #003a7d;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  opacity: 1;
  line-height: 1;
  box-shadow: none;
}
.tree-domain.is-open > .tree-domain-btn .tree-caret {
  background: #484dd2;
  color: #ffffff;
}
.tree-domain-btn .tree-count,
.tree-topic-btn .tree-count { display: none !important; }

/* DEMO-AMNON: למחוק לפני השקה */
.tree-domain.is-demo-lesson > .tree-domain-btn {
  background: linear-gradient(135deg, #ffe566 0%, #ffd400 100%);
  border-color: #003a7d;
  color: #003a7d;
  box-shadow: 0 4px 0 #003a7d;
}
.tree-domain.is-demo-lesson.is-open > .tree-domain-btn {
  background: linear-gradient(135deg, #ffd400 0%, #ffbf00 100%);
}
.tree-lesson.is-demo-zoom {
  background: #fff8cc;
  border: 2px solid #003a7d;
  border-radius: 12px;
  padding: 10px 12px;
  color: #003a7d;
  font-weight: 800;
}
.tree-lesson.is-demo-zoom.is-on,
.tree-lesson.is-demo-zoom:hover {
  background: #ffe566;
}
.demo-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff8cc;
  border: 2px solid #003a7d;
  color: #003a7d;
  font-weight: 800;
  text-align: center;
}

.tree-caret {
  opacity: 0.9;
  font-size: 12px;
  line-height: 1;
}
.tree-count {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.9;
  min-width: 1.5em;
  text-align: center;
}
.tree-topics {
  display: grid;
  gap: 8px;
  padding: 8px 0 4px 0;
  margin-inline-start: 4px;
  border-inline-start: 3px solid #b9a8ff;
  padding-inline-start: 10px;
}
.tree-topic-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #484dd2 0%, #5b7fe8 55%, #41d9f8 140%);
  border: 2px solid #484dd2;
  box-shadow: 0 6px 14px rgba(72, 77, 210, 0.18);
}
.tree-topic-btn .tree-caret {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  opacity: 1;
  line-height: 1;
}
.tree-topic-btn .tree-topic-name {
  color: #ffffff;
}
.tree-topic-btn:hover {
  background: linear-gradient(135deg, #3d42c4 0%, #4f72dc 55%, #35c8e8 140%);
  color: #ffffff;
  border-color: #3d42c4;
}
.tree-topic.is-open > .tree-topic-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #2f34b8 0%, #3f62d4 55%, #2bb8d8 140%);
  border-color: #41d9f8;
  box-shadow: 0 8px 16px rgba(72, 77, 210, 0.28);
}
.tree-topic.is-open > .tree-topic-btn .tree-caret,
.tree-topic.is-open > .tree-topic-btn .tree-topic-name {
  color: #ffffff;
}
.tree-topic-name { font-size: 15px; line-height: 1.35; }
.tree-topic.is-open > .tree-topic-btn .tree-caret {
  background: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.tree-lessons {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  margin-inline-start: 4px;
  padding-inline-start: 8px;
  border-inline-start: 3px solid #c5d5e8;
}
.tree-lesson {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #003a7d;
  background: #ffffff;
  color: #02102b;
  font-weight: 700;
  text-align: right;
  box-shadow: 0 2px 8px rgba(2, 16, 43, 0.06);
}
.tree-lesson:hover {
  background: #f7fafc;
  border-color: #003a7d;
  color: #02102b;
}
.tree-lesson.is-on {
  background: #eef8ff;
  border-color: #484dd2;
  border-width: 3px;
  color: #02102b;
  box-shadow: none;
}
.tree-lesson-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
  color: #02102b;
  letter-spacing: 0.01em;
}
.tree-lesson-title-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tree-lesson-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-inline-start: 0;
}
.tree-lesson-meta {
  font-size: 13px;
  font-weight: 700;
  color: #003a7d;
  opacity: 1;
  line-height: 1.4;
}
.tree-lesson.is-on .tree-lesson-title { color: #02102b; }
.tree-lesson.is-on .tree-lesson-meta { color: #003a7d; opacity: 1; }
.learn-access-hint {
  display: none !important;
}
.tree-domain.is-locked-domain > .tree-domain-btn {
  background: linear-gradient(135deg, #eef2f7 0%, #e6ebf3 100%);
  border-color: #b7c0d0;
  color: #4a5568;
}
.tree-lesson.is-locked {
  opacity: 0.72;
  cursor: not-allowed;
  background: rgba(248, 250, 252, 0.9);
}
.tree-lesson.is-locked:hover {
  filter: none;
  transform: none;
}
.tree-lesson-badge.is-locked-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #003a7d;
  border: 1.5px solid #003a7d;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 58, 125, 0.12);
}
.tree-lesson-badge.is-free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin-inline-start: 2px;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(2, 16, 43, 0.35)) drop-shadow(0 4px 8px rgba(34, 197, 94, 0.35));
  transform: translateY(-1px);
}
.tree-empty {
  margin: 0;
  padding: 8px 10px;
  color: #355a7a;
  font-size: 13px;
  font-weight: 700;
}
.side-topic { display: none; }
.learn-main {
  min-height: 220px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(2, 16, 43, 0.08);
}
.learn-main-head {
  margin-bottom: 14px;
}
.learn-main-head .lib-kicker { margin: 0 0 4px; color: var(--turquoise); font-weight: 800; font-size: 12px; }
.learn-main-head h2 { margin: 0 0 6px; color: var(--ink); font-size: 22px; }
.learn-main-head p { margin: 0; color: var(--mute); font-weight: 600; }
.learn-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--mute);
  font-weight: 650;
}
.zoom-enter {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 22px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(65, 217, 248, 0.28);
}
.zoom-enter img {
  width: 100%;
  height: auto;
  display: block;
}
.zoom-enter:hover { filter: brightness(1.03); }
.class-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.class-chip {
  border: 0;
  background: var(--dock);
  color: #cfefff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  box-shadow: var(--dock-shadow);
}
.class-chip.is-on {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow);
}
.branch-tabs { display: none; }
.lib-block {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lib-talks { background: transparent; border: 0; }
.lib-kicker { margin: 0 0 4px; color: var(--turquoise); font-weight: 800; font-size: 12px; }
.lib-head h2 { margin: 0 0 6px; color: var(--ink); font-size: 22px; }
.lib-head p { margin: 0 0 12px; color: var(--mute); font-weight: 600; }
.clip-list, .clip-grid { display: grid; gap: 8px; }
.clip {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  width: 100%;
  text-align: right;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef4ff, #e8f8f6);
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lib-talks .clip { background: linear-gradient(135deg, #f3efff, #eef7ff); }
.clip:hover { background: #e8f7ff; transform: translateY(-1px); }
.lib-talks .clip:hover { background: #efe8ff; }
.clip-play {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  overflow: visible;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.clip-icon {
  position: relative;
  width: 52px;
  height: 52px;
  background: transparent;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 58, 125, 0.18);
}
.clip-icon img {
  position: absolute;
  width: 158%;
  height: 158%;
  max-width: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  display: block;
}
.clip:hover .clip-play {
  transform: scale(1.08);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 2px rgba(65, 217, 248, 0.4),
    0 8px 18px rgba(37, 99, 235, 0.28),
    0 0 18px rgba(91, 46, 176, 0.28);
}
.clip-copy { display: grid; gap: 2px; }
.clip-copy b { color: var(--ink); }
.clip-copy small { color: var(--mute); font-weight: 700; }
.clip-date, .clip-tag { font-size: 12px; font-weight: 800; color: var(--blue); }

.zoom-stage {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(7, 16, 24, 0.72);
  display: grid;
  place-items: center;
  padding: 16px;
}
.zoom-frame {
  width: min(960px, 100%);
  background: #071018;
  border: 3px solid #41d9f8;
  border-radius: 28px;
  box-shadow: 0 0 0 6px rgba(65, 217, 248, 0.25), 0 24px 60px rgba(0,0,0,0.45);
  overflow: hidden;
}
.zoom-frame-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #02102b;
  color: #fff;
}
.zoom-frame-bar b { flex: 1; font-size: 14px; }
.live-pill, .watch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--live);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
}
.watch-pill { background: var(--purple); }
.zoom-close {
  border: 0;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}
.zoom-embed { min-height: min(62vh, 520px); padding: 14px; }
.zoom-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 280px; }
.zoom-live-note, .watch-placeholder {
  color: #9fb0c8;
  font-weight: 700;
  text-align: center;
  margin-top: 14px;
}
.watch-placeholder { display: grid; place-items: center; min-height: 240px; gap: 8px; color: #fff; }
.watch-video,
.watch-frame-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: min(52vh, 420px);
  border: 0;
  border-radius: 12px;
  background: #000;
  display: block;
}
.summary-download { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.stage-body .stage-hint {
  margin: 10px 4px 0;
  color: var(--mute, #a3a39a);
  font-size: 0.92rem;
}
body.zoom-open { overflow: hidden; }

.find-stage {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: start center;
  padding: 72px 16px 24px;
  background: rgba(16, 32, 71, 0.42);
}
.find-card {
  position: relative;
  width: min(540px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px 18px 16px;
  box-shadow: 0 22px 50px rgba(0, 58, 125, 0.22);
}
.find-x {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.find-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
.find-field svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--ink);
  display: block;
}
.find-field input {
  flex: 1;
  border: 0;
  background: none;
  min-height: 38px;
  outline: none;
  font-weight: 700;
  color: var(--ink);
}
.find-note {
  margin: 10px 2px 12px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 600;
}
.find-empty {
  margin: 8px 2px 0;
  color: var(--mute);
  font-weight: 700;
}
#findHits { display: grid; gap: 8px; }

.top-nav button.is-on {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 16px rgba(0, 58, 125, 0.25);
}

.rooms-board { display: grid; gap: 12px; }
.room-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.room-card.math { background: #f3f9ff; }
.room-card.lashon { background: #f3efff; }
.room-card label { display: block; margin-top: 8px; font-size: 13px; font-weight: 800; }
.room-card input {
  width: 100%;
  margin-top: 4px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.room-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.room-ready-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.room-ready-pill.ok { background: #d4f8e3; color: #0a5c32; }
.room-ready-pill.wait { background: #fff3d6; color: #7a5200; }
.admin-zoom-board { margin-top: 12px; }
.admin-actions-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.zoom-sdk-stage.is-live {
  min-height: min(70vh, 640px);
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
}
.stage-body-zoom {
  min-height: min(70vh, 640px);
  height: 100%;
  display: grid;
}
.stage-frame.is-live {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: min(74vh, 700px);
  height: 100%;
}
.stage-fs {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #ffffff;
  color: #02102b;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.stage-fs:hover {
  background: #41d9f8;
}
.zoom-meeting-mount,
#zoomMeetingMount {
  width: 100%;
  min-height: min(66vh, 600px);
  height: 100%;
  background: #0f0c22;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.zoom-join-hint {
  margin: 0;
  padding: 16px;
  color: #c8d6f0;
  font-weight: 700;
  text-align: center;
  max-width: 36rem;
  line-height: 1.45;
}
/* Client View: ממשק זום מלא על כל המסך בזמן שיעור חי */
#zmmtg-root {
  display: none;
}
body.is-zoom-client-live #zmmtg-root {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 44px !important;
  width: 100vw !important;
  height: calc(100vh - 44px) !important;
  z-index: 4000 !important;
  background: #0b1220;
  /* סרגל כלים כמו זום הרגיל: שמע/וידאו משמאל, יציאה מימין */
  direction: ltr !important;
  text-align: left;
}
body.is-zoom-client-live #zmmtg-root .footer__inner,
body.is-zoom-client-live #zmmtg-root .meeting-client,
body.is-zoom-client-live #zmmtg-root .meeting-client-inner,
body.is-zoom-client-live #zmmtg-root .footer,
body.is-zoom-client-live #zmmtg-root [class*="footer"] {
  direction: ltr !important;
}
body.is-zoom-client-live #aria-notify-area {
  z-index: 4001;
}
body.is-zoom-client-live .staff-lock,
body.is-zoom-client-live .lab-strip {
  display: none !important;
}
.zoom-client-exit-bar {
  display: none;
}
body.is-zoom-client-live .zoom-client-exit-bar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(2, 16, 43, 0.92);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
body.is-zoom-client-live .zoom-client-exit-bar button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #41d9f8;
  color: #02102b;
  font-weight: 800;
  cursor: pointer;
}
.stage-frame.is-live:fullscreen,
.stage-frame.is-live:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #0b1220;
  border-radius: 0;
  padding: 0;
}
.stage-frame.is-live:fullscreen .stage-body-zoom,
.stage-frame.is-live:-webkit-full-screen .stage-body-zoom,
.stage-frame.is-live:fullscreen .zoom-sdk-stage,
.stage-frame.is-live:-webkit-full-screen .zoom-sdk-stage,
.stage-frame.is-live:fullscreen #zoomMeetingMount,
.stage-frame.is-live:-webkit-full-screen #zoomMeetingMount {
  min-height: 0;
  height: 100%;
}
.zoom-meeting-iframe,
#zoomMeetingIframe {
  width: 100%;
  min-height: min(56vh, 480px);
  height: 100%;
  border: 0;
  background: #0f0c22;
}
.zoom-join-status {
  margin: 0;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #c8d6f0;
}
.zoom-join-status.is-err { color: #ff6b8a; }
.zoom-lab-join {
  place-items: center;
  padding: 28px 20px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 0, 0.12), transparent 55%),
    #0b1220;
}
.zoom-lab-join-inner {
  width: min(100%, 420px);
  text-align: center;
  display: grid;
  gap: 14px;
}
.zoom-lab-live-pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 59, 92, 0.18);
  color: #ff8fa3;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
}
.zoom-lab-title {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.25;
}
.zoom-lab-lead {
  margin: 0;
  color: #c8d6f0;
  font-size: 15px;
  line-height: 1.5;
}
.zoom-lab-go {
  width: 100%;
  font-size: 18px;
  padding: 14px 18px;
  margin-top: 4px;
}
body.is-zoom-live .staff-lock {
  display: none;
}
.zoom-meeting-mount.is-setup {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 0, 0.1), transparent 55%),
    #0b1220;
}
.zoom-lab-steps {
  margin: 0;
  font-size: 13px;
  color: #9fb4d6;
  line-height: 1.5;
}
.btn-ghost.zoom-lab-alt {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #c8d6f0;
}
.admin-zoom-sdk-form {
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.admin-zoom-sdk-form .field input {
  width: 100%;
}

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 6px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--dock);
  border-top: 0;
  box-shadow: 0 -12px 28px rgba(2, 16, 43, 0.28);
}
.sticky-bar button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  background: transparent;
  color: #cfefff;
}
.sticky-bar button:hover { background: rgba(65, 217, 248, 0.18); color: #fff; }
.sticky-bar button.is-on:not(.sticky-pay) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.sticky-bar .sticky-pay {
  background: linear-gradient(145deg, #7dffa3 0%, #22c55e 42%, #15803d 100%) !important;
  color: #052e16 !important;
  border: 2px solid #14532d !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.24),
    0 8px 18px rgba(21, 128, 61, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.toast {
  position: fixed;
  top: 64px;
  left: 16px;
  right: 16px;
  z-index: 120;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ok);
  color: #14532d;
  font-weight: 800;
  text-align: center;
}

.staff-lock {
  position: fixed;
  z-index: 55;
  left: 14px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--gold-shadow), 0 0 0 4px rgba(65, 217, 248, 0.2);
  display: grid;
  place-items: center;
}
.staff-lock svg {
  width: 26px;
  height: 26px;
  display: block;
}
.staff-lock:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.06);
}
@media (max-width: 759px) {
  .staff-lock {
    width: 40px;
    height: 40px;
    left: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    border-radius: 14px;
    opacity: 0.78;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .staff-lock svg { width: 18px; height: 18px; }
  .staff-lock:hover,
  .staff-lock:focus-visible { opacity: 1; }
}
body.is-admin .staff-lock,
body.is-admin .sticky-bar,
body.is-admin .top { display: none; }
body.is-admin {
  padding-bottom: 0;
  background: #eef1f4;
  color: #1c2430;
}
body.is-admin button:not(.staff-lock) {
  transform: none;
  filter: none;
  box-shadow: none;
}

.grove-login,
.sched-stage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 36, 48, 0.45);
}
#appInstallStage {
  z-index: 130;
}
.pay-stage {
  align-items: start;
  justify-items: center;
  overflow: auto;
  padding: 24px 18px 40px;
}
.pay-stage-form,
.pay-stage .pay {
  width: min(680px, 96vw);
  margin: 0 auto;
}
.pay-stage .pay-card {
  position: relative;
  padding: 44px 24px 22px;
  max-width: 100%;
}
.pay-stage .pay-card h2 {
  margin-top: 0;
}
.grove-card,
.sched-card {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 24px 22px 18px;
  box-shadow: 0 16px 40px rgba(28, 36, 48, 0.18);
  border: 1px solid #e4e8ee;
}
.sched-card { width: min(440px, 100%); }
.sched-card-wide {
  width: min(520px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
}
.sched-notify {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4e8ee;
  display: grid;
  gap: 10px;
}
.sched-notify-title {
  font-size: 15px;
  color: var(--ink);
}
.sched-notify textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  line-height: 1.45;
  resize: vertical;
  background: #f8faff;
  color: var(--ink);
}
.grove-x,
.sched-x {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #fff;
  color: #1c2430;
  font-size: 20px;
  line-height: 1;
}
.grove-kicker {
  margin: 0 0 4px;
  color: #5b6b80;
  font-weight: 700;
  font-size: 12px;
}
.grove-card h2,
.sched-card h2 {
  margin: 0 0 8px;
  color: #1c2430;
  font-size: 22px;
  font-weight: 700;
}
.grove-lead, .grove-hint, .sched-hint {
  color: #5b6b80;
  font-weight: 500;
  line-height: 1.5;
}
.grove-lead { margin: 0 0 16px; }
.grove-hint, .sched-hint { margin: 10px 0 0; font-size: 13px; }
.grove-card label,
.sched-fields label {
  display: block;
  margin-bottom: 10px;
  font-weight: 650;
  color: #1c2430;
}
.grove-card input[type="email"],
.grove-card input[type="password"],
.sched-fields input {
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  font-weight: 500;
  background: #f8fafc;
}
.grove-remember {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.grove-go,
.sched-save {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  background: #1c4b8c;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.grove-page { padding: 0; }
.grove-shell { width: 100%; margin: 0; padding: 0 0 40px; }
.desk-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #dce3eb;
}
.desk-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.desk-brand strong { font-size: 18px; color: #1c2430; }
.desk-brand span { color: #5b6b80; font-weight: 600; font-size: 13px; }
.desk-who {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5b6b80;
  font-weight: 600;
  font-size: 14px;
  flex-wrap: wrap;
}
.desk-try-student {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.28);
}
.desk-try-student:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.admin-out {
  border: 1px solid #d7dee7;
  background: #fff;
  color: #1c2430;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 650;
}
.admin-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #dce3eb;
}
.admin-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5b6b80;
  border-radius: 0;
  padding: 12px 14px;
  font-weight: 650;
  white-space: nowrap;
}
.admin-tabs button:hover:not(.is-on) { color: #1c2430; background: #f5f7fa; }
.admin-tabs button.is-on {
  color: #1c4b8c;
  border-bottom-color: #1c4b8c;
  background: transparent;
  box-shadow: none;
}
.admin-body {
  display: grid;
  gap: 14px;
  width: min(1120px, calc(100% - 32px));
  margin: 18px auto 0;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.admin-stat {
  background: #fff;
  color: #1c2430;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: right;
}
.admin-stat small { display: block; color: #5b6b80; font-weight: 650; font-size: 12px; }
.admin-stat b { display: block; font-size: 26px; margin: 4px 0; font-weight: 750; }
.admin-stat span { color: #5b6b80; font-weight: 500; font-size: 13px; }
.admin-stat[data-admin-jump] { cursor: pointer; }
.admin-stat[data-admin-jump]:hover { border-color: #1c4b8c; }
.admin-grid { display: grid; gap: 10px; }
.admin-card {
  background: #fff;
  color: #1c2430;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  padding: 16px 18px;
}
.admin-card h2 { margin: 0 0 8px; color: #1c2430; font-size: 17px; font-weight: 700; }
.admin-muted { margin: 0 0 12px; color: #5b6b80; font-weight: 500; }
.admin-list { margin: 0; padding: 0; list-style: none; }
.admin-list button,
.admin-jump {
  display: block;
  width: 100%;
  text-align: right;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: transparent;
  color: #1c2430;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 4px;
  border-radius: 0;
}
.admin-list button:hover,
.admin-jump:hover { background: #f5f8fc; color: #1c4b8c; }
.admin-alerts-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #d4dbe5;
  background: #f8fbff;
  color: #1c2430;
  text-align: right;
  cursor: pointer;
}
.admin-alerts-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.admin-alerts-btn.is-hot {
  border-color: #bb1f1f;
  background: linear-gradient(180deg, #fff6f6 0%, #ffe9e9 100%);
  box-shadow: 0 0 0 3px rgba(187, 31, 31, 0.1);
  animation: adminAlertPulse 1.2s ease-in-out infinite;
}
.admin-alerts-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #003a7d;
  border: 0;
  box-shadow: 0 6px 12px rgba(0, 58, 125, 0.22);
}
.admin-alerts-btn-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.admin-alerts-btn.is-hot .admin-alerts-btn-icon {
  background: #bb1f1f;
  box-shadow: 0 6px 12px rgba(187, 31, 31, 0.28);
}
.admin-alerts-btn-copy b {
  display: block;
  font-size: 18px;
}
.admin-alerts-btn-copy small {
  color: #5b6b80;
  font-weight: 600;
}
.admin-alerts-modal {
  width: min(720px, calc(100% - 20px));
  max-height: min(82vh, 760px);
  overflow: auto;
}
@keyframes adminAlertPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(187, 31, 31, 0.1); }
  50% { box-shadow: 0 0 0 7px rgba(187, 31, 31, 0.2); }
}
.admin-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.admin-search {
  min-height: 40px;
  min-width: min(240px, 100%);
  border: 1px solid #d7dee7;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 500;
  background: #f8fafc;
}
.admin-tools { margin: 0 0 12px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: right; }
.admin-table th {
  font-size: 12px;
  color: #5b6b80;
  font-weight: 650;
  padding: 8px 8px;
  border-bottom: 1px solid #dce3eb;
}
.admin-table td {
  padding: 11px 8px;
  border-bottom: 1px solid #edf1f5;
  vertical-align: top;
  font-weight: 550;
}
.admin-table small { display: block; color: #5b6b80; font-weight: 500; }
.admin-table tr.desk-focus { background: #eef5ff; outline: 2px solid #1c4b8c; outline-offset: -2px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions button {
  border: 1px solid #d7dee7;
  background: #fff;
  color: #1c2430;
  border-radius: 7px;
  padding: 6px 10px;
  font-weight: 650;
  font-size: 12px;
}
.admin-actions button:hover { background: #1c4b8c; color: #fff; border-color: #1c4b8c; }
.admin-pill {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 650;
  background: #eef1f4;
  color: #1c2430;
}
.admin-pill.open, .admin-pill.published { background: #e5f6ea; color: #17633a; }
.admin-pill.blocked, .admin-pill.hidden { background: #fde8e8; color: #8f1d1d; }
.admin-pill.hold, .admin-pill.scheduled, .admin-pill.wait { background: #fff4d6; color: #7a5410; }
.admin-table-click tr[data-open-pupil] { cursor: pointer; }
.admin-table-click tr[data-open-pupil]:hover { background: #f5f8fc; }
.desk-key {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #f8fafc;
  color: #5b6b80;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.desk-key b { color: #1c2430; font-size: 12px; }
.desk-key p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.pupil-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 22px 20px 18px;
  border: 1px solid #e4e8ee;
  box-shadow: 0 16px 40px rgba(28, 36, 48, 0.18);
}
.pupil-tabs {
  display: flex;
  gap: 0;
  margin: 12px 0 14px;
  border-bottom: 1px solid #dce3eb;
}
.pupil-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5b6b80;
  padding: 8px 12px;
  font-weight: 650;
}
.pupil-tabs button.is-on { color: #1c4b8c; border-bottom-color: #1c4b8c; }
.pupil-facts, .pupil-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pupil-facts p, .pupil-stats p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #f8fafc;
}
.pupil-facts small, .pupil-stats small { display: block; color: #5b6b80; font-weight: 600; font-size: 12px; }
.pupil-facts b, .pupil-stats b { color: #1c2430; font-size: 15px; }
.pupil-stamp-fact .pupil-stamp-copy {
  margin-top: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: #003a7d;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.stu-stamp {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  color: #003a7d;
  font-weight: 800;
}
.pupil-tracks-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #d7e4f4;
  border-radius: 10px;
  background: #f4f8fd;
}
.pupil-tracks-form b { font-size: 15px; color: #12315c; }
.pupil-tracks-form label {
  display: grid;
  gap: 6px;
  color: #1c2430;
  font-weight: 650;
}
.pupil-tracks-form select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  font-weight: 500;
  background: #fff;
}
.pupil-extra-box small { display: block; color: #5b6b80; font-weight: 700; margin-bottom: 6px; }
.pupil-extra-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pupil-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7f0fb;
  color: #12315c;
  font-weight: 700;
  font-size: 13px;
}
.pupil-extra-chip button {
  border: 0;
  background: transparent;
  color: #5b6b80;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pupil-add-track { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pupil-add-track select { flex: 1; min-width: 180px; }
.pupil-pin { letter-spacing: 0.18em; font-family: ui-monospace, Consolas, monospace; }
.pupil-bar {
  height: 8px;
  border-radius: 99px;
  background: #e6edf4;
  overflow: hidden;
}
.staff-form {
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.staff-form label,
.staff-perms-box {
  display: grid;
  gap: 6px;
  color: #1c2430;
  font-weight: 650;
}
.staff-form input[type="text"],
.staff-form input[type="email"] {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  font-weight: 500;
  background: #f8fafc;
}
.staff-form textarea {
  width: 100%;
  margin-top: 6px;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  font-weight: 500;
  background: #f8fafc;
  resize: vertical;
}
.slice-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 10px;
}
.slice-label {
  color: #5b6b80;
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
}
.slice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7dee7;
  background: #fff;
  color: #1c2430;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 650;
  font-size: 13px;
}
.slice-chip small {
  color: #5b6b80;
  font-weight: 700;
}
.slice-chip.is-on {
  background: #1c4b8c;
  border-color: #1c4b8c;
  color: #fff;
}
.slice-chip.is-on small { color: #d6e6f8; }
.content-search-row {
  margin: 0 0 12px;
}
.content-search-row .admin-search {
  width: 100%;
  max-width: none;
}
.track-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.track-pick {
  display: grid;
  gap: 2px;
  text-align: start;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #fff;
  color: #1c2430;
  cursor: pointer;
}
.track-pick b {
  font-size: 14px;
  font-weight: 800;
}
.track-pick small {
  color: #5b6b80;
  font-weight: 650;
  font-size: 12px;
}
.track-pick.is-on {
  background: #003a7d;
  border-color: #003a7d;
  color: #fff;
}
.track-pick.is-on small { color: #d6e6f8; }
.track-hint { margin: 0 0 12px; }
.course-folders {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #e5ebf2;
  border-radius: 12px;
  background: #f8fafc;
}
.course-folder-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.course-folder {
  display: grid;
  gap: 2px;
  text-align: start;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.course-folder b { font-size: 13px; font-weight: 800; color: #1c2430; }
.course-folder small { color: #5b6b80; font-size: 12px; font-weight: 650; }
.course-folder.is-on {
  border-color: #003a7d;
  background: #eef4fb;
}
.content-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0 0 14px;
  color: #5b6b80;
  font-size: 13px;
  font-weight: 600;
}
.content-stats b { color: #1c2430; }
.bulk-video {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #d7dee7;
  border-radius: 12px;
  background: #f8fafc;
}
.bulk-video > b { display: block; margin-bottom: 6px; }
.bulk-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.bulk-video-actions button,
.bulk-video-save {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #1c4b8c;
  border-radius: 8px;
  background: #fff;
  color: #1c4b8c;
  font-weight: 700;
  font-size: 13px;
}
.bulk-video-save {
  background: #1c4b8c;
  color: #fff;
  margin-top: 8px;
}
.bulk-video-label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: #1c2430;
}
.bulk-video-label textarea {
  width: 100%;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  direction: ltr;
  text-align: left;
  background: #fff;
  resize: vertical;
}
.video-paste {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 220px;
}
.video-code-input {
  flex: 1;
  min-width: 140px;
  min-height: 34px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  direction: ltr;
  text-align: left;
}
.video-paste button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #1c4b8c;
  border-radius: 8px;
  background: #1c4b8c;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.admin-table small strong {
  color: #1c4b8c;
  font-weight: 800;
}
.slice-actions { margin: 0 0 12px; }
.slice-mail {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #1c4b8c;
  border-radius: 8px;
  background: #fff;
  color: #1c4b8c;
  font-weight: 700;
  font-size: 13px;
}
.slice-mail:disabled { opacity: 0.45; }
.staff-perms-box {
  margin: 0;
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #f8fafc;
}
.staff-perms-box legend { padding: 0 6px; font-size: 13px; }
.staff-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.staff-perms label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
  font-size: 13px;
  color: #1c2430;
}
.staff-add {
  justify-self: start;
  min-height: 42px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #1c4b8c;
  color: #fff;
  font-weight: 700;
}
.staff-add-card { width: min(480px, 100%); max-height: min(88vh, 820px); overflow: auto; }
.admin-minis { display: grid; gap: 8px; margin: 12px 0; }
.admin-mini {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #dce3eb;
  background: #f8fafc;
}
.admin-mini b { color: #1c2430; }
.admin-mini small, .admin-mini p { color: #5b6b80; font-weight: 500; margin: 0; }
.admin-foot {
  width: min(1120px, calc(100% - 32px));
  margin: 14px auto 0;
  color: #7a8796;
  font-weight: 500;
  font-size: 13px;
}

.sched-cal { margin: 8px 0 14px; }
.sched-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sched-cal-head b { font-size: 15px; }
.sched-cal-head button {
  width: 32px;
  height: 32px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}
.sched-week,
.sched-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.sched-week span {
  font-size: 12px;
  color: #5b6b80;
  font-weight: 650;
  padding: 4px 0;
}
.sched-days button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-weight: 650;
}
.sched-days button:hover { background: #eef5ff; }
.sched-days button.is-on { background: #1c4b8c; color: #fff; }
.sched-days button.is-muted { color: #b0b8c2; }
.sched-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sched-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.sched-actions button { flex: 1; min-height: 44px; border-radius: 8px; font-weight: 700; }
.sched-cancel {
  border: 1px solid #d7dee7;
  background: #fff;
  color: #1c2430;
}

.notify-card textarea {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  line-height: 1.45;
  resize: vertical;
  background: #f8faff;
  color: var(--ink);
}
.notify-ask {
  margin: 0 0 10px;
  font-weight: 750;
  color: var(--ink);
}
.notify-sent {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #f0c36d;
  background: #fff7e8;
  color: #7a4b00;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
.notify-sent[hidden] {
  display: none !important;
}
.notify-pick {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: var(--mute);
  font-size: 13px;
}
.notify-pick select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  background: #fff;
}
.notify-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.notify-skip {
  border: 2px solid #b42318 !important;
  background: #fff1f0 !important;
  color: #b42318 !important;
  font-weight: 800 !important;
}
.notify-skip:hover {
  background: #ffe3e0 !important;
}
.notify-send {
  border: 0;
  background: #003a7d;
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.notify-send-both {
  background: #0b6e4f;
  flex: 1 1 100%;
}
.order-board {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.order-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f7ff;
  border: 1px solid var(--line);
}
.order-row b { color: var(--ink); }
.order-row small { display: block; color: #5b6b80; font-weight: 500; }
.order-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-edit span {
  font-size: 14px;
  color: var(--mute);
}
.order-num {
  width: 52px;
  min-height: 36px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
}
.order-pencil {
  border: 0;
  background: transparent;
  color: var(--purple);
  font-size: 16px;
  padding: 4px;
  line-height: 1;
}
.device-id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  direction: ltr;
  unicode-bidi: plaintext;
  color: #3a2a8c;
  font-weight: 700;
}
.device-hist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: #5b6b80;
  font-size: 12px;
  font-weight: 500;
}
.pay-note-strong {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #e53935;
  background: #fff0f0;
  color: #b71c1c;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.5;
}
.pay-note-strong .pay-note-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #b71c1c;
}
.pay-claim-alarm {
  margin: 8px 0 16px;
}
.student-login {
  margin-top: 0;
  display: grid;
  gap: 14px;
}
.student-login .field-line {
  display: grid;
  gap: 8px;
  margin: 0;
  font-weight: 800;
  color: var(--ink);
  text-align: start;
}
.student-login .field-label {
  line-height: 1.3;
}
.student-login .field-control {
  position: relative;
  display: grid;
}
.student-login input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding-block: 10px;
  padding-inline-start: 52px;
  padding-inline-end: 12px;
  border: 1.5px solid #c5d5e8;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 600;
}
[dir="rtl"] .student-login input {
  padding-block: 10px;
  padding-inline-start: 52px;
  padding-inline-end: 12px;
}
.student-login input:focus {
  outline: 3px solid rgba(65, 217, 248, 0.45);
  border-color: #003a7d;
}
.field-tip {
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #003a7d;
  color: #fff;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 58, 125, 0.25);
}
.field-tip:hover,
.field-tip[aria-expanded="true"] {
  background: #00a8c0;
}
.field-tip:focus-visible {
  outline: 3px solid rgba(65, 217, 248, 0.55);
  outline-offset: 2px;
}
.field-tip-panel {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 58, 125, 0.22);
  background: #eef8ff;
  color: #02102b;
  font-weight: 650;
  font-size: 13px;
  line-height: 1.45;
}
.field-tip-panel[hidden] {
  display: none;
}
.student-login input[name="loginPassword"] {
  padding-right: 92px;
}
.login-password-eye {
  position: absolute;
  inset-inline-start: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.login-password-eye:focus-visible {
  outline: 2px solid var(--navy);
  border-radius: 6px;
}
.login-eye-slash[hidden] { display: none; }
.student-login .btn-pay {
  margin-top: 6px;
  min-height: 48px;
  width: 100%;
}

.account-page {
  padding: 18px 0 40px;
}
.account-shell {
  width: min(920px, calc(100% - 28px));
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.account-logo-col {
  display: grid;
  place-items: center;
}
.account-logo img {
  height: 88px;
  max-width: min(280px, 82vw);
}
.account-panel {
  width: min(480px, 100%);
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.account-head {
  text-align: center;
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-bottom: 2px;
}
.account-head .kicker {
  margin: 0;
}
.account-head h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 40px);
  color: #02102b;
}
.account-head .login-warning {
  color: #d90429;
  font-weight: 700;
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.35;
  margin: 6px 0 0;
  max-width: min(520px, 92vw);
  text-align: center;
}
.app-install-slot {
  width: min(720px, 100%);
}
.app-install-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 18px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 24px;
  background: #fff;
  border: 1.5px solid rgba(0, 58, 125, 0.12);
  box-shadow: 0 12px 28px rgba(0, 58, 125, 0.1);
  text-align: right;
}
.app-install-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 58, 125, 0.22);
  flex: 0 0 auto;
}
.app-install-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.app-install-copy h2 {
  margin: 0;
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}
.app-install-copy p {
  margin: 0;
  color: var(--mute);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.45;
}
.app-install-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.app-install-pills button {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #e8f7ff;
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(0, 58, 125, 0.12);
}
.app-install-pills button:hover,
.app-install-pills button.is-on {
  background: #41d9f8;
  color: #02102b;
  box-shadow: 0 4px 0 #003a7d;
}
.app-install-dialog {
  width: min(640px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  padding: 44px 18px 18px;
}
.app-install-card-in {
  box-shadow: none;
  border: 1.5px solid rgba(0, 58, 125, 0.1);
  background: #f7fbff;
}
.app-install-guide {
  margin-top: 16px;
  padding: 14px 16px 8px;
  border-radius: 18px;
  background: #eef7ff;
  border: 1.5px solid rgba(0, 58, 125, 0.1);
}
.app-install-panel h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
}
.app-install-panel ol {
  margin: 0;
  padding: 0 22px 8px 0;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.45;
}
.app-install-panel li {
  padding-inline-start: 4px;
}

@media (max-width: 559px) {
  .app-install-card {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: right;
  }
  .app-install-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 2px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(90deg, #25d366, #128c7e);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  text-decoration: none;
  box-shadow:
    0 0 0 3px rgba(37, 211, 102, 0.22),
    0 10px 24px rgba(18, 140, 126, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-wa:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 3px rgba(37, 211, 102, 0.3),
    0 14px 28px rgba(18, 140, 126, 0.34);
}
.btn-wa-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #075e54;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.btn-wa-mark svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (min-width: 760px) {
  .account-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px 28px;
    margin-top: 28px;
  }
  .account-logo-col {
    align-self: center;
  }
  .account-logo img {
    height: 120px;
    max-width: 280px;
  }
  .account-panel {
    width: min(480px, 100%);
  }
  .app-install-slot {
    align-self: center;
  }
  .account-head {
    text-align: center;
    justify-items: center;
  }
}

.learn-top-actions {
  display: none;
}
.learn-cal-btn,
.learn-year-cal-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 230px;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  background: var(--gold);
  cursor: pointer;
  border-radius: 999px;
  box-shadow: var(--gold-shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  text-align: center;
  color: #fff;
  font: inherit;
}
.learn-year-cal-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(2, 16, 43, 0.35));
}
.learn-year-cal-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}
.learn-year-cal-copy b {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  color: #fff;
  text-shadow: 0 1px 0 rgba(2, 16, 43, 0.45), 0 0 8px rgba(2, 16, 43, 0.25);
}
.learn-year-cal-copy small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 rgba(2, 16, 43, 0.45);
}
.learn-cal-btn img {
  display: none;
}
.learn-cal-btn:hover,
.learn-year-cal-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 24px rgba(76, 169, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.learn-cal-btn:focus-visible,
.learn-year-cal-btn:focus-visible {
  outline: 3px solid #41d9f8;
  outline-offset: 3px;
}
.learn-year-cal-btn[hidden] {
  display: none !important;
}
@media (max-width: 759px) {
  .learn-head .learn-year-cal-btn {
    max-width: 132px;
    min-height: 36px;
    padding: 5px 8px;
    gap: 4px;
  }
  .learn-head .wa-class-btn {
    min-width: 0;
    max-width: 96px;
    min-height: 36px;
    padding: 5px 8px;
    font-size: 12px;
    gap: 5px;
    white-space: nowrap;
  }
  .learn-year-cal-copy b { font-size: 10px; white-space: normal; }
}
.zoom-live-btn {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(2, 16, 43, 0.18));
  transition: transform 0.16s ease, filter 0.16s ease;
}
.zoom-live-btn[hidden] {
  display: none !important;
}
.zoom-live-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 800;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.zoom-live-face {
  display: none;
}
.zoom-live-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 8px 14px rgba(2, 16, 43, 0.24)) brightness(1.04);
}
.zoom-live-btn:focus-visible {
  outline: 3px solid #41d9f8;
  outline-offset: 3px;
}
.stage-stack {
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  overflow: auto;
}
.stage-stack > .stage-frame {
  min-height: 0;
}
.zoom-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 200px;
  margin: 0;
  padding: 22px 20px;
  border: 2px solid #484dd2;
  border-radius: 18px;
  overflow: hidden;
  color: #ffffff;
  text-align: right;
  background:
    linear-gradient(105deg, rgba(2, 16, 43, 0.55) 0%, rgba(0, 58, 125, 0.35) 55%, rgba(72, 77, 210, 0.28) 100%),
    url("../assets/zoom-enter.jpg") center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(2, 16, 43, 0.18);
}
.zoom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 40%, rgba(65, 217, 248, 0.18), transparent 32%);
  pointer-events: none;
}
.zoom-cta > * { position: relative; z-index: 1; }
.zoom-cta-faces {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
}
.zoom-cta-amnon {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid #ffffff;
  display: block;
  box-shadow: 0 8px 18px rgba(2, 16, 43, 0.35);
}
.zoom-cta-logo {
  position: absolute;
  left: -8px;
  bottom: -8px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 6px 14px rgba(2, 16, 43, 0.28);
}
.zoom-cta-copy {
  display: grid;
  gap: 4px;
  text-shadow: 0 2px 10px rgba(2, 16, 43, 0.55);
}
.zoom-cta-copy b {
  font-size: 22px;
  font-weight: 850;
}
.zoom-cta-copy small {
  color: rgba(249, 252, 255, 0.92);
  font-weight: 700;
  font-size: 14px;
}
.zoom-cta-copy strong {
  color: #41d9f8;
  font-size: 16px;
  font-weight: 800;
}
.zoom-cta:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(2, 16, 43, 0.22);
}
.thanks-page {
  position: relative;
  overflow: hidden;
}
.confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.thanks-page > *:not(.confetti-canvas) { position: relative; z-index: 2; }
.login-creds {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(65, 217, 248, 0.12), rgba(185, 168, 255, 0.1));
  border: 1px solid rgba(76, 169, 255, 0.28);
}
.login-creds p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-weight: 650;
}
.login-creds span { color: var(--mute); }
.login-creds b { color: var(--ink); }
.mail-warn {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(72, 77, 210, 0.08);
  border: 1px solid rgba(72, 77, 210, 0.22);
}
.mail-warn b { display: block; margin-bottom: 8px; color: var(--ink); }
.mail-warn p { margin: 0 0 8px; color: var(--mute); font-weight: 650; }
.mail-warn p:last-child { margin-bottom: 0; }
.device-block-card,
.bday-card {
  max-width: 480px;
  width: min(92vw, 480px);
}
.zoom-wait-card {
  max-width: 340px;
  width: min(86vw, 340px);
  text-align: center;
  padding: 28px 22px 22px;
}
.zoom-wait-emoji {
  margin: 0 0 8px;
  font-size: 42px;
  line-height: 1;
}
.zoom-wait-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}
.year-cal-card {
  max-width: 720px;
  width: min(96vw, 720px);
  padding: 22px 18px 16px;
}
.device-block-card .device-id {
  margin: 12px 0 16px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  direction: ltr;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(2, 16, 43, 0.06);
}
.cal-nav {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
}
.cal-nav-btn {
  width: 42px;
  height: 42px;
  border: 2px solid #003a7d;
  border-radius: 12px;
  background: #fff;
  color: #02102b;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.cal-nav-btn:hover {
  background: #eef8ff;
}
.cal-month-title {
  text-align: center;
  display: grid;
  gap: 2px;
}
.cal-month-title b {
  font-size: 20px;
  color: #02102b;
}
.cal-month-title small {
  color: #355a7a;
  font-weight: 700;
}
.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-weekdays {
  margin-bottom: 6px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #003a7d;
  padding: 4px 0;
}
.cal-grid {
  background: #ffffff;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e2eaf3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1);
}
.cal-cell {
  position: relative;
  min-height: 74px;
  border-radius: 12px;
  border: 1.5px solid #b8cce0;
  background: #ffffff;
  padding: 6px 5px 8px;
  display: grid;
  align-content: start;
  gap: 2px;
  cursor: default;
  box-shadow: 0 1px 3px rgba(2, 16, 43, 0.08);
}
.cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.cal-cell.is-holiday {
  background: #fff4d6;
  border-color: #f0d48a;
}
.cal-cell.is-off {
  background: #ffe8d6;
  border-color: #f0b48a;
}
.cal-cell.is-lesson {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(65, 217, 248, 0.28), transparent 55%),
    #eefcff;
  border-color: #41d9f8;
  box-shadow: 0 0 0 1px rgba(65, 217, 248, 0.25);
  cursor: pointer;
  min-height: 96px;
}
.cal-cell.is-selected {
  outline: 2px solid #003a7d;
  outline-offset: 1px;
}
.cal-greg {
  font-size: 14px;
  font-weight: 900;
  color: #02102b;
  line-height: 1;
}
.cal-heb {
  font-size: 10px;
  font-weight: 700;
  color: #355a7a;
  line-height: 1.2;
}
.cal-hname {
  font-size: 10px;
  font-weight: 800;
  color: #9a4d00;
  line-height: 1.2;
}
.cal-lesson-mark {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  width: 100%;
  margin-top: 4px;
  text-align: center;
}
.cal-lesson-mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: none;
}
.cal-lesson-mark b {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1px;
  font-size: 10px;
  font-weight: 900;
  color: #003a7d;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  direction: ltr;
  unicode-bidi: isolate;
}
.cal-lesson-mark b .cal-t-start,
.cal-lesson-mark b .cal-t-end {
  display: block;
}
.cal-lesson-mark b .cal-t-end {
  color: #355a7a;
  font-weight: 800;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4e8ee;
}
.cal-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  color: #02102b;
}
.cal-leg-lesson img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cal-leg-holiday::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #ffe8d6;
  border: 1px solid #f0b48a;
}
.cal-detail {
  margin: 10px 0 0;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef8ff;
  border: 1px solid rgba(0, 58, 125, 0.16);
  color: #02102b;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}
.cal-detail:empty {
  display: none;
}
@media (max-width: 640px) {
  .year-topics-pick {
    grid-template-columns: 1fr;
  }
  .cal-cell {
    min-height: 70px;
    padding: 4px 3px 6px;
  }
  .cal-cell.is-lesson {
    min-height: 92px;
  }
  .cal-heb,
  .cal-hname {
    font-size: 9px;
  }
  .cal-lesson-mark img {
    width: 22px;
    height: 22px;
  }
  .cal-lesson-mark b {
    font-size: 9px;
  }
}
.bday-card {
  text-align: center;
  padding: 22px 20px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(185, 168, 255, 0.28), transparent 60%),
    linear-gradient(165deg, #f9fcff, #e8f7ff);
  border: 1px solid rgba(185, 168, 255, 0.4);
  box-shadow: 0 18px 40px rgba(2, 16, 43, 0.18);
}
body.is-bday-week {
  --bday-glow: rgba(185, 168, 255, 0.22);
}
body.is-bday-week .learn-page,
body.is-bday-week .hero {
  box-shadow: inset 0 0 0 1px rgba(185, 168, 255, 0.25);
}
body.is-bday-week .learn-shell {
  background:
    radial-gradient(80% 60% at 100% 0%, var(--bday-glow), transparent 55%),
    transparent;
}
.notify-pick {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  font-weight: 700;
}
.notify-pick select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (max-width: 640px) {
  .learn-top-copy h1 {
    font-size: clamp(18px, 5.5vw, 24px);
  }
  .learn-head {
    min-height: 0;
  }
  .learn-stage-chrome {
    min-height: 52px;
  }
  .learn-head .learn-cal-btn,
  .learn-head .learn-year-cal-btn,
  .learn-head .wa-class-btn {
    max-width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 0;
    max-height: 38px;
  }
  .learn-stage-chrome .learn-cal-btn,
  .learn-stage-chrome .learn-year-cal-btn {
    max-width: 168px;
  }
  .learn-head-center .learn-logo img,
  .learn-stage-chrome .learn-logo img {
    height: 54px;
    max-width: 140px;
  }
  .learn-head-center .learn-banner img,
  .learn-stage-chrome .learn-banner img {
    height: auto;
    max-height: 86px;
    max-width: 100%;
  }
  .zoom-cta {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (min-width: 901px) {
  .staff-lock { bottom: 22px; }
  .admin-stats { grid-template-columns: repeat(4, 1fr); }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-minis { grid-template-columns: 1fr 1fr; }
  .learn-shell { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .notify-actions button { flex: 1 1 120px; }
  .learn-logo { display: flex; }
  .learn-head {
    grid-template-columns: minmax(168px, 280px) minmax(0, 1fr) minmax(118px, 168px);
    align-items: center;
  }
  .learn-head-center { grid-column: 2; justify-items: center; }
  .learn-head-actions { grid-column: 3; }
  .learn-head-actions .learn-year-cal-btn,
  .learn-head-actions .wa-class-btn {
    width: 100%;
    max-width: 230px;
  }

  body.is-learn .learn-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  body.is-learn .learn-shell {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 12px;
    margin-top: 0;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
  }
  body.is-learn .learn-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
    align-items: stretch;
  }
  body.is-learn .learn-action-row {
    width: 100%;
  }
  body.is-learn .learn-side-panel {
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  body.is-learn .learn-side {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: scroll;
  }
  body.is-learn .learn-main {
    min-height: 0;
    height: 100%;
  }
  body.is-learn .learn-stage-box {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  body.is-learn .learn-head .learn-cal-btn,
  body.is-learn .learn-head .learn-year-cal-btn,
  body.is-learn .learn-head .wa-class-btn,
  body.is-learn .learn-stage-chrome .learn-cal-btn,
  body.is-learn .learn-stage-chrome .learn-year-cal-btn,
  .learn-stage-chrome .learn-year-cal-btn {
    max-width: 230px;
  }
}

@media (min-width: 760px) {
  body { padding-bottom: 24px; }
  .sticky-bar { display: none; }
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; padding: 36px 0 42px; }
  .hero-photo { width: min(360px, 100%); }
  .doors { grid-template-columns: 1fr 1fr; }
  .includes { grid-template-columns: 1fr 1fr 1fr; }
  .price-tools { grid-template-columns: 1fr auto; align-items: stretch; }
  .btn-register-top { min-width: 168px; min-height: 52px; }
  .picker-layout {
    grid-template-columns: minmax(280px, 380px) 1fr;
    grid-template-areas: "list detail";
    align-items: start;
  }
  .pay-card { padding: 22px 24px; }
  .clip-grid { grid-template-columns: 1fr 1fr; }
  .course-grid { grid-template-columns: 1fr; }
  .bio-card { grid-template-columns: 160px 1fr; }
  .rooms-board { grid-template-columns: 1fr 1fr; }
}

/* חלון «אינך רשום» + באנר כניסה */
.need-register-stage { position:fixed; inset:0; z-index:94; display:grid; place-items:center; padding:18px 12px; background:rgba(16,32,71,.45); }
.need-register-stage.hidden { display:none; }
.need-register-card { position:relative; width:min(360px,100%); padding:28px 22px 22px; background:#fff; border:2px solid #003a7d; border-radius:22px; text-align:center; box-shadow:0 16px 36px rgba(0,58,125,.22); }
.need-register-card h2 { margin:0 0 16px; color:#003a7d; font-size:22px; font-weight:900; line-height:1.35; }
.need-register-card p { margin:0 0 18px; color:#02102b; font-weight:700; line-height:1.55; }
.need-register-like { font-size: 1.05em; }
.need-register-x { position:absolute; top:8px; inset-inline-start:8px; width:36px; height:36px; border:0; border-radius:50%; background:#eef5ff; color:#003a7d; font-size:26px; line-height:1; cursor:pointer; }
.need-register-actions { display:flex; flex-direction:column; gap:10px; justify-content:center; }
.need-register-actions .btn,
.need-register-login { width:100%; }
.need-register-login { min-height:48px; padding:10px 18px; border:0; border-radius:999px; background:#128a3c; color:#fff; font-family:inherit; font-size:18px; font-weight:900; letter-spacing:0.02em; cursor:pointer; text-shadow:0 1px 0 rgba(0,40,12,.45); box-shadow:0 8px 16px rgba(10,90,40,.28), inset 0 1px 0 rgba(255,255,255,.28); }
/* כפתור «פנו לצוות» בחלוניות הפנייה להרשמה — מוביל לשיחת וואצאפ עם הצוות */
a.need-register-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}
.need-register-wa-ico {
  width: 24px;
  height: 24px;
  display: inline-flex;
  flex: 0 0 auto;
}
.need-register-wa-ico svg {
  width: 100%;
  height: 100%;
}
.account-login-banner { display:block; width:100%; margin:0 0 4px; padding:0; border:0; border-radius:22px; overflow:hidden; background:none; cursor:pointer; line-height:0; box-shadow:0 10px 24px rgba(0,58,125,.16); }
.account-login-banner img { display:block; width:100%; height:auto; max-width:100%; object-fit:cover; }
.site-student-login, .site-student-logout { min-height:40px; padding:8px 16px; border:2px solid #003a7d; border-radius:999px; background:#fff; color:#003a7d; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; }


.learn-action-row .dated-rec-btn {
  white-space: nowrap;
  word-spacing: 0.18em;
}
@media (max-width: 900px) {
  .learn-action-row .dated-rec-btn {
    white-space: normal;
    word-spacing: 0;
  }
}

/* תלמיד בדיקה לא רואה את מנעול הצוות */
body.is-demo-student .staff-lock {
  display: none !important;
}

body.is-design-lab [contenteditable="true"] {
  white-space: pre-wrap;
}

.card-bonus {
  display: block;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid #f6a623;
  background: #fff7e6;
  color: #8a4b00;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  line-height: 1.45;
}
.glass-tools + .glass-cta { margin-top: 10px; }

/* שחזור פרטי התחברות */
.btn-recover {
  margin-top: 10px;
  width: 100%;
  border: 2px solid #003a7d;
  background: #eaf3ff;
  color: #003a7d;
  font: 700 16px/1.2 inherit;
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
}
.btn-recover:hover { background: #dbe9ff; }
.recover-stage {
  position: fixed;
  inset: 0;
  z-index: 94;
  display: grid;
  place-items: center;
  padding: 18px 12px;
  background: rgba(16, 32, 71, 0.55);
}
.recover-stage.hidden { display: none; }
.recover-card {
  position: relative;
  width: min(460px, 100%);
  background: #fff;
  border: 3px solid #02102b;
  border-radius: 18px;
  padding: 24px 22px 20px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.recover-card h2 { margin: 0; color: #003a7d; font-size: 22px; }
.recover-lead { margin: 0; color: #33436e; font-size: 15px; line-height: 1.6; }
.recover-card .field-line { width: 100%; text-align: right; }
.recover-go { width: 100%; }
.recover-x {
  position: absolute;
  inset-inline-start: 12px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #33436e;
  cursor: pointer;
}
.recover-msg { margin: 0; min-height: 20px; font-size: 14px; font-weight: 700; color: #0f7a3d; }
.recover-msg.is-bad { color: #b3261e; }

.product-desk-head h2 { margin: 0 0 4px; }
.product-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
  align-items: center;
}
.product-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dce3eb;
  border-radius: 999px;
  background: #f7fbff;
}
.product-search input {
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
  font: inherit;
}
.product-toolbar select {
  min-height: 42px;
  border: 1px solid #dce3eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 10px;
  font: inherit;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.product-card {
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 58, 125, 0.08);
  cursor: pointer;
}
.product-cover {
  position: relative;
  height: 140px;
  background: #04122c;
}
.product-cover img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.product-cover-edit {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(2, 16, 43, 0.2);
}
.product-card-body { padding: 14px 14px 16px; display: grid; gap: 8px; }
.product-card-body h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.product-kicker { margin: 0; color: #1c4b8c; font-weight: 800; font-size: 12px; }
.product-price { color: #0b3a7a; font-weight: 800; }
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  color: #5b6b80;
  font-weight: 700;
}
.product-students-btn {
  border: 0;
  background: none;
  color: #003a7d;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}
.product-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.product-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.product-pill.is-on { background: #d9f6ea; color: #0d6b45; }
.product-pill.is-wait { background: #fff3c4; color: #7a5b00; }
.product-pill.is-off { background: #eceff3; color: #5b6b80; }
.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
}
.product-actions button {
  border: 0;
  background: #eef6ff;
  color: #003a7d;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 13px;
}
.product-more-btn {
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
}
.product-more-sheet {
  width: min(520px, calc(100% - 24px));
  padding: 22px 18px 16px;
}
.product-more-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  padding-left: 36px;
}
.product-more-head img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
  background: #04122c;
}
.product-more-head small {
  display: block;
  color: #1c4b8c;
  font-weight: 800;
  margin-bottom: 4px;
}
.product-more-head h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
}
.product-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-more-action {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 0;
  padding: 12px 12px 11px;
  border: 1px solid #dce8f5;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  color: #02102b;
  text-align: right;
  cursor: pointer;
}
.product-more-action span {
  font-size: 18px;
  line-height: 1;
}
.product-more-action b {
  font-size: 15px;
}
.product-more-action small {
  color: #5b6b80;
  font-weight: 700;
}
.product-more-action.is-main {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #04122c, #003a7d);
  border-color: transparent;
  color: #fff;
}
.product-more-action.is-main small { color: #9fefff; }
.product-more-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.product-more-action.is-soft {
  background: #f4f7fb;
  border-color: #e4e8ee;
}
.product-more-action.is-danger {
  background: #fff5f4;
  border-color: #f3c8c4;
  color: #b42318;
  font-weight: 800;
}
.product-edit-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #04122c, #003a7d);
  color: #fff;
  box-shadow: 0 8px 18px rgba(2, 16, 43, 0.18);
}
.product-edit-bar[hidden] { display: none !important; }
.product-edit-bar-copy small { display: block; color: #41d9f8; font-weight: 800; }
.product-edit-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.product-edit-bar-actions button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.product-edit-bar-actions button.is-on { background: #41d9f8; color: #02102b; }
.product-edit-bar-actions .product-edit-back {
  background: #ffe566;
  color: #1a1200;
}
.product-lesson-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 8px 6px;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.product-lesson-tools .pl-btn {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #003a7d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #c9def5;
}
.product-lesson-tools .pl-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.product-lesson-tools .pl-handle { cursor: grab; background: #e8f7ff; }
.product-lesson-tools .pl-handle:active { cursor: grabbing; }
.product-lesson-tools .pl-btn.is-danger { background: #fff1f1; color: #9b1c1c; box-shadow: inset 0 0 0 1px #f3c2c2; }
.product-edit-tree-note {
  margin: 0 8px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(65, 217, 248, 0.16);
  color: #d7f7ff;
  font-size: 13px;
  font-weight: 700;
}
.tree-lesson-row.is-dragging { opacity: 0.45; }
body.is-product-edit .tree-lesson-row.is-product-edit {
  display: grid !important;
  background: #fff;
  border: 1px solid #d7e4f4;
  border-radius: 12px;
  margin: 0 6px 10px;
  overflow: visible;
}
body.design-applied.design-tree-style-schooler.is-product-edit .tree-lesson-row.is-product-edit .tree-lesson {
  border: 0;
  border-radius: 0 0 12px 12px;
}
.product-add-lesson {
  padding: 8px;
  margin: 0 6px 10px;
  border-radius: 12px;
  background: rgba(65, 217, 248, 0.14);
}
.product-add-lesson p {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #d7f7ff;
}
.product-add-lesson-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.product-add-lesson button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: #41d9f8;
  color: #02102b;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
}
.product-add-lesson button.is-spot {
  background: #ffe566;
}
.product-modal-stage { z-index: 200; }
.product-modal-card {
  width: min(560px, calc(100% - 24px));
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #fff;
  color: #1c2430;
  border-radius: 18px;
  padding: 22px 20px 18px;
  position: relative;
}
.product-modal-wide { width: min(820px, calc(100% - 24px)); }
.product-settings-form { display: grid; gap: 10px; }
.product-settings-form label { display: grid; gap: 4px; font-weight: 800; }
.product-settings-form input,
.product-settings-form select,
.product-settings-form textarea {
  border: 1px solid #dce3eb;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}
.product-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.product-add-choices { display: grid; gap: 10px; margin: 16px 0; }
.product-library-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.product-library-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #edf1f5;
  border-radius: 12px;
}
.product-library-list small { display: block; color: #5b6b80; }
.product-enroll-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.product-warn {
  background: #fff3c4;
  color: #5c4300;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
}
.product-cover-preview img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 700px) {
  .product-more-grid,
  .product-more-foot { grid-template-columns: 1fr; }
}

.about-wrap {
  width: min(780px, calc(100% - 28px));
  padding-top: 8px;
}
.about-hero {
  display: grid;
  grid-template-columns: minmax(168px, 230px) minmax(0, 1fr);
  gap: 22px 28px;
  align-items: center;
  margin: 0 0 22px;
}
.about-photo {
  margin: 0;
}
.about-photo-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background:
    radial-gradient(90% 80% at 20% 12%, rgba(65, 217, 248, 0.35), transparent 55%),
    linear-gradient(165deg, #eef9ff 0%, #d7ecff 42%, #c5d8f4 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 18px 36px rgba(0, 58, 125, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-photo-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
  color: var(--navy);
}
.about-photo-mark {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 58, 125, 0.22));
}
.about-photo-wait b {
  font-family: "Heebo", "Rubik", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.about-hero-copy .kicker {
  font-family: "Heebo", "Rubik", sans-serif;
  letter-spacing: 0.02em;
}
.about-hero-copy h1 {
  margin: 0;
  font-family: "Heebo", "Rubik", sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--navy);
}
.about-story {
  padding: 26px 26px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(0, 58, 125, 0.08);
  backdrop-filter: blur(10px);
}
.about-story p {
  margin: 0 0 18px;
  font-family: "Noto Sans Hebrew", "Rubik", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  color: #16345c;
}
.about-story p:last-child {
  margin-bottom: 0;
}
.about-say,
.about-goal,
.about-close {
  padding: 14px 18px;
  border-radius: 18px;
}
.about-say {
  background: linear-gradient(180deg, #f3fbff 0%, #e7f4ff 100%);
  color: var(--navy);
  font-weight: 800;
  border-right: 4px solid var(--cyan-bright);
}
.about-goal {
  background: var(--navy);
  color: #effaff;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.7;
}
.about-close {
  background: linear-gradient(135deg, rgba(65, 217, 248, 0.16), rgba(72, 77, 210, 0.1));
  color: var(--navy);
  font-weight: 800;
}
@media (max-width: 720px) {
  .about-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .about-photo {
    width: min(240px, 68vw);
  }
  .about-story {
    padding: 20px 16px 22px;
  }
  .about-story p {
    font-size: 17px;
  }
}

body.design-tree-style-schooler .product-edit-tree-note,
body.design-tree-style-schooler .product-add-lesson p {
  color: #003a7d;
  background: #e7f4ff;
}
body.design-tree-style-schooler .product-add-lesson {
  background: #eef7ff;
}

.site-tour {
  position: fixed;
  inset: 0;
  z-index: 240;
}
.site-tour[hidden] { display: none !important; }
.site-tour-spot {
  position: fixed;
  border-radius: 18px;
  box-shadow: 0 0 0 3px #41d9f8, 0 0 24px 4px rgba(65, 217, 248, 0.55), 0 0 0 9999px rgba(2, 16, 43, 0.72);
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
  z-index: 241;
  animation: siteTourPulse 2.4s ease-in-out infinite;
}
@keyframes siteTourPulse {
  0%, 100% { box-shadow: 0 0 0 3px #41d9f8, 0 0 24px 4px rgba(65, 217, 248, 0.55), 0 0 0 9999px rgba(2, 16, 43, 0.72); }
  50% { box-shadow: 0 0 0 5px rgba(65, 217, 248, 0.75), 0 0 42px 12px rgba(72, 77, 210, 0.5), 0 0 0 9999px rgba(2, 16, 43, 0.72); }
}
.site-tour-card {
  position: fixed;
  z-index: 242;
  width: min(400px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #02102b;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 24px 60px rgba(0, 58, 125, 0.22), 0 4px 16px rgba(72, 77, 210, 0.12);
  animation: siteTourCardIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.site-tour-card::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.88);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}
.site-tour-card.is-above::after { top: auto; bottom: -9px; }
@keyframes siteTourCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.site-tour-accent {
  display: block;
  height: 6px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(to left, #41d9f8, #484dd2, #003a7d);
}
.site-tour-inner { padding: 20px 24px 20px; }
.site-tour-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.site-tour-card .site-tour-step {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #484dd2;
  background: rgba(72, 77, 210, 0.1);
  padding: 5px 13px;
  border-radius: 999px;
}
.site-tour-dots { display: flex; gap: 5px; align-items: center; }
.site-tour-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d3dcf0;
  transition: width 0.3s ease, background 0.3s ease;
}
.site-tour-dots i.is-done { background: #41d9f8; }
.site-tour-dots i.is-now { width: 18px; background: #484dd2; }
.site-tour-card h2 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 900;
  color: #003a7d;
  line-height: 1.25;
}
.site-tour-card p#siteTourText {
  margin: 0 0 18px;
  font-size: 16.5px;
  font-weight: 500;
  color: rgba(52, 58, 160, 0.85);
  line-height: 1.65;
}
.site-tour-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.site-tour-actions button {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  padding: 10px 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15.5px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.site-tour-actions button:active { transform: scale(0.97); }
.site-tour-actions [data-tour-next] {
  background: linear-gradient(to left, #003a7d, #484dd2);
  color: #fff;
  box-shadow: 0 10px 22px rgba(72, 77, 210, 0.35);
}
.site-tour-actions [data-tour-next]:hover { box-shadow: 0 12px 26px rgba(72, 77, 210, 0.48); }
.site-tour-actions [data-tour-prev] {
  background: transparent;
  border: 2px solid #e4e9f6;
  color: #8a93ad;
}
.site-tour-actions [data-tour-prev]:hover {
  background: #f4f7ff;
  color: #484dd2;
  border-color: rgba(72, 77, 210, 0.35);
}
.site-tour-actions [data-tour-prev]:disabled { opacity: 0.45; cursor: default; }
.site-tour-exit {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  background: #fcd34d;
  color: #854d0e;
  font-family: inherit;
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(252, 211, 77, 0.4);
  transition: background 0.2s ease, transform 0.15s ease;
}
.site-tour-exit:hover { background: #fbbf24; }
.site-tour-exit:active { transform: scale(0.98); }
body.is-site-tour { overflow: hidden; }

/* מסך התצוגה: עיפרון להחלפת תמונה, גלוי רק לאמנון במצב מנהל */
.stage-home { position: relative; }
.stage-home .zoom-enter.is-static {
  display: block;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(65, 217, 248, 0.28);
}
.stage-home .zoom-enter.is-static img { width: 100%; height: auto; display: block; }
.stage-home .stage-img-edit {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #003a7d;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 58, 125, 0.28);
}
.stage-home .stage-img-edit:hover { background: #fff; }

/* כפתור אדום ליציאה מדף מנהל */
.top-nav .site-staff-exit { min-height:40px; padding:8px 16px; border:2px solid #c81e1e; border-radius:999px; background:#c81e1e; color:#fff; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.top-nav .site-staff-exit:hover { background:#a51717; border-color:#a51717; }
.top-nav .site-staff-exit[hidden] { display:none; }

.student-login .remember-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #003a7d;
  cursor: pointer;
}

.student-login .remember-line input {
  width: 18px;
  height: 18px;
  accent-color: #003a7d;
  flex: 0 0 auto;
}


/* חלונית פרטי יום בלוח השנה */
.cal-day-pop {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 6;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 2px solid #003a7d;
  background: #fff;
  box-shadow: 0 18px 40px rgba(4, 18, 44, 0.28);
  text-align: start;
}
.cal-day-pop.hidden { display: none; }
.cal-day-pop h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #003a7d;
}
.cal-pop-holiday {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #b4341f;
}
.cal-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #04122c;
}
.cal-pop-row img { width: 20px; height: 20px; object-fit: contain; }
.cal-pop-row small { display: block; font-size: 12px; font-weight: 700; color: #3b4a63; }
.cal-pop-x {
  position: absolute;
  inset-inline-end: 8px;
  top: 6px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #04122c;
}
#yearCalStage .sched-card { position: relative; }

.device-lock-stage {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(4, 18, 44, 0.62);
  padding: 18px;
}
.device-lock-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(4, 18, 44, 0.3);
}
.device-lock-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #003a7d;
}
.device-lock-card p {
  margin: 0 0 16px;
  color: #33415c;
  line-height: 1.5;
}
.device-lock-actions {
  display: grid;
  gap: 10px;
}


/* תווית מי מחובר עכשיו: מנהל, תלמיד או אורח */
.site-viewer-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font:700 14px/1.2 "Heebo","Noto Sans Hebrew",Rubik,sans-serif;
  background:#eaf1ff;color:#003a7d;border:1px solid #b9d1f5;
}
.site-viewer-badge[data-viewer-mode="staff"]{background:#ffe8e8;color:#a01212;border-color:#f3b6b6}
.site-viewer-badge[data-viewer-mode="student"]{background:#e6f8ee;color:#0d6b3d;border-color:#a9e3c4}
.site-viewer-badge[data-viewer-mode="guest"]{background:#f1f3f8;color:#4a5670;border-color:#d5dae6}
@media (max-width:900px){
  .site-viewer-badge{padding:4px 10px;font-size:12px}
}

/* Chrome install guide lightbox */
.chrome-guide-btn {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #003a7d, #484dd2);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 58, 125, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chrome-guide-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 58, 125, 0.34);
}
.chrome-guide-stage {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 20, 45, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chrome-guide-stage.hidden {
  display: none;
}
.chrome-guide-card {
  position: relative;
  width: fit-content;
  max-width: min(520px, 94vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 30px 80px rgba(0, 20, 50, 0.45);
  animation: chromeGuideIn 0.22s ease;
}
.chrome-guide-card img {
  display: block;
  width: 100%;
  max-height: calc(90vh - 28px);
  object-fit: contain;
  border-radius: 16px;
}
.chrome-guide-x {
  position: absolute;
  top: -14px;
  inset-inline-start: -14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #003a7d;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 20, 50, 0.35);
  display: grid;
  place-items: center;
}
@keyframes chromeGuideIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .chrome-guide-card {
    max-width: 94vw;
    padding: 10px;
    border-radius: 20px;
  }
  .chrome-guide-card img {
    max-height: calc(88vh - 20px);
    border-radius: 12px;
  }
  .chrome-guide-stage {
    padding: 10px;
  }
}

/* Phone and tablet: keep the player fixed while only the lesson rail scrolls. */
@media (max-width: 900px) {
  body.is-learn {
    display: flex;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body.is-learn > main,
  body.is-learn .learn-page,
  body.is-learn .learn-wrap,
  body.is-learn .learn-shell {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  body.is-learn .learn-page {
    display: flex;
    padding: 4px 0 12px;
  }
  body.is-learn .learn-wrap {
    display: flex;
  }
  body.is-learn .learn-side-panel,
  body.is-learn .learn-side {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
  body.is-learn .learn-side-panel {
    overflow: hidden;
  }
  body.is-learn .learn-side {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* 20260910: ברכת התלמיד עלתה לסרגל העליון, כטקסט נקי ולא ככפתור */
.kid-hello-top {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0 auto;
  gap: 8px;
  color: var(--ink);
}
.kid-hello-top .kid-hello-mark,
.kid-hello-top .kid-hello-smile-img {
  width: 34px;
  height: 34px;
}
.kid-hello-top .kid-hello-copy b {
  color: #003a7d;
  font-size: 15px;
}
.kid-hello-top .kid-hello-copy small {
  color: #484dd2;
  font-size: 11.5px;
}
@media (max-width: 620px) {
  .kid-hello-top .kid-hello-mark,
  .kid-hello-top .kid-hello-smile-img { width: 26px; height: 26px; }
  .kid-hello-top .kid-hello-copy b { font-size: 13px; }
  .kid-hello-top .kid-hello-copy small { font-size: 10px; }
}

/* 20260910: רווח קטן יותר בין כפתור הזום לכפתור ההקלטות, במחשב בלבד */
@media (min-width: 901px) {
  .learn-action-row { gap: 3px; }

  /* במחשב בלבד תמונת מסך התצוגה ממלאת את המסגרת בלי רווחים בצדדים. */
  body.is-learn .learn-stage .stage-home .zoom-enter img {
    object-fit: cover;
  }
}

/* 20260910: סרגל השיעורים והקפסולות מוצגים במלואם */
.learn-side-panel {
  position: relative;
  border-radius: 18px;
  padding-bottom: 0;
}
body.is-learn .learn-side-panel {
  max-height: none;
}
.learn-side {
  max-height: none;
  padding-bottom: 26px;
  scroll-padding-block: 10px 26px;
  overscroll-behavior: contain;
}
.tree-lesson {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.tree-lesson-title {
  align-items: stretch;
}
.tree-lesson-title-text {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.tree-lesson-meta {
  white-space: normal;
  overflow-wrap: anywhere;
}
.learn-side-panel::after {
  display: none;
}
@media (max-width: 900px) {
  .learn-side {
    max-height: none;
    padding-bottom: 14px;
  }
}

/* ===== עריכת הנושאים הנלמדים · אדמין ===== */
.year-topic-note { font-weight: 800; }
.year-topic-note.is-red { color: #d92626; }
.year-topic-note.is-green { color: #0a8a3d; }
.year-topics-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.year-topics-admin .yt-hint { font-size: 12px; color: #4a5a7a; font-weight: 600; }
.yt-btn {
  border: 1px solid #c7d4ea;
  background: #fff;
  color: #003a7d;
  border-radius: 12px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.yt-btn-main { background: #003a7d; color: #fff; border-color: #003a7d; }
.year-topics-list.is-editing li { list-style: disc; }
.year-topics-list.is-editing li .yt-actions {
  display: inline-flex;
  gap: 4px;
  margin-inline-start: 8px;
  vertical-align: middle;
}
.yt-mini {
  border: 1px solid #c7d4ea;
  background: #f4f8ff;
  color: #003a7d;
  border-radius: 8px;
  width: 26px;
  height: 26px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yt-mini[disabled] { opacity: .35; cursor: default; }
.yt-mini.yt-danger { color: #b00020; border-color: #f0c2c8; background: #fff5f6; }
.yt-editor {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 10px;
  border: 1px solid #d6e2f5;
  border-radius: 14px;
  background: #f8fbff;
}
.yt-editor label { display: grid; gap: 4px; font-size: 12px; font-weight: 800; color: #003a7d; }
.yt-editor input,
.yt-editor select {
  border: 1px solid #c7d4ea;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.yt-editor-actions { display: flex; gap: 8px; }
.year-topics-add { margin-top: 10px; }

/* הקמת תלמיד וקישור תשלום מיוחד בניהול */
.grant-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 10px 0; }
.grant-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: #003a7d; }
.grant-form input, .grant-form select { padding: 9px 11px; border: 1px solid #d8e2f2; border-radius: 12px; font: inherit; }
.grant-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.grant-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; background: #f3f7ff; border-radius: 999px; padding: 6px 12px; }
.grant-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #f7faff; border: 1px solid #e3ebf8; border-radius: 14px; padding: 10px 12px; }
.grant-row small { color: #5a6b85; }
.grant-row input { flex: 1 1 240px; min-width: 180px; padding: 7px 10px; border: 1px solid #d8e2f2; border-radius: 10px; font-size: 13px; }
.grant-row button { border: 0; background: #003a7d; color: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.grant-row [data-grant-del], .grant-row [data-offer-del] { background: #c0392b; }
/* grant multi-select dropdown */
.grant-multi { width: 100%; border: 1px solid #c9d6f2; border-radius: 14px; padding: 8px; font-size: 14px; background: #f7faff; color: #003a7d; margin-bottom: 10px; }
.grant-multi option { padding: 6px 10px; border-radius: 8px; }
.grant-multi option:checked { background: #003a7d; color: #fff; }

/* 20261005: tablets (JS adds .is-tablet-stack up to 1024px, or touch tablets up to 1366px)
   use the phone order: player pinned at the top, only the lesson list scrolls below. Desktop is untouched. */
body.is-learn.is-tablet-stack {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
body.is-learn.is-tablet-stack > main,
body.is-learn.is-tablet-stack .learn-page,
body.is-learn.is-tablet-stack .learn-wrap {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.is-learn.is-tablet-stack .learn-page { padding: 6px 0 10px; }
body.is-learn.is-tablet-stack .learn-wrap { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
body.is-learn.is-tablet-stack .learn-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas: "head" "stage" "actions" "list";
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.is-learn.is-tablet-stack .learn-main,
body.is-learn.is-tablet-stack .learn-rail { display: contents; }
body.is-learn.is-tablet-stack .learn-head { grid-area: head; }
body.is-learn.is-tablet-stack .learn-action-row { grid-area: actions; width: 100%; }
body.is-learn.is-tablet-stack .learn-stage-stack { grid-area: stage; min-height: 0; flex: none; }
body.is-learn.is-tablet-stack .learn-stage-box {
  flex: none;
  width: min(100%, calc(46dvh * 16 / 9));
  margin-inline: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 46dvh;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
}
body.is-learn.is-tablet-stack .learn-stage-box .learn-stage { height: 100%; min-height: 0; }
body.is-learn.is-tablet-stack .learn-side-panel {
  grid-area: list;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.is-learn.is-tablet-stack .learn-side {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.is-learn.is-tablet-stack.is-mobile-zoom .learn-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head" "stage" "list";
}
body.is-learn.is-tablet-stack.is-mobile-zoom .learn-action-row { display: none !important; }
@media (orientation: landscape) and (max-height: 820px) {
  body.is-learn.is-tablet-stack .learn-stage-box { max-height: 40dvh; width: min(100%, calc(40dvh * 16 / 9)); }
}
.dated-rec-play .dated-rec-name { display: block; font-weight: 700; }
.dated-rec-play .dated-rec-date { display: block; font-size: .82em; opacity: .8; font-weight: 500; }
.stage-home .stage-img-scope {
  position: absolute; inset-inline-end: 10px; inset-block-start: 10px; z-index: 3;
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 6px 16px rgba(0,58,125,.28);
  font: 700 12px Heebo, sans-serif; color: #003a7d; line-height: 1.2;
}
.stage-home .stage-img-scope label { display: flex; align-items: center; gap: 6px; }
.stage-home .stage-img-scope select { max-width: 200px; font: inherit; border: 1px solid #b9d1f5; border-radius: 8px; padding: 3px 4px; background: #fff; color: #003a7d; }
.stage-home .stage-img-scope .stage-img-edit { position: static; box-shadow: none; }
/* Tablet stack: compact action buttons like phones so the lesson list stays on screen. */
body.is-learn.is-tablet-stack .learn-action-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
body.is-learn.is-tablet-stack .learn-zoom-slot,
body.is-learn.is-tablet-stack .learn-rec-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; }
body.is-learn.is-tablet-stack .learn-action-row .dated-rec-btn { height: auto; min-height: 52px; max-height: none; padding: 8px 12px; }
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: none; height: auto; min-height: 52px; padding: 8px 16px;
  border: 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #0b3fa8 0%, #2563eb 100%); color: #fff;
}
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn[hidden] { display: none; }
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn img { display: none; }
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn .zoom-live-face { display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn .zoom-live-ico svg { display: block; width: 22px; height: 22px; }
body.is-learn.is-tablet-stack .learn-rail .zoom-live-btn .zoom-live-copy { display: block; font-size: 16px; font-weight: 800; text-align: center; }
body.is-learn.is-tablet-stack .learn-side-panel { min-height: 140px; }

/* Products: annual tracks section */
.product-section { margin-top: 18px; }
.product-section-title { margin: 0 0 4px; font-size: 1.15rem; color: #003a7d; }
.product-section-title small { font-weight: 500; color: #5b6b86; }
.product-annual-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: #e6f6fd; color: #003a7d; font-size: .78em; font-weight: 600; }

/* Student product checklist (touch friendly, searchable) */
/* בוחר מוצרים: סלקטורים חזקים מ-.pupil-tracks-form label ומעיצוב input כללי. שורה = תיבה + טקסט, גובה לפי התוכן. */
.prod-pick { display: grid; gap: 8px; margin: 8px 0; min-width: 0; }
.prod-pick .prod-pick-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid #c9d6ee; border-radius: 12px; background: #fff; color: #12315c; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.prod-pick .prod-pick-toggle .prod-pick-caret { color: #003a7d; transition: transform .15s ease; }
.prod-pick .prod-pick-toggle[aria-expanded="true"] .prod-pick-caret { transform: rotate(180deg); }
.prod-pick .prod-pick-panel { display: grid; gap: 8px; }
.prod-pick .prod-pick-panel[hidden] { display: none; }
.prod-pick input.prod-pick-q { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #c9d6ee; border-radius: 12px; font: inherit; box-sizing: border-box; }
.prod-pick .prod-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding: 2px; min-width: 0; }
.prod-pick .prod-pick-list > label.prod-pick-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 0;
  flex: 0 0 auto; height: auto; min-height: 48px; max-height: none; overflow: visible;
  margin: 0; padding: 10px 12px; box-sizing: border-box; width: 100%;
  border: 1px solid #dfe7f5; border-radius: 12px; background: #fff; color: #1c2430; font-weight: 500;
  cursor: pointer; text-align: start; direction: rtl;
}
.prod-pick .prod-pick-list > label.prod-pick-row[hidden] { display: none; }
.prod-pick .prod-pick-list > label.prod-pick-row > input[type="checkbox"] {
  grid-column: 1; grid-row: 1; justify-self: center;
  appearance: auto; -webkit-appearance: checkbox; width: 22px; height: 22px; min-width: 22px; min-height: 0; max-width: 22px;
  margin: 2px 0 0; padding: 0; border: 0; box-sizing: border-box; box-shadow: none; background: none; flex: none; accent-color: #003a7d; cursor: pointer;
}
.prod-pick .prod-pick-list > label.prod-pick-row > .prod-pick-text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; word-break: normal; white-space: normal; line-height: 1.4; }
.prod-pick .prod-pick-list > label.prod-pick-row > .prod-pick-text b { font-size: 15px; font-weight: 750; color: #12315c; }
.prod-pick .prod-pick-list > label.prod-pick-row > .prod-pick-text small { display: block; font-size: 13px; color: #5b6b86; font-weight: 500; margin: 0; }
.prod-pick .prod-pick-list > label.prod-pick-row:has(input:checked) { border-color: #003a7d; background: #eef5ff; box-shadow: inset -4px 0 0 #003a7d; }
.prod-pick .prod-pick-list > label.prod-pick-row:focus-within { outline: 2px solid #41d9f8; outline-offset: 1px; }
.prod-pick .prod-pick-list > label.prod-pick-row.is-all { background: #fff8e6; border-color: #e9c46a; }
.prod-pick .prod-pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prod-pick .prod-pick-tools .prod-pick-tool { min-height: 40px; padding: 6px 14px; border: 1px solid #c9d6ee; border-radius: 999px; background: #fff; color: #003a7d; font: inherit; font-weight: 700; cursor: pointer; }
.prod-pick .prod-pick-tools .prod-pick-count { margin: 0; margin-inline-start: auto; }
.pupil-tracks-form > button[type="submit"] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 16px rgba(244, 248, 253, .95); }
.prod-pick-lock { color: #8a5a00 !important; }

.staff-home-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);left:12px;z-index:9999;background:#003a7d;color:#fff;border:0;border-radius:999px;padding:10px 18px;font:600 15px/1.2 Heebo,"Noto Sans Hebrew",sans-serif;box-shadow:0 6px 18px rgba(0,58,125,.3);min-height:44px;cursor:pointer}
.staff-home-btn:focus-visible{outline:3px solid #41d9f8;outline-offset:2px}
.staff-home-btn[hidden]{display:none}
/* תמונות מסך התצוגה מוצגות במלואן */
.stage-home .zoom-enter img{object-fit:contain!important;object-position:center;background:rgba(0,58,125,.06)}
/* תצפית לפי מוצר + זמינות */
.product-preview-picker{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:12px;z-index:9999;background:#fff;border:1px solid rgba(0,58,125,.2);border-radius:14px;padding:6px 10px;box-shadow:0 6px 18px rgba(0,58,125,.18);font:600 14px/1.2 Heebo,"Noto Sans Hebrew",sans-serif;color:#003a7d;max-width:min(320px,calc(100vw - 24px))}
.product-preview-picker[hidden]{display:none}
body:has(#pupilStage:not(.hidden)) .product-preview-picker,body:has(#noteStage) .product-preview-picker{display:none}
.product-preview-picker label{display:flex;align-items:center;gap:8px}
.product-preview-picker select{min-height:40px;max-width:200px;border-radius:10px;border:1px solid rgba(0,58,125,.3);padding:4px 8px;font:inherit}
.product-preview-picker select:focus-visible{outline:3px solid #41d9f8;outline-offset:1px}
.pa-badge{display:inline-block;font-style:normal;font-size:12px;font-weight:600;border-radius:999px;padding:2px 8px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
.pa-badge.is-open{background:#e3f7ec;color:#11683b}
.pa-badge.is-free{background:#fff4d6;color:#7a5200}
.pa-badge.is-locked{background:#eceff5;color:#3d4a63}
.pa-badge.is-scheduled{background:#e5f0ff;color:#003a7d}
.pa-badge.is-closed{background:#fde8e8;color:#8a1f1f}
.tree-lesson.is-pa-blocked{opacity:.75}
.pa-product-note{margin:8px auto;max-width:960px;padding:10px 14px;border-radius:12px;background:#e5f0ff;color:#003a7d;font-weight:600;text-align:center}
.avail-fields{border:1px solid rgba(0,58,125,.2);border-radius:12px;padding:10px 12px;display:grid;gap:8px}
.avail-fields legend{padding:0 6px;font-weight:700;color:#003a7d}
.avail-error{color:#8a1f1f;font-weight:600;margin:0}
.is-product-preview .product-lesson-tools,.is-product-preview .stage-edit-pencil,.is-product-preview [data-pe-add]{display:none!important}
/* Phones/tablets: the bottom edge belongs to the lesson list while dragging; keep the product picker as a compact chip beside the dashboard button. */
@media (max-width: 820px){
  .product-preview-picker{top:calc(env(safe-area-inset-top,0px) + 66px)!important;bottom:auto!important;left:auto!important;right:10px!important;max-width:calc(100vw - 214px)!important;padding:4px 6px!important;}
  .product-preview-picker > span,.product-preview-picker label > span:first-child{display:none!important;}
  .product-preview-picker select{min-height:40px;max-width:100%;font-size:13px;}
}
.product-preview-picker.is-docked{position:static!important;inset:auto!important;max-width:none!important;width:auto!important;margin:0 0 10px!important;display:flex!important;justify-content:flex-start;box-shadow:none!important;}
.product-preview-picker.is-docked > label > span{display:inline!important;}
.product-preview-picker.is-docked[hidden]{display:none!important;}
body.is-lesson-edit .product-preview-picker.is-docked{display:none!important;} /* editing a list: keep the full list height; the picker returns when editing ends */
.master-preview-banner{position:sticky;top:0;z-index:10000;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;padding:8px 14px;background:#fff4d6;color:#5a3b00;border-bottom:2px solid #f0b429;font:700 14px/1.4 Heebo,"Noto Sans Hebrew",sans-serif;text-align:center}
.master-preview-banner button,.master-preview-toggle{min-height:40px;border-radius:999px;border:1px solid #003a7d;background:#003a7d;color:#fff;padding:6px 16px;font:700 14px Heebo,sans-serif;cursor:pointer}
.master-preview-toggle{display:block;margin:10px auto;background:#fff;color:#003a7d}
.landing-card{background:#fff;border:1px solid rgba(0,58,125,.15);border-radius:18px;padding:16px;display:grid;gap:10px;box-shadow:0 6px 18px rgba(0,58,125,.08)}
.landing-card header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline}
.landing-card h3{margin:0;color:#003a7d}
.landing-note,.landing-state{margin:0;font-size:14px;line-height:1.5}
.landing-actions{display:flex;flex-wrap:wrap;gap:8px}
.landing-card button{min-height:44px;border-radius:999px;border:1px solid #003a7d;background:#003a7d;color:#fff;padding:8px 16px;font:700 14px Heebo,sans-serif;cursor:pointer}
.landing-card button:disabled{opacity:.55;cursor:wait}
.landing-src{align-self:center;color:#003a7d;font-weight:700}
.landing-review{border-top:1px dashed rgba(0,58,125,.2);padding-top:10px;display:grid;gap:8px}
.landing-facts{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:14px}
.landing-ack{display:flex;gap:8px;align-items:flex-start;font-weight:700}
.landing-ack input{width:22px;height:22px;min-height:0;flex:0 0 auto}
.landing-apply{background:#f0b429!important;color:#1b1b1b!important;border-color:#c48a00!important}
.landing-msg{margin:0;font-weight:700;color:#003a7d;min-height:1.2em}
.landing-history ul{margin:6px 0 0;padding-inline-start:18px;display:grid;gap:6px}
.landing-blocked{border:1px solid #c0392b;background:#fdf0ef;color:#7a1a12;border-radius:12px;padding:10px 14px}.landing-blocked ul{margin:6px 0 0;padding-inline-start:18px}

/* Source tag on the main student list (manual grant / invite / purchase) */
.stu-src-tag {
  display: inline-block;
  margin-top: 4px;
  margin-inline-end: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #003a7d;
  font-size: 0.75rem;
  font-weight: 700;
}
.pupil-pass-set { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.pupil-pass-set label { display: grid; gap: 4px; flex: 1 1 180px; }
.pupil-pass-out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pupil-pass-out[hidden] { display: none; }

/* Student card: one sticky save bar */
.pupil-savebar { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 6px; margin-top: 12px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0)); }
.pupil-save-all { width: 100%; min-height: 48px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1rem; color: #fff; cursor: pointer; }
.pupil-save-all.is-clean { background: #1f9d55; }
.pupil-save-all.is-dirty { background: #c62828; }
.pupil-save-all:disabled { cursor: default; }
.pupil-save-all.is-dirty:disabled { opacity: 0.85; }
.pupil-save-error { margin: 0; color: #c62828; font-weight: 700; text-align: center; }

/* Compact learning navigation and one-row course actions */
.learning-nav-logo { display: none; }
body.is-learn .learning-nav-logo {
  display: block;
  width: 52px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 52px;
  border-radius: 4px;
}
body.is-learn .learn-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-block: 0 2px;
}
body.is-learn .learn-head-center {
  grid-column: 1;
  grid-row: 1;
  justify-items: center;
}
body.is-learn .learn-head-actions {
  grid-column: 1;
  grid-row: 2;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: rtl;
  gap: 8px;
}
body.is-learn .learn-head-actions .learn-year-cal-btn,
body.is-learn .learn-head-actions .wa-class-btn {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 4px 8px;
  justify-content: center;
}
body.is-learn .learn-head-actions > [hidden] { display: none; }
body.is-learn .learn-top-copy h1 { margin: 0; text-align: center; }
body.is-learn .learn-shell { margin-top: 2px; }
@media (max-width: 900px) {
  body.is-learn .top-nav {
    display: grid;
    grid-template-columns: auto auto 40px minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
  }
  body.is-learn .top-nav .site-menu-open {
    min-width: 0;
    padding: 8px 10px;
    font-size: 15px;
  }
  body.is-learn .top-nav .site-home-btn { padding: 6px 8px; }
  body.is-learn .learning-nav-logo { width: 40px; height: 30px; }
  body.is-learn .kid-hello-top { min-width: 0; margin: 0; gap: 4px; justify-content: flex-start; }
  body.is-learn .kid-hello-top .kid-hello-copy { min-width: 0; }
  body.is-learn .kid-hello-top .kid-hello-copy b { font-size: 12px; overflow-wrap: anywhere; }
  body.is-learn .kid-hello-top .kid-hello-copy small { font-size: 10px; }
  body.is-learn .kid-hello-top .kid-hello-mark,
  body.is-learn .kid-hello-top .kid-hello-smile-img { width: 22px; height: 22px; flex: 0 0 22px; }
  body.is-learn .top-nav .site-student-login,
  body.is-learn .top-nav .site-student-logout { padding: 6px 8px; min-width: 0; font-size: 12px; }
}

/* Desktop: logo, course title and Zoom/WhatsApp buttons in one row above the display */
@media (min-width: 1025px) {
  body.is-learn:not(.is-tablet-stack) .learning-nav-logo { display: none; }
  body.is-learn:not(.is-tablet-stack) .learn-head {
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(150px, 230px);
    align-items: center;
    gap: 10px;
  }
  body.is-learn:not(.is-tablet-stack) .learn-head .learn-logo { display: flex; grid-column: 1; grid-row: 1; justify-content: flex-start; align-items: center; }
  body.is-learn:not(.is-tablet-stack) .learn-head .learn-logo img.learn-logo-wide { display: block; width: 150px; height: auto; }
  body.is-learn:not(.is-tablet-stack) .learn-head-center { grid-column: 2; grid-row: 1; align-self: center; }
  body.is-learn:not(.is-tablet-stack) .learn-head-actions {
    grid-column: 3; grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
    gap: 6px;
  }
}
/* Phone and tablet: menu, student login, home, then the logo at the far left */
@media (max-width: 1024px) {
  body.is-learn .learn-head .learn-logo { display: none; }
}
@media (max-width: 1024px) {
  body.is-learn .top-nav {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.is-learn .top-nav > * { order: 5; flex: 0 0 auto; }
  body.is-learn .top-nav .site-menu-open { order: 1; }
  body.is-learn .top-nav .kid-hello-top { order: 2; flex: 0 1 auto; min-width: 0; }
  body.is-learn .top-nav .site-student-login,
  body.is-learn .top-nav .site-student-logout,
  body.is-learn .top-nav .site-staff-exit {
    order: 2; width: auto; max-width: none; min-width: 0;
    padding: 6px 10px; font-size: 13px; line-height: 1.2; height: auto; white-space: nowrap;
  }
  body.is-learn .top-nav .site-home-btn { order: 3; }
  body.is-learn .top-nav .learning-nav-logo {
    display: block; order: 4; margin-inline-start: auto;
    height: 40px; width: auto; max-width: 90px; flex: 0 0 auto; object-fit: contain;
  }
}
@media (max-width: 1024px) {
  body.is-learn.is-tablet-stack .learn-head .learn-logo { display: none; }
}
@media (min-width: 1025px) {
  /* הכיתוב יושב בתיבה בלתי נראית משלו ולעולם לא נכנס מתחת לכפתורים */
  body.is-learn:not(.is-tablet-stack) .learn-head-center { min-width: 0; max-width: 100%; }
  body.is-learn:not(.is-tablet-stack) .learn-head .learn-top-copy { min-width: 0; max-width: 100%; width: 100%; justify-items: center; }
  body.is-learn:not(.is-tablet-stack) .learn-head .learn-top-copy h1 {
    zoom: 0.62;
    min-width: 0;
    max-width: 100%;
    line-height: 1.15 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }
}

/* Recording admin row actions: open / copy / edit / delete */
.rec-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rec-admin-actions button {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 58, 125, 0.25);
  background: #ffffff;
  color: #003a7d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.rec-admin-actions button:hover { background: #eef2fc; }
.rec-admin-actions [data-rec-del] { color: #b3261e; border-color: rgba(179, 38, 30, 0.35); }
.rec-admin-actions .rec-admin-save {
  background: #003a7d;
  color: #ffffff;
  border-color: #003a7d;
}
.rec-admin-url {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5b6b9a;
  direction: ltr;
  text-align: right;
}
.rec-admin-edit {
  display: grid;
  gap: 8px;
  flex: 1 1 100%;
}
.rec-admin-edit label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #003a7d;
}
.rec-admin-edit input,
.rec-admin-edit select {
  min-height: 40px;
  border-radius: 10px;
  border: 2px solid rgba(0, 58, 125, 0.16);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 15px;
}