/* =====================================================
   MAIN STYLES - Allgemeine App-Styles
   ===================================================== */

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background: #000;
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Root Container - Mobile Padding */
#root {
    padding: 0 14px !important;
}

@media (min-width: 768px) {
    #root {
        padding: 0 !important;
    }
}

/* Form Elements */
input,
button,
select {
    font-family: inherit;
}

input:focus,
button:focus {
    outline: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

/* Shake Animation (für Fehler) */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-10px);
    }
    40%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Spin Animation (für Loader) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #30d158;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}