.sg_zoom_btn {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 10px;
border: 0;
border-radius: 12px;
background: rgba(20,30,50,0.72);
color: #ffffff;
font: bold 12px Arial, sans-serif;
cursor: pointer;
}

.sg_zoom_btn:hover {
background: rgba(20,30,50,0.9);
}

.sg_zoom {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
flex-direction: column;
background: rgba(8,12,20,0.94);
}

.sg_zoom[hidden] {
display: none;
}

.sg_zoom_bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: 8px 12px;
color: #dfe6ee;
font: 13px Arial, sans-serif;
}

.sg_zoom_about {
display: flex;
flex-direction: column;
min-width: 0;
}

.sg_zoom_about span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sg_zoom_step {
display: flex;
gap: 8px;
}

.sg_zoom_bar .sg_zoom_step button {
font-size: 13px;
font-weight: bold;
padding: 7px 14px;
width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sg_zoom_tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}

.sg_zoom_bar button {
border: 0;
border-radius: 14px;
background: rgba(255,255,255,0.14);
color: #ffffff;
font-size: 20px;
line-height: 1;
padding: 4px 12px;
cursor: pointer;
}

.sg_zoom_bar button:hover {
background: rgba(255,255,255,0.28);
}

.sg_zoom_name {
font-weight: bold;
color: #ffffff;
}

.sg_zoom_info {
opacity: 0.7;
font-size: 12px;
}

.sg_zoom_links {
display: flex;
gap: 12px;
margin-right: 6px;
}

.sg_zoom_links a:link, .sg_zoom_links a:visited {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}

.sg_zoom_file:link, .sg_zoom_file:visited {
color: #9cc8ee;
text-decoration: none;
}

.sg_zoom_pane {
flex: 1;
display: flex;
overflow: auto;
cursor: grab;
}

.sg_zoom_pane img {
display: block;
flex: none;
max-width: none;
height: auto;
margin: auto;
}

.sg_zoom_bar .sg_zoom_pct {
font-size: 12px;
width: 60px;
}

.sg_zoom_parts {
display: flex;
gap: 4px;
}

.sg_zoom_bar .sg_zoom_parts button {
font-size: 12px;
padding: 4px 9px;
}

.sg_zoom_bar .sg_zoom_parts button.on {
background: #2370b9;
}

@media (max-width: 900px) {
.sg_zoom_bar { grid-template-columns: 1fr auto; }
.sg_zoom_about { display: none; }
.sg_zoom_bar .sg_zoom_step button { width: 130px; }
.sg_zoom_tools { flex-wrap: wrap; }
}