.enc-mode-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:4px;
height:var(--face);
padding:0 14px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
color:var(--tx2);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
box-sizing:border-box;
transition:60ms;
}
.enc-mode-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.enc-mode-btn.active{
background-color:var(--cl1);
border-color:var(--cl1);
color:var(--blk);
}
.enc-mode-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.enc-codec-wrap{
position:absolute;
left:50%;
top:calc(50% - var(--gd2)/2);
transform:translate(-50%,-50%);
z-index:50;
}
.enc-codec-btn{
display:inline-flex;
align-items:center;
gap:6px;
height:var(--face);
padding:0 14px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx1);
box-sizing:border-box;
transition:60ms;
user-select:none;
}
.enc-codec-btn:hover,
.enc-codec-btn.open{
border-color:var(--cl1);
color:var(--cl1);
}
.enc-codec-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.enc-codec-arrow{
display:flex;
align-items:center;
transition:transform .15s;
}
.enc-codec-arrow svg{
width:12px;
height:12px;
fill:currentColor;
}
.enc-codec-btn.open .enc-codec-arrow{
transform:rotate(180deg);
}
.enc-codec-menu{
position:absolute;
top:calc(100% + var(--gd4));
left:50%;
transform:translateX(-50%);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
padding:var(--gd4);
display:none;
flex-direction:column;
gap:2px;
z-index:100;
min-width:180px;
}
.enc-codec-menu.open{
display:flex;
}
.enc-codec-item{
display:flex;
align-items:center;
height:40px;
padding:0 14px;
background:none;
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
color:var(--tx2);
cursor:pointer;
transition:60ms;
white-space:nowrap;
}
.enc-codec-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.enc-codec-item.active{
color:var(--cl1);
background-color:rgba(255,85,17,0.1);
}
.enc-codec-item.pressed{
transform:translateY(1px) scale(0.98);
}
.enc-toggle{
display:inline-flex;
align-items:center;
gap:0;
height:var(--face);
padding:0 14px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
box-sizing:border-box;
transition:60ms;
user-select:none;
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
.enc-toggle:hover{
border-color:var(--cl1);
}
.enc-toggle[data-state="1"]{
border-color:var(--cl1);
background-color:rgba(255,85,17,0.15);
}
.enc-toggle.pressed{
transform:translateY(calc(-50% + 2px)) scale(0.97);
}
.enc-toggle-label{
font-family:var(--ff2);
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
}
.enc-toggle-check{
width:18px;
height:18px;
border-radius:50%;
border:2px solid var(--bc1);
margin-left:10px;
flex-shrink:0;
box-sizing:border-box;
transition:60ms;
}
.enc-toggle:hover .enc-toggle-check{
border-color:var(--cl1);
}
.enc-toggle[data-state="1"] .enc-toggle-check{
border-color:var(--cl1);
background-color:var(--cl1);
box-shadow:inset 0 0 0 2.5px var(--bg2);
}
.enc-toggle-switch{
width:32px;
height:18px;
border-radius:9px;
background-color:var(--bc1);
margin-left:10px;
flex-shrink:0;
position:relative;
transition:background-color 120ms;
}
.enc-toggle-knob{
position:absolute;
top:2px;
left:2px;
width:14px;
height:14px;
border-radius:50%;
background-color:var(--tx3);
transition:left 120ms,background-color 120ms;
}
.enc-toggle:hover .enc-toggle-knob{
background-color:var(--cl1);
}
.enc-toggle[data-state="1"] .enc-toggle-switch{
background-color:rgba(255,85,17,0.35);
}
.enc-toggle[data-state="1"] .enc-toggle-knob{
left:16px;
background-color:var(--cl1);
}
.enc-toggle:hover .enc-toggle-label{
color:var(--cl1);
}
.enc-toggle[data-state="1"] .enc-toggle-label{
color:var(--cl1);
}
.enc-toggle.hidden{
display:none;
}
.enc-confirm-btn{
display:inline-flex;
align-items:center;
height:var(--face);
padding:0 24px;
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--blk);
cursor:pointer;
transition:60ms;
margin-left:var(--gd4);
}
.enc-confirm-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.enc-yes{
background-color:var(--cl2);
}
.enc-no{
background-color:var(--rd1);
}
@media(max-width:900px){
.enc-codec-wrap{
position:static;
transform:none;
order:99;
width:100%;
display:flex;
justify-content:center;
}
.enc-toggle{
position:static;
transform:none;
}
.enc-toggle.pressed{
transform:translateY(2px) scale(0.97);
}
}