html, body { background:#0f0f0f; color:#e8edf3; min-height:100%; }
body { margin:0; }
.page { max-width:1360px; margin:0 auto; padding:16px 24px 64px; }
.breadcrumbs { margin-bottom:8px; font-size:14px; color:#cfd6dd; }
.breadcrumbs a { color:#9fd9e8; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.gate.parental-gate {
  background: #141a2c;
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.42);
  display: flex;
  align-items: center; justify-content: center;
  min-height:320px;
  margin: 0 auto;
}
.gate-card {
  background: #232b39;
  border-radius: 16px;
  max-width: 380px;
  margin: 0 auto;
  padding: 40px 28px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
  text-align: center;
}
.gate-title {
  font-size: 23px;
  color:#fff;
  font-weight: bold;
  margin-bottom: 15px;
}
.gate-sub {
  font-size: 15px;
  color: #e8f0fa;
  margin-bottom: 20px;
}
.gate .btn {
  display:inline-block;
  font-size:18px;
  font-weight:700;
  background:#1366d6;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 24px;
  cursor:pointer;
  margin-top:9px;
  transition:all .14s;
}
.gate .btn:active {
  background:#05366c;
}
.gate .btn-secondary {
  background:#4b5316;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-size:15px;
  font-weight:bold;
  margin-left:10px;
  cursor:pointer;
}
.video-comments-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}
@media (max-width: 1024px) {
  .video-comments-grid { grid-template-columns: 1fr; }
}
.player-wrap { position:relative; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,.45); width:100%; margin-bottom:0; }
.video-responsive { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden;}
.video-responsive iframe, .video-responsive > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000; display: block;}
.comments-section-sidebar {
  background: #10171e;
  border-radius: 14px;
  box-shadow: 0 8px 36px rgba(0,0,0,.18);
  width: 100%;
  min-width: 220px;
  max-width: 440px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 5px !important;
}
.comments-tabs { display: flex; border-bottom: 1px solid #222c35;}
.comments-tab { flex: 1; padding: 17px 0 10px 0; font-weight: 700; font-size: 15px; background: none; color: #87cae5; border: none; border-radius: 0; text-align: center; cursor: pointer; }
.comments-tab.active { border-bottom: 4px solid #00617c; color: #e7fafe; background: #151b26; }
.comments-pane { flex: 1; overflow-y: auto; max-height: 410px; padding: 14px 17px 5px 17px; font-size: 13px; }
.comments-header { font-weight: 700; font-size:15px; color:#e7fafe; margin-bottom:11px; letter-spacing:0.4px; }
.comment-block { background:none; padding:0; margin-bottom:16px; border:none; border-radius:0; box-shadow:none; display:flex; flex-direction:column; font-size:13px;}
.comment-block:last-child { margin-bottom: 5px; }
.comment-top-row { display:flex; align-items:center; gap:9px; margin-bottom:2px;}
.comment-avatar { width:32px; height:32px; border-radius:16px; object-fit:cover; margin-right:6px; flex:0 0 auto; background:#222; }
.comment-username { font-weight:700; font-size:14px; color:#fff !important; margin-right:3px;}
.comment-timestamp { font-size:11px; color:#b3cce7; opacity:0.7; margin-right:2px;}
.comment-text { margin-left:41px; font-size:13px; color:#e8edf3; margin-bottom:1px;}
.comment-actions-row { margin-left:41px; margin-top:4px; display:inline-flex; align-items:center; gap:21px; font-size:13px;}
.comment-action { font-size:13px; font-weight:500; color:#fff; background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:7px; }
.comment-action .comment-icon { width:18px; height:18px; display:inline-block; vertical-align:middle; }
.comment-likes { color:#fff; display:inline-flex; align-items:center; gap:4px; }
.replies-toggle-row { margin-left:41px; margin-top:4px; font-size:12px; color:#00617c; cursor:pointer; display:inline-flex; align-items:center; font-weight:500; gap:6px; }
.reply-chevron { font-size:15px; color:#fff; transition: transform .25s; }
.reply-chevron.open { transform: rotate(90deg);}
.replies-list { margin-left:45px; margin-top:3px; border-left:2px solid #0a3f4a; padding-left:13px; background:none; font-size:12px;}
.reply-block { margin-bottom:8px; font-size:12px;}
.reply-block:last-child { margin-bottom:0;}
.reply-avatar { width:22px; height:22px; border-radius:15px; object-fit:cover; background:#222; margin-right:5px;}
.reply-username { font-weight:600; font-size:13px; color:#fff !important; margin-right:2px;}
.reply-timestamp { font-size:10px; color:#89b0c9; opacity:.7;}
.reply-text { margin-left:29px; font-size:12px; color:#e8edf3; margin-bottom:2px;}
.reply-actions-row { margin-left:29px; margin-top:2px; display:inline-flex; gap:11px; font-size:11px; }
.reply-action { font-size:11px; color:#fff; font-weight:500; background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:5px;}
.reply-action .comment-icon { width:14px; height:14px; display:inline-block; vertical-align:middle; }
.reply-likes { color:#fff; font-size:11px; display:inline-flex; align-items:center; gap:3px;}
.kudos-pane { font-size:13px; color:#bcf6ff; margin-top:23px; text-align:center; opacity:0.7;}
.add-comment-top-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  margin-top: 2px;
  gap: 10px;
}
.add-comment-avatar {
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  background:#222;
  margin-right:5px;
}
.add-comment-line {
  flex: 1;
  border: none;
  border-bottom: 2px solid #252d38;
  background:transparent;
  color: #e8edf3;
  font-size: 13px;
  padding: 4px 0;
  outline: none;
  transition: border-color 0.2s;
}
.add-comment-line:focus { border-bottom:2px solid #00617c; }
.add-comment-buttons {
  margin-top: 6px;
  gap: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.add-comment-btn {
  background:#00617c;
  color:#fff;
  font-weight:600;
  border:none;
  padding:4px 12px;
  border-radius:5px;
  font-size: 12px;
  cursor:pointer;
  margin-right:6px;
  transition:background .15s;
}
.add-comment-btn.cancel {
  background:#222;
  color:#e8edf3;
  margin-right:0;
}
.meta-bar { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; margin:14px 2px 0px; }
.title { font-size:24px; font-weight:800; color:#fff; margin:0; }
.date { font-size:12px; color:#cfd6dd; margin:2px 0 0 0; }
.row-small { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; margin:5px 0 0; }
.genre-badge { background:#1f282e; color:#c9f4ff; border-radius:7px; padding:2px 10px; display:inline-block; font-size:12px; margin-right:7px; }
.btn-channel { background:#1f282e; color:#7dedf3; border:0; border-radius:7px; font-size:12px; font-weight:600; padding:2px 14px; margin-right:7px; text-decoration:none; }
.rating-line { font-size:12px; color:#ffd687; margin:5px 0 0 0; }
.desc-line { font-size:12px; color:#e8edf3; margin:8px 0 0 0; }
.descriptor-badge, .pres-badge { background:#212027; color:#f4ffe7; border-radius:7px; padding:2px 10px; display:inline-block; font-size:12px; margin-right:7px; }
.separator { margin:0 6px; color:#bbb; font-size:12px; }
.grid { display:grid; gap:14px; }
@media (min-width: 480px)  { .grid { grid-template-columns: repeat(2,1fr);} }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3,1fr);} }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4,1fr);} }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(5,1fr);} }
.card { background:#0f161c; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; text-decoration:none; color:#fff; }
.thumb { width:100%; aspect-ratio:16/9; background:#000 center/cover no-repeat; display:block; }
.card .info { padding:10px 12px; text-align:left; }
.card .name { font-weight:700; font-size:14px; margin:0; color:#fff; text-align:left; }
.card .date { font-size:12px; color:#cfd6dd; opacity:.9; margin:0; margin-top:2px; text-align:left; }