/* Modernized toolbar — lucide-style SVG icons, brand ink color */

.play {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312173f' stroke='%2312173f' stroke-width='1.75' stroke-linejoin='round'><polygon points='6 4 20 12 6 20 6 4'/></svg>");
}

.pause {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312173f' stroke='%2312173f' stroke-width='1.75' stroke-linejoin='round'><rect x='6' y='4' width='4' height='16' rx='1'/><rect x='14' y='4' width='4' height='16' rx='1'/></svg>");
}

#prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 6 9 12 15 18'/></svg>");
}

#next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}

#down {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

#up {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
}

.zoomin {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}

.zoomout {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}

#fullscreen {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312173f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V5a1 1 0 0 1 1-1h4'/><path d='M20 9V5a1 1 0 0 0-1-1h-4'/><path d='M4 15v4a1 1 0 0 0 1 1h4'/><path d='M20 15v4a1 1 0 0 1-1 1h-4'/></svg>");
}

#play, #prev, #next, #down, #up, #zoomin, #fullscreen {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 999px;
    margin: 0 2px;
    opacity: 0.78;
    transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
    cursor: pointer;
}

#play:hover, #prev:hover, #next:hover, #down:hover, #up:hover, #zoomin:hover, #fullscreen:hover {
    opacity: 1;
    background-color: rgba(18, 23, 63, 0.06);
    transform: translateY(-1px);
}

#play:active, #prev:active, #next:active, #down:active, #up:active, #zoomin:active, #fullscreen:active {
    opacity: 0.6;
    transform: translateY(0);
}

#deepzoom {
    display: inline-block;
    color: #12173f;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}