:root {
	--bg: #07080b;
	--surface: #0a0b0f;
	--text: #dbcf9b;
	--text-soft: #c8ba86;
	--line: #1a1d27;
	--active: #b0181f;
	--white: #f8f3df;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background: radial-gradient(circle at 20% -10%, #151826 0%, var(--bg) 45%) var(--bg);
	color: var(--text);
}

.site-header {
	border-bottom: none;
	padding: 14px 34px;
	background: linear-gradient(to bottom, #08090e, #07080b);
}

.topbar {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 280px;
}

.brand-logo {
	width: 86px;
	height: 52px;
	border: none;
	background:url("logo.png") center / cover no-repeat;
	display: block;
	color: var(--text-soft);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-indent: -9999px;
	overflow: hidden;
}

.brand-title {
	margin: 0;
	color: var(--white);
	font-size: 32px;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 600;
}

.nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 10px;
}

.nav a {
	color: var(--text);
	text-decoration: none;
	font-size: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.nav a:hover,
.nav a:focus-visible {
	color: #fff0b8;
	outline: none;
}

.nav a.active {
	color: var(--active);
}

.lang {
	color: #d9d0a7;
	font-size: 16px;
	text-decoration: none;
	margin-left: 8px;
}

.content {
	max-width: 1400px;
	margin: 24px auto 38px;
	padding: 0 34px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 44px;
	align-items: start;
}

.cinema-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid #2b2e3a;
	background:url("imageMain.jpg") center / cover no-repeat;
	filter: grayscale(100%);
}

.about {
	font-size: 20px;
	line-height: 1.45;
	color: var(--text);
}

.about p {
	margin: 0 0 24px;
}

.about .lead {
	font-style: italic;
	font-weight: 700;
	margin-bottom: 10px;
}

.about strong {
	color: #e3d59e;
}

.login-panel {
	padding: 20px;
	border: 1px solid #2b2e3a;
	background: linear-gradient(180deg, rgba(12, 14, 20, 0.85) 0%, rgba(8, 9, 13, 0.92) 100%);
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.login-error {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid #7a2a2a;
	background: rgba(122, 42, 42, 0.2);
	color: #ffd7d7;
	font-size: 15px;
	line-height: 1.4;
}

.login-form label {
	font-size: 16px;
	font-weight: 600;
	color: #e7dbab;
}

.login-form input {
	height: 42px;
	padding: 10px 12px;
	border: 1px solid #3b3f4f;
	background: #10131b;
	color: #efe6c3;
	font-size: 15px;
}

.login-form input:focus {
	outline: 1px solid #9f8b4c;
	border-color: #9f8b4c;
}

.login-form button {
	margin-top: 8px;
	height: 44px;
	border: 1px solid #7f6a2d;
	background: linear-gradient(180deg, #d0b76c 0%, #ab8f4f 100%);
	color: #131313;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.login-form button:hover,
.login-form button:focus-visible {
	background: linear-gradient(180deg, #e0c77a 0%, #b89c5c 100%);
	outline: none;
}

.user-details-panel {
	padding: 20px;
	border: 1px solid #2b2e3a;
	background: linear-gradient(180deg, rgba(12, 14, 20, 0.85) 0%, rgba(8, 9, 13, 0.92) 100%);
}

.user-details-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.user-details-form label {
	font-size: 16px;
	font-weight: 600;
	color: #e7dbab;
}

.user-details-form input {
	height: 42px;
	padding: 10px 12px;
	border: 1px solid #3b3f4f;
	background: #10131b;
	color: #efe6c3;
	font-size: 15px;
}

.user-details-form input[disabled] {
	background: #0d1017;
	color: #cfc28f;
	border-color: #313542;
	cursor: not-allowed;
	opacity: 1;
}

.movies-table td {
	text-align: center;
}

@media (max-width: 900px) {
	.login-panel {
		padding: 16px;
	}

	.user-details-panel {
		padding: 16px;
	}
}