.ytt-chart { --ytt-accent: #e0245e; max-width: 760px; margin: 0 auto; }
.ytt-status { font-size: .9rem; opacity: .8; margin-bottom: 1rem; }
.ytt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.ytt-item { display: grid; grid-template-columns: 2.2rem 120px 1fr auto auto; align-items: center; gap: .75rem;
	padding: .5rem; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: rgba(0,0,0,.02); }
.ytt-item.is-voted { border-color: var(--ytt-accent); }
.ytt-rank { font-weight: 700; font-size: 1.1rem; text-align: center; opacity: .6; }
.ytt-thumb img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; display: block; }
.ytt-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ytt-title { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ytt-channel { font-size: .8rem; opacity: .65; }
.ytt-votes { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3ch; text-align: right; }
.ytt-vote { background: var(--ytt-accent); color: #fff; border: 0; border-radius: 999px; padding: .45rem 1rem;
	font-weight: 600; cursor: pointer; }
.ytt-vote[disabled] { opacity: .45; cursor: not-allowed; }
.ytt-suggest { margin-top: 2rem; padding: 1rem; border: 1px dashed rgba(0,0,0,.2); border-radius: 12px; display: grid; gap: .6rem; }
.ytt-suggest h3 { margin: 0; }
.ytt-suggest label { display: grid; gap: .25rem; font-size: .85rem; }
.ytt-suggest input { padding: .5rem; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; width: 100%; }
.ytt-suggest button { justify-self: start; background: #111; color: #fff; border: 0; border-radius: 999px; padding: .5rem 1.2rem; cursor: pointer; }
.ytt-message { font-size: .85rem; margin: 0; }
.ytt-watch { cursor: pointer; }
.ytt-popup-open { overflow: hidden; }
.ytt-video-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 1.25rem;
	background: rgba(0,0,0,.86); }
.ytt-video-popup[hidden] { display: none; }
.ytt-video-dialog { position: relative; width: min(960px, 100%); }
.ytt-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
	border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.ytt-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytt-video-close { position: absolute; z-index: 1; top: -2.75rem; right: 0; width: 2.5rem; height: 2.5rem;
	display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #111;
	font: 700 1.75rem/1 sans-serif; cursor: pointer; }
.ytt-video-close:focus-visible { outline: 3px solid var(--ytt-accent, #e0245e); outline-offset: 3px; }
@media (max-width: 640px) {
	.ytt-item { grid-template-columns: 1.8rem 92px 1fr; grid-template-areas: "rank thumb meta" ". votes vote"; }
	.ytt-rank { grid-area: rank; } .ytt-thumb { grid-area: thumb; } .ytt-meta { grid-area: meta; }
	.ytt-votes { grid-area: votes; text-align: left; } .ytt-vote { grid-area: vote; justify-self: start; }
	.ytt-thumb img { width: 92px; height: 52px; }
	.ytt-video-popup { padding: .75rem; }
}