.ak-player-overlay {
	position: fixed;
	inset: 0;
	z-index: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(4px);
}

.ak-player-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.ak-player-close:hover {
	background: rgba(217, 42, 61, 0.8);
	color: #fff;
}

.ak-player-frame {
	width: 100%;
	max-width: 1200px;
	height: 100%;
	max-height: 90vh;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: var(--radius-sm);
	background: #000;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.an-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 8px;
	background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 50%);
	opacity: 0;
	transition: opacity var(--ease);
	border-radius: var(--radius-sm);
}

.an-card:hover .an-card-overlay {
	opacity: 1;
}

.an-card-sub {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 0.72rem;
	color: rgba(255,255,255,0.8);
}

.an-grid-skeleton {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	padding: 20px;
}

.an-grid-skeleton::before {
	content: "";
	grid-column: 1 / -1;
	height: 200px;
	background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
	background-size: 200% 100%;
	animation: an-shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}

.an-detail-skeleton {
	height: 300px;
	background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
	background-size: 200% 100%;
	animation: an-shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}

@keyframes an-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.an-season-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px 12px;
}

.an-season-btn {
	min-width: 38px;
	padding: 6px 12px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--text-dim);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--ease);
}

.an-season-btn:hover {
	color: var(--text);
	border-color: var(--accent);
}

.an-season-btn.active {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

.an-episode-btn-wide {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 8px 14px;
	text-align: left;
}

.an-ep-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--accent);
}

.an-ep-title {
	font-size: 0.82rem;
	color: var(--text-dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mv-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 16px 20px 20px;
}

.mv-play-btn {
	background: #d92a3d;
}

.mv-play-btn:hover {
	background: #b8202f;
}

.mv-hero-play {
	background: #fff;
	color: #000;
}

.mv-hero-play:hover {
	background: rgba(255, 255, 255, 0.85);
}

.mv-hero-info-btn {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.mv-hero-info-btn:hover {
	background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 760px) {
	#os-taskbar {
		gap: 3px;
		padding: 5px 7px;
	}

	.os-taskbar-clock {
		display: none;
	}

	.os-start-menu {
		width: 94vw;
	}
}

.an-watch,
.mv-watch {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #000;
	color: #f2f2f2;
}

.aw-head {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	background: #0d0d0e;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aw-back {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	font-family: inherit;
	font-size: 0.78rem;
	color: #cfcfcf;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	cursor: pointer;
	transition: background var(--ease), color var(--ease);
}

.aw-back:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.aw-head-title {
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 600;
	color: #a8a8a8;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aw-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.mw-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.aw-player-col {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	overflow-y: auto;
}

.aw-player-wrap {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.aw-player-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.aw-info {
	padding: 18px 22px 30px;
}

.mw-info {
	max-width: 860px;
}

.aw-title {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

.aw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.aw-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	font-family: inherit;
	font-size: 0.76rem;
	font-weight: 600;
	color: #d6d6d6;
	text-decoration: none;
	background: #17171a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.aw-action-btn:hover {
	color: #fff;
	background: #232327;
	border-color: rgba(255, 255, 255, 0.16);
}

.aw-action-btn.copied {
	color: var(--accent);
	border-color: var(--accent-line);
}

.aw-desc {
	max-width: 780px;
	margin: 0;
	overflow: hidden;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #b3b3b3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.aw-desc.expanded {
	-webkit-line-clamp: unset;
}

.aw-desc-more {
	padding: 0;
	margin-top: 4px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--accent);
	background: none;
	border: none;
	cursor: pointer;
}

.aw-modebox {
	max-width: 780px;
	margin-top: 20px;
	padding: 14px 16px;
	background: #111113;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-sm);
}

.aw-mode-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aw-mode-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: #c2c2c2;
	background: #1c1c20;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--ease), color var(--ease);
}

.aw-mode-btn:hover {
	color: #fff;
	background: #26262b;
}

.aw-mode-btn.active {
	color: var(--accent-contrast);
	background: var(--accent);
	border-color: var(--accent);
}

.aw-mode-note {
	margin: 10px 0 0;
	font-size: 0.74rem;
	color: var(--text-faint);
}

.aw-server-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.aw-server-btn {
	padding: 7px 13px;
	font-family: inherit;
	font-size: 0.76rem;
	color: #b3b3b3;
	background: #17171a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	cursor: pointer;
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.aw-server-btn:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}

.aw-server-btn.active {
	color: var(--accent-contrast);
	background: var(--accent);
	border-color: var(--accent);
}

.aw-episodes-col {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 340px;
	min-height: 0;
	background: #0a0a0b;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.aw-ep-head {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 14px 14px 10px;
}

.aw-ep-head h3 {
	flex: 1;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}

.aw-ep-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #9a9a9a;
	background: none;
	border: none;
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--ease), color var(--ease);
}

.aw-ep-icon-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.aw-ep-icon-btn.active {
	color: var(--accent);
}

.aw-ep-search-wrap {
	position: relative;
	flex-shrink: 0;
	padding: 0 14px 10px;
}

.aw-ep-search-wrap svg {
	position: absolute;
	top: 50%;
	left: 24px;
	color: #6b6b6b;
	transform: translateY(-50%);
	pointer-events: none;
}

.aw-ep-search {
	width: 100%;
	padding: 8px 12px 8px 32px;
	font-family: inherit;
	font-size: 0.8rem;
	color: #f2f2f2;
	background: #17171a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-xs);
	outline: none;
}

.aw-ep-search:focus {
	border-color: var(--accent-line);
}

.aw-ep-list {
	flex: 1;
	min-height: 0;
	padding: 4px 10px 14px;
	overflow-y: auto;
}

.aw-ep-row {
	display: flex;
	width: 100%;
	gap: 10px;
	padding: 8px;
	margin-bottom: 4px;
	text-align: left;
	background: none;
	border: none;
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--ease);
}

.aw-ep-row:hover {
	background: rgba(255, 255, 255, 0.05);
}

.aw-ep-row.active {
	background: rgba(180, 150, 220, 0.1);
}

.aw-ep-thumb {
	position: relative;
	flex-shrink: 0;
	width: 92px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #1a1a1c;
	border-radius: 5px;
}

.aw-ep-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aw-ep-thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
}

.aw-ep-row:not(.active) .aw-ep-thumb-play {
	display: none;
}

.aw-ep-badges {
	position: absolute;
	top: 3px;
	right: 3px;
	display: flex;
	gap: 3px;
}

.aw-ep-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 3px;
}

.aw-ep-badge svg {
	width: 10px;
	height: 10px;
}

.aw-ep-meta {
	flex: 1;
	min-width: 0;
}

.aw-ep-title-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #fff;
}

.aw-ep-row.active .aw-ep-title-row {
	color: var(--accent);
}

.aw-ep-desc {
	display: -webkit-box;
	margin-top: 3px;
	overflow: hidden;
	font-size: 0.72rem;
	line-height: 1.45;
	color: #8c8c8c;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.aw-ep-empty {
	padding: 30px 12px;
	font-size: 0.8rem;
	color: var(--text-faint);
	text-align: center;
}

@container (max-width: 760px) {
	.aw-body {
		flex-direction: column;
	}

	.aw-episodes-col {
		width: 100%;
		max-height: 280px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		border-left: none;
	}
}