/* ====== UNIVERSAL RESET ====== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ====== CSS VARIABLES (RGB-BASED DYNAMIC THEME) ====== */
:root {
    --primary-rgb: 187, 134, 252;
    --secondary-rgb: 3, 218, 198;
    --accent-rgb: 255, 0, 255;
    --error-rgb: 207, 102, 121;
    --bg-primary-rgb: 12, 3, 17;
    --bg-secondary-rgb: 8, 2, 10;
    --track-rgb: 11, 4, 13;
    --text-primary-rgb: 228, 228, 228;
    --text-muted-rgb: 230, 230, 230;
    --border-rgb: 255, 255, 255;
    --shadow-rgb: 0, 0, 0;
    
    --glow-primary: 0.35;
    --glow-secondary: 0.22;
    --glow-accent: 0.28;
    --glow-soft: 0.15;

    /* Variabili Calcolate */
    --primary-color: rgb(var(--primary-rgb));
    --secondary-color: rgb(var(--secondary-rgb));
    --accent-color: rgb(var(--accent-rgb));
    --error-color: rgb(var(--error-rgb));
    --bg-primary: rgb(var(--bg-primary-rgb));
    --bg-secondary: rgb(var(--bg-secondary-rgb));
    --track-color: rgb(var(--track-rgb));
    --text-light: rgb(var(--text-primary-rgb));
    --text-muted: rgba(var(--text-muted-rgb), 0.75);
    --border-light: rgba(var(--border-rgb), 0.05);
    --shadow-dark: rgba(var(--shadow-rgb), 0.6);
    --neon-glow-primary: rgba(var(--primary-rgb), var(--glow-primary));
    --neon-glow-secondary: rgba(var(--secondary-rgb), var(--glow-secondary));
    --neon-glow-accent: rgba(var(--accent-rgb), var(--glow-accent));

    /* Light Mode RGB Defaults */
    --primary-light-rgb: 41, 121, 255;
    --secondary-light-rgb: 29, 233, 182;
    --error-light-rgb: 255, 23, 68;
    --bg-light-primary-rgb: 250, 250, 250;
    --bg-light-secondary-rgb: 244, 244, 244;
    --text-dark-rgb: 31, 31, 31;

    /* Fonts */
    --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-title: 'Orbitron', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Utilities */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --neon-blur: blur(1px);
    --glitch-duration: 0.5s;
}

/* ====== LIGHT MODE (System Preference) ====== */
@media (prefers-color-scheme: light) {
    :root {
        --primary-rgb: var(--primary-light-rgb);
        --secondary-rgb: var(--secondary-light-rgb);
        --error-rgb: var(--error-light-rgb);
        --bg-primary-rgb: var(--bg-light-primary-rgb);
        --bg-secondary-rgb: var(--bg-light-secondary-rgb);
        --text-primary-rgb: var(--text-dark-rgb);
        --text-muted-rgb: 51, 51, 51;
        --border-rgb: 0, 0, 0;
        --track-rgb: 230, 230, 230;
        --glow-primary: 0.16;
        --glow-secondary: 0.10;
        --glow-accent: 0.14;
        --glow-soft: 0.08;

        --bg-primary: rgb(var(--bg-primary-rgb));
        --bg-secondary: rgb(var(--bg-secondary-rgb));
        --track-color: rgb(var(--track-rgb));
        --text-light: rgb(var(--text-primary-rgb));
        --text-muted: rgba(var(--text-muted-rgb), 0.75);
        --border-light: rgba(var(--border-rgb), 0.1);
        --shadow-dark: rgba(var(--shadow-rgb), 0.1);
    }

    ::selection,
    ::-moz-selection {
        color: #000 !important;
    }
}

/* ====== BASE STYLES ====== */
html,
body {
    min-height: 100vh;
    height: 100%;
    font-family: var(--font-main);
    background: radial-gradient(circle at top left, var(--bg-primary) 0%, var(--bg-secondary) 80%);
    color: var(--text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-height: 1.6;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

/* ====== SELECTION & SCROLLBAR (Desktop) ====== */
::selection,
::-moz-selection {
    background: var(--primary-color);
    color: #fff;
    text-shadow: 0 0 5px var(--neon-glow-primary);
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--track-color);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-color) 90%, black),
        color-mix(in srgb, var(--secondary-color) 80%, black));
    border-radius: 6px;
    border: 2px solid var(--track-color);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 0 16px var(--neon-glow-primary);
}
html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 85%, black) var(--track-color);
}

/* ====== MOBILE OVERRIDE (FORCED DARK MODE & NO SCROLLBAR) ====== */
@media (max-width: 768px) {
    :root {
        /* Forza colori Dark su mobile */
        --primary-rgb: 187, 134, 252;
        --secondary-rgb: 3, 218, 198;
        --error-rgb: 207, 102, 121;
        --bg-primary-rgb: 18, 8, 22;
        --bg-secondary-rgb: 12, 4, 15;
        --track-rgb: 11, 4, 13;
        --text-primary-rgb: 228, 228, 228;
        --text-muted-rgb: 230, 230, 230;
        --border-rgb: 255, 255, 255;
        --shadow-rgb: 0, 0, 0;
        --glow-primary: 0.28;

        --bg-primary: rgb(var(--bg-primary-rgb));
        --bg-secondary: rgb(var(--bg-secondary-rgb));
        --track-color: rgb(var(--track-rgb));
        --text-light: rgb(var(--text-primary-rgb));
        --text-muted: rgba(var(--text-muted-rgb), 0.75);
        --border-light: rgba(var(--border-rgb), 0.2);
        --shadow-dark: rgba(var(--shadow-rgb), 0.6);
        --neon-glow-primary: rgba(var(--primary-rgb), var(--glow-primary));
    }

    html,
    body {
        background: radial-gradient(ellipse at 50% 20%, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }

    ::selection,
    ::-moz-selection {
        color: #fff !important;
    }

    /* Nascondi scrollbar su mobile (Miglioramento UX) */
    html {
        scrollbar-width: none;
    }
    ::-webkit-scrollbar,
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-thumb {
        display: none;
        width: 0;
        height: 0;
    }
}

/* ====== TOUCH & ANIMATIONS ====== */
button,
a,
input,
[role="button"],
.toggle-switch,
.drag-handle {
    touch-action: manipulation;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes softMove {
    0% { transform: translate(0, 0) skewX(0deg); }
    20% { transform: translate(-0.5px, 0.5px) skewX(0.3deg); }
    40% { transform: translate(0.5px, -0.5px) skewX(-0.3deg); }
    60% { transform: translate(-0.2px, 0.2px) skewX(0.1deg); }
    80% { transform: translate(0.2px, -0.2px) skewX(-0.1deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}
@keyframes pulseGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}
@keyframes glowLine {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .3s ease;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}