/* Telegram WebApp Custom Styles */
:root {
    --bg-color: var(--tg-theme-bg-color, #f8fafc);
    --secondary-bg-color: var(--tg-theme-secondary-bg-color, #ffffff);
    --text-color: var(--tg-theme-text-color, #0f172a);
    --hint-color: var(--tg-theme-hint-color, #64748b);
    --link-color: var(--tg-theme-link-color, #2563eb);
    --button-color: var(--tg-theme-button-color, #2563eb);
    --button-text-color: var(--tg-theme-button-text-color, #ffffff);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.card {
    background-color: var(--secondary-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .card {
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    }
}

.btn-primary {
    background-color: var(--button-color);
    color: var(--button-text-color);
}

.btn-primary:active {
    filter: brightness(0.9);
}

/* Modal animation */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.2);
    border-radius: 4px;
}