* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #353433; background-color: #ffffff; -webkit-font-smoothing: antialiased; }
* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.mobile-header { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; background-color: #ffffff; border-bottom: 1px solid #E9ECEF; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Верхняя часть шапки в стиле ks-auto */
.mobile-header-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 2px; max-width: 100%; }
.mobile-header-top-left { display: flex; align-items: center; gap: 8px; }
.mobile-header-logo-ks { display: flex; align-items: center; text-decoration: none; }
.mobile-header-logo-ks img { height: 24px; width: auto; display: block; }
.mobile-header-top-right { display: flex; align-items: center; gap: 12px; }
.mobile-theme-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; color: #353433; font-size: 20px; transition: color 0.2s ease; }
.mobile-theme-toggle:active { color: #E23737; transform: scale(0.95); }
.mobile-theme-toggle i { transition: transform 0.3s ease; }

/* Блог + кнопка создания записи */
.mobile-header-sub { padding: 6px 12px 2px; }
.mobile-header-blog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.mobile-header-blog-link { text-decoration: none; }
.mobile-header-blog-label { font-size: 18px; font-weight: 600; color: #353433; font-family: 'Inter-SemiBold', sans-serif; }
.mobile-header-blog-nav-current { font-size: 14px; color: #6c757d; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 250px); display: inline-block; vertical-align: middle; }
.mobile-header-cta-btn { background: #E23737; color: #ffffff; border: none; border-radius: 999px; padding: 8px 14px; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mobile-header-cta-btn i { font-size: 14px; }

/* Переключатель типов техники (как на ks-auto.ru) */
.mobile-header-sub { position: relative; }
.mobile-header-transport-switch { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 4px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.mobile-header-transport-switch::-webkit-scrollbar { height: 0; }
.mobile-transport-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 4px; border-radius: 8px; background-color: #ffffff; border: 1px solid #E9ECEF; font-size: 14px; font-weight: 500; color: #353433; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: rgba(226,55,55,0.1); user-select: none; }
.mobile-transport-btn-dropdown { position: relative; }
.mobile-transport-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.mobile-transport-btn:active { background-color: #F8F8F7; transform: scale(0.98); }
.mobile-transport-btn-dropdown.active { background-color: #F8F8F7; border-color: #E23737; }

/* Модальные окна выбора подразделов (снизу экрана, как в приложении) */
.mobile-transport-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; transition: opacity 0.3s ease; }
.mobile-transport-modal-overlay.show { display: block; opacity: 1; }

.mobile-transport-modal { display: none; position: fixed; bottom: 0; left: 0; right: 0; background-color: #ffffff; border-radius: 20px 20px 0 0; z-index: 2001; max-height: 80vh; transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); visibility: hidden; }
.mobile-transport-modal.show { display: block; visibility: visible; transform: translateY(0); }

.mobile-transport-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 16px; border-bottom: 1px solid #E9ECEF; }
.mobile-transport-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #353433; }
.mobile-transport-modal-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #6c757d; font-size: 18px; -webkit-tap-highlight-color: transparent; }
.mobile-transport-modal-close:active { color: #E23737; }

.mobile-transport-modal-content { padding: 8px 0; max-height: calc(80vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-transport-modal-item { display: flex; align-items: center; gap: 16px; padding: 16px; color: #353433; text-decoration: none; font-size: 15px; transition: background-color 0.2s ease; border-bottom: 1px solid #F8F8F7; -webkit-tap-highlight-color: rgba(226,55,55,0.1); }
.mobile-transport-modal-item:last-child { border-bottom: none; }
.mobile-transport-modal-item:active { background-color: #F8F8F7; }
.mobile-transport-modal-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }

.mobile-header-right { display: flex; align-items: center; gap: 12px; }
.mobile-header-burger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.mobile-header-burger span { display: block; width: 24px; height: 2px; background-color: #353433; border-radius: 2px; transition: all 0.3s ease; }
.mobile-header-burger:active span { background-color: #E23737; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; isolation: isolate; }
.mobile-menu-overlay.show { opacity: 1; visibility: visible; }
.mobile-menu-content { position: absolute; top: 0; right: 0; width: 85%; max-width: 320px; height: 100vh; background-color: #ffffff; box-shadow: -2px 0 8px rgba(0,0,0,0.15); transform: translateX(100%) translateZ(0); -webkit-transform: translateX(100%) translateZ(0); transition: transform 0.3s ease; display: flex; flex-direction: column; min-height: 0; overflow: hidden; z-index: 10001; }
.mobile-menu-overlay.show .mobile-menu-content { transform: translateX(0) translateZ(0); -webkit-transform: translateX(0) translateZ(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #E9ECEF; flex-shrink: 0; }
.mobile-menu-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: #353433; }
.mobile-menu-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #353433; font-size: 20px; -webkit-tap-highlight-color: transparent; }
.mobile-menu-close:active { color: #E23737; }
.mobile-menu-nav { flex: 1; padding: 8px 0; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; max-height: 100%; }
.mobile-menu-nav::-webkit-scrollbar { width: 4px; }
.mobile-menu-nav::-webkit-scrollbar-track { background: transparent; }
.mobile-menu-nav::-webkit-scrollbar-thumb { background: #E9ECEF; border-radius: 2px; }
.mobile-menu-nav::-webkit-scrollbar-thumb:hover { background: #6c757d; }
.mobile-menu-item { display: flex; align-items: center; gap: 16px; padding: 16px; color: #353433; text-decoration: none; font-size: 16px; transition: background-color 0.2s ease; border-bottom: 1px solid #F8F8F7; -webkit-tap-highlight-color: rgba(226,55,55,0.1); }
.mobile-menu-item:active { background-color: #F8F8F7; }
.mobile-menu-item i { width: 24px; text-align: center; color: #6c757d; font-size: 18px; }
.mobile-menu-item.active { background-color: rgba(226,55,55,0.05); color: #E23737; }
.mobile-menu-item.active i { color: #E23737; }
.mobile-menu-item-danger { color: #E23737; }
.mobile-menu-item-danger i { color: #E23737; }
.mobile-menu-item-danger:active { background-color: rgba(226,55,55,0.1); }
.mobile-menu-divider { height: 1px; background-color: #E9ECEF; margin: 8px 16px; }
.mobile-menu-footer { padding: 16px; border-top: 1px solid #E9ECEF; flex-shrink: 0; }
.mobile-menu-desktop-link { display: flex; align-items: center; gap: 12px; padding: 12px; color: #6c757d; text-decoration: none; font-size: 14px; border-radius: 8px; background-color: #F8F8F7; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.mobile-menu-desktop-link:active { background-color: #E9ECEF; }
.mobile-menu-desktop-link i { width: 20px; text-align: center; }
.mobile-profile-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; isolation: isolate; }
.mobile-profile-popup.show { opacity: 1; visibility: visible; }
.mobile-profile-popup-content { background-color: #ffffff; border-radius: 16px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transform: scale(0.9) translateZ(0); -webkit-transform: scale(0.9) translateZ(0); transition: transform 0.3s ease; z-index: 1; position: relative; margin: auto; }
.mobile-profile-popup.show .mobile-profile-popup-content { transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); }
.mobile-profile-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #E9ECEF; }
.mobile-profile-popup-header h4 { margin: 0; font-size: 18px; font-weight: 600; color: #353433; }
.mobile-profile-popup-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #6c757d; font-size: 18px; -webkit-tap-highlight-color: transparent; }
.mobile-profile-popup-close:active { color: #E23737; }
.mobile-profile-popup-body { padding: 24px 16px; text-align: center; }
.mobile-profile-popup-avatar { width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; border: 3px solid #E9ECEF; }
.mobile-profile-popup-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-profile-popup-name { margin: 0 0 8px 0; font-size: 20px; font-weight: 600; color: #353433; }
.mobile-profile-popup-id { margin: 0 0 24px 0; font-size: 14px; color: #6c757d; }
.mobile-profile-popup-actions { display: flex; flex-direction: column; gap: 8px; }
.mobile-profile-action-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; color: #353433; text-decoration: none; font-size: 16px; border-radius: 12px; background-color: #F8F8F7; border: 1px solid #E9ECEF; transition: all 0.2s ease; -webkit-tap-highlight-color: rgba(226,55,55,0.1); }
.mobile-profile-action-btn:active { background-color: #E9ECEF; transform: scale(0.98); }
.mobile-profile-action-btn-danger { color: #E23737; border-color: #E23737; }
.mobile-profile-action-btn-danger:active { background-color: rgba(226,55,55,0.1); }
.mobile-profile-action-btn i { width: 20px; text-align: center; }
.mobile-footer { background-color: #ffffff; border-top: 1px solid #E9ECEF; box-shadow: 0 -2px 4px rgba(0,0,0,0.05); padding: 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 1000; isolation: isolate; transform: none !important; top: auto !important; }
.mobile-footer-container { max-width: 100%; padding: 0 8px; }
.mobile-footer-links { display: flex; justify-content: space-around; align-items: center; margin: 0; }
.mobile-footer-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; color: #6c757d; text-decoration: none; font-size: 12px; min-width: 60px; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.mobile-footer-link:active { color: #E23737; }
.mobile-footer-link i { font-size: 20px; }
.mobile-footer-link.active { color: #E23737; }
.mobile-footer-link.active i { color: #E23737; }
.mobile-main { min-height: calc(100vh - 100px); padding-bottom: calc(155px + env(safe-area-inset-bottom)); position: relative; z-index: 1; isolation: isolate; }
body.menu-open, body.popup-open, body.modal-open { overflow: hidden; position: fixed; width: 100%; }
button, a, input, select, textarea { min-height: 44px; }
.mobile-header { isolation: isolate; }

/* ===== ТЕМНАЯ ТЕМА ===== */
/* Темная тема временно отключена
html.dark-theme,
html.dark-theme body {
    background-color: #1a1a1a;
    color: #e0e0e0;
}
*/

/* Темная тема временно отключена
html.dark-theme .mobile-header {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

html.dark-theme .mobile-header-top {
    border-bottom-color: #404040;
}

html.dark-theme .mobile-header-blog-label {
    color: #e0e0e0;
}
html.dark-theme .mobile-header-blog-nav-current {
    color: #aaa;
}
html.dark-theme .mobile-header-blog-nav-sep {
    color: #666;
}

html.dark-theme .mobile-header-sub {
    border-top-color: #404040;
}

html.dark-theme .mobile-transport-btn {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

html.dark-theme .mobile-transport-btn:active {
    background-color: #404040;
}

html.dark-theme .mobile-transport-btn-dropdown.active {
    background-color: #404040;
    border-color: #E23737;
}

html.dark-theme .mobile-theme-toggle {
    color: #e0e0e0;
}

html.dark-theme .mobile-header-burger span {
    background-color: #e0e0e0;
}

html.dark-theme .mobile-menu-content {
    background-color: #2d2d2d;
    box-shadow: -2px 0 8px rgba(0,0,0,0.5);
}

html.dark-theme .mobile-menu-header {
    border-bottom-color: #404040;
}

html.dark-theme .mobile-menu-header h3 {
    color: #e0e0e0;
}

html.dark-theme .mobile-menu-close {
    color: #e0e0e0;
}

html.dark-theme .mobile-menu-item {
    color: #e0e0e0;
    border-bottom-color: #404040;
}

html.dark-theme .mobile-menu-item:active {
    background-color: #404040;
}

html.dark-theme .mobile-menu-item i {
    color: #9e9e9e;
}

html.dark-theme .mobile-menu-item.active {
    background-color: rgba(226,55,55,0.15);
    color: #E23737;
}

html.dark-theme .mobile-menu-divider {
    background-color: #404040;
}

html.dark-theme .mobile-menu-footer {
    border-top-color: #404040;
}

html.dark-theme .mobile-menu-desktop-link {
    background-color: #404040;
    color: #9e9e9e;
}

html.dark-theme .mobile-menu-desktop-link:active {
    background-color: #505050;
}

html.dark-theme .mobile-profile-popup-content {
    background-color: #2d2d2d;
}

html.dark-theme .mobile-profile-popup-header {
    border-bottom-color: #404040;
}

html.dark-theme .mobile-profile-popup-header h4 {
    color: #e0e0e0;
}

html.dark-theme .mobile-profile-popup-close {
    color: #9e9e9e;
}

html.dark-theme .mobile-profile-popup-name {
    color: #e0e0e0;
}

html.dark-theme .mobile-profile-popup-id {
    color: #9e9e9e;
}

html.dark-theme .mobile-profile-popup-avatar {
    border-color: #404040;
}

html.dark-theme .mobile-profile-action-btn {
    background-color: #404040;
    border-color: #505050;
    color: #e0e0e0;
}

html.dark-theme .mobile-profile-action-btn:active {
    background-color: #505050;
}

html.dark-theme .mobile-footer {
    background-color: #2d2d2d;
    border-top-color: #404040;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.3);
}

html.dark-theme .mobile-footer-link {
    color: #9e9e9e;
}

html.dark-theme .mobile-transport-modal {
    background-color: #2d2d2d;
}

html.dark-theme .mobile-transport-modal-header {
    border-bottom-color: #404040;
}

html.dark-theme .mobile-transport-modal-header h3 {
    color: #e0e0e0;
}

html.dark-theme .mobile-transport-modal-close {
    color: #9e9e9e;
}

html.dark-theme .mobile-transport-modal-item {
    color: #e0e0e0;
    border-bottom-color: #404040;
}

html.dark-theme .mobile-transport-modal-item:active {
    background-color: #404040;
}

/* Темная тема для контента */
html.dark-theme .mobile-main {
    background-color: #1a1a1a;
}

html.dark-theme .mobile-blog-card,
html.dark-theme .mobile-blog-view-section,
html.dark-theme .mobile-blog-view-content,
html.dark-theme .mobile-blog-view-stats,
html.dark-theme .mobile-comments-section,
html.dark-theme .mobile-related-section,
html.dark-theme .mobile-cars-section,
html.dark-theme .mobile-create-section,
html.dark-theme .mobile-my-section,
html.dark-theme .mobile-author-section {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

html.dark-theme .mobile-blog-card-title,
html.dark-theme .mobile-blog-view-title,
html.dark-theme .mobile-related-title,
html.dark-theme .mobile-cars-title,
html.dark-theme .mobile-comments-header,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4 {
    color: #e0e0e0;
}

html.dark-theme .mobile-blog-card-meta,
html.dark-theme .mobile-blog-card-stat,
html.dark-theme .mobile-blog-view-meta,
html.dark-theme .mobile-related-card-meta,
html.dark-theme .mobile-car-card-meta {
    color: #9e9e9e;
}

html.dark-theme .mobile-blog-card-teaser,
html.dark-theme .mobile-blog-view-content-body,
html.dark-theme .mobile-related-card-title,
html.dark-theme .mobile-car-card-title {
    color: #d0d0d0;
}

html.dark-theme .mobile-car-card-price {
    color: #E23737;
}

html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select {
    background-color: #404040;
    border-color: #505050;
    color: #e0e0e0;
}

html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus {
    border-color: #E23737;
    background-color: #505050;
}

html.dark-theme .btn-ks-primary,
html.dark-theme .btn-ks-secondary {
    background-color: #E23737;
    color: #ffffff;
}

html.dark-theme .btn-ks-secondary {
    background-color: #404040;
    border-color: #505050;
}

html.dark-theme .btn-ks-secondary:hover {
    background-color: #505050;
}

/* Дополнительные стили для темной темы - карточки блогов */
html.dark-theme .mobile-blog-card,
html.dark-theme .mobile-blog-view-section,
html.dark-theme .mobile-blog-view-header,
html.dark-theme .mobile-blog-view-meta,
html.dark-theme .mobile-blog-view-content,
html.dark-theme .mobile-blog-view-stats,
html.dark-theme .mobile-blog-view-stat-btn {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

html.dark-theme .mobile-blog-card-title,
html.dark-theme .mobile-blog-view-title,
html.dark-theme .mobile-blog-view-content-body {
    color: #e0e0e0;
}

html.dark-theme .mobile-blog-card-meta,
html.dark-theme .mobile-blog-card-stat,
html.dark-theme .mobile-blog-view-meta span,
html.dark-theme .mobile-blog-card-teaser {
    color: #9e9e9e;
}

html.dark-theme .mobile-blog-card-stats {
    border-top-color: #404040;
}

html.dark-theme .mobile-blog-view-stat-btn {
    border-color: #404040;
}

html.dark-theme .mobile-blog-view-stat-btn:active {
    background-color: #404040;
    border-color: #E23737;
}

/* Темная тема для секций */
html.dark-theme .mobile-comments-section,
html.dark-theme .mobile-related-section,
html.dark-theme .mobile-cars-section,
html.dark-theme .mobile-create-section,
html.dark-theme .mobile-my-section,
html.dark-theme .mobile-author-section,
html.dark-theme .mobile-author-header,
html.dark-theme .mobile-author-stat {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

html.dark-theme .mobile-related-title,
html.dark-theme .mobile-cars-title,
html.dark-theme .mobile-comments-header,
html.dark-theme .mobile-author-name,
html.dark-theme .mobile-author-stat-value {
    color: #e0e0e0;
}

html.dark-theme .mobile-related-card,
html.dark-theme .mobile-car-card {
    background-color: #2d2d2d;
    border-color: #404040;
}

html.dark-theme .mobile-related-card-title,
html.dark-theme .mobile-car-card-title {
    color: #e0e0e0;
}

html.dark-theme .mobile-related-card-meta,
html.dark-theme .mobile-car-card-meta,
html.dark-theme .mobile-author-meta,
html.dark-theme .mobile-author-stat-label {
    color: #9e9e9e;
}

html.dark-theme .mobile-car-card-price {
    color: #E23737;
}

/* Темная тема для форм */
html.dark-theme .mobile-create-form,
html.dark-theme .comment-form,
html.dark-theme .mobile-status-section {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

html.dark-theme .mobile-status-header {
    border-bottom-color: #404040;
}

html.dark-theme .mobile-status-header h2 {
    color: #e0e0e0;
}

html.dark-theme .mobile-status-header .badge {
    background-color: #404040;
    color: #e0e0e0;
}

/* Темная тема для фильтров */
html.dark-theme .mobile-blogs-filter-btn {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

html.dark-theme .mobile-blogs-filter-btn.active {
    background-color: #E23737;
    color: #ffffff;
}

/* Темная тема для страниц */
html.dark-theme .mobile-blogs-page,
html.dark-theme .mobile-author-profile {
    background-color: #1a1a1a;
}

html.dark-theme .mobile-author-avatar {
    border-color: #404040;
}
*/