/* ============ RESET / BASE ============ */
* { box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  font-family: Verdana, Arial, sans-serif;
  font-size:11px;
  background:#fff;
  color:#000;
}
a { color:#00c; text-decoration:underline; cursor:pointer; }
a:visited{ color:#551a8b; }
button { font-family: Verdana, Arial, sans-serif; cursor:pointer; }
img { border:0; }
ul { margin:0; padding:0; list-style:none; }

/* ============ PAGE WRAPPER ============ */
#ytPage{
  max-width:970px;
  margin:0 auto;
  background:#fff;
  min-height:100vh;
}

/* ============ TOP ACCOUNT BAR ============ */
.ytTopBar{
  text-align:right;
  font-size:11px;
  color:#333;
  padding:6px 12px;
  border-bottom:1px solid #E1E1E1;
}
.ytTopBar a{ margin:0 2px; }
.siteLangFlag{ font-size:12px; }

/* ============ YOUTUBE HEADER ============ */
.ytHeader{ padding:10px 12px 0 12px; }
.ytTopRow{ display:flex; justify-content:space-between; align-items:flex-end; }
.ytLogo{
  font-family:Arial,sans-serif;
  font-size:36px;
  font-weight:bold;
  letter-spacing:-1px;
  margin:0;
}
.ytLogo .you{ color:#3D3D3D; }
.ytLogo .tube{
  background:#CC1A00;
  color:#fff;
  padding:0 7px;
  border-radius:3px;
}
.ytTagline{ font-size:10px; color:#666; font-style:italic; margin-top:-2px;}
.ytTabs{ display:flex; gap:3px; margin-bottom:2px; }
.ytTab{
  padding:6px 20px;
  background:linear-gradient(#7FA8E8,#3D6FCB 50%,#2A55A8);
  border:1px solid #2A4E96;
  border-radius:4px 4px 0 0;
  font-weight:bold;
  color:#fff;
  font-size:12px;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
}
.ytTab.active{
  background:#fff;
  border-color:#7F9DB9;
  border-bottom:1px solid #fff;
  color:#CC1A00;
  text-shadow:none;
  margin-bottom:-1px;
  position:relative;
}
.ytSearchRow{
  background:#F0F0F0;
  border-top:1px solid #C7C7C7;
  border-bottom:3px solid #E1E1E1;
  padding:10px 12px;
  display:flex;
  gap:6px;
  align-items:center;
}
.ytSearchRow input[type=text]{
  flex:1;
  max-width:420px;
  padding:5px 6px;
  border:1px solid #7F9DB9;
  font-size:12px;
}
.ytSearchRow .buscarBtn{
  background:linear-gradient(#6C9EEB,#3D6FCB);
  border:1px solid #2A4E96;
  color:#fff;
  font-weight:bold;
  padding:5px 18px;
  border-radius:3px;
}
.poweredBy{ font-size:9px; color:#888; margin-left:auto; }

/* ============ MAIN CONTENT ============ */
.contentWrap{ padding:14px 12px; }
.pageTitle{ font-size:16px; color:#333; border-bottom:1px solid #ddd; padding-bottom:4px; margin-bottom:10px;}

.videoGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.videoCard{
  border:1px solid #E1E1E1;
  border-radius:4px;
  padding:6px;
  background:#FAFAFA;
  cursor:pointer;
}
.videoCard:hover{ background:#F0F5FF; border-color:#B9CDEA; }
.videoCard .vThumbWrap{ position:relative; }
.videoCard img{ width:100%; height:110px; object-fit:cover; border:1px solid #ccc; display:block; }
.videoCard .vDuration{
  position:absolute; right:3px; bottom:3px;
  background:rgba(0,0,0,0.8); color:#fff;
  font-size:10px; font-weight:bold; line-height:1;
  padding:2px 4px; border-radius:2px;
}
.videoCard .vTitle{ font-weight:bold; color:#00c; font-size:11px; margin-top:5px; display:block;}
.pentagramWrap{ text-align:center; padding:40px 0; }
.pentagramCaption{ color:#888; font-size:11px; margin-top:8px; }
.videoCard .vMeta{ color:#666; font-size:10px; margin-top:3px;}
.videoCard .vStars{ color:#E8A100; font-size:11px;}

.sectionHead{
  background:linear-gradient(#F0F0F0,#E1E1E1);
  border:1px solid #CCC;
  padding:4px 8px;
  font-weight:bold;
  color:#444;
  font-size:12px;
  margin:16px 0 10px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sectionHead .displayToggle{ font-weight:normal; font-size:10px; color:#777; }

/* ============ WATCH PAGE ============ */
.watchVideoTitle{ font-size:18px; font-weight:bold; color:#333; margin:10px 0 8px 0;}
.watchLayout{ display:flex; gap:18px; }
.watchLeft{ flex:2; min-width:0; }
.watchRight{ flex:1; min-width:230px; }

.playerBox{
  background:#000;
  border:1px solid #999;
  padding:0;
}
.playerBox iframe{ width:100%; height:360px; display:block; }
.playerFallback{
  width:100%; height:360px; background:#111; color:#eee; display:flex;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; font-size:12px;
}
.watchTroubleLine{ font-size:10px; color:#888; margin-top:4px; }

.actionRow{ display:flex; gap:16px; padding:8px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; margin:8px 0; font-size:11px;}
.actionRow a{ text-decoration:none; color:#333; display:flex; align-items:center; gap:3px;}
.actionRow a:hover{ text-decoration:underline; }

.rateRow{ display:flex; align-items:center; gap:10px; padding:4px 0; font-size:12px; flex-wrap:wrap; }
.rateStars{ color:#E8A100; font-size:16px; letter-spacing:1px; cursor:pointer; }
.rateStars span{ cursor:pointer; }
.ratingsCount{ color:#666; font-size:11px; }
.viewsCount{ margin-left:auto; color:#333; font-size:11px; }

.statsRow{ font-size:11px; color:#333; padding:4px 0 8px 0; border-bottom:1px solid #eee; margin-bottom:10px; }
.statsRow b{ color:#000; }

.videoResponseRow{ display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:11px; }
.videoResponseThumb{
  width:90px; height:68px; background:#ddd; border:1px solid #ccc; color:#888;
  display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;
}

.textCommentsHead{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; margin:14px 0 10px 0; font-size:13px; font-weight:bold; color:#333; border-bottom:1px solid #ddd; padding-bottom:4px;}
.commentsControls{ font-size:11px; font-weight:normal; color:#333; display:flex; align-items:center; gap:8px; }
.commentsControls select{ font-size:11px; }
.commentsPager{ font-size:11px; color:#333; margin-top:10px; }
.commentsPager a{ margin:0 3px; }

.channelBox{
  border:1px solid #E1E1E1; padding:10px; background:#FAFAFA; margin-bottom:10px; text-align:center;
}
.channelBox .chName{ font-weight:bold; color:#00c; }
.channelFromLine{ margin-top:6px; font-size:11px; }
.channelJoinedLine{ color:#666; font-size:10px; margin:2px 0 8px 0; }

.subBtn{
  background:linear-gradient(#F5A623,#D97F00); border:1px solid #A85E00; color:#fff; font-weight:bold;
  padding:4px 14px; border-radius:3px; font-size:11px; cursor:pointer;
}
.subscribedBtn{
  background:linear-gradient(#D9D9D9,#B7B7B7); border:1px solid #888; color:#333;
}
.likeLink{ cursor:pointer; }
.likedActive{ color:#0a5; font-weight:bold; }
.commentLikes.likedActive{ color:#0a5; font-weight:bold; }
.favLink{ cursor:pointer; }
.favActive{ color:#c00; font-weight:bold; }

.collapseToggle{ font-size:12px; font-weight:bold; color:#333; cursor:pointer; padding:6px 0; border-bottom:1px solid #eee; }
.collapseToggle .arrow{ display:inline-block; width:10px; }
.aboutBox{ border:1px solid #E1E1E1; padding:8px; background:#FCFCFC; font-size:11px; line-height:1.5; margin-bottom:6px;}
.embedBox{ margin-top:6px; }
.embedBox .embedLabel{ display:flex; justify-content:space-between; font-size:11px; color:#666; margin-bottom:3px;}
.embedBox textarea{ width:100%; font-size:10px; color:#333; border:1px solid #ccc; padding:4px; resize:none; }

.relatedItem{ display:flex; gap:6px; margin-bottom:8px; cursor:pointer; }
.relatedItem img{ width:70px; height:52px; object-fit:cover; border:1px solid #ccc;}
.relatedItem .rTitle{ font-weight:bold; color:#00c; font-size:11px; display:block;}
.relatedItem .rMeta{ color:#666; font-size:10px;}

.promotedGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.promotedItem{ font-size:9px; color:#333; cursor:pointer; }
.promotedItem img{ width:100%; height:44px; object-fit:cover; border:1px solid #ccc; margin-bottom:2px;}

.commentBox{ display:flex; gap:8px; margin-bottom:10px; border-bottom:1px dashed #eee; padding-bottom:8px;}
.avatar{ width:36px; height:36px; background:#7F9DB9; border:1px solid #567; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:14px;
  object-fit:cover;}
.commentAuthor{ font-weight:bold; color:#333; font-size:11px;}
.commentDate{ color:#999; font-size:10px; margin-left:6px;}
.commentText{ font-size:11px; color:#222; margin-top:2px;}
.commentLikes{ font-size:10px; color:#557; margin-top:3px; }
.commentLikes:hover{ text-decoration:underline; }

.addCommentBox{ display:flex; gap:8px; margin-bottom:14px; }
.addCommentBox textarea{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:11px; border:1px solid #ccc;
  padding:5px; resize:vertical; min-height:36px;
}
.postCommentBtn{
  background:linear-gradient(#4A90D9,#2D6CB5); border:1px solid #1C4E8A; color:#fff; font-weight:bold;
  padding:4px 12px; border-radius:3px; font-size:11px; margin-top:5px; cursor:pointer;
}

/* channels / categories / community / search / profile */
.chanCard, .catCard{
  border:1px solid #E1E1E1; background:#FAFAFA; padding:10px; display:flex; gap:10px; margin-bottom:10px; align-items:center;
}
.chanAvatarBig{ width:50px;height:50px;background:#3D6FCB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:bold;border:1px solid #24427c; flex-shrink:0; object-fit:cover;}
.catCard{ cursor:pointer; }
.catCard:hover{ background:#F0F5FF; }
.communityPost{ border:1px solid #E1E1E1; background:#FAFAFA; padding:8px; margin-bottom:8px;}
.profileHead{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.profileAvatar{ width:80px;height:80px;background:#CC1A00;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:bold;border:2px solid #900; object-fit:cover;}

/* upload imitation */
.uploadBox{
  border:2px dashed #B9CDEA; background:#F5F8FF; padding:16px; text-align:center; color:#557; margin-bottom:14px; font-size:11px;
}
.progressOuter{ width:100%; background:#ddd; border:1px solid #aaa; height:14px; margin-top:8px; }
.progressInner{ height:100%; background:linear-gradient(#8FBF4F,#5C9A2E); width:0%; transition:width 0.3s; }

/* modal (simple notification card) */
#fakeModal{
  position:fixed; inset:0; background:rgba(0,0,0,0.35); display:none; align-items:center; justify-content:center; z-index:999;
}
#fakeModalBox{
  background:#fff; border:1px solid #999; width:280px; box-shadow:2px 2px 8px rgba(0,0,0,0.35); border-radius:4px; overflow:hidden;
}
#fakeModalTitle{
  background:linear-gradient(#F0F0F0,#E1E1E1); color:#333; padding:5px 8px; font-weight:bold; font-size:11px;
  display:flex; justify-content:space-between; border-bottom:1px solid #ccc;
}
#fakeModalBody{ padding:16px; font-size:12px; text-align:center; }
#fakeModalBtn{
  margin-top:12px; padding:4px 16px; border:1px solid #888; background:linear-gradient(#fff,#ddd); border-radius:3px;
}

footer.ytFooter{ text-align:center; color:#999; font-size:10px; padding:14px 0; border-top:1px solid #eee; margin-top:16px;}

@media (max-width:700px){
  .videoGrid{ grid-template-columns:repeat(2,1fr); }
  .watchLayout{ flex-direction:column; }
  .promotedGrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:460px){
  .videoGrid{ grid-template-columns:1fr; }
  .ytLogo{ font-size:26px; }
  .ytTopRow{ flex-direction:column; align-items:flex-start; gap:6px; }
}