/* ==========================================================================
   NEXBOOK — premium-v4.css  (Free Resources art, cobe globe, flips, notebook details)
   ========================================================================== */

/* ---------- 1. Free Resources tiles → illustrated ---------- */
[id^="freeResource"], #pgComingSoonBtn { position: relative; overflow: hidden; min-height: 150px; border-radius: 26px !important; background: #fff !important; isolation: isolate; }
[id^="freeResource"] > svg.lucide, #pgComingSoonBtn > svg.lucide { display: none !important; }
.nb-fr { display: block; width: 74px; height: 60px; margin-bottom: 10px; position: relative; z-index: 1; }
.nb-fr svg { width: 100%; height: 100%; overflow: visible; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-fr .tint { fill: var(--fr, #dbeafe); stroke: none; }
.nb-fr .ink { fill: #111110; stroke: none; }
[id^="freeResource"]::before, #pgComingSoonBtn::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; background: var(--fr, #dbeafe); opacity: 0.45; right: -48px; top: -56px; z-index: 0; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.4s; }
[id^="freeResource"]:hover::before, #pgComingSoonBtn:hover::before { transform: scale(1.35) rotate(12deg); opacity: 0.7; }
[id^="freeResource"] > span, #pgComingSoonBtn > span { position: relative; z-index: 1; letter-spacing: 0.14em !important; font-size: 0.68rem !important; }
[id^="freeResource"]:hover .nb-fr svg .mv, #pgComingSoonBtn:hover .nb-fr svg .mv { transform: translateY(-3px) rotate(-4deg); }
.nb-fr svg .mv { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
#freeResourceNotesBtn { --fr: #dbeafe; } #freeResourcePYQBtn { --fr: #fde68a; } #freeResourceAssignmentBtn { --fr: #fecaca; } #freeResourcePracticalsBtn { --fr: #bbf7d0; }
#freeResourceQuizBtn { --fr: #e9d5ff; } #freeResourceFlashcardBtn { --fr: #fed7aa; } #freeResourceMindMapBtn { --fr: #bae6fd; } #pgComingSoonBtn, #freeResourcePGBtn, [id^="freeResource"]:nth-child(8) { --fr: #e7e5e4; }

/* ---------- 2. Cobe globe ---------- */
.nb-globe { position: relative; }
.nb-globe canvas { width: 240px; height: 240px; border-radius: 50%; cursor: grab; opacity: 0; transition: opacity 1.2s ease; touch-action: none; display: block; }
.nb-globe canvas.is-ready { opacity: 1; }
.nb-globe.is-cobe > svg { display: none; }
.nb-globe-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: -6px 0 18px; }
.nb-globe-legend span { display: inline-flex; align-items: center; gap: 6px; font: 600 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(17,17,16,0.6); padding: 5px 9px; border: 1px solid rgba(17,17,16,0.1); border-radius: 999px; background: #fff; }
.nb-globe-legend i { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.nb-globe-legend span.you i { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }

/* ---------- 3. Parallax paper layers (hero) ---------- */
.nb-paper { position: absolute; z-index: 1; pointer-events: none; will-change: transform; opacity: 0.9; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.08)); }
.nb-paper svg { width: 100%; height: 100%; display: block; }
.nb-paper--cloud { display: none; }
.nb-paper--leaf { display: none; }
.nb-paper--arc { display: none; }
@media (max-width: 767px) { .nb-paper--cloud { width: 90px; height: 44px; left: 3%; top: 10%; } }

/* ---------- 4. Hero illustration mode ---------- */
.nb-hero-toggle { position: absolute; right: 16px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.14); background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); font: 600 0.7rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #111110; cursor: pointer; }
.nb-hero-toggle i { width: 26px; height: 14px; border-radius: 999px; background: rgba(17,17,16,0.18); position: relative; transition: background 0.3s; }
.nb-hero-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
html.nb-illus .nb-hero-toggle i { background: #111110; } html.nb-illus .nb-hero-toggle i::after { transform: translateX(12px); }
.nb-campus { position: absolute; inset: 0; z-index: 0; display: none; background: #fbfbfa; }
.nb-campus svg { width: 100%; height: 100%; display: block; }
.nb-campus path, .nb-campus circle, .nb-campus rect, .nb-campus ellipse { stroke: #111110; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.nb-campus .ac { stroke: #2563eb; }
html.nb-illus .nb-campus { display: block; }
html.nb-illus .nb-campus path, html.nb-illus .nb-campus circle, html.nb-illus .nb-campus rect, html.nb-illus .nb-campus ellipse { animation: nbDraw1200 2.6s cubic-bezier(0.22,1,0.36,1) forwards; }
html.nb-illus .nb-campus g:nth-child(2) * { animation-delay: 0.3s; } html.nb-illus .nb-campus g:nth-child(3) * { animation-delay: 0.7s; } html.nb-illus .nb-campus g:nth-child(4) * { animation-delay: 1.1s; } html.nb-illus .nb-campus g:nth-child(5) * { animation-delay: 1.5s; }
@keyframes nbDraw1200 { to { stroke-dashoffset: 0; } }
html.nb-illus #top > img, html.nb-illus .nb-paper { display: none; }
html.nb-illus #top > .absolute.inset-0.bg-gradient-to-t { background: linear-gradient(to top, #fbfbfa, rgba(251,251,250,0.6) 50%, rgba(251,251,250,0.2)) !important; }

/* ---------- 5. Book card 3D flip ---------- */
.nb-flip { perspective: 1400px; }
.nb-flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; flex: 1; }
.nb-flip.is-flipped .nb-flip-inner { transform: rotateY(180deg); }
.nb-flip-front, .nb-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nb-flip-front { display: flex; flex-direction: column; flex: 1; }
.nb-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); background: #111110; color: #fff; border-radius: inherit; padding: 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.nb-flip-back::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.08; pointer-events: none; }
.nb-flip-back h4 { font: 800 1.3rem/1.15 'Playfair Display', Georgia, serif; margin: 0; }
.nb-flip-back .row { display: flex; align-items: center; gap: 10px; font: 500 0.82rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(255,255,255,0.8); }
.nb-flip-back .row svg { width: 28px; height: 24px; flex: none; stroke: #fff; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-flip-back .seller { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); }
.nb-flip-back .seller img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); }
.nb-flip-back .seller b { display: block; font: 700 0.85rem/1.2 var(--font-ui, Inter, system-ui); } .nb-flip-back .seller small { font: 500 0.72rem/1.2 var(--font-ui, Inter, system-ui); color: rgba(255,255,255,0.6); }
.nb-flip-btn { position: absolute; top: 12px; right: 12px; z-index: 4; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(17,17,16,0.15); background: rgba(255,255,255,0.9); display: grid; place-items: center; cursor: pointer; font: 700 0.8rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-flip.is-flipped .nb-flip-btn { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); transform: rotateY(180deg); }
.nb-flip .nb-flip-back .back-cta { margin-top: 4px; padding: 11px 14px; border-radius: 10px; background: #fff; color: #111110; font: 700 0.85rem/1 var(--font-ui, Inter, system-ui); text-align: center; cursor: pointer; border: 0; }

/* ---------- 6. Sell-flow mascot ---------- */
.nb-guide { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: -4px 0 14px; border-radius: 16px; background: #111110; color: #fff; box-shadow: 0 10px 30px -14px rgba(0,0,0,0.5); }
.nb-guide .face { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e0f2fe, #7dd3fc); display: grid; place-items: center; flex: none; }
.nb-guide .face svg { width: 30px; height: 16px; stroke: #0f172a; fill: none; stroke-width: 3; stroke-linecap: round; transition: d 0.3s; }
.nb-guide p { margin: 0; font: 500 0.88rem/1.35 var(--font-ui, Inter, system-ui); }
.nb-guide p b { display: block; font: 700 0.7rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.nb-guide .step { margin-left: auto; display: flex; gap: 4px; } .nb-guide .step i { width: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); } .nb-guide .step i.on { background: #f5c542; }

/* ---------- 7. Price guidance bar ---------- */
.nb-pricebar { margin-top: 10px; }
.nb-pricebar .track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #fee2e2 0 25%, #dcfce7 25% 65%, #fef3c7 65%); }
.nb-pricebar .pin { position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: #111110; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transform: translateX(-50%); transition: left 0.3s cubic-bezier(0.22,1,0.36,1); left: 0; }
.nb-pricebar .lbl { display: flex; justify-content: space-between; margin-top: 6px; font: 600 0.64rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-pricebar .tip { margin-top: 6px; font: 500 0.78rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.7); }

/* ---------- 8. Sold sticker ---------- */
.nb-sold { position: absolute; top: 18px; left: -10px; z-index: 4; padding: 6px 16px 6px 22px; background: #dc2626; color: #fff; font: 800 0.72rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(-8deg); clip-path: polygon(6% 0, 100% 0, 96% 100%, 0 100%, 4% 60%, 0 30%); box-shadow: 0 6px 14px -6px rgba(220,38,38,0.6); }
.nb-sold::after { content: "✓"; margin-left: 6px; }

/* ---------- 9. Bundle ribbon ---------- */
.nb-bundle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px; background: #fff7e6; border: 1px solid #f5d48a; position: relative; overflow: hidden; }
.nb-bundle svg { width: 64px; height: 52px; flex: none; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-bundle b { display: block; font: 800 1rem/1.2 'Playfair Display', Georgia, serif; } .nb-bundle small { font: 500 0.78rem/1.35 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.65); }
.nb-bundle .ribbon { position: absolute; right: -34px; top: 12px; width: 130px; padding: 5px 0; text-align: center; background: #111110; color: #fff; font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(35deg); }

/* ---------- 10. Skill tree ---------- */
.nb-tree { max-width: 820px; margin: 0 auto 26px; padding: 0 8px; }
.nb-tree svg { width: 100%; height: auto; overflow: visible; }
.nb-tree .ln { stroke: #111110; stroke-width: 1.4; fill: none; opacity: 0.4; stroke-dasharray: 300; stroke-dashoffset: 300; }
.nb-tree.is-in .ln { animation: nbDraw300 1.2s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nbDraw300 { to { stroke-dashoffset: 0; } }
.nb-tree .nd { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.nb-tree.is-in .nd { transform: scale(1); }
.nb-tree .nd rect { fill: #fff; stroke: #111110; stroke-width: 1.4; } .nb-tree .nd.root rect { fill: #111110; } .nb-tree .nd.root text { fill: #fff; }
.nb-tree .nd.leaf rect { fill: #eff6ff; stroke: #2563eb; }
.nb-tree text { font: 600 11px/1 var(--font-ui, Inter, system-ui); fill: #111110; text-anchor: middle; dominant-baseline: middle; }
.nb-tree .cap { font: 600 9px/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.14em; fill: rgba(17,17,16,0.5); }

/* ---------- 11. Holographic sticker ---------- */
.nb-holo { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 6px 10px; border-radius: 999px; font: 800 0.6rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #111110; background: conic-gradient(from var(--a, 0deg), #ffd6e8, #fff3b0, #c8f7dc, #c4e0ff, #e8ccff, #ffd6e8); box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.7); transform: rotate(-6deg); mix-blend-mode: normal; }
.nb-holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%); background-size: 250% 100%; background-position: var(--sx, 0%) 0; }
.course-card { position: relative; }

/* ---------- 12. Universities comparison bars ---------- */
.nb-bars { max-width: 640px; margin: 0 auto 26px; padding: 16px 18px; border: 1px solid rgba(17,17,16,0.1); border-radius: 16px; background: #fff; }
.nb-bars h5 { margin: 0 0 12px; font: 600 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-bars .r { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 10px; margin: 7px 0; font: 600 0.78rem/1 var(--font-ui, Inter, system-ui); }
.nb-bars .r span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-bars .bar { height: 10px; border-radius: 999px; background: #f1f0ec; overflow: hidden; } .nb-bars .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #111110, #2563eb); border-radius: inherit; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }
.nb-bars .r span:last-child { text-align: right; font-family: 'Playfair Display', Georgia, serif; font-weight: 800; }
@media (max-width: 480px) { .nb-bars .r { grid-template-columns: 90px 1fr 48px; font-size: 0.72rem; } }

/* ---------- 13. Spiral binding ---------- */
.nb-spiral { position: absolute; left: 6px; top: 0; bottom: 0; width: 22px; z-index: 4; display: flex; flex-direction: column; justify-content: space-evenly; pointer-events: none; }
.nb-spiral i { display: block; width: 22px; height: 9px; border-radius: 999px; background: linear-gradient(180deg, #d9d7cf, #8e8c85); box-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.7); position: relative; }
.nb-spiral i::before { content: ""; position: absolute; left: 4px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #111110; opacity: 0.55; }
#study-material-grid > button { padding-left: 0; }
#study-material-grid > button > div.absolute.flex { padding-left: 2.4rem !important; }
#study-material-grid > button .nb-ring { left: 36px; }

/* ---------- 14. Highlighter ---------- */
.nb-hl { position: relative; white-space: nowrap; }
.nb-hl::before { content: ""; position: absolute; left: -3px; right: -3px; top: 12%; bottom: 6%; background: rgba(245,197,66,0.55); border-radius: 3px; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.nb-hl.is-in::before { transform: scaleX(1); }

/* ---------- 15. Exam countdown poster ---------- */
.nb-exam { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 20px; margin: 0 0 18px; border-radius: 18px; background: #111110; color: #fff; position: relative; overflow: hidden; }
.nb-exam::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); }
.nb-exam .n { font: italic 800 3.2rem/1 'Playfair Display', Georgia, serif; color: #f5c542; min-width: 2ch; text-align: center; }
.nb-exam b { display: block; font: 600 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.nb-exam p { margin: 0; font: 700 1.05rem/1.2 'Playfair Display', Georgia, serif; }
.nb-exam small { display: block; margin-top: 4px; font: 500 0.76rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(255,255,255,0.6); }
.nb-exam input { font: 600 0.78rem/1 var(--font-ui, Inter, system-ui); padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; color-scheme: dark; }
@media (max-width: 520px) { .nb-exam { grid-template-columns: auto 1fr; } .nb-exam input { grid-column: 1 / -1; } }

/* ---------- 16. Subject mascots (empty states) ---------- */
.nb-empty svg.nb-mascot { width: 110px; stroke-width: 1.4; opacity: 0.9; }
.nb-empty svg.nb-mascot .blink { animation: nbBlink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nbBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* ---------- 17. PDF thumbnail frames ---------- */
.nb-pdf { margin-left: auto; flex: none; width: 34px; height: 30px; position: relative; }
.nb-pdf i { position: absolute; left: 0; top: 0; width: 22px; height: 28px; border: 1.3px solid #111110; border-radius: 2px 5px 2px 2px; background: #fff; }
.nb-pdf i:nth-child(2) { left: 4px; top: -3px; } .nb-pdf i:nth-child(3) { left: 8px; top: -6px; }
.nb-pdf i:nth-child(3)::after { content: "PDF"; position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 800 6px/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.08em; color: #dc2626; }
a[data-nb-cover] { display: flex; align-items: center; }

/* ---------- 18–19. Trophy cabinet + level-up ---------- */
.nb-cabinet { margin: 14px 0; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #f7f6f2, #ecebe6); border: 1px solid rgba(17,17,16,0.12); box-shadow: inset 0 0 0 4px #fff, inset 0 0 30px rgba(0,0,0,0.06); }
.nb-cabinet h5 { margin: 0 0 10px; font: 600 0.64rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-cabinet .shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-bottom: 8px; border-bottom: 4px solid #a37a52; }
.nb-cabinet .tr { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 0.58rem/1.1 var(--font-ui, Inter, system-ui); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: rgba(17,17,16,0.7); }
.nb-cabinet .tr .nb-pin { font-size: 0.55rem !important; padding: 4px 7px 4px 5px !important; }
.nb-cabinet .tr.lock { opacity: 0.35; filter: grayscale(1); } .nb-cabinet .tr.lock .nb-pin { background: #777 !important; }
.nb-levelup { position: absolute; left: 50%; top: 18px; transform: translateX(-50%) rotate(-3deg); z-index: 9; padding: 8px 18px; background: #f5c542; color: #111110; font: 800 0.72rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); animation: nbLvl 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes nbLvl { from { transform: translateX(-50%) rotate(-3deg) scale(0); } }

/* ---------- 20. Donation jar ---------- */
.nb-jar { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px auto 26px; max-width: 420px; padding: 14px 18px; border: 1px solid rgba(17,17,16,0.1); border-radius: 18px; background: #fff; }
.nb-jar svg { width: 64px; height: 80px; flex: none; overflow: visible; }
.nb-jar .fill { transition: transform 1.4s cubic-bezier(0.22,1,0.36,1); transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.nb-jar.is-in .fill { transform: scaleY(var(--f, 0.5)); }
.nb-jar b { display: block; font: 800 1.7rem/1 'Playfair Display', Georgia, serif; } .nb-jar small { font: 500 0.74rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); display: block; margin-top: 4px; }

/* ---------- 21. Campus wall ---------- */
.nb-wall { margin: 10px auto 0; max-width: 720px; padding: 18px 16px 14px; background: repeating-linear-gradient(0deg, #efece4 0 22px, #e6e2d8 22px 23px), #efece4; border-radius: 14px; border: 1px solid rgba(17,17,16,0.1); }
.nb-wall h5 { margin: 0 0 10px; text-align: center; font: 600 0.64rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-wall .m { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nb-wall img { width: 38px; height: 38px; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15); transform: rotate(var(--r, 0deg)); transition: transform 0.3s; cursor: default; }
.nb-wall img:hover { transform: rotate(0) scale(1.25); z-index: 2; }

/* ---------- 22. AI answer paper style (disabled for clean chat look) ---------- */

/* ---------- 24. Footer last page ---------- */
.nb-theend { text-align: center; padding: 24px 16px 8px; }
.nb-theend b { display: block; font: italic 700 1.1rem/1 'Playfair Display', Georgia, serif; letter-spacing: 0.3em; color: rgba(255,255,255,0.8); }
.nb-theend small { display: block; margin-top: 10px; font: 500 0.72rem/1.5 var(--font-ui, Inter, system-ui); color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }
.nb-theend i { display: block; width: 60px; height: 1px; margin: 12px auto; background: rgba(255,255,255,0.25); }

/* ---------- 25. Section tabs (sticky side) ---------- */
.nb-tabs { display: none !important; }

/* ---------- 26. Scroll bookmark ---------- */
.nb-bookmark { position: fixed; left: 14px; top: 0; z-index: 46; width: 14px; height: 54px; background: #dc2626; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform: none; pointer-events: none; box-shadow: 0 4px 10px -4px rgba(220,38,38,0.6); }
@media (max-width: 1100px) { .nb-bookmark { left: 6px; width: 10px; height: 40px; transform: translateY(calc(var(--p, 0) * (100vh - 40px))); } }

@media (prefers-reduced-motion: reduce) { .nb-tree .ln, .nb-campus * , .nb-levelup { animation: none !important; stroke-dashoffset: 0 !important; } .nb-tree .nd, .nb-hl::before { transform: none !important; } }

/* override premium.css tile-icon sizing/colour so the illustrations render at full size */
section button[id^="freeResource"] .nb-fr svg, #pgComingSoonBtn .nb-fr svg, [id^="freeResource"] .nb-fr svg { width: 100% !important; height: 100% !important; color: #111110 !important; stroke-width: 1.5 !important; transform: none !important; }
section button[id^="freeResource"]:hover .nb-fr svg, #pgComingSoonBtn:hover .nb-fr svg { color: #111110 !important; }
[id^="freeResource"] .nb-fr svg [stroke], #pgComingSoonBtn .nb-fr svg [stroke] { stroke: #111110 !important; }
[id^="freeResource"] .nb-fr svg .tint, #pgComingSoonBtn .nb-fr svg .tint { stroke: none !important; }