/* Nagan Platform — global styles (dark, hi-tech, RTL-first) */
:root {
  --bg: #0d0f1a;
  --bg2: #12152400;
  --card: #171a2b;
  --card-edge: #262b45;
  --txt: #eef0fa;
  --dim: #9aa1c0;
  /* ⚠ PLAT 5.4 — הגלילה לצבע-אחד. הערכים מצביעים על המשתנים
     ש-`glass.css` מגדיר, כדי שלפלטה יהיה **מקור-אמת אחד**.
     קודם היו שתי פלטות מקבילות והמסך הראה סגול, תכלת, ורוד וזהב יחד. */
  --acc: var(--accent, #22d3ee);
  --acc2: var(--accent-2, #67e8f9);

  /* ⚠️ צבע-הטקסט **על** רקע-הדגש. מוגדר גם ב-glass.css, וכפול כאן
     בכוונה: אם glass.css לא נטען (מטמון · שגיאת-רשת), `var()` על
     משתנה לא-מוגדר נופל ל-`unset` — כלומר הטקסט **יורש** צבע בהיר
     ונעלם על הציאן. כפילות זולה מכפתור בלתי-קריא. */
  --on-accent: #0b0d14;
  --err: var(--danger, #d47e77);
  --ok: #7fae8d;   /* glass.css דורס אותו; הערך כאן הוא רק נפילה-רכה */
  --grad: linear-gradient(135deg, var(--accent, #22d3ee), var(--accent-2, #67e8f9));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ⚠️⚠️ **התכונה `hidden` חייבת לנצח.** כל מחלקה עם `display: block/flex/grid`
   דורסת את ברירת-המחדל של הדפדפן ל-`[hidden]`, והאלמנט נשאר על המסך אחרי
   `el.hidden = true` — בלי שום שגיאה. זה כבר תוקן כאן פעמיים נקודתית
   (`.sheet[hidden]`, `.st-viewer[hidden]`); כלל אחד גלובלי סוגר את כל
   המשפחה, כולל כל מחלקה שתיכתב מחר. */
[hidden] { display: none !important; }
html, body { min-height: 100%; }
/* ⚠️ הרקע של `body` מוגדר עם `background-attachment: fixed` (glass.css),
   כלומר הוא נצבע **לפי חלון-התצוגה** ולא לפי גובה-הדף. כל שטח שמעבר —
   מתיחת-גלילה בטלפון, דף ארוך בצילום — נשאר **לבן**. צבע-בסיס על `html`
   סוגר את זה בלי לגעת בשכבות-הגרדיאנט. */
html { background: #0a0b10; }
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, #23164a 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #0b2f3a 0%, transparent 55%),
    var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", "Heebo", "Rubik", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;                    /* קריאות טובה יותר בכל הדפים (עברית ארוכה) */
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff12;
  position: sticky; top: 0; z-index: 10;
  background: #0d0f1acc;
}
.brand { display: flex; align-items: center; gap: 10px; }
/* ── 🎼 מותג «נגן» ─────────────────────────────────────────────────
   הסימן לבד, בצבע-הדגש — **בלי אריח-פחם**. האריח נועד להיפרד מרקע
   זר (מסך-הבית של אנדרואיד, לשונית-דפדפן); כאן הרקע כבר פחם, ואריח
   על אריח נראה כמו מלבן תקוע.
   ⚠️ 34px הוא **גבול-התחתון** של הסימן המלא: חמישה קווים בעובי 1.8
      הם 0.61px ליחידה, ובמסך 1× הם מתרככים. מתחת לזה — `#i-nagan-solid`. */
.brand-logo { width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--acc); flex: none; }
.brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: .2px; }
.topnav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
  padding: 7px 12px; border-radius: 10px; font-size: .92rem;
  background: #ffffff0d; border: 1px solid #ffffff14;
  transition: background .15s;
}
.nav-btn:hover { background: #ffffff1e; }

/* ---------- layout ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 26px 16px 60px; }

.hero { text-align: center; margin: 28px 0 22px; }
.hero-title {
  font-size: 2.4rem; font-weight: 800; direction: ltr;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--dim); margin-top: 6px; font-size: 1.05rem; }

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 40px #00000055;
}
.card-title { font-size: 1.35rem; margin-bottom: 16px; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 480px; margin: 0 auto; }
.fld { display: block; margin-bottom: 14px; }
.fld-row { display: flex; gap: 12px; }
.fld-row .fld { flex: 1; min-width: 0; }
.fld-name { display: block; font-size: .9rem; color: var(--dim); margin-bottom: 5px; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 11px 12px;
  background: #0e1120; color: var(--txt);
  border: 1px solid #2c3252; border-radius: 11px;
  font-size: 1rem; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--acc); }
.fld input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }
.fld-hint { display: block; font-size: .78rem; color: var(--dim); margin-top: 4px; min-height: 1em; }
.fld-hint.ok { color: var(--ok); }
.fld-hint.bad { color: var(--err); }
.form-err { color: var(--err); font-size: .9rem; min-height: 1.2em; margin: 4px 0 10px; }
.btn-primary {
  width: 100%; padding: 13px; border: 0; border-radius: 12px;
  background: var(--grad); color: #fff; font-size: 1.08rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: scale(.99); }
.btn-primary[disabled] { filter: grayscale(.6); cursor: wait; }
.auth-flip { display: block; text-align: center; margin-top: 16px; color: var(--acc2); font-size: .95rem; }
.save-ok { display: none; color: var(--ok); margin-inline-start: 10px; }

/* ---------- home ---------- */
.home-head { display: flex; align-items: center; gap: 16px; margin: 10px 0 26px; }
.home-hello { font-size: 1.6rem; }
.home-sub { color: var(--dim); margin-top: 3px; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex: none;
  box-shadow: 0 4px 14px #00000066;
}
.avatar-big { width: 64px; height: 64px; font-size: 1.9rem; }
.spaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.space-card {
  position: relative; display: block;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 20px; padding: 26px 22px 22px;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.space-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); opacity: .9;
}
.space-card:hover { transform: translateY(-4px); border-color: #3a4270; box-shadow: 0 16px 44px #00000066; }
.space-emoji { font-size: 2.3rem; margin-bottom: 10px; }
.space-name { font-size: 1.25rem; margin-bottom: 8px; }
.space-sub { color: var(--dim); font-size: .95rem; line-height: 1.5; min-height: 3em; }
.space-cta {
  display: inline-block; margin-top: 16px; padding: 8px 14px;
  border-radius: 10px; font-size: .92rem; font-weight: 600;
  background: #ffffff0d; border: 1px solid #ffffff18;
}
.space-orch::before { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.space-social::before { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.space-learn::before { background: linear-gradient(135deg, var(--ok), var(--accent-2)); }

/* ---------- profile ---------- */
.profile-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.profile-uname { font-weight: 700; font-size: 1.1rem; }
.profile-since { color: var(--dim); font-size: .85rem; margin-top: 3px; }

/* ---------- toast ---------- */
.plat-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--card); border: 1px solid var(--card-edge); color: var(--txt);
  padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 30px #000000aa;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90;
  max-width: 88vw; text-align: center;
}
.plat-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- notifications bell ---------- */
.bell-wrap { position: relative; }
.bell-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--err); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  width: min(340px, 86vw); max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 14px; box-shadow: 0 16px 44px #000000aa; z-index: 30;
}
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #ffffff12; font-weight: 700;
}
.bell-clear { background: none; border: 0; color: var(--acc2); cursor: pointer; font-size: .85rem; font-family: inherit; }
.bell-item {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #ffffff0a;
}
.bell-item:hover { background: #ffffff0a; }
.bell-item.unread { background: #7c5cff14; }
.bell-txt { font-size: .9rem; line-height: 1.35; }
.bell-txt small { display: block; color: var(--dim); font-size: .75rem; }
.bell-empty { padding: 18px 14px; color: var(--dim); text-align: center; font-size: .92rem; }

/* ---------- social ---------- */
.page-title { font-size: 1.6rem; margin: 6px 0 18px; }
.page-alert {
  background: #ff6b8122; border: 1px solid #ff6b8155;
  padding: 10px 14px; border-radius: 12px; margin-bottom: 16px;
}
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sub-title { font-size: .95rem; color: var(--dim); margin: 18px 0 8px; }
.search-inp {
  width: 100%; padding: 11px 12px; background: #0e1120; color: var(--txt);
  border: 1px solid #2c3252; border-radius: 11px; font-size: 1rem; font-family: inherit; outline: none;
}
.search-inp:focus { border-color: var(--acc); }
.list { margin-top: 8px; }
.urow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid #ffffff0a;
}
.urow-txt { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.3; }
.urow-txt small { display: block; color: var(--dim); font-size: .78rem; }
.urow-st { display: block; font-style: normal; font-size: .8rem; color: var(--dim); margin-top: 2px; }
.urow-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.avatar-sm { width: 38px; height: 38px; font-size: 1.1rem; }
.mini-btn {
  padding: 6px 11px; border-radius: 9px; font-size: .84rem; font-family: inherit;
  background: #ffffff10; color: var(--txt); border: 1px solid #ffffff1c; cursor: pointer;
}
.mini-btn:hover { background: #ffffff20; }
.mini-ok { background: #34d39922; border-color: #34d39955; }
.mini-join { background: var(--grad); border: 0; color: #fff; font-weight: 600; }
.room-emoji { font-size: 1.5rem; }

/* ---------- room media ---------- */
.media-area {
  position: relative; margin: 12px 0 0;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.media-box { width: 100%; }
.media-box iframe, .media-box #ytHost { width: 100%; height: min(42vh, 380px); border: 0; border-radius: 12px; }
.media-box audio { width: 100%; }
.media-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.media-chord {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 5;
  background: #000000aa; border: 1px solid #7c5cff88; border-radius: 14px;
  padding: 8px 18px; font-size: 1.9rem; font-weight: 800; color: var(--acc2);
  direction: ltr; pointer-events: none;
}
.media-sep { border: 0; border-top: 1px solid #ffffff14; margin: 12px 0; }
.media-panel-body { padding: 12px 14px; }

/* ---------- practice room ---------- */
.room-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alone-hint { color: var(--acc2); font-size: .95rem; }

/* 🌍 כפתור-תרגום על הודעה. עדין בכוונה — הוא מופיע ליד כל הודעה של מישהו
   אחר, ואם הוא בולט הוא הופך לרעש בשיחה שלמה. */
.msg-tr {
  margin-inline-start: 6px; padding: 1px 6px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: .72rem; cursor: pointer; opacity: .55; transition: opacity .15s;
}
.chat-msg:hover .msg-tr { opacity: 1; }
.msg-tr.on { opacity: 1; color: var(--acc2); border-color: var(--acc2); }
.msg-txt { white-space: pre-wrap; }

/* Sponsored content. Visually distinct but not louder than organic content —
   an ad that shouts wins one impression and loses the reader. */
.ad-card { position: relative; border-color: #ffd16a44; }
.ad-tag {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px;
  border-radius: 999px; background: #ffd16a1f; border: 1px solid #ffd16a55;
  color: var(--acc2); font-size: .72rem; letter-spacing: .02em; cursor: help;
}
.ad-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin: 6px 0; }
/* Deliberately calm, not alarming: it states a fact to both sides rather
   than accusing either of them. */
/* 🎙️ כתוביות — מעל הווידאו, קריאות מרחוק, לא חוסמות את הפנים */
.sub-box {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 92px; z-index: 40; width: min(760px, 92vw);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.sub-line {
  background: #000000b8; color: #fff; padding: 7px 14px; border-radius: 10px;
  font-size: clamp(15px, 2.2vw, 21px); line-height: 1.4; text-align: center;
  backdrop-filter: blur(4px);
}
.sub-line b { color: var(--acc2); margin-inline-end: 6px; font-weight: 700; }
.room-btn.on { background: var(--acc2); color: #06281f; border-color: var(--acc2); }

.sup-banner {
  margin: 8px 0; padding: 8px 12px; border-radius: 10px;
  background: #ffd16a14; border: 1px solid #ffd16a55;
  color: var(--fg); font-size: .9rem; line-height: 1.5;
}
.tiles {
  flex: 1; display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
}
.tile {
  position: relative; background: #000; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--card-edge); aspect-ratio: 4 / 3;
}
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile-name {
  position: absolute; bottom: 8px; inset-inline-start: 10px;
  background: #000000aa; padding: 3px 9px; border-radius: 8px; font-size: .85rem;
}
.room-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 12px; background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 16px; position: sticky; bottom: 12px;
}
.room-btn {
  padding: 11px 16px; border-radius: 12px; font-size: .95rem; font-weight: 600;
  background: #ffffff10; color: var(--txt); border: 1px solid #ffffff1c;
  cursor: pointer; font-family: inherit;
}
.room-btn:hover { background: #ffffff22; }
.room-btn.off { background: #ff6b8126; border-color: #ff6b8166; }
.room-leave { background: #ff6b8126; border-color: #ff6b8166; }
.room-panic {
  background: #ff6b8140; border-color: #ff6b81aa; color: #fff; font-weight: 700;
}
.room-panic:hover { background: #ff6b8166; }
.invite-panel {
  position: fixed; bottom: 84px; inset-inline-end: 18px;
  width: min(320px, 90vw); max-height: 50vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 14px; box-shadow: 0 16px 44px #000000aa; z-index: 30;
}

/* ---------- teachers ---------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-wrap.wide { max-width: 640px; }
.filters { display: flex; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.fld-inline { flex: 1; min-width: 180px; margin-bottom: 0; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tcard { display: flex; flex-direction: column; gap: 8px; }
.tcard .mini-join { align-self: flex-start; margin-top: auto; }
.t-headline { color: var(--txt); font-size: .98rem; }
.t-about { color: var(--dim); font-size: .93rem; line-height: 1.55; white-space: pre-line; }
.t-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-tag {
  padding: 4px 10px; border-radius: 999px; font-size: .8rem;
  background: #7c5cff22; border: 1px solid #7c5cff55;
}
.t-price { color: var(--acc2); font-weight: 600; }
.cat-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: .9rem; cursor: pointer;
  background: #ffffff0d; border: 1px solid #ffffff1a;
}
.cat-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--acc); }
.wide-chip { margin: 6px 0 2px; }
.avail-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.avail-row select, .avail-row input {
  padding: 8px 10px; background: #0e1120; color: var(--txt);
  border: 1px solid #2c3252; border-radius: 9px; font-family: inherit;
}
.slot-grid { display: flex; gap: 8px; flex-wrap: wrap; max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.slot {
  padding: 8px 12px; border-radius: 10px; font-size: .88rem; font-family: inherit;
  background: #ffffff0d; color: var(--txt); border: 1px solid #ffffff1c; cursor: pointer;
}
.slot:hover { background: #ffffff1e; }
.slot.sel { background: var(--grad); border-color: transparent; font-weight: 700; }
.pay-note { color: var(--dim); font-size: .85rem; margin-top: 12px; line-height: 1.5; }

/* ---------- messaging ---------- */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.msg-list { max-height: 70vh; overflow-y: auto; padding: 8px; }
.msg-pane { display: flex; flex-direction: column; min-height: 60vh; padding: 0; }
.msg-pane .chat-msgs { flex: 1; max-height: 56vh; }
.chat-row { cursor: pointer; border-radius: 10px; }
.chat-row:hover { background: #ffffff08; }
.chat-row.on { background: #7c5cff22; }
.msg-by { display: block; font-size: .78rem; color: var(--acc2); margin-bottom: 2px; }
@media (max-width: 760px) { .msg-layout { grid-template-columns: 1fr; } }

/* ---------- groups ---------- */
.gr-card b { display: block; margin-top: 8px; }
.gr-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.group-hero { padding-top: 14px; }
.gr-rules { margin-top: 10px; }
.gr-rules summary { cursor: pointer; color: var(--acc2); font-weight: 600; }
.post-pinned { border-color: #ffd40055; }
.post-wait { border-color: #ffd40088; opacity: .92; }
.pin-tag {
  display: inline-block; font-size: .78rem; font-weight: 700; color: var(--fg-dim);
  background: #ffd40018; border: 1px solid #ffd40044; border-radius: 999px;
  padding: 2px 10px; margin-bottom: 8px;
}
.pin-tag.wait { color: var(--acc2); background: #22d3ee18; border-color: #22d3ee44; }

/* ---------- reviews ---------- */
.rev-summary { margin: 6px 0; font-size: .95rem; }
/* ⚠️⚠️ `inline-flex` **חובה**: `.ic` הוא `display: block`, ולכן חמשת
   הכוכבים נערמו זה מתחת לזה — טור של חמישה כוכבים במקום שורה. זה נראה
   על כל כרטיס-מורה ועל כל ביקורת, ולא נתפס בשום בדיקת-API. */
.rev-stars { display: inline-flex; gap: 1px; vertical-align: -3px;
             color: #e8c05a; }
.rev-stars .ic { display: block; }
.rev-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #ffffff0a; }
.rev-txt { display: block; margin-top: 4px; line-height: 1.5; white-space: pre-line; }
.star-pick { display: flex; gap: 4px; margin-bottom: 8px; }
.star-b {
  background: none; border: 0; cursor: pointer; font-size: 2rem;
  color: #ffffff40; padding: 0 2px; line-height: 1; font-family: inherit;
}
.star-b.on { color: var(--fg-dim); }
.trial-tag { background: #34d39922; border-color: #34d39955; }
.trial-note { color: var(--ok); font-weight: 600; margin: 6px 0; }
/* 🛡️ תג-אמון: מורה מאושר להוראת-קטינים — מה שהורה הכי צריך לראות בבחירת מורה.
   ירוק-ביטחון, בולט אך לא צועק (אמון נבנה בעקביות, לא בצעקה). */
.minors-tag { background: #34d39926; border-color: #34d39966; color: #6ee7b7; font-weight: 600; }
.verified-badge { font-size: .95em; vertical-align: middle; cursor: help; filter: drop-shadow(0 0 4px #34d39988); }

/* ---------- teacher calendar ---------- */
.cal-box { max-height: 420px; overflow-y: auto; margin-bottom: 12px; }
.cal-day { border-bottom: 1px solid #ffffff10; padding: 8px 0; }
.cal-day-h { font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--acc2); }
.cal-slots { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- money dashboard ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { text-align: center; padding: 16px 12px; }
.kpi-n { display: block; font-size: 1.7rem; font-weight: 800; }
.kpi-n.acc { color: var(--acc2); }
.kpi small { color: var(--dim); font-size: .85rem; }

/* ---------- child safety ---------- */
.minor-box {
  background: #22d3ee14; border: 1px solid #22d3ee44;
  border-radius: 14px; padding: 14px 16px; margin: 12px 0;
}
.safety-tips { margin: 10px 0 0; padding-inline-start: 18px; color: var(--dim); font-size: .88rem; line-height: 1.7; }
.rep-row { align-items: flex-start; }
.rep-open { background: #ff6b8114; border-radius: 10px; }
.rep-txt { display: block; white-space: pre-wrap; color: var(--dim); margin-top: 4px; }
.report-kinds { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

/* ---------- scores + marketplace ---------- */
/* ⚠️ **בלי `max-height` ובלי גלילה אנכית פנימית.** קודם היה
   `max-height:60vh; overflow:auto`, וזה כלא את דף-התווים — התוכן
   המרכזי של המסך — בחלונית שגוללת בנפרד מהעמוד. על פרטיטורה של
   שמונה תפקידים נראו שלוש חמשות, והשאר היה מאחורי גלילה מקוננת
   שהאצבע נתקעת בה. הדף נפרש עכשיו במלואו והעמוד גולל כרגיל. */
.score-prev { background: #fff; border-radius: 12px; padding: 8px; margin: 8px 0; overflow-x: auto; }
.score-prev img { width: 100%; height: auto; display: block; }
.mk-card { text-align: start; }
.mk-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.mk-noimg { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: #ffffff08; }
.mk-price { color: var(--acc2); font-weight: 800; font-size: 1.2rem; }
.mk-gallery img#mkMain { width: 100%; max-height: 46vh; object-fit: contain; border-radius: 12px; background: #000; }
.mk-thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.mk-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; }

/* ---------- musicians feed ---------- */
.feed-wrap { max-width: 620px; margin: 0 auto; }
.post-fcard { margin-bottom: 16px; padding: 14px 16px; }
.post-fcard video, .post-fcard img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; background: #000; margin-top: 8px; }
.post-fcard img { background: transparent; }
.post-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.like-btn {
  padding: 6px 12px; border-radius: 999px; font-size: .95rem; cursor: pointer;
  background: #ffffff10; color: var(--txt); border: 1px solid #ffffff1c; font-family: inherit;
}
.like-btn.on { background: #ff6b8126; border-color: #ff6b8166; }
.post-comments { margin-top: 10px; border-top: 1px solid #ffffff10; padding-top: 8px; }
.pcom { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; }
.pcom-txt { font-size: .92rem; line-height: 1.4; }
.avatar-xs { width: 26px; height: 26px; font-size: .8rem; }
.np-vis {
  padding: 8px 10px; background: #0e1120; color: var(--txt);
  border: 1px solid #2c3252; border-radius: 9px; font-family: inherit;
}
.profile-hero { margin-bottom: 16px; }

/* ---------- reels ---------- */
.reel-upload { margin-bottom: 16px; }
.reel-card { margin-bottom: 16px; padding: 14px 16px; }
.reel-card video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; margin-top: 8px; }
.reel-cap { margin-top: 8px; font-size: .95rem; line-height: 1.4; }

/* ---------- forums ---------- */
.forum-tabs { margin-bottom: 14px; }
.cat-chip.sel { background: var(--accent-soft); border-color: var(--acc); font-weight: 700; }
.thread-row { border-radius: 10px; }
.thread-row:hover { background: #ffffff08; }
.post-card { margin-bottom: 12px; padding: 16px 18px; }
.post-card .profile-id { margin-bottom: 8px; }
.post-del-btn { margin-inline-start: auto; }
.post-text { white-space: pre-line; line-height: 1.55; font-size: .97rem; }
.post-del .post-text { color: var(--dim); }

/* ---------- lesson channel chat ---------- */
.chat-panel { display: flex; flex-direction: column; width: min(380px, 92vw); max-height: 70vh; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg {
  max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: .92rem;
  background: #ffffff10; align-self: flex-start; line-height: 1.4;
}
.chat-msg.mine { background: #7c5cff33; align-self: flex-end; }
.chat-msg small { display: block; color: var(--dim); font-size: .7rem; margin-top: 3px; }
.chat-kind {
  display: inline-block; font-size: .75rem; font-weight: 700; color: var(--acc2);
  margin-inline-end: 6px;
}
.chat-compose { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #ffffff12; }
.chat-compose select, .chat-compose input {
  padding: 8px 10px; background: #0e1120; color: var(--txt);
  border: 1px solid #2c3252; border-radius: 9px; font-family: inherit;
}
.chat-compose input { flex: 1; min-width: 0; }

@media (max-width: 760px) { .social-grid { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .fld-row { flex-direction: column; gap: 0; }
  .hero-title { font-size: 1.9rem; }
}

/* ===== 🎛️ מיקסר — אותו מנוע ואותה שפה-חזותית של חדר-התזמורת =====
   פאנל **מעוגן שמאל-למטה** ולא חלונית צפה: מיקסר הוא כלי-עבודה קבוע, ומקום
   קבוע עדיף על חלונית שצריך לחפש ולהזיז כל פעם (בקשת-חיים, v53.9). */
.mx-panel { position: fixed; left: 0; bottom: 0; z-index: 60; width: min(96vw, 380px);
  max-height: 58vh; overflow-y: auto; background: rgba(16,18,24,.975);
  backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,.14);
  border-inline-start: 0; border-bottom: 0; border-radius: 0 14px 0 0;
  box-shadow: 0 -8px 34px rgba(0,0,0,.6); }
.mx-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.05); font-size: .85rem; color: var(--txt, #e8eaed); }
.mx-head b { flex: 1; }
.mx-sm { padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line, #2a2f3a);
  background: transparent; color: var(--muted, #9aa0aa); font-size: .75rem; cursor: pointer; }
.mx-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.mx-ch { border: 1px solid var(--line, #2a2f3a); border-radius: 11px; padding: 7px 9px;
  background: rgba(255,255,255,.03); }
.mx-ch.mx-off { opacity: .55; }
.mx-ch.mx-master { border-color: var(--accent, #2d78ff); background: rgba(45,120,255,.07); }
.mx-top { display: flex; align-items: center; gap: 7px; }
.mx-nm { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700;
  color: var(--txt, #e8eaed); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-top button { min-width: 40px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line, #2a2f3a); background: transparent;
  color: var(--txt, #e8eaed); cursor: pointer; font-size: .82rem; }
.mx-top button.on { background: var(--fg-dim); color: #1a1a1a; border-color: transparent; font-weight: 700; }
.mx-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.mx-row label { font-size: .7rem; color: var(--muted, #9aa0aa); min-width: 34px; }
.mx-row input[type=range] { flex: 1; min-width: 0; height: 26px; }
.mx-val { font-size: .7rem; color: var(--muted, #9aa0aa); min-width: 36px; text-align: end; }
.mx-adv { display: none; margin-top: 5px; border-top: 1px dashed var(--line, #2a2f3a); padding-top: 5px; }
.mx-ch.open .mx-adv { display: block; }
.mx-fx { border: 1px solid var(--line, #2a2f3a); border-radius: 11px; padding: 7px 9px;
  background: rgba(255,212,0,.05); }
.mx-hint { font-size: .72rem; color: var(--muted, #9aa0aa); line-height: 1.5; }
@media (max-width: 560px) { .mx-panel { width: 100vw; border-radius: 0; } }

/* ============================================================================
   🧭 ניווט v2.2 — אייקוני-SVG, סרגל-תחתון בפלאפון, כותרת-מסך
   ----------------------------------------------------------------------------
   הבעיה שנמדדה לפני: `.topbar{justify-content:space-between}` עם
   `.topnav{flex-wrap:wrap}` — ב-viewport של 412px, 13 גלולות-טקסט נשברו
   ל-**8 שורות מדורגות** והכותרת תפסה **331px = 41% מהמסך**. ואף `@media`
   בקובץ הזה לא נגע ב-topbar/topnav — היא מעולם לא טופלה למובייל.

   ⚠️⚠️ הבלוק הזה יושב **בסוף הקובץ בכוונה**. בסגוליות שווה הכלל המאוחר גובר,
   וב-v58.35 של התזמורת בלוק-מדיה שנכתב לפני כללי-הבסיס "חצי-עבד" ועלה סבב שלם.
   ============================================================================ */

/* ---- אייקון בסיסי: יורש צבע מההורה ⇒ צבע-מצב נקבע ב-CSS ולא בקובץ ---- */
.ic { width: 22px; height: 22px; display: block; flex: none; color: inherit; }
.ic use { pointer-events: none; }

.nav-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;   /* 44px = יעד-מגע תקני */
  color: #99a1b3; background: transparent; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-ic:hover { background: #ffffff12; color: #e8eaf2; }
.nav-ic.on { color: #fff; background: #ffffff14; }
.nav-ic.on::after {
  content: ""; position: absolute; bottom: 5px; inset-inline: 34%;
  height: 2.5px; border-radius: 2px; background: var(--grad, var(--accent));
}

/* ---- סרגל עליון ---- */
.topbar { gap: 10px; padding: 8px 14px; }
.topnav { display: flex; gap: 2px; flex-wrap: nowrap; }
.topacts { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.brand-logo { width: 30px; height: 30px; }
.brand-name { font-size: 1.05rem; }

/* ---- כותרת-המסך: זו שמחליפה את המילה שהייתה בסרגל ---- */
.screenbar {
  position: sticky; top: 58px; z-index: 9;
  padding: 14px 16px 10px;
  background: linear-gradient(#0d0f1a 62%, #0d0f1a00);
}
.screen-title {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .2px;
  color: #f2f4fa; line-height: 1.15;
}

/* ---- סרגל תחתון (פלאפון בלבד; נחשף במדיה למטה) ---- */
.navbar {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: rgba(13, 15, 26, .94); backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid #ffffff14;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navbar .nb {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 56px; color: #8b93a7; position: relative; transition: color .15s;
}
.navbar .nb .ic { width: 25px; height: 25px; }
.navbar .nb.on { color: #fff; }
.navbar .nb.on::before {
  content: ""; position: absolute; top: 0; inset-inline: 26%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--grad, var(--accent));
}

/* ---- גיליון «עוד» — כאן דווקא עם מילים ---- */
.sheet { position: fixed; inset: 0; z-index: 70; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet-body {
  position: absolute; inset-inline: 0; bottom: 0;
  background: #14172180; background: #141721; border-radius: 18px 18px 0 0;
  border-top: 1px solid #ffffff1a; padding-bottom: env(safe-area-inset-bottom, 0px);
  max-height: 78vh; overflow-y: auto;
  animation: sheetUp .18s ease-out;
}
@keyframes sheetUp { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px; font-size: 1.05rem;
}
.sheet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 12px 18px;
}
.sh-it {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 14px 6px; border-radius: 14px; min-height: 84px;
  background: #ffffff08; border: 1px solid #ffffff10;
  color: #d7dbe6; font-size: .8rem; text-align: center; line-height: 1.25;
}
.sh-it:hover { background: #ffffff14; }
.sh-it .ic { width: 24px; height: 24px; }
.sh-it.adm { color: #ffca6b; }
.sh-it.out { color: #ff8f8f; }

/* ============================ פלאפון ============================ */
@media (max-width: 760px) {
  .topbar { padding: 7px 12px; }
  .topnav { display: none; }               /* הרכזת העליונה יורדת למטה */
  .navbar { display: flex; }
  body.has-nav .page { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .brand-name { font-size: .98rem; }
  .screenbar { top: 52px; padding: 12px 14px 8px; }
  .screen-title { font-size: 1.32rem; }
}

@media (max-width: 380px) {
  .sheet-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-name { display: none; }           /* מתחת ל-380 הלוגו לבדו מספיק */
}

/* כותרת-הדף הפנימית מוסתרת — הכותרת חיה עכשיו ב-.screenbar (מקור-אמת אחד).
   ⚠️ ה-h1 יושב ב-`.row-between` יחד עם כפתור-הפעולה; הסתרה לבדה הייתה מקפיצה
   את הכפתור לצד השני, ולכן השורה מיושרת מפורשות לקצה. */
body.has-nav .page-title { display: none; }
body.has-nav .row-between:has(> .page-title) { justify-content: flex-end; }

/* ============================ ➕ יצירה ============================
   כפתור-יצירה אחד לכל הפלטפורמה. יושב **מעל** הסרגל התחתון ובאותו מקום
   בכל מסך — כדי שהיד תלמד אותו פעם אחת. */
.fab {
  position: fixed; z-index: 45;
  inset-inline-end: 16px;
  bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 18px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad, linear-gradient(135deg, var(--accent), var(--accent-2))); color: var(--on-accent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .48);
  transition: transform .12s;
}
.fab:active { transform: scale(.94); }
.fab .ic { width: 26px; height: 26px; }
@media (min-width: 761px) { .fab { bottom: 24px; } }   /* אין סרגל-תחתון בדסקטופ */

.compose-body { padding: 4px 14px 20px; }
.compose-body .card { background: transparent; border: 0; padding: 0; }
.compose-body .fld { display: block; margin-bottom: 10px; }
.compose-body .btn-primary { width: 100%; margin-top: 6px; }

/* כפתורי-הפתיחה הישנים: נשארים ב-DOM (ה-JS נשען עליהם) אבל יורדים מהמסך.
   ⚠️ להסיר אותם = `$id(...).addEventListener` על null = כל האתחול של הדף מת בשקט. */
#scUpBtn, #mkNewBtn, #reelUpBtnLegacy { display: none !important; }

/* ==================== 📸 סטוריז ==================== */
.story-row { padding: 8px 0 4px; }
.st-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 14px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.st-strip::-webkit-scrollbar { display: none; }
.st-item {
  flex: none; width: 72px; background: 0; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0;
}
.st-ring {
  width: 64px; height: 64px; border-radius: 50%; padding: 2.5px;
  display: grid; place-items: center;
}
.st-new { background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--fg-dim), var(--accent)); }
.st-seen { background: #3a3f4d; }
.st-av {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; border: 2.5px solid #0d0f1a;
}
.st-av.sm { width: 30px; height: 30px; font-size: .95rem; border-width: 2px; }
.st-nm {
  font-size: .69rem; color: #b9bfcc; max-width: 72px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-tag {
  font-size: .58rem; color: #0d0f1a; background: #cfd4e0;
  border-radius: 5px; padding: 1px 5px; font-weight: 700;
}
.st-tag.st-pro { background: #3fb98f; color: #06251c; }

.st-viewer { position: fixed; inset: 0; z-index: 90; background: #000; display: flex;
  flex-direction: column; }
.st-viewer[hidden] { display: none; }
.st-bars { display: flex; gap: 3px; padding: 8px 10px 0; }
.st-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: #ffffff35; }
.st-bars i.done, .st-bars i.now { background: #fff; }
.st-head { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; color: #fff; }
.st-who { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.st-x { background: 0; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.st-stage { flex: 1; display: grid; place-items: center; overflow: hidden; }
.st-stage img, .st-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-cap { color: #fff; text-align: center; padding: 10px 18px 24px; font-size: .92rem; }
.st-nav { position: absolute; top: 60px; bottom: 60px; width: 34%; background: 0;
  border: 0; cursor: pointer; }
.st-prev { inset-inline-start: 0; }
.st-next { inset-inline-end: 0; }

/* ==================== 🎬 רילס מסך-מלא ==================== */
.reel-stage {
  height: calc(100dvh - 116px);          /* פחות הסרגל העליון והתחתון */
  overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; border-radius: 14px;
}
.reel-stage::-webkit-scrollbar { display: none; }
.reel-page {
  position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  background: #000; border-radius: 14px; overflow: hidden; margin-bottom: 8px;
}
.reel-vid { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.reel-side {
  position: absolute; inset-inline-end: 10px; bottom: 92px;
  display: flex; flex-direction: column; gap: 10px;
}
.reel-act {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.reel-meta {
  position: absolute; inset-inline: 12px; bottom: 14px; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.reel-who { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.reel-cap { margin: 0; font-size: .9rem; line-height: 1.4; }

/* דף מלא-רוחב (רילס) — בלי המרווחים של `.page` */
body.bleed .page { padding: 0 8px; max-width: none; }
body.bleed .screenbar { display: none; }   /* הסרטון הוא הכותרת */

/* בורר תחומי-עניין */
.int-hint { padding: 0 14px; margin: 0 0 10px; }
.int-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.int-chip {
  padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: .88rem;
  background: #ffffff0d; border: 1px solid #ffffff1a; color: #d7dbe6;
}
.int-chip.on { background: var(--grad, var(--accent)); border-color: transparent; color: var(--on-accent); font-weight: 700; }
.int-actions { display: flex; gap: 10px; padding: 0 14px 20px; }
.int-actions .btn-primary { flex: 1; }
.reel-snd { background: rgba(0,0,0,.55); }

/* ==================== 📷 מצלמת-רילס ==================== */
.cam { position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden; }
.cam-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cam-cvs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-err {
  position: absolute; inset-inline: 24px; top: 42%; z-index: 5; text-align: center;
  color: #fff; background: rgba(0,0,0,.7); padding: 16px; border-radius: 14px; line-height: 1.5;
}
.cam-top {
  position: absolute; inset-inline: 0; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
}
.cam-top-r { display: flex; gap: 6px; }
.cam-ic {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; border: 0;
  background: rgba(0,0,0,.42); color: #fff; cursor: pointer; backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cam-ic.wide { padding: 0 14px; }
.cam-lbl { font-size: .8rem; font-weight: 600; }
.cam-time {
  color: #fff; background: var(--danger); padding: 4px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
}
.cam-count {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  font-size: 6rem; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.cam-rows { position: absolute; inset-inline: 0; bottom: 108px; z-index: 4; }
.cam-row {
  display: flex; gap: 7px; overflow-x: auto; padding: 6px 12px;
  scrollbar-width: none;
}
.cam-row::-webkit-scrollbar { display: none; }
.cam-chip {
  flex: none; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: .8rem;
  background: rgba(0,0,0,.42); color: #fff; border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.cam-chip.on { background: #fff; color: #111; border-color: transparent; font-weight: 700; }

/*  🎛️ שלושת מפתחות-המצלמה — פילטר · עדשה · אפקט.
    ⚠️ **למה בכלל:** קודם שלוש השורות היו פתוחות תמיד — 34 כפתורים,
       138px, **15% מהמסך** מכסים את התצוגה גם למי שלא רוצה אפקט
       (דיווח-חיים 26/8). עכשיו הן סגורות, וכל מפתח פותח אחת.
    ⚠️ אייקון **+ מילה** ולא אייקון לבד: התווית היא שם-הבחירה
       הפעילה, ולכן אפשר לדעת מה דלוק בלי לפתוח כלום. */
/*  🔍 גלולות-הזום — מעל שלושת המפתחות, צמודות לצד.
    ⚠️ `touch-action: none` על הקנבס: בלעדיו הדפדפן לוקח את הצביטה
       לגלילת-העמוד והזום פשוט לא זז. */
.cam-cvs { touch-action: none; }
.cam-zoom {
  position: absolute; inset-inline-end: 12px; bottom: 208px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cam-z {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font-size: .78rem; font-weight: 600;
  background: rgba(0,0,0,.46); color: #fff;
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
}
.cam-z.on { background: #fff; color: #111; border-color: transparent; }
/*  התצוגה הרציפה — מה שהצביטה משנה. ⚠️ בלעדיה צביטה ל-1.7×
    לא מסומנת באף גלולה והמשתמש לא יודע איפה הוא. */
.cam-zoom-cur {
  font-size: .72rem; color: #fff; font-weight: 600;
  background: rgba(0,0,0,.46); border-radius: 999px; padding: 3px 9px;
  backdrop-filter: blur(8px);
}

.cam-keys {
  position: absolute; inset-inline: 0; bottom: 108px; z-index: 5;
  display: flex; gap: 8px; justify-content: center;
  padding: 0 12px; pointer-events: none;
}
.cam-key {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: .82rem; font-weight: 500; max-width: 40vw;
  background: rgba(0,0,0,.46); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.cam-key .cam-lbl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cam-key .ic { width: 17px; height: 17px; flex: none; }
/*  «on» = יש בחירה פעילה · «open» = השורה פתוחה כרגע. שני מצבים
    שונים, ולכן שני סימנים שונים — צבע-דגש מול מסגרת בהירה. */
.cam-key.on { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.cam-key.open { background: rgba(255,255,255,.92); color: #111; border-color: transparent; }
.cam-key.open .ic { color: #111; }

/*  ⚠️ השורות עולות מעל המפתחות כשהן נפתחות, אחרת הן מכסות אותם. */
.cam-rows { bottom: 156px; }
.cam-bottom {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.cam-spacer { width: 44px; }
.cam-shoot {
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer;
  border: 4px solid rgba(255,255,255,.92); background: transparent;
  display: grid; place-items: center; padding: 0;
}
.cam-shoot i {
  width: 58px; height: 58px; border-radius: 50%; background: var(--danger);
  transition: border-radius .18s, width .18s, height .18s;
}
.cam.rec .cam-shoot i { width: 30px; height: 30px; border-radius: 8px; }
.cam-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ==================== ⭐ ספריית-תווים שיתופית ==================== */
.sc-row { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px;
  border-bottom: 1px solid #ffffff10; }
.sc-main { display: flex; align-items: center; gap: 10px; color: inherit; }
.sc-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #ffffff0d; color: #9aa3b8; flex: none; }
.sc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-inline-start: 48px; }
.sc-stars { display: inline-flex; gap: 1px; }
.sc-st { background: 0; border: 0; padding: 2px; cursor: pointer; color: #4a5163; line-height: 0; }
.sc-st .ic { width: 19px; height: 19px; }
.sc-st.on { color: #ffc555; }
.sc-st.on.mine svg { fill: currentColor; }
.sc-num { font-size: .76rem; color: #9aa3b8; }
.sc-dl { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem;
  color: #9aa3b8; padding: 3px 9px; border-radius: 8px; background: #ffffff0a; }
.sc-dl .ic { width: 16px; height: 16px; }

/* אייקון בתוך שורת-טקסט — נמדד ליישור-בסיס עם הטקסט שסביבו */
.ic-in { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; }
.cam-chip.lens { background: rgba(124,92,255,.42); border-color: rgba(255,255,255,.3); }
.cam-chip.lens.on { background: #fff; color: #111; }
.cam-load {
  position: absolute; inset-inline: 0; bottom: 176px; z-index: 6; text-align: center;
}
.cam-load:not([hidden]) {
  display: inline-block; color: #fff; font-size: .86rem;
  background: rgba(0,0,0,.62); padding: 9px 16px; border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* ⚠️ ה-➕ ישב על אותה פינה של כפתור-הקול והסתיר אותו (דיווח-חיים).
   ברילס הוא עובר לצד הנגדי — עמודת-הפעולות (❤️/💬/🔊) שומרת על הצד שלה. */
body.bleed .fab { inset-inline-end: auto; inset-inline-start: 16px; }

/* ❤️💬 עמודת-פעולות ברילס */
.reel-act { position: relative; flex-direction: column; gap: 2px; height: auto;
  min-height: 44px; padding: 6px 0; border-radius: 14px; width: 48px; }
.reel-act.on { color: var(--danger); }
.reel-act.on svg { fill: currentColor; }
.reel-n { font-size: .7rem; font-weight: 700; line-height: 1; }

/* 💬 גיליון-התגובות */
.cmt-list { max-height: 46vh; overflow-y: auto; padding: 4px 12px; }
.cmt-row { display: flex; gap: 9px; align-items: flex-start; padding: 9px 2px;
  border-bottom: 1px solid #ffffff0d; }
.cmt-txt { flex: 1; min-width: 0; }
.cmt-txt b { font-size: .85rem; }
.cmt-txt p { margin: 2px 0 3px; font-size: .9rem; line-height: 1.4; word-break: break-word; }
.cmt-txt small { color: #8b93a7; font-size: .7rem; }
.cmt-new { display: flex; gap: 8px; padding: 10px 12px calc(16px + env(safe-area-inset-bottom,0px)); }
.cmt-in { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 12px;
  border: 1px solid #ffffff1a; background: #ffffff0a; color: #e8eaf2; }
.cmt-go { width: auto; padding: 0 18px; }

/* 📸 סטוריז — אזורי-ניווט, החזקה, סטורי-טקסט, שכבות */
.st-nav { position: absolute; top: 64px; bottom: 0; width: 38%; background: 0;
  border: 0; cursor: pointer; z-index: 3; }
.st-side-r { right: 0; }
.st-side-l { left: 0; }
.st-viewer.held .st-bars, .st-viewer.held .st-head,
.st-viewer.held .st-cap { opacity: 0; transition: opacity .18s; }
.st-bars i.now { position: relative; overflow: hidden; background: #ffffff35; }
.st-bars i.now::after { content: ''; position: absolute; inset: 0; width: 0;
  background: #fff; animation: inherit; }
@keyframes stFill { from { width: 0 } to { width: 100% } }
.st-viewer.held .st-bars i.now { animation-play-state: paused !important; }
.st-textcard { width: 100%; height: 100%; display: grid; place-items: center; padding: 34px; }
.st-textcard p { margin: 0; text-align: center; line-height: 1.35; word-break: break-word; }
.st-ovs { position: absolute; inset: 0; pointer-events: none; }
.st-ov { position: absolute; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.st-place { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.5);
  color: #fff; padding: 5px 11px; border-radius: 999px; font-size: .85rem; }
.st-poll { pointer-events: auto; background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  padding: 12px 14px; border-radius: 16px; width: 74%; max-width: 320px; color: #fff; }
.st-poll b { display: block; margin-bottom: 9px; font-size: .95rem; text-align: center; }
.st-poll-opt { display: flex; justify-content: space-between; width: 100%; margin-top: 6px;
  padding: 10px 13px; border-radius: 11px; cursor: pointer; font-size: .88rem;
  background: #ffffff1a; border: 1px solid #ffffff26; color: #fff; }
.st-poll-opt.on { background: var(--grad, var(--accent)); border-color: transparent;
  font-weight: 700; color: var(--on-accent); }
[data-fx="shadow"] { text-shadow: 0 3px 12px rgba(0,0,0,.75); }
[data-fx="outline"] { -webkit-text-stroke: 1.5px #000; }
[data-fx="glow"] { text-shadow: 0 0 14px currentColor, 0 0 30px currentColor; }
[data-fx="neon"] { text-shadow: 0 0 6px #fff, 0 0 18px var(--accent), 0 0 34px var(--accent); }

/* ✏️ עורך-סטורי */
.st-add .st-plus { background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: var(--on-accent); }
.st-add .st-av { background: #171a24; color: #fff; }
.sed { position: fixed; inset: 0; z-index: 95; background: #05060a; }
.sed-pick { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.sed-pick-box { width: min(100%,360px); display: flex; flex-direction: column; gap: 12px;
  background: #141721; border: 1px solid #ffffff14; border-radius: 20px; padding: 22px; }
.sed-pick-box b { font-size: 1.15rem; text-align: center; margin-bottom: 4px; }
.sed-pick-box .btn-primary { display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn-primary.alt { background: #ffffff14; }
.sed-stage { position: absolute; inset: 0; }
.sed-canvas { position: absolute; inset: 0; overflow: hidden; }
.sed-bg { position: absolute; inset: 0; display: grid; place-items: center; }
.sed-bg img, .sed-bg video { width: 100%; height: 100%; object-fit: contain; }
.sed-maintext { margin: 0; padding: 30px; text-align: center; line-height: 1.35; word-break: break-word; }
.sed-layers { position: absolute; inset: 0; }
.sed-lay { position: absolute; transform: translate(-50%,-50%); cursor: grab;
  touch-action: none; user-select: none; }
.sed-top { position: absolute; inset-inline: 0; top: 0; z-index: 4;
  display: flex; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top,0px)) 12px 8px; }
.sed-tools { position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: flex; justify-content: space-around; gap: 4px;
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom,0px));
  background: linear-gradient(#0000,#000000b0); }
.sed-tool { display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: 0; border: 0; color: #fff; cursor: pointer; font-size: .68rem; padding: 6px 4px; }
.sed-panel { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; max-height: 74vh;
  overflow-y: auto; background: #141721f2; backdrop-filter: blur(14px);
  border-top: 1px solid #ffffff1a; border-radius: 18px 18px 0 0;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom,0px)); }
.sed-form { display: flex; flex-direction: column; gap: 10px; }
.sed-in { width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 1rem;
  border: 1px solid #ffffff1a; background: #ffffff0a; color: #e8eaf2; }
.sed-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sed-chip { padding: 8px 13px; border-radius: 999px; cursor: pointer; font-size: .82rem;
  background: #ffffff0d; border: 1px solid #ffffff1a; color: #d7dbe6; }
.sed-chip.on { background: #fff; color: #111; border-color: transparent; font-weight: 700; }
.sed-col { width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid #ffffff2a; padding: 0; }
.sed-col.on { border-color: #fff; box-shadow: 0 0 0 3px #ffffff33; }
.sed-size { gap: 10px; }
.sed-size input[type=range] { flex: 1; min-width: 0; }
.sed-val { min-width: 28px; text-align: end; font-size: .8rem; color: #9aa3b8; }
.sed-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.sed-emo { font-size: 1.8rem; background: #ffffff0a; border: 0; border-radius: 12px;
  padding: 9px 0; cursor: pointer; }
.post-acts { display: flex; gap: 8px; margin-top: 8px; }
.like-btn { display: inline-flex; align-items: center; gap: 5px; }
.like-btn.on { color: var(--danger); border-color: #ff4d6d55; }
.like-btn.on svg { fill: currentColor; }

/* 🎥 §4.4 — עמוד אישור-הורה. עומד לבד, ולכן ממורכז ומצומצם. */
.pc-wrap { max-width: 560px; margin: 0 auto; }
.pc-card { text-align: center; }
.pc-hero { width: 46px; height: 46px; margin: 4px auto 12px; color: var(--acc2); }
.pc-facts { list-style: none; padding: 0; margin: 18px 0; text-align: start; }
.pc-facts li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; font-size: .95rem; color: var(--dim);
  border-bottom: 1px solid #ffffff10;
}
.pc-facts li:last-child { border-bottom: 0; }
.pc-facts .ic { width: 19px; height: 19px; color: var(--acc2); }
/* ⚠️ שני הכפתורים באותו גובה ובלי שבירת-שורה: «לא מאשר» נשבר לשתי
   שורות ליד «מאשר הקלטה», והזוג נראה כאילו אחד מהם משני. */
.pc-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.pc-actions button { white-space: nowrap; padding: 11px 16px; }
.pc-actions button { display: flex; align-items: center; gap: 8px; }
.pc-state {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px; border-radius: 12px; margin: 14px 0; font-weight: 600;
}
.pc-state.on  { background: #2e7d5b22; color: #7fd8ab; }
.pc-state.off { background: #ffffff10; color: var(--dim); }
.pc-note { font-size: .82rem; margin-top: 16px; }

/* 🎓 §4 — פאנל-השיעור. ⚠️ פינה ימנית-עליונה: מוסכמת-החלוניות של הפרויקט
   היא שכל חלונית מקבלת פינה משלה, אחרת הן נפתחות זו על זו. */
.ls-panel {
  position: fixed; inset-block-start: 74px; inset-inline-end: 12px;
  z-index: 40; width: min(300px, calc(100vw - 24px));
  background: #12161cee; border: 1px solid #ffffff14; border-radius: 14px;
  padding: 10px; backdrop-filter: blur(8px);
}
.ls-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.ls-head .ic { width: 18px; height: 18px; color: var(--acc2); }
.ls-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ls-b {
  display: flex; align-items: center; gap: 7px; padding: 8px 9px;
  border: 1px solid #ffffff12; background: #ffffff08; color: var(--fg);
  border-radius: 10px; font: inherit; font-size: .82rem; cursor: pointer;
  text-align: start;
}
.ls-b:hover { background: #ffffff12; }
.ls-b.on { background: var(--acc); border-color: transparent; color: var(--on-accent); }
.ls-b .ic { width: 17px; height: 17px; flex: none; }
.ls-b.ls-rec.on { background: #a33; }
.ls-b.ls-sm { padding: 6px 8px; font-size: .78rem; }
.ls-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ls-consent, .ls-tools { margin-top: 9px; border-top: 1px solid #ffffff12; padding-top: 9px; }
.ls-sub { font-size: .78rem; color: var(--dim); margin-bottom: 6px; }
.ls-p { display: flex; align-items: center; gap: 7px; font-size: .8rem; padding: 3px 0; }
.ls-p .ic { width: 15px; height: 15px; color: var(--acc2); }
.ls-warn { color: #e8a33d; font-style: normal; font-size: .74rem; }
.ls-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; margin: 8px 0; cursor: pointer; }
.ls-note { font-size: .72rem; color: var(--dim); margin-top: 6px; }

.ls-tool { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ls-bpm { width: 62px; padding: 5px; border-radius: 8px; border: 1px solid #ffffff14;
          background: #ffffff08; color: var(--fg); font: inherit; font-size: .82rem; }
.ls-dot { width: 11px; height: 11px; border-radius: 50%; background: #ffffff22; transition: none; }
.ls-dot.hit { background: var(--acc2); }
.ls-dot.hit.strong { background: #fff; }
.ls-tune { font-variant-numeric: tabular-nums; font-size: .86rem; color: var(--dim); }
.ls-tune.ok  { color: #7fd8ab; }
.ls-tune.off { color: #e8a33d; }

/* פסנתר — הקלידים השחורים יושבים על הלבנים, כמו בכלי אמיתי.
   ⚠️ מאפיין **פיזי** (margin-left) ולא לוגי: בעמוד עברי `margin-inline-start`
      מתמפה ל-right והקלידים היו נערמים הפוך. */
.ls-piano { display: flex; height: 62px; direction: ltr; overflow: hidden; border-radius: 8px; }
.ls-key {
  flex: 1 0 15px; background: #f2f2ef; border: 1px solid #0003; border-radius: 0 0 4px 4px;
  cursor: pointer; padding: 0;
}
.ls-key:active { background: #d8d8d2; }
.ls-key.black {
  flex: 0 0 11px; height: 62%; background: #1b1f26; margin-left: -6px;
  margin-right: -6px; z-index: 2; border-radius: 0 0 3px 3px;
}
.ls-key.black:active { background: #333a44; }

/* 🎒 §5 — אזור התלמיד */
.st-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 16px; }
.st-stat {
  display: flex; align-items: center; gap: 7px;
  background: #ffffff08; border: 1px solid #ffffff10;
  padding: 9px 13px; border-radius: 12px; font-size: .85rem; color: var(--dim);
}
.st-stat .ic { width: 17px; height: 17px; color: var(--acc2); }
.st-stat b { color: var(--fg); font-size: 1.15rem; }
.st-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.st-badge {
  display: flex; align-items: center; gap: 5px; font-size: .76rem;
  background: #ffffff0c; padding: 6px 10px; border-radius: 999px;
}
.st-badge .ic { width: 14px; height: 14px; color: #e8c05a; }

.hw-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid #ffffff0d;
}
.hw-row:last-child { border-bottom: 0; }
.hw-row.done .hw-mid b { text-decoration: line-through; color: var(--dim); }
.hw-mark {
  background: #ffffff0c; border: 1px solid #ffffff14; border-radius: 9px;
  padding: 7px; cursor: pointer; color: var(--dim); flex: none;
}
.hw-row.done .hw-mark { background: #2e7d5b33; color: #7fd8ab; }
.hw-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hw-due { font-size: .76rem; color: var(--dim); }
.hw-due.late { color: #e8a33d; }
.hw-by { font-size: .74rem; color: var(--dim); }
.hw-fb { display: flex; gap: 6px; align-items: flex-start; font-size: .8rem;
         background: #ffffff08; padding: 7px 9px; border-radius: 9px; margin-top: 3px; }
.hw-fb .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--acc2); }
.hw-acts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.hw-file { position: absolute; width: 1px; height: 1px; opacity: 0;
           pointer-events: none; }
.hw-acts .mini-btn { position: relative; overflow: hidden; }
.hw-acts .mini-btn.busy { opacity: .5; pointer-events: none; }
.hw-form { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }

.sum-row { padding: 11px 0; border-bottom: 1px solid #ffffff0d; }
.sum-row:last-child { border-bottom: 0; }
.sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sum-at { font-size: .74rem; color: var(--dim); }
.sum-keep {
  display: flex; flex-direction: column; gap: 3px; margin-top: 7px;
  background: #ffffff08; padding: 8px 10px; border-radius: 9px; font-size: .84rem;
}
.sum-keep b { color: var(--acc2); font-size: .76rem; }

.st-teachers { display: flex; gap: 10px; flex-wrap: wrap; }
.st-teach {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: inherit; background: #ffffff08; border: 1px solid #ffffff10;
  padding: 9px 13px; border-radius: 12px;
}
.st-teach:hover { background: #ffffff12; }
.st-av { width: 30px; height: 30px; border-radius: 50%; display: grid;
         place-items: center; flex: none; }
.st-av .ic { width: 17px; height: 17px; color: #fff; }
.st-last { font-size: .74rem; color: var(--dim); }

/* 💳 §7 — ארנק */
.wl-manual {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
  background: #e8a33d1a; border: 1px solid #e8a33d33; border-radius: 12px;
  margin-bottom: 14px; font-size: .87rem;
}
.wl-manual .ic { width: 19px; height: 19px; color: #e8a33d; flex: none; }
.wl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wl-lbl { color: var(--dim); font-size: .9rem; }
.wl-bal { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.wl-tx {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid #ffffff0d;
  font-size: .85rem;
}
.wl-tx:last-child { border-bottom: 0; }
.wl-note { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-at { font-size: .74rem; color: var(--dim); }
.wl-amt { font-variant-numeric: tabular-nums; }
.wl-amt.pos { color: #7fd8ab; }
.wl-amt.neg { color: #e08b8b; }
.wl-rule {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #ffffff0d; font-size: .87rem;
}
.wl-rule:last-child { border-bottom: 0; }
.wl-pct { color: #e8a33d; }
.wl-pct.free { color: #7fd8ab; }
.wl-pct.full { color: #e08b8b; }

/* 🔎 §2 — סינון מורחב. מקופל: תשעה שדות פתוחים דוחפים את התוצאות
   מתחת לקיפול, ואז המחפש לא רואה אף מורה. */
.filters-more { margin: 10px 0 14px; padding: 0; }
.filters-more > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 14px; font-size: .9rem; list-style: none;
}
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more[open] > summary { border-bottom: 1px solid #ffffff10; }
.f-count {
  margin-inline-start: auto; background: var(--acc); color: var(--on-accent);
  min-width: 20px; height: 20px; border-radius: 999px; font-size: .72rem;
  display: grid; place-items: center; padding: 0 6px;
}
.f-count:empty { display: none; }
.fm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; padding: 12px 14px;
}
.fm-wide { grid-column: 1 / -1; }
.fm-range { display: flex; gap: 6px; }
.fm-range > * { flex: 1; min-width: 0; }
.filters-more #fClear { margin: 0 14px 12px; }

/* ⭐ §6 — ביקורות: פירוק, בחירה רב-ממדית, ותגובת-מורה */
.rev-dims { margin: 6px 0 14px; }
.rev-dims-h { font-size: .78rem; color: var(--dim); margin-bottom: 7px; }
.rev-dim {
  display: grid; grid-template-columns: 92px 1fr 30px; gap: 9px;
  align-items: center; font-size: .82rem; margin-bottom: 5px;
}
.rev-bar { height: 5px; background: #ffffff12; border-radius: 999px; overflow: hidden; }
.rev-bar i { display: block; height: 100%; background: var(--acc2); }
.rev-dim b { font-variant-numeric: tabular-nums; text-align: end; }

.rev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rev-lbl { font-size: .82rem; color: var(--dim); min-width: 92px; }
.star-pick { display: flex; gap: 2px; }
.star-b { background: none; border: 0; padding: 3px; cursor: pointer;
          color: var(--dim); line-height: 0; }
.star-b.on { color: #e8c05a; }

.rev-reply {
  display: block; margin-top: 7px; padding: 8px 10px; font-size: .84rem;
  background: #ffffff08; border-inline-start: 2px solid var(--acc2);
  border-radius: 0 9px 9px 0;
}
.rev-pending {
  display: flex; flex-direction: column; gap: 5px; padding: 10px 12px;
  background: #e8a33d14; border: 1px solid #e8a33d2e; border-radius: 11px;
  font-size: .84rem; margin: 10px 0;
}
.rev-pending .ic { width: 15px; height: 15px; color: #e8a33d; }

/* 💳 §3 — כרטיסיות ורשימת-המתנה */
.pk-list { display: grid; gap: 9px; margin-bottom: 16px; }
.pk-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px;
  align-items: center; padding: 11px 13px; background: #ffffff08;
  border: 1px solid #ffffff10; border-radius: 12px;
}
.pk-card > b { grid-column: 1; }
.pk-n {
  grid-column: 2; background: #ffffff10; border-radius: 999px;
  padding: 2px 9px; font-size: .78rem; color: var(--dim);
}
.pk-card .pk-buy { grid-column: 3; grid-row: 1 / 3; }
.pk-price { grid-column: 1 / 3; font-size: .86rem; }
.pk-price small { color: var(--dim); }
.pk-off {
  grid-column: 1 / 3; font-size: .74rem; color: #7fd8ab;
}
.pk-mine {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .82rem; color: var(--dim); padding: 8px 2px;
}
.pk-st { font-style: normal; color: #e8a33d; }

.wl-box {
  padding: 12px 14px; background: #ffffff06; border: 1px solid #ffffff10;
  border-radius: 12px; margin-bottom: 18px;
}
.wl-head { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.wl-head .ic { width: 17px; height: 17px; color: var(--acc2); }
.wl-hint { font-size: .8rem; color: var(--dim); margin: 5px 0 10px; }
.wl-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-pick select, .wl-pick input { flex: 1; min-width: 88px; }
.wl-pick .mini-btn.on { background: var(--acc); color: var(--on-accent); }

/* 🚫 §7 — חלונית-ביטול. ⚠️ `position: fixed` על השכבה בלבד; המידות
   הפיזיות (left/right) ולא לוגיות — בעמוד עברי inset-inline מתהפך. */
.cx-back {
  position: fixed; inset: 0; z-index: 90; background: #05070bcc;
  display: grid; place-items: center; padding: 18px;
}
.cx-box {
  width: min(380px, 100%); background: #12161c; border: 1px solid #ffffff14;
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column;
  gap: 9px;
}
.cx-box > b { font-size: 1.05rem; }
.cx-when { font-size: .84rem; color: var(--dim); margin: 0; }
.cx-sum {
  padding: 11px 13px; border-radius: 11px; font-weight: 600; font-size: .95rem;
}
.cx-sum.free { background: #2e7d5b22; color: #7fd8ab; }
.cx-sum.part { background: #e8a33d1a; color: #e8a33d; }
.cx-sum.full { background: #a3333322; color: #e08b8b; }
.cx-refund { font-size: .84rem; color: var(--dim); margin: 0; }
.cx-rules { display: flex; flex-direction: column; gap: 3px; font-size: .76rem;
            color: var(--dim); border-top: 1px solid #ffffff10; padding-top: 9px; }
.cx-rule.now { color: var(--fg); font-weight: 600; }
.cx-acts { display: flex; gap: 8px; margin-top: 4px; }
.cx-acts button { flex: 1; }
.cx-go { background: #a3333333; color: #e08b8b; }

/* 🛠️ §8.2 — לוח-ניהול המערכת */
.ah-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
           gap: 9px; margin-bottom: 12px; }
.ah-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 12px;
  background: #ffffff08; border: 1px solid #ffffff10; border-radius: 12px;
}
.ah-stat .ic { width: 17px; height: 17px; color: var(--acc2); }
.ah-stat b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ah-stat span { font-size: .74rem; color: var(--dim); }
.ah-stat.warn { background: #e8a33d14; border-color: #e8a33d3a; }
.ah-stat.warn .ic, .ah-stat.warn b { color: #e8a33d; }

.ah-note { display: flex; align-items: center; gap: 8px; font-size: .84rem;
           color: var(--dim); margin-bottom: 16px; }
.ah-note .ic { width: 16px; height: 16px; }
.ah-note.warn { color: #e8a33d; }

.ah-rev { padding: 12px 0; border-bottom: 1px solid #ffffff0d; }
.ah-rev:last-child { border-bottom: 0; }
.ah-rev-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
            font-size: .86rem; }
.ah-arrow { color: var(--dim); }
.ah-stars { color: #e8c05a; }
.ah-at { margin-inline-start: auto; font-size: .74rem; color: var(--dim); }
.ah-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            margin: 6px 0; font-size: .74rem; }
.ah-flags-l { color: var(--dim); }
.ah-flag { font-style: normal; background: #e8a33d1f; color: #e8a33d;
           padding: 2px 8px; border-radius: 999px; }
.ah-rev-t { font-size: .88rem; margin: 6px 0 9px; }
.ah-acts { display: flex; gap: 7px; flex-wrap: wrap; }

.ah-rules { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
/* ⚠️ גריד ולא flex-wrap: התווית של המדרגה האחרונה קצרה יותר, ולכן
   כפתור-המחיקה נשבר לשורה משלו **רק שם** — והשורה נראתה שבורה. */
.ah-rule {
  display: grid; grid-template-columns: auto minmax(58px, 1fr) auto
                                        minmax(58px, 1fr) auto auto;
  align-items: center; gap: 7px;
}
.ah-rule input { width: 100%; min-width: 0; }
.ah-rule-l { font-size: .8rem; color: var(--dim); white-space: nowrap; }
.ah-x { padding: 6px; }

.ah-search { display: flex; gap: 7px; margin-bottom: 10px; }
.ah-search input { flex: 1; min-width: 0; }
.ah-sess { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
           padding: 8px 0; border-bottom: 1px solid #ffffff0d; font-size: .82rem; }
.ah-sess:last-child { border-bottom: 0; }
.ah-room { font-family: var(--mono, monospace); color: var(--dim); font-size: .76rem; }
.ah-live { color: #7fd8ab; }
.ah-dur { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* 🗂️ §8.1 — תיק-תלמיד · 🎥 §4.4 — הקלטות */
.sf-list, .rc-list { display: flex; flex-direction: column; }
.sf-row, .rc-row {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid #ffffff0d;
}
.sf-row:last-child, .rc-row:last-child { border-bottom: 0; }
.sf-mid, .rc-mid { flex: 1; min-width: 140px; display: flex;
                   flex-direction: column; gap: 2px; }
.sf-mid b { display: inline-flex; align-items: center; gap: 7px; }
.sf-minor { font-size: .7rem; background: #e8a33d1f; color: #e8a33d;
            padding: 1px 8px; border-radius: 999px; font-weight: 400; }
.sf-meta, .rc-mid small { font-size: .76rem; color: var(--dim); }
.sf-next { display: flex; align-items: center; gap: 5px; font-size: .76rem;
           color: var(--acc2); }
.sf-next .ic { width: 13px; height: 13px; }
.sf-acts, .rc-row > .mini-btn, .rc-row > a { flex: none; }
.sf-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-inline { display: flex; gap: 6px; }
.sf-inline input[type="text"] { flex: 2; }
.sf-inline input[type="date"] { flex: 1; min-width: 130px; }
.sf-warn { font-size: .78rem; color: #e08b8b; }
.rc-left { color: var(--dim); }
.rc-left.soon { color: #e8a33d; }

/* 🛒 §3/§4 — מסך-החיפוש המאוחד */
.mk-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px;
           scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab {
  flex: none; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: #ffffff08; border: 1px solid #ffffff12; color: var(--dim);
  font: inherit; font-size: .86rem; white-space: nowrap;
}
.mk-tab.on { background: var(--acc); border-color: transparent; color: var(--on-accent); }
.mk-n { font-size: .74rem; opacity: .75; }

.mk-search { display: flex; gap: 7px; margin-bottom: 4px; }
.mk-search input { flex: 2; min-width: 0; }
.mk-search select { flex: 1; min-width: 110px; }

/* §3 — כרטיס-קטלוג. ⚠️ מעל התוצאות ובעיצוב שונה: זו לא מודעה אלא
   «כל ההצעות למוצר הזה», ואם הוא נראה כמו מודעה איש לא ילחץ. */
.mk-catalog { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mk-cat-card {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  background: #7a869914; border: 1px solid #7a869933; border-radius: 13px;
  text-decoration: none; color: inherit;
}
.mk-cat-card:hover { background: #7a86991f; }
.mk-cat-card img { width: 46px; height: 46px; object-fit: contain; flex: none;
                   border-radius: 8px; background: #ffffff0a; }
.mk-cat-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-cat-mid small { color: var(--dim); font-size: .76rem; }
.mk-cat-price { display: flex; flex-direction: column; align-items: flex-end;
                flex: none; }
.mk-cat-price small { font-size: .7rem; color: var(--dim); }

.mk-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mk-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #ffffff08; border: 1px solid #ffffff10; border-radius: 13px;
  overflow: hidden;
}
.mk-card:hover { background: #ffffff0f; }
/* §10 — הבלטה חזותית. גוון ולא צהוב-זועק: מודעה שצועקת פוגעת גם בסביבה. */
.mk-card.hl { background: #e8c05a14; border-color: #e8c05a4d; }
.mk-ph { position: relative; aspect-ratio: 4 / 3; background: #ffffff08;
         display: grid; place-items: center; }
.mk-ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-nophoto { width: 30px; height: 30px; color: #ffffff26; }
.mk-badge {
  position: absolute; top: 7px; display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600;
  backdrop-filter: blur(4px);
}
/* ⚠️ מאפיין **פיזי**: בעמוד עברי inset-inline מתהפך והתגים נערמים. */
.mk-badge.prem { left: 7px; background: #0c1016cc; color: #7fd8ab; }
.mk-badge.promo { right: 7px; background: #0c1016cc; color: #e8c05a; }
.mk-badge.sold { left: 7px; top: auto; bottom: 7px; background: #0c1016e6;
                 color: var(--dim); }
.mk-badge .ic { width: 12px; height: 12px; }
.mk-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.mk-title { font-size: .88rem; line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; }
.mk-price { font-size: 1.02rem; font-weight: 600; }
.mk-meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: .74rem;
           color: var(--dim); align-items: center; }
.mk-cond { background: #ffffff10; padding: 1px 7px; border-radius: 999px; }
.mk-verified { display: inline-flex; align-items: center; gap: 3px; color: #7fd8ab; }
.mk-verified .ic { width: 12px; height: 12px; }
.mk-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-tag { font-size: .68rem; color: var(--dim); background: #ffffff0a;
          padding: 1px 7px; border-radius: 999px; }
.mk-tag.warn { color: #e8a33d; background: #e8a33d14; }
.mk-more { display: block; margin: 14px auto; }

/* §10 — סליידר VIP */
.mk-vip { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 12px;
          scrollbar-width: none; }
.mk-vip::-webkit-scrollbar { display: none; }
.mk-vip-it {
  position: relative; flex: none; width: 132px; text-decoration: none;
  color: inherit; background: #ffffff08; border: 1px solid #e8c05a3a;
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.mk-vip-it img { width: 100%; height: 88px; object-fit: cover; }
.mk-vip-t { padding: 6px 8px 0; font-size: .78rem; line-height: 1.25;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; }
.mk-vip-p { padding: 2px 8px 8px; font-weight: 600; font-size: .84rem; }

/* 🧭 §7 — אשף-ההעלאה */
.wz-wrap { max-width: 620px; margin: 0 auto; }
.wz-steps { display: flex; gap: 4px; list-style: none; padding: 0;
            margin: 4px 0 14px; }
.wz-steps li { flex: 1; display: flex; flex-direction: column; align-items: center;
               gap: 4px; font-size: .7rem; color: var(--dim); position: relative; }
.wz-steps li b {
  width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; background: #12161c; font-size: .78rem;
  border: 1px solid #ffffff14;
}
.wz-steps li.on { color: var(--fg); }
.wz-steps li.on b { background: var(--acc); border-color: transparent; color: var(--on-accent); }
/* קו-מחבר — **קו אחד על המכל** ולא ::after לכל שלב.
   ⚠️⚠️ הגרסה הראשונה נתנה לכל פריט `width:100%` שמתחיל ב-`right:50%`,
   כלומר חצי-תא **מחוץ** לתא. זה נראה נכון על המסך אבל הוסיף 32px
   לרוחב-הגלילה של כל הדף — גלישה אופקית שנתפסה רק במדידה, לא בעין. */
.wz-steps { position: relative; }
.wz-steps::before {
  content: ""; position: absolute; top: 13px; left: 13%; right: 13%;
  height: 1px; background: #ffffff14;
}
.wz-steps li { min-width: 0; z-index: 1; }
.wz-steps li span { text-align: center; overflow-wrap: anywhere; }

.wz-pane { display: none; }
.wz-pane.on { display: block; }
.wz-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px;
          padding-top: 14px; border-top: 1px solid #ffffff10; }
.wz-nav .btn-primary { margin-inline-start: auto; }
.wz-nav .form-err { font-size: .82rem; }

.wz-hits { display: flex; flex-direction: column; gap: 4px; margin: -8px 0 10px; }
.wz-hit {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 11px; background: #ffffff08; border: 1px solid #ffffff10;
  border-radius: 10px; cursor: pointer; color: var(--fg); font: inherit;
  text-align: start;
}
.wz-hit:hover { background: #ffffff12; }
.wz-hit small { color: var(--dim); font-size: .72rem; }
.wz-picked {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: #7a869922; border: 1px solid #7a869944; border-radius: 11px;
  margin-bottom: 10px;
}
.wz-picked .mini-btn { margin-inline-start: auto; padding: 4px 10px; }
.wz-newbox { margin: 8px 0; padding: 11px; background: #ffffff06;
             border-radius: 11px; }

.wz-conds { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-cond {
  padding: 8px 13px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: .82rem; background: #ffffff08; border: 1px solid #ffffff12;
  color: var(--dim);
}
.wz-cond.on { background: var(--acc); border-color: transparent; color: var(--on-accent); }

.wz-file { position: relative; overflow: hidden; display: inline-flex;
           align-items: center; gap: 7px; }
.wz-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
             gap: 7px; margin-bottom: 9px; }
.wz-photo { aspect-ratio: 1; border-radius: 9px; overflow: hidden;
            background: #ffffff0c; }
.wz-photo img { width: 100%; height: 100%; object-fit: cover; }
.wz-photo.busy { animation: wzpulse 1s ease-in-out infinite; }
@keyframes wzpulse { 50% { opacity: .4; } }
.wz-media-box { margin-top: 14px; padding: 12px; background: #7fd8ab0f;
                border: 1px solid #7fd8ab2e; border-radius: 12px; }
.wz-media-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.wz-media-h .ic { width: 17px; height: 17px; color: #7fd8ab; }
.wz-prem { position: static; margin-inline-start: auto; }
.wz-rights { margin-top: 10px; }

/* 📦 §3 — עמוד-מוצר */
.pd-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pd-img { width: 108px; height: 108px; flex: none; border-radius: 13px;
          background: #ffffff08; display: grid; place-items: center;
          overflow: hidden; }
.pd-img img { width: 100%; height: 100%; object-fit: contain; }
.pd-img .ic { width: 32px; height: 32px; color: #ffffff26; }
.pd-id { flex: 1; min-width: 0; }
.pd-avail { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
            margin: 6px 0 10px; }
.pd-count { font-size: .82rem; color: var(--dim); }
.pd-from { display: flex; align-items: baseline; gap: 5px; }
.pd-from small { font-size: .74rem; color: var(--dim); }
.pd-from b { font-size: 1.25rem; }
.pd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 6px 14px; }
.pd-spec { display: flex; justify-content: space-between; gap: 8px;
           font-size: .84rem; padding: 5px 0; border-bottom: 1px solid #ffffff0d; }
.pd-spec span { color: var(--dim); }
.pd-offers { display: flex; flex-direction: column; }
.pd-offer {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid #ffffff0d; text-decoration: none; color: inherit;
}
.pd-offer:last-child { border-bottom: 0; }
.pd-offer.sold { opacity: .5; }
.pd-o-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-o-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pd-o-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pd-o-price b { font-size: 1.02rem; }
.pd-o-price small { font-size: .7rem; color: var(--dim); }

/* 🛒 §8 — עגלה */
.ct-wrap { max-width: 640px; margin: 0 auto; }
.ct-group { margin-bottom: 12px; }
.ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
           padding-bottom: 9px; border-bottom: 1px solid #ffffff10; }
.ct-shop { display: flex; align-items: center; gap: 7px; text-decoration: none;
           color: inherit; }
.ct-shop .ic { width: 17px; height: 17px; color: var(--acc2); }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.ct-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px;
              flex: none; }
.ct-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-mid small { font-size: .76rem; color: var(--dim); }
.ct-low { color: #e8a33d !important; }
.ct-line { flex: none; font-variant-numeric: tabular-nums; }
.ct-x { padding: 6px; flex: none; }
.ct-ship { margin: 10px 0; padding-top: 10px; border-top: 1px solid #ffffff0d; }
.ct-rate { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
           border-radius: 10px; cursor: pointer; font-size: .85rem;
           border: 1px solid transparent; }
.ct-rate.on { background: #ffffff0c; border-color: #ffffff18; }
.ct-rate-t { flex: 1; }
.ct-rate small { color: var(--dim); font-size: .74rem; }
.ct-sum { margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff10; }
.ct-sum-l { display: flex; justify-content: space-between; font-size: .85rem;
            padding: 3px 0; color: var(--dim); }
.ct-sum-l.strong { color: var(--fg); font-size: 1rem; padding-top: 7px; }
.ct-checkout { margin-top: 14px; }
.ct-total { display: flex; justify-content: space-between; align-items: baseline;
            padding: 12px 0; border-top: 1px solid #ffffff10; margin-top: 6px; }
.ct-total b { font-size: 1.35rem; }

/* 📦 §8/§11 — הזמנות */
.or-card { margin-bottom: 11px; }
.or-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           margin-bottom: 9px; }
.or-code { font-family: var(--mono, monospace); font-size: .84rem; }
.or-state { font-size: .74rem; padding: 2px 9px; border-radius: 999px;
            background: #ffffff10; color: var(--dim); }
.or-state.paid, .or-state.shipped { background: #7a869926; color: var(--fg); }
.or-state.done { background: #2e7d5b26; color: #7fd8ab; }
.or-state.cancelled, .or-state.refunded { background: #a3333322; color: #e08b8b; }
.or-escrow { font-size: .72rem; padding: 2px 9px; border-radius: 999px;
             background: #e8a33d1f; color: #e8a33d; }
.or-escrow.ok { background: #2e7d5b26; color: #7fd8ab; }
.or-at { margin-inline-start: auto; font-size: .74rem; color: var(--dim); }
.or-shop { display: flex; align-items: center; gap: 6px; font-size: .84rem;
           color: var(--acc2); text-decoration: none; margin-bottom: 6px; }
.or-shop .ic { width: 15px; height: 15px; }
.or-item { display: flex; align-items: center; gap: 9px; padding: 5px 0;
           font-size: .86rem; }
.or-item > span:first-child { flex: 1; min-width: 0; }
.or-sum { display: flex; justify-content: space-between; padding-top: 8px;
          margin-top: 6px; border-top: 1px solid #ffffff10; }
.or-payout { display: flex; justify-content: space-between; font-size: .8rem;
             color: var(--dim); padding-top: 4px; }
.or-track { display: flex; align-items: center; gap: 7px; font-size: .8rem;
            color: var(--dim); padding: 7px 0; }
.or-track .ic { width: 14px; height: 14px; }
.or-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* 🏬 §9 — מיני-סייט */
.sp-cover { height: 132px; border-radius: 14px; overflow: hidden;
            background: #ffffff08; }
.sp-cover img { width: 100%; height: 100%; object-fit: cover; }
.sp-cover.empty-cover { background: linear-gradient(135deg, #1a1f28, #12161c); }
.sp-id { display: flex; align-items: center; gap: 12px; margin: -28px 0 10px;
         padding: 0 12px; position: relative; }
.sp-logo { width: 62px; height: 62px; border-radius: 14px; flex: none;
           background: #12161c; border: 2px solid #12161c; display: grid;
           place-items: center; overflow: hidden; }
.sp-logo img { width: 100%; height: 100%; object-fit: cover; }
.sp-logo .ic { width: 26px; height: 26px; color: var(--dim); }
.sp-id-t { flex: 1; min-width: 0; padding-top: 26px; }
.sp-id-t .page-title { margin: 0; font-size: 1.25rem; }
.sp-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
           font-size: .78rem; color: var(--dim); margin-top: 3px; }
.sp-kyc { display: inline-flex; align-items: center; gap: 4px; }
.sp-kyc .ic { width: 13px; height: 13px; }
.sp-kyc.ok { color: #7fd8ab; }
.sp-about { font-size: .88rem; color: var(--dim); margin: 0 0 14px; }
.sp-search { display: flex; gap: 7px; margin-bottom: 12px; }
.sp-search input { flex: 2; min-width: 0; }
.sp-search select { flex: 1; min-width: 110px; }
.sp-policies { margin-top: 16px; }
.sp-pol { margin-bottom: 12px; }
.sp-pol b { display: flex; align-items: center; gap: 6px; font-size: .88rem;
            margin-bottom: 4px; }
.sp-pol p { font-size: .84rem; color: var(--dim); white-space: pre-wrap; }
.sp-rates, .sh-rates { display: flex; flex-direction: column; gap: 5px; }
.sp-rate, .sh-rate { display: flex; align-items: center; gap: 9px;
                     font-size: .84rem; padding: 7px 0;
                     border-bottom: 1px solid #ffffff0d; }
.sp-rate:last-child, .sh-rate:last-child { border-bottom: 0; }
.sp-rate small, .sh-rate small { color: var(--dim); font-size: .74rem; }
.sp-rate b, .sh-rate b { margin-inline-start: auto; }
.sh-rate b { margin-inline-start: 0; }
.sh-rate > b:first-child { flex: 1; min-width: 0; }
.sh-x { padding: 5px; }
.sp-free { color: #7fd8ab !important; }
.sh-imgs { display: flex; gap: 8px; flex-wrap: wrap; }

/* 🔊 §5 — מוצר דיגיטלי ונגן-ההדגמה */
.dg-wrap { max-width: 620px; margin: 0 auto; }
.dg-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem;
           color: var(--dim); margin: -8px 0 14px; }
.dg-by { color: var(--acc2); text-decoration: none; }
.dg-player { padding: 14px; }
.dg-play-row { display: flex; align-items: center; gap: 12px; }
.dg-play {
  width: 46px; height: 46px; border-radius: 50%; flex: none; cursor: pointer;
  border: 0; background: var(--acc); color: var(--on-accent); display: grid;
  place-items: center;
}
.dg-play.on { background: #ffffff18; color: var(--fg); }
.dg-play .ic { width: 20px; height: 20px; }
/* ⚠️ סרגל-ההתקדמות ב-LTR מפורש: הוא מייצג זמן, ובעמוד עברי היפוך
   הכיוון גורם לו למלא מימין ולסתור את הקפיצה לפי clientX. */
.dg-bar { flex: 1; height: 6px; border-radius: 999px; background: #ffffff14;
          cursor: pointer; direction: ltr; overflow: hidden; }
.dg-bar i { display: block; height: 100%; width: 0; background: var(--acc2); }
.dg-time { font-size: .8rem; color: var(--dim);
           font-variant-numeric: tabular-nums; min-width: 34px; }
.dg-note { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem;
           color: var(--dim); margin-top: 11px; }
.dg-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.dg-noprev { display: flex; align-items: center; gap: 8px; font-size: .84rem;
             color: var(--dim); padding: 12px 14px; background: #ffffff06;
             border-radius: 12px; margin-bottom: 12px; }
.dg-buy { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dg-price { font-size: 1.6rem; }
.dg-lic { font-size: .76rem; color: var(--dim); background: #ffffff10;
          padding: 2px 9px; border-radius: 999px; }
.dg-excl { font-size: .8rem; color: #e8a33d; margin-bottom: 10px; }
.dg-sold { font-size: .9rem; color: var(--dim); }
.dg-desc { font-size: .9rem; white-space: pre-wrap; }
.dg-report { margin-top: 18px; text-align: center; }

/* ⚠️ כותרת של עמוד-פריט. **לא** `.page-title` — היא מוסתרת כשיש סרגל-
   ניווט (`body.has-nav`), והסרגל מציג את שם-המסך במקומה. עמוד-מוצר
   חייב להציג את שם-המוצר עצמו. */
.dg-title { font-size: 1.45rem; line-height: 1.25; margin: 4px 0 8px;
            font-weight: 600; letter-spacing: -.015em; }


/* 📣 §10 — קידום */
.pm-list { display: grid; gap: 10px; margin-bottom: 14px; }
.pm-card { display: flex; flex-direction: column; gap: 7px; }
.pm-head { display: flex; align-items: center; gap: 9px; }
.pm-head .ic { width: 19px; height: 19px; color: var(--acc2); }
.pm-price { margin-inline-start: auto; font-size: 1.15rem; font-weight: 600; }
.pm-about { font-size: .85rem; color: var(--dim); }
.pm-days, .pm-slots { font-size: .76rem; color: var(--dim);
                      background: #ffffff0a; padding: 2px 9px;
                      border-radius: 999px; align-self: flex-start; }
.pm-slots { color: #7fd8ab; }
.pm-row { display: flex; align-items: center; gap: 9px; padding: 9px 0;
          border-bottom: 1px solid #ffffff0d; }
.pm-row:last-child { border-bottom: 0; }
.pm-row .ic { width: 17px; height: 17px; color: var(--dim); flex: none; }
.pm-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-mid small { font-size: .74rem; color: var(--dim); }
.pm-st { font-size: .72rem; padding: 2px 9px; border-radius: 999px;
         background: #ffffff10; color: var(--dim); }
.pm-st.active { background: #2e7d5b26; color: #7fd8ab; }
.pm-st.pending_payment { background: #e8a33d1f; color: #e8a33d; }

/* 🔔 §6 — סוכני חיפוש */
.ag-row { display: flex; align-items: center; gap: 9px; padding: 10px 0;
          border-bottom: 1px solid #ffffff0d; }
.ag-row:last-child { border-bottom: 0; }
.ag-row.off { opacity: .5; }
.ag-row > .ic { width: 17px; height: 17px; color: var(--acc2); flex: none; }
.ag-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-mid small { font-size: .74rem; color: var(--dim); }
/* ⚠️ `direction: ltr` על השאילתה: היא מחרוזת-URL, ובעמוד עברי היא
   מוצגת הפוכה ונראית שבורה. */
.ag-q { direction: ltr; text-align: start; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; opacity: .8; }

/* 📋 §6 — מכרז הפוך */
.rq-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
/* ⚠️ `min-width: 0` על השורה עצמה, לא רק על השדה. פריט-flex מקבל
   `min-width: auto` כברירת-מחדל, ולכן שדה + מספר + כפתור דחפו את
   הכרטיס 28px מעבר לרוחב-המסך. נתפס רק במדידה, לא בעין. */
.rq-item { display: flex; gap: 6px; min-width: 0; }
/* ⚠️⚠️ `width: auto` מפורש. הכלל הגלובלי נותן לכל `input` רוחב 100%,
   ובתוך flex זה מחושב כ-100% מהמכל — ואז שדה + כמות + כפתור חורגים
   ב-74px. `flex: 1 1 0` לבדו אינו מספיק כשיש `width` מפורש. */
.rq-item input[type=text] { flex: 1 1 0; width: auto; min-width: 0; }
.rq-qty { width: 62px !important; flex: none; }
.rq-item .mini-btn { flex: none; padding: 6px; }
.rq-card, .rq-head, .rq-bid, .rq-bid-mid { min-width: 0; }
.rq-bid-mid small { overflow-wrap: anywhere; }
.rq-list { display: flex; flex-direction: column; gap: 11px; }
.rq-card { display: flex; flex-direction: column; gap: 7px; }
.rq-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rq-st { font-size: .72rem; padding: 2px 9px; border-radius: 999px;
         background: #ffffff10; color: var(--dim); }
.rq-st.open { background: #2e7d5b26; color: #7fd8ab; }
.rq-st.won { background: #2e7d5b26; color: #7fd8ab; }
.rq-close { margin-inline-start: auto; color: var(--dim); font-size: .74rem; }
.rq-budget { font-size: .84rem; color: var(--dim); }
.rq-need { list-style: none; padding: 0; display: flex; flex-direction: column;
           gap: 3px; }
.rq-need li { font-size: .86rem; padding-inline-start: 14px; position: relative; }
/* ⚠️ תבליט דרך ::before עם מאפיין **פיזי** — list-style בעברית מציב
   את הנקודה בצד הלא-נכון בחלק מהדפדפנים. */
.rq-need li::before { content: "\00B7"; position: absolute; right: 0;
                      color: var(--acc2); }
.rq-detail { font-size: .84rem; color: var(--dim); white-space: pre-wrap; }
.rq-bids-h { font-size: .78rem; color: var(--dim); margin-top: 6px;
             border-top: 1px solid #ffffff10; padding-top: 8px; }
.rq-bid { display: flex; align-items: center; gap: 9px; padding: 8px 0;
          border-bottom: 1px solid #ffffff0d; }
.rq-bid.won { background: #2e7d5b12; border-radius: 9px; padding: 8px; }
.rq-bid-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rq-bid-shop { display: flex; align-items: center; gap: 6px; }
.rq-bid-mid small { font-size: .76rem; color: var(--dim); }
.rq-bid-total { font-variant-numeric: tabular-nums; }
.rq-mybid { font-size: .84rem; color: var(--acc2); }

/* 🔨 §6 — פומביות */
.au-list { display: flex; flex-direction: column; gap: 11px; }
.au-card { display: flex; flex-direction: column; gap: 8px; }
.au-card.lead { border-color: #7fd8ab4d; }
.au-head { display: flex; align-items: center; gap: 9px; }
.au-head b { flex: 1; min-width: 0; }
.au-st { font-size: .72rem; padding: 2px 9px; border-radius: 999px;
         background: #ffffff10; color: var(--dim); }
.au-st.live { background: #2e7d5b26; color: #7fd8ab; }
.au-st.sold { background: #7a869926; color: var(--fg); }
.au-now { display: flex; justify-content: space-between; align-items: flex-end; }
.au-col { display: flex; flex-direction: column; gap: 2px; }
.au-col.end { align-items: flex-end; }
.au-col small { font-size: .72rem; color: var(--dim); }
.au-amount { font-size: 1.35rem; }
.au-time { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.au-time.soon { color: #e8a33d; }
.au-res { font-size: .76rem; color: #e8a33d; }
.au-res.ok { color: #7fd8ab; }
.au-lead { font-size: .78rem; color: #7fd8ab; }
.au-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
           padding-top: 8px; border-top: 1px solid #ffffff10; }
.au-min { font-size: .76rem; color: var(--dim); flex-basis: 100%; }
.au-form input { flex: 1; min-width: 90px; }
.au-nohold { display: flex; align-items: center; gap: 6px; font-size: .74rem;
             color: #e8a33d; }
.au-nohold .ic { width: 13px; height: 13px; }

/* 🔄 §6 — טרייד-אין */
.ti-card { display: flex; flex-direction: column; gap: 8px; }
.ti-head { display: flex; align-items: center; gap: 9px; }
.ti-head b { flex: 1; min-width: 0; }
.ti-st { font-size: .72rem; padding: 2px 9px; border-radius: 999px;
         background: #ffffff10; color: var(--dim); }
.ti-st.accepted, .ti-st.done { background: #2e7d5b26; color: #7fd8ab; }
.ti-st.declined { background: #a3333322; color: #e08b8b; }
.ti-pair { display: flex; align-items: center; gap: 10px; }
.ti-pair > .ic { width: 18px; height: 18px; color: var(--dim); flex: none; }
.ti-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-side small { font-size: .72rem; color: var(--dim); }
.ti-item { color: inherit; text-decoration: none; font-size: .88rem; }
.ti-quote { display: flex; justify-content: space-between; padding: 9px 11px;
            background: #ffffff08; border-radius: 10px; font-size: .88rem; }
.ti-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* 🔑 שער-הכניסה לזירות-המרקטפלייס (עגלה · הזמנות · סוכנים · RFQ · פומביות ·
   טרייד-אין). רצועה נגללת ולא תפריט נפתח: תפריט מסתיר, ומה שמוסתר לא נמצא.
   אייקון **וגם** מילה — אייקון לבדו בלתי-נראה גם עם tooltip. */
/* ⚠️⚠️ **גולש לשורה, לא נגלל.** בגרסה הראשונה זו הייתה רצועה נגללת
   כמו טאבי-הסינון — ובצילום-המסך נראו **שלוש מתוך שש** הכניסות; השאר
   היו מעבר לקצה. סינון שנגלל זה בסדר (המשתמש מחפש ערך מסוים), אבל
   ניווט שנגלל מסתיר יעדים שהמשתמש לא יודע שקיימים. */
.mk-go { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 10px; }
.mk-go a {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: #ffffff08; border: 1px solid #ffffff12; color: var(--dim);
  font-size: .86rem; white-space: nowrap;
}
.mk-go a:hover { background: #ffffff14; color: var(--fg); }
.mk-go .ic { width: 17px; height: 17px; }
.mk-go-n {
  min-width: 17px; padding: 0 5px; border-radius: 999px; text-align: center;
  background: var(--acc); color: var(--on-accent); font-size: .72rem; line-height: 17px;
}

/* §5 — קוד-רישוי בהזמנה. שורה משלו: קוד שנדחס לצד המחיר נחתך במסך
   צר, וקוד חתוך שווה בדיוק לקוד שגוי. */
.or-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
          margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px;
          background: #ffffff08; border: 1px solid #ffffff12; }
.or-key-t { font-size: .8rem; color: var(--dim); }
.or-key code { font-family: ui-monospace, Menlo, Consolas, monospace;
               font-size: .92rem; letter-spacing: .04em; word-break: break-all; }

/* §8.1 — בקשת-משיכה בארנק. */
.wl-po { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
         margin-bottom: 10px; }
.wl-po .fld { flex: 1; min-width: 150px; margin: 0; }
.wl-po-st { font-size: .82rem; padding: 3px 10px; border-radius: 999px;
            background: #ffffff10; }
.wl-po-st.approved { background: #3aa76d28; color: #7fd3a6; }
.wl-po-st.sent { background: var(--acc); color: var(--on-accent); }
.wl-po-st.rejected { background: #d9534f28; color: #e79490; }

/* §5 — מסלול-למידה עם פס-התקדמות. */
.syl { padding: 12px 0; border-bottom: 1px solid #ffffff10; }
.syl:last-child { border-bottom: 0; }
.syl-head { display: flex; justify-content: space-between; align-items: baseline; }
.syl-pct { color: var(--acc); font-weight: 600; }
.syl-bar { height: 7px; border-radius: 999px; background: #ffffff12;
           overflow: hidden; margin: 7px 0 4px; }
.syl-bar i { display: block; height: 100%; background: var(--acc);
             transition: width .25s ease; }
.syl-sub { font-size: .8rem; color: var(--dim); }
.syl-step { display: flex; align-items: center; gap: 9px; padding: 6px 0;
            cursor: pointer; }
.syl-step.on span { color: var(--dim); text-decoration: line-through; }

/* §5 — בונה-המסלולים אצל המורה. */
.syl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           padding: 8px 0; border-bottom: 1px solid #ffffff10; }
.syl-who { flex: 1; min-width: 120px; }
.syl-edit { display: flex; gap: 7px; margin-bottom: 6px; }
.syl-edit input { flex: 1; }
.syl-acts { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* ==================== 📱 מעטפת נייטיבית בכל רוחב ====================
   ⚠️⚠️ **נקודת-השבירה של הפריסה היא רוחב, וטאבלט הוא רחב.** נמדד על
   טאבלט אמיתי: `innerWidth = 1707`. כלומר האפליקציה שם נפלה לענף
   הדסקטופ — סרגל עליון של ~20 אייקונים בלי מילים, בלי הסרגל-התחתון
   שהמשתמש כבר למד, ותוכן מרוח על מסך שלם עם שטח שחור ריק.
   אותו קוד בדיוק בטלפון נראה מצוין, ולכן הדיווח היה «בטלפון ישב יפה,
   בטאבלט לא מסודר». הכלל שנולד מזה: **רוחב-מסך אינו סוג-מכשיר.**

   כאן נאכפת פריסת-האפליקציה לפי **הקשר-ריצה** (`html.native`) ולא לפי
   רוחב. הסלקטור ספציפי יותר מהבסיס, ולכן מנצח בכל רוחב בלי `!important`
   ובלי לגעת בפריסת-הדפדפן במחשב. */
html.native .topnav { display: none; }
html.native .navbar { display: flex; }
html.native .topbar { gap: 10px; padding: 8px 14px; }
html.native .brand-name { font-size: .98rem; }
html.native .screenbar { top: 52px; padding: 12px 14px 8px; }
html.native .screen-title { font-size: 1.32rem; }
html.native body.has-nav .page {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
}
/* עמודה קריאה במקום מריחה: על 1707px טור אחד ברוחב מלא הוא שורת-טקסט
   שאי-אפשר לעקוב אחריה, וכרטיסים שנדבקים לקצה אחד. */
html.native .page { max-width: 860px; }
html.native .social-grid { grid-template-columns: 1fr; }
/* הכפתור הצף חוזר להיות מעל הסרגל-התחתון — בענף-הדסקטופ הוא יורד
   ל-24px ומתיישב בדיוק על הסרגל. */
html.native .fab {
  bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
}

/* 🗂️ כפתור-מרחב בתפריט. שורה מלאה ולא משבצת: מתחתיו יושבת שורת-המשנה
   שמונה מה יש בפנים — בלעדיה «תווים» ו«מרקטפלייס» הם שתי מילים
   שהמשתמש צריך לנחש מה מסתתר מאחוריהן. */
.sh-it.hub {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: auto 1fr; align-items: center;
  column-gap: 12px; row-gap: 2px; text-align: start;
  background: #ffffff0d; border-color: #ffffff1f;
  font: inherit; cursor: pointer; width: 100%;
}
.sh-it.hub .ic { grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--acc); }
.sh-it.hub span { font-weight: 600; }
.sh-it.hub em {
  font-style: normal; font-size: .78rem; color: var(--dim);
  line-height: 1.45; grid-column: 2;
}
.sh-it.hub:hover { background: #ffffff16; }
.sheet-head #moreBack { margin-inline-end: auto; }

/* 🎸 תיוג-ציוד מתחת לרילס (חזון §3). */
.reel-gear { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
             margin: 6px 0 0; }
.reel-gear span { font-size: .74rem; color: #ffffff9c; }
.reel-gear a { font-size: .78rem; padding: 3px 10px; border-radius: 999px;
               background: #ffffff1f; color: #fff; text-decoration: none; }
/* 🧰 רשימת-ציוד מהמורה. */
.gear-l { padding: 10px 0; border-bottom: 1px solid #ffffff10; }
.gear-l:last-child { border-bottom: 0; }
.gear-it { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.gear-it a { color: var(--acc); }
.gear-it .g-note { font-size: .78rem; color: var(--dim); }

/* 🎸 המלצת-ציוד בעמוד-תווים (חזון §3). */
.sc-gear-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sc-gear-it { display: inline-flex; align-items: center; gap: 8px;
              padding: 8px 14px; border-radius: 999px; text-decoration: none;
              background: #ffffff0d; border: 1px solid #ffffff14;
              color: var(--fg); font-size: .88rem; }
.sc-gear-it b { color: var(--acc); }
.sc-gear-it:hover { background: #ffffff17; }

/* §9 — «חיפושים שלא נענו» בלוח-הכותב. */
.sd-miss { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.sd-miss-it { display: inline-flex; align-items: center; gap: 7px;
              padding: 6px 12px; border-radius: 999px; text-decoration: none;
              background: #ffffff0d; border: 1px solid #ffffff14;
              color: var(--fg); font-size: .85rem; }
.sd-miss-it b { color: var(--acc); font-size: .78rem; }

/* 📚 §7 — מאמרים ומדריכים. */
.ar-card { display: block; padding: 13px 15px; margin-bottom: 9px;
           border-radius: 14px; text-decoration: none; color: var(--fg);
           background: #ffffff08; border: 1px solid #ffffff12; }
.ar-card:hover { background: #ffffff12; }
.ar-sum { color: var(--dim); font-size: .88rem; margin: 5px 0 0; }
.ar-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px;
           font-size: .78rem; color: var(--dim); }
.ar-kind { padding: 1px 9px; border-radius: 999px; background: var(--acc);
           color: var(--on-accent); }
.ar-st { font-size: .74rem; padding: 2px 9px; border-radius: 999px;
         background: #ffffff14; color: var(--dim); }
.ar-st.pending { background: #d9a54f28; color: #e8c07a; }
.ar-st.rejected { background: #d9534f28; color: #e79490; }
.ar-h1 { font-size: 1.5rem; margin: 0 0 6px; }
.ar-body { line-height: 1.85; }
.ar-body p { margin: 0 0 14px; }
.ar-acts { display: flex; gap: 9px; margin: 16px 0; }
.ar-series .syl-bar { margin: 8px 0 4px; }
.ar-step { display: block; padding: 7px 0; text-decoration: none;
           color: var(--fg); border-bottom: 1px solid #ffffff0d; }
.ar-step:last-child { border-bottom: 0; }
.ar-step.done span { color: var(--dim); text-decoration: line-through; }
.ar-step.here { font-weight: 600; color: var(--acc); }
.ar-cmt { padding: 9px 0; border-bottom: 1px solid #ffffff0d; }
.ar-cmt:last-of-type { border-bottom: 0; }

/* מצב-מסירת-מייל במסך-הבריאות. */
.ah-note code { font-size: .78rem; opacity: .8; }
.ah-err { display: block; width: 100%; font-size: .78rem; color: #e79490;
          margin-top: 4px; word-break: break-word; }
.ah-cnt { font-size: .78rem; opacity: .75; }