@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green:#0B5D4B;--green-2:#0B7A5E;--green-ink:#0A5A45;--green-tint:#E3F1EB;
  --red:#C8102E;--amber:#D18B00;--gold:#F2B544;
  --ink:#14231D;--muted:#4A5A53;--paper:#F6F4EE;--line:#DAD6C9;
  --locked:#EDE9DB;--locked-ink:#4F5853;--seg-off:#CFC9B6;--panel:#E4F0E9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.7;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
h1,h2{margin:0}
.lbl{color:var(--muted)}

.strip{display:flex;height:6px;background:var(--paper)}
.strip i:nth-child(1){flex:1;background:var(--green)}
.strip i:nth-child(2){width:10px}
.strip i:nth-child(3){width:96px;background:var(--red)}

.top{background:#fff;border-bottom:3px solid var(--red)}
.top-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.avatar{flex:none}
.brand{display:block;flex:none;margin-inline-end:auto}
.brand img{display:block;height:35px;width:auto;mix-blend-mode:multiply}
.date{font-size:15px}
.branch{margin-inline-start:auto;padding:3px 14px;border-radius:999px;background:var(--red);color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.subject-row{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:6px;border-top:1.5px solid var(--line)}
.subject-name{font-size:19px}
.subjects{display:flex;gap:10px}
.sbtn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid var(--ink);border-radius:15px;background:#fff;color:var(--ink)}
.sbtn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.sbtn.add{border:2px dashed #6B746F;background:transparent;color:var(--muted)}

main{max-width:1180px;margin:0 auto;padding:22px 16px 110px}
.lesson-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
h1{font-size:26px;font-weight:700;line-height:1.4}
.progress-text{font-size:16px;color:var(--muted)}
.bar{margin-top:10px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>div{height:100%;background:var(--green-2);transition:width .3s}

.track{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
.st{position:relative;display:flex;gap:16px;align-items:flex-start;padding-bottom:32px}
.st:last-child{padding-bottom:0}
.st:not(:last-child)::after{content:"";position:absolute;inset-inline-start:30px;top:72px;bottom:-4px;width:8px;border-radius:99px;background:var(--seg,var(--seg-off))}
.node{position:relative;flex:none;width:68px;height:68px;padding:0;border:0;border-radius:50%;background:var(--fill,#fff);box-shadow:0 0 0 5px var(--halo,transparent)}
.node svg.ring{position:absolute;top:0;left:0;width:68px;height:68px}
.node .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700}
.st-text{padding-top:6px}
.st-title{font-size:18px;font-weight:700;line-height:1.45}
.st-count{font-size:14px;color:var(--muted)}
.st.locked .st-title,.st.locked .st-count{color:var(--locked-ink)}
.end-st .node{border:4px solid var(--endc,var(--seg-off));background:var(--fill,var(--locked));color:var(--endc,var(--locked-ink))}
.end-st .st-title{color:var(--endc,var(--locked-ink))}
.end-st .st-count{color:var(--endc,var(--locked-ink))}

.panel{margin-top:26px;background:var(--panel);border-radius:24px;padding:20px 18px}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.panel h2{font-size:21px;font-weight:700}
.panel-status{font-size:15px;color:#2F4A41}
.steps{margin-top:18px;display:flex;flex-wrap:wrap;gap:16px 6px}
.step{width:calc(33.33% - 4px);text-align:center}
.dot{margin:0 auto;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--b);background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.step-title{margin-top:5px;font-size:14px;line-height:1.45;color:#2F4A41}
.step.cur .step-title{color:var(--ink);font-weight:600}
.act{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:22px;padding:8px 22px;border:0;border-radius:14px;background:var(--green);color:#fff;font-size:17px;font-weight:700;line-height:1.4}
.panel-note{margin-top:20px;font-size:16px;color:#2F4A41}

.foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-outline{min-height:46px;padding:0 20px;border:2px solid var(--green);border-radius:12px;background:transparent;color:var(--green);font-size:16px;font-weight:700}
.btn-outline[hidden]{display:none}
.note{flex:1 0 100%;margin:4px 0 0;font-size:14px;color:var(--muted)}

.toast{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:520px;margin-inline:auto;padding:13px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:none}

@media (min-width:880px){
  .top-in{padding:12px 24px}
  .subject-row{flex:0 1 auto;border-top:0;padding-top:0;padding-inline-start:16px;border-inline-start:2px solid var(--ink)}
  .branch{order:3}
  .subject-row{order:2}
  .date{order:1}
  main{padding:30px 24px 60px}
  h1{font-size:28px}
  .track{flex-direction:row;align-items:flex-start;margin-top:34px}
  .st{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;text-align:center;padding-bottom:0;gap:0}
  .st:not(:last-child)::after{inset-inline-start:calc(50% + 44px);top:30px;bottom:auto;width:calc(100% - 88px);height:8px}
  .st-text{padding-top:14px}
  .panel{padding:24px 28px}
  .step{width:116px}
  .act{width:auto;display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.bar>div,.toast{transition:none}}