:root {
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:#1f2937;
	line-height:1.45;
	--brand-teal:#be123c;
	--brand-teal-hover:#e11d48;
	--brand-cyan:#f59e0b;
	--brand-violet:#7f1d1d;
	--accent:#f59e0b;
	--gradient-primary:linear-gradient(135deg,#be123c,#f59e0b);
	--gradient-topbar:linear-gradient(115deg,#0f172a,#7f1d1d 55%,#f59e0b 130%);
	--radius-sm:.6rem;
	--radius-md:.9rem;
	--radius-lg:1.3rem;
	--shadow-sm:0 1px 3px rgba(15,23,42,.09);
	--shadow-md:0 10px 24px rgba(190,18,60,.18);
	--shadow-lift:0 16px 36px rgba(190,18,60,.26);
	--ease:cubic-bezier(.22,.8,.32,1)
}
* {
	box-sizing:border-box
}
.visually-hidden {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
}
body {
	margin:0;
	min-height:100vh;
	min-height:100dvh;
	background-color:#f3f4f6;
	/* Same session-cached random photo as the login screen (see BackgroundImageController): it is now
	   picked once per session and served with a long browser cache lifetime, so reusing it here costs no
	   extra download - just a tinted overlay so text stays readable on top of it. */
	background-image:linear-gradient(rgba(243,244,246,.55),rgba(243,244,246,.55)),url('/backgrounds/random');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:#1f2937;
	position:relative;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased
}
.theme-dark {
	background-color:#0f172a;
	background-image:linear-gradient(rgba(15,23,42,.6),rgba(15,23,42,.6)),url('/backgrounds/random')
}
a {
	color:var(--brand-teal);
	text-decoration:none
}
a:hover {
	text-decoration:underline
}
.topbar {
	background:var(--gradient-topbar);
	background-size:180% 180%;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:.8rem max(1rem,calc((100vw - 1200px)/2));
	position:sticky;
	top:0;
	z-index:5;
	border-bottom:7px solid;
	border-image:repeating-linear-gradient(90deg,#000 0 9px,#fbbf24 9px 13px,#000 13px 22px) 7
}
.brand {
	color:#fff;
	font-weight:800;
	font-size:1.25rem;
	letter-spacing:-.01em
}
.nav-toggle {
	display:none
}
.navlinks-toggle {
	display:none
}
.navlinks {
	display:flex;
	align-items:center;
	gap:.9rem
}
.navlinks>a,.navdrop>summary,.linkbutton {
	color:#fff;
	position:relative
}
.navlinks>a {
	padding:.2rem 0
}
.navlinks>a::after {
	content:"";
	position:absolute;
	left:0;
	right:100%;
	bottom:-2px;
	height:2px;
	background:var(--brand-cyan);
	transition:right .18s var(--ease)
}
.navlinks>a:hover {
	text-decoration:none
}
.navlinks>a:hover::after {
	right:0
}
.linkbutton {
	background:none;
	border:0;
	padding:0;
	font:inherit;
	cursor:pointer
}
.navdrop {
	position:relative
}
.navdrop summary,.sizedrop summary,.ratingdrop summary,.subcollection-movies summary {
	cursor:pointer
}
.navdrop>div,.sizedrop>div {
	position:absolute;
	background:#fff;
	color:#111827;
	border:1px solid #d1d5db;
	border-radius:.5rem;
	box-shadow:0 10px 25px #0002;
	padding:.4rem;
	min-width:190px;
	display:grid;
	z-index:10
}
.navdrop a,.sizedrop a {
	padding:.45rem .65rem
}
.container {
	max-width:1200px;
	margin:0 auto;
	padding:1rem
}
.pagehead {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin:1rem 0
}
.backlink {
	display:inline-block;
	margin-top:1rem;
	font-weight:700
}
.pagehead h1,.login-brand h1 {
	margin:0;
	background:var(--gradient-primary);
	-webkit-background-clip:text;
	background-clip:text;
	color:#be123c;
	color:transparent;
	letter-spacing:-.02em;
	filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))
}
.pagehead p {
	margin:.3rem 0;
	color:#6b7280
}
.breadcrumb {
	font-size:.85rem
}
.subcollection-panel {
	margin:1rem 0;
	background:rgba(255,255,255,.3)
}
.bubble {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:1.6rem;
	height:1.6rem;
	padding:0 .5rem;
	margin-left:.4rem;
	border-radius:999px;
	background:var(--gradient-primary);
	color:#fff;
	font-weight:700;
	font-size:.85rem;
	line-height:1;
	box-shadow:var(--shadow-sm)
}
.bubble-line {
	display:inline-flex;
	align-items:center;
	gap:.3rem;
	background:var(--gradient-primary);
	color:#fff;
	font-weight:600;
	padding:.4rem 1rem;
	border-radius:999px;
	box-shadow:var(--shadow-sm)
}
.bubble-line .bubble {
	background:rgba(255,255,255,.3);
	margin-left:0
}
.panel {
	background:rgba(255,255,255,.4);
	backdrop-filter:blur(1.5px);
	-webkit-backdrop-filter:blur(1.5px);
	border:1px solid rgba(229,231,235,.7);
	border-radius:var(--radius-lg);
	padding:1rem;
	margin:1rem 0;
	box-shadow:var(--shadow-sm)
}
.panel h2 {
	margin-top:0
}
.searchgrid,.formgrid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1rem
}
.capture-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1rem;
	align-items:start
}
.capture-grid>.panel {
	margin:0;
	height:100%
}
.formgrid {
	grid-template-columns:repeat(2,minmax(0,1fr))
}
.wide {
	grid-column:1/-1
}
label {
	display:grid;
	gap:.35rem;
	font-weight:600
}
input,select,button {
	font:inherit
}
input,select {
	width:100%;
	padding:.65rem;
	border:1px solid #cbd5e1;
	border-radius:var(--radius-sm);
	background:#fff;
	transition:border-color .15s var(--ease),box-shadow .15s var(--ease)
}
input:focus,select:focus {
	outline:none;
	border-color:var(--brand-teal);
	box-shadow:0 0 0 3px rgba(190,18,60,.16)
}
select[multiple] {
	padding:.25rem;
	height:auto
}
select[multiple] option {
	padding:.3rem .4rem
}
.multiselect {
	position:relative
}
.multiselect>summary {
	list-style:none;
	cursor:pointer;
	width:100%;
	padding:.65rem;
	border:1px solid #cbd5e1;
	border-radius:var(--radius-sm);
	background:#fff;
	font-weight:400;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.5rem
}
.multiselect>summary::-webkit-details-marker {
	display:none
}
.multiselect>summary::after {
	content:"▾";
	color:#6b7280
}
.multiselect[open]>summary::after {
	content:"▴"
}
.multiselect-panel {
	position:absolute;
	left:0;
	right:0;
	top:calc(100% + .3rem);
	background:#fff;
	border:1px solid #d1d5db;
	border-radius:.5rem;
	box-shadow:0 10px 25px #0002;
	padding:.5rem;
	max-height:240px;
	overflow:auto;
	z-index:10;
	display:flex;
	flex-direction:column;
	gap:.4rem
}
.multiselect-panel label {
	display:flex;
	align-items:center;
	gap:.4rem;
	font-weight:500
}
.multiselect-panel input {
	width:auto
}
button,.button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:2.75rem;
	background:var(--gradient-primary);
	color:#fff;
	border:0;
	border-radius:999px;
	padding:.65rem 1.3rem;
	font-weight:700;
	cursor:pointer;
	box-shadow:var(--shadow-sm);
	transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .15s var(--ease)
}
button:hover,.button:hover {
	color:#fff;
	text-decoration:none;
	filter:brightness(1.1);
	box-shadow:var(--shadow-md);
	transform:translateY(-2px)
}
button:active,.button:active {
	transform:translateY(0);
	filter:brightness(.98)
}
.secondary {
	background:#e5e7eb;
	color:#111827
}
.secondary:hover {
	filter:brightness(.97)
}
.secondary.active {
	background:var(--gradient-primary);
	color:#fff
}
.check-active {
	color:#16a34a;
	font-weight:800
}
.secondary.active .check-active {
	color:#bbf7d0
}
.danger {
	background:linear-gradient(135deg,#dc2626,#b91c1c)
}
.small {
	min-height:2.1rem;
	padding:.35rem .65rem;
	font-size:.9rem
}
.actions {
	display:flex;
	gap:.7rem;
	align-items:center
}
.listtools {
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	gap:.6rem;
	margin:.7rem 0;
	padding:.5rem .7rem;
	position:sticky;
	top:var(--nav-height,56px);
	z-index:4;
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
	overflow-x:auto;
	-webkit-overflow-scrolling:touch
}
.sizedrop {
	position:relative;
	flex:0 0 auto
}
.sizedrop>summary {
	background:#fff;
	border:1px solid #cbd5e1;
	border-radius:.45rem;
	padding:.55rem .75rem;
	white-space:nowrap
}
.sizedrop>div {
	right:0
}
.tablewrap {
	overflow:auto;
	background:rgba(255,255,255,.4);
	backdrop-filter:blur(1.5px);
	-webkit-backdrop-filter:blur(1.5px);
	border:1px solid rgba(229,231,235,.7);
	border-radius:.8rem
}
table {
	border-collapse:collapse;
	width:100%
}
th,td {
	padding:.75rem;
	border-bottom:1px solid #e5e7eb;
	text-align:left;
	vertical-align:top
}
th {
	background:rgba(249,250,251,.42)
}
.chips {
	display:flex;
	flex-wrap:wrap;
	gap:.25rem
}
.chips span {
	background:#fef3c7;
	color:#92400e;
	border-radius:999px;
	padding:.15rem .45rem;
	font-size:.82rem;
	font-weight:600
}
.advanced-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
	gap:.55rem .8rem;
	align-items:start;
	margin:.5rem 0
}
.advanced-grid label {
	font-size:.92rem
}
.advanced-grid input,.advanced-grid select {
	padding:.45rem
}
.pager {
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	gap:.5rem;
	margin:0;
	flex:0 0 auto
}
.pager-arrow {
	font-size:1.3rem;
	line-height:1;
	text-decoration:none;
	padding:.2rem .55rem;
	border-radius:var(--radius-sm)
}
.pager-jump {
	display:flex;
	align-items:center;
	gap:.3rem;
	white-space:nowrap
}
.pager-input {
	width:2.8rem;
	text-align:center;
	padding:.4rem .25rem
}
.pager-total {
	white-space:nowrap
}
.checks {
	display:flex;
	flex-wrap:wrap;
	gap:.55rem
}
.checks label {
	display:flex;
	align-items:center;
	gap:.35rem;
	font-weight:500
}
.checks input {
	width:auto
}
.scrollchecks {
	max-height:180px;
	overflow:auto;
	border:1px solid #e5e7eb;
	padding:.5rem;
	border-radius:.5rem
}
fieldset {
	border:1px solid #d1d5db;
	border-radius:.6rem;
	padding:.8rem;
	display:grid;
	gap:.8rem
}
legend {
	font-weight:800;
	padding:0 .35rem
}
.detailgrid-top {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:.25rem 1rem
}
.detailgrid-top>div {
	display:grid;
	gap:.25rem
}
.detailgrid {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:1rem
}
.detailgrid>.detailcol {
	flex:1 1 0;
	min-width:180px;
	display:flex;
	flex-direction:column;
	gap:1rem
}
.detailgrid>div:not(.detailcol) {
	flex:1 1 0;
	min-width:180px;
	display:grid;
	gap:.25rem
}
.detailgrid>.wide {
	flex-basis:100%
}
.detailgrid>.detailcol>div {
	display:grid;
	gap:.25rem
}
.detailgrid span {
	color:#4b5563
}
.ratingdrop,.subcollection-movies {
	border:1px solid #d1d5db;
	border-radius:.5rem;
	padding:.6rem;
	margin-top:.5rem
}
.ratinglist>div,.masterrow {
	display:flex;
	justify-content:space-between;
	gap:1rem;
	padding:.6rem 0;
	border-bottom:1px solid #eee
}
.ratinglist>div:last-child,.masterrow:last-child {
	border:0
}
.average {
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	font-size:1.1rem;
	background:#fef3c7;
	color:#92400e;
	border-radius:999px;
	padding:.5rem 1rem
}
.average::before {
	content:"★";
	color:#f59e0b
}
.theme-dark .average {
	background:#451a03;
	color:#fde68a
}
.inlineform {
	display:flex;
	align-items:end;
	gap:.7rem;
	flex-wrap:wrap
}
.inlineform label {
	min-width:180px;
	flex:1
}
.inlineform-tiny {
	display:inline-flex
}
.option-subcollection {
	color:#2563eb
}
.theme-dark .option-subcollection {
	color:#60a5fa
}
.dangerzone {
	display:flex;
	justify-content:flex-end;
	margin:2rem 0
}
.alert {
	padding:.7rem;
	border-radius:.5rem
}
.error {
	background:#fee2e2;
	color:#991b1b
}
.success {
	background:#dcfce7;
	color:#166534
}
.field-error {
	color:#b91c1c
}
.loginpage {
	min-height:100vh;
	min-height:100dvh;
	display:grid;
	place-items:center;
	padding:1rem;
	background-color:#111827;
	background-image:linear-gradient(rgba(15,15,25,.08),rgba(15,15,25,.16)),url('/backgrounds/random');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed
}
.loginbox {
	width:min(420px,100%);
	background:rgba(255,255,255,.25);
	backdrop-filter:blur(4px) saturate(1.3);
	-webkit-backdrop-filter:blur(4px) saturate(1.3);
	border:1px solid rgba(255,255,255,.4);
	padding:1.5rem;
	border-radius:1rem
}
.login-links {
	margin-top:1rem;
	text-align:center
}
.loginbox .fieldlabel {
	display:inline-block;
	width:fit-content;
	background:rgba(255,255,255,.4);
	color:#111827;
	padding:.1rem .5rem;
	border-radius:.4rem;
	font-weight:700
}
.login-brand {
	background:rgba(255,255,255,.4);
	padding:.45rem .8rem;
	border-radius:.6rem;
	width:fit-content
}
.login-brand .app-version {
	opacity:1;
	color:#374151
}
.stack {
	display:grid;
	gap:1rem
}
small {
	color:#6b7280;
	display:block
}

.personalform {
	display:grid;
	gap:1rem;
	max-width:520px
}
.checkline {
	display:flex;
	align-items:center;
	gap:.6rem
}
.checkline input {
	width:auto
}
.seen-date {
	font-weight:600
}
.helptext {
	color:#6b7280;
	margin:0
}
@media(max-width:800px) {
	body,.loginpage {
		background-attachment:scroll
	}
	.topbar {
		flex-wrap:wrap;
		padding:.55rem 1rem
	}
	.brandblock {
		min-width:0;
		overflow:hidden
	}
	.brand {
		display:block;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		font-size:1.05rem
	}
	.navlinks-toggle {
		display:flex;
		align-items:center;
		gap:.4rem;
		cursor:pointer;
		font-weight:700;
		padding:.4rem .2rem;
		width:fit-content;
		flex-shrink:0
	}
	.navlinks {
		display:none;
		flex-direction:column;
		align-items:flex-start;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		width:auto;
		gap:.6rem;
		padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
		margin-top:0;
		background:var(--gradient-topbar);
		border-top:1px solid rgba(255,255,255,.15);
		box-shadow:0 12px 25px #0006;
		max-height:calc(100vh - 100%);
		overflow-y:auto;
		z-index:6
	}
	.nav-toggle:checked ~ .navlinks {
		display:flex
	}
	.searchgrid,.formgrid,.capture-grid {
		grid-template-columns:1fr
	}
	.detailgrid {
		flex-direction:column
	}
	.detailgrid-top {
		grid-template-columns:1fr
	}
	.pagehead {
		align-items:flex-start
	}
	.responsive thead {
		display:none
	}
	.responsive,.responsive tbody,.responsive tr,.responsive td {
		display:block;
		width:100%
	}
	.responsive tr {
		border-bottom:8px solid #f3f4f6;
		padding:.3rem 0
	}
	.responsive td {
		border:0;
		padding:.4rem .75rem;
		display:grid;
		grid-template-columns:110px 1fr;
		gap:.6rem;
		align-items:start
	}
	.responsive td:before {
		content:attr(data-label);
		font-weight:700;
		color:#6b7280
	}
	.responsive td:last-child:before {
		content:"Aktion"
	}
	.responsive.no-action-column td:last-child:before {
		content:attr(data-label)
	}
	.inlineform {
		display:grid
	}
	.inlineform label {
		min-width:0
	}
	.navdrop {
		width:100%
	}
	.navdrop>div {
		position:static;
		width:100%;
		min-width:0;
		box-shadow:none;
		max-height:60vh;
		overflow-y:auto;
		margin:.3rem 0 .3rem .8rem
	}
	.sizedrop>div {
		right:0
	}
	.pagehead {
		flex-direction:column
	}
}
@media(max-width:380px) {
	.navlinks-toggle span {
		display:none
	}
}


/* Persistent light/dark mode toggle */
.theme-toggle {
	position:fixed;
	right:1rem;
	bottom:1rem;
	z-index:100;
	display:inline-block;
	padding:.65rem .85rem;
	border:1px solid #cbd5e1;
	border-radius:999px;
	background:#fff;
	color:#111827;
	box-shadow:0 4px 18px #0003;
	font-weight:700;
	text-decoration:none
}
.theme-toggle:hover {
	text-decoration:none
}
.theme-dark {
	background-color:#0f172a;
	color:#e5e7eb;
	color-scheme:dark
}
.theme-dark a {
	color:#fbbf24
}
.theme-dark .topbar {
	background:linear-gradient(115deg,#020617,#450a0a 55%,#92400e 130%);
	color:#f8fafc
}
@media(max-width:800px) {
	.theme-dark .navlinks {
		background:linear-gradient(115deg,#020617,#450a0a 55%,#92400e 130%)
	}
}
.theme-dark .brand,
.theme-dark .navlinks>a,
.theme-dark .navdrop>summary,
.theme-dark .linkbutton {
	color:#f8fafc
}
.theme-dark .panel,
.theme-dark .tablewrap,
.theme-dark .loginbox {
	background:rgba(17,24,39,.4);
	border-color:rgba(51,65,85,.7);
	color:#e5e7eb
}
.theme-dark .loginbox {
	background:rgba(17,24,39,.25);
	border-color:rgba(255,255,255,.18)
}
.theme-dark .country-option:hover {
	background:rgba(255,255,255,.06)
}
.theme-dark th {
	background:rgba(17,24,39,.42)
}
.theme-dark input,
.theme-dark select {
	background:#0f172a;
	border-color:#475569;
	color:#f8fafc
}
.theme-dark input:focus,
.theme-dark select:focus {
	border-color:var(--brand-cyan);
	box-shadow:0 0 0 3px rgba(245,158,11,.25)
}
.theme-dark input::placeholder {
	color:#94a3b8
}
.theme-dark fieldset {
	border-color:#475569
}
.theme-dark th {
	background:rgba(30,41,59,.85);
	color:#f8fafc
}
.theme-dark th,
.theme-dark td {
	border-color:#334155
}
.theme-dark .pagehead p,
.theme-dark .detailgrid span,
.theme-dark small,
.theme-dark .helptext {
	color:#94a3b8
}
.theme-dark .chips span {
	background:#78350f;
	color:#fde68a
}
.theme-dark .navdrop>div,
.theme-dark .sizedrop>div {
	background:#111827;
	color:#f8fafc;
	border-color:#475569;
	box-shadow:0 10px 25px #0008
}
.theme-dark .multiselect>summary {
	background:#0f172a;
	border-color:#475569;
	color:#f8fafc
}
.theme-dark .multiselect-panel {
	background:#111827;
	color:#f8fafc;
	border-color:#475569;
	box-shadow:0 10px 25px #0008
}
.theme-dark .sizedrop>summary {
	background:#111827;
	color:#f8fafc;
	border-color:#475569
}
.theme-dark .listtools {
	background:rgba(17,24,39,.88)
}
.theme-dark .secondary {
	background:#334155;
	color:#f8fafc
}
.theme-dark .theme-toggle {
	background:#f8fafc;
	color:#0f172a;
	border-color:#cbd5e1
}
.theme-dark.loginpage {
	background-color:#020617;
	background-image:linear-gradient(rgba(2,6,23,.12),rgba(2,6,23,.24)),url('/backgrounds/random');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat
}
.theme-light.loginpage {
	background-color:#111827;
	background-image:linear-gradient(rgba(15,15,25,.08),rgba(15,15,25,.16)),url('/backgrounds/random');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat
}
@media(max-width:800px) {
	.theme-toggle {
		right:.75rem;
		bottom:.75rem;
		padding:.55rem .7rem;
		font-size:.9rem
	}
	.theme-dark .responsive tr {
		border-bottom-color:#0f172a
	}
	.theme-dark .responsive td:before {
		color:#94a3b8
	}
}

/* Account administration and confirmation pages */
.narrow {
	max-width:760px
}
.notice {
	border-left:5px solid #155e75
}
.copyvalue {
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	word-break:break-all;
	background:#f1f5f9;
	padding:.8rem;
	border-radius:.5rem
}
.userrow {
	align-items:center
}
.confirm-panel {
	text-align:center;
	padding:1.5rem
}
.confirm-icon {
	width:3.4rem;
	height:3.4rem;
	margin:0 auto .8rem;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:#fef3c7;
	color:#92400e;
	font-size:2rem;
	font-weight:900
}
.confirm-actions {
	display:flex;
	justify-content:center;
	gap:.8rem;
	flex-wrap:wrap;
	margin-top:1.2rem
}
.confirm-list {
	text-align:left;
	max-width:28rem;
	margin:.8rem auto 0;
	padding-left:1.2rem
}
.confirm-list li {
	margin:.15rem 0
}
.comparison {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	text-align:left;
	margin:1rem 0
}
.comparison>div {
	display:grid;
	gap:.35rem;
	border:1px solid #d1d5db;
	border-radius:.6rem;
	padding:.9rem
}
/* Common always-visible theme icon button. */
.theme-toggle {
	width:3rem;
	height:3rem;
	display:grid;
	place-items:center;
	padding:0;
	font-size:1.65rem;
	line-height:1
}
.theme-dark .copyvalue {
	background:#0f172a;
	color:#e5e7eb
}
.theme-dark .comparison>div {
	border-color:#475569
}
@media(max-width:800px) {
	.comparison {
		grid-template-columns:1fr
	}
	.userrow {
		align-items:flex-start;
		flex-direction:column
	}
	.theme-toggle {
		width:2.8rem;
		height:2.8rem;
		font-size:1.5rem
	}
}

/* Registered device management */
.device-card {
	display:grid;
	gap:1rem
}
.device-head {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:1rem
}
.device-head h2 {
	margin:0 0 .5rem
}
.status {
	display:inline-block;
	border-radius:999px;
	padding:.2rem .55rem;
	font-size:.82rem;
	font-weight:800;
	margin-right:.25rem
}
.status.current {
	background:#dbeafe;
	color:#1d4ed8
}
.status.trusted {
	background:#dcfce7;
	color:#166534
}
.status.blocked {
	background:#fee2e2;
	color:#991b1b
}
.device-meta {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.8rem;
	margin:0
}
.device-meta>div {
	display:grid;
	gap:.2rem
}
.device-meta dt {
	font-weight:800;
	color:#4b5563
}
.device-meta dd {
	margin:0
}
.user-agent {
	word-break:break-word;
	font-size:.9rem
}
.device-rename {
	display:grid;
	grid-template-columns:1fr auto;
	gap:.8rem;
	align-items:end
}
.theme-dark .status.current {
	background:#1e3a8a;
	color:#dbeafe
}
.theme-dark .status.trusted {
	background:#14532d;
	color:#dcfce7
}
.theme-dark .status.blocked {
	background:#7f1d1d;
	color:#fee2e2
}
.theme-dark .device-meta dt {
	color:#94a3b8
}
@media(max-width:800px) {
	.device-meta {
		grid-template-columns:1fr
	}
	.device-rename {
		grid-template-columns:1fr
	}
}

.collectionrow {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1rem;
	padding:.75rem 0;
	border-bottom:1px solid #e5e7eb
}
.collectionrow>div {
	display:flex;
	flex-wrap:wrap;
	gap:.75rem;
	align-items:baseline
}
.collectionrow a {
	font-weight:800
}
.collectionrow span {
	color:#6b7280
}
.subcollectionrow {
	padding-left:1.5rem
}
.subcollectionrow a {
	font-weight:600;
	font-size:.95rem
}
.theme-dark .collectionrow {
	border-color:#374151
}
.theme-dark .collectionrow span {
	color:#9ca3af
}

/* Configurable external source display. */
.source-chips {
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin:.5rem 0 1rem
}
.source-chips span {
	background:#fef3c7;
	color:#92400e;
	border-radius:999px;
	padding:.35rem .65rem;
	font-weight:700;
	font-size:.9rem
}
.lookup-sources {
	margin-top:1rem;
	display:flex;
	gap:.5rem;
	flex-wrap:wrap
}
.warning-list {
	background:#fef3c7;
	color:#92400e;
	border-radius:.6rem;
	padding:1rem 1rem 1rem 2rem
}
.warning-list li {
	margin:.2rem 0
}
.warning-list .inlineform-tiny {
	margin-left:.6rem;
	vertical-align:middle
}
.theme-dark .source-chips span {
	background:#78350f;
	color:#fde68a
}
.theme-dark .warning-list {
	background:#78350f;
	color:#fef3c7
}
.source-admin-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1rem
}
.source-card-head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem
}
.inline-check {
	display:flex;
	align-items:center;
	gap:.45rem
}
.inline-check input {
	width:auto
}
.secret-state {
	font-size:.9rem;
	font-weight:700;
	opacity:.8
}
@media (max-width:800px) {
	.source-admin-grid {
		grid-template-columns:1fr
	}
}

.brandblock {
	display:grid;
	justify-items:start;
	line-height:1.05
}
.app-version {
	font-size:.62rem;
	font-weight:500;
	letter-spacing:.04em;
	opacity:.68;
	margin-top:.16rem
}
.login-brand {
	display:grid;
	justify-items:start;
	margin-bottom:1rem
}
.login-brand h1 {
	margin-bottom:0
}

.ocr-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; }

.backup-codes {
	list-style:none;
	padding:0;
	margin:1rem 0;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.5rem
}
.backup-codes li {
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:1.1rem;
	letter-spacing:.05em;
	background:#f1f5f9;
	color:#0f172a;
	border-radius:.5rem;
	padding:.55rem .75rem;
	text-align:center
}
.theme-dark .backup-codes li {
	background:#0f172a;
	color:#e5e7eb
}
@media (max-width:800px) {
	.backup-codes {
		grid-template-columns:1fr
	}
}

.cover-thumb {
	width:3rem;
	height:4.5rem;
	object-fit:cover;
	border-radius:.35rem;
	display:block
}
.cover-preview {
	width:9rem;
	height:13.5rem;
	object-fit:cover;
	border-radius:.5rem;
	box-shadow:0 1px 4px rgba(0,0,0,.25)
}
.cover-field {
	display:flex;
	align-items:flex-start;
	gap:1rem;
	flex-wrap:wrap
}
.cover-zoom-link {
	display:inline-block;
	cursor:zoom-in
}
.lightbox {
	display:none;
	position:fixed;
	inset:0;
	z-index:200;
	background:rgba(0,0,0,.9);
	align-items:center;
	justify-content:center;
	padding:2rem
}
.lightbox:target {
	display:flex
}
.lightbox img {
	max-width:95vw;
	max-height:95vh;
	object-fit:contain;
	border-radius:.4rem;
	box-shadow:0 10px 40px rgba(0,0,0,.6)
}
.lightbox-back {
	position:fixed;
	top:1rem;
	left:1rem;
	width:3rem;
	height:3rem;
	display:grid;
	place-items:center;
	background:rgba(255,255,255,.92);
	color:#111827;
	border-radius:999px;
	font-size:1.7rem;
	font-weight:800;
	text-decoration:none;
	box-shadow:0 4px 18px rgba(0,0,0,.4);
	z-index:201
}
.lightbox-back:hover {
	text-decoration:none;
	background:#fff
}
@media (max-width:800px) {
	.cover-preview {
		width:6.5rem;
		height:9.75rem
	}
}

.cover-gallery {
	display:flex;
	flex-wrap:wrap;
	gap:1.5rem
}
.cover-option {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.5rem;
	max-width:9rem;
	text-align:center
}
.cover-placeholder {
	background:#e5e7eb;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.4rem
}
.country-dropdown summary {
	cursor:pointer;
	font-weight:600
}
.country-list {
	margin-top:.75rem;
	max-height:22rem;
	overflow-y:auto;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
	gap:.15rem .5rem;
	border:1px solid var(--border,#d1d5db);
	border-radius:.5rem;
	padding:.5rem
}
.country-option {
	display:grid;
	grid-template-columns:1.1rem 1fr auto;
	align-items:start;
	gap:.5rem;
	padding:.4rem .5rem;
	border-radius:.4rem;
	line-height:1.35
}
.country-option:hover {
	background:rgba(0,0,0,.04)
}
.country-option input[type="checkbox"] {
	margin-top:.2rem
}
.country-label {
	min-width:0
}
.country-option small {
	opacity:.6;
	white-space:nowrap
}
.search-panel {
	scroll-margin-top:calc(var(--nav-height,56px) + .75rem)
}
.search-panel form {
	display:grid;
	gap:.75rem
}
.quicksearch {
	display:flex;
	align-items:flex-end;
	gap:.75rem
}
.quicksearch label {
	flex:1;
	margin:0
}
.advanced-search summary {
	cursor:pointer;
	font-weight:700;
	padding:.4rem 0;
	color:#155e75
}
.advanced-search .searchgrid {
	margin-top:.75rem
}
.search-panel .actions {
	justify-content:space-between
}
.countline {
	color:#6b7280;
	font-size:.9rem;
	text-align:center;
	margin:.3rem 0 .1rem
}
.pagehead-actions {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.5rem
}
.pagehead-actions .button,.pagehead-actions button {
	min-height:2.1rem;
	padding:.4rem .6rem;
	font-size:.78rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
.movie-cards {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));
	gap:1.1rem
}
.movie-card {
	display:flex;
	flex-direction:column;
	gap:.35rem;
	text-decoration:none;
	color:inherit;
	scroll-margin-top:5rem;
	/* Transparent border on every card keeps the grid aligned; only collection cards tint it in. */
	border:1px solid transparent;
	border-radius:10px;
	padding:.4rem;
	/* No backdrop-filter here: blurring dozens of cards per page against the fixed page background was a
	   major GPU/compositor cost (visible as the browser freezing for a few seconds on large lists). The
	   opaque-ish background color alone gives nearly the same look for a fraction of the cost. */
	background:rgba(255,255,255,.86);
	box-shadow:var(--shadow-sm)
}
.theme-dark .movie-card {
	background:rgba(15,23,42,.82)
}
/* Films of a collection get a light frame plus a small label, so their togetherness is visible without shouting. */
.movie-card.in-collection {
	border-color:rgba(0,0,0,.13)
}
.theme-dark .movie-card.in-collection {
	border-color:rgba(255,255,255,.17)
}
.movie-card-collection-row {
	position:absolute;
	top:.3rem;
	left:.3rem;
	width:calc(100% - .6rem);
	z-index:2;
	display:flex;
	align-items:center;
	gap:.3rem;
	padding-right:2.2rem
}
.movie-card-collection-cover {
	display:none;
	flex:0 0 20%;
	width:20%;
	aspect-ratio:2/3;
	object-fit:cover;
	border-radius:3px;
	border:1px solid #fff;
	box-shadow:var(--shadow-sm)
}
.show-collection-covers .movie-card-collection-cover {
	display:block
}
.movie-card-collection {
	display:inline-block;
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:#fff;
	background:var(--gradient-primary);
	padding:.15rem .5rem;
	border-radius:999px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/* Fixed cap instead of growing with the name's length, so every badge - short or long title - takes up
	   the same amount of space, identically on desktop and phone, instead of some stretching out much wider
	   than others. */
	max-width:9rem;
	min-width:0;
	box-shadow:var(--shadow-sm)
}
.cover-wrap {
	position:relative
}
.movie-card .cover-thumb {
	width:100%;
	height:auto;
	aspect-ratio:2/3;
	box-shadow:var(--shadow-sm);
	transition:transform .18s var(--ease),box-shadow .18s var(--ease)
}
.movie-card-rating {
	position:absolute;
	top:.3rem;
	right:.3rem;
	z-index:1;
	font-size:.72rem;
	font-weight:700;
	color:#fff;
	padding:.1rem .4rem;
	border-radius:999px;
	box-shadow:var(--shadow-sm);
	line-height:1.4
}
.movie-card-rating.rating-bad {
	background:#dc2626
}
.movie-card-rating.rating-medium {
	background:#d97706
}
.movie-card-rating.rating-good {
	background:#16a34a
}
.cover-rating-wrap {
	display:flex;
	align-items:center;
	gap:.75rem
}
.detail-rating-col {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:.35rem
}
.detail-collection-row {
	display:flex;
	flex-wrap:wrap;
	gap:.3rem
}
.detail-rating {
	font-size:1rem;
	font-weight:700;
	color:#fff;
	padding:.3rem .7rem;
	border-radius:999px;
	box-shadow:var(--shadow-sm);
	white-space:nowrap
}
.detail-rating.rating-bad {
	background:#dc2626
}
.detail-rating.rating-medium {
	background:#d97706
}
.detail-rating.rating-good {
	background:#16a34a
}
.movie-card:hover .cover-thumb {
	transform:translateY(-4px);
	box-shadow:var(--shadow-lift)
}
.movie-card-title {
	font-weight:600;
	font-size:.9rem;
	line-height:1.25;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}
.movie-card-sub {
	color:#4b5563;
	font-size:.85rem;
	font-weight:600
}
.theme-dark .movie-card-sub {
	color:#cbd5e1
}
@media (prefers-reduced-motion:reduce) {
	*,*::before,*::after {
		transition-duration:.001ms!important;
		animation-duration:.001ms!important
	}
}
.reservation-row {
	display:flex;
	align-items:center;
	gap:.8rem
}
@media (max-width:800px) {
	.quicksearch {
		flex-direction:column;
		align-items:stretch
	}
	.search-panel .actions {
		flex-direction:column;
		align-items:stretch;
		gap:.4rem
	}
	.movie-cards {
		grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));
		gap:.8rem
	}
}
/* Phones can't be orientation-locked from a plain browser tab, so block the landscape view with an overlay
   instead - "max-height" keeps this to phone-sized screens and spares tablets/desktops rotated sideways. */
@media (orientation:landscape) and (max-height:500px) {
	body::before {
		content:"Bitte das Gerät hochkant halten – diese Seite ist nur im Hochformat nutzbar.";
		position:fixed;
		inset:0;
		z-index:9999;
		background:#0f172a;
		color:#fff;
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		padding:2rem;
		font-size:1.1rem;
		font-weight:600
	}
}