/* ==========================================================================
   NEXBOOK — premium-v7.css  (paper navbar + editorial resource modal)
   Pure override layer: no IDs/handlers changed. Loaded last.
   ========================================================================== */

/* ---------- 1. Navbar → paper strip ---------- */
#navbarI {
    --nb-h: 64px;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#navbarI.nb-scrolled {
    background: rgba(253,251,246,0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid rgba(17,17,16,0.07) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#navbarI.nb-hidden { transform: translateY(-100%); }

/* logo + shimmer on hover */
#navbarI #logoLink img {
    height: 22px !important; width: auto; transition: opacity 0.2s;
}
@media (max-width: 767px) { #navbarI #logoLink img { height: 19px !important; } }
#navbarI #logoLink { position: relative; overflow: hidden; margin-left: 0; }
#navbarI #logoLink::after {
    content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25), transparent);
    transition: none; pointer-events: none;
}
#navbarI #logoLink:hover::after {
    animation: nbLogoShimmer 0.7s ease forwards;
}
@keyframes nbLogoShimmer { to { left: 140%; } }

/* allow dropdown to overflow navbar container */
#navbarI .h-14 > .flex { overflow: visible !important; }

/* links: uppercase, tracked, ink */
#navbarI nav.hidden.md\:flex { border-right: 0 !important; gap: 6px; }
#navbarI nav.hidden.md\:flex > a,
#navbarI nav.hidden.md\:flex > button:not(#authBtn):not(.nb-avatar),
#navbarI nav.hidden.md\:flex > .nb-more-wrap > button {
    font-family: var(--font-ui, Inter, system-ui) !important;
    font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase;
    color: rgba(17,17,16,0.62) !important; background: transparent !important; border-radius: 0 !important;
    padding: 8px 11px !important; transition: color 0.25s; position: relative;
}
#navbarI nav.hidden.md\:flex > a:hover,
#navbarI nav.hidden.md\:flex > button:not(#authBtn):not(.nb-avatar):hover,
#navbarI nav.hidden.md\:flex > .nb-more-wrap > button:hover { color: #111110 !important; background: transparent !important; }

/* hover underline on all nav links */
#navbarI nav.hidden.md\:flex > a::after,
#navbarI nav.hidden.md\:flex > button:not(#authBtn):not(.nb-avatar)::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
    background: #111110; border-radius: 2px; transform: scaleX(0); transition: transform 0.25s ease;
}
#navbarI nav.hidden.md\:flex > a:hover::after,
#navbarI nav.hidden.md\:flex > button:not(#authBtn):not(.nb-avatar):hover::after { transform: scaleX(1); }
#navbarI nav.hidden.md\:flex > a.academyx-link { color: #111110 !important; }
#navbarI .nb-ink { bottom: 4px; }

/* "More" dropdown */
.nb-more-wrap { position: relative; }
.nb-more-wrap > button svg { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.3s ease; }
.nb-more-wrap:hover > button svg { transform: rotate(180deg); }
#moreNavDropdown {
    position: absolute; right: 0; top: calc(100% + 2px); margin-top: 0; width: 220px; z-index: 50;
    background: #fdfdfb; border-radius: 14px; border: 1px solid rgba(17,17,16,0.1);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.25); padding: 6px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Invisible bridge between button and dropdown — prevents hover gap */
.nb-more-wrap::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 100%; height: 12px;
}
.nb-more-wrap:hover #moreNavDropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }

#moreNavDropdown a {
    display: flex; align-items: center; gap: 10px; border-radius: 10px;
    font-size: 0.82rem; color: #111110; padding: 8px 14px; transition: background 0.2s;
    text-transform: none; letter-spacing: 0; font-weight: 500;
}
#moreNavDropdown a:hover { background: rgba(17,17,16,0.05); }
#moreNavDropdown .nb-dd-sep { height: 1px; background: rgba(17,17,16,0.08); margin: 4px 10px; }
#moreNavDropdown a svg { width: 18px; height: 18px; flex-shrink: 0; }

/* login: ink stamp + glow pulse */
#navbarI #authBtn, #navbarI #authBtnMobile {
    background: transparent !important; color: #111110 !important; border: 1.5px solid #111110; border-radius: 999px !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important; font-style: italic; font-weight: 600 !important; font-size: 0.86rem !important;
    padding: 5px 16px !important; margin-left: 10px !important; letter-spacing: 0.01em;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.3s;
    animation: nbLoginGlow 3s ease-in-out infinite;
}
@keyframes nbLoginGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,16,0); }
    50% { box-shadow: 0 0 12px 2px rgba(17,17,16,0.12); }
}
#navbarI #authBtn:hover, #navbarI #authBtnMobile:hover { background: #111110 !important; color: #fff !important; animation: none; box-shadow: none; }
#navbarI #authBtn:active, #navbarI #authBtnMobile:active { transform: scale(0.97); }

/* avatar (replaces Login when logged in) */
#navbarI .nb-avatar {
    width: 28px !important; height: 28px !important; border-radius: 50% !important; overflow: hidden !important; cursor: pointer;
    border: none !important; padding: 0 !important; margin-left: 6px; transition: transform 0.2s;
    display: flex !important; align-items: center; justify-content: center;
    background: none !important; box-shadow: none !important;
    outline: none !important; -webkit-appearance: none; appearance: none;
    min-width: 28px; flex-shrink: 0;
}
#navbarI .nb-avatar:hover { transform: scale(1.12); }
#navbarI .nb-avatar img { width: 100% !important; height: 100% !important; display: block !important; image-rendering: pixelated; border-radius: 0 !important; object-fit: cover; }
/* prevent CSS display:flex from overriding Tailwind .hidden on avatar */
#navbarI .nb-avatar.hidden { display: none !important; }

#navbarI .md\:hidden a[href="#academy-x"] { font-family: var(--font-ui, Inter, system-ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #111110; }
#navbarI .nb-bag { margin-left: 4px; }
#navbarI #hamburgerBtn { border-radius: 999px; transition: background 0.2s, transform 0.3s; }
#navbarI #hamburgerBtn:hover { background: rgba(17,17,16,0.06); }
#navbarI #hamburgerBtn.active { transform: rotate(90deg); }

/* red ribbon: show only while at top, hide smoothly when scrolled */
.nb-bookmark { transition: opacity 0.3s ease, transform 0.3s ease; }
.nb-bookmark.nb-ribbon-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* staggered sidebar menu animation */
#mobileMenu.translate-x-0 #menu-nav li { animation: nbMenuSlideIn 0.35s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes nbMenuSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
#mobileMenu #menu-nav li:nth-child(1) { animation-delay: 0.04s; }
#mobileMenu #menu-nav li:nth-child(2) { animation-delay: 0.08s; }
#mobileMenu #menu-nav li:nth-child(3) { animation-delay: 0.12s; }
#mobileMenu #menu-nav li:nth-child(4) { animation-delay: 0.16s; }
#mobileMenu #menu-nav li:nth-child(5) { animation-delay: 0.2s; }
#mobileMenu #menu-nav li:nth-child(6) { animation-delay: 0.24s; }
#mobileMenu #menu-nav li:nth-child(7) { animation-delay: 0.28s; }
#mobileMenu #menu-nav li:nth-child(8) { animation-delay: 0.32s; }
#mobileMenu #menu-nav li:nth-child(9) { animation-delay: 0.36s; }
#mobileMenu #menu-nav li:nth-child(10) { animation-delay: 0.4s; }
#mobileMenu #menu-nav li:nth-child(11) { animation-delay: 0.44s; }
#mobileMenu #menu-nav li:nth-child(12) { animation-delay: 0.48s; }
#mobileMenu.translate-x-full #menu-nav li { animation: none; opacity: 1; transform: none; }

/* ---------- 1b. Claude Academy homepage card ---------- */
#claude-academy-card { padding: 12px 16px 64px; }
.nbca {
    display: block; position: relative; max-width: 1180px; margin: 0 auto;
    background: linear-gradient(135deg, #faf5ea 0%, #f7efdd 100%);
    border: 1px solid rgba(25,23,20,0.09); border-radius: 32px; overflow: hidden;
    box-shadow: 0 4px 18px -8px rgba(25,23,20,0.12);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
    cursor: pointer; color: #191714; text-decoration: none;
}
.nbca:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(25,23,20,0.35); }
.nbca__grid {
    display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
    padding: clamp(26px, 4.5vw, 52px) clamp(20px, 4.5vw, 52px) clamp(8px, 2vw, 18px);
}
@media (min-width: 880px) { .nbca__grid { grid-template-columns: minmax(0, 47%) minmax(0, 53%); } }

.nbca__start {
    position: relative; display: inline-block;
    font: italic 700 0.74rem/1 Inter, system-ui; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 3px 2px 9px; margin-bottom: 14px; color: #191714;
}
.nbca__start svg.swoosh { position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; }
.nbca__start svg.spk { position: absolute; right: -30px; top: -8px; width: 22px; height: 22px; }
.nbca h2 {
    font: 800 clamp(2.1rem, 4.6vw, 3.4rem)/1.04 var(--font-display, 'Playfair Display', serif) !important;
    letter-spacing: -0.02em; margin: 0 0 14px; color: #191714;
}
.nbca__sub { font: 500 clamp(0.95rem, 1.8vw, 1.15rem)/1.5 Inter, system-ui; color: rgba(25,23,20,0.62); }
.nbca__sub mark { background: #f5e3b8; color: #191714; padding: 2px 8px; border-radius: 6px; }

.nbca__search {
    position: relative; margin-top: 24px; max-width: 460px;
    background: #fff; border: 1px solid rgba(25,23,20,0.1); border-radius: 999px;
    padding: 14px 48px 14px 46px;
    font: 500 0.9rem/1 Inter, system-ui; color: rgba(25,23,20,0.4);
    box-shadow: 0 2px 10px -4px rgba(25,23,20,0.08);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nbca__search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: rgba(25,23,20,0.45); fill: none; stroke-width: 2; stroke-linecap: round; }
.nbca__search i {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    font: 600 0.7rem/1 Inter, system-ui; font-style: normal; color: rgba(25,23,20,0.4);
    border: 1px solid rgba(25,23,20,0.12); border-radius: 5px; padding: 3px 7px; background: #faf5ea;
}
.nbca__pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.nbca__pill {
    display: inline-flex; align-items: center; gap: 7px;
    font: 600 0.78rem/1 Inter, system-ui;
    padding: 10px 16px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(25,23,20,0.1); color: #191714;
}
.nbca__pill.on { background: #191714; border-color: #191714; color: #fff; }
.nbca__pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nbca__art img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 18px 30px rgba(122,92,18,0.14));
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.nbca:hover .nbca__art img { transform: translateY(-6px) rotate(-1deg); }
@media (max-width: 879px) { .nbca__art { max-width: 460px; margin: 0 auto; } }

/* mini-card marquee */
.nbca__marq { position: relative; overflow: hidden; padding: 22px 0 30px; }
.nbca__marq::before, .nbca__marq::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: clamp(50px, 9vw, 120px); z-index: 2; pointer-events: none;
}
.nbca__marq::before { left: 0; background: linear-gradient(90deg, #f9f3e4 15%, rgba(249,243,228,0)); }
.nbca__marq::after { right: 0; background: linear-gradient(270deg, #f8f1e0 15%, rgba(248,241,224,0)); }
.nbca__track { display: flex; gap: 14px; width: max-content; animation: nbcaScroll 34s linear infinite; }
@media (hover: hover) { .nbca:hover .nbca__track { animation-play-state: paused; } }
@keyframes nbcaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.nb-no-motion .nbca__track { animation: none; }
.nbca__mini {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    background: #fdfcf9; border: 1px solid rgba(25,23,20,0.08); border-radius: 16px;
    padding: 12px 18px 12px 12px;
    box-shadow: 0 2px 8px -4px rgba(25,23,20,0.1);
}
.nbca__mini-ic {
    width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto;
    clip-path: polygon(50% 0%, 79% 6%, 98% 30%, 100% 55%, 88% 82%, 65% 98%, 35% 98%, 12% 82%, 0% 55%, 2% 30%, 21% 6%);
}
.nbca__mini-ic.m-rose { background: #f3ddd4; }
.nbca__mini-ic.m-sage { background: #dde9e0; }
.nbca__mini-ic.m-gold { background: #f3e6c8; }
.nbca__mini-ic img { width: 24px; height: 24px; object-fit: contain; }
.nbca__mini b { display: block; font: 700 0.85rem/1.2 var(--font-display, 'Playfair Display', serif); color: #191714; }
.nbca__mini small { font: 500 0.7rem/1.2 Inter, system-ui; color: rgba(25,23,20,0.55); }

/* ---------- 2. Resource modal → editorial paper ---------- */
#unifiedStudyModal { background: rgba(17,17,16,0.42) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#unifiedStudyModal > div[onclick] {
    background: #fdfdfb !important; color: #111110; position: relative;
    max-width: 920px; height: min(92vh, 860px) !important; max-height: min(92vh, 860px); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.45), 0 0 0 1px rgba(17,17,16,0.08) !important;
    animation: nbModalRise 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes nbModalRise { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { #unifiedStudyModal > div[onclick] { height: 94vh !important; max-height: 94vh; border-radius: 24px 24px 0 0; } }
html.nb-no-motion #unifiedStudyModal > div[onclick] { animation: none; }
/* brand ribbon in the corner */
#unifiedStudyModal > div[onclick]::before {
    content: ""; position: absolute; top: -1px; right: 34px; width: 14px; height: 34px; z-index: 5; background: #dc2626;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

/* header: gradient → paper */
#unifiedStudyModal .modal-header-gradient {
    background: #fdfdfb !important; border-bottom: 1px solid rgba(17,17,16,0.08) !important; padding: 6px 10px 0;
}
#unifiedStudyModal .modal-header-gradient h2 {
    color: #111110 !important; font-family: var(--font-display, 'Playfair Display', serif) !important; font-weight: 800 !important;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem) !important; letter-spacing: -0.02em; line-height: 1.05; white-space: normal !important;
}
#unifiedStudyModal .modal-header-gradient h2::before {
    content: "Free resources"; display: block; font-family: var(--font-ui, Inter, system-ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.45); margin-bottom: 6px;
}
#unifiedStudyModal .modal-header-gradient button[onclick="goBack()"],
#unifiedStudyModal .modal-header-gradient button[onclick="closeUnifiedModal()"] {
    background: transparent !important; box-shadow: none !important; border: 1.5px solid rgba(17,17,16,0.16); width: 36px; height: 36px; transition: border-color 0.25s, background 0.25s;
}
#unifiedStudyModal .modal-header-gradient button[onclick="goBack()"]:hover,
#unifiedStudyModal .modal-header-gradient button[onclick="closeUnifiedModal()"]:hover { border-color: #111110; background: #111110 !important; }
#unifiedStudyModal .modal-header-gradient button[onclick="goBack()"]:hover svg,
#unifiedStudyModal .modal-header-gradient button[onclick="closeUnifiedModal()"]:hover svg { stroke: #fff; }
#unifiedStudyModal .modal-header-gradient button svg { color: #111110; stroke: #111110; transition: stroke 0.25s; }
#unifiedStudyModal .upload-pill-light {
    background: transparent !important; color: #111110 !important; border: 1.5px solid #111110 !important; box-shadow: none !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important; font-style: italic; font-weight: 600 !important; font-size: 0.84rem !important; padding: 6px 16px !important;
    transition: background 0.25s, color 0.25s;
}
#unifiedStudyModal .upload-pill-light:hover { background: #111110 !important; color: #fff !important; transform: none !important; }

/* tabs: pills → underline */
/* old tab rules removed — replaced by .nbm-tabs rules below */

/* body */
#unifiedStudyModal .flex-1.min-h-0.w-full.relative { background: #fdfdfb !important; }
#unifiedStudyModal .flex-1.overflow-y-auto { scrollbar-width: thin; scrollbar-color: rgba(17,17,16,0.2) transparent; }

/* search: pill → editorial underline */
#unifiedStudyModal .flex-shrink-0.px-6.pt-6.pb-4 { padding: 18px 28px 6px !important; }
#unifiedStudyModal .flex-shrink-0.px-6.pt-6.pb-4 > .relative > .relative {
    background: transparent !important; border: 0 !important; border-bottom: 1.5px solid rgba(17,17,16,0.7) !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 8px 2px 10px !important; transition: border-color 0.25s;
}
#unifiedStudyModal .flex-shrink-0.px-6.pt-6.pb-4 > .relative > .relative:focus-within { border-bottom-color: #111110 !important; }
#unifiedStudyModal #smartSearchInput { font-family: var(--font-display, 'Playfair Display', serif) !important; font-size: 1.05rem !important; color: #111110; }
#unifiedStudyModal #smartSearchInput::placeholder { font-style: italic; color: rgba(17,17,16,0.38); }
#unifiedStudyModal #rightSearchBtn { background: transparent !important; box-shadow: none !important; padding: 4px !important; }
#unifiedStudyModal #rightSearchBtn svg { stroke: #111110; }
#unifiedStudyModal #rightSearchBtn:hover svg { stroke: #dc2626; }
#unifiedStudyModal .flex-shrink-0.px-6.pt-6.pb-4 > .relative > .relative > svg:first-child { display: none; }

/* lists: cards → ruled index */
#unifiedStudyModal .flex-1.overflow-y-auto.px-6.pb-6 { padding: 4px 28px 28px !important; }
#unifiedStudyModal .space-y-3 > * + *, #unifiedStudyModal .space-y-4 > * + * { margin-top: 0 !important; }
#unifiedStudyModal .space-y-3 > button, #unifiedStudyModal .space-y-3 > a, #unifiedStudyModal .space-y-4 > div > .space-y-3 > a, #unifiedStudyModal .space-y-3 > div.group, #unifiedStudyModal .space-y-4 > div.group {
    background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(17,17,16,0.09) !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important; padding: 0 !important; position: relative; transition: background 0.25s;
}
#unifiedStudyModal .space-y-3 > button:hover, #unifiedStudyModal .space-y-3 > a:hover, #unifiedStudyModal .space-y-3 > div.group:hover, #unifiedStudyModal .space-y-4 > div.group:hover { background: rgba(17,17,16,0.03) !important; }
#unifiedStudyModal .space-y-3 > button > div, #unifiedStudyModal .space-y-3 > a > div, #unifiedStudyModal .space-y-3 > a.group { padding: 16px 6px !important; }
#unifiedStudyModal .space-y-3 > a.group.flex.items-center { padding: 14px 6px !important; }
/* icon circles → ghost numerals */
#unifiedStudyModal .space-y-3 .w-12.h-12.rounded-full, #unifiedStudyModal .space-y-3 .w-10.h-10.rounded-full.bg-\[\#F2F2F7\] {
    background: transparent !important; width: 38px !important; height: 38px !important; position: relative; transform: none !important;
}
#unifiedStudyModal .space-y-3 .w-12.h-12.rounded-full svg, #unifiedStudyModal .space-y-3 .w-10.h-10.rounded-full.bg-\[\#F2F2F7\] svg { display: none; }
#unifiedStudyModal .space-y-3 .w-12.h-12.rounded-full::before, #unifiedStudyModal .space-y-3 .w-10.h-10.rounded-full.bg-\[\#F2F2F7\]::before {
    content: attr(data-n); font-family: var(--font-display, 'Playfair Display', serif); font-style: italic; font-weight: 700; font-size: 1.15rem; color: rgba(17,17,16,0.3); letter-spacing: -0.02em;
}
#unifiedStudyModal .space-y-3 h3, #unifiedStudyModal .space-y-3 h4 {
    font-family: var(--font-ui, Inter, system-ui) !important; font-weight: 600 !important; font-size: 0.98rem !important; letter-spacing: -0.01em; color: #111110 !important;
}
#unifiedStudyModal .space-y-3 a.group.flex.items-center span.font-semibold { font-family: var(--font-ui, Inter, system-ui) !important; font-size: 0.95rem !important; color: #111110 !important; }
#unifiedStudyModal .space-y-3 p.text-\[13px\], #unifiedStudyModal .space-y-3 .text-\[12px\] { font-family: var(--font-ui, Inter, system-ui); font-size: 0.68rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17,17,16,0.42) !important; margin-top: 4px !important; }
/* chevron slide */
#unifiedStudyModal .space-y-3 svg.text-gray-400 { color: #111110 !important; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
#unifiedStudyModal .space-y-3 > button:hover svg.text-gray-400, #unifiedStudyModal .space-y-3 > a:hover svg.text-gray-400 { transform: translateX(4px); }
/* course chip (added by JS) */
.nb-course-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; padding: 4px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--course, #111110) 35%, transparent); color: var(--course, #111110); font: 700 0.6rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.12em; text-transform: uppercase; background: color-mix(in srgb, var(--course, #111110) 7%, transparent); white-space: nowrap; }
.nb-course-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--course, #111110); }
@media (max-width: 640px) { .nb-course-chip { display: none; } }
/* semester headings */
#unifiedStudyModal .text-\[22px\].font-semibold { font-family: var(--font-display, 'Playfair Display', serif) !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.45) !important; margin: 22px 6px 4px !important; font-family: var(--font-ui, Inter, system-ui) !important; }
/* pdf action buttons */
#unifiedStudyModal .space-y-3 a.group .pdf-link.w-10.h-10, #unifiedStudyModal .space-y-3 a.group .w-10.h-10.bg-green-50 { background: transparent !important; border: 1.5px solid rgba(17,17,16,0.16); color: #111110 !important; box-shadow: none !important; transition: background 0.25s, border-color 0.25s, color 0.25s; }
#unifiedStudyModal .space-y-3 a.group .pdf-link.w-10.h-10:hover, #unifiedStudyModal .space-y-3 a.group .w-10.h-10.bg-green-50:hover { background: #111110 !important; border-color: #111110; color: #fff !important; }
/* empty + counts */
#unifiedStudyModal p.text-center.text-gray-400 { font-family: var(--font-display, 'Playfair Display', serif); font-style: italic; color: rgba(17,17,16,0.45) !important; }
#unifiedStudyModal p.text-sm.text-gray-500 { font-family: var(--font-ui, Inter, system-ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,16,0.45) !important; margin: 6px 6px 0; }
/* footer annotation */
.nb-modal-note { position: absolute; right: 30px; bottom: 12px; z-index: 4; pointer-events: none; font-family: 'Caveat', 'Kalam', cursive; font-size: 1.05rem; color: rgba(17,17,16,0.55); transform: rotate(-3deg); display: flex; align-items: center; gap: 6px; }
.nb-modal-note svg { width: 28px; height: 14px; stroke: rgba(17,17,16,0.5); fill: none; stroke-width: 1.5; stroke-linecap: round; }
@media (max-width: 767px) { .nb-modal-note { display: none; } }

/* ---------- 3. File rows (step 3) polish ---------- */
#unifiedStudyModal .space-y-3 > div.group { padding: 13px 6px !important; gap: 14px !important; }
#unifiedStudyModal .space-y-3 > div.group .w-10.h-10.rounded-full { width: 34px !important; height: 34px !important; border: 1px solid rgba(17,17,16,0.12); border-radius: 8px !important; background: transparent !important; display: flex !important; transform: none !important; }
#unifiedStudyModal .space-y-3 > div.group .w-10.h-10.rounded-full::before { content: none !important; }
#unifiedStudyModal .space-y-3 > div.group .w-10.h-10.rounded-full > svg { display: block !important; width: 16px; height: 16px; stroke: rgba(17,17,16,0.7) !important; }
#unifiedStudyModal .space-y-3 > div.group h4 { font-size: 0.92rem !important; white-space: normal !important; line-height: 1.3; }
#unifiedStudyModal .space-y-3 > div.group .text-\[12px\] { margin-top: 3px !important; }
#unifiedStudyModal .space-y-3 > div.group .pdf-link.w-10.h-10, #unifiedStudyModal .space-y-3 > div.group .w-10.h-10.bg-green-50 { width: 34px !important; height: 34px !important; background: transparent !important; border: 1.5px solid rgba(17,17,16,0.16) !important; border-radius: 999px !important; color: #111110 !important; box-shadow: none !important; transition: background 0.25s, border-color 0.25s, color 0.25s; }
#unifiedStudyModal .space-y-3 > div.group .pdf-link.w-10.h-10:hover, #unifiedStudyModal .space-y-3 > div.group .w-10.h-10.bg-green-50:hover { background: #111110 !important; border-color: #111110 !important; color: #fff !important; }
#unifiedStudyModal .space-y-3 > div.group .w-10.h-10 svg { color: inherit; }
#unifiedStudyModal .space-y-3 > div.group:hover h4 { color: #111110 !important; }

/* ---------- 4. Split hero: copy left, illustration right ---------- */
#top.nb-split { background: #fdfdfb !important; text-align: left; padding-top: 92px; padding-bottom: 32px; min-height: 0; }
.nb-split__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.nb-split__wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; position: relative; z-index: 2; }
#top.nb-split .nb-split__copy { margin: 0; padding: 0; max-width: 560px; }
#top.nb-split h1 { font-size: clamp(3.2rem, 6vw, 5.4rem); }
#top.nb-split p.hero-subtitle-shadow { margin-left: 0; margin-right: 0; text-shadow: none; }
#top.nb-split .flex.flex-col { justify-content: flex-start; align-items: flex-start; }
#top.nb-split .flex.flex-col { position: relative; }
#top.nb-split .nb-note { left: auto !important; right: -10px; top: -40px !important; transform: rotate(-4deg) !important; font-size: 1.2rem; }
#top.nb-split .nb-note svg { transform: scaleX(-1) rotate(20deg); }
@media (max-width: 767px) { #top.nb-split .nb-note { display: none; } }
.nb-split__art { position: relative; display: flex; justify-content: center; }
.nb-split__art img { width: 100%; max-width: 640px; height: auto; display: block; mix-blend-mode: multiply; animation: nbArtIn 1.1s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
@keyframes nbArtIn { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (hover: hover) { html:not(.nb-no-motion) .nb-split__art img { animation: nbArtIn 1.1s cubic-bezier(0.22,1,0.36,1) 0.15s both, nbArtFloat 6s cubic-bezier(0.45,0,0.55,1) 1.3s infinite; } }
@keyframes nbArtFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}
html.nb-no-motion .nb-split__art img { animation: none; }
/* hero stats pill (injected) sits under the buttons, left */
#top.nb-split .nb-proof { margin-left: 0; justify-content: flex-start; }
@media (max-width: 767px) { #top.nb-split .nb-proof { margin-left: auto; margin-right: auto; justify-content: center; } }
#top.nb-split .nb-hero-toggle, #top.nb-split .nb-sky-tag { display: none !important; }
#top.nb-split .nb-paper { display: none !important; }
@media (max-width: 1023px) {
    #top.nb-split h1 { font-size: clamp(2.6rem, 8vw, 4rem); }
    .nb-split__wrap { gap: 8px; }
}
@media (max-width: 767px) {
    #top.nb-split { text-align: center; padding-top: 84px; }
    .nb-split__wrap { grid-template-columns: 1fr; gap: 8px; padding: 0 16px; }
    #top.nb-split .nb-split__copy { padding: 0; max-width: none; }
    #top.nb-split .flex.flex-col { align-items: center; justify-content: center; }
    #top.nb-split p.hero-subtitle-shadow { margin: 0 auto 28px; }
    .nb-split__art { order: -1; margin-bottom: 4px; }
    .nb-split__art img { max-width: 340px; }
}

/* ---------- 5. Mobile navbar fix ---------- */
@media (max-width: 767px) {
    #navbarI #authBtnMobile { white-space: nowrap; padding: 4px 12px !important; margin-left: 0 !important; font-size: 0.8rem !important; }
    #navbarI .md\:hidden a[href="#academy-x"] { white-space: nowrap; font-size: 0.62rem; letter-spacing: 0.1em; }
    #navbarI .flex.md\:hidden { gap: 8px; }
}

/* ---------- 6. Synapse AI card → paper notebook ---------- */
.synapse-ai-promo .synapse-card-shell {
    background: #fdfdfb !important; color: #111110;
    border: 1px solid rgba(17,17,16,0.1) !important;
    box-shadow: 0 40px 90px -40px rgba(0,0,0,0.28) !important;
    font-family: var(--font-ui, Inter, system-ui) !important;
}
.synapse-ai-promo .synapse-card-shell::after { background: none !important; }            /* sweeping blue ring */
.synapse-ai-promo .nb-proj, .synapse-ai-promo .nb-reflect { display: none !important; }  /* projector + mirror */
.synapse-ai-promo.is-roll .synapse-card-shell { clip-path: none !important; animation: nbModalRise 0.7s cubic-bezier(0.22,1,0.36,1) both !important; }
/* kicker + ribbon */
.synapse-card-shell { position: relative; }
.synapse-card-shell > .nb-syn-kick { position: absolute; top: 26px; left: 48px; z-index: 3; font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,16,0.45); }
.synapse-card-shell > .nb-syn-ribbon { position: absolute; top: -1px; right: 44px; width: 14px; height: 36px; background: #dc2626; z-index: 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
/* neural lines → pencil */
.synapse-card-shell > .neural { opacity: 0.5 !important; }
.synapse-card-shell > .neural path { stroke: rgba(17,17,16,0.12) !important; }
.synapse-card-shell > .neural circle { fill: rgba(17,17,16,0.25) !important; }
/* logo + name */
.synapse-card-shell h1 { color: #111110 !important; font-family: var(--font-display, 'Playfair Display', serif) !important; font-weight: 700 !important; font-size: 1.25rem !important; }
.synapse-card-shell .w-11.h-11 > .absolute.inset-0 { background: #111110 !important; opacity: 1 !important; filter: none !important; }
.synapse-card-shell .w-11.h-11 svg [stroke="white"] { stroke: #fdfdfb; } .synapse-card-shell .w-11.h-11 svg [fill="white"] { fill: #fdfdfb; }
/* headline + copy */
.synapse-card-shell h2.text-silver-gradient, .synapse-card-shell h2.nb-newcopy {
    background: none !important; -webkit-text-fill-color: #111110 !important; color: #111110 !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important; font-style: italic; font-weight: 700 !important;
    letter-spacing: -0.02em; font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important; line-height: 1.08 !important;
}
.synapse-card-shell h2 + p { color: rgba(17,17,16,0.62) !important; font-size: 1rem !important; letter-spacing: 0 !important; font-family: var(--font-ui, Inter, system-ui) !important; font-style: normal !important; }
/* bottom pills */
.synapse-card-shell .pill-hover { background: transparent !important; border: 1px solid rgba(17,17,16,0.16) !important; color: #111110 !important; font-family: var(--font-ui, Inter, system-ui); font-size: 0.68rem !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.synapse-card-shell .pill-hover:hover { background: #111110 !important; color: #fff !important; border-color: #111110 !important; }
.synapse-card-shell .pill-hover svg { opacity: 1; }
/* divider */
.synapse-card-shell .bg-gradient-to-b.from-transparent { background: linear-gradient(to bottom, transparent, rgba(17,17,16,0.14), transparent) !important; }
/* right column */
.synapse-card-shell p.text-\[\#8E8E93\] { color: rgba(17,17,16,0.45) !important; font-weight: 700 !important; font-size: 0.62rem !important; letter-spacing: 0.18em !important; }
.synapse-card-shell .bg-white\/20 { background: rgba(17,17,16,0.15) !important; } .synapse-card-shell .bg-white\/40 { background: rgba(17,17,16,0.35) !important; } .synapse-card-shell .bg-white\/80 { background: #dc2626 !important; }
.synapse-card-shell button.apple-btn-hover { background: #111110 !important; color: #fff !important; font-family: var(--font-display, 'Playfair Display', serif) !important; font-weight: 700 !important; font-size: 1rem !important; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5) !important; }
.synapse-card-shell p.text-\[\#A1A1A6\] { color: rgba(17,17,16,0.45) !important; font-family: var(--font-display, 'Playfair Display', serif); font-style: italic; font-size: 0.8rem !important; }
/* classroom: keep the board dark, pin it to the page */
.nb-syn .room { border: 1px solid rgba(17,17,16,0.12) !important; box-shadow: 0 22px 40px -22px rgba(0,0,0,0.45); }
.nb-syn .room::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #e2b64b; box-shadow: 0 2px 4px rgba(0,0,0,0.35); z-index: 2; }
/* agents → ruled index */
.nb-agents { gap: 0 !important; margin: 6px 0 14px !important; border-top: 1px solid rgba(17,17,16,0.1); }
.nb-agent { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(17,17,16,0.1) !important; border-radius: 0 !important; color: #111110 !important; padding: 11px 8px !important; counter-increment: nbAgent; transform: none !important; }
.nb-agents { counter-reset: nbAgent; }
.nb-agent:nth-child(odd) { border-right: 1px solid rgba(17,17,16,0.1) !important; }
.nb-agent::before { content: counter(nbAgent, decimal-leading-zero); font: italic 700 0.95rem/1 var(--font-display, 'Playfair Display', serif); color: rgba(17,17,16,0.28); flex: none; width: 22px; }
.nb-agent svg { stroke: #111110 !important; width: 24px !important; height: 24px !important; }
.nb-agent b { font-family: var(--font-display, 'Playfair Display', serif) !important; font-size: 0.9rem !important; color: #111110; }
.nb-agent small { color: rgba(17,17,16,0.55) !important; }
.nb-agent:hover { background: rgba(17,17,16,0.035) !important; }
/* voice bar → handwritten note */
.nb-voice { background: transparent !important; border: 0 !important; padding: 6px 4px !important; font: 600 1.15rem/1.1 'Caveat', cursive !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(17,17,16,0.75) !important; transform: rotate(-1.5deg); }
.nb-voice .bars i { background: #111110 !important; }

.nb-voice .cap { color: #111110 !important; font-size: 0.95rem !important; }
.nb-syn-note { color: rgba(17,17,16,0.5) !important; font-family: var(--font-display, 'Playfair Display', serif) !important; font-style: italic; font-size: 0.8rem !important; }
/* chalk cursor + dust on paper */
.nb-chalkdust { background: rgba(17,17,16,0.35) !important; }
@media (max-width: 860px) {
    .synapse-card-shell > .nb-syn-kick { position: static; display: block; margin: -6px 0 16px; }
    .synapse-card-shell > .nb-syn-ribbon { right: 28px; }
    .nb-agents { grid-template-columns: 1fr !important; }
    .nb-agent:nth-child(odd) { border-right: 0 !important; }
    .nb-agent b { font-size: 0.95rem !important; }
}

/* ---------- 7. Modal scroll safety ---------- */
#unifiedStudyModal .flex-1.min-h-0.w-full.relative { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#unifiedStudyModal .flex-1.min-h-0.w-full.relative > .flex.flex-col.h-full { flex: 1 1 auto; min-height: 0; height: auto !important; }
#unifiedStudyModal .flex-1.overflow-y-auto { min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#unifiedStudyModal .modal-header-gradient { flex: none; }

/* ---------- 8. Synapse card → full-bleed illustration ---------- */
.synapse-ai-promo .synapse-card-shell.nb-synimg { padding: 0 !important; max-width: 1100px !important; min-height: 0; aspect-ratio: 1536 / 1024; overflow: hidden; display: block; }
.synapse-card-shell.nb-synimg > *:not(.nb-synov):not(.nb-synbg):not(.nb-syn-ribbon) { display: none !important; }
.synapse-card-shell.nb-synimg > .nb-synbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; display: block; }
.synapse-card-shell.nb-synimg > .nb-synov {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: clamp(24px, 4%, 56px); width: 56%; max-width: 600px; color: #111110; text-align: left; hyphens: none; -webkit-hyphens: none; word-break: normal;
    background: linear-gradient(90deg, rgba(253,253,251,0.92) 0%, rgba(253,253,251,0.75) 60%, rgba(253,253,251,0) 100%);
}
.nb-synov .nb-syn-topbadge {
    position: absolute;
    top: clamp(20px, 2.8vw, 34px);
    left: clamp(24px, 4%, 56px);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px -3px rgba(245, 158, 11, 0.22);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.nb-synov .nb-syn-topbadge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -3px rgba(245, 158, 11, 0.32);
}
.nb-synov .nb-syn-topbadge img {
    height: 16px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}
.nb-synov .k { font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,16,0.5); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.nb-synov .k i { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; }
.nb-synov h3 { position: relative; font: 700 clamp(1.6rem, 3vw, 2.7rem)/1.12 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.02em; color: #111110; margin: 0 0 6px; }
.nb-synov h3 em { font-style: italic; position: relative; }
.nb-synov h3 em::after { content: ""; position: absolute; left: 0; right: 4px; bottom: -8px; height: 5px; border-radius: 3px; background: #f0b429; transform: rotate(-1.2deg); }

.nb-synov p { font: 400 clamp(0.88rem, 1.15vw, 1.05rem)/1.55 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.62); margin: 14px 0 0; }
.nb-synov .feats { display: flex; align-items: stretch; margin: clamp(14px, 2.4vw, 26px) 0 clamp(16px, 2.6vw, 28px); }
.nb-synov .feats > div { flex: 1; padding-right: 14px; }
.nb-synov .feats > div + div { border-left: 1px solid rgba(17,17,16,0.12); padding-left: 16px; }
.nb-synov .feats i { display: grid; place-items: center; width: clamp(34px, 3.4vw, 46px); height: clamp(34px, 3.4vw, 46px); border-radius: 13px; background: #faeed2; margin-bottom: 10px; }
.nb-synov .feats i svg { width: 55%; height: 55%; stroke: #111110; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nb-synov .feats b { display: block; font: 700 clamp(0.8rem, 1vw, 0.95rem)/1.2 var(--font-ui, Inter, system-ui); color: #111110; margin-bottom: 4px; }
.nb-synov .feats small { font: 400 clamp(0.68rem, 0.85vw, 0.8rem)/1.45 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
.nb-synov .ctarow { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.nb-synov .cta { display: inline-flex; align-items: center; gap: 10px; padding: clamp(11px, 1.4vw, 15px) clamp(20px, 2.6vw, 30px); border-radius: 999px; background: #111110; color: #fff; font: 700 0.92rem/1 var(--font-display, 'Playfair Display', serif); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.5); }
.nb-synov .cta svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.synapse-card-shell.nb-synimg:hover .cta { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(0,0,0,0.55); }
.synapse-card-shell.nb-synimg:hover .cta svg { transform: translateX(3px); }
.nb-synov .hand { font: 600 clamp(0.95rem, 1.3vw, 1.15rem)/1.25 'Caveat', cursive; color: #111110; display: inline-flex; align-items: center; gap: 8px; transform: rotate(-1deg); }
.nb-synov .hand .curl { width: clamp(34px, 3.6vw, 52px); height: auto; stroke: rgba(17,17,16,0.7); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nb-synov .hand .t { display: block; }
.nb-synov .hand u { text-decoration: none; position: relative; white-space: nowrap; }
.nb-synov .hand u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 2px; background: #f0b429; }
.synapse-card-shell.nb-synimg > .nb-syn-kick, .synapse-card-shell.nb-synimg > .neural { display: none !important; }
.synapse-card-shell.nb-synimg > .nb-syn-ribbon { display: block !important; z-index: 3; top: -1px; right: 40px; width: 16px; height: 42px; }
@media (max-width: 767px) {
    .synapse-ai-promo .synapse-card-shell.nb-synimg { aspect-ratio: auto; }
    .synapse-card-shell.nb-synimg > .nb-synbg { position: relative; aspect-ratio: 1536 / 1024; object-position: 70% center; }
    .synapse-card-shell.nb-synimg > .nb-synov { position: relative; width: 100%; max-width: none; background: #fdfdfb; padding: 22px 22px 26px; }
    .nb-synov .nb-syn-topbadge { position: static; margin-bottom: 14px; white-space: normal; line-height: 1.35; font-size: 0.62rem; padding: 5px 11px; max-width: 100%; }
}

/* Recognition styles (Hero, Footer) */
.nb-hero-award {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 18px; border-radius: 999px; margin-bottom: 22px;
    font: 600 0.84rem/1 var(--font-ui, Inter, system-ui);
    color: #111110 !important; background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(17,17,16,0.12) !important;
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    text-decoration: none !important; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    cursor: pointer;
}
.nb-hero-award:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(0,0,0,0.14) !important;
    border-color: rgba(17,17,16,0.25) !important;
}
.nb-hero-award .g-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(17,17,16,0.3); display: inline-block; }
.nb-hero-award .g-sub { color: rgba(17,17,16,0.6); font-weight: 400; }
.nb-hero-award svg.arr { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 2.2; transition: transform 0.2s; }
.nb-hero-award:hover svg.arr { transform: translateX(2px); }

/* Footer recognition pills */
.nb-foot-rec {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; gap: 8px;
}
.nb-foot-rec span.lbl {
    font: 700 0.62rem/1 var(--font-ui, Inter, system-ui);
    letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.nb-foot-rec .rec-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-foot-rec a.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85) !important; font: 500 0.74rem/1 var(--font-ui, Inter, system-ui);
    text-decoration: none !important; transition: background 0.2s, color 0.2s;
}
.nb-foot-rec a.pill:hover { background: rgba(255,255,255,0.14); color: #fff !important; }
.nb-foot-rec a.pill i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.nb-foot-rec a.pill i.blue { background: #3b82f6; }
.nb-foot-rec a.pill i.amber { background: #f59e0b; }

/* ---------- Dedicated Footer Prestige Strip (Luxury Brand Showcase) ---------- */
.nb-prestige-strip {
    margin-bottom: 3.8rem;
    padding: 32px 34px;
    background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.015) 60%, rgba(0, 0, 0, 0.4) 100%), #111113;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    position: relative;
}
.nb-ps-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.nb-ps-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.nb-ps-spark {
    color: #f59e0b;
    font-size: 1rem;
    line-height: 1.4;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}
.nb-ps-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nb-ps-kicker {
    font: 700 0.64rem/1 var(--font-ui, Inter, system-ui);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d97706;
}
.nb-ps-title {
    font: 700 1.28rem/1.2 var(--font-display, 'Playfair Display', serif);
    letter-spacing: -0.015em;
    color: #ffffff !important;
    margin: 0;
}
.nb-ps-sub {
    font: 400 0.8rem/1.4 var(--font-ui, Inter, system-ui);
    color: rgba(255, 255, 255, 0.55);
    margin: 4px 0 0;
}
.nb-ps-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    font: 500 0.74rem/1 var(--font-ui, Inter, system-ui);
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    margin-top: 2px;
}
.nb-ps-view-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}
.nb-ps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.nb-ps-card {
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-decoration: none !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nb-ps-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.nb-ps-card-google::before {
    background: radial-gradient(circle at 10% 20%, rgba(66, 133, 244, 0.15) 0%, transparent 70%);
}
.nb-ps-card-dot::before {
    background: radial-gradient(circle at 10% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}
.nb-ps-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.05);
}
.nb-ps-card:hover::before {
    opacity: 1;
}
.nb-ps-card-google:hover {
    border-color: rgba(66, 133, 244, 0.4);
    box-shadow: 0 20px 45px -15px rgba(66, 133, 244, 0.25), 0 0 0 1px rgba(66, 133, 244, 0.2);
}
.nb-ps-card-dot:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 45px -15px rgba(245, 158, 11, 0.25), 0 0 0 1px rgba(245, 158, 11, 0.2);
}

/* Framed Physical Plaque Image */
.nb-ps-frame {
    width: 185px;
    height: 126px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.nb-ps-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nb-ps-card:hover .nb-ps-frame img {
    transform: scale(1.06);
}
.nb-ps-frame-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    border-radius: inherit;
}

/* Body Content */
.nb-ps-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nb-ps-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 700 0.63rem/1 var(--font-ui, Inter, system-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    width: fit-content;
}
.nb-ps-badge.google {
    background: rgba(66, 133, 244, 0.12);
    border: 1px solid rgba(66, 133, 244, 0.32);
    color: #93c5fd;
}
.nb-ps-badge.google svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.nb-ps-badge.dot {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}
.nb-ps-badge.dot img {
    height: 14px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}
.nb-ps-card h4 {
    font: 700 1.08rem/1.25 var(--font-display, 'Playfair Display', serif);
    letter-spacing: -0.015em;
    color: #ffffff !important;
    margin: 0 0 5px;
}
.nb-ps-card p {
    font: 400 0.77rem/1.5 var(--font-ui, Inter, system-ui);
    color: rgba(255, 255, 255, 0.62) !important;
    margin: 0 0 10px;
}
.nb-ps-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nb-ps-tags span {
    font: 600 0.62rem/1 var(--font-ui, Inter, system-ui);
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}
.nb-ps-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.nb-ps-arrow-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nb-ps-card:hover .nb-ps-arrow-circle {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(2px);
}

@media (max-width: 1080px) {
    .nb-ps-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .nb-ps-frame {
        width: 100%;
        height: 140px;
    }
}
@media (max-width: 768px) {
    .nb-prestige-strip {
        padding: 16px 14px;
        margin-bottom: 2rem;
        border-radius: 18px;
    }
    .nb-ps-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }
    .nb-ps-header-left {
        gap: 10px;
    }
    .nb-ps-spark {
        font-size: 0.95rem;
    }
    .nb-ps-kicker {
        font-size: 0.58rem;
        letter-spacing: 0.14em;
    }
    .nb-ps-title {
        font-size: 1.05rem;
        line-height: 1.25;
    }
    .nb-ps-sub {
        font-size: 0.72rem;
        line-height: 1.35;
        margin-top: 2px;
    }
    .nb-ps-view-btn {
        padding: 5px 13px;
        font-size: 0.68rem;
        align-self: flex-start;
    }
    .nb-ps-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .nb-ps-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 8px 12px 8px 8px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.09);
        position: relative;
        min-height: 58px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    .nb-ps-card:active {
        background: rgba(255, 255, 255, 0.08);
        transform: scale(0.99);
    }
    .nb-ps-frame {
        width: 64px;
        height: 46px;
        border-radius: 9px;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .nb-ps-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .nb-ps-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding-right: 32px;
    }
    .nb-ps-badge {
        font-size: 0.52rem;
        letter-spacing: 0.08em;
        padding: 2px 6px;
        margin-bottom: 1px;
        border-radius: 999px;
        gap: 4px;
        font-weight: 700;
    }
    .nb-ps-badge.google svg {
        width: 9px;
        height: 9px;
    }
    .nb-ps-badge.dot img {
        height: 10px;
    }
    .nb-ps-card h4 {
        font-size: 0.84rem;
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        color: #ffffff !important;
        letter-spacing: -0.01em;
    }
    .nb-ps-card p,
    .nb-ps-tags {
        display: none !important;
    }
    .nb-ps-card-footer {
        position: static;
        margin: 0;
    }
    .nb-ps-arrow-circle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.16);
    }
    .nb-ps-arrow-circle svg {
        width: 11px;
        height: 11px;
    }
}



/* ---------- 9. Free Books → "Books should keep moving" ---------- */
.nb-fb { background: #fbf9f5; }
.nb-fb .nb-ghost, .nb-fb .nb-hands, .nb-fb .nb-map, .nb-fb .nb-xchg, .nb-fb .nb-char, .nb-fb .nb-shape { display: none !important; }
.nb-fb .nb-fb__left img { display: block !important; }
.nb-fb__head { text-align: center; margin-bottom: 34px; display: flex; flex-direction: column; align-items: center; }
.nb-fb__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #f6efd6; font: 700 0.68rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #111110; }
.nb-fb__eyebrow svg { width: 16px; height: 16px; stroke: #e2b64b; fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.nb-fb__title { position: relative; display: inline-block; margin: 18px 0 20px; font: 800 clamp(2.2rem, 5vw, 3.6rem)/1.05 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.03em; color: #111110; }
.nb-fb__title span { position: relative; display: inline-block; white-space: nowrap; }
.nb-fb__title span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; border-radius: 4px; background: #f3cf5c; z-index: -1; transform: rotate(-0.6deg); }
.nb-fb__title .spark { position: absolute; right: -26px; top: 8px; width: 18px; height: 18px; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.nb-fb__ways { display: flex; align-items: center; justify-content: center; gap: 18px; }
.nb-fb__ways span { display: inline-flex; align-items: center; gap: 10px; font: 700 0.72rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #111110; }
.nb-fb__ways svg { width: 28px; height: 28px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-fb__ways i { width: 4px; height: 4px; border-radius: 50%; background: rgba(17,17,16,0.3); }

.nb-fb__card { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: stretch; }
/* left notebook page */
.nb-fb__left { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fdfcf9; border: 1px solid rgba(17,17,16,0.1); overflow: hidden; padding: 22px 22px 22px 44px; text-decoration: none; color: inherit; box-shadow: 0 24px 50px -36px rgba(0,0,0,0.3); }
.nb-fb__spiral { position: absolute; left: 10px; top: 26px; bottom: 26px; width: 16px; background: repeating-linear-gradient(to bottom, transparent 0 14px, rgba(17,17,16,0.28) 14px 16px, transparent 16px 24px); border-radius: 8px; }
.nb-fb__spiral::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, rgba(17,17,16,0.18) 0 22px, transparent 22px 24px); }
.nb-fb__pills { display: flex; gap: 8px; margin-bottom: 14px; }
.nb-fb__pills b { padding: 7px 14px; border-radius: 999px; font: 800 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #111110; }
.nb-fb__pills .g, .nb-fb__tile.g .art, .nb-fb__stats i.g { background: #e4ecfb; } .nb-fb__pills .v, .nb-fb__tile.v .art, .nb-fb__stats i.v { background: #e3f1e5; } .nb-fb__pills .s, .nb-fb__tile.s .art, .nb-fb__stats i.s { background: #fbf0d2; }
.nb-fb__left img { width: 100%; height: auto; display: block; border-radius: 16px; flex: 1; object-fit: cover; min-height: 0; }
.nb-fb__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; padding: 16px 6px; border-radius: 18px; background: #fff; border: 1px solid rgba(17,17,16,0.08); text-align: center; }
.nb-fb__stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 1px solid rgba(17,17,16,0.08); padding: 0 8px; }
.nb-fb__stats > div:last-child { border-right: 0; }
.nb-fb__stats i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; }
.nb-fb__stats i svg { width: 18px; height: 18px; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nb-fb__stats b { font: 800 1.25rem/1 var(--font-ui, Inter, system-ui); color: #111110; letter-spacing: -0.02em; }
.nb-fb__stats small { font: 500 0.74rem/1.2 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); }
.nb-fb__claim { position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.8rem/1 var(--font-display, 'Playfair Display', serif); box-shadow: 0 10px 20px -12px rgba(0,0,0,0.5); border: 0; cursor: pointer; transition: transform 0.25s; }
.nb-fb__claim svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-fb__claim:hover { transform: translateY(-2px); }
/* right tiles */
.nb-fb__right { display: flex; flex-direction: column; gap: 14px; }
.nb-fb__tile { position: relative; display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 14px; padding: 0; border-radius: 20px; border: 1px solid rgba(17,17,16,0.08); background: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s; }
.nb-fb__tile.g { background: #f1f5fd; } .nb-fb__tile.v { background: #eef6f0; } .nb-fb__tile.s { background: #fdf7e6; }
.nb-fb__tile:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(0,0,0,0.35); }
.nb-fb__tile .art { align-self: stretch; display: grid; place-items: center; padding: 14px 10px; }
.nb-fb__tile .art svg { width: 100%; height: auto; max-height: 96px; }
.nb-fb__tile .txt { padding: 16px 0; }
.nb-fb__tile .avs { display: flex; margin-bottom: 6px; } .nb-fb__tile .avs i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: block; overflow: hidden; } .nb-fb__tile .avs i:first-child { margin-left: 0; } .nb-fb__tile .avs svg { width: 100%; height: 100%; display: block; }
.nb-fb__tile h3 { font: 800 1.05rem/1.1 var(--font-ui, Inter, system-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #111110; margin: 0 0 4px; }
.nb-fb__tile p { font: 400 0.86rem/1.4 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.62); margin: 0; }
.nb-fb__tile .go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-right: 14px; transition: transform 0.3s; }
.nb-fb__tile.g .go { background: #c9d9f7; } .nb-fb__tile.v .go { background: #c9e7d0; } .nb-fb__tile.s .go { background: #f6d88a; }
.nb-fb__tile .go svg { width: 16px; height: 16px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-fb__tile:hover .go { transform: translateX(3px); }
/* map */
.nb-fb__map { border-radius: 20px; border: 1px solid rgba(17,17,16,0.08); background: #fff; overflow: hidden; }
.nb-fb__map svg { width: 100%; height: auto; display: block; background: #fbfaf6; }
.nb-fb__map text { font: 600 10px var(--font-ui, Inter, system-ui); fill: #111110; }
.nb-fb__map .pin .t { font-weight: 800; font-size: 11px; } .nb-fb__map .pin .s { font-weight: 500; font-size: 9.5px; fill: rgba(17,17,16,0.6); }
.nb-fb__map .pin rect { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); }
.nb-fb__map .route { stroke-dashoffset: 0; animation: nbRoute 6s linear infinite; } @keyframes nbRoute { to { stroke-dashoffset: -100; } }
html.nb-no-motion .nb-fb__map .route { animation: none; }
.nb-fb__legend { display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-top: 1px solid rgba(17,17,16,0.08); font: 500 0.78rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-fb__legend span { display: inline-flex; align-items: center; gap: 7px; } .nb-fb__legend i { width: 9px; height: 9px; border-radius: 50%; } .nb-fb__legend i.g { background: #3b5bd6; } .nb-fb__legend i.v { background: #2f9e5a; } .nb-fb__legend i.s { background: #f0b429; }
.nb-fb__legend em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: rgba(17,17,16,0.7); padding-left: 16px; border-left: 1px solid rgba(17,17,16,0.1); }
.nb-fb__legend em svg { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
    .nb-fb__card { grid-template-columns: 1fr; }
    .nb-fb__tile { grid-template-columns: 96px 1fr 44px; }
    .nb-fb__title .spark { right: -20px; top: 2px; }
}
@media (max-width: 520px) {
    .nb-fb__left { padding: 18px 16px 16px 34px; }
    .nb-fb__claim { position: static; margin-top: 12px; align-self: flex-start; }
    .nb-fb__stats b { font-size: 1.05rem; } .nb-fb__stats small { font-size: 0.66rem; }
    .nb-fb__legend { flex-wrap: wrap; gap: 10px 14px; } .nb-fb__legend em { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
    .nb-fb__ways { gap: 12px; } .nb-fb__ways span { font-size: 0.64rem; gap: 6px; } .nb-fb__ways svg { width: 22px; height: 22px; }
}

/* ---------- 10. Buy Books → "Find Your Books" ---------- */
#browse-courses.nb-fyb { background: #fbf9f5 !important; }
.nb-fyb .nb-ghost, .nb-fyb .nb-shape, .nb-fyb .nb-shelf, .nb-fyb .nb-course-tag { display: none !important; }
.nb-fyb__head { display: flex; flex-direction: column; align-items: center; }
.nb-fyb__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: #f6e7bd; font: 700 0.68rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #111110; clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); }
.nb-fyb__eyebrow svg { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nb-fyb__title { position: relative; display: inline-block; margin: 20px 0 14px; font: 800 clamp(2.4rem, 5.4vw, 4rem)/1.05 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.03em; color: #111110; }
.nb-fyb__title span { position: relative; display: inline-block; white-space: nowrap; }
.nb-fyb__title span::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -6px; height: 5px; border-radius: 3px; background: #f0b429; transform: rotate(-0.5deg); }
.nb-fyb__title .spark { position: absolute; right: -30px; bottom: 10px; width: 20px; height: 20px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nb-fyb__sub { font: 400 1.05rem/1.5 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }

.nb-fyb #course-selection-container { gap: 24px; }
.nb-fyb__card { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 10px; min-height: 250px; padding: 26px 20px 26px 30px; border-radius: 24px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--fyb) 22%, transparent); box-shadow: 0 20px 44px -34px rgba(0,0,0,0.25); overflow: hidden; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s, border-color 0.4s; }
.nb-fyb__card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -34px rgba(0,0,0,0.35); border-color: color-mix(in srgb, var(--fyb) 45%, transparent); }
.nb-fyb__pop { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.6rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.nb-fyb__pop svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.nb-fyb__tag { display: inline-block; padding: 7px 13px; border-radius: 999px; background: var(--fybSoft); color: var(--fyb); font: 800 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.nb-fyb__card h3 { font: 800 clamp(1.6rem, 2.6vw, 2.3rem)/1.05 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.02em; color: #111110; margin: 0 0 10px; }
.nb-fyb__bar { display: block; width: 34px; height: 3.5px; border-radius: 2px; background: var(--fyb); margin-bottom: 12px; }
.nb-fyb__card .nb-fyb__body p { font: 500 0.9rem/1.6 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.66); margin: 0 0 18px; }
.nb-fyb__cta { display: inline-flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(17,17,16,0.1); font: 700 0.95rem/1 var(--font-ui, Inter, system-ui); color: #111110; width: 100%; }
.nb-fyb__cta i { width: 34px; height: 34px; border-radius: 50%; background: var(--fybSoft); color: var(--fyb); display: grid; place-items: center; transition: transform 0.3s, background 0.3s; }
.nb-fyb__cta i svg { width: 15px; height: 15px; }
.nb-fyb__card:hover .nb-fyb__cta i { transform: translateX(4px); }
.nb-fyb__art { align-self: end; }
.nb-fyb__art svg { width: 100%; max-width: 210px; height: auto; display: block; margin: 0 auto; }
.nb-fyb__art text { user-select: none; }

.nb-fyb__popular { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding: 14px 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(17,17,16,0.08); }
.nb-fyb__popular b { display: inline-flex; align-items: center; gap: 9px; font: 700 0.95rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-fyb__popular b svg { width: 18px; height: 18px; stroke: #2f6bd8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-fyb__popular i { width: 1px; height: 26px; background: rgba(17,17,16,0.12); }
.nb-fyb__popular span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 600 0.85rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-fyb__popular span svg { width: 16px; height: 16px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nb-fyb__popular .c-sci { background: #eef3fc; } .nb-fyb__popular .c-sci svg { stroke: #2f6bd8; }
.nb-fyb__popular .c-sci2 { background: #eef3fc; } .nb-fyb__popular .c-sci2 svg { stroke: #2f6bd8; }
.nb-fyb__popular .c-arts { background: #fdefe7; } .nb-fyb__popular .c-arts svg { stroke: #e0662e; }
.nb-fyb__popular .c-com { background: #e9f6ef; } .nb-fyb__popular .c-com svg { stroke: #1e9e63; }
.nb-fyb__popular .c-bca { background: #f1eafc; } .nb-fyb__popular .c-bca svg { stroke: #7c3aed; }
.nb-fyb__popular .all { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 700 0.88rem/1 var(--font-ui, Inter, system-ui); color: #2f6bd8; text-decoration: none; }
.nb-fyb__popular .all svg { width: 15px; height: 15px; stroke: #2f6bd8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
.nb-fyb__popular .all:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
    .nb-fyb__card { grid-template-columns: 1fr; min-height: 0; padding: 22px 20px; }
    .nb-fyb__art svg { max-width: 170px; }
    .nb-fyb__pop { top: 12px; right: 12px; }
    .nb-fyb__popular { gap: 8px; padding: 14px 16px; }
    .nb-fyb__popular i { display: none; }
    .nb-fyb__popular .all { width: 100%; justify-content: flex-end; }
    .nb-fyb__title .spark { right: -24px; }
}
/* neutralize old course-card layers inside new fyb cards */
.nb-fyb__card > div { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transform: none !important; border: 0 !important; }
.nb-fyb__card:hover > div { transform: none !important; box-shadow: none !important; }
.nb-fyb__card h3::after { content: none !important; }
.nb-fyb__card .nb-fyb__body { overflow: visible !important; height: auto !important; position: relative !important; }
.nb-fyb__card .nb-fyb__art { overflow: visible !important; height: auto !important; position: relative !important; }
.nb-fyb__card .nb-popular { display: none !important; }

/* ---------- 11. Resource modal → warm "Notes" redesign (nbm) ---------- */
#unifiedStudyModal > div[onclick].nbm-shell { background: #fdfbf6 !important; max-width: 760px; }
#unifiedStudyModal .nbm-shell::before { content: none !important; }
#unifiedStudyModal .nbm-head { padding: 14px 22px 0 !important; border-bottom: 1px solid rgba(17,17,16,0.07) !important; background: #fdfbf6 !important; }
#unifiedStudyModal .nbm-body { overflow-y: auto !important; display: block !important; }
#unifiedStudyModal .nbm-body > div:not(.nbm-hero) { height: auto !important; display: block !important; }
#unifiedStudyModal .nbm-body > div > .overflow-y-auto { overflow-y: visible !important; height: auto !important; flex: none !important; }
/* top row */
.nbm-top { display: flex; align-items: center; gap: 12px; }
.nbm-step { white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #f6d88a; color: #111110; font: 800 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.nbm-top > b { white-space: nowrap; font: 700 1rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nbm-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
#unifiedStudyModal .nbm-upload { border-radius: 999px !important; white-space: nowrap; }
.nbm-x { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(17,17,16,0.16); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background 0.25s, border-color 0.25s; }
.nbm-x svg { width: 16px; height: 16px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; transition: stroke 0.25s; }
.nbm-x:hover { background: #111110; border-color: #111110; } .nbm-x:hover svg { stroke: #fff; }
/* crumbs */
.nbm-crumbs { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 0.82rem/1 var(--font-ui, Inter, system-ui); }
.nbm-crumbs button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(17,17,16,0.14); background: transparent; display: grid; place-items: center; cursor: pointer; margin-right: 2px; }
.nbm-crumbs button svg { width: 15px; height: 15px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nbm-crumbs button:hover { background: rgba(17,17,16,0.06); }
.nbm-crumbs i { font-style: normal; color: #111110; } .nbm-crumbs i.lnk { color: #2f6bd8; }
.nbm-crumbs em { font-style: normal; color: rgba(17,17,16,0.35); }
/* hero banner (now inside scrollable area) */
.nbm-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 22px 12px; }
#unifiedStudyModal .nbm-hero h2 { font: 800 clamp(1.5rem, 3.5vw, 2rem)/1.1 var(--font-display, 'Playfair Display', serif) !important; color: #111110 !important; letter-spacing: -0.02em; }
#unifiedStudyModal .nbm-hero h2::before { content: none !important; }
.nbm-hero p { font: 400 0.82rem/1.45 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); margin-top: 6px; }
.nbm-illus { width: 90px; height: auto; flex: none; margin-bottom: 2px; }
@media (max-width: 520px) { .nbm-illus { width: 68px; } .nbm-hero { padding: 12px 16px 8px; } }
/* tabs → premium capsule pills */
#unifiedStudyModal .nbm-tabs { gap: 6px !important; padding: 10px 22px 14px !important; margin: 0 -22px !important; overflow-x: auto; }
#unifiedStudyModal .nbm-tabs > button.nbm-tab {
    background: rgba(17,17,16,0.04) !important; border: none !important; border-radius: 999px !important;
    box-shadow: none !important; transform: none !important; flex: none;
    font: 600 0.78rem/1 var(--font-ui, Inter, system-ui) !important; letter-spacing: 0.01em !important; text-transform: none !important;
    color: rgba(17,17,16,0.5) !important; padding: 8px 14px !important;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
#unifiedStudyModal .nbm-tabs > button.nbm-tab:hover { background: rgba(17,17,16,0.08) !important; color: #111110 !important; }
#unifiedStudyModal .nbm-tabs > button.nbm-tab.nbm-on {
    background: #111110 !important; color: #fff !important; font-weight: 700 !important;
    box-shadow: 0 2px 8px -2px rgba(17,17,16,0.3) !important;
}
#unifiedStudyModal .nbm-tabs > button.nbm-tab.nbm-on::after { content: none !important; }
/* body bg */
#unifiedStudyModal .nbm-shell .flex-1.min-h-0.w-full.relative { background: #fdfbf6 !important; }
/* search: back to rounded pill */
#unifiedStudyModal .nbm-shell .flex-shrink-0.px-6.pt-6.pb-4 { padding: 18px 22px 6px !important; }
#unifiedStudyModal .nbm-shell .flex-shrink-0.px-6.pt-6.pb-4 > .relative > .relative {
    background: #fff !important; border: 1px solid rgba(17,17,16,0.1) !important; border-radius: 999px !important;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,0.1) !important; padding: 6px 6px 6px 18px !important;
}
#unifiedStudyModal .nbm-shell .flex-shrink-0.px-6.pt-6.pb-4 > .relative > .relative > svg:first-child { display: block; }
#unifiedStudyModal .nbm-shell #smartSearchInput { font-family: var(--font-ui, Inter, system-ui) !important; font-size: 0.92rem !important; }
#unifiedStudyModal .nbm-shell #smartSearchInput::placeholder { font-style: normal; color: rgba(17,17,16,0.4); }
#unifiedStudyModal .nbm-shell #rightSearchBtn { background: #111110 !important; padding: 9px !important; }
#unifiedStudyModal .nbm-shell #rightSearchBtn svg { stroke: #fff; }
/* section heading */
.nbm-h { margin: 6px 2px 16px; }
.nbm-h h4 { position: relative; display: inline-block; font: 700 1.35rem/1.1 var(--font-display, 'Playfair Display', serif); color: #111110; }
.nbm-h h4::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 34px; height: 3px; border-radius: 2px; background: #f0b429; }
.nbm-h p { margin-top: 10px; font: 400 0.8rem/1.4 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.5); }
/* rows */
#unifiedStudyModal .nbm-shell .space-y-3 > * + *, #unifiedStudyModal .nbm-shell .space-y-4 > * + * { margin-top: 12px !important; }
.nbm-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px !important; border-radius: 18px !important; background: #fff !important; border: 1px solid rgba(17,17,16,0.08) !important; box-shadow: 0 4px 14px -10px rgba(0,0,0,0.12) !important; text-align: left; cursor: pointer; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s !important; transform: none !important; }
.nbm-row:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 24px -14px rgba(0,0,0,0.2) !important; }
.nbm-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--bg, #eee); display: grid; place-items: center; flex: none; }
.nbm-ico svg { width: 22px; height: 22px; stroke: var(--c, #111110); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nbm-row__txt { flex: 1; min-width: 0; }
.nbm-row__txt h3, .nbm-row__txt h4 { font: 700 1.02rem/1.2 var(--font-display, 'Playfair Display', serif) !important; color: #111110 !important; letter-spacing: -0.01em; }
.nbm-row__txt > p { margin-top: 4px !important; font: 500 0.76rem/1.3 var(--font-ui, Inter, system-ui) !important; color: rgba(17,17,16,0.5) !important; letter-spacing: 0 !important; text-transform: none !important; display: flex; align-items: center; gap: 6px; }
.nbm-meta svg { width: 13px; height: 13px; stroke: rgba(17,17,16,0.45); fill: none; stroke-width: 1.7; flex: none; }
.nbm-chev { width: 18px; height: 18px; stroke: rgba(17,17,16,0.45); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform 0.25s, stroke 0.25s; }
.nbm-row:hover .nbm-chev { transform: translateX(3px); stroke: #111110; }
/* sem chips */
.nbm-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 14px; position: sticky; top: -6px; background: #fdfbf6; z-index: 2; }
.nbm-chips button { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.12); background: #fff; font: 600 0.8rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.7); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.nbm-chips button:hover { border-color: rgba(17,17,16,0.3); color: #111110; }
.nbm-chips button.nbm-on { background: #fbe3a3; border-color: #edc96a; color: #111110; font-weight: 700; }
/* semester head */
.nbm-semhead { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 12px; }
.nbm-semhead h5 { position: relative; font: 700 1.15rem/1.1 var(--font-display, 'Playfair Display', serif); color: #111110; }
.nbm-semhead h5::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 28px; height: 3px; border-radius: 2px; background: #f0b429; }
.nbm-semhead span { font: 600 0.78rem/1 var(--font-ui, Inter, system-ui); color: #2f6bd8; }
/* file rows */
.nbm-file { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 16px; background: #fff; border: 1px solid rgba(17,17,16,0.08); box-shadow: 0 3px 12px -9px rgba(0,0,0,0.12); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; }
.nbm-file:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(0,0,0,0.18); }
.nbm-pdf { width: 42px; height: 46px; border-radius: 10px; background: #fdeeee; border: 1px solid #f5d2d2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: none; }
.nbm-pdf svg { width: 16px; height: 16px; stroke: #d64545; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nbm-pdf b { font: 800 0.5rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.08em; color: #d64545; }
.nbm-file__txt { flex: 1; min-width: 0; }
.nbm-file__txt h4 { font: 600 0.9rem/1.3 var(--font-ui, Inter, system-ui) !important; color: #111110 !important; overflow-wrap: anywhere; }
.nbm-file__txt p { margin-top: 3px !important; }
.nbm-share { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.12); background: #fff; font: 600 0.76rem/1 var(--font-ui, Inter, system-ui); color: #111110; cursor: pointer; flex: none; transition: background 0.25s, border-color 0.25s; }
.nbm-share svg { width: 13px; height: 13px; stroke: #111110; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nbm-share:hover { background: rgba(17,17,16,0.05); border-color: rgba(17,17,16,0.3); }
.nbm-view { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: #f6d88a; border: 1px solid #edc96a; font: 700 0.78rem/1 var(--font-ui, Inter, system-ui); color: #111110; flex: none; transition: background 0.25s, transform 0.25s; }
.nbm-view svg { width: 13px; height: 13px; stroke: #111110; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nbm-view:hover { background: #f3cf5c; transform: translateY(-1px); }
@media (max-width: 560px) {
    .nbm-share { display: none; }
    .nbm-view { padding: 8px 12px; }
    .nbm-top > b { font-size: 0.88rem; }
    .nbm-title p br { display: none; }
}
/* disable old v7 modal decorations that clash */
#unifiedStudyModal .nbm-shell .space-y-3 .w-12.h-12.rounded-full::before, #unifiedStudyModal .nbm-shell .space-y-3 .w-10.h-10.rounded-full::before { content: none !important; }

/* ---------- 12. How it works → Buy. Meet. Exchange. ---------- */
#how-it-works.nb-hiw { background: #f6f4ef !important; }
.nb-hiw .nb-ghost, .nb-hiw .nb-shape { display: none !important; }
.nb-hiw__hero { position: relative; border-radius: 26px; background: #fdfdfb; border: 1px solid rgba(17,17,16,0.08); box-shadow: 0 22px 46px -38px rgba(0,0,0,0.25); overflow: hidden; margin-bottom: 34px; }
.nb-hiw__hero picture { display: block; }
.nb-hiw__hero img { display: block; width: 100%; height: auto; }
.nb-hiw__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 6%, 72px); width: 58%; }
.nb-hiw__copy h2 { position: relative; display: inline-block; align-self: flex-start; font: 800 clamp(1.6rem, 4.2vw, 3.4rem)/1.08 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.03em; color: #111110; }
.nb-hiw__copy h2 span { position: relative; display: inline-block; white-space: nowrap; }
.nb-hiw__copy h2 span::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -7px; height: 6px; border-radius: 3px; background: #f0b429; transform: rotate(-0.5deg); }
.nb-hiw__copy h2 .spark { position: absolute; right: -24px; top: -8px; width: 18px; height: 18px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nb-hiw__copy p { margin-top: clamp(12px, 2.4vw, 24px); font: 400 clamp(0.8rem, 1.5vw, 1.15rem)/1.6 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.62); }
.nb-hiw__story { display: block; width: 100%; height: auto; border-radius: 22px; }
.nb-hiw__foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; font: 500 0.92rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); flex-wrap: wrap; }
.nb-hiw__foot .ok { display: inline-flex; align-items: center; gap: 9px; color: #111110; }
.nb-hiw__foot .ok svg { width: 20px; height: 20px; stroke: #c07b17; fill: rgba(240,180,41,0.18); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nb-hiw__foot i { width: 1px; height: 20px; background: rgba(17,17,16,0.15); }
@media (min-width: 921px) {
    /* Keep the desktop copy clear of the illustration on the right. */
    .nb-hiw__copy {
        width: 50%;
        padding-right: clamp(34px, 7vw, 96px);
    }
    .nb-hiw__copy h2,
    .nb-hiw__copy p {
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .nb-hiw__hero img { min-height: 220px; object-fit: cover; object-position: 85% center; }
    .nb-hiw__copy { width: 54%; background: linear-gradient(90deg, #fdfdfb 60%, rgba(253,253,251,0.85) 85%, transparent 100%); padding: 18px 10px 18px 16px; }
    .nb-hiw__copy h2 { font-size: 1.4rem !important; }
    .nb-hiw__copy p { font-size: 0.72rem !important; line-height: 1.5; }
    .nb-hiw__copy p br { display: none; }
    .nb-hiw__foot i { display: none; }
}
.nb-synov, .nb-synov * { hyphens: none !important; -webkit-hyphens: none !important; }

/* ---------- 13. PWA install popup → premium paper modal ---------- */
#pwa-install-popup {
    position: fixed !important; inset: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important;
    width: 100% !important; max-width: none !important; transform: none !important;
    background: rgba(17,17,16,0.45) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px !important;
    display: none; align-items: center; justify-content: center; z-index: 2147483000 !important;
    opacity: 0; transition: opacity 0.35s ease !important;
}
#pwa-install-popup.nbp-on { display: flex !important; opacity: 1; }
.nbp__card {
    position: relative; width: min(880px, 100%); max-height: 92vh; overflow: hidden;
    background: #fdfbf6; border: 1px solid rgba(17,17,16,0.1); border-radius: 28px;
    box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5);
    display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
    animation: nbModalRise 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.nbp__card::after { content: ""; position: absolute; top: -1px; right: 40px; width: 15px; height: 38px; background: #dc2626; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
#pwa-close-btn {
    position: absolute !important; top: 16px !important; right: 16px !important; z-index: 10; width: 34px !important; height: 34px !important;
    border-radius: 50% !important; border: 1.5px solid rgba(17,17,16,0.16) !important; background: transparent !important;
    display: grid !important; place-items: center; cursor: pointer; color: #111110 !important; transition: background 0.25s, border-color 0.25s;
}
#pwa-close-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
#pwa-close-btn:hover { background: #111110 !important; border-color: #111110 !important; color: #fff !important; }
.nbp__left { padding: clamp(26px, 5vw, 54px); }
.nbp__kick { display: inline-flex; align-items: center; gap: 8px; font: 700 0.64rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,16,0.5); margin-bottom: 16px; }
.nbp__kick i { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; }
.nbp__left h3 { font: 700 clamp(1.9rem, 4vw, 2.9rem)/1.08 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.02em; color: #111110; margin: 0 0 14px; }
.nbp__left h3 em { font-style: italic; position: relative; white-space: nowrap; }
.nbp__left h3 em::after { content: ""; position: absolute; left: 0; right: 4px; bottom: -7px; height: 5px; border-radius: 3px; background: #f0b429; transform: rotate(-1.2deg); }
.nbp__left > p { font: 400 clamp(0.9rem, 1.2vw, 1.02rem)/1.55 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.62); margin: 0 0 18px; }
.nbp__left ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.nbp__left li { display: flex; align-items: center; gap: 10px; font: 500 0.88rem/1.3 var(--font-ui, Inter, system-ui); color: #111110; }
.nbp__left li svg { width: 18px; height: 18px; flex: none; padding: 2px; border-radius: 50%; background: #faeed2; stroke: #c07b17; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#pwa-install-btn {
    display: inline-flex !important; align-items: center; gap: 10px; width: auto !important;
    background: #111110 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
    font: 700 1rem/1 var(--font-display, 'Playfair Display', serif) !important; padding: 15px 28px !important; cursor: pointer;
    box-shadow: 0 14px 28px -14px rgba(0,0,0,0.55) !important; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s !important;
}
#pwa-install-btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pwa-install-btn:hover { transform: translateY(-2px); background: #111110 !important; }
.nbp__hand { display: block; margin-top: 16px; font: 600 1.05rem/1.1 'Caveat', cursive; color: rgba(17,17,16,0.6); transform: rotate(-1.5deg); }
.nbp__hand svg { display: inline-block; width: 30px; height: 13px; stroke: rgba(17,17,16,0.5); fill: none; stroke-width: 1.6; stroke-linecap: round; vertical-align: -2px; margin-left: 6px; }
/* right side */
.nbp__right { position: relative; align-self: stretch; min-height: 420px; background: linear-gradient(180deg, #fbf3df 0%, #fdfbf6 80%); overflow: hidden; }
.nbp__illus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.nbp__phone { position: absolute; right: 6%; bottom: -6%; width: 46%; max-width: 210px; aspect-ratio: 1470 / 3000; filter: drop-shadow(-18px 24px 30px rgba(0,0,0,0.28)); transform: rotate(4deg); }
.nbp__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.nbp__screen { position: absolute; left: 5.3%; top: 6.8%; right: 5.3%; bottom: 2.4%; z-index: 1; background: #fdfdfb; border-radius: 14% / 7%; overflow: hidden; padding: 14% 8% 0; }
.nbp__screen .s-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12%; }
.nbp__screen .s-nav b { font: 800 0.6rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.06em; color: #111110; }
.nbp__screen .s-nav b span { color: #dc2626; }
.nbp__screen .s-nav i { width: 14px; height: 2px; background: #111110; box-shadow: 0 4px 0 #111110; border-radius: 2px; }
.nbp__screen .s-hero u { display: block; text-decoration: none; font: 800 0.92rem/1.1 var(--font-display, 'Playfair Display', serif); color: #111110; }
.nbp__screen .s-hero em { display: block; font: italic 700 0.92rem/1.1 var(--font-display, 'Playfair Display', serif); color: #111110; }
.nbp__screen .s-hero small { display: block; margin-top: 7px; font: 400 0.42rem/1.4 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
.nbp__screen .s-cta { display: inline-block; margin-top: 9px; padding: 5px 12px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.44rem/1 var(--font-ui, Inter, system-ui); }
.nbp__screen .s-live { margin-top: 13%; padding: 5px 7px; border-radius: 6px; background: #fff; border: 1px solid rgba(17,17,16,0.08); font: 500 0.4rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); white-space: nowrap; overflow: hidden; }
.nbp__screen .s-live b { color: #16a34a; font-weight: 700; margin-right: 5px; font-size: 0.36rem; letter-spacing: 0.08em; }
.nbp__screen .s-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.nbp__screen .s-tiles i { display: block; aspect-ratio: 1; border-radius: 6px; background: var(--t, #eee); border: 1px solid rgba(17,17,16,0.05); }
.nbp__screen .s-row { display: grid; gap: 5px; margin-top: 9px; }
.nbp__screen .s-row span { display: block; height: 14px; border-radius: 5px; background: #fff; border: 1px solid rgba(17,17,16,0.07); }
@media (max-width: 760px) {
    .nbp__card { grid-template-columns: 1fr; max-height: 94vh; overflow: hidden auto; }
    .nbp__right { order: -1; min-height: 240px; }
    .nbp__illus { inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .nbp__phone { right: 5%; bottom: -18%; width: 38%; }
    #pwa-close-btn { right: 14px !important; top: 14px !important; background: rgba(253,251,246,0.9) !important; z-index: 10 !important; }
    .nbp__left { padding: 24px 24px 28px; }
    .nbp__hand { display: inline-block; margin-left: 12px; margin-top: 0; }
}

/* ---------- 14. Sidebar menu → paper ---------- */
#mobileMenu { background: #fdfbf6 !important; box-shadow: -30px 0 70px -30px rgba(0,0,0,0.35) !important; }
#mobileMenu .h-16 { border-color: rgba(17,17,16,0.08) !important; }
#mobileMenu .h-16 h2 { font: 800 1.05rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.04em; color: #111110; }
#mobileMenu .h-16 h2 .x { color: #dc2626; }
#mobileMenu #closeMenuBtn { border-radius: 999px; }
#mobileProfileSection { border-color: rgba(17,17,16,0.08) !important; }
/* install card */
#menuInstallApp { background: #fbf3df !important; border: 1px solid #edc96a !important; color: #111110 !important; border-radius: 16px !important; padding: 14px !important; align-items: center !important; }
#menuInstallApp:hover { background: #f8ecd0 !important; }
#menuInstallApp svg, #menuInstallApp i { color: #111110 !important; background: #f6d88a; border-radius: 10px; padding: 7px; width: 38px !important; height: 38px !important; flex: none; }
#menuInstallApp span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: 700 0.95rem/1.2 var(--font-ui, Inter, system-ui) !important; }
#menuInstallApp span::after { content: "Add to your device for faster access"; font: 400 0.74rem/1.35 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); margin-top: 3px; }
/* items */
#menu-nav .menu-item { border-radius: 12px !important; color: #111110 !important; font: 500 0.92rem/1.2 var(--font-ui, Inter, system-ui) !important; }
#menu-nav .menu-item:hover { background: rgba(17,17,16,0.05) !important; }
#menu-nav .menu-item svg, #menu-nav .menu-item i { color: rgba(17,17,16,0.75) !important; stroke-width: 1.7; }
#menu-nav .menu-item span { color: #111110 !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-weight: 500 !important; }
#menu-nav .text-xs.font-semibold { color: rgba(17,17,16,0.45) !important; letter-spacing: 0.18em !important; font-size: 0.62rem !important; }
#menu-nav .h-px { background: rgba(17,17,16,0.08) !important; }
/* footer */
.nb-menu-foot { margin-top: 18px; padding: 18px 4px 8px; border-top: 1px solid rgba(17,17,16,0.08); display: flex; align-items: center; gap: 14px; position: relative; }
.nb-menu-foot svg.books { width: 54px; height: 44px; flex: none; }
.nb-menu-foot .t b { display: block; font: 800 0.9rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-menu-foot .t small { display: block; margin-top: 4px; font: 400 0.72rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
.nb-menu-foot .t em { display: block; margin-top: 6px; font: 500 0.68rem/1 var(--font-ui, Inter, system-ui); font-style: normal; color: rgba(17,17,16,0.45); }
.nb-menu-foot .note { position: absolute; right: 0; top: 10px; width: 62px; height: 58px; background: #f9e9b8; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 6px 12px -8px rgba(0,0,0,0.3); font: 600 0.66rem/1.35 'Caveat', cursive; color: #111110; padding: 14px 6px 4px 9px; }
.nb-menu-foot .note::before { content: ""; position: absolute; top: -5px; left: 50%; width: 24px; height: 9px; margin-left: -12px; background: rgba(190,180,150,0.55); border-radius: 2px; }

/* ---------- 15. Course popup (groups) → editorial ---------- */
#courseModal .modal-content { background: #fdfbf6 !important; border-radius: 26px !important; max-width: 720px !important; }
#courseModalContent:has(.nbc) { padding: 0 !important; }
.nbc { padding: 30px 34px 0; }
.nbc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.nbc__badge { width: 58px; height: 58px; border-radius: 16px; background: #fbf3df; border: 1px solid #edc96a; display: grid; place-items: center; }
.nbc__badge svg { width: 28px; height: 28px; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nbc__head h3 { font: 800 1.7rem/1 var(--font-display, 'Playfair Display', serif); color: #111110; letter-spacing: -0.02em; }
.nbc__head p { margin-top: 6px; font: 700 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,16,0.5); }
.nbc__mid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; border-top: 1px solid rgba(17,17,16,0.1); padding-top: 18px; margin-bottom: 16px; }
.nbc__intro h4 { font: 700 clamp(1.3rem, 2.6vw, 1.8rem)/1.15 var(--font-display, 'Playfair Display', serif); color: #111110; letter-spacing: -0.01em; }
.nbc__intro p { margin-top: 10px; font: 400 0.88rem/1.5 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); }
.nbc__art svg { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.nbc__rows { display: grid; gap: 12px; padding-bottom: 22px; }
.nbc__row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(17,17,16,0.08); box-shadow: 0 4px 14px -10px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; }
.nbc__row:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(0,0,0,0.2); }
.nbc__row i { width: 48px; height: 48px; border-radius: 50%; background: var(--bg, #eee); display: grid; place-items: center; flex: none; }
.nbc__row i svg { width: 24px; height: 24px; stroke: var(--c, #111110); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nbc__row .t { flex: 1; min-width: 0; }
.nbc__row b { font: 700 1.02rem/1.25 var(--font-ui, Inter, system-ui); color: #111110; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nbc__row b em { font: 600 0.68rem/1 var(--font-ui, Inter, system-ui); font-style: normal; padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--c); }
.nbc__row small { display: block; margin-top: 5px; font: 400 0.82rem/1.4 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
.nbc__row u { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(17,17,16,0.12); display: grid; place-items: center; flex: none; text-decoration: none; transition: background 0.25s, transform 0.25s; }
.nbc__row u svg { width: 16px; height: 16px; stroke: #111110; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nbc__row:hover u { background: #111110; transform: translateX(2px); } .nbc__row:hover u svg { stroke: #fff; }
.nbc__foot { display: flex; align-items: center; gap: 14px; background: #fbf3df; border-top: 1px solid #edc96a; margin: 0 -34px; padding: 18px 30px; }
.nbc__foot .bm { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid rgba(17,17,16,0.1); display: grid; place-items: center; flex: none; }
.nbc__foot .bm svg { width: 18px; height: 18px; stroke: #111110; fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.nbc__foot .tx { flex: 1; min-width: 0; }
.nbc__foot .tx b { display: block; font: 700 0.95rem/1.2 var(--font-ui, Inter, system-ui); color: #111110; }
.nbc__foot .tx small { display: block; margin-top: 3px; font: 400 0.78rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); }
.nbc__req { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; background: #111110; color: #fff; border: 0; font: 700 0.92rem/1 var(--font-display, 'Playfair Display', serif); cursor: pointer; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.5); transition: transform 0.3s; flex: none; }
.nbc__req svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nbc__req:hover { transform: translateY(-2px); }
@media (max-width: 620px) {
    .nbc { padding: 24px 20px 0; }
    .nbc__mid { grid-template-columns: 1fr; } .nbc__art { display: none; }
    .nbc__foot { margin: 0 -20px; padding: 16px 18px; flex-wrap: wrap; }
    .nbc__req { width: 100%; justify-content: center; }
    .nbc__row small { display: none; }
}

/* ---------- 16. AcademyX header + highlight box ---------- */
#academy-x { background: #fbf9f5 !important; }
.nbx-head__row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.nbx-eyebrow { padding: 9px 18px; border-radius: 999px; background: #fbf3df; border: 1px solid #edc96a; font: 700 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #111110; }
.nbx-head__row h2 { position: relative; font: 800 clamp(2.3rem, 4.6vw, 3.4rem)/1 var(--font-display, 'Playfair Display', serif) !important; letter-spacing: -0.03em; color: #111110; }
.nbx-head__row h2::after { content: ""; position: absolute; left: 34%; right: -4%; bottom: -8px; height: 4px; border-radius: 2px; background: #f0b429; transform: rotate(-1.4deg); }
.nbx-head__row .spark { width: 18px; height: 18px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linejoin: round; align-self: flex-start; }
.nbx-sub { margin-top: 18px; font: 400 1.05rem/1.5 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
#academy-x .nbx-box { background: #fbf3df !important; border: 1px solid #edc96a; color: #111110 !important; box-shadow: 0 24px 50px -40px rgba(0,0,0,0.3) !important; }
.nbx-box__illus svg { width: 200px; height: auto; }
#academy-x .nbx-box h3 { font: 800 clamp(1.6rem, 3vw, 2.3rem)/1.15 var(--font-display, 'Playfair Display', serif) !important; color: #111110; letter-spacing: -0.02em; }
#academy-x .nbx-box p { color: rgba(17,17,16,0.65) !important; opacity: 1 !important; font-size: 1rem !important; }
#academy-x .nbx-box p .counter-number { color: #111110; font-weight: 700; }
#academy-x .nbx-box .text-yellow-300 { color: #c07b17 !important; background: #f6d88a !important; border-radius: 6px; }
#academy-x .nbx-box a.button-animation { background: #111110 !important; color: #fff !important; font-family: var(--font-display, 'Playfair Display', serif) !important; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.55) !important; }
#academySearchInput { background: #fff; border: 1px solid rgba(17,17,16,0.1) !important; }
/* section headings inside academyx */
#academy-x [id$="-heading"] { position: relative; display: table; margin: 0 auto 30px; font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--font-display, 'Playfair Display', serif) !important; letter-spacing: -0.02em; color: #111110 !important; }
#academy-x [id$="-heading"]::after { content: ""; position: absolute; left: 18%; right: 30%; bottom: -7px; height: 3.5px; border-radius: 2px; background: #f0b429; transform: rotate(-1deg); }
/* courses-from strip */
.nbx-from { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; margin: 26px auto 30px; padding: 16px 26px; max-width: 900px; background: #fff; border: 1px solid rgba(17,17,16,0.07); border-radius: 18px; position: relative; }
.nbx-from::before { content: "Courses from"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 12px; background: #fbf9f5; font: 700 0.6rem/1.2 var(--font-ui, Inter, system-ui); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,16,0.45); white-space: nowrap; }
.nbx-from img { height: 26px; width: auto; object-fit: contain; }

/* ---------- 17. Featured AI cards ---------- */
.nbx-card { border-radius: 20px !important; border: 1px solid rgba(17,17,16,0.08) !important; box-shadow: 0 10px 30px -24px rgba(0,0,0,0.25) !important; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s !important; }
.nbx-card:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 44px -28px rgba(0,0,0,0.3) !important; scale: 1 !important; }
.nbx-card__media { position: relative; }
.nbx-card__media img { width: 100%; height: 170px; object-fit: cover; display: block; }
.nbx-card__prov { position: absolute; left: 14px; bottom: -12px; padding: 7px 14px; border-radius: 999px; background: #fbf3df; border: 1px solid #edc96a; font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.14em; text-transform: uppercase; color: #111110; }
.nbx-card__body { padding: 24px 20px 14px; }
.nbx-card__body .tl { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nbx-card__body h3 { font: 700 1.2rem/1.2 var(--font-display, 'Playfair Display', serif); color: #111110; letter-spacing: -0.01em; }
.nbx-card__body .tl img { height: 30px; width: auto; object-fit: contain; flex: none; }
.nbx-card__body .bar { display: block; width: 30px; height: 3px; border-radius: 2px; background: #f0b429; margin: 10px 0 12px; }
.nbx-card__body .dur { display: flex; align-items: center; gap: 8px; font: 500 0.85rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); }
.nbx-card__body .dur svg { width: 15px; height: 15px; stroke: rgba(17,17,16,0.55); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.nbx-card__go { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0; padding: 13px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.92rem/1 var(--font-display, 'Playfair Display', serif); }
.nbx-card__go svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nbx-card__more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: #fbf3df; border-top: 1px solid #edc96a; font: 700 0.66rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #111110; }
.nbx-card__more span { font-size: 1rem; line-height: 1; color: #c07b17; font-weight: 800; }

/* ---------- 18. Mobile bottom bar → premium paper dock ---------- */
@media (max-width: 767px) {
    .mobile-nav-bg { display: none !important; }
    .mobile-nav-item { color: #111110 !important; }
    .mobile-nav-item svg { stroke: #111110 !important; stroke-width: 1.6 !important; width: 22px !important; height: 22px !important; }
    .mobile-nav-item span, .mobile-nav-item .nav-label { font: 500 0.62rem/1 var(--font-ui, Inter, system-ui) !important; letter-spacing: 0.01em; color: rgba(17,17,16,0.55) !important; }
    .mobile-nav-item.active span, .mobile-nav-item.active .nav-label { color: #111110 !important; font-weight: 600 !important; }
    /* soft premium glow behind the active icon */
    .mobile-nav-item .icon-wrapper::before {
        content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
        transform: translate(-50%, -50%) scale(0.6); border-radius: 50%;
        background: radial-gradient(circle, rgba(240,180,41,0.32) 0%, rgba(240,180,41,0.12) 55%, transparent 75%);
        opacity: 0; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
        pointer-events: none; z-index: -1;
    }
    .mobile-nav-item.active .icon-wrapper::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .nb-blob { background: rgba(240,180,41,0.16) !important; }
}
.nbx-card { transform: none !important; rotate: none !important; }
.nbx-card:hover { transform: translateY(-4px) !important; }
@media (max-width: 767px) {
    .mobile-nav-item { padding: 6px 4px 5px !important; min-height: 0 !important; gap: 2px; }
    .nb-mlabel { display: block; font: 500 0.6rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); margin-top: 2px; }
    .mobile-nav-item.active .nb-mlabel { color: #111110; font-weight: 600; }
    .mobile-nav-container { height: auto !important; }
}

/* ---------- 19. Auth modal → Welcome back ---------- */
#authModal .modal-content.nba { background: #fdfbf6 !important; border-radius: 30px !important; max-width: 430px !important; box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5) !important; max-height: 96vh !important; overflow-y: auto !important; }
.nba__hero { position: relative; height: 150px; overflow: hidden; background: #f9efdb; flex-shrink: 0; }
.nba__hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.nba__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,251,246,0) 55%, #fdfbf6 100%); }
.nba__x { position: absolute; top: 14px; right: 14px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; background: rgba(253,251,246,0.9); border: 1px solid rgba(17,17,16,0.1); display: grid; place-items: center; cursor: pointer; transition: background 0.25s; }
.nba__x svg { width: 15px; height: 15px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; }
.nba__x:hover { background: #111110; } .nba__x:hover svg { stroke: #fff; }
.nba__app { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 3; width: 62px; height: 62px; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45), 0 0 0 4px #fdfbf6; }
.nba__app img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nba__body { padding: 20px 28px 22px; }
.nba__title { position: relative; text-align: center; font: 800 1.9rem/1.1 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.02em; color: #111110; display: flex; align-items: center; justify-content: center; gap: 12px; }
.nba__title em { font-style: normal; color: #e2a428; position: relative; }
.nba__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; border-radius: 2px; background: #f0b429; transform: rotate(-1.6deg); opacity: 0.75; }
.nba__title .sp { width: 14px; height: 14px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nba__title .sp.l { align-self: flex-end; } .nba__title .sp.r { align-self: flex-start; }
.nba__sub { text-align: center; margin: 8px 0 16px; font: 400 0.9rem/1.4 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); }
.nba__form { display: grid; gap: 10px; }
.nba__google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; border-radius: 16px; background: #fff; border: 1px solid #edc96a; font: 600 0.95rem/1 var(--font-ui, Inter, system-ui); color: #111110; cursor: pointer; transition: box-shadow 0.25s, transform 0.25s; }
.nba__google img { height: 22px; width: 22px; object-fit: contain; }
.nba__google:hover { box-shadow: 0 10px 22px -14px rgba(0,0,0,0.25); transform: translateY(-1px); }
.nba__or { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.nba__or i { flex: 1; height: 1px; background: rgba(17,17,16,0.1); }
.nba__or span { padding: 6px 14px; border-radius: 999px; background: #fbf3df; font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #c07b17; }
.nba__field { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 8px 0 8px; border-radius: 16px; background: #fff; border: 1px solid rgba(17,17,16,0.1); transition: border-color 0.25s, box-shadow 0.25s; }
.nba__field:focus-within { border-color: #e2b64b; box-shadow: 0 0 0 3px rgba(240,180,41,0.15); }
.nba__field .ic { width: 38px; height: 38px; border-radius: 12px; background: #fbf3df; display: grid; place-items: center; flex: none; }
.nba__field .ic svg { width: 17px; height: 17px; stroke: #111110; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nba__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 0.95rem/1 var(--font-ui, Inter, system-ui); color: #111110; }
.nba__field input::placeholder { color: rgba(17,17,16,0.4); }
.nba__field .eye { width: 38px; height: 38px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; border-radius: 10px; }
.nba__field .eye svg { width: 19px; height: 19px; stroke: rgba(17,17,16,0.5); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nba__field .eye:hover svg, .nba__field .eye.on svg { stroke: #111110; }
.nba__go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 16px; background: #111110; color: #fff; border: 0; font: 700 1.05rem/1 var(--font-display, 'Playfair Display', serif); cursor: pointer; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.5); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); position: relative; }
.nba__go svg { position: absolute; right: 20px; width: 17px; height: 17px; stroke: #f0b429; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s; }
.nba__go:hover { transform: translateY(-2px); } .nba__go:hover svg { transform: translateX(3px); }
.nba__swap { text-align: center; font: 400 0.86rem/1.3 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.6); margin-top: 4px; }
.nba__swap button { font-weight: 700; color: #c07b17; position: relative; }
.nba__swap button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px; border-radius: 2px; background: #f0b429; }
.nba__terms { text-align: center; font: 400 0.72rem/1.5 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.5); }
.nba__terms a { font-weight: 700; color: #111110; }
.nba__trust { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font: 500 0.82rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.65); }
.nba__trust b { color: #c07b17; }
.nba__trust .avs { display: flex; }
.nba__trust .avs i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fdfbf6; margin-left: -8px; background: radial-gradient(circle at 50% 38%, var(--h) 0 38%, #efe6d6 40% 100%); }
.nba__trust .avs i:first-child { margin-left: 0; }
.nba__trust .avs img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fdfbf6; margin-left: -8px; display: block; }
.nba__trust .avs img:first-child { margin-left: 0; }
@media (max-width: 480px) { .nba__hero { height: 120px; } .nba__body { padding: 16px 18px 18px; } }

/* ---------- 20. Sidebar footer → sticky bar + logo ---------- */
#mobileMenu .nb-menu-foot { margin: 0 !important; padding: 14px 20px !important; background: #fdfbf6; border-top: 1px solid rgba(17,17,16,0.1); flex-shrink: 0; }
#mobileMenu .nb-menu-foot .t img.wm { height: 15px; width: auto; display: block; margin-bottom: 5px; }
#authModal .nb-auth-copy { display: none !important; }
#authModal .nb-auth-proof { display: none !important; }
#authModal .modal-content.nba { max-height: 92vh; display: flex; flex-direction: column; }
#authModal .nba__hero { flex: none; }
#authModal .nba__body { overflow-y: auto; min-height: 0; scrollbar-width: thin; }

/* ---------- 21. Bottom dock → expandable in-bar search ---------- */
/* Base: always hide the search row; SVG fill fix for all viewports */
.nb-mnav-search { display: none; }
.mobile-nav-container.search-open .nb-mnav-search { display: flex; }
.nb-mnav-search svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 767px) {
    .mobile-nav-container { overflow: hidden !important; height: auto !important; }
    .mobile-nav-container nav { padding: 6px 6px 4px !important; }
    /* collapsed by default; opens upward, attached inside the dock */
    .nb-mnav-search {
        display: flex; align-items: center; gap: 10px;
        margin: 0 12px; padding: 4px 4px 4px 16px;
        border-radius: 999px; background: #fff; border: 1px solid rgba(17,17,16,0.1);
        pointer-events: auto; overflow: hidden;
        max-height: 0; opacity: 0; margin-bottom: 0;
        border-width: 0; padding-top: 0; padding-bottom: 0;
        transition: max-height 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease,
                    margin-bottom 0.32s cubic-bezier(0.22,1,0.36,1), padding 0.32s cubic-bezier(0.22,1,0.36,1);
    }
    .mobile-nav-container.search-open .nb-mnav-search {
        max-height: 60px; opacity: 1; margin-bottom: 12px;
        border-width: 1px; padding-top: 4px; padding-bottom: 4px;
    }
    .nb-mnav-search .lens { width: 18px; height: 18px; stroke: rgba(17,17,16,0.45); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
    .nb-mnav-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 0.9rem/1 var(--font-ui, Inter, system-ui); color: #111110; padding: 9px 0; }
    .nb-mnav-search input::placeholder { color: rgba(17,17,16,0.42); }
    .nb-mnav-search input::-webkit-search-cancel-button { display: none; }
    .nb-mnav-search button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6d88a; display: grid; place-items: center; cursor: pointer; flex: none; transition: background 0.25s; }
    .nb-mnav-search button svg { width: 16px; height: 16px; stroke: #111110; fill: none; stroke-width: 2.2; stroke-linecap: round; }
    .nb-mnav-search button:active { background: #f0b429; }
    .mobile-nav-container.nav-hidden .nb-mnav-search { pointer-events: none; }
}

/* ---------- 22. Floating NEX bot → yellow glow ---------- */
.emo-bot {
    background: radial-gradient(circle at 50% 42%, #fdfbf6 0%, #faf5ec 46%, #f5eedf 78%, #f0e8d4 100%) !important;
    box-shadow: 0 6px 22px -10px rgba(0,0,0,0.15) !important;
}
.emo-screen { background: #111110 !important; border-radius: 999px !important; }
/* remove sparkle decorations */
.emo-pet-container::before, .emo-pet-container::after { display: none !important; content: none !important; }
/* hide the send button above the bot */
.emo-pet-container > button:not(.emo-bot), .emo-action-btn, .emo-send-btn,
.emo-pet-container [class*="action"], .emo-pet-container [class*="send"],
.emo-send-container, .emo-send-face, button.OEueve { display: none !important; }
.emo-hint {
    bottom: -12px !important; padding: 6px 13px; background: #fff; border-radius: 999px;
    border: 1px solid rgba(17,17,16,0.08); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.25);
    font: 600 0.7rem/1 var(--font-ui, Inter, system-ui) !important; color: #111110 !important;
    transition: opacity 0.35s ease !important;
}

/* ---------- 23. Thinkly AI expanded chat → unified background ---------- */
#expandedView { background: #fbfbfa !important; }
#thinkly-ai-hero .expanded-header { background: #fbfbfa !important; border-bottom: none; }
#thinkly-ai-hero .expanded-title .shine-colorful { background: none !important; -webkit-text-fill-color: #111110 !important; color: #111110 !important; animation: none !important; font-family: var(--font-ui, Inter, system-ui); font-weight: 700; }
#thinkly-ai-hero .control-button { width: 38px; height: 38px; border-radius: 50% !important; background: #fff !important; border: 1px solid rgba(17,17,16,0.1) !important; color: #111110 !important; display: grid; place-items: center; }
#thinkly-ai-hero .control-button:hover { background: #111110 !important; color: #fff !important; }
/* welcome block */
.nb-tw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; padding: 18px 22px 6px; }
#expandedView:has(#expandedChatOutput > *) .nb-tw { display: none; }
.nb-tw__left { padding-top: 8px; }
.nb-tw__bot { position: relative; width: 108px; height: 108px; border-radius: 50%; margin: 6px 0 10px 14px; background: radial-gradient(circle at 50% 42%, #fdf4d8 0%, #fae8b8 46%, #f6d88a 82%, #f0cb70 100%); box-shadow: 0 0 30px 6px rgba(240,180,41,0.35); display: grid; place-items: center; }
.nb-tw__bot i { width: 62px; height: 40px; border-radius: 999px; background: #111110; display: flex; align-items: center; justify-content: center; gap: 10px; }
.nb-tw__bot i b { width: 10px; height: 10px; border-radius: 50%; background: #9fe8ef; }
.nb-tw__bot::after { content: "✦"; position: absolute; top: -2px; right: -8px; color: #e2a428; font-size: 15px; }
.nb-tw__ask { display: block; margin: 2px 0 16px 16px; font: 600 1.35rem/1.1 'Caveat', cursive; color: #111110; }
.nb-tw__lbl { display: flex; align-items: center; gap: 7px; margin: 0 0 10px 2px; font: 700 0.62rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-tw__lbl::before { content: "✦"; color: #e2a428; font-size: 12px; }
.nb-tw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.nb-tw__card { display: flex; gap: 11px; align-items: flex-start; padding: 13px 13px; border-radius: 16px; background: #fff; border: 1px solid rgba(17,17,16,0.07); box-shadow: 0 4px 14px -10px rgba(0,0,0,0.12); cursor: pointer; text-align: left; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s; }
.nb-tw__card:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(0,0,0,0.2); }
.nb-tw__card svg { width: 26px; height: 26px; flex: none; stroke: #111110; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nb-tw__card b { display: block; font: 700 0.84rem/1.25 var(--font-ui, Inter, system-ui); color: #111110; }
.nb-tw__card small { display: block; margin-top: 3px; font: 500 0.72rem/1.35 var(--font-ui, Inter, system-ui); color: #d9a422; }
.nb-tw__art { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.nb-tw__art img { width: 100%; max-width: 430px; height: auto; mix-blend-mode: multiply; }
@media (max-width: 720px) {
    .nb-tw { grid-template-columns: 1fr; padding: 14px 16px 4px; }
    .nb-tw__art { order: -1; } .nb-tw__art img { max-width: 300px; }
    .nb-tw__bot { width: 84px; height: 84px; margin-left: 8px; }
    .nb-tw__grid { max-width: none; }
}
/* pills */
#thinkly-ai-hero .ai-response-pills .ai-pill { background: #fff !important; border: 1px solid rgba(17,17,16,0.1) !important; color: #111110 !important; border-radius: 999px !important; font: 600 0.8rem/1 var(--font-ui, Inter, system-ui) !important; box-shadow: 0 3px 10px -8px rgba(0,0,0,0.2) !important; }
#thinkly-ai-hero .ai-response-pills .ai-pill:hover { border-color: #e2b64b !important; background: #fbf3df !important; }
/* composer */
#thinkly-ai-hero .expanded-input-area { background: #fbfbfa !important; }
#thinkly-ai-hero .expanded-input-area .thinkly-input-bar, #thinkly-ai-hero .expanded-input-area .input-area { background: #fff !important; border: 1px solid rgba(17,17,16,0.1) !important; border-radius: 999px !important; box-shadow: 0 10px 24px -16px rgba(0,0,0,0.25) !important; }
#thinkly-ai-hero .thinkly-plus-btn { background: #fff !important; border: 1px solid rgba(17,17,16,0.12) !important; color: #111110 !important; border-radius: 50% !important; }
#thinkly-ai-hero .thinkly-chat-input { color: #111110 !important; }
#thinkly-ai-hero .thinkly-chat-input::placeholder { color: rgba(17,17,16,0.42) !important; }
#thinkly-ai-hero .thinkly-mic-btn { color: #111110 !important; }
#thinkly-ai-hero .expanded-input-area button[id*="end" i]:not(.thinkly-plus-btn), #thinkly-ai-hero .thinkly-send-btn, #thinkly-ai-hero .send-button { background: #f6d88a !important; color: #111110 !important; border-radius: 50% !important; }
#thinkly-ai-hero #expandedView { background: #fbfbfa !important; }
html body #thinkly-ai-hero #expandedSendButton { background: #f6d88a !important; color: #111110 !important; border-radius: 50% !important; border: 0 !important; }
html body #thinkly-ai-hero #expandedSendButton svg { stroke: #111110 !important; fill: #111110; }
html body #thinkly-ai-hero #expandedSendButton:hover { background: #f0cb70 !important; }

/* ---------- 24. Top Universities → globe hub ---------- */
.nbu { background: #fdf6e8; border: 1px solid rgba(226,182,75,0.35); border-radius: 26px; padding: 30px 30px 34px; position: relative; overflow: hidden; }
.nbu::before, .nbu::after { content: ""; position: absolute; width: 120px; height: 120px; background: radial-gradient(closest-side, rgba(240,180,41,0.18), transparent 70%); pointer-events: none; }
.nbu::before { left: -30px; bottom: -20px; } .nbu::after { right: -24px; top: 30px; }
.nbu__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.nbu__head .cap { width: 54px; height: 54px; border-radius: 50%; background: #f6d88a; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 6px rgba(246,216,138,0.35); }
.nbu__head .cap svg { width: 26px; height: 26px; stroke: #111110; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nbu #universities-heading { position: relative; display: inline-block; margin: 0 !important; text-align: left !important; font: 800 clamp(1.7rem, 3.4vw, 2.5rem)/1.05 var(--font-display, 'Playfair Display', serif) !important; letter-spacing: -0.02em; color: #111110 !important; }
.nbu #universities-heading::after { content: ""; position: absolute; left: 2px; right: 26%; bottom: -8px; height: 4px; border-radius: 2px; background: #f0b429; transform: rotate(-1deg); }
.nbu__head .plane { width: 74px; height: auto; margin-left: auto; stroke: #b9915a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 3-col grid: cards | globe | cards */
.nbu__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.nbu__col { display: grid; gap: 16px; }
.nbu__card { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid rgba(17,17,16,0.08); box-shadow: 0 10px 26px -20px rgba(0,0,0,0.3); text-decoration: none; color: #111110; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s; }
.nbu__card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(0,0,0,0.35); }
.nbu__card img { width: 108px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; }
.nbu__card .tx { flex: 1; min-width: 0; }
.nbu__card .tx b { display: block; font: 700 0.98rem/1.2 var(--font-display, 'Playfair Display', serif); letter-spacing: -0.01em; }
.nbu__card .tx small { display: flex; align-items: center; gap: 7px; margin-top: 6px; font: 500 0.74rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.55); }
.nbu__card .tx small i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, #f0b429); }
.nbu__card .bk { width: 44px; height: 44px; border-radius: 50%; background: #fbf3df; display: grid; place-items: center; flex: none; }
.nbu__card .bk svg { width: 20px; height: 20px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* dashed connectors toward globe */
.nbu__col.l .nbu__card::after, .nbu__col.r .nbu__card::before { content: ""; position: absolute; top: 50%; width: 26px; border-top: 2px dashed rgba(17,17,16,0.22); }
.nbu__col.l .nbu__card::after { right: -28px; } .nbu__col.r .nbu__card::before { left: -28px; }
/* globe slot */
.nbu__globe { width: 280px; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.nbu__globe .nb-globe-canvas { border-radius: 50%; box-shadow: 0 0 60px rgba(240,180,41,0.18); }
/* stats bar */
.nbu__stats { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px auto 0; padding: 14px 26px; max-width: 640px; background: #fff; border: 1px solid rgba(226,182,75,0.5); border-radius: 999px; flex-wrap: wrap; }
.nbu__stats > svg { width: 30px; height: 30px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nbu__stats span { font: 400 0.95rem/1 var(--font-ui, Inter, system-ui); color: rgba(17,17,16,0.65); }
.nbu__stats span b { font: 800 1.25rem/1 var(--font-ui, Inter, system-ui); color: #111110; letter-spacing: -0.02em; margin-right: 4px; }
.nbu__stats i { width: 1px; height: 26px; background: rgba(226,182,75,0.6); }
/* view more toggle */
.nbu__more { text-align: center; margin-top: 20px; }
.nbu__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.88rem/1 var(--font-display, 'Playfair Display', serif); border: none; cursor: pointer; transition: transform 0.3s, background 0.2s; }
.nbu__toggle:hover { transform: translateY(-2px); background: #2a2a28; }
/* expanded grid */
.nbu__all { display: none; margin-top: 28px; }
.nbu.is-open .nbu__all { display: block; }
/* Top 4 big photo cards grid */
.nbu__topgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.nbu__photo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 280px; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; padding: 18px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s; }
.nbu__photo:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 40px -22px rgba(0,0,0,0.45); }
.nbu__photo .sh { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,8,0.78) 0%, rgba(10,10,8,0.2) 55%, transparent 100%); }
.nbu__photo .nm { position: relative; z-index: 1; font: 700 1.1rem/1.2 var(--font-display, 'Playfair Display', serif); color: #fff; }
.nbu__photo .ct { position: relative; z-index: 1; align-self: flex-start; margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: #f6d88a; color: #111110; font: 700 0.72rem/1 var(--font-ui, Inter, system-ui); letter-spacing: 0.06em; }
.nbu__redirect { text-align: center; margin-top: 22px; }
.nbu__redirect a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; background: #111110; color: #fff; font: 700 0.88rem/1 var(--font-display, 'Playfair Display', serif); text-decoration: none; transition: transform 0.3s; }
.nbu__redirect a svg { width: 14px; height: 14px; stroke: #f0b429; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nbu__redirect a:hover { transform: translateY(-2px); }
@media (max-width: 920px) {
    .nbu__grid { grid-template-columns: 1fr; }
    .nbu__globe { order: -1; width: 100%; margin-bottom: 6px; min-height: 220px; }
    .nbu__col.l .nbu__card::after, .nbu__col.r .nbu__card::before { display: none; }
    .nbu { padding: 24px 18px 28px; }
    .nbu__head .plane { display: none; }
    .nbu__stats i { display: none; }
    .nbu__stats { gap: 10px 16px; border-radius: 22px; }
}
@media (max-width: 920px) { .nbu__topgrid { grid-template-columns: repeat(2, 1fr); } .nbu__photo { height: 220px; } }
@media (max-width: 480px) { .nbu__topgrid { grid-template-columns: 1fr; } .nbu__photo { height: 200px; } }
@media (max-width: 767px) {
    /* On mobile, View All Universities expands the local cards instead of redirecting. */
    .nbu__all .nbu__topgrid { display: grid !important; }
    .nbu__redirect a { cursor: pointer; }
}
/* safety: old universities decorations never render inside nbu */
.nbu .nb-ucard, .nbu .nb-worldmap .links, .nbu .nb-worldmap .cnt, .nbu .nb-bars, .nbu + .nb-bars, .nb-bars { display: none !important; }
.nbu .nb-worldmap { display: contents !important; }

/* ---------- 24. Profile Dashboard → warm paper theme ---------- */
#profileDashboardModal .modal-content {
    background: #fdf6e8 !important;
}
#profileDashboardModal .modal-content > div:first-child {
    background: rgba(253,246,232,0.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212,160,23,0.18) !important;
}
#profileDashboardModal h2 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: #111110 !important;
}
/* close button styled by .nbd-x in index.html */
/* avatar circle */
#profileDashboardModal .rounded-full.bg-gray-200 {
    background: radial-gradient(circle at 35% 30%, #fdf4d8 0%, #f6d88a 100%) !important;
    color: #111110 !important;
    border: 1.5px solid rgba(212,160,23,0.35);
}
/* name + subtitle */
#profileDashboardModal .text-gray-800 {
    color: #111110 !important;
    font-family: var(--font-display, 'Playfair Display', serif);
}
#profileDashboardModal .text-gray-500 { color: rgba(17,17,16,0.5) !important; }
#profileDashboardModal .text-gray-700 { color: #111110 !important; }
/* menu buttons */
#profileDashboardModal button.text-gray-700,
#profileDashboardModal a.text-gray-700 {
    background: rgba(253,251,246,0.75);
    border: 1px solid rgba(212,160,23,0.1);
    border-radius: 14px !important;
    font-size: 1rem !important;
}
#profileDashboardModal button.text-gray-700:hover,
#profileDashboardModal a.text-gray-700:hover {
    background: #fdfbf6 !important;
    border-color: rgba(212,160,23,0.3);
}
/* icons */
#profileDashboardModal svg.text-gray-500,
#profileDashboardModal .material-symbols-outlined.text-gray-500 {
    color: #b8860b !important;
}
/* section headings */
#profileDashboardModal h4.text-gray-500 {
    color: rgba(17,17,16,0.45) !important;
    font-family: var(--font-ui, Inter, system-ui);
}
/* dividers */
#profileDashboardModal .border-t { border-color: rgba(212,160,23,0.16) !important; }
#profileDashboardModal .border-b { border-color: rgba(212,160,23,0.18) !important; }
/* logout styled by .nbd-logout */
/* login prompt view (logged-out) */
#profileDashboardModal .bg-black { background: #111110 !important; }
#profileDashboardModal .hover\:bg-gray-100:hover { background: #fdfbf6 !important; }
/* logged-out view */
#profileDashboardModal .text-gray-400 { color: rgba(184,134,11,0.55) !important; }
#profileDashboardModal .text-gray-600 { color: rgba(17,17,16,0.6) !important; }
#profileDashboardModal h3 {
    font-family: var(--font-display, 'Playfair Display', serif);
    color: #111110;
}
#profileDashboardModal #dashboardLoginBtn {
    background: #111110 !important;
    color: #fdfbf6 !important;
    border-radius: 14px !important;
}
/* show bottom nav bar above dashboard modal */
body:has(#profileDashboardModal.is-visible) .mobile-nav-container {
    z-index: 101 !important;
}
#profileDashboardModal .nbd {
    padding-bottom: 90px !important;
}