/* ویدیو‌آموز — the design system every page draws from.
   Vazirmatn is bundled locally so the app works with no network. One family,
   but the variable axis runs 100-900: the weight jump from 300 to 800 is what
   carries the hierarchy, since there is no second face to pair with.

   The look comes from the one thing this product owns - a lit segment on a
   timeline. That shape is a real component (.rail) and it is also where the
   palette comes from: a playhead glowing on dark film, with warm amber kept
   aside for the clip you have to watch again. Right and missed must never be
   the same temperature. */

@font-face{
  font-family:'Vazirmatn';
  src:url('/web/fonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight:100 900;
  font-display:swap;
}

:root{
  /* light: warm paper, neutrals pulled a touch toward the accent so nothing
     reads as unconsidered grey */
  --bg:#f4f6f6;
  --panel:#ffffff;
  --panel2:#eaeff0;
  --line:#dbe3e4;
  --line2:#c2cdcf;
  --txt:#0d1618;
  --txt2:#3a4c50;
  --dim:#66787c;

  --accent:#046d7a;
  --accent-soft:rgba(4,109,122,.10);
  --accent-line:rgba(4,109,122,.30);
  --glow:transparent;                 /* light needs no bloom */

  --ok:#0a6b45;
  --ok-soft:rgba(10,107,69,.10);
  --bad:#bb2233;
  --bad-soft:rgba(187,34,51,.09);
  --warn:#8a4b00;
  --warn-soft:rgba(138,75,0,.11);

  --on-accent:#ffffff;
  --on-warn:#ffffff;

  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(13,22,24,.05);
  --shadow:0 1px 2px rgba(13,22,24,.05), 0 10px 28px rgba(13,22,24,.07);
  --shadow-lg:0 2px 4px rgba(13,22,24,.06), 0 24px 60px rgba(13,22,24,.12);
  --grain:.025;

  --radius:16px;
  --radius-sm:11px;

  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-md:16px;
  --fs-lg:18.5px;
  --fs-xl:22px;
  --lh:1.9;
}

/* dark is the room this app is really used in - a phone at night, a class with
   the lights down. It gets the bloom and the deep ground. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070a0f;
    --panel:#0e141c;
    --panel2:#161f29;
    --line:#1f2a36;
    --line2:#2e3d4c;
    --txt:#eaf2f4;
    --txt2:#adbfc6;
    --dim:#778d96;

    --accent:#2fe3d2;
    --accent-soft:rgba(47,227,210,.12);
    --accent-line:rgba(47,227,210,.34);
    --glow:rgba(47,227,210,.22);

    --ok:#3ddc97;
    --ok-soft:rgba(61,220,151,.13);
    --bad:#ff6b7d;
    --bad-soft:rgba(255,107,125,.12);
    --warn:#ffb340;
    --warn-soft:rgba(255,179,64,.13);

    --on-accent:#00201f;
    --on-warn:#291800;

    --edge:inset 0 1px 0 rgba(255,255,255,.055);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.55);
    --grain:.05;
  }
}
:root[data-theme="dark"]{
  --bg:#070a0f;
  --panel:#0e141c;
  --panel2:#161f29;
  --line:#1f2a36;
  --line2:#2e3d4c;
  --txt:#eaf2f4;
  --txt2:#adbfc6;
  --dim:#778d96;

  --accent:#2fe3d2;
  --accent-soft:rgba(47,227,210,.12);
  --accent-line:rgba(47,227,210,.34);
  --glow:rgba(47,227,210,.22);

  --ok:#3ddc97;
  --ok-soft:rgba(61,220,151,.13);
  --bad:#ff6b7d;
  --bad-soft:rgba(255,107,125,.12);
  --warn:#ffb340;
  --warn-soft:rgba(255,179,64,.13);

  --on-accent:#00201f;
  --on-warn:#291800;

  --edge:inset 0 1px 0 rgba(255,255,255,.055);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.55);
  --grain:.05;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  font-size:var(--fs-base);
  line-height:var(--lh);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100vh;
}

/* A wash of screen-light from the top, then film grain over everything. Flat
   dark panels on a flat dark ground is what made this look like a template;
   the grain is what stops a large dark field from reading as dead. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 70% at 50% -18%, var(--accent-soft) 0%, transparent 62%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:1}

/* Persian numerals still want column alignment wherever times are listed */
.t,.num,.tnum,time{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.45;text-wrap:balance;
            letter-spacing:-.015em}
h1{font-size:var(--fs-xl)}
h3{font-size:var(--fs-md);margin-bottom:12px}
p{margin:0}

.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px}

/* ---------- the timeline rail ----------
   The product in one shape: a whole lesson, with the piece you have to watch
   again lit up on it. Used as a hero graphic, as a divider, and on cards.
   Drive it with --at and --len (both 0-100). */
.rail{
  position:relative;
  height:5px;
  border-radius:99px;
  background:var(--panel2);
  border:1px solid var(--line);
  overflow:hidden;
}
.rail>i{
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(var(--at,20) * 1%);
  width:calc(var(--len,18) * 1%);
  background:var(--accent);
  border-radius:99px;
  box-shadow:0 0 14px var(--glow);
}
.rail.warm>i{background:var(--warn);box-shadow:none}

/* ---------- surfaces ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:19px;
  box-shadow:var(--shadow-sm), var(--edge);
}

/* ---------- controls ---------- */
.btn{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid transparent;
  padding:11px 21px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--fs-base);
  font-family:inherit;
  font-weight:700;
  line-height:1.6;
  transition:background .15s, border-color .15s, transform .08s,
             opacity .15s, box-shadow .15s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 0 0 0 var(--glow);
}
.btn:hover{
  background:color-mix(in srgb,var(--accent) 88%,var(--txt));
  box-shadow:0 6px 22px -6px var(--glow);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.btn.ghost{
  background:var(--panel2);
  color:var(--txt);
  border-color:var(--line2);
  font-weight:500;
  box-shadow:none;
}
.btn.ghost:hover{background:var(--line);border-color:var(--dim);box-shadow:none}
.btn.warn{background:var(--warn);color:var(--on-warn)}
.btn.warn:hover{background:color-mix(in srgb,var(--warn) 88%,var(--txt));
                box-shadow:0 6px 22px -8px var(--warn)}
.btn.ok{background:var(--ok);color:var(--on-accent)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad);box-shadow:none}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:6px 13px;font-size:var(--fs-sm);border-radius:9px}

select,input,textarea{
  background:var(--panel);
  color:var(--txt);
  border:1px solid var(--line2);
  border-radius:10px;
  padding:10px 13px;
  font-family:inherit;
  font-size:var(--fs-sm);
  line-height:1.8;
  transition:border-color .15s, box-shadow .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--dim)}
textarea{width:100%;resize:vertical;min-height:44px}
select{cursor:pointer}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:7px}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline-offset:-1px;box-shadow:0 0 0 4px var(--accent-soft);
}

/* ---------- tabs ---------- */
.tabs{
  display:flex;
  gap:4px;
  background:var(--panel2);
  padding:4px;
  border-radius:13px;
  border:1px solid var(--line);
}
.tab{
  padding:9px 17px;
  border-radius:10px;
  cursor:pointer;
  font-size:var(--fs-sm);
  color:var(--dim);
  border:0;
  background:transparent;
  font-family:inherit;
  font-weight:600;
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.tab:hover{color:var(--txt);background:var(--panel)}
.tab.on{background:var(--accent);color:var(--on-accent);
        box-shadow:0 4px 16px -6px var(--glow)}
.tab.on:hover{background:var(--accent)}

/* ---------- timestamps ---------- */
.t{
  color:var(--accent);
  font-size:var(--fs-xs);
  white-space:nowrap;
  font-weight:700;
}

.muted{color:var(--dim);font-size:var(--fs-sm)}
.hide{display:none !important}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* a small letterspaced label - the one place tracking earns its keep */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;
  color:var(--dim);
}

video{width:100%;border-radius:13px;background:#000;display:block}

/* ---------- theme toggle ---------- */
.themebtn{
  background:var(--panel2);
  color:var(--txt2);
  border:1px solid var(--line);
  border-radius:10px;
  width:38px;height:38px;
  display:grid;place-items:center;
  cursor:pointer;font-size:16px;
  font-family:inherit;
  flex:none;
  transition:background .15s,color .15s,border-color .15s;
}
.themebtn:hover{background:var(--line);color:var(--accent);border-color:var(--accent-line)}

/* the bell, and the panel that drops out of it. Same shell as .themebtn so a
   header with both reads as one row of controls rather than two ideas. */
.bell{
  background:var(--panel2);
  color:var(--txt2);
  border:1px solid var(--line);
  border-radius:10px;
  width:38px;height:38px;
  display:grid;place-items:center;
  cursor:pointer;font-size:15px;
  font-family:inherit;
  flex:none;position:relative;
  transition:background .15s,color .15s,border-color .15s;
}
.bell:hover{background:var(--line);color:var(--accent);border-color:var(--accent-line)}
.bell .bdot{
  position:absolute;inset-block-start:-5px;inset-inline-end:-5px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:99px;background:var(--bad);color:#fff;
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--bg);
}
/* the bell and the theme toggle are one cluster at the end of a header.
   Left to themselves they wrapped apart - the bell holding the first row
   and the toggle alone on a second one. */
.bwrap{position:relative;display:inline-flex;flex:none;margin-inline-start:auto}
.bwrap + .themebtn{margin-inline-start:0}
.bpanel{
  position:absolute;inset-block-start:46px;inset-inline-end:0;
  width:min(340px,calc(100vw - 32px));max-height:min(420px,70vh);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);z-index:80;padding:6px;
}
.bhead{
  font-size:var(--fs-xs);font-weight:700;color:var(--dim);
  letter-spacing:.06em;padding:8px 11px 7px;
}
.brow{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:10px 11px;border-radius:10px;text-decoration:none;color:inherit;
}
a.brow:hover{background:var(--accent-soft)}
.brow.new{background:var(--accent-soft)}
.brow .bi{
  width:26px;height:26px;border-radius:8px;flex:none;
  display:grid;place-items:center;font-size:13px;
  background:var(--panel2);color:var(--dim);
}
.brow.new .bi{background:var(--accent);color:var(--on-accent)}
.brow .bt{min-width:0}
.brow .bt b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.75}
.brow .bt span{display:block;font-size:var(--fs-xs);color:var(--dim);margin-top:1px}
.bempty{color:var(--dim);font-size:var(--fs-sm);text-align:center;padding:26px 14px}

kbd{
  background:var(--panel2);
  border:1px solid var(--line2);
  border-bottom-width:2px;
  border-radius:6px;
  padding:1px 7px;
  font-size:var(--fs-xs);
  font-family:inherit;
  color:var(--txt2);
  white-space:nowrap;
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ---- made by ---- */
.madeby{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:36px;padding-top:19px;border-top:1px solid var(--line);
  color:var(--dim);font-size:var(--fs-xs);line-height:2;
}
.madeby a{color:var(--accent);text-decoration:none;font-weight:700}
.madeby a:hover{text-decoration:underline}