.yt-results{
margin-top:var(--gd2);
}
.yt-results:empty{
display:none;
}
.yt-loading{
font-family:var(--ff1);
font-size:var(--fz4);
color:var(--tx3);
padding:var(--gd2) 0;
animation:yt_pulse 0.8s infinite alternate;
}
@keyframes yt_pulse{
from{
opacity:0.4;
}
to{
opacity:1;
}
}
.yt-error{
font-family:var(--ff1);
font-size:var(--fz4);
color:var(--rd1);
padding:var(--gd2) 0;
}
.yt-meta{
display:flex;
gap:14px;
align-items:flex-start;
padding:0 0 var(--gd2) 0;
margin-bottom:var(--gd2);
}
.yt-meta-thumb-link{
display:block;
flex-shrink:0;
line-height:0;
border-radius:var(--br1);
overflow:hidden;
transition:opacity 100ms;
}
.yt-meta-thumb-link:hover{
opacity:0.85;
}
.yt-meta-thumb{
width:160px;
height:90px;
border-radius:var(--br1);
object-fit:cover;
background:var(--bg3);
display:block;
}
.yt-meta-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.yt-meta-title{
font-family:var(--ff2);
font-size:var(--fz2);
font-weight:calc(700 + var(--fw-offset));
color:var(--tx1);
line-height:1.3;
margin:0;
}
.yt-meta-title a{
color:var(--tx1);
text-decoration:none;
}
.yt-meta-title a:hover{
color:var(--cl1);
}
.yt-meta-channel{
font-family:var(--ff3);
font-size:var(--fz5);
color:var(--tx2);
}
.yt-meta-stats{
font-family:var(--ff3);
font-size:var(--fz5);
color:var(--tx3);
display:flex;
flex-direction:column;
gap:2px;
}
.yt-meta-stats span{
display:block;
}
.yt-actions{
display:flex;
gap:8px;
margin-bottom:var(--gd1);
flex-wrap:wrap;
}
.yt-action-btn{
font-family:var(--ff3);
font-size:var(--fz5);
font-weight:calc(500 + var(--fw-offset));
padding:6px 14px;
border-radius:var(--br0);
background:var(--bg2);
color:var(--tx1);
cursor:pointer;
}
.yt-action-btn:hover{
background:var(--bg3);
border-color:var(--cl1);
color:var(--cl1);
}
.yt-action-btn.copied{
background:rgba(0,180,80,0.15);
color:var(--cl2);
border-color:var(--cl2);
}
.yt-transcript-wrap{
position:relative;
}
.yt-transcript-label{
font-family:var(--ff2);
font-size:var(--fz5);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
color:var(--tx3);
margin:var(--gap) 0 var(--gd2) 0;
display:flex;
justify-content:space-between;
align-items:baseline;
gap:10px;
}
.yt-transcript-meta{
font-family:var(--ff3);
font-size:var(--fz5);
color:var(--tx3);
font-weight:var(--fw1);
text-transform:none;
}
.yt-transcript{
font-family:var(--ff1);
font-size:var(--fz4);
color:var(--tx1);
line-height:1.65;
white-space:pre-wrap;
word-wrap:break-word;
max-height:560px;
overflow-y:auto;
padding:14px;
background:var(--bg2);
border-radius:var(--br1);
}
.yt-share{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:var(--gd2);
padding:10px 12px;
background:var(--bg2);
border-radius:var(--br1);
}
.yt-share-label{
font-family:var(--ff2);
font-size:var(--fz5);
font-weight:calc(700 + var(--fw-offset));
text-transform:uppercase;
color:var(--tx3);
display:flex;
align-items:center;
gap:8px;
}
.yt-cached-badge{
font-family:var(--ff3);
font-size:var(--fz5);
font-weight:calc(500 + var(--fw-offset));
text-transform:uppercase;
color:var(--cl2);
background:rgba(0,180,80,0.15);
padding:2px 8px;
border-radius:var(--br0);
}
.yt-share-row{
display:flex;
gap:8px;
align-items:center;
}
.yt-share-input{
flex:1;
min-width:0;
font-family:var(--ff3);
font-size:var(--fz5);
color:var(--tx1);
background:var(--bg1);
border-radius:var(--br0);
padding:6px 10px;
}
.yt-share-input:focus{
outline:none;
border-color:var(--cl1);
}
@media(max-width:600px){
.yt-meta{
flex-direction:column;
gap:10px;
}
.yt-meta-thumb-link{
width:100%;
}
.yt-meta-thumb{
width:100%;
height:auto;
aspect-ratio:16/9;
}
.yt-transcript{
max-height:480px;
font-size:var(--fz4);
}
.yt-share-row{
flex-direction:column;
align-items:stretch;
}
}