.figuree-font-tester{
position:relative;
display:flex;
flex-direction:column;
gap:48px;
padding:0;
margin-bottom:42px;
border:0;
border-radius:0;
background:none;
box-shadow:none;
overflow:visible;
}

#figuree-font-preview{
min-height:unset;
padding:0;
margin:0;
font-size:152px;
line-height:1.04;
letter-spacing:0;
font-weight:400;
color:#fff;
outline:none;
word-break:break-word;
white-space:normal;
text-align:left;
cursor:text;
}

.figuree-tester-controls{
display:flex;
align-items:center;
gap:30px;
width:100%;
margin:0 0 24px;
padding:0;
flex-wrap:nowrap;
border:0;
border-radius:0;
background:none;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.figuree-typography-control-panel,
.figuree-tester-controls.figuree-typography-control-panel{
display:flex;
align-items:center;
gap:32px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--figuree-card-radius,16px);
padding:24px;
margin-top:0;
}

.figuree-preview-control-panel + .figuree-typography-control-panel,
.figuree-preview-control-panel + .figuree-tester-controls.figuree-typography-control-panel{
margin-top:-52px;
}

.figuree-control-header{
display:flex;
align-items:center;
gap:12px;
flex:1 1 0;
min-width:0;
}

.figuree-toolbar-icon{
width:25px;
height:25px;
min-width:25px;
min-height:25px;
max-width:25px;
max-height:25px;

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

flex-shrink:0;

color:var(--figuree-primary);
opacity:.85;
}

.figuree-toolbar-icon svg{
width:100%;
height:100%;
display:block;
overflow:visible;
}

.figuree-toolbar-icon svg *{
fill:currentColor !important;
}

.figuree-extra-controls button img{
width:25px;
height:25px!important;
min-width:25px;
min-height:25px;
max-width:25px;
max-height:25px;
aspect-ratio:1;
display:block;
object-fit:contain;
flex-shrink:0;
}

/* Extra controls (uppercase/align) — tetap putih */
.figuree-extra-controls button img{
filter:brightness(0) invert(1);
}

.figuree-tester-controls input[type="range"]{
width:100%;
flex:1 1 auto;
min-width:92px;
height:4px;
appearance:none;
background:
linear-gradient(
90deg,
var(--figuree-primary) 0%,
var(--figuree-primary) var(--figuree-range-progress,0%),
rgba(255,255,255,.16) var(--figuree-range-progress,0%),
rgba(255,255,255,.16) 100%
);
border-radius:999px;
outline:none;
transition:background .18s ease;
}

.figuree-tester-controls input[type="range"]::-webkit-slider-thumb{
appearance:none;
width:12px;
height:12px;
border-radius:999px;
background:var(--figuree-primary);
cursor:pointer;
border:none;
box-shadow:0 0 0 3px rgba(255,255,255,.12);
transition:transform .15s ease, box-shadow .15s ease;
}

.figuree-tester-controls input[type="range"]:hover::-webkit-slider-thumb{
box-shadow:none;
}

.figuree-tester-controls input[type="range"]:active::-webkit-slider-thumb{
box-shadow:none;
}

#figuree-size-value,
#figuree-spacing-value,
#figuree-line-value{
width:0;
min-width:0;
overflow:hidden;
opacity:0;
pointer-events:none;
}

.figuree-extra-controls{
display:flex;
align-items:center;
justify-content:flex-end;
gap:18px;
margin-left:auto;
padding-left:24px;
border-left:1px solid rgba(255,255,255,.12);
flex-shrink:0;
flex-wrap:nowrap;
}

.figuree-extra-controls button{
display:flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
background:none;
border:none;
padding:0;
cursor:pointer;
opacity:.4;
transition:opacity .2s ease, transform .2s ease;
}

.figuree-extra-controls button:hover{
opacity:.75;
transform:translateY(-1px);
}

.figuree-extra-controls button.active{
opacity:1;
}

@media(max-width:991px){
.figuree-tester-controls{
overflow-x:auto;
gap:24px;
padding-bottom:4px;
}

.figuree-control-header{
min-width:190px;
}
}

/* ==========================================================================
   BUG FIXES
   ========================================================================== */

/* 1. Prevent browser bold synthesis on preview font */
#figuree-font-preview{
font-synthesis:none;
-webkit-font-smoothing:antialiased;
}

/* 3. Background color swatches — keep on one row */
.figuree-preview-swatches{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:6px;
}

/* 4. Force all toolbar icons to white */
.figuree-extra-controls button img,
.figuree-extra-controls button svg{
filter:brightness(0) invert(1)!important;
}

/* Also handle inline SVG stroke/fill via CSS */
.figuree-extra-controls button svg path{
stroke:#fff!important;
fill:none;
}
.figuree-extra-controls button svg path[fill]:not([fill="none"]){
fill:#fff!important;
stroke:none;
}