/* ==========================================================================
   NEXBOOK — premium-v3.css  (illustration & graphics layer, after premium-v2)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

/* ---------- 0. Custom arrow cursor (rounded pointer, blue on links) ---------- */
.nb-cur { display: none !important; }
@media (hover: hover) and (pointer: fine) {
    html, body, html.nb-cursor, html.nb-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5.2 3.4c-1.1-.5-2.3.7-1.8 1.8l7.6 18.9c.5 1.2 2.2 1.1 2.6-.1l2.1-6.6a2 2 0 0 1 1.3-1.3l6.6-2.1c1.2-.4 1.3-2.1.1-2.6z' fill='%23222' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto !important; }
    a, button, [role="button"], .cursor-pointer, label, summary, select, .course-major-item, .course-card, .subject-item, .card-apple-platform, .glass-card, .freebook-action-btn, .study-chip, .nav-link, .nav-cta,
    html.nb-cursor a, html.nb-cursor button, html.nb-cursor [role="button"], html.nb-cursor .cursor-pointer, html.nb-cursor label { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 28 28'%3E%3Cpath d='M5.2 3.4c-1.1-.5-2.3.7-1.8 1.8l7.6 18.9c.5 1.2 2.2 1.1 2.6-.1l2.1-6.6a2 2 0 0 1 1.3-1.3l6.6-2.1c1.2-.4 1.3-2.1.1-2.6z' fill='%232563eb' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer !important; }
    input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable="true"], html.nb-cursor input, html.nb-cursor textarea, html.nb-cursor [contenteditable] { cursor: text !important; }
    input[type="range"] { cursor: grab !important; }
    [disabled], .cursor-not-allowed { cursor: not-allowed !important; }
}

/* ---------- 1. Splash — logo book-flip ---------- */
#nb-splash { position: fixed; inset: 0; z-index: 2147483600; background: #fbfbfa; display: grid; place-items: center; transition: opacity 0.45s ease, visibility 0.45s; }
#nb-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
#nb-splash { animation: nbSplashOut 0.45s ease 2.2s forwards; }
@keyframes nbSplashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
[data-nb-cover] > svg:first-child { display: none; }
a[data-nb-cover] { min-height: 62px; }
#nb-splash svg { width: 72px; height: 72px; overflow: visible; }
#nb-splash .pg { transform-origin: 50% 50%; transform-box: fill-box; animation: nbFlip 0.8s cubic-bezier(0.65,0,0.35,1) infinite; fill: #fff; stroke: #111110; stroke-width: 1.6; }
#nb-splash .pg:nth-child(2) { animation-delay: 0.13s; } #nb-splash .pg:nth-child(3) { animation-delay: 0.26s; }
@keyframes nbFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(-180deg); } 100% { transform: rotateY(-180deg); } }
#nb-splash b { position: absolute; bottom: 48px; font: 800 0.95rem/1 'Playfair Display', Georgia, serif; letter-spacing: 0.12em; color: #111110; }
html.nb-no-splash #nb-splash { display: none; }

/* ---------- 2. 35K+ social proof ---------- */
.nb-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid rgba(17,17,16,0.1); backdrop-filter: blur(10px); font: 500 0.82rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.72); }
.nb-proof .nb-avs { display: flex; } .nb-proof .nb-avs img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; } .nb-proof .nb-avs img:first-child { margin-left: 0; }
.nb-proof b { color: #111110; font-weight: 700; }
.nb-proof i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
html:not(.nb-no-motion) .nb-proof { animation: nbRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
.f-brand .nb-proof { margin-top: 14px; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.7); } .f-brand .nb-proof b { color: #fff; }

/* ---------- 3. Hand-drawn note + arrow near "Sell Your Book" ---------- */
.nb-note { position: absolute; pointer-events: none; font: 600 1.35rem/1.1 'Caveat', cursive; color: #111110; transform: rotate(-6deg); white-space: nowrap; }
.nb-note svg { position: absolute; width: 54px; height: 40px; stroke: #111110; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#top .flex.flex-col { position: relative; overflow: visible !important; }
#top .nb-note { left: calc(50% + 226px); top: 4px; z-index: 5; transform: rotate(5deg); }
#top .nb-note svg { left: -58px; top: -4px; transform: scaleX(-1) rotate(-70deg); }
.nb-note path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: nbDraw 1.1s ease-out 1.1s forwards; }
@keyframes nbDraw { to { stroke-dashoffset: 0; } }
@media (max-width: 767px) { #top .nb-note { position: relative; right: auto; top: auto; display: block; transform: rotate(-3deg); margin: 6px auto 0; font-size: 1.2rem; } #top .nb-note svg { display: none; } }
@media (min-width: 768px) and (max-width: 1180px) { #top .nb-note { left: auto; right: 0; top: -62px; transform: rotate(-5deg); } #top .nb-note svg { left: 40%; top: 100%; transform: rotate(10deg); } }

/* ---------- 4. Torn-paper section dividers ---------- */
section.bg-gray-50::before, section.bg-white::before { display: none; }
.nb-tear { position: absolute; left: 0; right: 0; top: -1px; height: 26px; width: 100%; z-index: 1; pointer-events: none; display: block; }
.nb-tear svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767px) { .nb-tear { height: 16px; } }

/* ---------- 5. Washi-tape eyebrow labels ---------- */
.section-eyebrow { position: relative; display: inline-block !important; padding: 7px 18px !important; transform: rotate(-2deg); background: rgba(245,197,66,0.28) !important; color: #111110 !important; border-radius: 2px !important; border: 0 !important; letter-spacing: 0.18em !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06); backdrop-filter: blur(2px); }
.section-eyebrow::before, .section-eyebrow::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; background: inherit; }
.section-eyebrow::before { left: -6px; clip-path: polygon(100% 0, 0 18%, 100% 32%, 0 50%, 100% 66%, 0 84%, 100% 100%); }
.section-eyebrow::after { right: -6px; clip-path: polygon(0 0, 100% 16%, 0 34%, 100% 50%, 0 68%, 100% 84%, 0 100%); }
#academy-x .section-eyebrow { background: rgba(37,99,235,0.16) !important; } #study-material .section-eyebrow { background: rgba(4,120,87,0.16) !important; } #free-books .section-eyebrow { background: rgba(194,65,12,0.16) !important; }

/* ---------- 6. Marginalia doodles on section h2 ---------- */
.nb-h2 { position: relative; display: inline-block; }
.nb-h2 .nb-squig { position: absolute; left: 4%; right: 4%; bottom: -10px; height: 12px; width: 92%; }
.nb-h2 .nb-squig path { stroke: #f5c542; stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.nb-h2.is-in .nb-squig path { animation: nbDraw600 1s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }
@keyframes nbDraw600 { to { stroke-dashoffset: 0; } }
.nb-h2 .nb-star { position: absolute; top: -16px; left: -30px; width: 26px; height: 26px; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-12deg) scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.6s; }
.nb-h2.is-in .nb-star { transform: rotate(-12deg) scale(1); }
.nb-h2 .nb-star--r { left: auto; right: -34px; top: auto; bottom: -4px; transform: rotate(14deg) scale(0); } .nb-h2.is-in .nb-star--r { transform: rotate(14deg) scale(1); }
@media (max-width: 767px) { .nb-h2 .nb-star { left: -22px; width: 20px; height: 20px; } .nb-h2 .nb-star--r { right: -24px; } }

/* ---------- 7. Shelf land animation ---------- */
.course-major-item .nb-spine { opacity: 0; transform: translateY(-90px); }
.course-major-item.is-landed .nb-spine { animation: nbLand 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.course-major-item.is-landed .nb-spine:nth-child(1) { animation-delay: 0s; } .course-major-item.is-landed .nb-spine:nth-child(2) { animation-delay: 0.08s; } .course-major-item.is-landed .nb-spine:nth-child(3) { animation-delay: 0.16s; } .course-major-item.is-landed .nb-spine:nth-child(4) { animation-delay: 0.24s; } .course-major-item.is-landed .nb-spine:nth-child(5) { animation-delay: 0.32s; }
@keyframes nbLand { 0% { opacity: 0; transform: translateY(-90px); } 60% { opacity: 1; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.course-major-item.is-landed .nb-spine:nth-child(5) { animation-name: nbLand5; }
@keyframes nbLand5 { 0% { opacity: 0; transform: translateY(-90px) rotate(0); } 60% { opacity: 1; transform: translateY(6px) rotate(-12deg); } 100% { opacity: 1; transform: rotate(-9deg) translateX(4px); } }
html.nb-no-motion .course-major-item .nb-spine { opacity: 1; transform: none; animation: none; }

/* ---------- 8. Open-book modal header ---------- */
.nb-openbook { display: flex; justify-content: center; margin: -8px 0 14px; }
.nb-openbook svg { width: min(360px, 100%); height: auto; }
.nb-openbook text { font-family: 'Playfair Display', Georgia, serif; fill: #111110; }

/* ---------- 9–11. Book card: condition drawings, price tag, campus pin ---------- */
.nb-cond svg { width: 22px !important; height: 18px !important; stroke-width: 1.4 !important; }
.nb-cond { padding: 4px 10px 4px 7px !important; background: #f4f3ef !important; }
.nb-price { position: relative; display: inline-flex !important; align-items: center; gap: 10px; margin-top: 18px !important; padding: 8px 16px 8px 30px; border: 1.5px solid #111110; border-radius: 6px 14px 14px 6px; font-size: 1.9rem !important; line-height: 1 !important; background: #fff; }
.nb-price::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #111110; background: #fbfbfa; transform: translateY(-50%); }
.nb-price::after { content: ""; position: absolute; left: -18px; top: 14%; width: 22px; height: 22px; border: 1.5px solid #111110; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; transform: rotate(-20deg); opacity: 0.6; }
.nb-price small { font: 600 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.12em; color: rgba(17,17,16,0.55); text-transform: uppercase; }
.nb-meet { display: flex; align-items: center; gap: 7px; margin-top: 10px; font: 500 0.78rem/1.2 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.62); }
.nb-meet svg { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 14. Certificate (AcademyX) ---------- */
.nb-cert { display: inline-block; vertical-align: middle; width: 46px; height: 34px; margin: 0 8px 0 2px; }
.nb-cert .paper { transform-origin: 0 50%; transform: scaleX(1); }
.nb-cert .lines { opacity: 1; }

/* ---------- 15. Learning path (above platforms) ---------- */
.nb-path { max-width: 640px; margin: -4px auto 26px; padding: 0 10px; }
.nb-path svg { width: 100%; height: auto; display: block; overflow: visible; }
.nb-path .rail { stroke: #111110; stroke-width: 1.6; stroke-dasharray: 5 6; fill: none; opacity: 0.45; }
.nb-path .draw { stroke-dasharray: 800; stroke-dashoffset: 800; } .nb-path.is-in .draw { animation: nbDraw800 1.4s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nbDraw800 { to { stroke-dashoffset: 0; } }
.nb-path .ms { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.nb-path.is-in .ms:nth-of-type(1) { transform: scale(1); transition-delay: 0.3s; } .nb-path.is-in .ms:nth-of-type(2) { transform: scale(1); transition-delay: 0.75s; } .nb-path.is-in .ms:nth-of-type(3) { transform: scale(1); transition-delay: 1.2s; }
.nb-path text { font: 600 11px/1 var(--font-ui, Inter, system-ui); fill: #111110; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- 16. Globe with pins (universities) ---------- */
.nb-globe { display: flex; justify-content: center; margin: -6px 0 18px; }
.nb-globe svg { width: 150px; height: 150px; overflow: visible; }
.nb-globe .mer { transform-box: fill-box; transform-origin: center; animation: nbSpin 18s linear infinite; }
@keyframes nbSpin { to { transform: rotateY(360deg); } }
.nb-globe .pin { transform-box: fill-box; transform-origin: center bottom; animation: nbPin 2.4s ease-in-out infinite; }
.nb-globe .pin:nth-of-type(2) { animation-delay: -0.8s; } .nb-globe .pin:nth-of-type(3) { animation-delay: -1.6s; }
html.nb-no-motion .nb-globe .mer, html.nb-no-motion .nb-globe .pin { animation: none; }

/* ---------- 17. Provider logo strip ---------- */
.nb-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 36px; padding: 18px 12px; margin: 0 auto 30px; max-width: 980px; border-top: 1px solid rgba(17,17,16,0.08); border-bottom: 1px solid rgba(17,17,16,0.08); }
.nb-logos span { font: 600 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.45); width: 100%; text-align: center; margin-bottom: 4px; }
.nb-logos img { height: 28px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.55; transition: filter 0.35s, opacity 0.35s, transform 0.35s; }
.nb-logos img:hover { filter: none; opacity: 1; transform: translateY(-2px); }

/* ---------- 18. Subject cover art (study flow buttons) ---------- */
[data-nb-cover] { position: relative; overflow: hidden; padding-left: 72px !important; min-height: 62px; }
[data-nb-cover]::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 46px; border-radius: 4px 8px 8px 4px; background-color: var(--cov, #2563eb); background-image: var(--pat); background-size: var(--pat-size, 8px 8px); box-shadow: inset 3px 0 0 rgba(0,0,0,0.22), 0 4px 10px -4px rgba(0,0,0,0.4); }
[data-nb-cover]::after { content: attr(data-nb-initial); position: absolute; left: 10px; top: 8px; width: 46px; bottom: 8px; display: grid; place-items: center; font: 800 1.1rem/1 'Playfair Display', Georgia, serif; color: rgba(255,255,255,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.flow-btn[data-nb-cover="grid"]   { --cov: #2563eb; --pat: linear-gradient(rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px); }
.flow-btn[data-nb-cover="waves"]  { --cov: #0e7490; --pat: repeating-radial-gradient(circle at 0 100%, transparent 0 6px, rgba(255,255,255,0.22) 6px 7px); --pat-size: 18px 18px; }
.flow-btn[data-nb-cover="leaf"]   { --cov: #15803d; --pat: radial-gradient(rgba(255,255,255,0.3) 1.5px, transparent 1.6px); --pat-size: 9px 9px; }
.flow-btn[data-nb-cover="ledger"] { --cov: #b45309; --pat: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px); --pat-size: 100% 7px; }
.flow-btn[data-nb-cover="code"]   { --cov: #6d28d9; --pat: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 3px, transparent 3px 6px, rgba(255,255,255,0.25) 6px 8px, transparent 8px 14px); --pat-size: 14px 4px; }
.flow-btn[data-nb-cover="ink"]    { --cov: #1f2937; --pat: repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 9px); --pat-size: 12px 12px; }
.flow-btn[data-nb-cover="rose"]   { --cov: #be123c; --pat: radial-gradient(circle, rgba(255,255,255,0.28) 2px, transparent 2.5px); --pat-size: 12px 12px; }

/* ---------- 19. Verified stamp ---------- */
.nb-stamp { position: absolute; top: 42px; right: 14px; z-index: 3; padding: 5px 9px; border: 2px solid #dc2626; border-radius: 6px; color: #dc2626; font: 800 0.62rem/1.1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); opacity: 0.92; mix-blend-mode: multiply; background: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1px rgba(220,38,38,0.5); -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 92%, transparent 100%); }
.nb-stamp small { display: block; font-size: 0.52rem; letter-spacing: 0.2em; margin-top: 2px; }

/* ---------- 20. Progress ring on study tiles ---------- */
.nb-ring { position: absolute; left: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; }
.nb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nb-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.nb-ring .bg { stroke: rgba(255,255,255,0.3); } .nb-ring .fg { stroke: #fff; stroke-dasharray: 113; stroke-dashoffset: calc(113 - 113 * var(--p, 0)); transition: stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1); }
.nb-ring b { font: 700 0.72rem/1 var(--font-ui, Inter, system-ui); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.nb-ring[data-tip]::after { content: attr(data-tip); position: absolute; left: 50px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 0.66rem/1 var(--font-ui, Inter, system-ui); color: #fff; background: rgba(0,0,0,0.5); padding: 5px 8px; border-radius: 6px; backdrop-filter: blur(4px); }

/* ---------- 21. Paper grain + dog-ear on study tiles ---------- */
#study-material-grid > button { background-color: #fbfbfa; }
#study-material-grid > button > .nb-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay; 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"); }
#study-material-grid > button > .nb-ear { position: absolute; right: 0; bottom: 0; z-index: 3; width: 34px; height: 34px; pointer-events: none; background: linear-gradient(225deg, #fbfbfa 0 50%, rgba(0,0,0,0.28) 50% 52%, rgba(255,255,255,0.55) 52%); clip-path: polygon(100% 0, 100% 100%, 0 100%); filter: drop-shadow(-2px -2px 3px rgba(0,0,0,0.25)); border-radius: 0 0 14px 0; }

/* ---------- 26. Enamel pin rank badges ---------- */
.nb-pin { position: relative; display: inline-flex !important; align-items: center; gap: 6px; padding: 5px 12px 5px 8px !important; border-radius: 999px !important; color: #fff !important; background: linear-gradient(180deg, var(--pin-a, #f5c542), var(--pin-b, #b8860b)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.25), 0 0 0 2px #fff, 0 0 0 3.5px #c9c6bd, 0 4px 10px -4px rgba(0,0,0,0.5) !important; text-shadow: 0 1px 1px rgba(0,0,0,0.3); font-weight: 700 !important; overflow: hidden; }
.nb-pin::before { content: ""; position: absolute; left: 8%; top: 2px; width: 60%; height: 40%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); pointer-events: none; }
.nb-pin svg { width: 13px; height: 13px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.nb-pin--gold { --pin-a: #ffd95e; --pin-b: #b8860b; } .nb-pin--silver { --pin-a: #e6e8ee; --pin-b: #8d93a1; } .nb-pin--bronze { --pin-a: #e3a46b; --pin-b: #8c4f1f; } .nb-pin--ink { --pin-a: #3a3a38; --pin-b: #111110; }
[id^="top-3-section-NEXBOOK"] p.font-playfair.font-black { display: inline-flex; }

/* ---------- 27. Streak flame ---------- */
.nb-flame { display: inline-flex !important; align-items: center; gap: 4px; background: #fff !important; color: #c2410c !important; border: 1px solid rgba(194,65,12,0.35); font-weight: 700 !important; }
.nb-flame svg { width: calc(12px + var(--lvl, 1) * 2px); height: calc(14px + var(--lvl, 1) * 2px); stroke: #c2410c; fill: rgba(194,65,12,0.18); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: nbFlick 1.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes nbFlick { from { transform: scaleY(1) rotate(-2deg); } to { transform: scaleY(1.08) rotate(2deg); } }
html.nb-no-motion .nb-flame svg { animation: none; }

/* ---------- 28. Donation timeline (profile modal) ---------- */
#modal-history-list-NEXBOOK { position: relative; padding-left: 26px !important; }
#modal-history-list-NEXBOOK::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(#111110, rgba(17,17,16,0.1)); border-radius: 2px; }
#modal-history-list-NEXBOOK .history-li-NEXBOOK { position: relative; background: #fff !important; border: 1px solid rgba(17,17,16,0.1); margin-bottom: 8px; }
#modal-history-list-NEXBOOK .history-li-NEXBOOK::before { content: ""; position: absolute; left: -23px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 3px; background: #111110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19a2 2 0 0 1 2-2h14'/%3E%3C/svg%3E") center/9px no-repeat; box-shadow: 0 0 0 3px #fff; }

/* ---------- 31. Toast backpack ---------- */
.nb-toast-bag { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; }
.nb-toast-bag .zip { stroke-dasharray: 14; stroke-dashoffset: 14; animation: nbZip 0.6s ease-out 0.15s forwards; }
@keyframes nbZip { to { stroke-dashoffset: 0; } }

/* ---------- 33. Ink-dot cursor trail (hero only, desktop) ---------- */
.nb-trail { position: fixed; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #111110; pointer-events: none; z-index: 60; opacity: 0; animation: nbTrail 0.55s ease-out forwards; }
@keyframes nbTrail { 0% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); } }

/* ---------- 34. Install modal phone ---------- */
.nb-phone { display: block; width: 120px; height: auto; margin: -6px auto 12px; overflow: visible; }
.nb-phone .icon { transform-box: fill-box; transform-origin: center; animation: nbDrop 1.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }
@keyframes nbDrop { 0% { transform: translateY(-40px) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
#installAppModal .p-8 > img { display: none; }

/* ---------- 35. Share card button ---------- */
.nb-share { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #111110; background: #111110; color: #fff; font: 600 0.82rem/1 var(--font-ui, Inter, system-ui); cursor: pointer; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.nb-share:hover { transform: translateY(-2px); }
.nb-share svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 36. Dark-mode hook (future): sunrise skyline ---------- */
html.nb-dark .nb-skyline #nbSky stop:first-child { stop-color: #ffd9a8; } html.nb-dark .nb-skyline #nbSky stop:last-child { stop-color: #ffb36b; }
html.nb-dark .nb-skyline .win { fill: #fff7e0; animation: none; opacity: 0.35; }
html.nb-dark #study-material-grid > button > .nb-grain { mix-blend-mode: screen; opacity: 0.08; }

@media (prefers-reduced-motion: reduce) { .nb-note path, .nb-h2 .nb-squig path, .nb-path .draw, .nb-globe .mer, .nb-globe .pin, .nb-flame svg, .nb-phone .icon, #nb-splash .pg { animation: none !important; stroke-dashoffset: 0 !important; } .nb-h2 .nb-star, .nb-path .ms { transform: scale(1) !important; } }