/* Дозволяємо контейнерам дихати, щоб запрацював position: sticky */
        #viewArea, #recordsListWrapper {
            overflow: visible !important;
        }
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f0f2f5; color: #333; }
        .container { max-width: 1000px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1, h2, h3 { color: #1a1a1a; margin-top: 0; }

        .tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid #ddd; flex-wrap: wrap; }
        .tab-btn { flex: 1; padding: 12px; background: none; border: none; font-size: 22px; cursor: pointer; color: #666; font-weight: bold; min-width: 0; }
        .tab-btn.active#tab-ru { color: #d9534f; border-bottom: 3px solid #d9534f; }
        .tab-btn.active#tab-ua { color: #0275d8; border-bottom: 3px solid #0275d8; }
        .tab-btn.active#tab-stats { color: #6f42c1; border-bottom: 3px solid #6f42c1; }
        .tab-btn.active#tab-settings { color: #28a745; border-bottom: 3px solid #28a745; }

        .section { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eee; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .hierarchy-box { background: #fff; padding: 15px; border: 1px solid #ddd; border-radius: 6px; }
        .hierarchy-box h4 { margin-top: 0; margin-bottom: 10px; color: #007bff; border-bottom: 1px solid #eee; padding-bottom: 5px; }

        .form-group { display: flex; flex-direction: column; margin-bottom: 10px; }
        label { margin-bottom: 4px; font-weight: bold; font-size: 13px; color: #555; }
        input[type="text"], input[type="file"], select, textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px;}

        button { padding: 10px 15px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s;}
        button:hover { background-color: #218838; }
        button:disabled { background-color: #ccc; cursor: not-allowed; }
        .btn-secondary { background-color: #6c757d; margin-bottom: 15px; }
        .btn-secondary:hover { background-color: #5a6268; }
        .btn-danger { background-color: #dc3545; }
        .btn-danger:hover { background-color: #c82333; }
        .btn-info { background-color: #007bff; }
        .btn-info:hover { background-color: #0069d9; }
        .btn-warning { background-color: #ffc107; color: #333; }
        .btn-warning:hover { background-color: #e0a800; }
        .btn-exclude { background-color: #fd7e14; color: white; }
        .btn-exclude:hover { background-color: #e8700e; }
        .btn-include { background-color: #6c757d; color: white; }
        .btn-include:hover { background-color: #5a6268; }

        .tag { display: inline-block; background: #6c757d; color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px; margin-right: 5px; margin-bottom: 5px; }
        .tag-remove { cursor: pointer; margin-left: 5px; color: #ffcccc; font-weight: bold; }

        .blocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
        .drone-block { background: #fff; border: 2px solid #ddd; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: 0.2s; }
        .drone-block:hover { border-color: #007bff; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .badge { background: #007bff; color: white; padding: 4px 10px; border-radius: 12px; font-size: 14px; margin-top: 10px; display: inline-block;}

        .list-card { background: white; border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 6px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; transition: 0.2s; }
        .list-card:hover { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .card-text-side { flex: 1; font-size: 14px; color: #444; line-height: 1.5; }
        .card-media-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

        .media-gallery { display: flex; flex-wrap: nowrap; gap: 8px; }
        .media-wrapper { position: relative; cursor: pointer; transition: 0.2s; border-radius: 4px; overflow: hidden; border: 1px solid #ccc; background: #000; width: 120px; height: 90px; touch-action: manipulation; }
        #singleRecordArea .media-wrapper { width: 160px; height: 120px; }
        @media (hover: hover) { .media-wrapper:hover { transform: scale(1.05); border-color: #007bff; } }
        .media-checkbox:checked { opacity: 1 !important; }
        @media (hover: hover) and (pointer: fine) {
            .media-item-wrap:hover .media-checkbox { opacity: 1 !important; }
        }
        .media-element { width: 100%; height: 100%; object-fit: cover; display: block; }
        .video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; pointer-events: none; }

        .full-record { background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
        .detail-row { margin-bottom: 10px; font-size: 15px; border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; }

        .modal { display: none; position: fixed; inset: 0; z-index: 10000; background-color: rgba(0,0,0,0.92); }
        .modal-content-container { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
        .modal-content { max-width: 92vw; max-height: 85vh; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5); display: block; }
        .modal-close { position: fixed; top: 16px; right: 16px; color: #f1f1f1; font-size: 36px; font-weight: bold; cursor: pointer; z-index: 10002; line-height: 1; }
        .modal-close:hover { color: #bbb; }
        .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: white; border: none; padding: 20px; font-size: 30px; cursor: pointer; border-radius: 50%; z-index: 10001; transition: 0.2s; }
        .modal-nav:hover { background: rgba(255,255,255,0.3); }
        .modal-nav.prev { left: 30px; }
        .modal-nav.next { right: 30px; }
        @media (max-width: 700px) { .modal-nav { display: none; } }
        @keyframes _slideFromRight { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes _slideFromLeft  { from { transform: translateX(-60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .slide-from-right { animation: _slideFromRight 0.18s ease-out; }
        .slide-from-left  { animation: _slideFromLeft  0.18s ease-out; }
        .modal-tap-zone { position: absolute; top: 0; height: 100%; width: 35%; z-index: 10001; cursor: pointer; }
        #tapZoneLeft  { left: 0; }
        #tapZoneRight { right: 0; }

        #toastContainer { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        .toast { background-color: #333; color: white; padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 14px; font-weight: bold; opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; display: flex; align-items: center; }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast.success { background-color: #28a745; border-left: 5px solid #1e7e34; }
        .toast.error { background-color: #dc3545; border-left: 5px solid #bd2130; }

        .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; padding: 15px; background: white; border-radius: 8px; border: 1px solid #ddd; }
        .pagination span { font-weight: bold; color: #444; }

        .hidden { display: none !important; }
        /* Ховаємо галочки за замовчуванням */
        .record-checkbox { opacity: 0; pointer-events: none; transition: opacity 0.2s; }

        /* Показуємо при наведенні мишки на картку */
        .list-card:hover .record-checkbox { opacity: 1; pointer-events: auto; }

        /* Показуємо всі галочки, якщо на body є спец-клас (для майбутнього режиму) */
        body.select-mode-active .record-checkbox { opacity: 1; pointer-events: auto; }

        /* Легка підсвітка виділеної картки */
        .list-card.selected { background-color: #f4f9ff; border-color: #007bff; }

            /* Сучасний дизайн для полів вводу (2026 стиль) */
        input[type="text"], input[type="date"], select, textarea {
            background-color: #ffffff;
            border: 1px solid #ced4da;
            border-radius: 8px; /* Сучасні заокруглені кути */
            padding: 10px 14px;
            font-size: 14px;
            color: #333;
            transition: all 0.25s ease-in-out;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Легка внутрішня тінь */
            width: 100%;
            box-sizing: border-box;
        }

        /* Ефект при наведенні (Hover) */
        input[type="text"]:hover, input[type="date"]:hover, select:hover, textarea:hover {
            border-color: #adb5bd;
        }

        /* Ефект при кліку/вводі (Focus - Світіння) */
        input[type="text"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
            border-color: #0d6efd;
            outline: none;
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15); /* М'яке блакитне світіння */
            background-color: #fff;
        }

        /* Стилізація самого випадаючого списку (селекта) */
        select {
            cursor: pointer;
            appearance: none; /* Прибираємо стару стрілку браузера */
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 12px top 50%;
            background-size: 10px auto;
            padding-right: 30px;
        }

                /* --- АРХІТЕКТУРА ЕКРАНІВ (STATE-DRIVEN UI) --- */

        /* 1. Коли відкриті деталі: ховаємо все, що стосується списків */
        body.state-details #blocksArea,
        body.state-details #recordsListWrapper,
        body.state-details #viewTitle,
        body.state-details #backToBlocksBtn,
        body.state-details #backToListBtn,
        body.state-details .pagination,
        body.state-details #paginationArea {
            display: none !important;
        }

        /* 2. Коли відкритий список: ховаємо контейнер деталей */
        body.state-list #singleRecordArea,
        body.state-list #singleRecordNav {
            display: none !important;
        }

        /* Nav-bar над single record — показуємо лише на сторінці деталей */
        body.state-details #singleRecordNav { display: block !important; }

        /* ===== DARK MODE ===== */
        body.dark { background-color: #0d1117; color: #e6edf3; }
        body.dark .container { background: #161b22; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: #f0f6fc; }
        body.dark .tabs { border-bottom-color: #30363d; }
        body.dark .tab-btn { color: #8b949e; background: none; }
        body.dark .section { background: #1c2128; border-color: #30363d; }
        body.dark .hierarchy-box { background: #0d1117; border-color: #30363d; }
        body.dark label { color: #8b949e; }
        body.dark hr { border-color: #30363d; }
        body.dark input, body.dark select, body.dark textarea {
            background-color: #0d1117 !important; border-color: #30363d !important; color: #e6edf3 !important;
        }
        body.dark input:focus, body.dark select:focus, body.dark textarea:focus {
            background-color: #0d1117 !important; border-color: #388bfd !important; box-shadow: 0 0 0 4px rgba(56,139,253,0.15) !important;
        }
        body.dark input::placeholder, body.dark textarea::placeholder { color: #484f58 !important; }
        body.dark .drone-block { background: #1c2128 !important; border-color: #30363d !important; color: #e6edf3; }
        body.dark .drone-block:hover { border-color: #388bfd !important; }
        body.dark .drone-block-folder { background: #251f0a !important; border-color: #9c6e00 !important; }
        body.dark .drone-block-folder:hover { border-color: #ffc107 !important; }
        body.dark .filter-panel { background: #21262d !important; border-color: #30363d !important; }

        body.dark #tagsChipEditor, body.dark #unitsChipEditor, body.dark #fundsChipEditor { background: #0d1117 !important; border-color: #30363d !important; }
        body.dark .model-tag { background: #30363d !important; color: #c9d1d9 !important; }
        body.dark .tag-group-wrap { background: #1c2128 !important; border-color: #30363d !important; }
        body.dark .level-breadcrumb { background: #1a2035 !important; border-color: #2a3a5e !important; }
        body.dark .btn-reset { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
        body.dark .list-card { background: #1c2128; border-color: #30363d; }
        body.dark .list-card:hover { border-color: #388bfd; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        body.dark .list-card.selected { background-color: #1f3a5f; border-color: #388bfd; }
        body.dark .card-text-side { color: #c9d1d9; }
        body.dark button:not([style*="background"]) { background-color: #21262d; color: #c9d1d9; }
        body.dark button:not([style*="background"]):hover { background-color: #30363d; }
        body.dark .btn-warning { background-color: #7a5c00 !important; color: #e6ceaa !important; }
        body.dark .btn-warning:hover { background-color: #8c6a00 !important; }
        body.dark .btn-info { background-color: #0e4c8a !important; color: #a8c8f0 !important; }
        body.dark .btn-info:hover { background-color: #1158a0 !important; }
        body.dark .btn-danger { background-color: #6e1a22 !important; color: #f0a0a8 !important; }
        body.dark .btn-danger:hover { background-color: #7e2030 !important; }
        body.dark .btn-secondary { background-color: #2d333b !important; color: #8b949e !important; }
        body.dark .btn-secondary:hover { background-color: #373e47 !important; }
        body.dark .btn-exclude { background-color: #6b3300 !important; color: #f0c090 !important; }
        body.dark .btn-exclude:hover { background-color: #7a3c00 !important; }
        body.dark .btn-include { background-color: #2d333b !important; color: #8b949e !important; }
        body.dark .btn-include:hover { background-color: #373e47 !important; }
        body.dark .full-record { background: #161b22; border-color: #30363d; }
        body.dark .detail-row { border-bottom-color: #21262d; }
        body.dark .pagination { background: #161b22 !important; border-color: #30363d !important; }
        body.dark .pagination span { color: #8b949e; }
        body.dark details { border-color: #30363d !important; }
        body.dark details > summary { background: #21262d !important; color: #8b949e !important; }
        body.dark details > div { background: #161b22 !important; color: #c9d1d9 !important; }
        body.dark .ftag-btn { background: #21262d !important; color: #c9d1d9 !important; border-color: #30363d !important; }
        body.dark #mediaBulkBar { background: #21262d !important; border-color: #30363d !important; }
        body.dark #mediaBulkCount { color: #e6edf3 !important; }
        body.dark #subUnitForm_main, body.dark #subUnitForm_modal { background: #21262d !important; border-color: #30363d !important; }
        body.dark #subUnitsArea_main .su-chip, body.dark #subUnitsArea_modal .su-chip { background: #1a2f4a !important; border-color: #2a4a6a !important; }
        body.dark #subUnitsArea_main .su-chip span:first-child, body.dark #subUnitsArea_modal .su-chip span:first-child { color: #c9d1d9 !important; }
        body.dark a { color: #58a6ff !important; }
        body.dark a:visited { color: #a371f7 !important; }
        body.dark ::-webkit-scrollbar { background: #161b22; width: 8px; }
        body.dark ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }

        /* Inline style overrides */
        body.dark [style*="background:#fff"], body.dark [style*="background: #fff"],
        body.dark [style*="background-color:#fff"], body.dark [style*="background-color: #fff"],
        body.dark [style*="background:white"], body.dark [style*="background: white"] { background-color: #1c2128 !important; }
        body.dark #blocksArea > div[style*="background:#f8f9fa"],
        body.dark [style*="background:#f8f9fa"], body.dark [style*="background: #f8f9fa"],
        body.dark [style*="background:#f9f9f9"], body.dark [style*="background:#fafafa"],
        body.dark [style*="background: #fafafa"], body.dark [style*="background:#f8f8f8"],
        body.dark [style*="background:#f0f0f0"], body.dark [style*="background: #f0f0f0"] { background-color: #21262d !important; }
        body.dark [style*="background:rgba(255,255,255,0.95)"], body.dark [style*="background: rgba(255, 255, 255, 0.95)"] { background: rgba(22,27,34,0.97) !important; }
        body.dark [style*="color:#333"], body.dark [style*="color: #333"],
        body.dark [style*="color:#444"], body.dark [style*="color: #444"],
        body.dark [style*="color:#1a1a1a"], body.dark [style*="color: #1a1a1a"] { color: #c9d1d9 !important; }
        body.dark [style*="color:#555"], body.dark [style*="color: #555"],
        body.dark [style*="color:#666"], body.dark [style*="color: #666"],
        body.dark [style*="color:#888"], body.dark [style*="color: #888"],
        body.dark [style*="color:#aaa"], body.dark [style*="color:#999"] { color: #8b949e !important; }
        body.dark [style*="border:1px solid #ddd"], body.dark [style*="border: 1px solid #ddd"],
        body.dark [style*="border:1px solid #eee"], body.dark [style*="border: 1px solid #eee"],
        body.dark [style*="border:1px solid #ced4da"], body.dark [style*="border: 1px solid #ced4da"],
        body.dark [style*="border:2px solid #ddd"], body.dark [style*="border: 2px solid #ddd"],
        body.dark [style*="border:1px solid #dee2e6"], body.dark [style*="border: 1px solid #dee2e6"] { border-color: #30363d !important; }

        /* Модальні вікна */
        body.dark #editModal > div, body.dark #bulkMoveModal > div,
        body.dark #amModal > div, body.dark #unitPickerModal > div, body.dark #modelPickerModal > div { background: #161b22 !important; color: #e6edf3 !important; }
        body.dark #editModal h3, body.dark #amModal h3, body.dark #unitPickerModal h3 { color: #f0f6fc !important; }
        body.dark #editModal span[onclick], body.dark #amModal span[onclick],
        body.dark #unitPickerModal span[onclick] { color: #8b949e !important; }

        /* Нові словникові модали */
        body.dark #dictModal > div, body.dark #mfrModal > div, body.dark #uavManagerModal > div,
        body.dark #addModelModal > div, body.dark #moveSubcatModal > div { background: #161b22 !important; color: #e6edf3 !important; }
        body.dark #dictModal h3, body.dark #mfrModal h3, body.dark #uavManagerModal h3,
        body.dark #addModelModal h3, body.dark #moveSubcatModal h4 { color: #f0f6fc !important; }
        body.dark #dictModal span[onclick], body.dark #mfrModal span[onclick],
        body.dark #uavManagerModal span[onclick], body.dark #addModelModal span[onclick],
        body.dark #moveSubcatModal span[onclick] { color: #8b949e !important; }
        body.dark #moveSubcatDest, body.dark #moveSubcatNameInput { background:#0d1117 !important; color:#e6edf3 !important; border-color:#30363d !important; }

        /* ===== Блоки-акордеон у модалці редагування ===== */
        .edit-block { border:1px solid #e3e6ea; border-radius:10px; margin-bottom:8px; background:#fff; overflow:hidden; }
        .edit-block-head { display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; user-select:none; transition:background 0.12s; }
        .edit-block-head:hover { background:#f6f8fa; }
        .eb-label { font-weight:600; color:#333; font-size:14px; flex-shrink:0; min-width:120px; }
        .edit-block-summary { flex:1; min-width:0; color:#444; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
        .edit-block-summary.empty { color:#adb5bd; font-style:italic; }
        .eb-arrow { color:#adb5bd; font-size:13px; flex-shrink:0; margin-left:auto; transition:transform 0.15s; }
        .edit-block-body { display:none; padding:2px 14px 14px; }
        .edit-block.open { overflow:visible; }
        .edit-block.open .edit-block-body { display:block; }
        .edit-block.open .eb-arrow { transform:rotate(90deg); }
        .edit-block.open .edit-block-summary { display:none; }
        body.dark .edit-block { background:#1c2128 !important; border-color:#30363d !important; }
        body.dark .edit-block-head:hover { background:#22272e; }
        body.dark .eb-label { color:#e6edf3; }
        body.dark .edit-block-summary { color:#adbac7; }
        body.dark .edit-block-summary.empty { color:#636e7b; }
        /* Бічна панель медіа (зліва від модалки) */
        #editMediaStrip {
            position:fixed; right:calc(50% + 352px); left:auto; top:60px; width:230px; max-height:84vh; overflow-y:auto;
            background:#fff; border:1px solid #e3e6ea; border-radius:10px; padding:10px;
            box-shadow:0 4px 18px rgba(0,0,0,0.20); z-index:2100;
        }
        .eb-strip-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; color:#888; margin-bottom:8px; }
        .eb-strip-close { cursor:pointer; color:#888; font-size:18px; line-height:1; padding:2px 8px; border-radius:6px; flex-shrink:0; }
        .eb-strip-close:hover { background:rgba(0,0,0,0.08); color:#dc3545; }
        body.dark .eb-strip-close:hover { background:rgba(255,255,255,0.1); }
        .eb-strip-row { display:flex; flex-direction:column; gap:8px; }
        body.dark #editMediaStrip { background:#161b22 !important; border-color:#30363d !important; }
        body.dark .eb-strip-head { color:#8b949e; }
        .eb-thumb { position:relative; width:100%; height:140px; border-radius:7px; overflow:hidden; border:1px solid #ccc; background:#0d1326; cursor:pointer; transition:transform 0.12s, border-color 0.12s; }
        @media (hover: hover) { .eb-thumb:hover { transform:scale(1.03); border-color:#0d6efd; } }
        .eb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
        .eb-thumb .eb-vid { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; }
        body.dark .eb-thumb { border-color:#30363d; }
        @media (max-width: 1150px) {
            /* немає місця збоку — стрічка зверху, горизонтальна */
            #editMediaStrip { position:fixed; left:6px; right:6px; top:6px; width:auto; max-height:42vh; }
            .eb-strip-row { flex-direction:row; overflow-x:auto; }
            .eb-thumb { width:180px; height:130px; flex-shrink:0; }
        }
        @media (max-width: 700px) {
            .eb-label { min-width:96px; font-size:13px; }
            .edit-block-head { padding:12px; gap:8px; }
        }

        /* Картки налаштувань */
        .settings-card-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 10px; padding: 24px 16px; border: 2px solid #dee2e6; border-radius: 12px;
            background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: #333;
            transition: border-color 0.15s, background 0.15s, transform 0.1s;
            min-height: 110px;
        }
        .settings-card-btn:hover { border-color: #28a745; background: #f0fff4; transform: translateY(-2px); }
        body.dark .settings-card-btn { background: #1c2128; border-color: #30363d; color: #e6edf3; }
        body.dark .settings-card-btn:hover { border-color: #3fb950; background: #1a2e1a; }
        /* Сторінка /units: картки командувань + рядки підрозділів + формації */
        .up-seg { display: inline-flex; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; }
        .up-seg button { padding: 6px 12px; font-size: 12px; font-weight: 600; background: #161b22; color: #8b949e; border: none; cursor: pointer; white-space: nowrap; }
        .up-seg button + button { border-left: 1px solid #30363d; }
        .up-seg button.active { background: rgba(31,111,235,0.2); color: #79b8ff; }
        #upSideUa.active { background: rgba(2,117,216,0.25); color: #aac4ff; }
        #upSideRu.active { background: rgba(217,83,79,0.22); color: #ffaac4; }
        .up-sortbtn { padding: 6px 12px; font-size: 12px; font-weight: 600; background: #161b22; color: #8b949e; border: 1px solid #30363d; border-radius: 8px; cursor: pointer; white-space: nowrap; }
        #upSortBtn { margin-left: auto; }
        .up-sortbtn.active { background: rgba(201,160,255,0.2); border-color: #6a4a9a; color: #d8b8e8; }
        .up-card { background: #12161d; border: 1px solid #262c36; border-radius: 10px; margin-bottom: 10px; }
        .up-card.side-ua { border-left: 3px solid #0275d8; }
        .up-card.side-ru { border-left: 3px solid #d9534f; }
        .up-card-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; user-select: none; }
        .up-card-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: #e6edf3; overflow-wrap: anywhere; }
        .up-chev { flex: 0 0 auto; color: #6a7385; font-size: 10px; transition: transform .15s; }
        .up-open > .up-card-head .up-chev { transform: rotate(90deg); }
        .up-badge { flex: 0 0 auto; font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #21262d; color: #8b949e; white-space: nowrap; }
        .up-badge.hot { background: #16324f; color: #79b8ff; font-weight: 600; }
        .up-body { padding: 2px 10px 10px; }
        .up-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
        .up-row:hover { background: #161b22; }
        .up-row.up-grp { cursor: default; }
        .up-row.up-grp b { color: #9ec2ff; font-weight: 600; }
        .up-rail { margin-left: 11px; padding-left: 10px; border-left: 2px solid #232a35; }
        .up-nm { flex: 1 1 auto; min-width: 0; }
        .up-nm b { display: block; font-size: 13.5px; font-weight: 600; color: #c9d3e6; overflow-wrap: anywhere; }
        .up-row.side-ru .up-nm b { color: #f0b3b3; }
        .up-nm small { display: block; font-size: 11px; color: #6a7385; margin-top: 1px; overflow-wrap: anywhere; }
        .up-cnt { flex: 0 0 auto; font-size: 11.5px; min-width: 16px; text-align: center; padding: 3px 9px; border-radius: 10px; background: #21262d; color: #8b949e; }
        .up-cnt.hot { background: #16324f; color: #79b8ff; font-weight: 600; }
        .up-lin { flex: 0 0 auto; cursor: pointer; font-size: 13px; }
        .up-edit { flex: 0 0 auto; opacity: 0.45; cursor: pointer; font-size: 12px; }
        .up-edit:hover { opacity: 1; }
        .up-empty { padding: 28px 16px; text-align: center; color: #6a7385; font-size: 13px; line-height: 1.6; }
        .up-ep { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; }
        .up-ep-rail { flex: 0 0 14px; align-self: stretch; display: flex; flex-direction: column; align-items: center; }
        .up-ep-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9a0ff; margin-top: 6px; flex: 0 0 auto; }
        .up-ep:not(.up-ep-last) .up-ep-rail::after { content: ''; flex: 1; width: 2px; background: #3a2a4a; margin-top: 2px; }
        .up-ep .up-nm { padding: 2px 0 10px; cursor: pointer; }
        .up-clickrow { cursor: pointer; }
        .up-nmlink { cursor: pointer; display: inline-block; max-width: 100%; }
        .up-nm b.up-nmlink { display: inline-block; }
        .up-nmlink:hover { text-decoration: underline; }
        .up-row.up-arch { opacity: 0.55; }
        .up-archbadge { flex: 0 0 auto; font-size: 10px; padding: 1px 7px; border-radius: 8px; background: #2a2333; color: #a892c0; border: 1px solid #3a3048; white-space: nowrap; }
        .up-card-title.up-nmlink:hover { text-decoration: underline; }
        .up-chev2 { flex: 0 0 auto; min-width: 30px; text-align: center; padding: 4px 6px; font-size: 11px; color: #79b8ff; background: #18202e; border: 1px solid #24304a; border-radius: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
        .up-ep-subrow { padding: 3px 6px; margin: 0; }
        .up-ep-subrow .up-nm b { font-size: 12px; font-weight: 500; color: #8ea3bf; }
        .up-ep-dot.now { background: #7ee787; }
        .up-now { font-size: 10px; color: #7ee787; border: 1px solid #2b4a33; border-radius: 8px; padding: 1px 6px; font-weight: 600; vertical-align: 1px; }
        .up-per { color: #8a7aa0 !important; margin-top: 2px; }

        /* Кнопка перемикача */
        #darkToggleBtn { padding: 8px 12px; background: none; border: none; font-size: 18px; cursor: pointer; border-bottom: 3px solid transparent; flex: 0; min-width: auto; }
        #darkToggleBtn:hover { background: rgba(0,0,0,0.05); }
        body.dark #darkToggleBtn:hover { background: rgba(255,255,255,0.05); }

        /* ===== МОБІЛЬНА АДАПТАЦІЯ ===== */
        @media (max-width: 700px) {
            body { margin: 4px; }
            .container { padding: 10px; }
            .tab-btn { font-size: 22px; padding: 8px 4px; min-width: 0; }

            /* Карточка запису — вертикальне розташування */
            .list-card { flex-direction: column; align-items: stretch; gap: 8px; }
            .card-text-side { padding-right: 0 !important; font-size: 13px; }
            .card-media-side { align-items: stretch !important; width: 100%; }
            .card-buttons-row { width: 100% !important; }
            .media-gallery { flex-wrap: wrap; gap: 6px; justify-content: center; }
            .media-wrapper { width: 80px !important; height: 60px !important; }
            #singleRecordArea .media-wrapper { width: 107px !important; height: 80px !important; }
            #singleRecordArea [id^="gvMedia_"] .media-wrapper { width: 95px !important; height: 71px !important; }

            /* Бейдж + чекбокс — горизонтально в один рядок */
            .list-card > div:first-child { flex-direction: row !important; margin-right: 0 !important; margin-bottom: 4px !important; gap: 8px !important; justify-content: flex-start; align-items: center; }

            /* Фільтр — одна колонка */
            #filterPanelBody div[style*="grid"] { display: flex !important; flex-direction: column !important; gap: 6px !important; }

            /* Форма — одна колонка */
            .form-grid { grid-template-columns: 1fr !important; }

            /* Всі модали — без бокових відступів */
            #editModal > div,
            #addModelModal > div,
            #dictModal > div,
            #mfrModal > div,
            #uavManagerModal > div,
            #amModal > div,
            #moveModelModal > div,
            #moveSubcatModal > div { margin: 6px !important; padding: 16px !important; border-radius: 8px !important; }

            /* Пагінація списку — компактніше на мобільному */
            .pag-wrap { gap: 6px !important; padding: 10px !important; }
            .pag-wrap button { padding: 8px 10px !important; font-size: 13px !important; }
            .pag-wrap .pag-jump { display: none !important; }
            .pag-info { margin: 0 4px !important; font-size: 13px !important; }

            /* Навігація детальної сторінки */
            .single-record-nav { flex-direction: column !important; gap: 8px !important; }
            .single-record-nav > div { width: 100%; }
            .single-record-nav > div:first-child { display: flex; flex-wrap: nowrap; gap: 6px; }
            .single-record-nav > div:first-child button { flex: 1; padding: 13px 8px !important; font-size: 15px !important; }
            .single-record-nav > div:last-child { display: flex; width: 100%; }
            .single-record-nav > div:last-child button { flex: 1; padding: 13px 8px !important; font-size: 15px !important; }
            .single-record-nav > div:last-child span { flex: 0 0 auto; padding: 13px 12px !important; font-size: 14px !important; }

            /* Заголовок + кнопки детальної сторінки */
            .single-record-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
            .single-record-actions { flex-wrap: wrap !important; width: 100%; gap: 6px !important; }
            .single-record-actions button { flex: 1 1 calc(50% - 3px); min-width: 0; font-size: 12px !important; padding: 0 6px !important; white-space: nowrap; }

            /* Таблиця лейблів в деталях — менша перша колонка */
            .single-record-grid { grid-template-columns: 110px 1fr !important; font-size: 13px !important; overflow: hidden; }
            .single-record-grid span:nth-child(even) { word-break: break-word; overflow-wrap: break-word; min-width: 0; overflow: hidden; }

            /* Теги в edit modal — стекаємо */
            .modal-tags-row { flex-direction: column !important; gap: 6px !important; }
            .modal-tags-row input { min-width: 0 !important; width: 100% !important; }

            /* Статистика — таблиця топ юнітів */
            .stats-top-row { flex-direction: column !important; gap: 2px !important; }
            .stats-top-model { display: none !important; }

            /* Settings cards — менша сітка */
            #settingsArea > div > div[style*="grid"] { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
            .settings-card-btn { min-height: 80px !important; padding: 14px 8px !important; font-size: 12px !important; }
            .settings-card-btn span:first-child { font-size: 22px !important; }

            /* Hover ефекти вимикаємо на touch */
            .settings-card-btn:hover { transform: none !important; }
        }

        @media (max-width: 480px) {
            body { margin: 0; }
            .container { border-radius: 0; box-shadow: none; padding: 10px 8px; max-width: 100%; }
            .full-record { padding: 12px !important; }
            .single-record-grid { grid-template-columns: 90px 1fr !important; gap: 6px 10px !important; }

            /* Таби — рівномірно без зайвих відступів */
            .tabs { margin-bottom: 12px; }
            .tab-btn { padding: 10px 2px; }

            /* Папки — менші блоки */
            .blocks-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 10px !important; }
            .drone-block { padding: 12px 8px !important; }

            /* Картки — компактніше */
            .list-card { padding: 10px; }
            .media-wrapper { width: 80px !important; height: 60px !important; }
            #singleRecordArea .media-wrapper { width: 107px !important; height: 80px !important; }

            /* Кнопки карток — 2 в ряд */
            .card-buttons-row { flex-wrap: wrap !important; }
            .card-buttons-row button { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }

            /* Заголовок з кнопкою "Додати" */
            #viewTitle { flex-wrap: wrap !important; gap: 8px !important; }


            /* Stats — карточки менші */
            .stats-card { padding: 10px; }
            .stats-number { font-size: 24px; }

            /* Пагінація */
            .pagination button { padding: 6px 10px !important; font-size: 13px !important; }

            /* Груповий перегляд — компактніше на мобільному */
            #singleRecordArea [id^="gvWrap_"] { padding: 10px !important; }
            [id^="gvMedia_"] { gap: 6px !important; }
        }
        .mfr-dropdown { display:none; position:absolute; top:100%; left:0; right:0; z-index:1000; background:#fff; border:1px solid #ced4da; border-radius:4px; max-height:165px; overflow-y:auto; box-shadow:0 3px 10px rgba(0,0,0,0.12); }
        .mfr-dropdown div { padding:6px 10px; cursor:pointer; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mfr-dropdown div:hover { background:#e9ecef; }
        body.dark .mfr-dropdown { background:#1c2128; border-color:#30363d; }
        body.dark .mfr-dropdown div:hover { background:#2d333b; }
        .stats-card { background:#f8f9fa; border-radius:8px; padding:16px; }
        .stats-number { font-size:32px; font-weight:bold; }
        .stats-label { font-size:12px; color:#888; margin-top:2px; }
        .stats-side-btn { padding:6px 16px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:13px; font-weight:600; transition:0.15s; }
        .stats-side-btn:first-child { border-radius:6px 0 0 6px; }
        .stats-side-btn:last-child { border-radius:0 6px 6px 0; }
        .stats-side-btn:not(:first-child) { border-left:none; }
        .stats-side-btn.active { background:#6f42c1; color:#fff; border-color:#6f42c1; }
        body.dark .stats-card { background:#1c2128; }
        body.dark .stats-label { color:#8b949e; }
        body.dark .stats-side-btn { background:#21262d; color:#c9d1d9; border-color:#30363d; }
        body.dark .stats-side-btn.active { background:#6f42c1; color:#fff; border-color:#6f42c1; }
        body.dark .stats-bar-bg { background:#30363d !important; }
        body.dark .stats-bar-label { color:#8b949e !important; }
        body.dark .stats-bar-count { color:#e6edf3 !important; }

        /* Role-based visibility */
        body.role-viewer .requires-editor,
        body.role-viewer .requires-admin,
        body.role-editor .requires-admin { display: none !important; }