:root {
	--bg-color: #1c1c1c;
	--card-bg: linear-gradient(145deg,#1a1a1a 0%,#2d2d2d 100%);
	--accent-color: gold;
	--text-primary: #fff;
	--text-secondary: #a0a0a0
}

.history-container {
	min-height: 100vh;
	background: var(--bg-color);
	font-family: 'Segoe UI',Arial,sans-serif
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 10px
}

.history-title {
	color: var(--text-primary);
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 2px 4px rgb(0 0 0/.5)
}

.search-container {
	width: 30%;
	margin: 20px auto 20px
}

.search-input {
	width: 100%;
	padding: 8px 15px;
	border-radius: 25px;
	border: none;
	background: rgb(255 255 255/.1);
	color: var(--text-primary);
	font-size: 14px;
	transition: all .3s ease;
	outline: none
}

.search-input:focus {
	background: rgb(255 255 255/.2);
	box-shadow: 0 0 5px rgb(255 215 0/.5)
}

.clear-history {
	background: rgb(255 255 255/.1);
	color: var(--text-primary);
	padding: 8px 20px;
	border-radius: 25px;
	text-decoration: none;
	font-size: 14px;
	transition: all .3s ease;
	display: flex;
	align-items: center;
	gap: 5px
}

.clear-history:hover {
	background: var(--btn-bg-color);
	color: #fff;
}

.clear-history i {
	font-size: 14px
}

.history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
	gap: 10px;
	max-width: 920px;
	margin: 0 auto
}

.history-card {
	background: var(--card-bg);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: transform .3s ease,box-shadow .3s ease;
	padding: 15px
}

.history-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgb(0 0 0/.4)
}

.history-content {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--text-primary);
	gap: 15px
}

.history-thumbnail {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #000
}

.history-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease
}

.history-card:hover .history-thumbnail img {
	transform: scale(1.1)
}

.history-info {
	flex: 1;
	min-width: 0
}

.history-info-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--text-primary);
	white-space: normal;
	line-height: 1.2;
	max-width: 100%;
	word-wrap: break-word
}

.history-info-episode {
	font-size: 13px;
	color: var(--text-color);
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 600
}

.history-info-episode i {
	font-size: 12px
}

.history-info-time {
	font-size: 12px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 5px
}

.history-info-time i {
	font-size: 12px
}

.delete-history {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	background: rgb(0 0 0/.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .3s ease
}

.delete-history:hover {
	background: #dc2626;
	transform: rotate(90deg)
}

.delete-history i {
	font-size: 14px;
	color: #fff
}

.alert-box {
	background: rgb(220 38 38/.1);
	color: #fecaca;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px
}

.alert-box a {
	color: var(--accent-color);
	font-weight: 600;
	text-decoration: none
}

.alert-box a:hover {
	text-decoration: underline
}

.custom-confirm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0/.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.custom-confirm-modal {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 25px;
	width: 90%;
	max-width: 450px;
	box-shadow: 0 15px 30px rgb(0 0 0/.5);
	text-align: center;
	position: relative
}

.custom-confirm-title {
	color: var(--text-primary);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px
}

.custom-confirm-text {
	color: var(--text-secondary);
	font-size: 16px;
	margin-bottom: 25px;
	line-height: 1.5
}

.custom-confirm-actions {
	display: flex;
	justify-content: center;
	gap: 15px
}

.custom-confirm-confirm,.custom-confirm-cancel {
	padding: 10px 25px;
	border-radius: 25px;
	border: none;
	font-size: 16px;
	cursor: pointer;
	transition: all .3s ease;
	min-width: 100px
}

.custom-confirm-confirm {
	background: #dc2626;
	color: #fff;
	font-weight: 600;
	border: 1px solid #dc2626;
	box-shadow: 0 2px 5px rgb(220 38 38/.3)
}

.custom-confirm-confirm:hover {
	background: #b00010;
	border-color: #b00010;
	box-shadow: 0 4px 10px rgb(176 0 16/.5)
}

.custom-confirm-cancel {
	background: rgb(255 255 255/.1);
	color: var(--text-primary);
	font-weight: 500;
	border: 1px solid rgb(255 255 255/.2)
}

.custom-confirm-cancel:hover {
	background: rgb(255 255 255/.2);
	border-color: rgb(255 255 255/.3)
}

@media (max-width: 1024px) {
	.history-grid {
		grid-template-columns:1fr
	}

	.history-content {
		flex-direction: row;
		align-items: center
	}

	.history-thumbnail {
		width: 100px;
		height: 100px;
		margin-right: 15px;
		margin-bottom: 0
	}

	.history-info {
		width: auto
	}

	.history-info-title {
		font-size: 16px;
		margin-bottom: 8px
	}

	.history-card {
		padding: 15px
	}
}

@media (max-width: 767px) {
	.history-grid {
		max-width:100%;
		margin: 0 auto
	}

	.history-content {
		flex-direction: row;
		align-items: center
	}

	.history-thumbnail {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		margin-bottom: 0
	}

	.history-info {
		width: auto
	}

	.history-info-title {
		font-size: 14px;
		margin-bottom: 8px
	}

	.history-card {
		padding: 10px
	}

	.custom-confirm-modal {
		width:85%;
		padding: 15px;
		max-width: 350px
	}

	.custom-confirm-title {
		font-size: 18px
	}

	.custom-confirm-text {
		font-size: 14px
	}

	.custom-confirm-confirm,.custom-confirm-cancel {
		padding: 8px 20px;
		font-size: 14px;
		min-width: 90px
	}

	.custom-confirm-actions {
		gap: 10px
	}

	.search-container {
		width: 100%;
		margin: 10px auto 20px
	}
}

@media (max-width: 480px) {
	.history-title {
		font-size:24px
	}

	.clear-history {
		text-align: center;
		font-size: 13px;
		padding: 8px 16px;
	}
}

.load-more {
	padding: 10px 25px;
	border-radius: 25px;
	border: none;
	font-size: 16px;
	cursor: pointer;
	transition: all .3s ease;
	background: rgba(255,255,255,.1);
	color: var(--text-primary);
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	min-width: 120px;
	display: inline-block
}

.load-more:hover {
	background: var(--accent-color);
	color: #000;
	box-shadow: 0 4px 10px rgba(255,215,0,.5)
}

@media(max-width: 767px) {
	.load-more {
		padding:8px 20px;
		font-size: 14px;
		min-width: 100px
	}
}