body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #212529);
    transition: background-color 0.3s, color 0.3s;
}

.card {
    transition: transform 0.2s;
    border-radius: 12px;
    overflow: hidden;
}

.card:active {
    transform: scale(0.98);
}

.card-img-top {
    height: 160px;
    object-fit: cover;
    background-color: #f8f9fa;
}

body.dark-mode {
    background-color: #181818;
    color: #f5f5f5;
}

body.dark-mode .bg-light,
body.dark-mode .navbar {
    background-color: #242424 !important;
    border-color: #333 !important;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .list-group-item {
    background-color: #ffffff;
    color: #000000;
    border-color: #dddddd;
}

body.dark-mode input,
body.dark-mode select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #0d6efd !important;
    outline: none;
}

body.dark-mode input::placeholder {
    color: #666666 !important;
    opacity: 1;
}

body.dark-mode select option {
    background-color: #ffffff;
    color: #000000;
}