/* Базовые настройки и предотвращение iOS-багов */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; scrollbar-width: thin; scrollbar-color: #333 #000; -webkit-tap-highlight-color: transparent; }

html, body {
    width: 100%;
    height: 100%;
    background-color: #000;
    overscroll-behavior: none;
}

body { 
    color: #fff; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden; 
    position: relative; 
}

:root {
    --header-h: 60px;
    --footer-h: 40px;
    --safe-bottom: 0px;
    --safe-top: 0px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    :root {
        --safe-bottom: env(safe-area-inset-bottom);
        --safe-top: env(safe-area-inset-top);
    }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; border-left: 1px solid #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; border: 2px solid #000; transition: background 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: #666; }

input[type="text"], input[type="password"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Эластичные анимации */
button, .btn-outline, .back-btn, .admin-btn, .del-btn, .sidebar-close, .modal-close-custom, .network-btn, .messenger-btn, .tab-btn {
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    outline: none;
}

/* Исключаем лайтбокс кнопки из общего правила hover, чтобы не сбить центрирование */
button:not(.lightbox-btn):hover, .btn-outline:hover, .back-btn:hover, .admin-btn:hover, .network-btn:hover, .messenger-btn:hover, .tab-btn:hover {
    transform: translateY(-1.5px);
    filter: brightness(1.2);
}
button:not(.lightbox-btn):active, .btn-outline:active, .back-btn:active, .admin-btn:active, .del-btn:active, .tab-btn:active {
    transform: translateY(1px) scale(0.97);
}

/* --- ШАПКА --- */
header { position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--header-h) + var(--safe-top)); padding: var(--safe-top) 40px 0 40px; display: flex; justify-content: space-between; align-items: center; background-color: #000; z-index: 10000; transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease; }
header.hide-header { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.brand { display: flex; flex-direction: column; justify-content: center; }
.logo-container { width: 220px; height: 40px; background-color: #666; -webkit-mask-image: url('/assets/logo.png'); mask-image: url('/assets/logo.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.3s ease; }
.logo-container:hover { background-color: #888; }
.logo-container::after { content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: shimmer 4s linear infinite; }
@keyframes shimmer { 0% { left: -150%; } 100% { left: 150%; } }

.logo-subtitle { color: #555; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; padding-left: 2px; margin-top: -6px; position: relative; z-index: 2; }

.header-actions { display: flex; flex-direction: row; gap: 10px; align-items: center; }
.btn-outline { background: transparent; border: 1px solid #333; color: #888; padding: 8px 14px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btn-outline svg { fill: none; stroke: currentColor; stroke-width: 1.5; width: 13px; height: 13px; transition: transform 0.3s ease; }
.btn-outline:hover { border-color: #777; color: #fff; }
.btn-outline:hover svg { transform: translateX(3px); }

/* --- НАЧАЛЬНЫЙ ЭКРАН ЗАГРУЗКИ --- */
#initialAppLoader {
    position: fixed;
    top: calc(var(--header-h) + var(--safe-top));
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-h) - var(--safe-top));
    height: calc(100dvh - var(--header-h) - var(--safe-top));
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- ГЛАВНАЯ СЕТКА --- */
.main-view { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    padding-top: calc(var(--header-h) + var(--safe-top)); 
    padding-bottom: calc(var(--footer-h) + var(--safe-bottom) + 120px);
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: calc((100vh - var(--header-h) - var(--safe-top) - var(--footer-h) - 4px) / 2); 
    gap: 4px; 
    background-color: #000; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}
@supports (height: 100dvh) {
    .main-view {
        grid-auto-rows: calc((100dvh - var(--header-h) - var(--safe-top) - var(--footer-h) - var(--safe-bottom) - 4px) / 2); 
    }
}

.main-view.hide-main { opacity: 0; transform: scale(0.92) translateY(20px); pointer-events: none; }
.card { position: relative; overflow: hidden; cursor: pointer; background-color: #111; }
.card-bg { position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; background-size: cover; background-position: center; transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.card:nth-child(odd):last-child { grid-column: span 2; }
.card-bg-fallback { background-size: 180px !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.15 !important; }
.card-bg-video-fallback { background: linear-gradient(135deg, #090909 0%, #1a1a1a 100%) !important; }
.card-bg-video-fallback::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid rgba(255, 255, 255, 0.2); transition: border-left-color 0.3s; }
.card:hover .card-bg-video-fallback::before { border-left-color: rgba(255, 255, 255, 0.5); }

.card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 30%, transparent 60%); pointer-events: none; }
.card:hover .card-bg { transform: scale(1.03); }
.card-content { position: absolute; bottom: 35px; left: 35px; pointer-events: none; }
.card h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 15px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.pagination { display: flex; align-items: center; gap: 5px; }

.dot { width: 5px; height: 5px; border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s ease, border-radius 0.4s ease; }
.dot.active { background-color: #fff; width: 18px; border-radius: 2px; }

/* --- ГАЛЕРЕЯ РАЗДЕЛА --- */
.gallery-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #000; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.gallery-view.active { opacity: 1; pointer-events: all; }
.gallery-header { padding: calc(30px + var(--safe-top)) 40px 30px 40px; display: flex; align-items: center; gap: 30px; border-bottom: 1px solid #111; transform: translateY(-30px); opacity: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gallery-view.active .gallery-header { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.back-btn { background: none; border: 1px solid #333; color: #888; padding: 8px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
.back-btn:hover { color: #fff; border-color: #666; }
.gallery-title { font-size: 20px; font-weight: 500; letter-spacing: 1px; }
.gallery-grid { flex-grow: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 40vh; gap: 4px; padding: 4px 4px calc(var(--footer-h) + var(--safe-bottom) + 120px) 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gallery-item { width: 100%; height: 100%; object-fit: cover; cursor: pointer; background-color: #111; opacity: 0; transform: translateY(60px) scale(0.95); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease; background-position: center; background-size: cover; position: relative; }
.gallery-item.show { opacity: 1; transform: translateY(0) scale(1); }
.gallery-item:hover { filter: brightness(1.25); }

/* --- ЛАЙТБОКС С КРУПНЫМ ФОТО И СТРЕЛКАМИ ПО ЦЕНТРУ --- */
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.95); display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 14000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(10px); padding: calc(10px + var(--safe-top)) 0 calc(10px + var(--safe-bottom)) 0; box-sizing: border-box; }
.lightbox.active { opacity: 1; pointer-events: all; }

.lb-header { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 16px; z-index: 1002; flex-shrink: 0; }
.lb-counter { color: #888; font-size: 13px; letter-spacing: 2.5px; font-weight: 500; text-transform: uppercase; }

.lb-body { flex: 1; width: 100%; display: flex; justify-content: center; align-items: center; min-height: 0; padding: 16px 6px; box-sizing: border-box; }
.lb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1010;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ddd;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.lightbox-close:hover { color: #fff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }

/* Центр: Крупный медиа-контейнер */
.lightbox .media-container { 
    width: 100%;
    height: 100%;
    display: flex; justify-content: center; align-items: center; 
    position: relative; 
    box-sizing: border-box;
}
.lb-zoom-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
    border-radius: 6px;
}
.lb-zoom-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
    border: none;
    border-radius: 6px;
    outline: none;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    /* Плавная анимация зума (отключается при перетаскивании через is-grabbing) */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Улучшение качества при масштабировании */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.lightbox video { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    box-shadow: 0 10px 50px rgba(0,0,0,0.5); 
    border: none; 
    border-radius: 6px; 
    outline: none; 
}
/* Кнопки переключения — у края картинки, не экрана */
.lightbox-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(30, 30, 30, 0.75); 
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%; 
    color: #ddd; 
    font-size: 24px; 
    width: 58px; height: 58px; 
    display: flex; justify-content: center; align-items: center; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    z-index: 1005; 
    backdrop-filter: blur(8px);
}
.lightbox-btn:hover { 
    color: #fff; 
    background: rgba(255, 255, 255, 0.18); 
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%) scale(1.08) !important; 
}
.lightbox-btn:active {
    transform: translateY(-50%) scale(0.95) !important; 
}
.lightbox-prev { left: 10px; padding-right: 4px; }
.lightbox-next { right: 10px; padding-left: 4px; }

#lbDescription { color: #fff; margin: 10px 0; font-size: 13px; max-width: 80%; text-align: center; line-height: 1.4; background: rgba(15, 15, 15, 0.85); padding: 8px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); word-break: break-word; z-index: 1005; user-select: none; flex-shrink: 0; }

.lb-indicators { position: relative; display: flex; gap: 8px; z-index: 2; margin-top: 10px; flex-shrink: 0; }
.lb-dot { width: 6px; height: 6px; border-radius: 3px; background-color: rgba(255, 255, 255, 0.2); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s ease, border-radius 0.4s ease; cursor: pointer; }
.lb-dot.active { width: 28px; background-color: #fff; }

/* --- ФУТЕР --- */
footer { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(var(--footer-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background-color: #000; display: flex; justify-content: flex-end; align-items: center; padding-left: 40px; padding-right: 40px; z-index: 100; }
.visitor-count { color: #444; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: color 0.3s; }
.visitor-count:hover { color: #fff; }

/* --- БОКОВОЕ МЕНЮ --- */
.sidebar { position: fixed; top: 0; right: 0; width: 400px; height: 100%; background-color: #0a0a0a; border-left: 1px solid #1a1a1a; z-index: 12000; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); display: flex; flex-direction: column; padding-bottom: var(--safe-bottom); }
.sidebar.active { transform: translateX(0); }
.sidebar-header { padding: calc(30px + var(--safe-top)) 30px 30px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a1a1a; }
.sidebar-title { font-size: 11px; letter-spacing: 4px; color: #666; text-transform: uppercase; }
.sidebar-close { background: none; border: none; color: #666; font-size: 24px; }
.sidebar-close:hover { color: #fff; }
.sidebar-content { padding: 40px 30px; display: flex; flex-direction: column; gap: 40px; flex-grow: 1; overflow-y: auto; }
.contact-block { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #1a1a1a; padding-bottom: 30px; }
.contact-label { font-size: 10px; letter-spacing: 3px; color: #444; text-transform: uppercase; }
.contact-value { font-size: 16px; color: #fff; display: flex; align-items: center; justify-content: space-between; text-decoration: none; transition: color 0.3s; }
.contact-value:hover { color: #aaa; }
.contact-value svg { width: 14px; height: 14px; stroke: #666; }

.messengers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.messenger-btn { border: 1px solid #1a1a1a; background: transparent; color: #aaa; padding: 12px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.messenger-btn:hover { background: #111; color: #fff; }
.messenger-btn svg { fill: currentColor; }

.sidebar-footer { padding: 30px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1a1a1a; }
.sidebar-logo { width: 100px; opacity: 0.3; }

/* --- МОДАЛЬНЫЕ ОКНА --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); z-index: 13000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-box { background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); padding: 30px; width: 850px; max-width: 95%; border-radius: 12px; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); }
.modal-close-custom { position: absolute; top: 25px; right: 25px; background: none; border: none; color: #888; font-size: 24px; }
.modal-close-custom:hover { color: #fff; }
.modal-title { font-size: 18px; margin-bottom: 20px; font-weight: 500; letter-spacing: 0.5px; }

.share-link-box { display: flex; gap: 10px; margin-bottom: 20px; }
.share-input { flex-grow: 1; background: #000; border: 1px solid #333; color: #fff; padding: 10px; border-radius: 4px; font-size: 12px; outline: none; }
.share-copy-btn { background: #333; border: none; color: #fff; padding: 0 15px; border-radius: 4px; font-size: 12px; }
.share-copy-btn:hover { background: #555; }
.share-networks { display: flex; gap: 10px; }
.network-btn { flex: 1; padding: 10px; text-align: center; border: 1px solid #333; color: #aaa; text-decoration: none; border-radius: 4px; font-size: 12px; }
.network-btn:hover { background: #222; color: #fff; }

.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px; margin-bottom: 20px; }
.tab-btn { flex: 1; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); color: #666; padding: 10px; border-radius: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.tab-btn.active { background: #fff; color: #000; border-color: #fff; }

.admin-dept { display: none; }
.admin-dept.active { display: block; }

.admin-input { width: 100%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 12px; border-radius: 6px; margin-bottom: 15px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.admin-input:focus { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 12px rgba(255, 255, 255, 0.05); }
.admin-btn { width: 100%; background: #fff; color: #000; border: none; padding: 12px; font-weight: bold; border-radius: 6px; }
.admin-btn:hover { background: #ccc; }
.admin-dashboard { display: none; }
.admin-section { margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 20px; }
.admin-section h3 { font-size: 11px; color: #666; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2.5px; }

.dept-categories-split { display: flex; gap: 24px; min-height: 450px; }
.dept-left { width: 40%; border-right: 1px solid rgba(255, 255, 255, 0.05); padding-right: 20px; display: flex; flex-direction: column; }
.dept-right { width: 60%; display: flex; flex-direction: column; }

.admin-list { list-style: none; margin-bottom: 15px; max-height: 60vh; overflow-y: auto; padding-right: 5px; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.01); padding: 12px; margin-bottom: 6px; border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; font-size: 12px; word-break: break-all; gap: 10px; cursor: pointer; transition: all 0.25s ease; }
.admin-list li:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.admin-list li.active-cat { border: 1px solid #fff; background: rgba(255, 255, 255, 0.05); }

.admin-media-thumb { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; background: #222; border: 1px solid #333; }
.video-thumb { display: flex; align-items: center; justify-content: center; }
.admin-media-label { font-size: 11px; color: #888; }
.admin-media-item { display: flex; flex-direction: column; align-items: stretch; background: rgba(0, 0, 0, 0.3); padding: 12px; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 12px; gap: 8px; }

.del-btn { background: #2b0000; color: #ff5555; border: 1px solid rgba(255,0,0,0.2); padding: 8px 12px; border-radius: 4px; min-width: 75px; font-weight: 500; font-size: 11px; }
.del-btn:hover { background: #5a0000; color: #fff; }

#mediaUploadSection { transition: border-color 0.3s, background-color 0.3s; }
#mediaUploadSection.drag-over { border-color: #00ff88 !important; background-color: rgba(0, 255, 136, 0.05) !important; }
.upload-progress { font-size: 11px; color: #00ff88; letter-spacing: 1px; margin-bottom: 12px; min-height: 16px; }
.admin-upload-row { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-upload-row .file-upload { flex: 1; margin-bottom: 0; }

.file-upload { position: relative; overflow: hidden; display: inline-block; width: 100%; }
.file-upload input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; height: 100%; width: 100%; }

#videoProcessingLoader {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.spinner {
    width: 50px; height: 50px; border: 4px solid #1a1a1a; border-top: 4px solid #fff; border-radius: 50%; animation: spin-loader 1s linear infinite;
}
@keyframes spin-loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- АДАПТИВНОСТЬ ПОД ТЕЛЕФОНЫ И ПЛАНШЕТЫ --- */
@media (max-width: 768px) {
    :root {
        --header-h: 55px;
        --footer-h: 35px;
    }
    header { padding: var(--safe-top) 15px 0 15px; }
    .logo-container { width: 150px; height: 32px; }
    .logo-subtitle { font-size: 7px; letter-spacing: 1.5px; margin-top: -4px; }

    .header-actions { gap: 5px; flex-shrink: 0; }
    .btn-outline { padding: 6px 10px; font-size: 8px; letter-spacing: 1px; flex-shrink: 0; }
    .btn-outline svg { width: 10px; height: 10px; }

    .main-view { grid-template-columns: 1fr 1fr; gap: 4px; }
    .card-content { bottom: 15px; left: 15px; }
    .card h2 { font-size: 16px; margin-bottom: 8px; }

    .gallery-header { padding: calc(15px + var(--safe-top)) 20px 15px 20px; gap: 15px; }
    .gallery-title { font-size: 16px; }
    .back-btn { padding: 6px 12px; font-size: 10px; }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 25vh; gap: 3px;
        padding: 3px 3px calc(var(--footer-h) + var(--safe-bottom) + 120px) 3px;
    }

    .lightbox { padding: calc(10px + var(--safe-top)) 0 calc(10px + var(--safe-bottom)) 0; }
    .lb-body { padding: 0; }

    .lb-stage {
        width: 100%;
        height: 100%;
    }
    .lightbox-close {
        width: 46px;
        height: 46px;
        font-size: 30px;
        top: 6px;
        right: 6px;
    }
    .lightbox-btn {
        font-size: 20px;
        width: 46px; height: 46px;
    }
    .lightbox-prev { left: 6px; padding-right: 2px;}
    .lightbox-next { right: 6px; padding-left: 2px;}
    .admin-upload-row { flex-direction: column; }

    #lbDescription { font-size: 12px; max-width: 90%; }

    .sidebar { width: 100%; }

    .modal-box { width: 95%; padding: 20px; max-height: 85vh; }
    .admin-tabs { gap: 4px; }
    .tab-btn { font-size: 9px; letter-spacing: 1px; padding: 8px; }
    .dept-categories-split { flex-direction: column; gap: 20px; min-height: auto; }
    .dept-left { width: 100%; border-right: none; padding-right: 0; }
    .dept-right { width: 100%; }
    .admin-list { max-height: 50vh; }
    footer { padding-left: 20px; padding-right: 20px; }
}

/* --- ОПТИМИЗАЦИЯ ПОД АЙФОНЫ И УЗКИЕ ЭКРАНЫ --- */
@media (max-width: 480px) {
    .header-actions { gap: 8px; }

    #btnShare {
        padding: 0;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #btnShare span { display: none; }
    #btnShare svg {
        margin: 0 !important;
        width: 16px;
        height: 16px;
    }

    #btnContacts {
        height: 34px;
        padding: 0 12px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    #btnContacts svg {
        width: 14px;
        height: 14px;
        margin: 0;
    }
    #btnContacts span {
        display: inline;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .logo-container { width: 125px; }
}