*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:Arial,Helvetica,sans-serif;

    background:#2c2f33;

}

/* ========================= */

.header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    background:#202329;

    border-bottom:1px solid #343941;

    z-index:1000;

}

.brand{

    display:flex;

    flex-direction:column;

}

.title{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

.subtitle{

    color:#9ca3af;

    font-size:12px;

    margin-top:2px;

}

/* ========================= */

.toolbar{

    display:flex;

    align-items:center;

    gap:6px;

}

.toolbar button{

    height:36px;

    min-width:36px;

    padding:0 14px;

    border:none;

    border-radius:8px;

    background:#2f343b;

    color:#fff;

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

.toolbar button:hover{

    background:#3b414a;

}

.divider{

    width:1px;

    height:20px;

    background:#4b5563;

    margin:0 4px;

}

#zoomLabel{

    width:58px;

    text-align:center;

    color:white;

    font-weight:bold;

}

/* ========================= */

#viewer{

    position:fixed;

    top:60px;
    left:0;
    right:0;
    bottom:0;

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

    overflow:hidden;

    background:#2c2f33;

}
/* ========================= */

#stage{
    position:absolute;
    left:50%;
    top:50%;
    transform-origin:center center;
    will-change:transform;
}

/* ========================= */

#image{
    position:relative;

    display:block;

    max-width:none;

    max-height:none;

    user-select:none;

    -webkit-user-drag:none;

    border-radius:8px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

}

/* ========================= */

#viewer.grab{

    cursor:grab;

}

#viewer.grabbing{

    cursor:grabbing;

}

/* ========================= */

@media(max-width:768px){

    .header{

        padding:0 12px;

    }

    .title{

        font-size:15px;

    }

    .subtitle{

        font-size:11px;

    }

    .toolbar{

        gap:4px;

    }

    .toolbar button{

        min-width:32px;

        height:32px;

        padding:0 10px;

    }

}