@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
.yt-card { display:flex; margin:16px; background:#f2f2f2; border-radius:12px; overflow:hidden; }
.yt-thumb { width:160px; height:90px; }
.yt-info { padding:12px; flex:1; }
.yt-title { font-size:1.2rem; margin-bottom:6px; }
.yt-meta, .yt-extra { font-size:0.9rem; color:#555; margin-bottom:4px; }
.yt-desc { font-size:1rem; line-height:1.4; color:#222; }
blockquotetop {   font-size: 8pt;   position: fixed;   top: 10px;   left: 10px;   margin: 5px;   text-shadow: 0px 1px 1px white;   color: #024; }
#frameTop {  width: 95% !important;  height: 230px !important;  border: none !important;  background: transparent !important;}
#frameCenter {  width: 95% !important;  height: 300px !important;  border: none !important;  background: transparent !important;}
#frameFooter {  width: 95% !important;  height: 270px !important;  border: none !important;  background: transparent !important;}
#frameSearch {  width: 95% !important;  height: 987px !important;  border: none !important;  background: transparent !important;}
#video-wrapper {  margin: auto;}
#video-wrapper iframe {  border: 0;}
.mini-player {  position: fixed !important;  width: 420px !important;  height: 280px !important;  bottom: 30px;  right: 20px;  z-index: 9999;  box-shadow: 0 0 12px rgba(0,0,0,0.4);}
.mini-close {  position: absolute;  top: 6px;  right: 6px;  width: 26px;  height: 26px;  border: none;  border-radius: 50%;  background: rgba(0,0,0,.7);  color: #fff;  font-size: 14px;  cursor: pointer;  z-index: 10000;}
#related-wrapper{  max-width:1000px;  margin:0 auto;  padding:10px;}
.grid-related{  display:grid;  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));  gap:14px;}
.yt-related-card{  position:relative;  border:1px solid #e5e7eb;  border-radius:12px;  overflow:hidden;  background:#fff;  box-shadow:0 3px 10px rgba(0,0,0,.06);  transition:transform .18s ease, box-shadow .18s ease;}
.yt-related-card:hover{  transform:translateY(-4px);  box-shadow:0 10px 24px rgba(0,0,0,.12);}
.yt-related-thumb-wrap{  position:relative;}
.yt-related-thumb{  width:100%;  display:block;  aspect-ratio:16/9;  object-fit:cover;  background:#f3f4f6;}
.yt-duration{  position:absolute;  bottom:6px;  right:6px;  background:rgba(0,0,0,.8);  color:#fff;  font-size:12px;  padding:2px 6px;  border-radius:6px;  font-weight:600;}
.yt-views{  position:absolute;  top:6px;  left:6px;  background:rgba(0,0,0,.7);  color:#fff;  font-size:11px;  padding:2px 6px;  border-radius:6px;}
.yt-related-title{  font-size:13.5px;  margin:8px;  line-height:1.35;  color:#111827;}
.related-load-btn{  display:block;  margin:22px auto;  padding:10px 22px;  border:none;  border-radius:999px;  background:#111827;  color:#fff;  cursor:pointer;  font-weight:600;}
.related-load-btn:hover{  background:#000;}
.skeleton{  animation:pulse 1.2s infinite ease-in-out;  background:linear-gradient(90deg,#eee,#f5f5f5,#eee);  background-size:200% 100%;}
@keyframes pulse{  0%{background-position:200% 0}  100%{background-position:-200% 0}}
.skeleton-card{  border-radius:12px;  overflow:hidden;}
.skeleton-thumb{  width:100%;  aspect-ratio:16/9;}
.skeleton-title{  height:14px;  margin:10px;  border-radius:6px;}