/* =====================================================================
   NEXBOOK — Premium Design System
   Loaded last. Establishes tokens, typography, and the presentation
   layer. Purely visual: no IDs, hooks, or behaviours are changed here.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
    --background: #fbfbfa;            /* warm off-white */
    --surface: #ffffff;
    --surface-2: #f5f5f3;
    --surface-elevated: #ffffff;
    --foreground: #0b0b0d;            /* ink */
    --foreground-2: #3c3c43;
    --muted: #6e6e76;
    --muted-2: #9a9aa3;
    --border: rgba(11, 11, 13, 0.08);
    --border-strong: rgba(11, 11, 13, 0.14);
    --accent: #2d5bff;                /* NEXBOOK blue — used sparingly */
    --accent-foreground: #ffffff;
    --accent-soft: rgba(45, 91, 255, 0.08);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-xs: 0 1px 2px rgba(11, 11, 13, 0.04);
    --shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.04), 0 2px 8px rgba(11, 11, 13, 0.04);
    --shadow-md: 0 2px 4px rgba(11, 11, 13, 0.04), 0 12px 28px -10px rgba(11, 11, 13, 0.12);
    --shadow-lg: 0 4px 8px rgba(11, 11, 13, 0.04), 0 28px 56px -20px rgba(11, 11, 13, 0.22);
    --shadow-ring: 0 0 0 1px var(--border);

    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 520ms;
}

/* ------------------------------------------------------------------ */
/* 2. Base + typography                                                */
/* ------------------------------------------------------------------ */
html { background: var(--background); }

body, .body-font {
    font-family: var(--font-ui);
    background: var(--background);
    color: var(--foreground);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--foreground);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* `.font-display` was mapped to an unloaded typeface; resolve to the UI sans with display tracking. */
.font-display { font-family: var(--font-ui) !important; letter-spacing: -0.03em; }

/* Type scale */
.t-display-xl { font: 700 clamp(2.75rem, 6.2vw, 5.25rem)/1.02 var(--font-display); letter-spacing: -0.035em; }
.t-display    { font: 700 clamp(2.25rem, 4.6vw, 3.75rem)/1.06 var(--font-display); letter-spacing: -0.03em; }
.t-h1         { font: 700 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.025em; }
.t-h2         { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; }
.t-h3         { font: 600 1.125rem/1.35 var(--font-ui); letter-spacing: -0.01em; }
.t-body-lg    { font: 400 1.125rem/1.6 var(--font-ui); color: var(--foreground-2); }
.t-body       { font: 400 1rem/1.6 var(--font-ui); color: var(--foreground-2); }
.t-caption    { font: 500 0.8125rem/1.4 var(--font-ui); color: var(--muted); }
.t-micro      { font: 600 0.6875rem/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }

::selection { background: rgba(45, 91, 255, 0.16); }

/* Surfaces: map the existing utility palette to warm tokens */
.bg-gray-50 { background-color: var(--surface-2) !important; }
main > section.bg-white { background-color: var(--surface); }

/* Focus — visible, restrained, consistent */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}
:where(input, textarea):focus { outline: none; }

/* ------------------------------------------------------------------ */
/* 3. Buttons                                                          */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    height: 3rem; padding: 0 1.35rem; border-radius: 999px;
    font: 600 0.95rem/1 var(--font-ui); letter-spacing: -0.005em;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--foreground); color: #fff; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08); }
.btn-primary:hover { background: #1a1a1f; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--surface); color: var(--foreground); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: rgba(11,11,13,0.24); background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-tertiary { background: transparent; color: var(--foreground); height: auto; padding: 0.25rem 0; border-radius: 0; }
.btn-tertiary:hover { color: var(--accent); }

.btn-sm { height: 2.375rem; padding: 0 1rem; font-size: 0.875rem; }

/* Legacy toggle buttons share the system */
.view-toggle-btn {
    font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.005em;
    padding: 0.75rem 1.4rem; border-radius: 999px;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.view-toggle-btn:not(.bg-black) { background: var(--surface); color: var(--foreground); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.view-toggle-btn:not(.bg-black):hover { background: #fff; border-color: rgba(11,11,13,0.24); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.view-toggle-btn.bg-black { box-shadow: var(--shadow-sm); }
.view-toggle-btn.bg-black:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------------ */
/* 4. Navigation                                                       */
/* ------------------------------------------------------------------ */
#navbarI {
    transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), backdrop-filter var(--dur-slow) var(--ease-out);
}
#navbarI.nav-scrolled {
    background: rgba(251, 251, 250, 0.72) !important;
    border-bottom-color: var(--border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(11,11,13,0.18);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
}
#navbarI .nav-brand-text { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; }

.nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
    font: 500 0.9rem/1 var(--font-ui); letter-spacing: -0.005em; color: var(--foreground-2);
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
    text-decoration: none; background: transparent; border: 0; cursor: pointer;
}
.nav-link:hover { color: var(--foreground); background: rgba(11,11,13,0.05); }
.nav-link.is-accent { color: var(--accent); }
.nav-link.is-accent:hover { color: var(--accent); background: var(--accent-soft); }
.nav-link svg { width: 14px; height: 14px; opacity: 0.7; transition: transform var(--dur) var(--ease-out); }

.nav-cta {
    display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem; margin-left: 0.5rem;
    border-radius: 999px; background: var(--foreground); color: #fff;
    font: 600 0.85rem/1 var(--font-ui) !important; letter-spacing: -0.005em;
    box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) ease;
}
.nav-cta:hover { background: #1a1a1f; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.nav-popover {
    position: absolute; right: 0; margin-top: 0.5rem; min-width: 15rem; padding: 0.4rem;
    background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 60;
    transform-origin: top right;
}
.nav-popover a {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
    font: 500 0.9rem/1.2 var(--font-ui); color: var(--foreground-2); text-decoration: none;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-popover a:hover { background: var(--surface-2); color: var(--foreground); }
.nav-popover a svg { width: 18px; height: 18px; }

#hamburgerBtn { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ */
/* 5. Hero                                                             */
/* ------------------------------------------------------------------ */
#top.hero-premium {
    position: relative; min-height: auto; overflow: hidden; text-align: left;
    background: var(--background);
    padding: clamp(6.5rem, 13vh, 9rem) 0 clamp(3rem, 6vh, 5rem);
}
.hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 75% 20%, rgba(45, 91, 255, 0.07) 0%, rgba(45, 91, 255, 0) 70%),
        radial-gradient(40% 40% at 15% 90%, rgba(11, 11, 13, 0.04) 0%, rgba(11, 11, 13, 0) 70%);
}
.hero-bg::after {
    content: ""; position: absolute; inset: 0; opacity: 0.5;
    background-image:
        linear-gradient(to right, rgba(11,11,13,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11,11,13,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 100%);
}
.hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
    max-width: 80rem; margin: 0 auto; padding: 0 1.25rem;
}
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; padding: 0 2rem; }
}
.hero-copy { max-width: 38rem; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem 0.35rem 0.5rem;
    border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.7);
    font: 500 0.78rem/1 var(--font-ui); color: var(--foreground-2); margin-bottom: 1.5rem;
}
.hero-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero-title { margin: 0 0 1.25rem; color: var(--foreground); }
.hero-title em { font-style: italic; font-weight: 700; color: var(--foreground); }
.hero-sub { max-width: 32rem; margin: 0 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.hero-meta div { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-meta strong { font: 600 1.05rem/1 var(--font-ui); letter-spacing: -0.02em; color: var(--foreground); }
.hero-meta span { font: 500 0.78rem/1.2 var(--font-ui); color: var(--muted); }

/* Product canvas */
.hero-canvas { position: relative; height: 30rem; max-width: 36rem; margin: 0 auto; width: 100%; perspective: 1400px; }
@media (max-width: 639px) { .hero-canvas { height: 26rem; } }
.surface {
    position: absolute; background: var(--surface-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    will-change: transform;
}
.footer-premium .f-social a:hover { transform: none; }
.surface-main { inset: 2rem 0 0 0; max-width: 30rem; margin: 0 auto; overflow: hidden; }
.surface-main .sm-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.surface-main .sm-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.surface-main .sm-bar span { margin-left: auto; font: 500 0.72rem/1 var(--font-ui); color: var(--muted-2); }
.surface-main .sm-hero { position: relative; height: 9.5rem; overflow: hidden; }
.surface-main .sm-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.surface-main .sm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0) 60%); }
.surface-main .sm-hero h4 { position: absolute; left: 1rem; bottom: 0.75rem; margin: 0; font: 700 1.1rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.surface-main .sm-list { padding: 0.5rem 0.75rem 0.75rem; display: grid; gap: 0.35rem; }
.surface-main .sm-row { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm); }
.surface-main .sm-row:hover { background: var(--surface-2); }
.surface-main .sm-row .cover { width: 2.25rem; height: 2.9rem; border-radius: 4px; background: linear-gradient(160deg, #e9e9e6, #d4d4cf); box-shadow: inset 0 0 0 1px rgba(11,11,13,0.06); }
.surface-main .sm-row .cover.b { background: linear-gradient(160deg, #dfe6ff, #c4d0ff); }
.surface-main .sm-row .cover.c { background: linear-gradient(160deg, #efe7da, #e0d2bb); }
.surface-main .sm-row strong { display: block; font: 600 0.85rem/1.2 var(--font-ui); letter-spacing: -0.01em; }
.surface-main .sm-row small { display: block; font: 500 0.72rem/1.2 var(--font-ui); color: var(--muted); margin-top: 0.15rem; }
.surface-main .sm-row .price { font: 600 0.85rem/1 var(--font-ui); letter-spacing: -0.01em; }
.surface-main .sm-row .tag { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--surface-2); font: 600 0.6rem/1 var(--font-ui); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

.surface-float { padding: 0.9rem 1rem; width: 14rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.surface-float .sf-head { display: flex; align-items: center; gap: 0.5rem; font: 600 0.78rem/1 var(--font-ui); color: var(--foreground); }
.surface-float .sf-head svg { width: 14px; height: 14px; color: var(--accent); }
.surface-float p { margin: 0.5rem 0 0; font: 400 0.78rem/1.4 var(--font-ui); color: var(--muted); }
.surface-float .sf-line { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 0.5rem; overflow: hidden; }
.surface-float .sf-line i { display: block; height: 100%; width: 62%; border-radius: inherit; background: var(--foreground); }
.surface-ai { left: -0.5rem; top: 0; animation: floatA 9s var(--ease-in-out) infinite; }
.surface-pyq { right: -0.5rem; bottom: 1.25rem; animation: floatB 11s var(--ease-in-out) infinite; }
@media (max-width: 639px) { .surface-float { width: 11.5rem; } .surface-ai { left: 0; } .surface-pyq { right: 0; } }

@keyframes floatA { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes floatB { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 9px, 0); } }

/* ------------------------------------------------------------------ */
/* 6. Sections + cards                                                 */
/* ------------------------------------------------------------------ */
.section-eyebrow { color: var(--muted-2); letter-spacing: 0.2em; font-size: 0.68rem; }
main > section { scroll-margin-top: 4rem; }

/* Free Resources tiles: controlled radius, hairline, quiet depth */
section button[id^="freeResource"] {
    border-radius: var(--radius-lg) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
}
section button[id^="freeResource"]:hover { box-shadow: var(--shadow-md) !important; border-color: var(--border-strong) !important; }
section button[id^="freeResource"] span { letter-spacing: 0.08em; font-size: 0.72rem; color: var(--foreground-2); }

/* Course / study cards: unify radius and depth with tokens */
.course-major-item > div { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; }
.course-major-item:hover > div { box-shadow: var(--shadow-lg) !important; }
.course-major-item h3 { font-family: var(--font-display); letter-spacing: -0.02em; }

#study-material-grid > * { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; }
#study-material-grid > *:hover { box-shadow: var(--shadow-lg) !important; }

.course-card { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-xs) !important; }
.course-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px) !important; }

#college-essentials .grid > div { border-radius: var(--radius-lg) !important; border: 1px solid var(--border); box-shadow: var(--shadow-sm) !important; }
#college-essentials .grid > div:hover { box-shadow: var(--shadow-lg) !important; }

#academySearchInput { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-xs); font-family: var(--font-ui); }
#academySearchInput:focus { border-color: var(--foreground); box-shadow: 0 0 0 4px rgba(11,11,13,0.06); }

/* Hero enters immediately on load (no observer wait — protects LCP and first impression) */
#top .reveal { opacity: 1; transform: none; transition: none; animation: heroIn 0.9s var(--ease-out) both; }
#top .hero-canvas.reveal { animation-delay: 0.12s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 7. Modals — unified system                                          */
/* ------------------------------------------------------------------ */
.modal-backdrop { background: rgba(11, 11, 13, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
    transform: scale(0.97) translateY(8px);
    transition: transform 0.42s var(--ease-out), opacity 0.3s ease;
}
.modal-content > div:first-child { border-color: var(--border) !important; }
.modal-content h2 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Mobile: bottom-sheet behaviour for standard dialogs */
@media (max-width: 640px) {
    .modal-overlay:not(:has(.modal-content--fullscreen)) { align-items: flex-end; padding: 0; }
    .modal-overlay:not(:has(.modal-content--fullscreen)) .modal-content {
        max-width: 100% !important; width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: 0; transform: translateY(24px);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-overlay:not(:has(.modal-content--fullscreen)) .modal-content::before {
        content: ""; position: absolute; top: 0.5rem; left: 50%; width: 2.25rem; height: 4px; border-radius: 999px;
        background: var(--border-strong); transform: translateX(-50%);
    }
    .modal-overlay.is-visible:not(:has(.modal-content--fullscreen)) .modal-content { transform: translateY(0); }
}
.modal-content--fullscreen { border-radius: 0; border: 0; }

/* ------------------------------------------------------------------ */
/* 8. Mobile menu — premium navigation sheet                           */
/* ------------------------------------------------------------------ */
#mobileMenu {
    width: min(88%, 24rem) !important;
    background: rgba(251, 251, 250, 0.96) !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: -24px 0 60px -30px rgba(11,11,13,0.35) !important;
    border-left: 1px solid var(--border);
    transition: transform 0.5s var(--ease-out) !important;
}
#mobileMenu > div > div:first-child { border-color: var(--border) !important; height: 4rem; }
#mobileMenu > div > div:first-child h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; }
#mobileProfileSection { border-color: var(--border) !important; }
#menu-nav { padding: 1rem 0.9rem 2rem !important; }
#menu-nav .menu-item, #menu-nav [id$="Drop"] a {
    font-family: var(--font-ui); font-weight: 500 !important; font-size: 1rem !important; letter-spacing: -0.01em;
    color: var(--foreground-2) !important; padding: 0.7rem 0.85rem !important; border-radius: var(--radius-sm) !important;
}
#menu-nav .menu-item:hover, #menu-nav [id$="Drop"] a:hover { background: rgba(11,11,13,0.05) !important; color: var(--foreground) !important; }
#menu-nav .menu-item svg, #menu-nav [id$="Drop"] a svg { width: 18px; height: 18px; stroke-width: 1.75; color: var(--muted); }
#menu-nav .h-px { background: var(--border) !important; margin: 0.9rem 0 !important; }
#menu-nav span.uppercase { font-size: 0.66rem !important; letter-spacing: 0.18em !important; color: var(--muted-2) !important; }
#menuInstallApp { background: var(--foreground) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--font-ui) !important; box-shadow: var(--shadow-sm) !important; animation: none !important; }
#menuInstallApp, #menuInstallApp span, #menuInstallApp svg { color: #fff !important; }
#menu-nav [class*="purple"], #menu-nav [class*="indigo"] { color: var(--accent) !important; }
.surface-main .sm-hero h4 { z-index: 1; color: var(--foreground); }
#menu-overlay { background: rgba(11,11,13,0.35) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ------------------------------------------------------------------ */
/* 9. PWA install — native-style invitation                            */
/* ------------------------------------------------------------------ */
#pwa-install-popup {
    background: var(--surface-elevated) !important; color: var(--foreground) !important;
    border: 1px solid var(--border); border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(11,11,13,0.02) !important;
    padding: 1.25rem 1.25rem 1.1rem !important; width: 22rem !important;
    transition: transform 0.55s var(--ease-out), opacity 0.3s ease !important;
}
@media (max-width: 767px) { #pwa-install-popup { width: calc(100% - 1.5rem) !important; max-width: 26rem !important; bottom: calc(env(safe-area-inset-bottom) + 5.5rem) !important; } }
#pwa-close-btn { background: var(--surface-2) !important; color: var(--muted) !important; width: 28px; height: 28px; top: 10px; right: 10px; }
#pwa-close-btn:hover { background: rgba(11,11,13,0.08) !important; color: var(--foreground) !important; }
.pwa-popup-body { display: grid; grid-template-columns: 3.25rem 1fr; grid-template-areas: "logo title" "logo desc" "btn btn"; column-gap: 0.85rem; text-align: left !important; align-items: center; }
.pwa-popup-logo { grid-area: logo; width: 3.25rem !important; height: 3.25rem !important; margin: 0 !important; border-radius: 12px !important; box-shadow: var(--shadow-ring); }
.pwa-popup-title { grid-area: title; color: var(--foreground) !important; font: 600 0.95rem/1.2 var(--font-ui) !important; letter-spacing: -0.01em; margin: 0 0 0.15rem !important; padding-right: 1.5rem; }
.pwa-popup-desc { grid-area: desc; color: var(--muted) !important; font-size: 0.8rem !important; margin: 0 !important; }
#pwa-install-btn { grid-area: btn; margin-top: 0.9rem; background: var(--foreground) !important; color: #fff !important; border-radius: 999px !important; height: 2.5rem; padding: 0 1rem !important; font: 600 0.85rem/1 var(--font-ui) !important; box-shadow: var(--shadow-sm); }
#pwa-install-btn:hover { background: #1a1a1f !important; }

/* ------------------------------------------------------------------ */
/* 10. Skeletons + empty states                                        */
/* ------------------------------------------------------------------ */
.skeleton-card, .skeleton, .skeleton-img, .skeleton-text, .skeleton-line {
    position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-md);
}
.skeleton-card::after, .skeleton::after, .skeleton-img::after, .skeleton-text::after, .skeleton-line::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: nb-shimmer 1.8s var(--ease-in-out) infinite;
}
.skeleton-img { height: 11rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.skeleton-text { height: 1rem; margin: 1rem; width: 60%; border-radius: 999px; }
@keyframes nb-shimmer { to { transform: translateX(100%); } }

.nb-empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.nb-empty .nb-empty-icon { width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.nb-empty h3 { font: 600 1rem/1.3 var(--font-ui); color: var(--foreground); margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.nb-empty p { font-size: 0.9rem; margin: 0 auto; max-width: 22rem; }

/* ------------------------------------------------------------------ */
/* 11. Footer                                                          */
/* ------------------------------------------------------------------ */
.footer-premium { background: #0b0b0d; color: #b9b9c1; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-premium .f-wrap { max-width: 80rem; margin: 0 auto; padding: 4.5rem 1.25rem 2rem; }
@media (min-width: 768px) { .footer-premium .f-wrap { padding: 5.5rem 2rem 2.5rem; } }
.footer-premium .f-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 480px) and (max-width: 767px) { .footer-premium .f-top { grid-template-columns: repeat(2, 1fr); } .footer-premium .f-brand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .footer-premium .f-wrap { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .footer-premium .f-top { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; } }
.footer-premium .f-brand h3 { font: 800 1.5rem/1 var(--font-display); color: #fff; letter-spacing: -0.04em; margin: 0 0 0.85rem; }
.footer-premium .f-brand p { font: 400 0.95rem/1.6 var(--font-ui); color: #8e8e98; max-width: 20rem; margin: 0; }
.footer-premium h4 { font: 600 0.72rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #8e8e98; margin: 0 0 1.1rem; }
.footer-premium ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.footer-premium ul a { font: 500 0.92rem/1.3 var(--font-ui); color: #c9c9d1; text-decoration: none; transition: color var(--dur-fast) ease; }
.footer-premium ul a:hover { color: #fff; }
.footer-premium .f-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; font: 500 0.8rem/1.4 var(--font-ui); color: #75757e; }
.footer-premium .f-social { display: flex; gap: 0.35rem; }
.footer-premium .f-social a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #a3a3ab; transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.footer-premium .f-social a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.footer-premium .f-social svg { width: 17px; height: 17px; }
.footer-premium .f-bottom a { color: inherit; text-decoration: none; }
.footer-premium .f-bottom a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* 12. Reduced motion                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .surface-ai, .surface-pyq, #top .reveal { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .skeleton-card::after, .skeleton::after, .skeleton-img::after, .skeleton-text::after, .skeleton-line::after { animation: none; }
    .btn, .nav-cta, .view-toggle-btn, .course-card, .surface { transition: none !important; }
}

/* ================================================================== */
/* 13. Content sections — editorial arrangement                       */
/* ================================================================== */

/* Section rhythm */
#browse-courses, #academy-x, #study-material, #college-essentials, #free-books { padding-top: 6rem; padding-bottom: 6rem; }
@media (max-width: 767px) { #browse-courses, #academy-x, #study-material, #college-essentials, #free-books { padding-top: 4rem; padding-bottom: 4rem; } }

/* AcademyX sub-sections: left-aligned editorial headings with a hairline rule */
#academy-x-content > div { margin-top: 5.5rem !important; }
#academy-x-content > div:first-child { margin-top: 0 !important; }
#academy-x-content h3 {
    text-align: left; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -0.025em;
    padding-bottom: 1rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--border);
}
#universities-section, #subjects-section {
    background: var(--surface) !important; border: 1px solid var(--border);
    border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-xs) !important; padding: 2rem !important;
}
@media (max-width: 639px) { #universities-section, #subjects-section { padding: 1.25rem !important; } }

/* Buy Books by Course — cinematic tiles, title bottom-left, quiet hover cue */
#course-selection-container { gap: 1.25rem !important; }
.course-major-item > div {
    height: 19rem !important; border-radius: var(--radius-xl) !important;
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out) !important;
}
.course-major-item:hover > div { transform: translateY(-4px); }
.course-major-item img { filter: saturate(0.9); transition: transform 1.1s var(--ease-out) !important; }
.course-major-item > div > div:nth-of-type(1) { background: linear-gradient(to top, rgba(11,11,13,0.82) 0%, rgba(11,11,13,0.25) 50%, rgba(11,11,13,0.05) 100%) !important; }
.course-major-item > div > div:nth-of-type(2) {
    align-items: flex-end !important; justify-content: flex-start !important; padding: 1.6rem !important;
    background: transparent !important;
}
.course-major-item h3 {
    text-align: left !important; font-size: clamp(1.4rem, 1.8vw, 1.75rem) !important; line-height: 1.1;
    letter-spacing: -0.02em; text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}
.course-major-item h3::after {
    content: "Browse books \2192"; display: block; margin-top: 0.55rem;
    font: 500 0.8rem/1 var(--font-ui); letter-spacing: 0; color: rgba(255,255,255,0.78); text-shadow: none;
    opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.course-major-item:hover h3::after { opacity: 1; transform: none; }
@media (hover: none) { .course-major-item h3::after { opacity: 1; transform: none; } }

/* Featured AI & ML course cards */
.course-card img.w-full { height: 10.5rem !important; filter: saturate(0.92); transition: transform 1s var(--ease-out); }
.course-card:hover img.w-full { transform: scale(1.03); }
.course-card .p-5 > div > div:first-child > p:first-child {
    font: 600 0.66rem/1 var(--font-ui) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted) !important;
}
.course-card .p-5 h3 { font-family: var(--font-display); font-size: 1.2rem !important; letter-spacing: -0.02em; line-height: 1.2; }
.course-card .p-5 p.text-gray-500 { color: var(--muted) !important; font-size: 0.82rem !important; }
.course-card .p-5 img { filter: grayscale(1) contrast(1.05); opacity: 0.75; height: 2.25rem !important; transition: filter 0.3s ease, opacity 0.3s ease; }
.course-card:hover .p-5 img { filter: none; opacity: 1; }
.course-card > div:last-child { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; color: var(--muted) !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem !important; }
.course-card .plus-icon { color: var(--foreground) !important; }
.course-card .course-details a { border-radius: 999px !important; font-family: var(--font-ui); font-weight: 600 !important; }

/* Explore by Platform — one unified ink treatment instead of eleven rainbow gradients */
.card-apple-platform {
    background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xs) !important; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.3s ease !important;
}
.card-apple-platform:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--border-strong); }
.card-visual { height: 12rem !important; filter: saturate(0.85); }
.card-visual::before { background: linear-gradient(160deg, rgba(11,11,13,0.28) 0%, rgba(11,11,13,0.66) 100%) !important; }
.card-visual svg { width: 3.25rem !important; height: 3.25rem !important; stroke-width: 1.5; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important; opacity: 0.95; }
.card-content-platform { padding: 1.5rem !important; }
.card-content-platform h2 { font-family: var(--font-display); font-size: 1.35rem !important; letter-spacing: -0.02em; margin-bottom: 0.5rem !important; }
.card-content-platform p { color: var(--muted) !important; font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.25rem !important; }
.card-link-platform { color: var(--foreground) !important; font: 600 0.88rem/1 var(--font-ui); }

/* Top Universities */
#universities-grid a {
    border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; height: 14rem !important;
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out) !important;
}
#universities-grid a:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
#universities-grid a > div:first-child { background: linear-gradient(to top, rgba(11,11,13,0.85) 0%, rgba(11,11,13,0.25) 55%, rgba(11,11,13,0) 100%) !important; }
#universities-grid h3 { font-size: 1.05rem !important; letter-spacing: -0.015em; line-height: 1.2; }
#universities-grid p {
    background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 600 0.66rem/1 var(--font-ui) !important; letter-spacing: 0.06em; padding: 0.4rem 0.65rem !important;
}

/* Subjects — no rainbow buttons, one button language */
.subject-item {
    border-radius: var(--radius-lg) !important; border: 1px solid var(--border); box-shadow: var(--shadow-xs) !important;
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out) !important;
}
.subject-item:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.subject-item img { height: 10.5rem !important; filter: saturate(0.9); }
.subject-item .p-6 { padding: 1.35rem !important; }
.subject-item h2 { font-size: 1.25rem !important; letter-spacing: -0.02em; margin-bottom: 0.4rem !important; }
.subject-item p { color: var(--muted) !important; font-size: 0.9rem !important; line-height: 1.55; margin-bottom: 1.1rem !important; }
.view-details-subject-btn {
    background: var(--foreground) !important; color: #fff !important; border-radius: 999px !important;
    font: 600 0.82rem/1 var(--font-ui) !important; padding: 0.65rem 1.1rem !important; box-shadow: var(--shadow-xs);
    transition: background-color 0.2s ease, transform 0.3s var(--ease-out) !important;
}
.view-details-subject-btn:hover { background: #1a1a1f !important; transform: translateY(-1px); }

/* Study Material tiles */
#study-material-grid { gap: 1.25rem !important; }
#study-material-grid > * { border-radius: var(--radius-xl) !important; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
#study-material-grid img { filter: saturate(0.9); transition: transform 1.1s var(--ease-out) !important; }
#study-material-grid h2 { font-family: var(--font-display); font-size: 1.6rem !important; letter-spacing: -0.025em; margin-bottom: 0.4rem !important; }
#study-material-grid p { font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.82) !important; }
#study-material-grid > * > div:last-child { background: linear-gradient(to top, rgba(11,11,13,0.88) 0%, rgba(11,11,13,0.3) 55%, rgba(11,11,13,0) 100%) !important; }

/* College Essentials */
#college-essentials .grid > div img { filter: saturate(0.92); transition: transform 1s var(--ease-out); }
#college-essentials .grid > div:hover img { transform: scale(1.03); }

/* Staggered entrance for card grids */
.reveal-grid > * { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-grid.is-in > * { opacity: 1; transform: none; }
.reveal-grid.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-grid.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-grid.is-in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-grid.is-in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-grid.is-in > *:nth-child(6) { transition-delay: 350ms; }
.reveal-grid.is-in > *:nth-child(n+7) { transition-delay: 420ms; }
/* Hover lifts must win over the entrance transform once revealed */
.reveal-grid.is-in > .course-card:hover { transform: translateY(-3px) !important; }
.reveal-grid.is-in > .card-apple-platform:hover, .reveal-grid.is-in > .subject-item:hover, .reveal-grid.is-in > a:hover { transform: translateY(-4px) !important; }
.reveal-grid.is-in > #study-material-grid > *:hover, #study-material-grid.reveal-grid.is-in > *:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    .reveal-grid > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* No-motion mode (reduced motion / background tab on load) */
.nb-no-motion .reveal, .nb-no-motion .reveal-grid > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }

/* Headings inside dark surfaces inherit white (global heading colour must not leak in) */
.premium-highlight-box h1, .premium-highlight-box h2, .premium-highlight-box h3, .premium-highlight-box h4,
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4, .bg-gray-900 h1, .bg-gray-900 h2, .bg-gray-900 h3, .bg-gray-900 h4,
footer h3, footer h4 { color: #fff; }
.premium-highlight-box h3 { font-size: clamp(1.6rem, 2.4vw, 2.25rem) !important; letter-spacing: -0.025em; }

/* Balanced grids: the "4 visible" rule needs 4 columns on desktop (no orphans, no empty slots) */
@media (min-width: 1024px) {
    #platforms-grid, #universities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    #platforms-grid { gap: 1.25rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #platforms-grid, #universities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ================================================================== */
/* 14. Study Library                                                   */
/* ================================================================== */
.study-toolbar { max-width: 56rem; margin: 0 auto 2.25rem; display: grid; gap: 0.9rem; }
.study-search { position: relative; }
.study-search svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted-2); pointer-events: none; }
.study-search input {
    width: 100%; height: 3.5rem; padding: 0 3rem 0 3rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs);
    font: 400 1rem/1 var(--font-ui); color: var(--foreground);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.study-search input::placeholder { color: var(--muted-2); }
.study-search input:focus { border-color: var(--foreground); box-shadow: 0 0 0 4px rgba(11,11,13,0.06); outline: none; }
.study-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.study-search kbd {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font: 600 0.66rem/1 var(--font-ui); letter-spacing: 0.06em; color: var(--muted-2);
    padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2);
}
@media (max-width: 639px) { .study-search kbd { display: none; } }
.study-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.study-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.95rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); color: var(--foreground-2);
    font: 500 0.82rem/1 var(--font-ui); cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.study-chip:hover { background: var(--foreground); border-color: var(--foreground); color: #fff; transform: translateY(-1px); }
.study-chip svg { width: 14px; height: 14px; stroke-width: 1.75; }
.study-hide { display: none !important; }
#study-material-wrapper.is-searching { max-height: none !important; }
#study-material-wrapper.is-searching > .grid > *:not(.study-empty) { display: block !important; }
#study-material-wrapper.is-searching > .grid > .study-hide { display: none !important; }
.study-empty { display: none; }
#study-material-wrapper.is-searching.is-empty .study-empty { display: block; grid-column: 1 / -1; }

/* ================================================================== */
/* 15. Thinkly AI — flagship workspace polish                          */
/* ================================================================== */
#thinkly-ai-hero .expanded-header { border-bottom: 1px solid var(--border) !important; background: rgba(255,255,255,0.86) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#thinkly-ai-hero .expanded-title { font: 600 0.95rem/1 var(--font-ui); letter-spacing: -0.01em; }
#thinkly-ai-hero .expanded-title .shine-colorful { background: none !important; -webkit-text-fill-color: var(--foreground) !important; color: var(--foreground) !important; animation: none !important; }
#thinkly-ai-hero .control-button { border-radius: 999px; color: var(--foreground-2); transition: background-color var(--dur-fast) ease; }
#thinkly-ai-hero .control-button:hover { background: rgba(11,11,13,0.06); }

#thinkly-ai-hero #expandedChatOutput { background: var(--background); }
#thinkly-ai-hero .ai-message {
    border: none !important; box-shadow: none !important;
    font-family: var(--font-ui); font-size: 0.95rem; color: #1d1d1f !important;
}
#thinkly-ai-hero .user-message {
    background: var(--foreground) !important; color: #fff !important;
    border-radius: 18px !important; border-bottom-right-radius: 6px !important; padding: 0.8rem 1.05rem !important;
    font-family: var(--font-ui); font-size: 0.95rem; box-shadow: var(--shadow-sm);
}
#thinkly-ai-hero .ai-pill {
    background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--foreground-2) !important;
    border-radius: 999px !important; font: 500 0.8rem/1 var(--font-ui) !important; padding: 0.55rem 0.9rem !important;
    box-shadow: var(--shadow-xs); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur) var(--ease-out) !important;
}
#thinkly-ai-hero .ai-pill:hover { background: var(--foreground) !important; color: #fff !important; border-color: var(--foreground) !important; transform: translateY(-1px); }

#thinkly-ai-hero .thinkly-input-bar, #thinkly-ai-hero .expanded-input-area .thinkly-input-bar {
    border: 1px solid var(--border-strong) !important; border-radius: 22px !important; background: var(--surface) !important;
    box-shadow: var(--shadow-md) !important; transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out) !important;
}
#thinkly-ai-hero .thinkly-input-bar:focus-within { border-color: var(--foreground) !important; box-shadow: var(--shadow-lg), 0 0 0 4px rgba(11,11,13,0.05) !important; }
#thinkly-ai-hero .thinkly-chat-input { font-family: var(--font-ui) !important; font-size: 0.98rem !important; color: var(--foreground) !important; }
#thinkly-ai-hero .thinkly-chat-input::placeholder { color: var(--muted-2); }
#thinkly-ai-hero .thinkly-plus-btn, #thinkly-ai-hero .thinkly-mic-btn { color: var(--foreground-2) !important; border-radius: 999px; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
#thinkly-ai-hero .thinkly-plus-btn:hover, #thinkly-ai-hero .thinkly-mic-btn:hover { background: rgba(11,11,13,0.06) !important; color: var(--foreground) !important; }

#thinkly-ai-hero .premium-menu { border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface-elevated) !important; padding: 0.35rem !important; }
#thinkly-ai-hero .menu-action { border-radius: var(--radius-sm) !important; font: 500 0.88rem/1.2 var(--font-ui) !important; color: var(--foreground-2) !important; }
#thinkly-ai-hero .menu-action:hover { background: var(--surface-2) !important; color: var(--foreground) !important; }
#thinkly-ai-hero .menu-action svg { width: 16px; height: 16px; stroke-width: 1.75; }

#thinklySidebar { background: rgba(251,251,250,0.98) !important; border-right: 1px solid var(--border); box-shadow: 24px 0 60px -30px rgba(11,11,13,0.3) !important; }
#thinklySidebar > div:first-child { border-color: var(--border) !important; }
#thinklySidebar button.bg-black { border-radius: 999px !important; font-family: var(--font-ui); font-weight: 600 !important; }
#thinklySidebar .rounded-xl { border-radius: var(--radius-sm) !important; font-family: var(--font-ui); font-weight: 500 !important; font-size: 0.9rem; }
#thinklySidebar .rounded-xl.bg-gray-100 { background: var(--foreground) !important; color: #fff !important; }
#thinklySidebar p.uppercase { font: 600 0.64rem/1 var(--font-ui) !important; letter-spacing: 0.18em !important; color: var(--muted-2) !important; }
#thinklySidebar .border-t { border-color: var(--border) !important; }
#thinklyAboutBtn h3 { font-family: var(--font-ui); font-size: 0.9rem; }
#thinklyAboutBtn p { font-size: 0.8rem; color: var(--muted) !important; }

/* Floating bubble — quieter, ink */
#thinkly-ai-hero .OEueve { background: var(--foreground) !important; box-shadow: var(--shadow-lg) !important; }

/* ================================================================== */
/* 16. Marketplace — book cards inside the Buy Books modal             */
/* ================================================================== */
#buyBooksModal .bg-slate-100.h-56 { background: linear-gradient(160deg, #f3f3f1, #e6e6e2) !important; height: 13rem !important; position: relative; }
#buyBooksModal .bg-slate-100.h-56::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.7), transparent 70%); pointer-events: none; }
#buyBooksModal .bg-slate-100.h-56 h2 { color: var(--foreground-2) !important; font-size: 1.6rem !important; letter-spacing: -0.02em; line-height: 1.15; opacity: 0.9; }
#buyBooksModal .p-5 h3.font-playfair { font-size: 1.25rem !important; letter-spacing: -0.02em; line-height: 1.2; }
#buyBooksModal .p-5 p.text-slate-500 { color: var(--muted) !important; font-size: 0.85rem !important; }
#buyBooksModal .bg-indigo-100 { background: var(--surface-2) !important; border: 1px solid var(--border); color: var(--foreground-2) !important; font: 600 0.66rem/1 var(--font-ui) !important; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.65rem !important; }
#buyBooksModal .text-yellow-400 { color: var(--foreground) !important; }
#buyBooksModal .text-yellow-400 svg, #buyBooksModal .text-slate-300 svg { width: 0.85rem !important; height: 0.85rem !important; }
#buyBooksModal .font-roboto.text-4xl { font: 700 1.75rem/1 var(--font-ui) !important; letter-spacing: -0.03em; color: var(--foreground) !important; }
#buyBooksModal .buy-now-btn { background: var(--foreground) !important; color: #fff !important; border-radius: 999px !important; box-shadow: var(--shadow-sm) !important; font: 600 0.85rem/1 var(--font-ui) !important; padding: 0.85rem 1rem !important; }
#buyBooksModal .buy-now-btn:hover { background: #1a1a1f !important; }
#buyBooksModal .add-to-backpack-btn { background: var(--surface) !important; color: var(--foreground) !important; border: 1px solid var(--border-strong); border-radius: 999px !important; box-shadow: var(--shadow-xs) !important; font: 600 0.85rem/1 var(--font-ui) !important; padding: 0.85rem 1rem !important; }
#buyBooksModal .add-to-backpack-btn:hover { border-color: rgba(11,11,13,0.28) !important; background: #fff !important; }
#buyBooksModal [class*="rounded"][class*="shadow"]:has(> .bg-slate-100.h-56) { border-radius: var(--radius-lg) !important; border: 1px solid var(--border); box-shadow: var(--shadow-xs) !important; overflow: hidden; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
#buyBooksModal [class*="rounded"][class*="shadow"]:has(> .bg-slate-100.h-56):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }

/* ================================================================== */
/* 17. Community — leaderboard                                         */
/* ================================================================== */
[id^="top-3-section"] .grid > div {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out) !important;
}
[id^="top-3-section"] .grid > div:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
[id^="top-3-section"] .grid > div img { border-width: 2px !important; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border); }
[id^="top-3-section"] .grid > div h3 { font-size: 1rem !important; letter-spacing: -0.015em; }
[id^="top-3-section"] .grid > div p.font-playfair { font-size: 0.8rem !important; font-family: var(--font-ui) !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) !important; background: var(--surface-2, #f3f4f6); padding: 3px 8px; border-radius: 10px; display: inline-block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 640px) { [id^="top-3-section"] .grid > div p.font-playfair { font-size: 0.6rem !important; padding: 2px 6px; letter-spacing: 0.04em; } [id^="top-3-section"] .grid > div h3 { font-size: 0.78rem !important; } [id^="top-3-section"] .grid > div p.font-light { font-size: 1.1rem !important; } [id^="top-3-section"] .grid { gap: 6px !important; } }
[id^="top-3-section"] .grid > div p.font-light { font-family: var(--font-ui); font-weight: 600 !important; color: var(--foreground) !important; font-size: 1.35rem !important; letter-spacing: -0.02em; }
[id^="top-3-section"] .grid > div p.font-light span.font-light { font-size: 0.72rem !important; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
[id^="top-3-section"] .grid > div span.rounded-full { background: var(--surface-2) !important; border: 1px solid var(--border); color: var(--foreground-2) !important; font-family: var(--font-ui); }
[id^="top-3-section"] .grid > div .text-brand-emperor, [id^="top-3-section"] .grid > div .text-brand-king, [id^="top-3-section"] .grid > div .text-brand-royal { filter: saturate(0.7); }
.leaderboard-container .segmented-control, #gamification .segmented-control { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem; }
#gamification h2.masked-text { -webkit-text-fill-color: var(--foreground) !important; background: none !important; color: var(--foreground) !important; }

/* ================================================================== */
/* 18. Modal content — one form language                               */
/* ================================================================== */
.modal-content label, .modal-content--fullscreen label { font: 600 0.78rem/1.2 var(--font-ui); letter-spacing: 0.02em; color: var(--foreground-2); }
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .modal-content select, .modal-content textarea,
.modal-content--fullscreen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .modal-content--fullscreen select, .modal-content--fullscreen textarea {
    border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; background: var(--surface) !important;
    font-family: var(--font-ui); color: var(--foreground); box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus,
.modal-content--fullscreen input:focus, .modal-content--fullscreen select:focus, .modal-content--fullscreen textarea:focus {
    border-color: var(--foreground) !important; box-shadow: 0 0 0 4px rgba(11,11,13,0.06) !important; outline: none;
}
.modal-content .bg-black, .modal-content--fullscreen .bg-black { border-radius: 999px !important; font-family: var(--font-ui); box-shadow: var(--shadow-sm); }
.modal-content .bg-gray-100, .modal-content--fullscreen .bg-gray-100 { background: var(--surface-2) !important; }
.modal-content .border-b, .modal-content--fullscreen .border-b, .modal-content .border-t, .modal-content--fullscreen .border-t, .modal-content .border, .modal-content--fullscreen .border { border-color: var(--border) !important; }
.modal-content .bg-gray-50, .modal-content--fullscreen .bg-gray-50 { border-radius: var(--radius-lg) !important; }
.modal-content .bg-red-500, .modal-content--fullscreen .bg-red-500, .modal-content .bg-orange-500, .modal-content--fullscreen .bg-orange-500, .modal-content .bg-blue-600, .modal-content--fullscreen .bg-blue-600, .modal-content .bg-green-600, .modal-content--fullscreen .bg-green-600, .modal-content .bg-indigo-600, .modal-content--fullscreen .bg-indigo-600 { background: var(--foreground) !important; border-radius: 999px !important; font-family: var(--font-ui); }
.modal-content button[id^="close"], .modal-content--fullscreen button[id^="close"] { background: var(--surface-2) !important; color: var(--foreground-2) !important; border-radius: 999px !important; }
.modal-content button[id^="close"]:hover, .modal-content--fullscreen button[id^="close"]:hover { background: rgba(11,11,13,0.08) !important; color: var(--foreground) !important; }

/* ================================================================== */
/* 19. Hero polish (photo kept exactly as is)                          */
/* ================================================================== */
#top h1 { font-family: var(--font-display) !important; letter-spacing: -0.045em !important; line-height: 0.95; }
#top p.hero-subtitle-shadow { font-family: var(--font-ui) !important; font-weight: 500 !important; letter-spacing: -0.01em; color: var(--foreground-2) !important; text-shadow: 0 1px 14px rgba(255,255,255,0.9); }
#top p.hero-subtitle-shadow > span {
    background: rgba(255,255,255,0.8) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-xs) !important;
    font: 500 0.78rem/1 var(--font-ui) !important; color: var(--foreground-2) !important; padding: 0.45rem 0.8rem !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem;
}
#top p.hero-subtitle-shadow > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
#top a.button-animation > button, #sellBookBtnHero {
    height: 3.25rem !important; width: auto !important; min-width: 12rem; padding: 0 1.5rem; font: 600 0.95rem/1 var(--font-ui) !important; letter-spacing: -0.005em !important;
    transform: none !important; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease !important;
}
#top a.button-animation > button { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
#top a.button-animation > button:hover { transform: translateY(-1px) !important; box-shadow: var(--shadow-md) !important; }
#sellBookBtnHero { background: rgba(255,255,255,0.86) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-xs) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#sellBookBtnHero:hover { transform: translateY(-1px) !important; border-color: rgba(11,11,13,0.26) !important; box-shadow: var(--shadow-sm) !important; }
#top a.button-animation > button svg, #sellBookBtnHero svg { width: 18px; height: 18px; margin-right: 0.55rem !important; }

/* ================================================================== */
/* 20. Small signals: icons, colours, empty states, toasts             */
/* ================================================================== */
section button[id^="freeResource"] svg { color: var(--foreground) !important; stroke-width: 1.6; width: 1.6rem; height: 1.6rem; }
section button[id^="freeResource"]:hover svg { color: var(--accent) !important; transform: none !important; }
.text-purple-600, .text-purple-500, .text-indigo-500, .text-indigo-600, .text-violet-600 { color: var(--accent) !important; }
#academySearchResults .bg-white { border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; border-radius: var(--radius-lg) !important; }
#academySearchResults .shadow-lg { box-shadow: var(--shadow-md) !important; }

/* Empty states: every "No … found" paragraph reads as designed, not as an afterthought */
.text-center.py-12 > p.text-gray-500.text-lg, #academySearchResults p.text-gray-500, p.text-gray-400.text-\[15px\] {
    display: inline-block; padding: 1rem 1.25rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    font: 500 0.9rem/1.4 var(--font-ui) !important; color: var(--muted) !important; background: var(--surface-2);
}

/* Toast */
#toast, .toast, [id$="Toast"], .nb-toast {
    font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: 0.9rem !important;
    border-radius: 999px !important; background: var(--foreground) !important; color: #fff !important;
    box-shadow: var(--shadow-lg) !important; border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Hero kicker pill sits on its own line, centred */
#top p.hero-subtitle-shadow > span { display: flex !important; width: max-content; margin: 0 auto 0.9rem !important; }
#top p.hero-subtitle-shadow br { display: none; }
section button[id^="freeResource"] svg, #pgComingSoonBtn svg { color: var(--foreground) !important; }
section button[id^="freeResource"] svg [stroke], #pgComingSoonBtn svg [stroke], section button[id^="freeResource"] svg[stroke], #pgComingSoonBtn svg[stroke] { stroke: currentColor !important; }
section button[id^="freeResource"]:hover svg, #pgComingSoonBtn:hover svg { color: var(--accent) !important; }
section button[id^="freeResource"] > :first-child, #pgComingSoonBtn > :first-child { color: var(--foreground) !important; }
section button[id^="freeResource"]:hover > :first-child, #pgComingSoonBtn:hover > :first-child { color: var(--accent) !important; }
[id^="freeResource"] svg, [id^="freeResource"] > :first-child { color: var(--foreground) !important; }
[id^="freeResource"]:hover svg, [id^="freeResource"]:hover > :first-child { color: var(--accent) !important; }