/* ---- صفحهٔ آموزش گام‌به‌گام ------------------------------------------------- */
/* The page is a manual: read a step, then look at the picture of that exact screen. So each step
   stacks — heading, words, then the picture — instead of putting the two in columns. Columns would
   pair a three-line instruction with a 1300px-tall screenshot and leave a hole beside it, and on a
   phone they collapse back into this order anyway. */

.learn-intro h1 { max-width:22ch; }
.learn-hint { margin:6px 0 0; color:#7f7995; font-size:13px; }

/* The chapter list. Buttons rather than links on purpose: the panel routes on the hash, so an
   <a href="#learn-box"> would be read as a route called «learn-box» and bounce the reader to the
   dashboard. data-scroll is the panel's own in-page jump, already wired for the score card. */
.learn-toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.learn-toc-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line);
  border-radius:999px; background:#ffffff08; color:#c9c3de; font-size:13.5px; font-weight:700; transition:.18s; }
.learn-toc-chip:hover { border-color:#7657ec7a; background:#7657ec18; color:#fff; }
.learn-toc-chip b { display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:#7657ec2b; color:#c8bcff; font-size:12.5px; }

.learn-chapter { scroll-margin-top:18px; }
.learn-chapter + .learn-chapter { margin-top:20px; }
.learn-chapter-head { display:flex; align-items:flex-start; gap:14px; padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--line); }
.learn-chapter-head h2 { margin:0 0 6px; font-size:21px; }
.learn-chapter-head p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.95; }
.learn-chapter-no { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,#8566ff,#6745ef); color:#fff; font-size:18px; font-weight:800;
  box-shadow:0 8px 16px #4c2ec04d; }

.learn-steps { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.learn-step { padding:16px; border:1px solid var(--line); border-radius:14px; background:#ffffff07; }
.learn-step-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.learn-step-head h3 { margin:0; font-size:16.5px; color:#efeaff; }
.learn-step-no { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#ffffff12; color:#c8bcff; font-size:14px; font-weight:800; }
.learn-step-body p { margin:0 0 9px; color:var(--muted); font-size:14px; line-height:1.95; }

/* The numbered list under a step and the badges burned into the picture beside it are the same
   numbers, so the marker here is the same shape and the same cyan as the one in the screenshot. */
.learn-legend { display:grid; gap:7px; margin:12px 0 0; padding:0; list-style:none; }
.learn-legend li { display:flex; align-items:flex-start; gap:9px; }
.learn-legend b { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#42c5ff; color:#06121c; font-size:13.5px; font-weight:800; }
.learn-legend span { color:#c9c3de; font-size:13.5px; line-height:1.85; padding-top:2px; }

.learn-note { margin:12px 0 0!important; padding:9px 12px; border-radius:10px; background:#7657ec14;
  border:1px solid #7657ec30; color:#c8bcff!important; font-size:13px!important; line-height:1.85!important; }

.learn-shot { margin:14px 0 0; }
/* The picture is a control, so the button carries no button chrome — the frame belongs to the image
   inside it, which is what the reader is actually pointing at. */
.learn-zoom { display:block; width:100%; padding:0; border:0; background:transparent; text-align:start; cursor:zoom-in; }
.learn-zoom img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px;
  background:#0d0b19; box-shadow:0 12px 28px #00000045; transition:border-color .18s; }
.learn-zoom:hover img { border-color:#42c5ff5c; }

.learn-end { margin-top:22px; }
.learn-end h2 { margin:0 0 8px; font-size:19px; }
.learn-end p { margin:0 0 14px; color:var(--muted); font-size:14.5px; line-height:1.95; }

/* Full size, on a backdrop, in the panel's own modal shell. The picture is 2× the CSS size it was
   shot at, so on a phone this is a genuine zoom rather than the same pixels stretched. */
.learn-zoom-card { max-width:min(1100px,96vw); max-height:92vh; overflow:auto; padding:34px 14px 14px; }
.learn-zoom-card img { display:block; width:100%; height:auto; border-radius:10px; }

@media (max-width:760px) {
  .learn-chapter-head { gap:11px; }
  .learn-chapter-head h2 { font-size:19px; }
  .learn-chapter-no { width:32px; height:32px; font-size:16px; border-radius:10px; }
  .learn-step { padding:13px; }
  .learn-toc-chip { font-size:13px; padding:7px 11px; }
}