:root {
	--cl-bg: #0d0d14;
	--cl-bg2: #161622;
	--cl-card: #1e1e30;
	--cl-card-h: #262640;
	--cl-brd: rgba(255, 255, 255, 0.06);
	--cl-red: #e5192a;
	--cl-green: #2ecc40;
	--cl-de: #ffcc00;
	--cl-wh: #fff;
	--cl-g2: #cccce0;
	--cl-g3: #a0a0b8;
	--cl-g5: #6a6a82;
	--cl-g7: #33334a;
}

.channel-list-page {
	background: var(--cl-bg);
	color: var(--cl-wh);
}

.channel-list-page .page-hd { padding: 120px 0 20px; }
.channel-list-page .page-hd h1 { font-size: 36px; font-weight: 900; letter-spacing: -.8px; border-left: 4px solid var(--cl-red); padding-left: 20px; }
.channel-list-page .page-hd p { font-size: 14px; color: var(--cl-g5); padding-left: 24px; margin-top: 4px; }
.channel-list-page .filter-bar { position: sticky; top: var(--landing-nav-h, 88px); z-index: 30; background: var(--cl-bg); padding: 14px 0; border-bottom: 1px solid var(--cl-brd); }
.channel-list-page .filter-row { display: flex; align-items: center; gap: 16px; }
.channel-list-page .search-wrap { position: relative; width: 260px; flex-shrink: 0; }
.channel-list-page .search-input { width: 100%; padding: 9px 14px 9px 36px; background: var(--cl-card); border: 1px solid var(--cl-brd); border-radius: 8px; color: var(--cl-wh); font-size: 13px; outline: none; }
.channel-list-page .search-input:focus { border-color: rgba(229, 25, 42, .25); }
.channel-list-page .search-input::placeholder { color: var(--cl-g5); }
.channel-list-page .search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--cl-g5); fill: none; stroke-width: 2; }
.channel-list-page .cat-nav { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.channel-list-page .cat-scroll-btn {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid var(--cl-brd);
	background: var(--cl-card);
	color: var(--cl-g3);
	font-size: 11px;
	cursor: pointer;
	flex-shrink: 0;
}
.channel-list-page .cat-scroll-btn:hover { color: var(--cl-wh); border-color: rgba(229, 25, 42, .25); }
.channel-list-page .cat-scroll-btn:disabled { opacity: .35; cursor: default; }
.channel-list-page .cat-wrap { position: relative; overflow: hidden; flex: 1; }
.channel-list-page .cat-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 48px; background: linear-gradient(90deg, transparent, var(--cl-bg)); pointer-events: none; z-index: 1; }
.channel-list-page .cats { display: flex; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.channel-list-page .cats::-webkit-scrollbar { display: none; }
.channel-list-page .cat { padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--cl-card); color: var(--cl-g3); border: 1px solid var(--cl-brd); cursor: pointer; transition: all .15s; white-space: nowrap; }
.channel-list-page .cat:hover,
.channel-list-page .cat.on { background: rgba(229, 25, 42, .08); color: var(--cl-wh); border-color: rgba(229, 25, 42, .15); }
.channel-list-page .cat.de-cat { border-color: rgba(255, 204, 0, .1); }
.channel-list-page .cat.de-cat:hover,
.channel-list-page .cat.de-cat.on { background: rgba(255, 204, 0, .06); border-color: rgba(255, 204, 0, .18); color: var(--cl-wh); }
.channel-list-page .cat-select { display: none; }
.channel-list-page .result-count { font-size: 12px; color: var(--cl-g5); padding: 12px 0 6px; }
.channel-list-page .tbl-wrap { padding: 0 0 40px; overflow: hidden; }
.channel-list-page .cat-group { margin-bottom: 24px; }
.channel-list-page .cat-group-hd { padding: 12px 16px; background: var(--cl-bg2); border-radius: 8px; margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; border-left: 3px solid var(--cl-red); cursor: pointer; user-select: none; }
.channel-list-page .cat-group-hd.de-hd { border-left-color: var(--cl-de); }
.channel-list-page .cat-group-hd h2 { font-size: 15px; font-weight: 700; }
.channel-list-page .cat-group-hd .meta { font-size: 12px; color: var(--cl-g5); display: flex; align-items: center; gap: 10px; }
.channel-list-page .cat-group-hd .app-tag { color: var(--cl-de); font-weight: 600; font-size: 11px; }
.channel-list-page .cat-group-hd .chevron { color: var(--cl-g5); font-size: 16px; transition: transform .2s; }
.channel-list-page .cat-group-hd.collapsed .chevron { transform: rotate(-90deg); }
.channel-list-page table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.channel-list-page .ch-row { border-bottom: 1px solid var(--cl-brd); transition: background .12s; cursor: default; }
.channel-list-page .ch-row:hover { background: rgba(255, 255, 255, .02); }
.channel-list-page .ch-row.de-row:hover { background: rgba(255, 204, 0, .02); }
.channel-list-page .ch-row td { padding: 12px 16px; vertical-align: middle; font-size: 13px; }
.channel-list-page .num { color: var(--cl-g5); width: 36px; text-align: center; font-size: 12px; }
.channel-list-page .logo-cell { width: 88px; }
.channel-list-page .logo-cell img {
	width: 72px;
	height: 28px;
	max-width: 100%;
	display: block;
	border-radius: 4px;
	opacity: .85;
	object-fit: contain;
	object-position: center;
}
.channel-list-page .name-cell { font-weight: 600; color: var(--cl-g2); overflow: hidden; text-overflow: ellipsis; }
.channel-list-page .cat-cell { color: var(--cl-g5); font-size: 12px; }
.channel-list-page .tags-cell { text-align: right; white-space: nowrap; }
.channel-list-page .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-left: 6px; }
.channel-list-page .tag-free { background: rgba(46, 204, 64, .12); color: var(--cl-green); border: 1px solid rgba(46, 204, 64, .15); }
.channel-list-page .tag-archive { background: rgba(255, 255, 255, .04); color: var(--cl-g3); border: 1px solid var(--cl-brd); }
.channel-list-page .tag-archive svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.channel-list-page .tag-app { background: rgba(255, 204, 0, .08); color: var(--cl-de); border: 1px solid rgba(255, 204, 0, .12); }
.channel-list-page .action { opacity: 1; transition: opacity .15s; font-size: 11px; color: var(--cl-g5); white-space: nowrap; }
.channel-list-page .ch-row:hover .action { opacity: 1; }
.channel-list-page .action-link {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}
.channel-list-page .play { color: var(--cl-green); }
.channel-list-page .login { color: var(--cl-red); }
.channel-list-page .app { color: var(--cl-de); }
.channel-list-page .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; }
.channel-list-page .overlay.show { display: flex; }
.channel-list-page .modal { background: var(--cl-bg2); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; max-width: 420px; width: 100%; padding: 32px; text-align: center; position: relative; }
.channel-list-page .modal-x { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 0; color: var(--cl-g5); cursor: pointer; }
.channel-list-page .modal-ch { display: flex; align-items: center; gap: 14px; background: var(--cl-card); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; text-align: left; }
.channel-list-page .modal-ch img {
	width: 72px;
	height: 32px;
	border-radius: 4px;
	object-fit: contain;
	object-position: center;
}
.channel-list-page .mname { font-size: 14px; font-weight: 700; }
.channel-list-page .mepg { font-size: 12px; color: var(--cl-g3); margin-top: 2px; }
.channel-list-page .modal h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.channel-list-page .modal > p { font-size: 13px; color: var(--cl-g3); line-height: 1.5; margin-bottom: 20px; }
.channel-list-page .modal-apps { display: flex; flex-direction: column; gap: 8px; }
.channel-list-page .abtn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--cl-card); border: 1px solid var(--cl-brd); border-radius: 10px; }
.channel-list-page .abtn:hover { background: var(--cl-card-h); }
.channel-list-page .abtn svg { width: 20px; height: 20px; stroke: var(--cl-g3); fill: none; stroke-width: 2; flex-shrink: 0; }
.channel-list-page .ainfo { flex: 1; text-align: left; }
.channel-list-page .aname { font-size: 13px; font-weight: 600; color: var(--cl-wh); }
.channel-list-page .adesc { font-size: 11px; color: var(--cl-g5); }
.channel-list-page .aarr { color: var(--cl-g5); font-size: 16px; }
.channel-list-page .legend { border-top: 1px solid var(--cl-brd); padding: 24px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.channel-list-page .legend-item { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--cl-g5); }

@media (max-width: 768px) {
	.channel-list-page { overflow-x: hidden; max-width: 100vw; }
	.channel-list-page *,
	.channel-list-page *::before,
	.channel-list-page *::after { box-sizing: border-box; }

	/* page header */
	.channel-list-page .page-hd { padding-top: 124px; padding-left: 0; padding-right: 0; }
	.channel-list-page .page-hd h1 { font-size: 22px; padding-left: 14px; }
	.channel-list-page .page-hd p { font-size: 12px; padding-left: 18px; }

	/* filter bar - sticky below fixed nav */
	.channel-list-page .filter-bar { padding: 10px 0; top: var(--landing-nav-h, 72px); }
	.channel-list-page .filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
	.channel-list-page .search-wrap { width: 100%; }

	/* hide pills, show select dropdown */
	.channel-list-page .cat-nav { display: none; }
	.channel-list-page .cat-wrap { display: none; }
	.channel-list-page .cat-select {
		display: block;
		width: 100%;
		padding: 10px 14px;
		background: var(--cl-card);
		border: 1px solid var(--cl-brd);
		border-radius: 8px;
		color: var(--cl-wh);
		font-size: 13px;
		font-weight: 600;
		outline: none;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a82' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 14px center;
	}
	.channel-list-page .cat-select:focus { border-color: rgba(229, 25, 42, .25); }
	.channel-list-page .cat-select option { background: var(--cl-bg2); color: var(--cl-wh); }
	.channel-list-page .result-count { padding-top: 8px; }

	/* category group header */
	.channel-list-page .cat-group-hd { padding: 10px 12px; gap: 8px; align-items: flex-start; }
	.channel-list-page .cat-group-hd h2 { font-size: 13px; min-width: 0; word-break: break-word; flex: 1; }
	.channel-list-page .cat-group-hd .meta { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; text-align: right; font-size: 11px; }

	/* table reset: force all table elements to block */
	.channel-list-page table,
	.channel-list-page tbody,
	.channel-list-page tr,
	.channel-list-page td { display: block; width: 100%; }
	.channel-list-page table { overflow: hidden; }

	/* hide columns not needed on mobile */
	.channel-list-page .num,
	.channel-list-page .cat-cell { display: none !important; }

	/* channel row grid */
	.channel-list-page .ch-row {
		display: grid !important;
		grid-template-columns: 50px minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"logo name"
			"logo tags";
		gap: 2px 10px;
		padding: 8px 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		border-bottom: 1px solid var(--cl-brd);
	}
	.channel-list-page .ch-row td {
		padding: 0;
		width: auto;
		min-width: 0;
		overflow: hidden;
	}

	/* logo */
	.channel-list-page .ch-row td.logo-cell {
		grid-area: logo;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.channel-list-page .logo-cell img { width: 44px; height: 22px; }

	/* channel name */
	.channel-list-page .ch-row td.name-cell {
		grid-area: name;
		display: block !important;
		align-self: center;
		font-size: 13px;
		font-weight: 600;
		word-break: break-word;
		overflow-wrap: anywhere;
		line-height: 1.3;
	}

	/* tags row */
	.channel-list-page .ch-row td.tags-cell {
		grid-area: tags;
		text-align: left;
		white-space: normal;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
	}
	.channel-list-page .tag { margin-left: 0; font-size: 9px; padding: 2px 6px; }
	.channel-list-page .tag-archive svg { width: 10px; height: 10px; }

	/* action text */
	.channel-list-page .action { white-space: normal; line-height: 1.3; font-size: 10px; }
	.channel-list-page .action-link { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

	/* modal */
	.channel-list-page .modal { padding: 24px 16px; max-width: calc(100vw - 32px); }

	/* legend */
	.channel-list-page .legend { padding: 20px 0 28px; gap: 12px; }
	.channel-list-page .legend-item { align-items: flex-start; font-size: 11px; gap: 8px; }
	.channel-list-page .legend-item .tag { flex-shrink: 0; }
}