/* ==================================================================
   NEON CORE — shared design tokens & components
   Loaded after main.css / dashboard.css on the public site and in
   the user panel. Works in dark mode (html.dark-mode) and light mode.
   ================================================================== */

@property --nx-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ---------- Tokens: light ---------- */
:root {
    --nx-violet: #8b5cf6;
    --nx-violet-rgb: 139, 92, 246;
    --nx-indigo: #6366f1;
    --nx-cyan: #22d3ee;
    --nx-cyan-rgb: 34, 211, 238;
    --nx-pink: #f472b6;
    --nx-pink-rgb: 244, 114, 182;
    --nx-lime: #a3e635;
    --nx-amber: #fbbf24;
    --nx-red: #fb7185;

    --nx-grad: linear-gradient(115deg, #8b5cf6 0%, #6366f1 38%, #22d3ee 100%);
    --nx-grad-hot: linear-gradient(115deg, #f472b6 0%, #8b5cf6 50%, #22d3ee 100%);
    --nx-grad-text: linear-gradient(100deg, #a78bfa 0%, #22d3ee 50%, #f472b6 100%);

    --nx-bg: #f4f2ff;
    --nx-bg-2: #ebe7ff;
    --nx-surface: rgba(255, 255, 255, .72);
    --nx-surface-solid: #ffffff;
    --nx-surface-2: rgba(245, 243, 255, .9);
    --nx-border: rgba(109, 40, 217, .12);
    --nx-border-strong: rgba(109, 40, 217, .28);
    --nx-text: #1b1638;
    --nx-muted: #5d5883;
    --nx-glow: 0 10px 40px -10px rgba(var(--nx-violet-rgb), .35);
    --nx-glow-strong: 0 0 0 1px rgba(var(--nx-violet-rgb), .25), 0 12px 50px -8px rgba(var(--nx-violet-rgb), .55);
    --nx-grid: rgba(109, 40, 217, .07);
    --nx-radius: 1.5rem;
    --nx-radius-sm: .9rem;
    --nx-font: "Space Grotesk", "Inter", system-ui, sans-serif;
    --nx-font-display: "Orbitron", "Space Grotesk", sans-serif;

    /* map the original theme colours onto the neon palette */
    --color-1: #7c3aed;
    --color-1-rgb: 124, 58, 237;
    --color-2: #1b1638;
    --color-2-rgb: 27, 22, 56;
    --color-3: #f4f2ff;
    --color-3-rgb: 244, 242, 255;
    --color-4: #10b981;
    --color-4-rgb: 16, 185, 129;
    --color-5: #f43f5e;
    --color-5-rgb: 244, 63, 94;
    --color-6: #06b6d4;
    --color-6-rgb: 6, 182, 212;
}

/* ---------- Tokens: dark ---------- */
html.dark-mode {
    --nx-bg: #05040d;
    --nx-bg-2: #0b0920;
    --nx-surface: rgba(20, 16, 44, .62);
    --nx-surface-solid: #120f2a;
    --nx-surface-2: rgba(33, 27, 70, .66);
    --nx-border: rgba(167, 139, 250, .14);
    --nx-border-strong: rgba(167, 139, 250, .34);
    --nx-text: #eeebff;
    --nx-muted: #a8a2cf;
    --nx-glow: 0 10px 40px -12px rgba(var(--nx-violet-rgb), .55);
    --nx-grid: rgba(167, 139, 250, .06);

    --dark-bg-color: var(--nx-bg);
    --dark-color: var(--nx-surface);
    --dark-text-color: var(--nx-text);
    --dark-border-1: var(--nx-border);
    --dark-border-2: var(--nx-border-strong);
    --color-3: #0b0920;
    --color-3-rgb: 11, 9, 32;
}

/* ---------- Base ---------- */
html {
    background: var(--nx-bg) !important;
}

body {
    background: transparent !important;
    color: var(--nx-text);
    font-family: var(--nx-font) !important;
    -webkit-font-smoothing: antialiased;
}

html.dark-mode body {
    background: transparent !important;
}

/* Aurora + grid backdrop (fixed, behind everything) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 8% -10%, rgba(var(--nx-violet-rgb), .28), transparent 60%),
        radial-gradient(50vw 50vw at 100% 10%, rgba(var(--nx-cyan-rgb), .18), transparent 60%),
        radial-gradient(55vw 55vw at 50% 115%, rgba(var(--nx-pink-rgb), .16), transparent 60%),
        var(--nx-bg);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--nx-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--nx-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
}

#nx-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: .9;
}

h1, h2, h3, h4, h5, h6,
.card-heading,
.section-heading h2 {
    font-family: var(--nx-font) !important;
    letter-spacing: -.02em;
}

::selection {
    background: rgba(var(--nx-cyan-rgb), .35);
    color: inherit;
}

a {
    transition: color .25s ease;
}

/* Scrollbar (scoped: a universal selector makes every style recalc slower) */
html,
body,
.scroll-light,
.dropzone-scroll,
.gridjs-wrapper,
.table-custom,
.modal-body,
.offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--nx-violet-rgb), .55) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--nx-violet), var(--nx-cyan));
    border-radius: 10px;
    border: 3px solid var(--nx-bg);
}

/* ---------- Gradient text utility ---------- */
.nx-gradient-text {
    background: var(--nx-grad-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nx-shimmer 6s linear infinite;
}

@keyframes nx-shimmer {
    to { background-position: 200% center; }
}

/* ---------- Cards (glass) ---------- */
.card,
html.dark-mode .card {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -30px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-radius: var(--nx-radius);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.card:not(.uploader-card):hover {
    border-color: var(--nx-border-strong) !important;
    box-shadow: var(--nx-glow) !important;
}

.card-heading {
    color: var(--nx-text) !important;
}

/* ---------- Buttons ---------- */
.btn-color-1,
html.dark-mode .btn-color-1 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff !important;
    background: var(--nx-grad) !important;
    background-size: 160% 100% !important;
    border: 0 !important;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 8px 24px -8px rgba(var(--nx-violet-rgb), .8), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    transition: transform .25s ease, box-shadow .25s ease, background-position .6s ease !important;
}

.btn-color-1::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .45) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s ease;
}

.btn-color-1:hover,
html.dark-mode .btn-color-1:hover {
    color: #fff !important;
    background: var(--nx-grad) !important;
    background-size: 160% 100% !important;
    background-position: 100% 0 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(var(--nx-cyan-rgb), .75), 0 0 0 1px rgba(255, 255, 255, .15) inset;
}

.btn-color-1:hover::after {
    transform: translateX(120%);
}

.btn-color-1:active {
    transform: translateY(0) scale(.98);
}

.btn-color-2,
.btn-color-4,
html.dark-mode .btn-color-2,
html.dark-mode .btn-color-4,
html.dark-mode .dropzone .open-file,
.dropzone .open-file {
    border-radius: 999px !important;
    background: var(--nx-surface-2) !important;
    color: var(--nx-text) !important;
    border: 1px solid var(--nx-border-strong) !important;
    font-weight: 600;
    transition: all .25s ease !important;
}

.btn-color-2:hover,
.btn-color-4:hover {
    color: var(--nx-text) !important;
    border-color: var(--nx-cyan) !important;
    box-shadow: 0 0 0 3px rgba(var(--nx-cyan-rgb), .15), 0 10px 30px -12px rgba(var(--nx-cyan-rgb), .6);
    transform: translateY(-2px);
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: var(--nx-surface-2) !important;
    color: var(--nx-text) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-sm) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

.form-control:focus,
.form-select:focus,
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    border-color: var(--nx-violet) !important;
    box-shadow: 0 0 0 4px rgba(var(--nx-violet-rgb), .18), 0 0 24px -6px rgba(var(--nx-cyan-rgb), .5) !important;
}

.form-control::placeholder {
    color: var(--nx-muted) !important;
    opacity: .8;
}

.form-label {
    color: var(--nx-muted) !important;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.form-check .form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--nx-violet) !important;
    border-color: var(--nx-violet) !important;
    box-shadow: 0 0 12px rgba(var(--nx-violet-rgb), .6);
}

/* ---------- Dropdowns, modals, alerts ---------- */
.dropdown-menu,
html.dark-mode .dropdown-menu:not(.file-dropdown),
.modal-content,
html.dark-mode .modal-content {
    background: var(--nx-surface-solid) !important;
    border: 1px solid var(--nx-border-strong) !important;
    border-radius: var(--nx-radius-sm) !important;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 40px -20px rgba(var(--nx-violet-rgb), .6) !important;
}

.modal-backdrop.show {
    opacity: .7;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dropdown-menu .dropdown-item {
    border-radius: .6rem;
}

.dropdown-menu .dropdown-item:hover,
html.dark-mode .dropdown-menu:not(.file-dropdown) .dropdown-item:hover {
    background: rgba(var(--nx-violet-rgb), .16) !important;
    color: var(--nx-text) !important;
}

.alert-1, .alert-2, .alert-3,
html.dark-mode .alert-1, html.dark-mode .alert-2, html.dark-mode .alert-3 {
    border-radius: var(--nx-radius-sm) !important;
    border: 1px solid var(--nx-border-strong) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.alert-1, html.dark-mode .alert-1 {
    background: rgba(var(--color-5-rgb), .14) !important;
    border-color: rgba(var(--color-5-rgb), .45) !important;
}

.alert-2, html.dark-mode .alert-2 {
    background: rgba(var(--color-4-rgb), .14) !important;
    border-color: rgba(var(--color-4-rgb), .45) !important;
}

/* Toastify */
.toastify {
    border-radius: 999px !important;
    font-family: var(--nx-font);
    font-weight: 600;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6) !important;
}

/* Dropzone file items */
.dropzone .file-extension,
html.dark-mode .dropzone .file-extension {
    background: var(--nx-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 0 20px -6px rgba(var(--nx-cyan-rgb), .8);
}

.dropzone .file-extension span,
html.dark-mode .dropzone .file-extension span {
    color: #fff !important;
    opacity: .95 !important;
    font-family: var(--nx-font-display);
    letter-spacing: .06em;
}

.dropzone-previews-inner,
html.dark-mode .dropzone-previews-inner {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: 1.1rem !important;
}

.result-button,
html.dark-mode .result-button,
html.dark-mode .dropzone-toolbar .result-button {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-text) !important;
}

/* Dropzone file progress */
.dropzone .progress {
    background: rgba(var(--nx-violet-rgb), .15) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

.dropzone .progress-bar {
    background: var(--nx-grad) !important;
    box-shadow: 0 0 16px rgba(var(--nx-cyan-rgb), .8);
}

/* ==================================================================
   Gamification components (XP chip, level ring, badges, toasts)
   ================================================================== */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--nx-text);
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border-strong);
    white-space: nowrap;
}

.nx-chip i {
    color: var(--nx-cyan);
}

.nx-level-badge {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .35rem;
    border-radius: .7rem;
    font-family: var(--nx-font-display);
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: var(--nx-grad-hot);
    box-shadow: 0 0 18px -2px rgba(var(--nx-pink-rgb), .7);
}

.nx-xpbar {
    position: relative;
    height: .65rem;
    border-radius: 999px;
    background: rgba(var(--nx-violet-rgb), .16);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--nx-border);
}

.nx-xpbar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--nx-grad);
    box-shadow: 0 0 14px rgba(var(--nx-cyan-rgb), .9);
    transition: width 1.6s cubic-bezier(.2, .8, .2, 1);
}

.nx-xpbar > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 16px);
    animation: nx-stripes 1.2s linear infinite;
}

@keyframes nx-stripes {
    to { background-position: 32px 0; }
}

/* Topbar XP widget */
.nx-topbar-xp {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .9rem .3rem .35rem;
    border-radius: 999px;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border-strong);
    color: var(--nx-text) !important;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
}

.nx-topbar-xp:hover {
    box-shadow: var(--nx-glow-strong);
    transform: translateY(-1px);
}

.nx-topbar-xp .nx-level-badge {
    height: 1.9rem;
    min-width: 1.9rem;
    border-radius: 999px;
}

.nx-topbar-xp .nx-xpbar {
    width: 7rem;
    height: .45rem;
}

.nx-topbar-xp small {
    display: block;
    font-size: .68rem;
    line-height: 1;
    color: var(--nx-muted);
    margin-bottom: .25rem;
    font-weight: 600;
}

.nx-streak {
    color: #fb923c;
    font-weight: 700;
    font-size: .85rem;
}

.nx-streak i {
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, .9));
    animation: nx-flicker 1.6s ease-in-out infinite;
}

@keyframes nx-flicker {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.15) rotate(3deg); }
}

/* Floating XP / level toast */
.nx-toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    pointer-events: none;
}

.nx-toast {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 260px;
    max-width: 360px;
    padding: .9rem 1.1rem;
    border-radius: 1.1rem;
    color: #fff;
    background: rgba(18, 14, 40, .88);
    border: 1px solid rgba(var(--nx-violet-rgb), .45);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .7), 0 0 40px -12px rgba(var(--nx-violet-rgb), .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: nx-toast-in .6s cubic-bezier(.2, 1.4, .4, 1) both;
    pointer-events: auto;
}

.nx-toast.hide {
    animation: nx-toast-out .4s ease forwards;
}

.nx-toast .nx-toast-icon {
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .9rem;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--nx-grad-hot);
    box-shadow: 0 0 20px rgba(var(--nx-pink-rgb), .7);
}

.nx-toast strong {
    display: block;
    font-size: .95rem;
}

.nx-toast span {
    display: block;
    font-size: .8rem;
    color: #c9c3ee;
}

@keyframes nx-toast-in {
    from { opacity: 0; transform: translateY(30px) scale(.9); }
    to { opacity: 1; transform: none; }
}

@keyframes nx-toast-out {
    to { opacity: 0; transform: translateX(40px); }
}

.nx-float-xp {
    position: fixed;
    z-index: 2001;
    pointer-events: none;
    font-family: var(--nx-font-display);
    font-weight: 800;
    font-size: 1.4rem;
    background: var(--nx-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(var(--nx-cyan-rgb), .8));
    animation: nx-float-up 1.8s ease-out forwards;
}

@keyframes nx-float-up {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
    15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -110px) scale(1); }
}

#nx-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
    pointer-events: none;
}

/* Reveal on scroll */
.nx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}

.nx-reveal.nx-in {
    opacity: 1;
    transform: none;
}

/* Tilt */
.nx-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #nx-canvas { display: none; }
    .nx-reveal { opacity: 1; transform: none; }
}


/* ==================================================================
   Performance
   Blur (backdrop-filter) is the most expensive effect on phones and
   older laptops, so it is only used where it matters and switched off
   completely on touch devices and small screens, where the surfaces
   become solid instead.
   ================================================================== */
@media (max-width: 991.98px), (hover: none) {
    :root {
        --nx-surface: #ffffff;
        --nx-surface-2: #f2f0ff;
    }

    html.dark-mode {
        --nx-surface: #100d24;
        --nx-surface-2: #191534;
    }

    .card,
    html.dark-mode .card,
    .nx-tile,
    .nx-panel,
    .nx-badge-card,
    .nx-player,
    .nx-chip,
    .nx-eyebrow,
    .nx-period-switch,
    .nx-toast,
    nav.navbar,
    html.dark-mode nav.navbar,
    footer,
    .dashboard-sidebar,
    html.dark-mode .dashboard-sidebar,
    .topbar,
    html.dark-mode .topbar,
    .modal-content,
    .dropdown-menu,
    #cookies-policy {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* lighter shadows: large blur radii are expensive to paint */
    .card,
    html.dark-mode .card,
    .nx-tile,
    .nx-panel,
    .nx-badge-card {
        box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .5) !important;
    }

    .card.uploader-card {
        box-shadow: 0 16px 40px -28px rgba(var(--nx-violet-rgb), .8), 0 0 0 1px var(--nx-border) !important;
    }

    .card.uploader-card::after {
        display: none; /* blurred glow behind the uploader */
    }

    body::after {
        opacity: .6; /* the grid costs a full-screen layer */
    }
}