/* ============================================
   AI Photo — Mobile (до 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Базовые */
    .navbar { padding: 8px 0 !important; }
    .navbar-brand img { height: 32px !important; }
    .logo-text { font-size: 1.1rem !important; }
    .nav-link { font-size: 0.9rem !important; margin: 4px 0 !important; }
    .btn-order-nav { font-size: 0.85rem !important; padding: 8px 18px !important; }
    .theme-btn { width: 34px !important; height: 34px !important; font-size: 0.9rem !important; }
    .hero { padding: 60px 16px 40px !important; }
    .hero-title { font-size: 2rem !important; }
    .hero-subtitle { font-size: 0.95rem !important; }
    .hero-badge { font-size: 0.75rem !important; padding: 6px 14px !important; }
    .btn-hero-order { padding: 14px 32px !important; font-size: 1rem !important; }
    .portfolio-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .portfolio-card-title { font-size: 1rem !important; }
    .portfolio-card-desc { font-size: 0.85rem !important; }
    .filter-tabs, .filter-row { gap: 6px !important; }
    .filter-tab { padding: 6px 14px !important; font-size: 0.8rem !important; }
    .section-title { font-size: 1.8rem !important; }
    .showcase { padding: 40px 0 60px !important; }
    .artwork-row { flex-direction: column !important; gap: 20px !important; margin-bottom: 40px !important; }
    .artwork-row:nth-child(even) { flex-direction: column !important; }
    .artwork-image { aspect-ratio: 16/10 !important; }
    .artwork-info h3 { font-size: 1.3rem !important; }
    .artwork-info p { font-size: 0.9rem !important; }
    .cta-section { padding: 40px 16px 60px !important; }
    .cta-section h2 { font-size: 1.6rem !important; }
    .btn-cta-large { padding: 14px 36px !important; font-size: 1rem !important; }
    .slider-container { max-height: 350px !important; }
    .slider-slide { max-height: 350px !important; }
    .slider-btn { width: 36px !important; height: 36px !important; font-size: 1.2rem !important; }
    .short-player { width: 100% !important; max-width: 100% !important; }
    .short-center { margin-bottom: 16px !important; }
    .title-row { flex-direction: column !important; align-items: flex-start !important; }
    .title-row h1 { font-size: 1.4rem !important; }
    .comment-card { padding: 14px !important; }
    .comment-card.reply { margin-left: 20px !important; }
    input[type="text"], input[type="email"], input[type="password"], textarea, select, .form-control { font-size: 0.9rem !important; padding: 12px !important; }
    .btn-sm { padding: 4px 10px !important; font-size: 0.75rem !important; }
    .cp-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .cp-stat-card { padding: 14px !important; }
    .cp-stat-card .value { font-size: 1.5rem !important; }
    .cp-table { font-size: 0.8rem !important; }
    .cp-table th, .cp-table td { padding: 8px 10px !important; }
    #cookie-banner { max-width: 90% !important; padding: 12px 16px !important; }
    #cookie-banner p { font-size: 0.75rem !important; }
    .footer { font-size: 0.8rem !important; padding: 20px !important; }
    .footer .container { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
    .hide-mobile { display: none !important; }
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }
    * { max-width: 100vw !important; }
    img { max-width: 100% !important; height: auto !important; }
    .hero::before { width: 300px !important; height: 300px !important; }
    .cta-section::before { width: 250px !important; height: 250px !important; }
    .hero .container, .showcase .container, .cta-section .container { max-width: 100% !important; padding: 0 12px !important; }
    .privacy-content h1 { font-size: 1.4rem !important; }
    .privacy-content h3 { font-size: 1rem !important; }
    .privacy-content p { font-size: 0.85rem !important; line-height: 1.6 !important; }
    
    /* About */
    .about-photo { width: 200px !important; height: 200px !important; margin: 12px auto !important; display: block !important; }
    .about-photo-placeholder { width: 200px !important; height: 200px !important; margin: 12px auto !important; }
    .btn-contact { width: 100% !important; margin-right: 0 !important; }
    .about-section h1 { font-size: 1.6rem !important; text-align: center !important; }
    .section-label { text-align: center !important; }
    .about-title-sub { text-align: center !important; }
    #about-container .section-label { font-size: 0.75rem !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #a78bfa !important; margin-bottom: 4px !important; }
    #about-container h1 { background: linear-gradient(135deg, #7b61ff, #c626ff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; margin-bottom: 4px !important; }
    #about-container .about-title-sub { color: #c4b5fd !important; font-weight: 500 !important; margin-bottom: 16px !important; }
    #about-photo img { box-shadow: 0 0 30px rgba(123, 97, 255, 0.25) !important; border: 2px solid rgba(123, 97, 255, 0.5) !important; }
    #about-bio { font-size: 0.9rem !important; line-height: 1.7 !important; color: var(--text-secondary) !important; padding: 0 4px !important; }
    .social-link { padding: 8px 14px !important; font-size: 0.85rem !important; border-radius: 10px !important; }
    [data-theme="light"] #about-container .about-title-sub { color: #7c3aed !important; font-weight: 500 !important; }
    [data-theme="light"] #about-container .section-label { color: #6d28d9 !important; }
    
    /* Профиль — не централизовать */
    .profile-menu { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; }
    .profile-menu a { font-size: 0.8rem !important; padding: 6px 12px !important; }
    .admin-panel-card > div { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .admin-panel-card .btn-order-nav { margin-left: 0 !important; margin-top: 4px !important; width: 100% !important; text-align: center !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-title { font-size: 2.8rem !important; }
    .artwork-row { gap: 40px !important; }
}

/* Профиль — компактный */
@media (max-width: 768px) {
    .profile-menu { gap: 4px !important; }
    .profile-menu a { font-size: 0.8rem !important; padding: 6px 10px !important; }
    .admin-panel-card { padding: 12px 14px !important; }
    .admin-panel-card h4 { font-size: 0.9rem !important; }
    .admin-panel-card p { font-size: 0.75rem !important; }
}

/* Заказы — мобильные */
@media (max-width: 768px) {
    .order-card { padding: 14px !important; }
    .order-card h4 { font-size: 0.95rem !important; }
    .order-card p { font-size: 0.8rem !important; }
    .order-card .status-badge { font-size: 0.75rem !important; padding: 4px 10px !important; }
    .btn-cancel { font-size: 0.8rem !important; padding: 6px 14px !important; }
    
    /* Форма создания заказа */
    .order-form { padding: 20px 14px !important; }
    .order-form textarea { font-size: 0.85rem !important; }
    .order-form input[type="file"] { font-size: 0.8rem !important; }
}

/* Заказы — кнопки в одну строку */
@media (max-width: 768px) {
    .section-header { flex-wrap: nowrap !important; gap: 8px !important; }
    .section-header h2 { font-size: 1.2rem !important; white-space: nowrap !important; }
    .section-header .btn-order-nav { font-size: 0.75rem !important; padding: 6px 12px !important; white-space: nowrap !important; }
    .section-header a[href*="profile"] { font-size: 0.75rem !important; white-space: nowrap !important; }
}

/* /cp/ админка — мобильная */
@media (max-width: 768px) {
    .cp-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .cp-stat-card { padding: 12px 8px !important; }
    .cp-stat-card .value { font-size: 1.3rem !important; }
    .cp-stat-card .label { font-size: 0.7rem !important; }
    
    .cp-actions { flex-wrap: wrap !important; gap: 6px !important; }
    .cp-action-btn { font-size: 0.75rem !important; padding: 8px 12px !important; }
    
    .cp-table { font-size: 0.7rem !important; min-width: 100% !important; }
    .cp-table th, .cp-table td { padding: 8px 6px !important; white-space: nowrap !important; }
    .cp-table img { width: 40px !important; height: 30px !important; }
    
    .badge-status { font-size: 0.65rem !important; padding: 3px 8px !important; }
    .btn-sm { font-size: 0.65rem !important; padding: 4px 8px !important; }
    
    /* Заголовок + кнопки */
    .cp-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
    .cp-header h1, .cp-header h2 { font-size: 1.3rem !important; }
    .cp-header > div { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
    
    /* Формы */
    .cp-form { padding: 16px !important; }
    .cp-form input, .cp-form select, .cp-form textarea { font-size: 0.85rem !important; padding: 10px !important; }
}

/* /cp/ картинки — нормальные пропорции */
@media (max-width: 768px) {
    .cp-table img { width: 50px !important; height: 38px !important; object-fit: cover !important; border-radius: 6px !important; }
    
    /* Кнопки действий — в 2 ряда */
    .cp-actions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .cp-action-btn { font-size: 0.72rem !important; padding: 8px 6px !important; text-align: center !important; }
    .cp-action-btn.primary { grid-column: span 3 !important; }
}

/* Картинки в таблицах — не скрывать */
@media (max-width: 768px) {
    .cp-table img { display: inline-block !important; max-width: none !important; }
}

/* /cp/ заголовок — всегда в строку */
@media (max-width: 768px) {
    .cp-header { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
    .cp-header h1 { font-size: 1.2rem !important; }
}

/* /cp/ разделы — кнопки не разъезжаются */
@media (max-width: 768px) {
    .cp-header > div { display: flex !important; gap: 6px !important; flex-wrap: nowrap !important; }
    .cp-header .btn-order-nav { font-size: 0.7rem !important; padding: 6px 10px !important; white-space: nowrap !important; }
    .cp-header a[href*="dashboard"] { font-size: 0.75rem !important; white-space: nowrap !important; }
}

/* Детальная работа — мобильный порядок */
@media (max-width: 768px) {
    .artwork-detail-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; }
    .artwork-detail-header .btn-back { margin-bottom: 0 !important; }
    .artwork-detail-header #like-section { margin-left: auto !important; }
    .title-row { margin-top: 12px !important; }
}

/* Детальная — мобильный порядок (без дублей) */
@media (max-width: 768px) {
    .like-desktop { display: none !important; }
    .artwork-detail-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
    .artwork-detail-header .btn-back { margin-bottom: 0 !important; }
    .mobile-like { display: inline-block !important; }
}

/* Лайк — ПК/мобильные */
@media (min-width: 769px) {
    .mobile-like { display: none !important; }
    .like-desktop { display: block !important; }
}
@media (max-width: 768px) {
    .like-desktop { display: none !important; }
    .mobile-like { display: inline-block !important; }
    .artwork-detail-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
    .artwork-detail-header .btn-back { margin-bottom: 0 !important; }
    .title-row { margin-top: 8px !important; }
}

/* Лайк на мобильных — переносим в строку с Назад */
@media (max-width: 768px) {
    .artwork-detail-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }
    .title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .title-row #like-section {
        position: absolute !important;
        top: 80px !important;
        right: 16px !important;
    }
}

/* Мобильные: лайк в строку с Назад */
@media (max-width: 768px) {
    .artwork-detail-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
    .artwork-detail-header .btn-back { margin-bottom: 0 !important; }
    .title-row #like-section { display: none !important; }
    .mobile-like-pull { display: block !important; }
    /* Копируем лайк в mobile-like-pull через JS */
}

/* Мобильные: лайк и Назад в одной строке */
@media (max-width: 768px) {
    .title-row { flex-wrap: wrap !important; }
    .title-row h1 { width: 100% !important; }
    .title-row #like-section { order: -1 !important; margin-left: auto !important; margin-bottom: 4px !important; }
}

/* Лайк в топ-баре */
@media (max-width: 768px) {
    #top-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
    #top-bar .btn-back { margin-bottom: 0 !important; }
}