* {

    box-sizing: border-box;

}

body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    margin: 0;

    padding: 0;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    min-height: 100vh;

}



/* Main layout grid */

.app-container {

    display: grid;

    grid-template-areas:

        "header header header"

        "left center right"

        "footer footer footer";

    grid-template-columns: 240px 1fr 240px;

    grid-template-rows: auto minmax(400px, 1fr) auto;

    height: 100vh;

    gap: 5px;

    padding: 5px;

    box-sizing: border-box;

    overflow: hidden;

}



/* Header */

.header {

    grid-area: header;

    background: white;

    border-radius: 8px;

    padding: 8px 15px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.header h1 {

    margin: 0;

    color: #333;

    font-size: 16px;

    white-space: nowrap;

}

.api-config {

    display: flex;

    align-items: center;

    gap: 8px;

}

.api-config label {

    margin-bottom: 0;

    min-width: auto;

    font-size: 14px;

    white-space: nowrap;

}

.api-config input {

    padding: 6px 10px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    font-size: 13px;

    width: 240px;

}



/* Panels */

.panel {

    background: white;

    border-radius: 8px;

    padding: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    overflow-y: auto;

}



.left-panel {

    grid-area: left;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.center-panel {

    grid-area: center;

    display: flex;

    flex-direction: column;

    background: #1a1a1a;

    border-radius: 8px;

    padding: 2px;

    overflow: hidden;

}



.right-panel {

    grid-area: right;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



/* Section styles */

.section {

    background: #f8f9fa;

    border-radius: 6px;

    padding: 12px;

}

.section h3 {

    margin-top: 0;

    margin-bottom: 8px;

    color: #495057;

    font-size: 15px;

    font-weight: 600;

}



/* Controls */

.control-group {

    margin-bottom: 8px;

}

label {

    display: block;

    font-weight: 600;

    color: #495057;

    margin-bottom: 4px;

    font-size: 13px;

}

input[type="text"],

input[type="number"],

select {

    width: 100%;

    padding: 8px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    font-size: 14px;

    box-sizing: border-box;

}

select {

    cursor: pointer;

    background: white;

}



/* Buttons */

button {

    width: 100%;

    padding: 10px;

    border: none;

    border-radius: 4px;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.3s;

    font-weight: 600;

    margin-bottom: 8px;

}

button:last-child {

    margin-bottom: 0;

}

button.primary {

    background: #667eea;

    color: white;

}

button.primary:hover {

    background: #5568d3;

}

button.secondary {

    background: #6c757d;

    color: white;

}

button.secondary:hover {

    background: #5a6268;

}

button.success {

    background: #28a745;

    color: white;

}

button.success:hover {

    background: #218838;

}

button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* Navigation buttons */

.navigation-buttons {

    display: flex;

    gap: 10px;

}

.navigation-buttons button {

    flex: 1;

    margin-bottom: 0;

}



/* Canvas */

#viewport {

    width: auto;  /* Размер устанавливается через JavaScript */
    height: auto;

    max-width: 100%;

    max-height: none !important;  /* Убрано ограничение по высоте */

    background: #000;

    border: 1px solid #667eea;

    border-radius: 2px;

    display: block;

    object-fit: contain;  /* Сохраняем aspect ratio */

}



#viewport.zoomed {

    max-width: none;

    max-height: none;

}



/* Canvas container with scroll */

.canvas-container {

    width: 100%;

    flex: 1;  /* Занимает всё доступное пространство */

    min-height: 0;  /* Для корректного сжатия */

    overflow: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;  /* Для позиционирования frame-overlay */

    border: none;

    border-radius: 0;

    background: #000;

}



/* Номер кадра поверх изображения */

.frame-overlay {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(0, 0, 0, 0.6);

    color: #ffffff;

    padding: 4px 10px;

    border-radius: 3px;

    font-weight: bold;

    font-size: 14px;

    pointer-events: none;  /* Чтобы клики проходили сквозь элемент */

    z-index: 100;

    white-space: nowrap;

}



@media (max-width: 768px) {

    #viewport {

        /* Убрано ограничение по высоте - используем flex layout */
    }

}



/* Custom scrollbar for container */

.canvas-container::-webkit-scrollbar {

    width: 12px;

    height: 12px;

}



.canvas-container::-webkit-scrollbar-track {

    background: #1a1a1a;

}



.canvas-container::-webkit-scrollbar-thumb {

    background: #667eea;

    border-radius: 6px;

}



.canvas-container::-webkit-scrollbar-thumb:hover {

    background: #5568d3;

}



/* Thumbnails Strip */

.thumbnails-strip {
    width: 100%;
    height: 100px;  /* Фиксированная высота - уменьшено для увеличения места под canvas */
    flex-shrink: 0;  /* Не сжимается */
    background: #1a1a1a;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;  /* Центрируем миниатюры по вертикали */
}



.thumbnails-container {

    display: flex;

    gap: 5px;

    padding: 5px;

    overflow-x: auto;

    overflow-y: hidden;

    width: 100%;

    align-items: center;

}



.thumbnails-container::-webkit-scrollbar {

    height: 6px;

}



.thumbnails-container::-webkit-scrollbar-track {

    background: #2a2a2a;

}



.thumbnails-container::-webkit-scrollbar-thumb {

    background: #667eea;

    border-radius: 3px;

}



.thumbnail {
    position: relative;
    flex: 0 0 auto;  /* Автоматическая ширина, но не растягивается */
    max-height: 100px;  /* Ограничение по высоте */
    max-width: 100px;  /* Ограничение по ширине */
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}



.thumbnail:hover {

    border-color: #667eea;

}



.thumbnail.active {

    border-color: #667eea;

    box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);

}



.thumbnail img {
    display: block;
    max-width: 100%;  /* Не выходит за границы миниатюры */
    max-height: 100%;  /* Не выходит за границы миниатюры */
    width: auto;
    height: auto;
    object-fit: contain;
    background: #000;
    border-radius: 2px;
}



.thumbnail-index {

    position: absolute;

    bottom: 2px;

    right: 2px;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;

    font-size: 10px;

    padding: 1px 4px;

    border-radius: 2px;

    pointer-events: none;

}



.scroll-controls {

    position: fixed;

    bottom: 50px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.9);

    border: 1px solid #667eea;

    border-radius: 8px;

    padding: 10px 20px;

    display: flex;

    gap: 20px;

    z-index: 1000;

}



.scroll-control {

    display: flex;

    align-items: center;

    gap: 10px;

}



.scroll-control label {

    color: #fff;

    font-size: 12px;

    margin-bottom: 0;

    white-space: nowrap;

}



.scroll-control input[type="range"] {

    width: 150px;

}



/* Sliders */

.slider-container {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

    margin: 8px 0;

}

.slider-container label {

    margin-bottom: 0;

}

.slider-container .slider-value {

    text-align: center;

    font-weight: 600;

    font-size: 14px;

    color: #667eea;

    background: #e9ecef;

    padding: 2px 8px;

    border-radius: 4px;

}

input[type="range"] {

    width: 100%;

}



/* Zoom buttons */

.zoom-buttons {

    display: flex;

    gap: 5px;

    margin-top: 5px;

}

.zoom-buttons button {

    margin-bottom: 0;

    flex: 1;

}



/* Button grid */

.button-grid {

    display: flex;

    gap: 5px;

    margin-top: 5px;

}

.button-grid button {

    margin-bottom: 0;

    flex: 1;

}



/* Status */

.status {

    padding: 10px;

    border-radius: 4px;

    font-weight: 500;

    font-size: 14px;

    margin-bottom: 10px;

}

.status.info {

    background: #d1ecf1;

    color: #0c5460;

}

.status.success {

    background: #d4edda;

    color: #155724;

}

.status.error {

    background: #f8d7da;

    color: #721c24;

}

#imageStatus {

    flex-shrink: 0;

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;

}



/* Metadata */

.metadata {

    font-size: 13px;

}

.metadata > div {

    margin: 5px 0;

    padding: 3px 0;

    border-bottom: 1px solid #dee2e6;

}

.metadata > div:last-child {

    border-bottom: none;

}



/* Stats */

.stats {

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 13px;

}

.stats span {

    padding: 3px 0;

}



/* Frame info */

.frame-info {

    text-align: center;

    padding: 10px;

    background: #e9ecef;

    border-radius: 4px;

    font-weight: 600;

    margin: 10px 0;

}



/* Footer */

.footer {

    grid-area: footer;

    background: white;

    border-radius: 8px;

    padding: 6px 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    overflow: hidden;

}

.footer-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 0;

    flex-wrap: nowrap;

}

.info-panel {

    display: flex;

    gap: 10px;

    flex-wrap: nowrap;

    min-width: 0;

    flex-shrink: 1;

}

.info-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    flex-shrink: 1;

    min-width: 0;

    overflow: hidden;

}

.info-item span:first-child {

    flex-shrink: 0;

    white-space: nowrap;

}

.info-item span:not(:first-child) {

    color: #495057;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.status-indicator {

    font-size: 12px;

}

.url-item {

    flex-shrink: 0;

    margin-left: auto;

}

.url-item span:last-child {

    max-width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.main-status {

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

    min-width: 0;

    justify-content: center;

}

.files-info, .bit-depth-info, .load-status {

    font-size: 12px;

    color: #495057;

    white-space: nowrap;

    padding: 2px 6px;

    border-radius: 3px;

    background: #f8f9fa;

}

.files-info {

    color: #28a745;

    font-weight: 500;

}

.bit-depth-info {

    color: #6c757d;

    font-weight: 400;

}

.load-status.info {

    color: #17a2b8;

    background: #e1f5fe;

}

.load-status.success {

    color: #28a745;

    background: #e8f5e8;

}

.load-status.error {

    color: #dc3545;

    background: #ffeaea;

}

/* Cache status in footer */

.cache-status {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-shrink: 0;

    margin-left: auto;

}

.cache-status .status {

    font-size: 13px;

    padding: 4px 12px;

    border-radius: 4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.cache-status .status.success {

    background: #28a745;

    color: white;

}

.cache-status .status.error {

    background: #dc3545;

    color: white;

}

.cache-status .status.info {

    background: #17a2b8;

    color: white;

}

/* Loading animation */

.loading {

    display: inline-block;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Responsive */

@media (max-width: 1200px) {

    .app-container {

        grid-template-areas:

            "header"

            "center"

            "left"

            "right"

            "footer";

        grid-template-columns: 1fr;

        grid-template-rows: auto auto auto auto auto;

    }

    .api-config input {

        width: 200px;

    }

    .header h1 {

        font-size: 18px;

    }

}



@media (max-width: 768px) {

    .app-container {

        padding: 5px;

        gap: 5px;

    }

    .footer {

        padding: 6px 8px;

    }

    .footer-content {

        flex-direction: row;

        align-items: center;

        gap: 6px;

    }

    .info-panel {

        flex-wrap: nowrap;

        gap: 6px;

        overflow-x: auto;

        padding-bottom: 2px;

        flex: 1;

        min-width: 0;

    }

    .info-item {

        font-size: 11px;

        gap: 4px;

    }

    .url-item {

        display: none;
    }

    .main-status {

        order: 2;
        flex-shrink: 0;
        gap: 6px;
    }

    .files-info, .load-status {

        font-size: 10px;
        padding: 1px 4px;
    }

    .api-config {

        flex-direction: column;

        width: 100%;

    }

    .api-config input {

        width: 100%;

    }

    .header {

        flex-direction: column;

        gap: 8px;

        text-align: center;

        padding: 8px;

    }

    .header h1 {

        font-size: 14px;

    }

    .api-config input {

        width: 100%;

        max-width: 280px;

    }

    .scroll-controls {

        flex-direction: column;

        gap: 10px;

        padding: 8px 15px;

        bottom: 30px;

        width: 90%;

    }

    .scroll-control input[type="range"] {

        width: 100%;

    }

}