:root {
		--bg-1: #faf5ef;
		--bg-2: #f3ece2;
		--card: rgba(255, 255, 255, 0.94);
		--text: #3b2e1e;
		--muted: #8a7d6f;
		--border: rgba(232, 146, 46, 0.12);
		--primary: #e8922e;
		--primary-hover: #d4802a;
		--danger-bg: #fef2f2;
		--danger-text: #b91c1c;
		--shadow: 0 18px 50px rgba(232, 146, 46, 0.08);
	}

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		min-height: 100vh;
		font-family: Inter, Arial, Helvetica, sans-serif;
		color: var(--text);
		background:
			radial-gradient(circle at top left, rgba(232, 146, 46, 0.10), transparent 35%),
			radial-gradient(circle at bottom right, rgba(232, 146, 46, 0.06), transparent 35%),
			linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 18px;
	}

	.login-wrap {
		width: 100%;
		max-width: 440px;
	}

	.login-card {
		background: var(--card);
		backdrop-filter: blur(10px);
		border: 1px solid var(--border);
		border-radius: 28px;
		box-shadow: var(--shadow);
		padding: 28px;
	}

	.brand {
		text-align: center;
		margin-bottom: 24px;
	}

	.brand-badge {
		width: 68px;
		height: 68px;
		margin: 0 auto 16px auto;
		border-radius: 20px;
		background: linear-gradient(135deg, #f0a348, #e8922e);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 16px 32px rgba(232, 146, 46, 0.25);
		color: #ffffff;
		font-size: 30px;
	}

	.brand h1 {
		margin: 0 0 8px 0;
		font-size: 28px;
		letter-spacing: -0.03em;
	}

	.brand p {
		margin: 0;
		color: var(--muted);
		font-size: 15px;
		line-height: 1.5;
	}

	.alert {
		margin-bottom: 18px;
		padding: 14px 16px;
		border-radius: 16px;
		background: var(--danger-bg);
		color: var(--danger-text);
		font-weight: 700;
		font-size: 14px;
	}

	.form-group {
		margin-bottom: 16px;
	}

	.form-label {
		display: block;
		margin-bottom: 8px;
		font-size: 13px;
		font-weight: 700;
		color: var(--text);
	}

	.form-input {
		width: 100%;
		height: 52px;
		border: 1px solid #e8ddd0;
		border-radius: 16px;
		padding: 0 16px;
		font-size: 15px;
		background: #ffffff;
		color: var(--text);
		outline: none;
		transition: border-color 0.18s ease, box-shadow 0.18s ease;
	}

	.form-input:focus {
		border-color: rgba(232, 146, 46, 0.50);
		box-shadow: 0 0 0 4px rgba(232, 146, 46, 0.10);
	}

	.submit-btn {
		width: 100%;
		height: 54px;
		border: 0;
		border-radius: 16px;
		background: linear-gradient(135deg, #e8922e, #d4802a);
		color: #ffffff;
		font-size: 15px;
		font-weight: 800;
		cursor: pointer;
		box-shadow: 0 12px 28px rgba(232, 146, 46, 0.22);
		transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	}

	.submit-btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 16px 30px rgba(232, 146, 46, 0.28);
	}

	.submit-btn:active {
		transform: translateY(0);
	}

	.footer-note {
		text-align: center;
		margin-top: 18px;
		color: var(--muted);
		font-size: 13px;
	}


	/* ======= login-page ======= */
	:root {
		--color-bg: #faf5ef;
		--color-surface: #ffffff;
		--color-surface-soft: #fffbf6;
		--color-border: #e8ddd0;
		--color-border-strong: #d4c4ad;
		--color-text: #3b2e1e;
		--color-text-soft: #7a6d5f;
		--color-primary: #e8922e;
		--color-primary-hover: #d4802a;
		--color-danger-bg: #fef2f2;
		--color-danger-border: #fecaca;
		--color-danger-text: #b91c1c;
		--shadow-card: 0 20px 50px rgba(232, 146, 46, 0.08);
		--radius-lg: 20px;
		--radius-md: 12px;
		--radius-sm: 10px;
		--input-height: 50px;
		--transition-fast: 0.2s ease;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body {
		min-height: 100%;
	}

	body.login-page {
		margin: 0;
		background:
			radial-gradient(circle at top left, rgba(232, 146, 46, 0.08), transparent 35%),
			radial-gradient(circle at bottom right, rgba(232, 146, 46, 0.06), transparent 30%),
			var(--color-bg);
		color: var(--color-text);
		font-family: Arial, Helvetica, sans-serif;
	}

	/* ======= login-shell ======= */
	.login-shell {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32px 16px;
	}

	/* ======= login-card ======= */
	.login-card {
		width: 100%;
		max-width: 440px;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-card);
		padding: 28px;
	}

	/* ======= login-card__header ======= */
	.login-card__header {
		margin-bottom: 22px;
	}

	/* ======= login-brand ======= */
	.login-brand {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	/* ======= login-brand__icon ======= */
	.login-brand__icon {
		width: 52px;
		height: 52px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		background: rgba(232, 146, 46, 0.10);
		color: var(--color-primary);
		flex-shrink: 0;
	}

	/* ======= login-title ======= */
	.login-title {
		margin: 0 0 4px;
		font-size: 30px;
		line-height: 1.1;
	}

	/* ======= login-subtitle ======= */
	.login-subtitle {
		margin: 0;
		color: var(--color-text-soft);
		font-size: 15px;
		line-height: 1.5;
	}

	/* ======= alert ======= */
	.alert {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 18px;
		padding: 14px 16px;
		border-radius: var(--radius-md);
		border: 1px solid transparent;
	}

	/* ======= alert--error ======= */
	.alert--error {
		background: var(--color-danger-bg);
		border-color: var(--color-danger-border);
		color: var(--color-danger-text);
	}

	/* ======= alert__icon ======= */
	.alert__icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		margin-top: 1px;
	}

	/* ======= alert__text ======= */
	.alert__text {
		font-size: 14px;
		line-height: 1.5;
		font-weight: 700;
	}

	/* ======= login-form ======= */
	.login-form {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* ======= form-field ======= */
	.form-field {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* ======= form-label ======= */
	.form-label {
		font-size: 14px;
		font-weight: 700;
		color: var(--color-text);
	}

	/* ======= input-wrap ======= */
	.input-wrap {
		position: relative;
	}

	/* ======= input-wrap__icon ======= */
	.input-wrap__icon {
		position: absolute;
		top: 50%;
		left: 14px;
		transform: translateY(-50%);
		width: 18px;
		height: 18px;
		color: var(--color-text-soft);
		pointer-events: none;
	}

	/* ======= form-input ======= */
	.form-input {
		width: 100%;
		height: var(--input-height);
		padding: 0 14px 0 46px;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
		color: var(--color-text);
		font-size: 15px;
		outline: none;
		transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
	}

	.form-input::placeholder {
		color: #a89882;
	}

	.form-input:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 4px rgba(232, 146, 46, 0.12);
		background: #fff;
	}

	/* ======= btn ======= */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 50px;
		border: 0;
		border-radius: var(--radius-sm);
		padding: 0 18px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		cursor: pointer;
		transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
	}

	/* ======= btn--primary ======= */
	.btn--primary {
		background: var(--color-primary);
		color: #ffffff;
		box-shadow: 0 12px 24px rgba(232, 146, 46, 0.20);
	}

	.btn--primary:hover {
		background: var(--color-primary-hover);
	}

	.btn--primary:active {
		transform: translateY(1px);
	}

	/* ======= btn--full ======= */
	.btn--full {
		width: 100%;
		margin-top: 4px;
	}

	/* ======= btn__icon ======= */
	.btn__icon {
		width: 18px;
		height: 18px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* ======= icon ======= */
	.icon {
		width: 100%;
		height: 100%;
		display: block;
	}

	@media (max-width: 520px) {
		.login-card {
			padding: 22px 18px;
			border-radius: 16px;
		}

		.login-title {
			font-size: 26px;
		}

		.login-brand__icon {
			width: 46px;
			height: 46px;
			border-radius: 12px;
		}
	}

	@media (max-width: 520px) {
		.login-card {
			padding: 22px 18px;
			border-radius: 24px;
		}

		.brand h1 {
			font-size: 24px;
		}
	}