/* ---------- Noor: rigged vector, squash-and-stretch physics ---------- */
  .noor-box{position:relative;display:inline-block;vertical-align:bottom}
  .noor-box svg.nr{display:block;overflow:visible}
  .nr-root,.nr-capG,.nr-bodyG,.nr-arm,.nr-lid,.nr-flameMood,.nr-face{transform-box:fill-box}
  .nr-root{transform-origin:50% 100%}
  .nr-capG{transform-origin:50% 90%}
  .nr-armL{transform-origin:90% 10%}
  .nr-armR{transform-origin:10% 10%}
  .nr-flameMood{transform-origin:50% 85%;transition:transform .5s}
  .nr-flame{transform-box:fill-box;transform-origin:50% 88%;animation:nrFlick .55s ease-in-out infinite alternate}
  @keyframes nrFlick{from{transform:scale(1) rotate(-2.5deg)}to{transform:scale(1.14) rotate(2.5deg)}}
  /* blink — lids drop briefly */
  .nr-lid{transform:translateY(-26px);animation:nrBlink 4.2s infinite}
  .nr-lidR{animation-delay:.05s}
  @keyframes nrBlink{0%,93.5%,100%{transform:translateY(-26px)}95.5%,97%{transform:translateY(-3px)}}
  /* mouths + brows per mood */
  .nr-m,.nr-brow{display:none}
  .noor-box[data-mood="idle"] .nr-m-smile{display:block}
  .noor-box[data-mood="watch"] .nr-m-o{display:block}
  .noor-box[data-mood="cheer"] .nr-m-open{display:block}
  .noor-box[data-mood="sad"] .nr-m-sad{display:block}
  .noor-box[data-mood="sad"] .nr-brow{display:block}
  /* ----- IDLE: breathing + arm sway + cap lag (secondary motion) ----- */
  .noor-box[data-mood="idle"] .nr-root{animation:nrBreath 3.4s ease-in-out infinite}
  .noor-box[data-mood="idle"] .nr-capG{animation:nrCapLag 3.4s ease-in-out infinite}
  .noor-box[data-mood="idle"] .nr-armL{animation:nrSwayL 3.4s ease-in-out infinite}
  .noor-box[data-mood="idle"] .nr-armR{animation:nrSwayR 3.4s ease-in-out infinite}
  @keyframes nrBreath{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-5px) scale(.995,1.018)}}
  @keyframes nrCapLag{0%,100%{transform:translateY(0) rotate(0)}12%{transform:translateY(1.5px)}62%{transform:translateY(-2.5px) rotate(-1deg)}}
  @keyframes nrSwayL{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
  @keyframes nrSwayR{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
  /* ----- WATCH: leaning curiosity, cap tilt ----- */
  .noor-box[data-mood="watch"] .nr-root{animation:nrLean 3.6s ease-in-out infinite}
  .noor-box[data-mood="watch"] .nr-capG{animation:nrCapTilt 3.6s ease-in-out infinite}
  @keyframes nrLean{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-3px)}}
  @keyframes nrCapTilt{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2.5deg)}}
  /* ----- CHEER: real jump physics — anticipation squash, stretch up, hang, landing squash, arms pump w/ overshoot ----- */
  .noor-box[data-mood="cheer"] .nr-root{animation:nrJump .82s cubic-bezier(.3,.6,.4,1) infinite}
  .noor-box[data-mood="cheer"] .nr-capG{animation:nrCapJump .82s ease-in-out infinite}
  .noor-box[data-mood="cheer"] .nr-armL{animation:nrPumpL .82s ease-in-out infinite}
  .noor-box[data-mood="cheer"] .nr-armR{animation:nrPumpR .82s ease-in-out infinite}
  .noor-box[data-mood="cheer"] .nr-shadow{animation:nrShadow .82s ease-in-out infinite}
  @keyframes nrJump{0%{transform:translateY(0) scale(1,1)}12%{transform:translateY(2px) scale(1.09,.88)}30%{transform:translateY(-26px) scale(.94,1.1)}48%{transform:translateY(-30px) scale(1,1.02)}70%{transform:translateY(0) scale(1.12,.86)}84%{transform:translateY(-2px) scale(.97,1.05)}100%{transform:translateY(0) scale(1,1)}}
  @keyframes nrCapJump{0%,12%{transform:translateY(0)}30%{transform:translateY(4px)}48%{transform:translateY(-5px) rotate(-2deg)}70%{transform:translateY(-6px)}86%{transform:translateY(3px)}100%{transform:translateY(0)}}
  @keyframes nrPumpL{0%,12%{transform:rotate(10deg)}34%{transform:rotate(-135deg)}48%{transform:rotate(-120deg)}70%{transform:rotate(-10deg)}100%{transform:rotate(10deg)}}
  @keyframes nrPumpR{0%,12%{transform:rotate(-10deg)}34%{transform:rotate(135deg)}48%{transform:rotate(120deg)}70%{transform:rotate(10deg)}100%{transform:rotate(-10deg)}}
  @keyframes nrShadow{0%,12%,70%,100%{transform:scaleX(1);opacity:.14}40%{transform:scaleX(.72);opacity:.07}}
  /* ----- SAD: heavy droop, arms hang inward, dim flame, slow sigh ----- */
  .noor-box[data-mood="sad"] .nr-root{animation:nrSigh 2.6s ease-in-out infinite}
  .noor-box[data-mood="sad"] .nr-capG{transform:translateY(3px) rotate(-2deg)}
  .noor-box[data-mood="sad"] .nr-armL{transform:rotate(16deg)}
  .noor-box[data-mood="sad"] .nr-armR{transform:rotate(-16deg)}
  .noor-box[data-mood="sad"] .nr-flameMood{transform:scale(.6)}
  .noor-box[data-mood="sad"] .nr-face{transform:translateY(3px)}
  @keyframes nrSigh{0%,100%{transform:translateY(4px) scale(1,1) rotate(-1deg)}40%{transform:translateY(2px) scale(.99,1.02) rotate(0)}55%{transform:translateY(5px) scale(1.03,.96) rotate(1deg)}}
  .nr-arm{transition:transform .45s cubic-bezier(.3,1.7,.4,1)}
  .nr-capG,.nr-flameMood,.nr-face{transition:transform .4s cubic-bezier(.3,1.5,.4,1)}
  .noor-bubble{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%) scale(.9);
    background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 14px;font-weight:800;font-size:.82rem;
    white-space:nowrap;box-shadow:0 3px 0 var(--line);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:5}
  .noor-bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
  .confetti{position:fixed;inset:0;pointer-events:none;z-index:60}
  .confetti i{position:absolute;width:10px;height:10px;border-radius:3px;top:40%;left:50%;animation:confl 1.1s ease-out forwards}
  @keyframes confl{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
  .lesson-noor{position:absolute;right:18px;top:-34px}

  /* ---------- bookmarks ---------- */
  .bk-btn{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;color:var(--muted);background:transparent;transition:color .15s,background .15s}
  .bk-btn:hover{background:var(--bg-2)}
  .bk-btn.on{color:var(--gold)}
  .bk-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .bk-chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;background:var(--gold-light);
    border:2px solid #f0d97a;color:#8a6d1a;border-radius:12px;padding:8px 14px;transition:transform .12s}
  .bk-chip:hover{transform:translateY(-1px)}

  /* ---------- Noor video (Seedance loops) ---------- */
  .noor-vid{position:relative;display:inline-block}
  .noor-vid video{display:none;width:100%;height:100%;object-fit:cover;border-radius:26px}
  .noor-vid[data-mood="idle"] .nv-idle{display:block}
  .noor-vid[data-mood="sad"] .nv-sad{display:block}
  .noor-vid[data-mood="cheer"] .nv-cheer{display:block}
  .noor-vid[data-mood="watch"] .nv-watch{display:block}
  .noor-vid[data-mood="talk"] .nv-talk{display:block}
  .noor-vid[data-mood="wave"] .nv-wave{display:block}
  .noor-vid[data-mood="sleepy"] .nv-sleepy{display:block}
  .noor-vid[data-mood="listen"] .nv-listen{display:block}
  .noor-vid[data-mood="recite"] .nv-recite{display:block}
  .noor-vid[data-mood="proud"] .nv-proud{display:block}
  .noor-vid[data-mood="spin"] .nv-spin{display:block}
  .lesson-noor .noor-vid video{border-radius:12px}
  .noor-vid[data-mood="cheer"] .nv-cheer:not([src]),.noor-vid video.missing{display:none}

  .loading{text-align:center;color:var(--muted-2);font-weight:700;padding:100px 0;font-size:.95rem}
  .spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;
    margin:0 auto 16px;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,8px);background:var(--text);color:#fff;
    font-weight:800;font-size:.86rem;border-radius:12px;padding:12px 22px;z-index:50;opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s;box-shadow:0 10px 30px rgba(0,0,0,.2)}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  .toast.gold{background:var(--gold);color:#7a5b00}

  @media(max-width:900px){
    .shell{grid-template-columns:1fr}
    aside{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;align-items:center;
      padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-right:none;border-top:2px solid var(--line);background:var(--card)}
    .logo,.side-bottom{display:none}
    nav{margin:0;flex-direction:row;width:100%;justify-content:space-around}
    .nav-item{flex-direction:column;gap:4px;font-size:.56rem;padding:6px 8px;border:none}
    .nav-item.active{background:transparent;color:var(--blue-dark)}
    .main{padding:20px 16px 190px}
    .today-grid,.today-top{grid-template-columns:1fr}
    .player{left:50%;width:min(560px,calc(100% - 20px));bottom:84px}
    .prog-grid{grid-template-columns:1fr;text-align:center}
    .ring-box{margin:0 auto}
  }