.clavius-viewport {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 10px auto;
    background: #000;
    padding: 15px;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 450px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.fb-toolbar { width: 100%; display: flex; justify-content: flex-end; padding-bottom: 10px; height: 35px; z-index: 2000; }
.fb-controls-right { display: flex; gap: 10px; }

.fb-tool-btn { 
    background: #333; 
    border: 1px solid #444; 
    padding: 6px; 
    cursor: pointer; 
    border-radius: 4px; 
    display: flex; 
    align-items: center; 
}

.fb-zoom-stage { width: 100%; overflow: hidden; display: flex; justify-content: center; }
.fb-zoom-wrap { transition: transform 0.3s ease; transform-origin: top center; }

/* FIXED TRANSPARENCY & TAP HIGHLIGHT */
.fb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3) !important;
    color: #fff;
    border: none;
    font-size: 20px;
    width: 35px;
    height: 60px;
    z-index: 1000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fb-nav:hover, .fb-nav:active { background: rgba(0, 0, 0, 0.3) !important; }

.fb-prev { left: 0px; border-radius: 0 4px 4px 0; }
.fb-next { right: 0px; border-radius: 4px 0 0 4px; }

.page { background: #fff; }
canvas { display: block; width: 100%; height: 100%; image-rendering: -webkit-optimize-contrast; }

@media (max-width: 768px) {
    .clavius-viewport { min-height: 500px !important; padding: 5px; }
    .fb-nav { width: 25px; height: 50px; font-size: 16px; background: rgba(0, 0, 0, 0.3) !important; }
}

.clavius-viewport:fullscreen {
    width: 100vw !important; height: 100vh !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    background: #000 !important;
    padding: 0 !important;
}

.fb-instance { margin: 0 auto !important; }