/* Moved out of templates/base.html so it is cached instead of re-sent on every page. */
        /* ===== DISCORD ADS PREMIUM STYLING ===== */
        .discord-banner {
            background: linear-gradient(135deg, #1e1b4b 0%, #5865f2 50%, #4f46e5 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            position: relative;
            z-index: 1000;
            animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }
        .db-content {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .db-badge {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: 0.5px solid rgba(255, 255, 255, 0.4);
            font-size: 9px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            letter-spacing: 0.1em;
        }
        .db-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.95);
            font-weight: 500;
        }
        .db-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .db-btn {
            background: #ffffff;
            color: #5865f2;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }
        .db-btn:hover {
            background: #f0f0f0;
            transform: translateY(-1px);
        }
        .db-btn.vteam {
            background: #23272a;
            color: #ffffff;
            border: 0.5px solid rgba(255, 255, 255, 0.15);
        }
        .db-btn.vteam:hover {
            background: #2c2f33;
        }
        .db-owner {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
        }
        .db-owner code {
            background: rgba(0,0,0,0.25);
            padding: 2px 5px;
            border-radius: 4px;
            color: #fff;
        }
        .db-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 12px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        .db-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        /* Footer Promo */
        .nexus-footer {
            border-top: 1px solid var(--glass-border);
            padding: 24px 30px;
            background: rgba(8, 8, 12, 0.8);
            margin-top: 40px;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }
        .nf-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        .nf-left p {
            font-size: 12px;
            color: var(--text-muted);
        }
        .nf-left a {
            color: var(--primary);
            text-decoration: none;
        }
        .nf-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .nf-title {
            font-size: 11px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
        }
        .nf-link {
            background: rgba(88, 101, 242, 0.12);
            color: #5865f2;
            border: 1px solid rgba(88, 101, 242, 0.25);
            padding: 5px 12px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            text-decoration: none;
            font-weight: 700;
            transition: all 0.2s;
        }
        .nf-link:hover {
            background: #5865f2;
            color: #fff;
            transform: translateY(-1px);
        }
        .nf-link.vteam {
            background: rgba(255, 255, 255, 0.04);
            color: #ccc;
            border-color: rgba(255, 255, 255, 0.1);
        }
        .nf-link.vteam:hover {
            background: #fff;
            color: #000;
        }
        .nf-owner {
            font-size: 11px;
            color: var(--text-muted);
        }
        .nf-owner strong {
            color: var(--text-secondary);
        }
        /* Floating Popup */
        .discord-popup {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 320px;
            background: rgba(10, 10, 15, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(88, 101, 242, 0.35);
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(88, 101, 242, 0.15);
            z-index: 9999;
            display: none;
            flex-direction: column;
            gap: 12px;
            animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes slideUp {
            from { transform: translateY(50px) scale(0.95); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        .dp-close {
            position: absolute;
            top: 14px;
            right: 14px;
            background: none;
            border: none;
            color: #555;
            cursor: pointer;
            font-size: 11px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        .dp-close:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        .dp-icon {
            font-size: 2.2rem;
        }
        .dp-title {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin-top: 4px;
        }
        .dp-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
        }
        .dp-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 6px;
        }
        .dp-link {
            display: block;
            text-align: center;
            background: #5865f2;
            color: #fff;
            text-decoration: none;
            padding: 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(88, 101, 242, 0.2);
        }
        .dp-link:hover {
            background: #4752c4;
            transform: translateY(-1px);
        }
        .dp-link.vteam {
            background: #2f3136;
        }
        .dp-link.vteam:hover {
            background: #36393f;
        }
        .dp-footer {
            border-top: 1px solid rgba(255,255,255,0.06);
            padding-top: 10px;
            margin-top: 6px;
            font-size: 11px;
            color: var(--text-dim);
        }
        .dp-footer strong {
            color: var(--text-secondary);
        }
        @media (max-width: 480px) {
            .discord-popup {
                bottom: 12px;
                right: 12px;
                left: 12px;
                width: auto;
            }
        }

/* Phones: components.css (loaded after nexus.css) was overriding the mobile sizes,
   so hero and section titles stayed desktop-sized. */
@media (max-width: 768px) {
    .hero-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); letter-spacing: -0.5px; line-height: 1.06; }
    .section-title { font-size: 1.3rem; margin-bottom: 14px; gap: 8px; }
    .section-title span { font-size: 1rem; }
}

/* The promo banner used to span the full width and cover the fixed sidebar's logo:
   keep it over the content column only. */
.discord-banner { margin-left: var(--sidebar-width); }
@media (max-width: 768px) { .discord-banner { margin-left: 0; } }

/* ---- motion & feel ---- */
/* Smooth page changes: the old page fades into the new one (Chrome/Edge 126+,
   Android WebView and the Windows app; other browsers just navigate as before). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Posters shimmer while they load instead of showing an empty box */
.content-card-poster:not([data-loaded]) {
    background: linear-gradient(110deg, #151A23 25%, #212838 45%, #151A23 65%);
    background-size: 250% 100%;
    animation: nxShimmer 1.3s linear infinite;
}
@keyframes nxShimmer { to { background-position: -250% 0; } }

/* TV sticks have weak GPUs: no live blur there */
html.app-tv *, html.app-tv *::before, html.app-tv *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .content-card-poster:not([data-loaded]) { animation: none; }
}

/* ---- instant search (#13) ---- */
.nx-search-bar { position: relative; display: flex; align-items: center; }
.nx-search-bar .search-overlay-input { flex: 1; padding-right: 64px; }
.nx-mic { position: absolute; right: 10px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
          font-size: 1.2rem; background: rgba(124,58,237,.25); color: #fff; transition: background .2s, transform .2s; }
.nx-mic:hover { background: rgba(124,58,237,.5); transform: scale(1.05); }
.nx-mic.listening { background: #7C3AED; animation: nxMic 1.2s ease-in-out infinite; }
@keyframes nxMic { 0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,.6); } 50% { box-shadow: 0 0 0 14px rgba(168,85,247,0); } }
#searchResults { display: block; width: 100%; max-width: 900px; margin-top: 22px; max-height: 70vh; overflow-y: auto; transition: opacity .2s; }
#searchResults .nx-search { width: 100%; }
#searchResults.loading { opacity: .55; }
.nx-search { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.nx-search-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; text-decoration: none; color: #fff;
                  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
                  animation: nxSearchIn .35s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i) * 30ms);
                  transition: background .2s, border-color .2s, transform .2s; }
.nx-search-item:hover, .nx-search-item:focus { background: rgba(124,58,237,.18); border-color: rgba(168,85,247,.5); transform: translateY(-2px); outline: none; }
.nx-search-item img { width: 46px; height: 69px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #151A23; }
.nx-search-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-search-meta b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-search-meta small { color: #C4B5FD; font-weight: 700; font-size: .75rem; }
.nx-search-empty { color: var(--text-secondary); text-align: center; padding: 20px; }
@keyframes nxSearchIn { from { opacity: 0; transform: translateY(8px); } }

/* phones: the community banner is one slim line instead of a 160 px block */
@media (max-width: 768px) {
    .discord-banner { padding: 7px 8px 7px 12px; gap: 8px; animation: none; }
    .db-content { flex-wrap: nowrap; gap: 8px; min-width: 0; flex: 1 1 auto; }
    .db-content::before { content: "💬"; font-size: 14px; }
    .db-badge, .db-owner, .db-text { display: none; }
    .db-actions { gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .db-btn { padding: 5px 10px; font-size: 11px; white-space: nowrap; box-shadow: none; }
}

/* ---- phones: less work per frame (#5) ---- */
.nf-title { color: var(--text-muted); }
.nf-link { color: #9aa3ff; }
.nf-left a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px) {
    /* rows below the screen are not laid out or painted until you scroll near them */
    html:not(.app-tv) .content-section { content-visibility: auto; contain-intrinsic-size: auto 330px; }
    /* a still placeholder instead of 100+ posters repainting a shimmer every frame */
    .content-card-poster:not([data-loaded]) { animation: none; background: #1a2030; }
    /* entrance animations cost a lot on slow phones and hide content from the first paint */
    .animate-fade-up { animation: none; }
}

/* PC app / desktop: the community banner is one line, so pages get the height back */
@media (min-width: 769px) {
    .db-content { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
    .db-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .db-actions { flex: none; }
    .discord-banner { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 769px) and (max-width: 1500px) { .db-owner { display: none; } }