:root{
	--bg:#0e1420;
	--panel:#111827;
	--panel2:#0f172a;
	--text:#e5e7eb;
	--muted:#9ca3af;
	--border:#ffffff14;
	--accent:#22c55e;
	--accent2:#38bdf8;
	--shadow:0 10px 30px #00000059;
	--r:6px;
	--gap:16px;
	--gap2:12px;
	--font:Calibri,'Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box}
html{
	min-height:100%;
	background:
		radial-gradient(ellipse 2400px 100% at -10% 0%, #3b82f655, transparent 50%),
		radial-gradient(ellipse 2400px 100% at 110% 0%, #3b82f655, transparent 50%),
		radial-gradient(ellipse 2400px 100% at -10% 100%, #3b82f655, transparent 50%),
		radial-gradient(ellipse 2400px 100% at 110% 100%, #3b82f655, transparent 50%),
		linear-gradient(180deg, #04060f 0%, #020408 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
body{
	margin:0;
	color:#e9eef5;
	font-family:var(--font);
}

a{
	color:inherit;
	text-decoration:none
}
button,input,select{
	font:inherit
}
.container{
	margin:0 auto;
	padding:24px 24px 80px;
}

.layout{
	display:grid;
	grid-template-columns:320px 1fr;
	gap:var(--gap);
	margin-top:18px;
	align-items:start;
}

.panel{
	background:#111827;
	border-radius:var(--r);
	overflow:hidden;
}

.panel-header{
	padding:16px 16px 10px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	border-bottom:1px solid var(--border);
}

.panel-title{
	letter-spacing:.2px;
}

.panel-body{padding:14px 16px 16px}

.field{margin-bottom:14px}

.label{
	font-size:12px;
	letter-spacing:.25px;
	color:rgba(229,231,235,.70);
	margin:0 0 8px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.label small{color:#9ca3afd9}

.control{
	width:100%;
	border: none;
	background:#1118278c;
	color:var(--text);
	padding:10px 12px;
	outline:none;
	transition:.15s ease;
}

.control:focus{
	border-color:#38bdf88c;
	box-shadow:0 0 0 4px #38bdf81a;
}

.range{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.segmented {
	display: flex;
	gap: 4px;
}
.segmented label {
	cursor: pointer;
}
.segmented input[type="radio"] {
	display: none;
}
.segmented span {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	color: #64748b;
	font-size: 13px;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
}
.segmented input:checked + span {
	background: #137e3b;
	color: #fff;
}
.segmented label:hover input:not(:checked) + span {
	color: #94a3b8;
}

.genre-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}


.check.mobile
 {
    padding: 10px 10px;
}

.check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	cursor: pointer;
	user-select: none;
}
.check input[type="checkbox"] {
	display: none;
}
.check span {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #cbd5e1;
	font-size: 14px;
	line-height: 1;
}
.check span::before {
	content: '';
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 2px solid #3a4a6b;
	border-radius: 5px;
	background: #0f172a;
	transition: border-color 0.15s, background 0.15s;
	position: relative;
	box-sizing: border-box;
}
.check input:checked + span::before {
	background: #137e3b;
	border-color: #137e3b;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.check:hover span::before {
	border-color: #137e3b;
}

.actions{
	display:flex;
	gap:10px;
	margin-top:14px;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border-radius:12px;
	padding:10px 12px;
	cursor:pointer;
	border:1px solid var(--border);
	background:#1118278c;
	color:var(--text);
	transition:.15s ease;
	width:100%;
}

.btn:hover{border-color:#ffffff24}

.btn.primary{
	border-color:#22c55e8c;
	background:#22c55e1f;
}

.btn.primary:hover{background:#22c55e2e}
.btn.ghost{color:#e5e7ebd9}

.main-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}

.headline{margin:0;font-size:20px;letter-spacing:.2px}
.subline{margin:6px 0 0;color:#9ca3afe6;font-size:13px}

.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
	gap:var(--gap);
}



.card{
	border-radius:20px 0 0 0;
	border:1px solid rgba(255,255,255,0.04);
	border-top:1px solid rgba(255,255,255,0.3);
	background:#11182799;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-height:100%;
	position:relative;
	transition:transform .15s ease,border-color .15s ease;
}
.card:hover .poster_genres{
	display:inline-flex;
}

.card.serial::before,
.card.movie::before{
	content:'';
	position:absolute;
	top:-1px;
	left:0;
	width:80px;
	height:80px;
	border-radius:20px 0 0 0;
	border-top:3px solid;
	border-left:3px solid;
	border-right:none;
	border-bottom:none;
	-webkit-mask-image:radial-gradient(circle at top left, black 10%, transparent 60%);
	mask-image:radial-gradient(circle at top left, black 10%, transparent 60%);
	z-index:3;
	pointer-events:none;
}
.card.serial::before{border-color:#1be465}
.card.movie::before{border-color:#0af}

.card.serial::after,
.card.movie::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:80px;
	height:80px;
	border-radius:20px 0 0 0;
	pointer-events:none;
	z-index:2;
}
.card.serial::after{background:radial-gradient(ellipse at top left, #1be46540 0%, transparent 70%)}
.card.movie::after{background:radial-gradient(ellipse at top left, #00aaff55 0%, transparent 70%)}



.card_link{cursor:pointer}

.poster{
	aspect-ratio:2/3;
	position:relative;
	background:
		linear-gradient(180deg,#ffffff0f,#ffffff05);
	background-size:cover;
	background-position:center;
}

.poster_shade{
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg,#0000008c 0%,#0000001a 40%,#000000c7 100%);
	pointer-events:none;
}

.poster_top{
	position:absolute;
	left:10px;
	right:0;
	top:10px;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
	z-index:5;
}

.poster_stats{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	max-width:78%;
}

.poster_year{display:flex;justify-content:flex-end;flex:0 0 auto}

.tag{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:4px 5px;
	border-radius:999px;
	background:#0f172acc;
	font-size:12px;
	line-height:1;
}
.tag_stat{display:inline-block}

.tag i{
	opacity:.92;
	font-size:12px;
}

.tag b{font-weight:400}
.likes{color:#4ade80;vertical-align:middle;margin-right:3px}
.dislikes{color:#f87171;vertical-align:middle}
.rating_label{opacity:.6;font-size:10px;margin-right:2px}

.tag_year{
	background:#0b0f16b8;
	border-color:#ffffff29;
	border-radius:999px 0 0 999px;
}

.poster_genres{
	position:absolute;
	left:10px;
	right:10px;
	bottom:20px;

	display:flex;
	flex-direction:row-reverse; 
	flex-wrap: wrap-reverse;
	align-content:stretch;

	gap:7px 8px;
	column-gap:8px;
	row-gap:7px;
	max-height:140px;

	display: none;
}

.tag_genre{
	background-color:#137e3bcc;
	color:#fff;
	width:max-content;
}

.poster_cta{
	position:absolute;
	left:10px;
	right:10px;
	bottom:10px;
	display:flex;
	justify-content:center;
	z-index:2;
	pointer-events:none;
}

.card-body{
	padding:10px 12px 12px;
	display:flex;
	flex-direction:column;
	gap:0;
}

.title{
	font-weight:400;
	line-height:1.2;
	font-size:14px;
	margin:0;
}

/* ========================= */

.pagination_wrap{
	display:flex;
	justify-content:center;
	margin-top:18px;
}

.pagination{
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
}

.page_num,
.page_btn{
	min-width:36px;
	height:36px;
	padding:0 10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	line-height:1;
	text-decoration:none;
	border-radius:10px;
	border:1px solid #ffffff1f;
	background:#11182799;
	color:#e5e7eb;
	transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.page_num:hover,
.page_btn:hover{
	background:#6366f126;
	border-color:#6366f180;
	color:#fff;
}

.page_num.active{
	background:linear-gradient(135deg,#6366f1,#8b5cf6);
	border-color:transparent;
	color:#fff;
	font-weight:700;
	cursor:default;
}

.page_btn.disabled{
	opacity:.35;
	cursor:default;
	pointer-events:none;
}

.page_dots{
	padding:0 6px;
	font-size:14px;
	color:#9ca3af;
	user-select:none;
}

.panel_desktop{display:block}

.mobile-controls{
	display:none;
	gap:10px;
	margin:12px 0 14px;
}

.drawer{display:none}
.filters_toggle:checked ~ main .drawer{display:block}

.drawer-backdrop{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.55);
	z-index:60;
}

.drawer-panel{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:61;
	max-height:86vh;
	overflow:auto;
	background:#0b0f16eb;
	border-top:1px solid #ffffff1f;
	border-top-left-radius:18px;
	border-top-right-radius:18px;
	padding:10px 12px 14px;
}

.drawer-handle{
	width:54px;
	height:5px;
	border-radius:999px;
	background:#ffffff2e;
	margin:6px auto 10px;
}

.drawer-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:6px 4px 10px;
	border-bottom:1px solid #ffffff1a;
}

.drawer-close{
	cursor:pointer;
	width:36px;
	height:36px;
	border-radius:12px;
	display:grid;
	place-items:center;
	border:1px solid #ffffff1f;
	background:#1118278c;
}

.drawer-body{padding:10px 4px 6px}

.mgroup{
	border:1px solid #ffffff1a;
	background:#11182759;
	border-radius:14px;
	padding:8px 10px;
	margin-bottom:10px;
	overflow:hidden;
}

.mgroup>summary{
	display:flex;
	flex-direction:column;
	gap:2px;
}

.mgroup>summary small{
	opacity:.75;
	font-size:12px;
}

.mgroup>summary::-webkit-details-marker{display:none}
.mgroup>summary::after{opacity:.75;font-size:14px}

.mgroup-body{margin-top:10px}

.drawer-actions{
	position:sticky;
	bottom:0;
	padding:10px 0 0;
	background:linear-gradient(180deg,#0b0f1600,#0b0f16eb 35%,#0b0f16f5);
	display:flex;
	gap:10px;
}

.drawer-actions .btn{width:100%}

@media (max-width:900px){
	.layout{grid-template-columns:1fr}
	.panel_desktop{display:none}
	.mobile-controls{display:flex}
}

@media (max-width:520px){
	.grid{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
		gap:12px;
	}

	.card-body{padding:9px 10px 10px}
	.title{font-size:13px}

	.poster{aspect-ratio:3/4}

	.tag{
		font-size:11px;
		padding:5px 8px;
	}

	.tag i{font-size:11px}

	.poster_stats{max-width:80%}
	.poster_genres{
		bottom:60px;
		max-height:120px;
		gap:6px 7px;
	}
	.cta_btn{
		min-height:40px;
		border-radius:12px;
	}
}


@media (max-width:480px){
	.page_num,
	.page_btn{
		min-width:32px;
		height:32px;
		font-size:13px;
		border-radius:8px;
	}
}

@media (max-width:360px){
	.grid{gap:10px}
	.poster{aspect-ratio:1/1.35}
	.title{font-size:12.5px}
}