/* Override ALL Telegram theme variables */
:root {
    --tg-theme-bg-color: #ffffff !important;
    --tg-theme-text-color: #1f1f1f !important;
    --tg-theme-hint-color: #c7c7c7 !important;
    --tg-theme-link-color: #0d6efd !important;
    --tg-theme-button-color: #0d6efd !important;
    --tg-theme-button-text-color: #ffffff !important;
    --tg-theme-secondary-bg-color: #f7f7f7 !important;
    --tg-viewport-height: 100vh !important;
    --tg-viewport-stable-height: 100vh !important;
}

/* Force light theme colors - no variables, direct values */
html {
    background: #ffffff !important;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    color: #1f1f1f !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Override any Telegram injected styles */
body[style] {
    background-color: #ffffff !important;
    color: #1f1f1f !important;
}

.header {
    padding: 15px 20px !important;
    text-align: center !important;
    background-color: #f7f7f7 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    /* Safe area top for notch/Dynamic Island */
    padding-top: max(15px, env(safe-area-inset-top)) !important;
}

.header h1 {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1f1f1f !important;
}

.header-logo {
    max-height: 28px !important;
    max-width: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

@media (max-width: 360px) {
    .header-logo {
        max-height: 24px !important;
        max-width: 75% !important;
    }
}

.content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #ffffff !important;
    color: #1f1f1f !important;
}

.bottom-nav {
    display: flex !important;
    justify-content: space-around !important;
    background-color: #f7f7f7 !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 10px 0 !important;
    /* Safe area bottom for home indicator */
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.bottom-nav .nav-item {
    flex: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #666666 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 5px !important;
    transition: color 0.2s !important;
}

.bottom-nav .nav-item.active {
    color: #0d6efd !important;
}

.bottom-nav .nav-item i {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

.bottom-nav .nav-item span {
    font-size: 12px !important;
}

.btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
}

/* Kill any dark theme that might leak through */
* {
    -webkit-text-fill-color: initial !important;
}