.adv-preview-controls{
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-3);
flex-wrap:wrap;
padding:var(--space-3);
background:var(--color-bg);
border:1px solid var(--color-line);
border-radius:var(--radius-pill);
box-shadow:var(--shadow-xs);
}
.adv-preview-controls__zoom{
display:flex;
align-items:center;
gap:var(--space-2);
font-size:var(--font-size-sm);
color:var(--color-muted);
}
.adv-preview-controls__zoom input[type="range"]{
width:120px;
accent-color:var(--color-primary);
}
.adv-preview-controls__value{
min-width:3em;
text-align:right;
font-family:var(--font-mono);
font-size:var(--font-size-sm);
color:var(--color-ink);
}
.adv-preview-controls__sep{
width:1px;
height:20px;
background:var(--color-line);
}
.adv-preview-controls__btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
min-height:34px;
padding:.35em .8em;
background:transparent;
border:0;
border-radius:var(--radius-pill);
color:var(--color-muted);
font-size:var(--font-size-sm);
font-weight:var(--weight-medium);
cursor:pointer;
transition:var(--transition-base);
}
.adv-preview-controls__btn:hover{
background:var(--color-bg-muted);
color:var(--color-ink);
}
.adv-preview-controls__btn[aria-pressed="true"]{
background:var(--color-primary-soft);
color:var(--color-primary);
font-weight:var(--weight-semibold);
}
.adv-preview-controls__btn:focus-visible{
outline:2px solid var(--color-focus);
outline-offset:1px;
}
.adv-preview-controls__btn svg{flex-shrink:0}

@media (max-width:639px){
.adv-preview-controls{
padding:var(--space-2);
gap:var(--space-2);
}
.adv-preview-controls__zoom input[type="range"]{width:80px}
.adv-preview-controls__btn{padding:.35em .6em;font-size:var(--font-size-xs)}
}