.viewer-tool-btn {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 22px;
    font-weight: 600;
    line-height: 1;

    color: #475569;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.viewer-tool-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.dark .viewer-tool-btn {
    color: #cbd5e1;
}

.dark .viewer-tool-btn:hover {
    background-color: #334155;
    color: white;
}


.viewer-image {
    max-width: 90vw;
    max-height: 84vh;

    object-fit: contain;

    transform-origin: center center;

    will-change: transform;

    cursor: zoom-in;

    user-select: none;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.35);
}


.viewer-image.viewer-zoomed {
    cursor: grab;
}

.viewer-image.viewer-dragging {
    cursor: grabbing;
}