:root {
	color-scheme: dark;
	--bg: #0e1014;
	--panel: #171a21;
	--panel-border: rgba(255, 255, 255, 0.08);
	--panel-strong: rgba(255, 255, 255, 0.18);
	--text: #f2f2f4;
	--muted: #9aa0ab;
	--accent: #e94560;
	--accent-dim: rgba(233, 69, 96, 0.15);
	--gold: #f5b942;
	--danger: #ff6b6b;
	--success: #2ecc9a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: inherit; }

/* Easter egg — see isAmy()/spawnDucks() in index.html */
.duck-easter-egg {
	position: fixed;
	bottom: -60px;
	z-index: 999;
	pointer-events: none;
	animation-name: duck-float-up;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

@keyframes duck-float-up {
	0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
	60% { opacity: 1; }
	100% { transform: translateY(-115vh) translateX(24px) rotate(12deg); opacity: 0; }
}

.site-watermark {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 8px;
	text-align: center;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	color: var(--muted);
	opacity: 0.6;
	pointer-events: none;
	z-index: 20;
}

/* ── Page wrappers ── */
.page { margin: 0 auto; padding: 40px 16px 60px; }
.page--narrow { max-width: 460px; }
.page--wide { max-width: 960px; }
.page[hidden] { display: none !important; }

.card {
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 20px;
	padding: 32px;
}

.panel-header { margin-bottom: 24px; }

.panel-header h1 {
	margin: 0;
	font-size: clamp(1.8rem, 6vw, 2.4rem);
	letter-spacing: -0.03em;
}

.subtitle { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* ── Buttons ── */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border-radius: 999px;
	border: none;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

.btn:hover { opacity: 0.88; }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--ghost { background: transparent; border: 1px solid var(--panel-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); opacity: 1; }

.btn-sm {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--panel-strong);
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.btn-sm:hover { background: rgba(255, 255, 255, 0.06); }
.btn-sm--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm--accent:hover { opacity: 0.88; }

/* ── Forms ── */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }

label {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted);
}

input[type="text"],
input[type="search"],
input[type="number"] {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--panel-strong);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	outline: none;
}

input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Errors ── */
.error-msg {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(255, 107, 107, 0.1);
	border: 1px solid rgba(255, 107, 107, 0.35);
	color: var(--danger);
	font-size: 0.88rem;
}
.error-msg[hidden] { display: none; }

.empty-state {
	color: var(--muted);
	font-style: italic;
	font-size: 0.9rem;
	text-align: center;
	padding: 30px 0;
}

/* ── App shell / tabs ── */
.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
}

.app-title { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; }

.logout-btn {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--panel-strong);
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}
.logout-btn:hover { background: rgba(255, 255, 255, 0.06); }

.tab-bar {
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--panel-border);
	overflow-x: auto;
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 5;
}

.tab-btn {
	padding: 10px 16px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Search results / poster grid ── */
.poster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}

.poster-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--panel-border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.poster-img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.06);
	display: block;
}

.poster-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.poster-title { font-size: 0.86rem; font-weight: 700; line-height: 1.3; }

.poster-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	color: var(--muted);
}

.type-badge {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.type-badge--movie { background: rgba(245, 185, 66, 0.18); color: var(--gold); }
.type-badge--tv { background: rgba(46, 204, 154, 0.18); color: var(--success); }

/* Public TMDB score — deliberately neutral (grey, labelled) so it reads as "everyone's"
   score, distinct from your own accent-coloured stars in .my-rating-badge. */
.rating-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: inherit;
}
.rating-src { color: var(--muted); }
.rating-badge--lg { font-size: 0.82rem; padding: 4px 10px; }

/* Your own 1-5 stars: accent colour, filled + empty stars, no pill */
.my-rating-badge {
	display: inline-flex;
	color: var(--accent);
	font-size: 0.8rem;
	letter-spacing: 1px;
	line-height: 1;
}
.my-rating-empty { color: rgba(255, 255, 255, 0.18); }

.poster-ratings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Card tag row (type + Series ended): pills sized to their text, left-aligned, so they
   line up with the ratings row below instead of stretching across the card. */
.poster-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.poster-tags .status-badge { margin-left: 0; }
.poster-tags > span, .poster-ratings .rating-badge { line-height: 1.5; }

.added-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--panel-strong);
	color: var(--muted);
	cursor: pointer;
}
.added-badge:hover { border-color: var(--danger); color: var(--danger); }

.status-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--muted);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.provider-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(46, 204, 154, 0.15);
	color: var(--success);
	font-size: 0.7rem;
	font-weight: 800;
}
.provider-badge--paid { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

.poster-card .btn-sm { margin-top: auto; }

.entry-poster-card { cursor: pointer; }
.entry-poster-card:hover { border-color: var(--panel-strong); }
.entry-poster-card .progress-bar,
.entry-poster-card .progress-label { margin-top: 2px; }

.entry-title { font-size: 1rem; font-weight: 700; }
.entry-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.entry-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Filter bar ── */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.filter-btn {
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--panel-strong);
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}
.filter-btn:hover { background: rgba(255, 255, 255, 0.06); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.filter-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 6px 30px 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--panel-strong);
	background-color: var(--panel);
	/* Custom chevron, inset from the edge — the native arrow browsers draw
	   sits right against the box edge, which crowds the fully-rounded pill
	   corner and looks off. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239aa0ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	color: var(--text);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--accent); }

/* Same look as the plain text/search inputs elsewhere (e.g. the Search tab's
   box) — not the rounded-pill style used for the filter buttons/selects next
   to it, which reads as oversized once stretched full-width on mobile. */
input.filter-search-input {
	flex: 1 1 160px;
	min-width: 120px;
	width: auto;
}

.toggle-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
	position: relative;
	width: 34px;
	height: 20px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid var(--panel-strong);
	border-radius: 999px;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}
.toggle-slider::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--muted);
	transition: transform 0.15s, background 0.15s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent-dim); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); background: var(--accent); }
.toggle-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ── Entry detail modal ── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 50;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 20px;
	padding: 28px;
}

.modal-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
}
.modal-close:hover { color: var(--text); }

.modal-header { display: flex; gap: 16px; margin-bottom: 16px; padding-right: 40px; }

.entry-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; min-height: 22px; }
.time-remaining { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.info-updated { font-size: 0.72rem; color: var(--muted); }

.modal-poster {
	width: 110px;
	flex-shrink: 0;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.progress-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.progress-bar-fill { height: 100%; background: var(--accent); }

.progress-label { font-size: 0.72rem; color: var(--muted); }

/* Stars */
.stars { display: flex; gap: 0; margin: 0 -6px; }
.star {
	font-size: 1.2rem;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.2);
	background: none;
	border: none;
	padding: 8px 6px;
	line-height: 1;
}
.star.filled { color: var(--accent); } /* matches .my-rating-badge — accent = your rating */
.stars-label { margin-top: 12px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }

textarea.notes-input {
	width: 100%;
	min-height: 50px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--panel-strong);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-family: inherit;
	font-size: 0.85rem;
	resize: vertical;
}

/* Episodes */
.episode-toggle {
	background: none;
	border: none;
	color: var(--accent);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

.season-group { margin-top: 8px; border-top: 1px solid var(--panel-border); padding-top: 8px; }

.season-header {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 4px 0;
}

.season-toggle-icon { color: var(--muted); font-size: 0.7rem; flex-shrink: 0; }

.season-title {
	flex: 1;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--muted);
}

.season-count { text-transform: none; letter-spacing: 0; font-weight: 700; }

.season-episodes { padding: 4px 0 6px 20px; }

.episode-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-size: 0.82rem;
}

.episode-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.episode-row.watched .episode-name { color: var(--muted); text-decoration: line-through; }
.episode-num { color: var(--muted); flex-shrink: 0; width: 26px; }

/* Stats */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.stat-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--panel-border);
	border-top: 2px solid var(--accent);
	border-radius: 16px;
	padding: 20px;
	text-align: center;
}

.stat-value {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text);
	margin-bottom: 6px;
}

.stat-label {
	font-size: 0.78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.stat-card--highlight { border-top-color: var(--gold); }
.stat-highlight-poster {
	width: 64px;
	margin: 0 auto 10px;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
}

/* Upcoming */
.upcoming-list { display: flex; flex-direction: column; gap: 10px; }

.upcoming-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--panel-border);
	border-radius: 12px;
}

.upcoming-date {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--gold);
	white-space: nowrap;
}

.upcoming-title { font-weight: 700; font-size: 0.9rem; }
.upcoming-detail { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 560px) {
	.page { padding: 24px 12px 40px; }
	.card { padding: 22px 16px; }
	.modal-header { flex-direction: column; }
	.modal-poster { width: 100%; max-width: 160px; }
	.modal-box { padding: 20px; max-height: 90vh; }

	.poster-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

	/* Evenly fill the tab bar instead of relying on horizontal scroll */
	.tab-bar { gap: 0; }
	.tab-btn { flex: 1; padding: 10px 4px; font-size: 0.78rem; text-align: center; }

	/* Bigger touch targets (~40px+) for anything meant to be tapped */
	.btn-sm { padding: 10px 14px; min-height: 40px; }
	.filter-btn { padding: 9px 14px; min-height: 40px; }
	.logout-btn { padding: 9px 14px; min-height: 40px; }

	.filter-bar { gap: 8px; }
	.filter-select {
		padding: 9px 30px 9px 14px;
		min-height: 40px;
		font-size: 16px; /* avoid iOS auto-zoom on focus */
	}

	/* Watchlist/Watched have 4 selects (+ a toggle) in one bar — cramming them side by
	   side shrinks each to a sliver too narrow to show its selected label. Stack them
	   full-width instead so you can actually read "Recently added" / "All platforms"
	   without having to open the dropdown first. */
	[data-filter-group="watchlist"],
	[data-filter-group="watched"] {
		flex-direction: column;
		align-items: stretch;
	}
	[data-filter-group="watchlist"] .filter-select,
	[data-filter-group="watched"] .filter-select,
	[data-filter-group="watchlist"] .filter-search-input,
	[data-filter-group="watched"] .filter-search-input {
		width: 100%;
		min-height: 40px;
		font-size: 16px; /* avoid iOS auto-zoom on focus */
	}
	/* .filter-search-input's desktop sizing (flex: 1 1 160px) is a *row* basis —
	   160px of width, plus room to grow. Once the bar above switches to
	   flex-direction: column on mobile, that same shorthand sets a 160px
	   *height* basis instead (flex-basis applies along the main axis, which is
	   now vertical), so the box still rendered ~4x taller than the 40px pills
	   next to it even after grow was neutralized. Reset the whole shorthand. */
	[data-filter-group="watchlist"] .filter-search-input,
	[data-filter-group="watched"] .filter-search-input {
		flex: 0 1 auto;
	}
	[data-filter-group="watchlist"] .toggle-switch,
	.filter-reset-btn {
		align-self: flex-start;
	}

	textarea.notes-input { font-size: 16px; } /* avoid iOS auto-zoom on focus */

	.episode-row { padding: 9px 0; }
	.season-header { padding: 8px 0; }
}