/* ==========================================================================
   NEXBOOK — premium-v6.css · Synapse projector, navbar life, mobile bar, claim,
   footer, Thinkly inner, study desk, AcademyX, community, coach marks v2
   ========================================================================== */

/* ---------- 1. Synapse → projector screen ---------- */
.synapse-ai-promo { position: relative; }
.nb-proj { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; width: min(900px, 100%); height: 14px; border-radius: 7px; background: linear-gradient(#3a3a3e, #17171a); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.7); z-index: 5; }
.nb-proj::before, .nb-proj::after { content: ""; position: absolute; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #9a9aa0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6); } .nb-proj::before { left: 16px; } .nb-proj::after { right: 16px; }
.nb-cord { position: absolute; right: 6%; top: 100%; width: 2px; height: 0; background: #c9c6bd; z-index: 5; transform-origin: top center; }
.nb-cord::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 16px; border-radius: 6px; background: #e2b64b; transform: translateX(-50%); box-shadow: 0 3px 6px rgba(0,0,0,0.5); }
.synapse-ai-promo.is-roll .synapse-card-shell { clip-path: inset(0 0 100% 0 round 3rem); animation: nbRoll 1.3s cubic-bezier(0.22,1,0.36,1) 0.25s forwards; }
.synapse-ai-promo.is-roll .nb-cord { animation: nbCordDrop 1.3s cubic-bezier(0.22,1,0.36,1) forwards, nbCordSwing 1.8s ease-in-out 1.3s 2 alternate; }
@keyframes nbRoll { to { clip-path: inset(0 0 0 0 round 3rem); } } @keyframes nbCordDrop { to { height: 90px; } } @keyframes nbCordSwing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.synapse-card-shell::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; background: conic-gradient(from var(--sw, 0deg), transparent 0 70%, rgba(125,211,252,0.9) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; }
.nb-reflect { position: relative; height: 80px; margin: 6px auto 0; width: min(860px, 100%); overflow: hidden; pointer-events: none; opacity: 0.12; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
.nb-reflect .nb-mirror { transform: scaleY(-1); filter: blur(2px); width: 100%; height: 320px; border-radius: 3rem; background: #16171b; }
.synapse-card-shell.nb-chalk, .synapse-card-shell.nb-chalk * { 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='M4 24l4-12 8 0 6 6 0 8z' fill='%23fff' stroke='%23222' stroke-width='1.2'/%3E%3Cpath d='M8 12l4-8 6 4-2 4' fill='%23e8ecf6' stroke='%23222' stroke-width='1.2'/%3E%3C/svg%3E") 6 6, auto !important; }
.nb-chalkdust { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(232,236,246,0.8); pointer-events: none; z-index: 3; animation: nbDust 0.9s ease-out forwards; }
@keyframes nbDust { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); } }
.nb-syn .room .react { transform-box: fill-box; transform-origin: bottom center; opacity: 0; animation: nbReact 9s ease-in-out infinite; } .nb-syn .room .react.r2 { animation-delay: 1.8s; } .nb-syn .room .react.r3 { animation-delay: 5.2s; }
@keyframes nbReact { 0%,18% { opacity: 0; transform: translateY(6px) scale(0.6); } 22% { opacity: 1; transform: translateY(-4px) scale(1.1); } 34% { opacity: 1; transform: translateY(-8px) scale(1); } 40%,100% { opacity: 0; transform: translateY(-14px); } }
.nb-syn .room .orbit { transform-box: fill-box; transform-origin: center; animation: nbiSpin 24s linear infinite; } .nb-syn .room .orbit g { transform-box: fill-box; transform-origin: center; animation: nbiSpin 24s linear infinite reverse; }
.nb-syn .room:hover .orbit, .nb-syn .room:hover .orbit g { animation-play-state: paused; }
.nb-syn .room .orbit g:hover circle { r: 13; } .nb-syn .room .orbit g circle { transition: r 0.3s; fill: #1b1f2a; stroke: #7dd3fc; }
.nb-voice { cursor: pointer; } .nb-voice.playing .bars i { animation-duration: 0.35s; } .nb-voice .cap { display: none; margin-left: auto; font: 500 0.74rem/1.3 'Caveat', cursive; letter-spacing: 0; text-transform: none; color: #e8ecf6; max-width: 46%; } .nb-voice.playing .cap { display: block; }
.nb-syn .room .welcome { opacity: 0; transition: opacity 0.4s; } .synapse-card-shell.nb-hi .room .welcome { opacity: 1; } .synapse-card-shell.nb-hi .room .hw, .synapse-card-shell.nb-hi .room .hw1, .synapse-card-shell.nb-hi .room .hw2, .synapse-card-shell.nb-hi .room .hw3 { opacity: 0 !important; }

/* ---------- 2. Navbar life ---------- */
#navbarI { transition: height 0.45s cubic-bezier(0.22,1,0.36,1), padding 0.45s cubic-bezier(0.22,1,0.36,1); }
#navbarI.nb-shrink > div { transform: scale(0.94); transform-origin: center; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.nb-topline { position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 9999; background: var(--course, #111110); transition: width 0.2s linear, background 0.6s; pointer-events: none; }
#navbarI .nb-logo-book { display: inline-block; transform-origin: left center; }
#navbarI .nb-logo-book svg, #navbarI a[href="#top"] svg, #navbarI a[href="/"] svg { transform-origin: 50% 50%; }
#navbarI .nb-flutter { animation: nbFlutter 0.7s ease; } @keyframes nbFlutter { 20% { transform: rotateY(-30deg) skewY(-4deg); } 45% { transform: rotateY(20deg) skewY(3deg); } 70% { transform: rotateY(-8deg); } }
#navbarI .nb-whoosh { animation: nbWhoosh 0.6s cubic-bezier(0.34,1.56,0.64,1); } @keyframes nbWhoosh { 40% { transform: translateY(-8px) scale(1.08); } }
.nb-prev { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px) scale(0.96); width: 230px; padding: 12px 12px 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(17,17,16,0.1); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.22,1,0.36,1); z-index: 60; text-align: left; }
.nb-prev.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.nb-prev svg { width: 100%; height: 70px; display: block; overflow: visible; } .nb-prev b { display: block; margin-top: 8px; font: 700 0.82rem/1.2 'Playfair Display', Georgia, serif; color: #111110; } .nb-prev small { display: block; font: 500 0.68rem/1.3 Inter, system-ui; color: rgba(17,17,16,0.6); }
.nb-prev .sp { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-box: fill-box; transform-origin: bottom; } .nb-prev.is-on .sp { transform: translateY(-3px); }
#navbarI nav.hidden > a, #navbarI nav.hidden > div { position: relative; }
.nb-greet { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(245,197,66,0.25); font: 600 1.05rem/1 'Caveat', cursive; color: #111110; max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width 0.6s cubic-bezier(0.22,1,0.36,1), padding 0.6s, opacity 0.4s; }
.nb-greet.is-min { max-width: 0; padding: 5px 0; opacity: 0; margin: 0; }
.nb-drawer { position: fixed; top: 64px; right: 16px; width: 320px; z-index: 9998; background: #fff; border: 1px solid rgba(17,17,16,0.1); border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.45); padding: 16px; transform: translateY(-12px) scale(0.98); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.nb-drawer.is-on { opacity: 1; pointer-events: auto; transform: none; }
.nb-drawer h5 { margin: 0 0 10px; font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-drawer .st { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-bottom: 12px; padding: 0 6px; border-bottom: 3px solid #8a6a48; }
.nb-drawer .st i { width: 18px; height: var(--h, 40px); border-radius: 2px 2px 1px 1px; background: var(--c, #2563eb); box-shadow: inset -3px 0 0 rgba(0,0,0,0.2); animation: nbLand 0.6s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: var(--d, 0s); }
.nb-drawer .row { display: flex; justify-content: space-between; align-items: center; font: 600 0.82rem/1.2 Inter, system-ui; padding: 6px 0; border-bottom: 1px dashed rgba(17,17,16,0.1); } .nb-drawer .row span:last-child { font-family: 'Playfair Display', Georgia, serif; }
.nb-drawer .tot { display: flex; justify-content: space-between; font: 800 1rem/1 'Playfair Display', Georgia, serif; padding: 10px 0 4px; }
.nb-drawer .empty { text-align: center; padding: 10px 0 14px; font: 600 1.1rem/1.2 'Caveat', cursive; color: rgba(17,17,16,0.6); }
.nb-drawer button { width: 100%; margin-top: 10px; padding: 11px; border-radius: 12px; background: #111110; color: #fff; border: 0; font: 700 0.82rem/1 Inter, system-ui; cursor: pointer; }
.nb-kbar { position: fixed; inset: 0; z-index: 2147483300; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(17,17,16,0.35); backdrop-filter: blur(6px); }
.nb-kbar.is-on { display: flex; }
.nb-kbar .box { width: min(620px, 92vw); background: #fbfbfa; border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); overflow: hidden; animation: nbRise 0.35s cubic-bezier(0.22,1,0.36,1); }
.nb-kbar input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid rgba(17,17,16,0.1); background: transparent; font: 500 1.05rem/1 Inter, system-ui; outline: none; }
.nb-kbar ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.nb-kbar li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font: 600 0.88rem/1.2 Inter, system-ui; } .nb-kbar li:hover, .nb-kbar li.is-on { background: rgba(17,17,16,0.06); }
.nb-kbar li .cov { width: 26px; height: 34px; border-radius: 3px 5px 5px 3px; background: var(--cov, #2563eb); flex: none; box-shadow: inset 3px 0 0 rgba(0,0,0,0.2); display: grid; place-items: center; color: #fff; font: 800 0.8rem/1 'Playfair Display', Georgia, serif; }
.nb-kbar li small { margin-left: auto; font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,16,0.5); }
.nb-kbar .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px 34px; color: rgba(17,17,16,0.6); font: 600 1.15rem/1.2 'Caveat', cursive; }
.nb-kbar .empty svg { width: 120px; height: 80px; stroke: #111110; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.nb-kbar .hint { padding: 8px 16px 12px; font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,16,0.45); display: flex; gap: 14px; }

/* ---------- 3. Mobile bottom bar ---------- */
@media (max-width: 767px) {
    .mobile-nav-container { width: calc(100% - 24px) !important; max-width: 420px !important; bottom: 12px !important; }
    .mobile-nav-bg { border-radius: 999px !important; background: rgba(255,255,255,0.82) !important; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.8) !important; }
    .mobile-nav-container.nb-compact { transform: translate(-50%, 0) scale(0.92) !important; } .mobile-nav-container.nb-compact #nex-button-mobile { transform: scale(1.18) translateY(-6px) !important; }
    .mobile-nav-container.nav-hidden { transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s !important; }
    .nb-blob { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; border-radius: 50%; background: rgba(17,17,16,0.08); transform: translate(-50%, -50%) scale(var(--s, 1)); transition: left 0.5s cubic-bezier(0.34,1.56,0.64,1), transform 0.3s; pointer-events: none; z-index: 1; opacity: 0; }
    .nb-blob.is-on { opacity: 1; }
    .mobile-nav-item { position: relative; z-index: 2; }
    .mobile-nav-item.nb-tap svg { animation: nbTapIcon 0.6s cubic-bezier(0.34,1.56,0.64,1); transform-origin: 50% 80%; } @keyframes nbTapIcon { 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(0.95) rotate(4deg); } }
    .mobile-nav-item[data-item="home"].nb-tap svg path { animation: nbDoor 0.6s ease; } @keyframes nbDoor { 50% { transform: scaleX(0.85); transform-origin: left; } }
    .mobile-nav-item .nb-mbadge { position: absolute; top: 10px; right: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font: 800 0.58rem/16px Inter, system-ui; text-align: center; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); z-index: 3; }
    .mobile-nav-item .nb-mbadge.is-on { transform: scale(1); }
    .nb-sheet { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 10000; background: #fff; border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; animation: nbRise 0.35s cubic-bezier(0.22,1,0.36,1); }
    .nb-sheet button { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(17,17,16,0.1); background: #fbfbfa; font: 700 0.82rem/1.2 Inter, system-ui; color: #111110; }
    .nb-sheet button svg { width: 22px; height: 22px; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- 4. Claim extras ---------- */
#free-books > .max-w-5xl > .bg-white\/50 { position: relative; background: #fbfbfa !important; backdrop-filter: none !important; border-radius: 6px 24px 24px 6px !important; }
#free-books > .max-w-5xl > .bg-white\/50::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 22px; background: repeating-linear-gradient(180deg, transparent 0 14px, #d9d7cf 14px 18px, transparent 18px 30px); border-right: 1px dashed rgba(17,17,16,0.25); border-radius: 6px 0 0 6px; pointer-events: none; }
#free-books > .max-w-5xl > .bg-white\/50::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; border-radius: inherit; 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"); }
.nb-xchg.is-dusk { background: linear-gradient(180deg, #ffd9b0, #fbe9dc 55%, #fbfbfa); } .nb-xchg .lampx .lt { opacity: 0; transition: opacity 0.6s; } .nb-xchg.is-dusk .lampx .lt { opacity: 1; }
.nb-xchg .bookFly:hover + .booktip, .nb-xchg .booktip.is-on { opacity: 1; }
.nb-xchg .booktip { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); padding: 6px 10px; border-radius: 10px; background: #111110; color: #fff; font: 600 0.7rem/1.2 Inter, system-ui; opacity: 0; pointer-events: none; transition: opacity 0.3s; white-space: nowrap; }
.freebook-action-btn .nb-char { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; opacity: 0.85; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .freebook-action-btn { position: relative; }
.freebook-action-btn:hover .nb-char { transform: translateY(-50%) scale(1.15) rotate(-4deg); }
.freebook-action-btn .nb-char svg { width: 100%; height: 100%; stroke: #111110; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-postcard { position: fixed; right: 18px; bottom: 110px; z-index: 10001; width: 300px; padding: 16px 16px 14px; background: #fff7e6; border: 1px solid #e8d9b0; border-radius: 6px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); transform: rotate(-2deg); animation: nbRise 0.5s cubic-bezier(0.22,1,0.36,1); font-family: Inter, system-ui; }
.nb-postcard .st { position: absolute; right: 12px; top: 10px; width: 46px; height: 54px; border: 2px solid #dc2626; border-radius: 3px; display: grid; place-items: center; font: 800 0.5rem/1.1 Inter, system-ui; letter-spacing: 0.12em; color: #dc2626; text-align: center; transform: rotate(8deg); }
.nb-postcard b { display: block; font: 600 1.35rem/1.1 'Caveat', cursive; color: #111110; margin-bottom: 6px; } .nb-postcard p { margin: 0; font: 500 0.78rem/1.4 Inter, system-ui; color: rgba(17,17,16,0.7); max-width: 200px; }
.nb-postcard .jr { margin-top: 10px; } .nb-postcard .jr svg { width: 100%; height: 56px; overflow: visible; } .nb-postcard .jr .rt { stroke-dasharray: 6 6; animation: nbDash 1.6s linear infinite; }
.nb-postcard .x { position: absolute; left: 8px; top: 6px; border: 0; background: none; font: 700 0.9rem/1 Inter, system-ui; color: rgba(17,17,16,0.5); cursor: pointer; }

/* ---------- 5. Footer ---------- */
.nb-skyline .win { cursor: pointer; } .nb-skyline .win.off { opacity: 0.15 !important; animation: none !important; } .nb-skyline .sil { pointer-events: none; }
.nb-hi-bubble { position: absolute; padding: 4px 8px; border-radius: 10px 10px 10px 2px; background: #fff; color: #111110; font: 600 0.9rem/1 'Caveat', cursive; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.4); animation: nbRise 0.3s ease, nbFadeOut 0.4s ease 1.4s forwards; pointer-events: none; z-index: 5; }
@keyframes nbFadeOut { to { opacity: 0; transform: translateY(-8px); } }
.nb-skywrap { position: relative; }
.nb-moon { position: absolute; right: 8%; top: 10px; width: 34px; height: 34px; cursor: pointer; z-index: 3; } .nb-moon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(255,244,200,0.8)); }
html.nb-night .nb-skyline #nbSky stop:first-child { stop-color: #0f172a; } html.nb-night .nb-skyline #nbSky stop:last-child { stop-color: #1e293b; } html.nb-night .nb-skyline rect[fill="#1b1b1a"] { fill: #0b0b0d; } html.nb-night .nb-skyline .win { filter: drop-shadow(0 0 3px #f5c542); }
html.nb-night .nb-footlamp .bulb { fill: #f5c542; } html.nb-night .nb-footlamp .glow { opacity: 1; }
html.nb-night .footer-premium { background: #070708 !important; }
.nb-goodnight { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font: 600 1.4rem/1 'Caveat', cursive; color: #fff7e0; opacity: 0; animation: nbRise 0.5s ease forwards, nbFadeOut 0.6s ease 2.2s forwards; pointer-events: none; }
.nb-news { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; flex-wrap: wrap; }
.nb-env { position: relative; width: min(240px, 100%); height: 56px; background: #fff; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.25); overflow: hidden; display: flex; align-items: center; }
.nb-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(135deg, #fbfbfa 50%, transparent 50%), linear-gradient(225deg, #fbfbfa 50%, transparent 50%); background-size: 50% 100%; background-repeat: no-repeat; background-position: left, right; opacity: 0.7; transform-origin: top; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.nb-env.sent::before { transform: rotateX(180deg); }
.nb-env input { flex: 1; height: 100%; border: 0; padding: 0 14px; background: transparent; font: 600 0.95rem/1 'Caveat', cursive; color: #111110; outline: none; position: relative; z-index: 1; }
.nb-env button { height: 100%; padding: 0 14px; white-space: nowrap; flex-shrink: 0; border: 0; background: #111110; color: #fff; font: 700 0.72rem/1 Inter, system-ui; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; }
.nb-news .pl { position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: 0; } .nb-news .pl.fly { animation: nbPlaneUp 1s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes nbPlaneUp { 0% { opacity: 1; transform: translate(0,0) rotate(-20deg); } 100% { opacity: 0; transform: translate(140px, -120px) rotate(-20deg) scale(0.6); } }
.nb-news small { font: 500 0.72rem/1.3 Inter, system-ui; color: rgba(255,255,255,0.5); }
.nb-totop { position: fixed; right: 18px; bottom: 120px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid rgba(17,17,16,0.12); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.4); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translateY(8px); }
.nb-totop.is-on { opacity: 1; pointer-events: auto; transform: none; } .nb-totop svg { width: 20px; height: 20px; stroke: #111110; fill: #fff; stroke-width: 1.5; stroke-linejoin: round; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.nb-totop.go svg { animation: nbPlaneUp 0.8s cubic-bezier(0.22,1,0.36,1); }
@media (max-width: 767px) { .nb-totop { bottom: 190px; right: 12px; } }
.nb-colophon { display: inline-flex; align-items: center; gap: 8px; } .nb-cup { width: 18px; height: 18px; position: relative; } .nb-cup svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.6); fill: none; stroke-width: 1.4; stroke-linecap: round; } .nb-cup .stm { animation: nbSteam 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; } .nb-cup .stm:nth-of-type(2) { animation-delay: -1.2s; }
@keyframes nbSteam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-6px); } }
.footer-premium a { position: relative; } .footer-premium a .nb-dd { position: absolute; left: calc(100% + 6px); top: 50%; width: 18px; height: 18px; transform: translateY(-50%) scale(0); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; } .footer-premium a:hover .nb-dd { transform: translateY(-50%) scale(1); }
.footer-premium a .nb-dd svg { width: 100%; height: 100%; stroke: #f5c542; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 6. Thinkly inner ---------- */
.nb-vorb { position: fixed; inset: 0; z-index: 2147483200; display: grid; place-items: center; background: rgba(251,251,250,0.9); backdrop-filter: blur(14px); animation: nbIntroIn 0.3s ease; }
.nb-vorb .o { position: relative; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0f2fe, #7dd3fc 55%, #0ea5e9); box-shadow: 0 40px 90px -30px rgba(14,165,233,0.7); animation: nbiBreathe 2.6s ease-in-out infinite; }
.nb-vorb .r { position: absolute; inset: -18px; border-radius: 50%; border: 2px solid rgba(14,165,233,0.45); animation: nbRing 1.8s ease-out infinite; } .nb-vorb .r:nth-child(2) { animation-delay: 0.6s; } .nb-vorb .r:nth-child(3) { animation-delay: 1.2s; }
@keyframes nbRing { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.nb-vorb.talk .o { animation-duration: 0.9s; } .nb-vorb.nod .o { animation: nbNod 0.6s ease; } @keyframes nbNod { 30% { transform: translateY(10px); } 60% { transform: translateY(-6px); } }
.nb-vorb p { position: absolute; bottom: 18vh; left: 0; right: 0; text-align: center; font: 600 1.5rem/1.2 'Caveat', cursive; color: #111110; }
.nb-vorb button { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(17,17,16,0.15); background: #fff; font: 700 1rem/1 Inter, system-ui; cursor: pointer; }
.emo-bot.st-think .emo-eye-group path { transform: translateY(-6px); } .emo-bot.st-think .emo-eye-group { animation: nbEyeUp 1.4s ease-in-out infinite alternate; } @keyframes nbEyeUp { to { transform: translate(4px, -3px); } }
.emo-bot.st-read .emo-eye-group { animation: nbEyeRead 1.6s ease-in-out infinite alternate; } @keyframes nbEyeRead { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.emo-bot.st-answer { animation: emo-minimal-bounce 1.2s ease-in-out infinite !important; }
.emo-bot .nb-scrib { position: absolute; right: -30px; top: -14px; width: 40px; height: 30px; opacity: 0; } .emo-bot.st-think .nb-scrib { opacity: 1; } .emo-bot .nb-scrib path { stroke: #111110; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: nbScrib 1.8s ease-in-out infinite; } @keyframes nbScrib { 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } }
#expandedChatOutput .ai-message { position: relative; padding-right: 40px !important; }
#expandedChatOutput .ai-message .nb-mgd { position: absolute; right: 8px; top: 10px; width: 28px; height: 28px; opacity: 0.55; } #expandedChatOutput .ai-message .nb-mgd svg { width: 100%; height: 100%; stroke: #111110; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-formula { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: #1b1f2a; color: #e8ecf6; font: 600 1rem/1.3 'Caveat', cursive; letter-spacing: 0.02em; }
.nb-formula button { margin-left: auto; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff; font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.1em; cursor: pointer; }
.nb-aiacts { display: flex; gap: 8px; margin-top: 8px; } .nb-aiacts button { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.15); background: #fff; font: 600 0.7rem/1 Inter, system-ui; letter-spacing: 0.06em; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .nb-aiacts svg { width: 12px; height: 12px; stroke: #111110; fill: none; stroke-width: 2; }
.nb-fcards { display: flex; gap: 10px; margin-top: 10px; perspective: 800px; flex-wrap: wrap; }
.nb-fcard { width: 150px; height: 96px; position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); cursor: pointer; animation: nbFcIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.nb-fcard:nth-child(2) { animation-delay: 0.12s; } .nb-fcard:nth-child(3) { animation-delay: 0.24s; } @keyframes nbFcIn { from { transform: translateY(20px) rotateX(-40deg); opacity: 0; } }
.nb-fcard.is-f { transform: rotateY(180deg); } .nb-fcard > div { position: absolute; inset: 0; border-radius: 12px; padding: 10px; backface-visibility: hidden; font: 600 0.72rem/1.3 Inter, system-ui; display: grid; place-items: center; text-align: center; } .nb-fcard .f { background: #fff7d6; border: 1px solid #e8d9b0; } .nb-fcard .b { background: #111110; color: #fff; transform: rotateY(180deg); }
.nb-report { border: 2px solid #111110; border-radius: 6px; padding: 12px 14px; margin: 8px 0; position: relative; background: #fff; } .nb-report::before { content: "REPORT CARD"; font: 800 0.6rem/1 Inter, system-ui; letter-spacing: 0.2em; color: rgba(17,17,16,0.5); } .nb-report .gr { position: absolute; right: 12px; top: 8px; width: 44px; height: 44px; border: 2.5px solid #dc2626; border-radius: 50%; display: grid; place-items: center; font: 800 1.2rem/1 'Playfair Display', Georgia, serif; color: #dc2626; transform: rotate(-12deg); } .nb-report .sig { font: 600 1.1rem/1 'Caveat', cursive; color: rgba(17,17,16,0.6); margin-top: 6px; display: block; }
#expandedChatOutput .ai-message.nb-stream { background-image: linear-gradient(90deg, transparent, rgba(125,211,252,0.18)), repeating-linear-gradient(0deg, #fff 0 27px, #e8eef8 27px 28px) !important; background-size: 30% 100%, 100% 100% !important; background-position: right, left !important; background-repeat: no-repeat !important; }
.nb-sendplane { position: absolute; width: 18px; height: 18px; pointer-events: none; animation: nbPlaneUp 0.8s cubic-bezier(0.22,1,0.36,1) forwards; z-index: 5; }
#thinklyHistoryContainer > * { position: relative; padding-left: 18px !important; border-left: 0 !important; } #thinklyHistoryContainer > *::before { content: ""; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 8px; background: var(--rb, #2563eb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); border-radius: 1px; }
.nb-suggest button svg { width: 40px !important; height: 40px !important; }
.nb-suggest .daily { grid-column: 1 / -1; font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.5); padding: 0 2px; }
.nb-empty-emo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 0; font: 600 1.3rem/1 'Caveat', cursive; color: rgba(17,17,16,0.7); }
.nb-empty-emo .e { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fdfbf6 0%, #faf5ec 46%, #f5eedf 78%, #f0e8d4 100%); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15); animation: nbiFloat 5s ease-in-out infinite; position: relative; }
.nb-empty-emo .e .sc { width: 66px; height: 30px; border-radius: 16px; background: #111110; display: grid; place-items: center; } .nb-empty-emo .e svg { width: 46px; height: 18px; } .nb-empty-emo .e path { stroke: #bffcff; stroke-width: 5; fill: none; stroke-linecap: round; }
.nb-empty-emo .e .pn { position: absolute; right: -26px; bottom: 10px; width: 36px; height: 36px; } .nb-empty-emo .e .pn path { stroke: #111110; stroke-width: 1.4; stroke-dasharray: 60; stroke-dashoffset: 60; animation: nbScrib 2.2s ease-in-out infinite; }
#expandedView.nb-has-messages .nb-empty-emo { display: none; }

/* ---------- 7. Buy Books modal ---------- */
#courseModalContent button.border-2 .nb-ci { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; } #courseModalContent button.border-2 .nb-ci svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nb-flip-back .note { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.08); font: 600 0.95rem/1.2 'Caveat', cursive; color: #fff7d6; }

/* ---------- 8. Study desk + directory shelf + exam poster ---------- */
.nb-desk { position: relative; max-width: 980px; margin: 0 auto 22px; border-radius: 24px; background: linear-gradient(#b98a5c, #9a6f45); padding: 26px 22px; box-shadow: inset 0 0 60px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.5); overflow: hidden; }
.nb-desk::before { content: ""; position: absolute; inset: 0; opacity: 0.18; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 46px); }
.nb-desk .obj { position: relative; display: grid; place-items: center; padding: 10px; cursor: pointer; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s; }
.nb-desk .obj svg { width: 100%; max-width: 150px; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35)); transition: filter 0.3s; }
.nb-desk .obj:hover { transform: translateY(-10px) rotate(-1.5deg); } .nb-desk .obj:hover svg { filter: drop-shadow(0 24px 26px rgba(0,0,0,0.45)); }
.nb-desk .obj b { margin-top: 6px; font: 700 0.62rem/1 Inter, system-ui; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.nb-desk .objs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; z-index: 1; }
.nb-desk .props { position: absolute; right: 26px; top: 16px; width: 80px; height: 70px; opacity: 0.95; pointer-events: none; } .nb-desk .props svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.4)); }
.nb-desk .props .stm { animation: nbSteam 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@media (max-width: 767px) { .nb-desk .objs { grid-template-columns: repeat(2, 1fr); } .nb-desk .props { display: none; } }
.nb-dirview { display: flex; gap: 6px; justify-content: flex-end; margin: 4px 0 10px; } .nb-dirview button { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.15); background: #fff; font: 700 0.62rem/1 Inter, system-ui; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .nb-dirview button.is-on { background: #111110; color: #fff; }
.nb-shelfview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 4px; padding: 0 12px 12px; }
.nb-shelfview a[data-nb-cover] { display: block !important; width: 46px; height: 128px; padding: 0 !important; min-height: 0 !important; border-radius: 3px 6px 6px 3px; 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 6px 10px -6px rgba(0,0,0,0.5); position: relative; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); overflow: hidden; }
.nb-shelfview a[data-nb-cover]::before, .nb-shelfview a[data-nb-cover]::after { display: none !important; }
.nb-shelfview a[data-nb-cover] > * { display: none !important; } .nb-shelfview a[data-nb-cover] > .nb-ttl { display: grid !important; position: absolute; inset: 0; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 9px/1 Inter, system-ui; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 10px 0; text-align: center; }
.nb-shelfview a[data-nb-cover]:hover { transform: translateY(-10px); z-index: 2; }
.nb-shelfview .brk { flex-basis: 100%; height: 10px; border-radius: 2px; background: linear-gradient(#8a6a48, #5e4630); margin-bottom: 10px; }
.nb-exam.nb-big { grid-template-columns: auto 1fr auto; padding: 22px 24px; } .nb-exam.nb-big .n { font-size: 4.2rem; }
.nb-exam .cal { position: relative; width: 64px; height: 64px; border-radius: 10px; background: #fff; color: #111110; display: grid; grid-template-rows: 18px 1fr; overflow: hidden; } .nb-exam .cal i { background: #dc2626; color: #fff; font: 800 0.5rem/18px Inter, system-ui; letter-spacing: 0.2em; text-align: center; font-style: normal; } .nb-exam .cal b { display: grid; place-items: center; font: 800 1.5rem/1 'Playfair Display', Georgia, serif; }
.nb-exam .cal .tear { position: absolute; inset: 18px 0 0; background: #fff; display: grid; place-items: center; font: 800 1.5rem/1 'Playfair Display', Georgia, serif; transform-origin: top left; animation: nbTear 1.2s cubic-bezier(0.65,0,0.35,1) 0.6s forwards; } @keyframes nbTear { 60% { transform: rotate(18deg) translateY(10px); opacity: 1; } 100% { transform: rotate(40deg) translateY(60px); opacity: 0; } }

/* ---------- 9. AcademyX ---------- */
.nb-tree .nd { cursor: pointer; } .nb-tree .nd.is-sel rect { stroke-width: 2.5; fill: #f5c542; }
#subjects-grid .subject-item.nb-dim { opacity: 0.25; filter: blur(1.5px) grayscale(0.8); transform: scale(0.97); transition: all 0.45s; } #subjects-grid .subject-item.nb-hit { box-shadow: 0 0 0 3px #f5c542, 0 20px 40px -20px rgba(0,0,0,0.4); transition: all 0.45s; }
.nb-tree .clr { font: 600 10px/1 Inter, system-ui; letter-spacing: 0.14em; fill: #2563eb; cursor: pointer; text-decoration: underline; }
.nb-globe-legend span { cursor: pointer; } .nb-ucard.nb-glow { box-shadow: 0 0 0 3px #2563eb, 0 22px 40px -18px rgba(0,0,0,0.4) !important; transform: translateY(-3px) !important; }
.nb-visited { position: absolute; right: 12px; top: 12px; z-index: 4; width: 64px; height: 64px; border: 2.5px solid #dc2626; border-radius: 50%; display: grid; place-items: center; font: 800 0.52rem/1.2 Inter, system-ui; letter-spacing: 0.16em; text-align: center; color: #dc2626; background: rgba(255,255,255,0.85); transform: rotate(-14deg); mix-blend-mode: multiply; animation: nbiStamp 0.5s cubic-bezier(0.34,1.56,0.64,1); }
#universities-grid > a { position: relative; }

/* ---------- 10. Community / leaderboard ---------- */
.nb-thanks { margin-top: 10px; } .nb-thanks textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(17,17,16,0.15); font: 600 1.05rem/1.3 'Caveat', cursive; resize: none; background: #fff7d6; } .nb-thanks button { margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: #111110; color: #fff; border: 0; font: 700 0.72rem/1 Inter, system-ui; cursor: pointer; }
.nb-gratitude { margin: 12px 0; padding: 12px; border-radius: 12px; background: #fff7d6; border: 1px dashed #e8d9b0; } .nb-gratitude h5 { margin: 0 0 8px; font: 600 0.6rem/1 Inter, system-ui; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.55); } .nb-gratitude p { margin: 0 0 6px; font: 600 1rem/1.3 'Caveat', cursive; color: #111110; transform: rotate(-1deg); }
.nb-poster-btn { display: inline-flex; align-items: center; gap: 8px; margin: 6px auto 18px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #111110; background: #fff; font: 700 0.78rem/1 Inter, system-ui; cursor: pointer; } .nb-poster-btn svg { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-laurel { position: absolute; width: 112px; height: 112px; left: 50%; transform: translateX(-50%); top: -18px; pointer-events: none; z-index: 2; } .nb-laurel svg { width: 100%; height: 100%; overflow: visible; } .nb-laurel path { fill: none; stroke: var(--lc, #b8860b); stroke-width: 1.6; stroke-linecap: round; }
[id^="top-3-section-NEXBOOK"] .grid > div { position: relative; } @media (max-width: 767px) { .nb-laurel { width: 70px; height: 70px; top: -8px; } }

/* ---------- 11. (spotlight tour styles in premium-intro.css) ---------- */

@media (prefers-reduced-motion: reduce) { .synapse-ai-promo.is-roll .synapse-card-shell, .nb-cord, .nb-vorb *, .nb-fcard, .nb-exam .cal .tear { animation: none !important; clip-path: none !important; } }