* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #0a0a0f;
    --color-bg-card: rgb(10 10 15 / 70%);
    --color-text: #fff;
    --color-text-secondary: rgb(255 255 255 / 70%);
    --color-accent: #ff7a00;
    --color-accent-hover: #e06a00;
    --color-heart: #ff2d55;
    --color-border: rgb(255 255 255 / 10%);
    --header-height: 56px;
    --floating-buttons-height: 72px;
    --card-padding: 20px;
    --border-radius: 12px;
    --font-family: -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', sans-serif;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes blink-caret {
    from, to {
        border-right-color: transparent;
    }
    50% {
        border-right-color: var(--color-accent);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

.slide-up {
    animation: slideUp 0.3s ease forwards;
}