.tool-wrap{
--face:48px;
width:var(--pw3);
max-width:100%;
margin:var(--gap) auto;
overflow-anchor:none;
}
.tool-header{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:var(--gd2);
gap:var(--gd2);
flex-wrap:wrap;
position:relative;
}
.svg-stat-icon{
position:absolute;
left:50%;top:calc(var(--face) / 2);
transform:translate(-50%,-50%);
height:var(--face);
width:auto;
display:none;
color:var(--tx2);
cursor:pointer;
}
.svg-stat-icon:hover{
color:var(--cl1);
}
.svg-stat-icon svg{
height:100%;
width:auto;
display:block;
}
.svg-preview-modal svg{
max-width:100%;
max-height:100%;
display:block;
color:var(--tx2);
}
.tool-header-left{
display:flex;
align-items:center;
gap:var(--gd4);
}
.tool-mode-wrap{
position:relative;
}
.tool-mode-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;
}
.tool-mode-btn:hover,
.tool-mode-btn.open{
border-color:var(--cl1);
color:var(--cl1);
}
.tool-mode-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.tool-mode-arrow{
display:flex;
align-items:center;
transition:transform .15s;
}
.tool-mode-arrow svg{
width:12px;
height:12px;
fill:currentColor;
}
.tool-mode-btn.open .tool-mode-arrow{
transform:rotate(180deg);
}
.tool-mode-menu{
position:absolute;
top:calc(100% + var(--gd4));
left:0;
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;
}
.tool-mode-menu.open{
display:flex;
}
.tool-mode-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;
}
.tool-mode-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.tool-mode-item.active{
color:var(--cl1);
background-color:rgba(255,85,17,0.1);
}
.tool-mode-item.pressed{
transform:translateY(1px) scale(0.98);
}
.tool-mode-wrap.flat{
display:flex;
align-items:center;
gap:var(--gd4);
}
.tool-mode-wrap.flat .tool-mode-item{
height:var(--face);
padding:0 14px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-size:16px;
text-transform:uppercase;
letter-spacing:1px;
box-sizing:border-box;
gap:6px;
}
.tool-mode-wrap.flat .tool-mode-item:hover:not(.active){
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.tool-mode-wrap.flat .tool-mode-item.active{
background-color:var(--cl1);
border-color:var(--cl1);
color:var(--blk);
}
.tool-mode-wrap.flat .tool-mode-item.pressed{
transform:translateY(2px) scale(0.97);
}
.tool-mode-wrap.flat .tool-mode-item:disabled{
opacity:0.4;
cursor:not-allowed;
pointer-events:none;
}
.tool-mode-wrap.flat .tool-mode-item svg{
width:16px;
height:16px;
}
.tool-state-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;
}
.tool-state-btn:hover:not(.active){
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.tool-state-btn.active{
background-color:var(--cl1);
border-color:var(--cl1);
color:var(--blk);
cursor:default;
}
.tool-state-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.tool-state-btn.disabled{
opacity:0.4;
cursor:not-allowed;
pointer-events:none;
}
.tool-btn{
display:flex;
align-items:center;
gap:8px;
height:var(--face);
padding:0 16px;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx2);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
transition:60ms;
box-sizing:border-box;
}
.tool-btn:hover:not(:disabled){
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.tool-btn.pressed:not(:disabled){
transform:translateY(2px) scale(0.97);
}
.tool-btn:disabled{
opacity:0.4;
cursor:not-allowed;
box-shadow:none;
}
.tool-btn.copied,
.tool-btn.copied:hover:not(:disabled){
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.tool-btn svg{
width:16px;
height:16px;
fill:currentColor;
}
.tool-textarea-wrap{
width:100%;
min-height:200px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
overflow:hidden;
position:relative;
}
.tool-textarea-wrap:focus-within{
border-color:var(--cl1);
}
.tool-clear-inline{
position:absolute;
top:var(--gd4);
right:var(--gd4);
width:var(--face);
height:var(--face);
display:flex;
align-items:center;
justify-content:center;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
z-index:10;
padding:0;
}
.tool-clear-inline:hover:not(:disabled){
background-color:var(--rb1);
border-color:var(--rd1);
}
.tool-clear-inline:disabled{
opacity:0.3;
cursor:not-allowed;
}
.tool-clear-inline svg{
width:18px;
height:18px;
fill:var(--tx2);
stroke:var(--tx2);
}
.tool-clear-inline:hover:not(:disabled) svg{
fill:var(--rd1);
stroke:var(--rd1);
}
.tool-textarea{
width:100%;
min-height:200px;
padding:var(--gap);
padding-right:60px;
font-family:var(--ff3);
font-size:1.2rem;
line-height:1.3;
color:var(--tx1);
background-color:transparent;
border:none;
outline:none;
box-sizing:border-box;
resize:none;
display:block;
overflow:hidden;
}
.tool-textarea::placeholder{
color:var(--tx3);
}
.tool-btn-primary{
display:inline-flex;
align-items:center;
height:var(--face);
padding:0 24px;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--blk);
background-color:var(--cl1);
border:none;
border-radius:var(--br0);
cursor:pointer;
transition:60ms;
box-sizing:border-box;
}
.tool-btn-primary:hover:not(:disabled){
background-color:var(--oh2);
}
.tool-btn-primary.pressed:not(:disabled){
transform:translateY(2px) scale(0.97);
}
.tool-btn-primary:disabled{
background-color:var(--bg4);
color:var(--tx3);
cursor:not-allowed;
opacity:0.6;
box-shadow:none;
}
.tool-footer{
display:flex;
align-items:center;
justify-content:center;
gap:var(--gd2);
margin-top:var(--gd2);
margin-bottom:var(--gd2);
position:relative;
min-height:var(--face);
flex-wrap:wrap;
}
.tool-stats{
display:none;
align-items:center;
gap:var(--gd2);
font-size:var(--fz1);
color:var(--tx2);
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
.tool-stats.visible{
display:flex;
}
@media(max-width:900px){
.tool-stats{
position:static;
transform:none;
width:100%;
justify-content:center;
order:99;
}
}
.tool-stats.flash .tool-stat-value{
animation:stat_flash 0.3s ease;
}
@keyframes stat_flash{
0%{opacity:1;transform:scale(1);}
50%{opacity:0.5;transform:scale(1.1);}
100%{opacity:1;transform:scale(1);}
}
.tool-stat-value{
font-weight:700;
color:var(--tx1);
}
.tool-stat-value.positive{
color:var(--cl2);
}
.tool-stat-icon{
height:var(--face);
width:auto;
display:inline-flex;
color:var(--tx2);
flex-shrink:0;
}
.tool-stat-icon svg{
height:100%;
width:auto;
display:block;
}
.svg-preview-wrap{
display:none;
align-items:center;
gap:var(--gd2);
}
.svg-preview-wrap.visible{
display:flex;
}
.svg-preview{
width:1.5em;
height:1.5em;
color:var(--tx2);
}
.svg-preview svg{
width:100%;
height:100%;
display:block;
}