/* =====================================================
   Base Extra Styles (from base.html)
   ===================================================== */

.loading-spinner-large {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.main-content {
    min-height: 100vh;
    padding: var(--spacing-md) 0;
}

/* Telegram WebApp specific styles */
body.tg-viewport {
    background: var(--tg-theme-bg-color, var(--bg-primary));
    color: var(--tg-theme-text-color, var(--text-primary));
}

.nav {
    background: var(--tg-theme-secondary-bg-color, var(--bg-glass));
}

.card {
    background: var(--tg-theme-bg-color, var(--bg-secondary));
    /* border-color: var(--tg-theme-hint-color, var(--border-color)); */
}

.btn-primary {
    background: var(--tg-theme-button-color, var(--color-primary));
    color: var(--tg-theme-button-text-color, var(--text-white));
}