/* ---------- lesson ---------- */
  .lesson-top{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto 22px}
  .lesson-bar{flex:1;height:14px;background:var(--bg-2);border-radius:99px;overflow:hidden;border:2px solid var(--line)}
  .lesson-bar i{display:block;height:100%;width:0%;background:var(--green);border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.3,1)}
  .lesson-xp{font-weight:900;font-size:.85rem;color:var(--orange-dark);white-space:nowrap}
  .lesson-card{position:relative;max-width:760px;margin:0 auto;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:22px;
    padding:30px}
  .lesson-q{font-weight:900;font-size:1.05rem;margin-bottom:18px;text-align:center}
  .lesson-ar{font-family:var(--quran);font-size:1.9rem;line-height:2.3;direction:rtl;text-align:center;color:var(--text)}
  .lesson-tr{font-size:.9rem;color:var(--muted-2);font-weight:600;text-align:center;margin-top:10px}
  .answer-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;direction:rtl;min-height:56px;
    border-bottom:2px solid var(--line);padding:8px 4px 14px;margin-bottom:18px}
  .tile-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;direction:rtl}
  .tile{font-family:var(--quran);font-size:1.35rem;background:var(--card);border:2px solid var(--line);border-radius:12px;
    padding:8px 16px;box-shadow:0 3px 0 var(--line);transition:transform .1s,border .15s;color:var(--text)}
  .tile:hover{border-color:#84d8ff}
  .tile:active{transform:translateY(2px)}
  .tile.ghost{opacity:.25;pointer-events:none}
  .tile.in-answer{background:var(--blue-light);border-color:#84d8ff}
  .tile.blank{min-width:70px;color:var(--muted);background:var(--bg-2)}
  .lesson-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}
  .q-chip{display:inline-block;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
    border-radius:999px;padding:5px 12px;margin-bottom:14px}
  .q-chip.c-build{background:var(--blue-light);color:var(--blue-dark)}
  .q-chip.c-match{background:#f3e8ff;color:var(--purple-dark)}
  .q-chip.c-listen{background:var(--orange-light);color:var(--orange-dark)}
  .q-chip.c-meaning{background:var(--green-light);color:var(--green-dark)}
  .pairs-board{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 auto}
  .pair-btn{font-size:1rem;font-weight:700;background:var(--card);border:2px solid var(--line);border-radius:12px;
    padding:13px 10px;box-shadow:0 3px 0 var(--line);transition:all .15s;min-height:56px}
  .pair-btn.ar{font-family:var(--quran);font-size:1.35rem;font-weight:400}
  .pair-btn.sel{border-color:var(--blue);background:var(--blue-light)}
  .pair-btn.done{border-color:var(--green);background:var(--green-light);color:var(--green-dark);pointer-events:none;box-shadow:none}
  .pair-btn.err{animation:shake .3s;border-color:var(--red)}
  .choice-list{display:flex;flex-direction:column;gap:10px;max-width:600px;margin:0 auto}
  .choice-btn{font-family:var(--quran);font-size:1.3rem;line-height:1.9;direction:rtl;text-align:right;background:var(--card);
    border:2px solid var(--line);border-radius:12px;padding:12px 18px;box-shadow:0 3px 0 var(--line);transition:all .15s}
  .choice-btn:hover{border-color:#84d8ff}
  .choice-btn.ok{border-color:var(--green);background:var(--green-light)}
  .choice-btn.bad{border-color:var(--red);animation:shake .3s}
  .xp-fly{position:fixed;font-weight:900;font-size:1.2rem;color:var(--orange-dark);z-index:70;
    pointer-events:none;animation:xpFly 1s ease-out forwards;text-shadow:0 1px 0 #fff}
  @keyframes xpFly{0%{opacity:0;transform:translateY(8px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.15)}
    100%{opacity:0;transform:translateY(-46px) scale(1)}}
  .lesson-card.correct{border-color:var(--green);background:#f4ffe9}
  .lesson-card.wrong{border-color:var(--red);animation:shake .35s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
  .lesson-feedback{text-align:center;font-weight:900;margin-top:16px;font-size:1rem}
  .lesson-feedback.ok{color:var(--green-dark)}
  .lesson-feedback.bad{color:var(--red)}
  .lesson-done{max-width:620px;margin:30px auto 0;text-align:center;background:var(--gold-light);
    border:2px solid #f0d97a;border-bottom-width:4px;border-radius:22px;padding:40px 30px}
  .lesson-done .big{font-weight:900;font-size:1.5rem;color:#b8860b}
  .lesson-done p{font-size:.92rem;color:#8a6d1a;font-weight:600;margin:8px 0 20px}

  /* ---------- learn path (alphabet course) ---------- */
  .path-wrap{max-width:520px;margin:0 auto}
  .unit-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:16px;
    padding:18px 22px;margin:34px 0 24px;color:#fff;border-bottom:4px solid rgba(0,0,0,.22)}
  .unit-banner.u1{background:linear-gradient(100deg,var(--green),#6fdd1a)}
  .unit-banner.u2{background:linear-gradient(100deg,var(--blue),#4fc7ff)}
  .unit-banner.u3{background:linear-gradient(100deg,var(--purple),#df9dff)}
  .unit-banner.u4{background:linear-gradient(100deg,var(--orange),#ffb84d)}
  .unit-banner.locked{filter:grayscale(.55) brightness(.9)}
  .ub-kick{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
  .ub-title{font-weight:900;font-size:1.2rem;letter-spacing:-.01em;margin-top:2px}
  .ub-sub{font-size:.8rem;font-weight:700;opacity:.9;margin-top:2px}
  .ub-prog{font-weight:900;font-size:1.7rem;flex-shrink:0}
  .ub-prog span{font-size:.9rem;opacity:.8;font-weight:800}
  .chest-node{width:92px;height:92px;padding:0;transition:transform .15s}
  .chest-node img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.2))}
  .chest-node:hover{transform:scale(1.07)}
  .chest-node.locked img{filter:grayscale(1);opacity:.45}
  .pnode.next::before{content:'START';position:absolute;top:-30px;left:50%;
    background:var(--card);border:2px solid var(--gold);color:var(--orange-dark);font-size:.62rem;font-weight:900;
    letter-spacing:.06em;border-radius:10px;padding:4px 10px;white-space:nowrap;animation:bobY 1.6s infinite;z-index:2}
  @keyframes bobY{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
  .path-unit{font-weight:900;font-size:1.05rem;background:var(--gold-light);border:2px solid #f0d97a;
    color:#8a6d1a;border-radius:16px;padding:14px 20px;text-align:center;margin-bottom:26px}
  .path{display:flex;flex-direction:column;align-items:center;gap:18px}
  .pnode-row{display:flex;flex-direction:column;align-items:center}
  .pconn{width:6px;height:26px;background:var(--line);border-radius:3px}
  .pconn.done{background:var(--green)}
  .pnode{width:84px;height:84px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-weight:900;border:none;transition:transform .15s;position:relative}
  .pnode:hover{transform:scale(1.05)}
  .pnode .pl{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em}
  .pnode.done{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-dark)}
  .pnode.next{background:var(--gold);color:#7a5b00;box-shadow:0 5px 0 #d9a900;animation:pulseN 1.6s infinite}
  @keyframes pulseN{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  .pnode.locked{background:var(--bg-2);color:var(--muted);border:2px solid var(--line);cursor:not-allowed}
  .pnode .glyphs{font-family:var(--quran);font-size:1.15rem;font-weight:400}
  .alpha-big{font-family:var(--quran);font-size:4.5rem;line-height:1.3;color:var(--text)}
  .alpha-name{font-weight:900;font-size:1.3rem;margin-top:6px}
  .alpha-sub{font-size:.9rem;color:var(--muted-2);font-weight:600}
  .tile.latin{font-family:var(--sans);font-weight:800;font-size:1rem}
  .qword{cursor:pointer;border-radius:6px;transition:background .15s}
  .qword:hover{background:var(--gold-light)}
  .ayah-tl{font-size:.86rem;color:#8a6d1a;font-weight:600;margin-top:8px;display:none;font-style:italic}
  body.show-tl .ayah-tl{display:block}