/* =========================================================
   Space School Reports
   ========================================================= */

.ssr-wrap, .ssr-front { font-family: "Cairo", Tahoma, Arial, sans-serif; }
.ssr-wrap { direction: rtl; text-align: right; }
.ssr-front { direction: rtl; text-align: right; max-width: 880px; margin: 0 auto; padding: 16px 12px 40px; }
.ssr-front *, .ssr-wrap * { box-sizing: border-box; }

/* ---------- buttons / inputs ---------- */
.ssr-btn { display: inline-block; padding: 9px 18px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; color: #1e293b !important; font: 600 14px "Cairo", Tahoma, sans-serif; cursor: pointer; text-decoration: none !important; line-height: 1.4; }
.ssr-btn:hover { background: #f1f5f9; }
.ssr-btn-primary { background: #1b2f6b; border-color: #1b2f6b; color: #fff !important; }
.ssr-btn-primary:hover { background: #14235a; }
.ssr-btn[disabled] { opacity: .6; cursor: wait; }
.ssr-input { padding: 7px 10px; min-width: 240px; }
.ssr-inline { display: inline-block; margin: 0 4px; }
.ssr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; justify-content: center; }

/* ---------- admin ---------- */
.ssr-toolbar { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.ssr-h2 { margin: 26px 0 8px; font-size: 18px; }
.ssr-count { font-size: 13px; font-weight: 600; color: #475569; background: #e2e8f0; padding: 2px 10px; border-radius: 99px; margin-right: 8px; }
.ssr-table td, .ssr-table th { text-align: right; vertical-align: middle; }
.ssr-minibar { display: inline-block; width: 90px; height: 8px; background: #e2e8f0; border-radius: 6px; overflow: hidden; vertical-align: middle; }
.ssr-minibar span { display: block; height: 100%; background: #16a34a; }
.ssr-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 20px; margin: 16px 0; text-align: center; }
.ssr-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin: 12px 0; line-height: 2; }
.ssr-linkbox .ssr-copyfield { width: min(560px, 80%); }
.ssr-none { margin-top: 22px; }
.ssr-none summary { cursor: pointer; font-weight: 700; }
.ssr-pick { margin: 6px 0 14px; }
.ssr-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; font-size: 13px; }
.ssr-legend span { padding: 2px 10px; border-radius: 99px; background: #f1f5f9; }
.ssr-legend .is-sent { background: #dcfce7; } .ssr-legend .is-draft { background: #fef3c7; } .ssr-legend .is-none { background: #f1f5f9; }
.ssr-statusline { color: #475569; }
.ssr-result li { margin: 4px 0; }

/* form */
.ssr-form h3 { margin: 22px 0 8px; }
.ssr-form label { display: block; font-weight: 600; margin-bottom: 10px; }
.ssr-form input[type=text], .ssr-form input[type=date], .ssr-form select, .ssr-form textarea { display: block; width: 100%; margin-top: 4px; }
.ssr-row3 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px; }
.ssr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ssr-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ssr-score { border-width: 2px !important; border-style: solid !important; font-weight: 800; }
.ssr-formbtns { margin: 18px 0; display: flex; gap: 10px; align-items: center; }
.ssr-chk { display: inline-block !important; font-weight: 400 !important; margin: 0 !important; }
.ssr-kidlist { max-height: 260px; overflow: auto; border: 1px solid #cbd5e1; padding: 8px; background: #fff; margin-top: 6px; }
.ssr-kid-opt { display: block; padding: 2px 0; }
@media (max-width: 782px) { .ssr-row3, .ssr-row2 { grid-template-columns: 1fr; } }

/* tabs */
.ssr-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ssr-tab { padding: 8px 14px; border-radius: 10px; background: #e2e8f0; color: #0f172a !important; text-decoration: none !important; font-weight: 700; font-size: 14px; }
.ssr-tab small { font-weight: 600; color: #475569; margin-right: 4px; }
.ssr-tab.is-on { background: #1b2f6b; color: #fff !important; }
.ssr-tab.is-on small { color: #cbd5e1; }

/* sessions grid (admin + front) */
.ssr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
@media (max-width: 760px) { .ssr-grid { grid-template-columns: repeat(2, 1fr); } }
.ssr-cell { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 10px; border-radius: 12px; border: 2px solid #e2e8f0; background: #fff; color: #0f172a !important; text-decoration: none !important; font-size: 13px; }
.ssr-cell.is-none { background: #f8fafc; color: #94a3b8 !important; }
.ssr-cell.is-draft { border-color: #f59e0b; background: #fffbeb; }
.ssr-cell.is-sent { border-color: #22c55e; background: #f0fdf4; }
a.ssr-cell:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.ssr-cell-n { font-weight: 800; font-size: 20px; }
.ssr-cell-mod { font-size: 12px; font-weight: 700; direction: ltr; text-align: right; }
.ssr-cell-mod i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; }
.ssr-cell-les { font-size: 12px; color: #475569; direction: ltr; text-align: right; }
.ssr-cell-st { margin-top: auto; font-size: 12px; font-weight: 700; }

/* ---------- front ---------- */
.ssr-hello { margin: 4px 0 14px; }
.ssr-hello-name { font-size: 24px; font-weight: 800; color: #1b2f6b; }
.ssr-hello-sub { color: #64748b; }
.ssr-kids { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ssr-kid { padding: 8px 16px; border-radius: 99px; background: #e2e8f0; color: #0f172a !important; text-decoration: none !important; font-weight: 700; }
.ssr-kid.is-on { background: #1b2f6b; color: #fff !important; }
.ssr-progress { margin: 10px 0; }
.ssr-progress-txt { font-weight: 700; margin-bottom: 4px; }
.ssr-bar { height: 10px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ssr-bar span { display: block; height: 100%; background: #16a34a; }
.ssr-meta { color: #475569; margin-top: 10px; }
.ssr-back { display: inline-block; margin-bottom: 10px; font-weight: 700; }
.ssr-ack { text-align: center; margin: 12px 0; }
.ssr-ack-done { color: #15803d; font-weight: 700; }

/* =========================================================
   لوحة الطالب / ولي الأمر
   ========================================================= */
.ssr-d { --navy: #0d1642; --blue: #1b2f6b; --gold: #f5a623; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; font-family: "Cairo", Tahoma, Arial, sans-serif; color: var(--ink); line-height: 1.6; }
.ssr-d *, .ssr-d *::before, .ssr-d *::after { box-sizing: border-box; }
.ssr-d h2, .ssr-d h3 { font-family: inherit; letter-spacing: 0; text-transform: none; }

/* ---- level pills ---- */
.ssr-d-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ssr-d-tab { padding: 7px 16px; border-radius: 99px; background: #e8edf6; color: var(--blue) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.ssr-d-tab small { font-weight: 600; opacity: .75; margin-right: 4px; }
.ssr-d-tab.is-on { background: var(--blue); color: #fff !important; }

/* ---- children strip (parent) ---- */
.ssr-d-kids { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.ssr-d-kid { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 12px; border-radius: 16px; background: #fff; border: 2px solid var(--line); color: var(--ink) !important; text-decoration: none !important; min-width: 220px; }
.ssr-d-kid.is-on { border-color: var(--gold); background: #fffaf0; }
.ssr-d-kidring { position: relative; width: 54px; height: 54px; flex: 0 0 auto; }
.ssr-d-kidring svg { width: 100%; height: 100%; display: block; }
.ssr-d-kidring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.ssr-d-kidtxt { display: flex; flex-direction: column; line-height: 1.3; }
.ssr-d-kidtxt b { font-size: 16px; }
.ssr-d-kidtxt small { color: var(--muted); font-size: 13px; }

/* ---- mission (the one memorable thing) ---- */
.ssr-d-mission { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 20px 10px; color: #fff;
  background:
    radial-gradient(900px 360px at 88% -8%, rgba(124, 92, 255, .55), transparent 62%),
    radial-gradient(760px 420px at -6% 108%, rgba(37, 99, 235, .45), transparent 58%),
    linear-gradient(180deg, #0a1140, #0f1b55); }
.ssr-d-mission::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(2px 2px at 24px 34px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 96px 86px, rgba(255,255,255,.7), transparent),
    radial-gradient(2.2px 2.2px at 170px 22px, #ffd98a, transparent),
    radial-gradient(1.2px 1.2px at 64px 150px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 140px 120px, rgba(255,255,255,.8), transparent);
  background-size: 210px 180px; }
.ssr-d-top { position: relative; display: flex; align-items: center; gap: 22px; }
.ssr-d-ringbox { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.ssr-d-ringbox svg { width: 100%; height: 100%; display: block; }
.ssr-d-ringtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; direction: ltr; }
.ssr-d-ringtxt b { font-size: 34px; font-weight: 800; }
.ssr-d-ringtxt b span { font-size: 15px; font-weight: 700; opacity: .75; }
.ssr-d-ringtxt small { font-size: 13px; opacity: .8; margin-top: 2px; }
.ssr-d-name { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.25; color: #fff !important; }
.ssr-d-lvl { margin-top: 2px; font-size: 16px; opacity: .85; }
.ssr-d-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ssr-d-chip { padding: 4px 13px; border-radius: 99px; background: rgba(255,255,255,.13); font-size: 13.5px; font-weight: 700; }
.ssr-d-chip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 7px; }

/* path: 4 columns snake, RTL (column 1 = right) */
.ssr-d-path { list-style: none !important; margin: 20px 0 8px !important; padding: 0 !important; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; --sz: 66px; }
.ssr-d-node { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 !important; padding: 8px 0 26px !important; list-style: none !important; min-height: 118px; }
.ssr-d-node::after { content: ""; position: absolute; z-index: 0; background: rgba(255,255,255,.16); border-radius: 4px; }
.ssr-d-node.to-left::after  { top: calc(8px + var(--sz) / 2 - 2px); right: 50%; width: 100%; height: 4px; }
.ssr-d-node.to-right::after { top: calc(8px + var(--sz) / 2 - 2px); left: 50%;  width: 100%; height: 4px; }
.ssr-d-node.to-down::after  { top: calc(8px + var(--sz) / 2); left: calc(50% - 2px); width: 4px; height: 100%; }
.ssr-d-node.is-done::after { background: linear-gradient(90deg, var(--gold), var(--gold)); }
.ssr-d-planet { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--sz); height: var(--sz); border-radius: 50%; text-decoration: none !important; color: #fff !important; font-weight: 800; }
.ssr-d-n { font-size: 24px; line-height: 1; }
.ssr-d-node.is-done .ssr-d-planet { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%), var(--m); box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.35); transition: transform .15s ease; }
.ssr-d-node.is-done a.ssr-d-planet:hover, .ssr-d-node.is-done a.ssr-d-planet:focus-visible { transform: scale(1.1); outline: 3px solid var(--gold); outline-offset: 3px; }
.ssr-d-node.is-lock .ssr-d-planet { background: #17225f; border: 2px dashed rgba(255,255,255,.28); color: rgba(255,255,255,.5) !important; }
.ssr-d-node.is-next .ssr-d-planet { background: #2b2650; border: 3px solid var(--gold); color: var(--gold) !important; animation: ssr-pulse 2s ease-in-out infinite; }
@keyframes ssr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 50% { box-shadow: 0 0 0 12px rgba(245,166,35,0); } }
.ssr-d-sc { position: absolute; z-index: 2; top: -6px; left: -6px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 99px; border: 2px solid #0f1b55; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #fff; }
.ssr-d-nl { position: relative; z-index: 1; padding: 1px 6px; border-radius: 8px; background: #0e1953; margin-top: 8px; font-size: 12px; font-weight: 700; text-align: center; color: rgba(255,255,255,.85); direction: ltr; line-height: 1.25; max-width: 100%; word-break: normal; overflow-wrap: normal; hyphens: manual; }
.ssr-d-node.is-next .ssr-d-nl { color: var(--gold); direction: rtl; font-size: 13px; }

/* ---- quiet sections ---- */
.ssr-d-sec { margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.ssr-d-sec h3 { margin: 0 0 2px; font-size: 21px; font-weight: 800; color: var(--blue); }
.ssr-d-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.ssr-d-skills { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: 24px; align-items: center; }
.ssr-d-radar { width: 100%; height: auto; display: block; }
.ssr-d-rl { font: 700 13px "Cairo", Tahoma, sans-serif; fill: #334155; }
.ssr-d-brow { display: grid; grid-template-columns: 118px 1fr 38px; gap: 10px; align-items: center; margin: 10px 0; }
.ssr-d-bl { font-weight: 700; font-size: 14px; }
.ssr-d-track { display: block; height: 12px; border-radius: 99px; background: #eaeff6; overflow: hidden; }
.ssr-d-track i { display: block; height: 100%; border-radius: 99px; }
.ssr-d-brow b { font-size: 15px; text-align: left; direction: ltr; }
.ssr-d-brow-acts { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }

.ssr-d-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; }
.ssr-d-mod { text-align: center; }
.ssr-d-modring { position: relative; width: 86px; height: 86px; margin: 0 auto 6px; }
.ssr-d-modring svg { width: 100%; height: 100%; display: block; }
.ssr-d-modring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.ssr-d-mod.is-empty { opacity: .5; }
.ssr-d-modname { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.ssr-d-mod small { color: var(--muted); font-size: 12.5px; }

.ssr-d-trendbox { overflow-x: auto; }
.ssr-d-trend { width: 100%; min-width: 540px; height: auto; display: block; }
.ssr-d-tl { font: 600 12px "Cairo", Tahoma, sans-serif; fill: #94a3b8; }
.ssr-d-tl.is-on { fill: #1b2f6b; font-weight: 800; }

.ssr-d-coach { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.ssr-d-say { border-radius: 16px; padding: 14px 18px; }
.ssr-d-say b { display: block; margin-bottom: 4px; font-size: 16px; }
.ssr-d-say p { margin: 5px 0; font-size: 15px; }
.ssr-d-say.is-good { background: #ecfdf3; border-right: 6px solid #16a34a; }
.ssr-d-say.is-good b { color: #15803d; }
.ssr-d-say.is-grow { background: #fff6ea; border-right: 6px solid #f59e0b; }
.ssr-d-say.is-grow b { color: #b45309; }

.ssr-d-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ssr-d-badge { text-align: center; padding: 14px 8px 12px; border-radius: 18px; background: #f3f6fb; filter: grayscale(1); opacity: .5; }
.ssr-d-badge.is-on { background: #fff8e6; filter: none; opacity: 1; box-shadow: inset 0 0 0 2px #f5d58a; }
.ssr-d-bi { display: block; font-size: 38px; line-height: 1.2; }
.ssr-d-badge b { display: block; font-size: 15px; }
.ssr-d-badge small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }

@media (max-width: 640px) {
  .ssr-d-top { flex-direction: column; text-align: center; gap: 12px; }
  .ssr-d-chips { justify-content: center; }
  .ssr-d-name { font-size: 24px; }
  .ssr-d-path { --sz: 54px; }
  .ssr-d-n { font-size: 20px; }
  .ssr-d-nl { font-size: 10px; }
  .ssr-d-skills, .ssr-d-coach { grid-template-columns: 1fr; }
  .ssr-d-mods { grid-template-columns: repeat(2, 1fr); }
  .ssr-d-brow { grid-template-columns: 96px 1fr 34px; }
  .ssr-d-kid { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ssr-d-node.is-next .ssr-d-planet { animation: none; }
  .ssr-d-node.is-done .ssr-d-planet { transition: none; }
}

/* أيقونة تاب Reports في بروفايل LearnPress: أحادية اللون وبتاخد لون الخط زي باقي الأيقونات */
.ssr-lp-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.16em; font-style: normal; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6M3 20h18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6M3 20h18'/%3E%3C/svg%3E") center / contain no-repeat; }

/* =========================================================
   صفحة تقرير الحصة (الطالب / ولي الأمر)
   ========================================================= */
.ssr-offstage { display: none; }
.ssr-r { --m: #3b82f6; font-family: "Cairo", Tahoma, Arial, sans-serif; color: #0f172a; line-height: 1.6; }
.ssr-r *, .ssr-r *::before, .ssr-r *::after { box-sizing: border-box; }
.ssr-r-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.ssr-r-nav a { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #e8edf6; color: #1b2f6b !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.ssr-r-back::before { content: "⌂ "; }
.ssr-r-steps { display: flex; gap: 8px; }

.ssr-r-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 26px; padding: 26px 24px; border-radius: 26px; color: #fff;
  background: linear-gradient(180deg, #0a1140, #0f1b55);
  background:
    radial-gradient(520px 320px at 92% 50%, var(--mg1, rgba(59,130,246,.55)), transparent 70%),
    radial-gradient(700px 380px at 0% 120%, rgba(124, 92, 255, .45), transparent 60%),
    linear-gradient(180deg, #0a1140, #0f1b55); }
.ssr-r-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 24px 34px, #fff, transparent), radial-gradient(1.5px 1.5px at 96px 86px, rgba(255,255,255,.7), transparent), radial-gradient(2.2px 2.2px at 170px 22px, #ffd98a, transparent), radial-gradient(1.2px 1.2px at 64px 150px, rgba(255,255,255,.6), transparent);
  background-size: 210px 180px; }
.ssr-r-orbit { position: relative; z-index: 1; width: 176px; height: 176px; flex: 0 0 auto; }
.ssr-r-orbit .ssr-d-ring { width: 100%; height: 100%; display: block; }
.ssr-r-planet { position: absolute; inset: 24px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), transparent 40%), var(--m);
  box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 40px var(--mg2, rgba(255,255,255,.22)); }
.ssr-r-planet b { font-size: 54px; font-weight: 800; }
.ssr-r-planet small { font-size: 13px; font-weight: 700; opacity: .9; }
.ssr-r-head { position: relative; z-index: 1; min-width: 0; }
.ssr-r-lvl { font-size: 15px; opacity: .8; }
.ssr-r-title { margin: 2px 0 10px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #fff !important; text-align: right; overflow-wrap: anywhere; }
.ssr-r-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ssr-r-tag { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 99px; background: rgba(255,255,255,.13); font-size: 13.5px; font-weight: 700; }
.ssr-r-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.ssr-r-verdict { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ssr-r-verdict b { font-size: 40px; font-weight: 800; line-height: 1; }
.ssr-r-verdict b span { font-size: 17px; opacity: .7; margin-left: 2px; }
.ssr-r-pill { padding: 4px 14px; border-radius: 10px; font-weight: 800; font-size: 15px; color: #fff; }

.ssr-r-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
.ssr-r-skill { display: flex; align-items: center; gap: 12px; }
.ssr-r-gauge { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.ssr-r-gauge .ssr-d-ring { width: 100%; height: 100%; display: block; }
.ssr-r-gauge b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.ssr-r-sktxt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ssr-r-sktxt b { font-size: 15px; }
.ssr-r-grade { font-size: 13.5px; font-weight: 800; }
.ssr-r-delta { font-size: 12.5px; font-weight: 700; color: #64748b; }
.ssr-r-delta.is-up { color: #15803d; }
.ssr-r-delta.is-down { color: #c2410c; }

.ssr-r-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ssr-r-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: #f3f6fb; text-align: center; }
.ssr-r-act.is-empty { opacity: .55; }
.ssr-r-acti { font-size: 30px; line-height: 1.1; }
.ssr-r-act b { font-size: 14.5px; }
.ssr-r-score { font-size: 14px; font-weight: 700; color: #475569; }
.ssr-r-score i { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; margin-right: 3px; border-radius: 50%; color: #fff; font-style: normal; font-size: 17px; font-weight: 800; background: #cbd5e1; }

@media (max-width: 640px) {
  .ssr-r-hero { flex-direction: column; text-align: center; gap: 14px; padding: 22px 16px; }
  .ssr-r-title { text-align: center; font-size: 24px; }
  .ssr-r-tags, .ssr-r-verdict { justify-content: center; }
  .ssr-r-skills { grid-template-columns: 1fr 1fr; }
  .ssr-r-gauge { width: 66px; height: 66px; }
  .ssr-r-gauge b { font-size: 21px; }
  .ssr-r-acts { grid-template-columns: 1fr 1fr; }
}


/* ---------- أزرار ثابتة الشكل (الثيم أحياناً بيغيّر شكل <button>) ---------- */
.ssr-front .ssr-btn, .ssr-wrap .ssr-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px !important; border-radius: 12px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; background-image: none !important; color: #1e293b !important; font: 700 15px "Cairo", Tahoma, sans-serif !important; line-height: 1.4 !important; opacity: 1 !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; height: auto !important; min-height: 44px; cursor: pointer; }
.ssr-front .ssr-btn-primary, .ssr-wrap .ssr-btn-primary { background: #1b2f6b !important; border-color: #1b2f6b !important; color: #fff !important; }
.ssr-front .ssr-ack-btn { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.ssr-front .ssr-ack-btn.is-done, .ssr-front .ssr-ack-btn[disabled] { background: #ecfdf3 !important; border-color: #86efac !important; color: #15803d !important; cursor: default; }
.ssr-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 18px 0; }
.ssr-actions form { display: inline-flex; margin: 0; padding: 0; }

/* ---------- صورة التقرير (نفس شكل الصفحة + الاسم والشعار) ---------- */
.ssr-x { width: 800px; max-width: none; margin: 0 auto; padding: 20px 22px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; font-family: "Cairo", Tahoma, Arial, sans-serif; color: #0f172a; direction: rtl; text-align: right; }
.ssr-x * { box-sizing: border-box; }
.ssr-x-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 14px; }
.ssr-x-who { display: flex; flex-direction: column; line-height: 1.3; }
.ssr-x-who small { color: #64748b; font-size: 13px; font-weight: 700; }
.ssr-x-who b { font-size: 26px; font-weight: 800; color: #1b2f6b; }
.ssr-x-who span { color: #64748b; font-size: 13px; text-align: right; }
.ssr-x-logo img { height: 54px; width: auto; display: block; }
.ssr-x-logo b { font-size: 20px; color: #1b2f6b; }
.ssr-x .ssr-d-sec { margin-top: 22px; padding-top: 14px; }
.ssr-x-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 13px; }
.ssr-x-foot img { height: 44px; width: auto; }
.ssr-cardwrap { overflow-x: auto; padding: 4px 0; }

/* ---------- لوحة التحكم: الكلاسات ---------- */
.ssr-classmeta { margin: -4px 0 10px; color: #475569; }
.ssr-checkgrid { display: flex; flex-wrap: wrap; gap: 8px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.ssr-stulist { max-height: 380px; }
.ssr-rowacts { white-space: nowrap; }
.ssr-rowacts .ssr-inline { margin: 0 2px; }

/* العربي بيتفكك لو فيه تباعد حروف (الثيم ساعات بيحطه على العناوين)، خصوصاً في الصورة المنزّلة */
.ssr-x, .ssr-x *, .ssr-r, .ssr-r *, .ssr-d, .ssr-d *, .ssr-front h2, .ssr-front h3 { letter-spacing: 0 !important; word-spacing: normal !important; }
/* توسيط الأرقام جوه الدواير بطريقة ثابتة (بتطلع صح في الصفحة وفي الصورة) */
.ssr-r-gauge b { display: block !important; top: 0; right: 0; bottom: auto; left: 0; height: 84px; line-height: 84px; text-align: center; }
.ssr-d-modring b { display: block !important; top: 0; right: 0; bottom: auto; left: 0; height: 86px; line-height: 86px; text-align: center; }
@media (max-width: 640px) { .ssr-r-gauge b { height: 66px; line-height: 66px; } }
.ssr-x .ssr-r-gauge { width: 84px; height: 84px; }
.ssr-x .ssr-r-gauge b { height: 84px; line-height: 84px; font-size: 26px; }

/* ---------- تاب My Classes للمدرس ---------- */
.ssr-lp-ico.ssr-lp-ico-classes {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.4 3-5.4 6-5.4s5.4 2 6 5.4'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16 14.6c2.6.2 4.4 2 5 4.9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.4 3-5.4 6-5.4s5.4 2 6 5.4'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16 14.6c2.6.2 4.4 2 5 4.9'/%3E%3C/svg%3E") center / contain no-repeat; }
.ssr-t { font-family: "Cairo", Tahoma, Arial, sans-serif; color: #0f172a; }
.ssr-t-h { margin: 4px 0 2px; font-size: 26px; font-weight: 800; color: #1b2f6b; }
.ssr-t-sub { margin: 0 0 14px; color: #64748b; font-size: 14.5px; }
.ssr-t-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.ssr-t-crumbs a { color: #2563eb !important; font-weight: 700; text-decoration: none !important; }
.ssr-t-crumbs span { color: #94a3b8; }
.ssr-t-crumbs b { color: #334155; }
.ssr-t-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.ssr-t-note.is-ok { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; }
.ssr-t-note.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ssr-t-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ssr-t-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; color: #fff !important; text-decoration: none !important;
  background: radial-gradient(260px 140px at 90% 0%, rgba(124,92,255,.55), transparent 70%), linear-gradient(160deg, #0a1140, #16236a); }
.ssr-t-card:hover, .ssr-t-card:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
.ssr-t-lvl { font-size: 13px; opacity: .8; }
.ssr-t-name { font-size: 20px; font-weight: 800; line-height: 1.3; }
.ssr-t-meta { font-size: 13.5px; opacity: .9; }
.ssr-t-card .ssr-bar { background: rgba(255,255,255,.18); margin-top: 6px; }
.ssr-t-card .ssr-bar span { background: #f5a623; }
.ssr-t-search { width: 100%; max-width: 420px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #cbd5e1; }
.ssr-t-list { display: flex; flex-direction: column; gap: 8px; }
.ssr-t-row { display: grid; grid-template-columns: 1.4fr 1.6fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #f3f6fb; color: #0f172a !important; text-decoration: none !important; }
.ssr-t-row:hover, .ssr-t-row:focus-visible { background: #e8eefb; }
.ssr-t-who { display: flex; flex-direction: column; line-height: 1.3; }
.ssr-t-who small { color: #64748b; text-align: right; }
.ssr-t-prog small { color: #64748b; font-size: 12.5px; }
.ssr-t-go { padding: 6px 14px; border-radius: 99px; background: #1b2f6b; color: #fff; font-weight: 700; font-size: 13.5px; }
.ssr-t-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px 18px; }
.ssr-t-form h3 { font-size: 17px; color: #1b2f6b; }
.ssr-t-form input[type=text], .ssr-t-form input[type=date], .ssr-t-form select, .ssr-t-form textarea { border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 10px; font-family: inherit; }
.ssr-t-btns { justify-content: flex-start; }
.ssr-t-preview { margin-top: 26px; }
.ssr-t-preview h3 { font-size: 19px; color: #1b2f6b; margin-bottom: 4px; }
.ssr-front .ssr-t-del { color: #b91c1c !important; border-color: #fecaca !important; }
@media (max-width: 640px) {
  .ssr-t-row { grid-template-columns: 1fr; gap: 8px; }
  .ssr-t-go { justify-self: start; }
}
.ssr-d-bcount { display: inline-block; margin-right: 8px; padding: 2px 12px; border-radius: 99px; background: #fff3d6; color: #b45309; font-size: 14px; font-weight: 800; vertical-align: middle; }
/* فورم المدرس على الموبايل: المهارات والأنشطة في عمودين بدل عمود واحد */
.ssr-t-form .ssr-scores { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 12px; }
.ssr-t-form .ssr-scores label { font-size: 14px; line-height: 1.35; display: flex; flex-direction: column; justify-content: space-between; }

/* =========================================================
   الواجبات (المهمات)
   ========================================================= */
/* ماوس النجمة + نجوم بتلمع بهدوء (CSS بس) */
.ssr-starfield, .ssr-starfield * { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .8-5.2 4.8 1.4 6.9L12 17.3 5.8 20.7l1.4-6.9L2 9l7-.8z' fill='%23f5a623' stroke='%231b2f6b' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 13 13, auto; }
.ssr-starfield a, .ssr-starfield button, .ssr-starfield label, .ssr-starfield summary { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .8-5.2 4.8 1.4 6.9L12 17.3 5.8 20.7l1.4-6.9L2 9l7-.8z' fill='%23ffd36b' stroke='%231b2f6b' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 13 13, pointer; }
.ssr-starfield textarea, .ssr-starfield input[type=text], .ssr-starfield input[type=url] { cursor: text; }
.ssr-twinkles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ssr-twinkles i { position: absolute; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 7px rgba(255,255,255,.95); animation: ssr-tw 3.2s ease-in-out infinite; }
@keyframes ssr-tw { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }

.ssr-m { font-family: "Cairo", Tahoma, Arial, sans-serif; color: #0f172a; line-height: 1.6; }
.ssr-m * { box-sizing: border-box; letter-spacing: 0 !important; }
.ssr-m-head { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 22px; color: #fff; background: radial-gradient(400px 200px at 90% 0%, rgba(124,92,255,.55), transparent 70%), linear-gradient(160deg, #0a1140, #16236a); }
.ssr-m-kicker { display: inline-block; padding: 2px 12px; border-radius: 99px; background: rgba(245,166,35,.22); color: #ffd38a; font-weight: 800; font-size: 13px; }
.ssr-m-title { margin: 6px 0 10px; font-size: 26px; font-weight: 800; line-height: 1.3; color: #fff !important; }
.ssr-m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ssr-m-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 13.5px; font-weight: 700; }
.ssr-m-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #94a3b8); }
.ssr-m-chip.is-late { background: #fff1e6; color: #c2410c; }
.ssr-m-brief { margin: 16px 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; }
.ssr-m-brief h3 { margin: 0 0 6px; font-size: 19px; color: #1b2f6b; }
.ssr-m-att { margin-top: 12px; }
.ssr-m-attlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ssr-m-attitem { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #f3f6fb; color: #1b2f6b !important; font-weight: 700; text-decoration: none !important; }
.ssr-m-attitem small { color: #64748b; }

/* منصة الإطلاق */
.ssr-m-pad { position: relative; overflow: hidden; display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; padding: 18px; border-radius: 24px;
  background: radial-gradient(500px 260px at 12% 8%, rgba(124,92,255,.45), transparent 70%), linear-gradient(180deg, #0a1140, #101c58); }
.ssr-m-scene { position: relative; z-index: 1; height: 300px; }
.ssr-m-rocket { position: absolute; bottom: 34px; left: 50%; width: 96px; margin-left: -40px; transition: transform 1.6s cubic-bezier(.5,0,.75,0); }
.ssr-m-rocket svg, .ssr-m-rocket img, .ssr-m-astro svg, .ssr-m-astro img { display: block; width: 100%; height: auto; }
.ssr-m-astro { position: absolute; bottom: 30px; left: 0; width: 74px; }
.ssr-m-ground { position: absolute; right: 0; bottom: 0; left: 0; height: 34px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #334155, #1e293b); box-shadow: inset 0 3px 0 #475569; }
.ssr-flame { opacity: .25; transform-origin: 60px 172px; animation: ssr-flick .28s ease-in-out infinite alternate; }
@keyframes ssr-flick { from { transform: scaleY(.75); } to { transform: scaleY(1.05); } }
.ssr-wave { transform-origin: 30px 80px; animation: ssr-wave 2.4s ease-in-out infinite; }
@keyframes ssr-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
.ssr-m-pad[data-state=submitted] .ssr-m-rocket, .ssr-m-pad[data-state=graded] .ssr-m-rocket, .ssr-m-pad[data-state=returned] .ssr-m-rocket { transform: translateY(-70px) scale(.85); }
.ssr-m-pad[data-state=submitted] .ssr-flame, .ssr-m-pad[data-state=graded] .ssr-flame { opacity: 1; }
.ssr-m-pad.is-launching .ssr-m-rocket { transform: translateY(-560px); }
.ssr-m-pad.is-launching .ssr-flame { opacity: 1; transform: scaleY(1.7); }
.ssr-m-panel { position: relative; z-index: 1; padding: 16px 18px; border-radius: 18px; background: #fff; }
.ssr-m-done { padding: 12px 14px; border-radius: 14px; background: #eef4ff; }
.ssr-m-done b { color: #1b2f6b; font-size: 17px; }
.ssr-m-done p { margin: 4px 0 0; color: #475569; }
.ssr-m-edit { margin-top: 12px; }
.ssr-m-edit summary { list-style: none; }
.ssr-m-edit summary::-webkit-details-marker { display: none; }
.ssr-m-edit[open] summary { margin-bottom: 12px; }
.ssr-m-sum { margin-top: 12px; }
.ssr-m-sum ul { margin: 6px 0 0; padding: 0 18px 0 0; }
.ssr-m-sum li { margin: 3px 0; }
.ssr-m-form > * + * { margin-top: 12px; }
.ssr-m-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 2px dashed #9db4f0; border-radius: 18px; background: #f5f8ff; text-align: center; transition: background .2s, border-color .2s; }
.ssr-m-drop.is-over { border-color: #f5a623; background: #fffaf0; }
.ssr-m-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ssr-m-drop:focus-within { outline: 3px solid #f5a623; outline-offset: 2px; }
.ssr-m-dropi { font-size: 34px; line-height: 1; }
.ssr-m-drop b { color: #1b2f6b; font-size: 16px; }
.ssr-m-drop small { color: #64748b; }
.ssr-m-picked { margin: 0; padding: 0; list-style: none; }
.ssr-m-picked li { margin: 4px 0; font-size: 14px; }
.ssr-m-picked li.is-big { color: #c2410c; font-weight: 700; }
.ssr-m-have { display: flex; flex-direction: column; gap: 6px; }
.ssr-m-file { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #f3f6fb; }
.ssr-m-links { display: flex; flex-direction: column; gap: 6px; }
.ssr-m-links input, .ssr-m-text textarea { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; }
.ssr-m-links small { color: #64748b; }
.ssr-m-more { display: none !important; }
.ssr-m-text { display: block; }
.ssr-m-text b { display: block; margin-bottom: 4px; }
.ssr-m-progress { overflow: hidden; height: 12px; border-radius: 99px; background: #e2e8f0; position: relative; }
.ssr-m-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #f5a623, #ffd36b); transition: width .2s; }
.ssr-m-progress small { display: none; }
.ssr-front .ssr-btn-launch, .ssr-m .ssr-btn-launch, .ssr-t .ssr-btn-launch { background: linear-gradient(180deg, #ffc248, #f5a623) !important; border-color: #e5961a !important; color: #1b2f6b !important; font-weight: 800 !important; }
.ssr-m .ssr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; color: #1e293b; font: 700 15px "Cairo", Tahoma, sans-serif; min-height: 44px; }
.ssr-m-result { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: #f8fafc; }
.ssr-m-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 124px; height: 124px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.45), transparent 42%), var(--g); box-shadow: 0 0 0 6px rgba(0,0,0,.05); }
.ssr-m-grade b { font-size: 42px; font-weight: 800; line-height: 1; }
.ssr-m-grade b span { font-size: 16px; opacity: .8; }
.ssr-m-grade small { font-weight: 800; }
.ssr-m-fb p { margin: 4px 0; }
.ssr-m-retry { color: #c2410c; font-weight: 800; }
.ssr-muted { color: #94a3b8; }
@media (max-width: 680px) {
  .ssr-m-pad { grid-template-columns: 1fr; }
  .ssr-m-scene { height: 190px; }
  .ssr-m-rocket { width: 70px; }
  .ssr-m-astro { width: 56px; }
  .ssr-m-pad[data-state=submitted] .ssr-m-rocket, .ssr-m-pad[data-state=graded] .ssr-m-rocket, .ssr-m-pad[data-state=returned] .ssr-m-rocket { transform: translateY(-16px) scale(.85); }
  .ssr-m-result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* سجل المهمات في البروفايل */
.ssr-mlog-lvl { margin-top: 18px; }
.ssr-mlog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.ssr-mlog-head h3 { margin: 0; color: #1b2f6b; font-size: 19px; }
.ssr-mlog-stat { color: #64748b; font-weight: 700; font-size: 14px; }
.ssr-mlog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.ssr-mlog-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #f3f6fb; color: #0f172a !important; text-decoration: none !important; }
.ssr-mlog-card:hover, .ssr-mlog-card:focus-visible { background: #e8eefb; outline: none; }
.ssr-mlog-card.is-submitted { background: #eef4ff; }
.ssr-mlog-card.is-graded { background: #f0fdf4; }
.ssr-mlog-card.is-returned { background: #fff7ed; }
.ssr-mlog-planet { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 42%), var(--c); }
.ssr-mlog-planet b { font-size: 21px; font-weight: 800; }
.ssr-mlog-txt { display: flex; flex-direction: column; line-height: 1.35; }
.ssr-mlog-txt small { color: #64748b; }
.ssr-lp-ico.ssr-lp-ico-missions {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c3 2.5 4.5 6 4 11l-2 3h-4l-2-3c-.5-5 1-8.5 4-11z'/%3E%3Ccircle cx='12' cy='9' r='1.6'/%3E%3Cpath d='M8 13l-3 2 1 3 3-2M16 13l3 2-1 3-3-2M10 19l2 3 2-3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c3 2.5 4.5 6 4 11l-2 3h-4l-2-3c-.5-5 1-8.5 4-11z'/%3E%3Ccircle cx='12' cy='9' r='1.6'/%3E%3Cpath d='M8 13l-3 2 1 3 3-2M16 13l3 2-1 3-3-2M10 19l2 3 2-3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* المدرس: لوحة الواجبات + التصحيح */
.ssr-t-tabs { display: flex; gap: 6px; margin: 6px 0 12px; border-bottom: 2px solid #e2e8f0; }
.ssr-t-tabs a { padding: 8px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent; color: #475569 !important; font-weight: 800; text-decoration: none !important; }
.ssr-t-tabs a.is-on { border-color: #f5a623; color: #1b2f6b !important; }
.ssr-t-badge { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 99px; background: #f5a623; color: #1b2f6b; font-size: 12.5px; text-align: center; }
.ssr-g-top { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 20px; color: #fff; background: linear-gradient(160deg, #0a1140, #16236a); }
.ssr-g-top > * { position: relative; z-index: 1; }
.ssr-g-top div { display: flex; align-items: baseline; gap: 10px; }
.ssr-g-big { font-size: 40px; font-weight: 800; color: #ffd36b; }
.ssr-g-clear { font-weight: 800; }
.ssr-g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
.ssr-g-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.ssr-g-card small { color: #64748b; }
.ssr-g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ssr-g-chips span { padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.ssr-g-chips .is-wait { background: #eef4ff; color: #1d4ed8; }
.ssr-g-chips .is-done { background: #ecfdf3; color: #15803d; }
.ssr-g-chips .is-miss { background: #f1f5f9; color: #64748b; }
.ssr-g-matrix { overflow-x: auto; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 14px; }
.ssr-g-matrix table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ssr-g-matrix th, .ssr-g-matrix td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; text-align: center; }
.ssr-g-matrix th:first-child, .ssr-g-matrix td:first-child { text-align: right; white-space: nowrap; }
.ssr-g-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%; font-weight: 800; text-decoration: none !important; }
.ssr-g-cell.is-miss { color: #cbd5e1; }
.ssr-g-cell.is-wait { background: #eef4ff; }
.ssr-g-cell.is-done { background: var(--c); color: #fff !important; }
.ssr-g-wrap { position: relative; overflow: hidden; padding: 4px 2px 10px; }
.ssr-g-wrap > :not(.ssr-twinkles) { position: relative; z-index: 1; }
.ssr-g-wrap .ssr-twinkles i { background: #f5a623; box-shadow: 0 0 6px rgba(245,166,35,.7); }
.ssr-g-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-end; }
.ssr-g-head small { color: #b45309; font-weight: 800; }
.ssr-g-meta { color: #64748b; font-weight: 700; }
.ssr-g-sub { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ssr-g-note, .ssr-g-body { padding: 12px 14px; border-radius: 14px; background: #fffaf0; }
.ssr-g-body { background: #f3f6fb; }
.ssr-g-file { padding: 10px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.ssr-g-fname { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ssr-g-prev { display: block; max-width: 100%; max-height: 520px; margin-top: 10px; border-radius: 10px; }
.ssr-g-link { display: block; padding: 10px 14px; border-radius: 14px; background: #eef4ff; color: #1d4ed8 !important; font-weight: 700; overflow-wrap: anywhere; }
.ssr-g-form { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #e2e8f0; }
.ssr-g-label { display: block; margin: 6px 0; color: #1b2f6b; font-weight: 800; }
.ssr-g-scores { display: grid; grid-template-columns: repeat(11, minmax(36px, 1fr)); gap: 6px; }
.ssr-g-scores label { position: relative; }
.ssr-g-scores input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ssr-g-scores span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; border: 2px solid var(--c); color: var(--c); font-weight: 800; font-size: 17px; background: #fff; transition: transform .1s; }
.ssr-g-scores input:checked + span { background: var(--c); color: #fff; transform: scale(1.08); }
.ssr-g-scores input:focus-visible + span { outline: 3px solid #f5a623; outline-offset: 2px; }
.ssr-g-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ssr-front .ssr-g-phrase, .ssr-g-phrase { padding: 5px 12px; border-radius: 99px; border: 1px solid #cbd5e1; background: #f8fafc; font: 700 13px "Cairo", Tahoma, sans-serif; color: #334155; }
.ssr-g-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; }
.ssr-g-retry { display: block; margin-top: 10px; font-weight: 700; }
.ssr-g-wrap.is-stamping::after { content: "⭐"; position: absolute; top: 40%; left: 50%; z-index: 5; font-size: 120px; transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: ssr-stamp .5s ease-out forwards; }
@keyframes ssr-stamp { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 640px) { .ssr-g-scores { grid-template-columns: repeat(6, 1fr); } }

/* الأدمن: صندوق إعدادات الواجب */
.ssr-abox h4 { margin: 16px 0 8px; }
.ssr-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ssr-type { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px; border: 1px solid #dcdcde; border-radius: 10px; background: #fff; }
.ssr-type input { grid-row: 1 / 3; }
.ssr-type-i { grid-row: 1 / 3; font-size: 22px; }
.ssr-type small { grid-column: 3; color: #646970; font-size: 11.5px; }
.ssr-type-any { border-style: dashed; }
.ssr-afiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ssr-afile { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #f0f6fc; }
.ssr-chk2 { display: flex !important; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ssr-twinkles i, .ssr-flame, .ssr-wave { animation: none !important; }
  .ssr-m-rocket { transition: none; }
  .ssr-g-wrap.is-stamping::after { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* =========================================================
   صفحة الواجب كلها فضاء (Space mission page)
   ========================================================= */
.ssr-m.ssr-m-space { position: relative; overflow: hidden; padding: 22px 20px 26px; border-radius: 28px; color: #e8edff; min-height: min(78vh, 900px);
  background: #0a1140;
  background:
    radial-gradient(700px 380px at 85% 0%, rgba(124, 92, 255, .45), transparent 65%),
    radial-gradient(600px 420px at 0% 60%, rgba(37, 99, 235, .35), transparent 60%),
    radial-gradient(500px 300px at 70% 100%, rgba(245, 166, 35, .18), transparent 65%),
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, rgba(255,255,255,.7), transparent),
    linear-gradient(180deg, #070c33 0%, #0c1550 55%, #0a1140 100%);
  background-size: auto, auto, auto, 260px 220px, 260px 220px, 260px 220px, auto; }
.ssr-m.ssr-m-space > :not(.ssr-twinkles):not(.ssr-m-deco) { position: relative; z-index: 1; }
.ssr-m-deco { position: absolute; z-index: 0; pointer-events: none; opacity: .9; }
.ssr-m-planet { top: 96px; left: -20px; width: 150px; animation: ssr-float 9s ease-in-out infinite; }
.ssr-m-moon { bottom: 40px; left: 22%; width: 58px; opacity: .75; animation: ssr-float 12s ease-in-out infinite reverse; }
.ssr-m-deco svg { display: block; width: 100%; height: auto; }
@keyframes ssr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ssr-blink { animation: ssr-blink 1.6s ease-in-out infinite; }
@keyframes ssr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* الهيدر جوه الفضاء: شفاف */
.ssr-m-space .ssr-m-head { background: transparent; padding: 4px 4px 6px; }
.ssr-m-space .ssr-m-title { font-size: 30px; text-shadow: 0 2px 18px rgba(124,92,255,.5); }
/* كروت زجاجية */
.ssr-m-space .ssr-m-brief { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #e8edff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ssr-m-space .ssr-m-brief h3 { color: #ffd38a; }
.ssr-m-space .ssr-m-body, .ssr-m-space .ssr-m-body p, .ssr-m-space .ssr-m-body li { color: #e8edff; }
.ssr-m-space .ssr-m-body a { color: #9cc3ff; }
.ssr-m-space .ssr-m-att b { color: #fff; }
.ssr-m-space .ssr-m-attitem { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.18); }
.ssr-m-space .ssr-m-attitem small { color: #c7d2fe; }
/* منصة الإطلاق: من غير خلفية خاصة، بقت جزء من الفضاء */
.ssr-m-space .ssr-m-pad { background: transparent; padding: 6px 0 0; grid-template-columns: 250px 1fr; overflow: visible; }
.ssr-m-space .ssr-m-scene { height: 340px; }
.ssr-m-space .ssr-m-rocket { width: 110px; margin-left: -46px; bottom: 36px; }
.ssr-m-space .ssr-m-astro { width: 84px; left: -4px; bottom: 32px; }
.ssr-m-tower { position: absolute; bottom: 34px; right: 4px; width: 44px; height: 230px; opacity: .9; }
.ssr-m-tower svg { width: 100%; height: 100%; display: block; }
.ssr-m-space .ssr-m-ground { height: 36px; border-radius: 999px 999px 0 0; background: radial-gradient(120% 140% at 50% 0%, #3a4a7a, #1b2550 70%); box-shadow: inset 0 3px 0 rgba(255,255,255,.12), 0 -6px 24px rgba(79,124,255,.25); }
.ssr-m-smoke { position: absolute; bottom: 30px; left: 50%; width: 120px; margin-left: -60px; height: 40px; pointer-events: none; }
.ssr-m-smoke i { position: absolute; bottom: 0; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(226,232,255,.9), rgba(226,232,255,0) 70%); opacity: 0; }
.ssr-m-smoke i:nth-child(1) { left: 0; } .ssr-m-smoke i:nth-child(2) { left: 40px; } .ssr-m-smoke i:nth-child(3) { left: 80px; }
.ssr-m-pad.is-launching .ssr-m-smoke i { animation: ssr-puff 1.4s ease-out forwards; }
.ssr-m-pad.is-launching .ssr-m-smoke i:nth-child(2) { animation-delay: .12s; } .ssr-m-pad.is-launching .ssr-m-smoke i:nth-child(3) { animation-delay: .24s; }
@keyframes ssr-puff { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6) translateY(-10px); } }
.ssr-m-space .ssr-m-panel { background: rgba(255,255,255,.96); color: #0f172a; box-shadow: 0 18px 50px rgba(3,6,30,.45); }
.ssr-m-space .ssr-m-panel .ssr-m-result { background: #f5f7ff; }
@media (max-width: 680px) {
  .ssr-m.ssr-m-space { padding: 16px 12px 20px; border-radius: 22px; }
  .ssr-m-space .ssr-m-title { font-size: 24px; }
  .ssr-m-space .ssr-m-pad { grid-template-columns: 1fr; }
  .ssr-m-space .ssr-m-scene { height: 220px; }
  .ssr-m-space .ssr-m-rocket { width: 80px; margin-left: -34px; }
  .ssr-m-space .ssr-m-astro { width: 62px; }
  .ssr-m-tower { height: 150px; width: 30px; }
  .ssr-m-planet { width: 96px; top: 70px; left: -26px; opacity: .6; }
  .ssr-m-moon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ssr-m-deco, .ssr-blink, .ssr-m-smoke i { animation: none !important; } }

/* =========================================================
   رسائل الواجب (أسئلة الكلاس + الخاصة)
   ========================================================= */
.ssr-talk { margin-top: 18px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.97); color: #0f172a; box-shadow: 0 18px 50px rgba(3,6,30,.25); font-family: "Cairo", Tahoma, Arial, sans-serif; }
.ssr-talk-t { box-shadow: none; border: 1px solid #e2e8f0; margin-top: 16px; }
.ssr-talk h3 { margin: 0 0 10px; color: #1b2f6b; font-size: 19px; }
.ssr-talk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ssr-front .ssr-talk-tabs button, .ssr-m .ssr-talk-tabs button, .ssr-talk-tabs button { padding: 7px 14px; border-radius: 99px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; font: 800 14px "Cairo", Tahoma, sans-serif; cursor: pointer; }
.ssr-talk-tabs button.is-on { background: #1b2f6b; border-color: #1b2f6b; color: #fff; }
.ssr-talk-tabs button span { display: inline-block; min-width: 20px; margin-right: 4px; padding: 0 6px; border-radius: 99px; background: rgba(245,166,35,.25); font-size: 12px; }
.ssr-talk-empty { color: #64748b; margin: 6px 0 12px; }
.ssr-talk-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.ssr-talk-msg { display: flex; gap: 10px; align-items: flex-start; }
.ssr-talk-msg.is-mine { flex-direction: row-reverse; }
.ssr-talk-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e0e7ff; color: #1b2f6b; font-weight: 800; }
.ssr-talk-msg.is-teacher .ssr-talk-av { background: #f5a623; color: #1b2f6b; }
.ssr-talk-bub { position: relative; max-width: 78%; padding: 8px 12px; border-radius: 16px; background: #f1f5f9; }
.ssr-talk-msg.is-mine .ssr-talk-bub { background: #e8eefb; }
.ssr-talk-msg.is-teacher .ssr-talk-bub { background: #fff7e6; border: 1px solid #fde3ad; }
.ssr-talk-msg.is-new .ssr-talk-bub { box-shadow: 0 0 0 3px rgba(245,166,35,.55); }
.ssr-talk-meta { font-size: 13px; color: #475569; }
.ssr-talk-meta small { color: #94a3b8; margin-right: 6px; }
.ssr-talk-role { padding: 0 8px; border-radius: 99px; background: #f5a623; color: #1b2f6b; font-size: 11.5px; font-weight: 800; }
.ssr-talk-bub p { margin: 4px 0 0; white-space: normal; overflow-wrap: anywhere; }
.ssr-talk-img { display: block; max-width: 240px; max-height: 240px; margin-top: 6px; border-radius: 10px; }
.ssr-talk-audio, .ssr-rec-prev { display: block; width: 260px; max-width: 100%; margin-top: 6px; }
.ssr-talk-del { position: absolute; top: 4px; left: 6px; margin: 0; }
.ssr-talk-del button { border: 0; background: transparent; cursor: pointer; opacity: .45; font-size: 13px; padding: 0; }
.ssr-talk-del button:hover { opacity: 1; }
.ssr-talk-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 14px; font-family: inherit; resize: vertical; }
.ssr-talk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ssr-talk-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font: 700 13.5px "Cairo", Tahoma, sans-serif; cursor: pointer; }
.ssr-talk-tool input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ssr-talk-tool.is-rec { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; animation: ssr-blink 1.2s ease-in-out infinite; }
.ssr-talk-picked { color: #475569; font-size: 13px; }
.ssr-talk-send { margin-right: auto; }
.ssr-mlog-fb { color: #475569 !important; }
@media (max-width: 640px) { .ssr-talk-bub { max-width: 88%; } .ssr-talk-img { max-width: 180px; } }
/* زرار الإرسال وأي زرار أساسي جوه صفحة الواجب أو الرسائل */
.ssr-m .ssr-btn-primary, .ssr-talk .ssr-btn-primary { background: #1b2f6b !important; border-color: #1b2f6b !important; color: #fff !important; }
.ssr-talk .ssr-btn { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 12px; border: 1px solid #1b2f6b; font: 800 14.5px "Cairo", Tahoma, sans-serif; min-height: 40px; cursor: pointer; opacity: 1 !important; }
/* المدرس: صفحة الواجب في أي وقت */
.ssr-g-cardbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ssr-g-brief { margin: 10px 0 16px; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.ssr-g-brief summary { cursor: pointer; font-weight: 800; color: #1b2f6b; }
.ssr-g-students { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 4px 0; }
.ssr-g-students h3 { margin: 10px 14px 6px; color: #1b2f6b; font-size: 18px; }
.ssr-g-students table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ssr-g-students th, .ssr-g-students td { padding: 9px 12px; border-top: 1px solid #eef2f7; text-align: right; white-space: nowrap; }
.ssr-g-st { background: #f1f5f9 !important; color: #334155; }
.ssr-g-acts .ssr-btn { padding: 5px 12px !important; min-height: 34px; font-size: 13.5px !important; }
/* فيديو شرح المهمة: أول حاجة في الصفحة */
.ssr-m-video { position: relative; margin: 16px 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; }
.ssr-m-video h3 { margin: 0 0 10px; font-size: 19px; color: #1b2f6b; }
.ssr-m-video .msb { margin: 0; }
.ssr-m-space .ssr-m-video { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ssr-m-space .ssr-m-video h3,
.ssr-m.ssr-m-space .ssr-m-video h3.ssr-m-vh { color: #ffd38a; } /* beats the lesson item page's dark heading colour */
/* المطلوب جوه صفحة الدرس: ألوان الفضا تغلب ألوان الكروت البيضا بتاعة صفحة الدرس (item.css) */
.ssr-m.ssr-m-space section.ssr-m-brief h3 { color: #ffd38a; }
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body p,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body li,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body td,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body strong { color: #e8edff; }
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body h1,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body h2,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body h3,
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body h4 { color: #fff; }
.ssr-m.ssr-m-space .ssr-m-brief .ssr-m-body a { color: #9cc3ff; }