*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
		body, input, button, label, p, div, a, span, h1, h2, h3, h4, h5, h6 {
			font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
		}

		:root {
			--gold:         #d4a828;
			--gold-light:   #eacc50;
			--gold-dark:    #9a7a15;
			--silver:       #9a9a9a;
			--silver-light: #c0c0c0;
			--dark:         #1e1e24;
		}


		html, body { height: 100%; }
		body {
			min-height: 100vh;
			display: flex;
			overflow: hidden;
		}

		/* ═══════════════════════════════
		   LAYOUT
		   ═══════════════════════════════ */
		.split {
			display: flex;
			width: 100%;
			min-height: 100vh;
		}

		/* ═══════════════════════════════
		   RIGHT: Form Panel
		   ═══════════════════════════════ */
		.form-side {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rem 1.5rem;
			background: #f5f5f5;
			position: relative;
			z-index: 1;
			animation: panelRight 0.8s cubic-bezier(0.22,1,0.36,1) both;
		}
		@keyframes panelRight {
			from { opacity: 0; transform: translateX(40px); }
			to   { opacity: 1; transform: translateX(0); }
		}

		/* Top gold line */
		.form-side::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 3px;
			background: linear-gradient(90deg,
				transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
		}

		.form-container {
			width: 100%;
			max-width: 400px;
			background: #ffffff;
			border-radius: 20px;
			padding: 2rem 2rem 1.5rem;
			box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
			animation: fadeInUp 0.6s ease-out 0.2s both;
		}
		@keyframes fadeInUp {
			from { opacity: 0; transform: translateY(24px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		/* HesabGold logo in form side */
		.form-brand {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 2rem;
			justify-content: center;
		}
		.form-brand-name {
			font-size: 1.45rem;
			font-weight: 900;
			line-height: 1;
		}
		.form-brand-name .gp {
			background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		.form-brand-name .sp {
			background: linear-gradient(135deg, #888888, #b0b0b0, #d0d0d0);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		.form-brand-sub {
			font-size: 0.68rem;
			color: #737373;
			letter-spacing: 0.5px;
			margin-top: 3px;
			text-align: center;
		}

		/* Divider */
		.form-divider {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 1.8rem;
		}
		.form-divider::before, .form-divider::after {
			content: ''; flex: 1; height: 1px;
			background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
		}
		.form-divider span {
			font-size: 0.75rem;
			font-weight: 700;
			color: #333333;
		}

		/* ── Input Groups ── */
		.inp-group {
			margin-bottom: 1.2rem;
			animation: fadeInUp 0.5s ease-out both;
		}
		.inp-group:nth-child(1) { animation-delay: 0.3s; }
		.inp-group:nth-child(2) { animation-delay: 0.4s; }

		/* ── Form Field (مثل form-field-sm در admin panel) ── */
		.login-field {
			position: relative;
			border: 1.5px solid #e5e5e5;
			border-radius: 12px;
			padding: 10px 14px 9px;
			background: #ffffff;
			transition: border-color 0.22s, box-shadow 0.22s;
		}
		.login-field:focus-within {
			border-color: var(--gold);
			box-shadow: 0 0 0 3px rgba(212,168,40,0.1);
		}
		.login-field > label {
			position: absolute;
			top: -9px;
			right: 12px;
			padding: 0 5px;
			background: #ffffff;
			font-size: 0.72rem;
			font-weight: 600;
			color: #737373;
			line-height: 1.2;
			pointer-events: none;
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: 4px;
			transition: color 0.2s;
		}
		.login-field:focus-within > label { color: var(--gold); }
		.login-field > label i { font-size: 0.65rem; }
		.login-field input {
			width: 100%;
			border: none;
			outline: none;
			background: transparent;
			font-size: 0.88rem;
			color: #222228;
			padding: 3px 0;
			line-height: 1.5;
		}
		.login-field input::placeholder { color: #c0c0c0; }
		.login-field input:-webkit-autofill,
		.login-field input:-webkit-autofill:hover,
		.login-field input:-webkit-autofill:focus {
			-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
			-webkit-text-fill-color: #222228;
			transition: background-color 5000s ease-in-out 0s;
		}

		/* Password wrapper with eye toggle */
		.pass-wrap {
			position: relative;
			display: flex;
			align-items: center;
		}
		.pass-wrap input { padding-left: 30px; }
		.eye-toggle {
			position: absolute;
			left: 0;
			background: none; border: none;
			color: #b0b0b0; cursor: pointer;
			font-size: 0.82rem;
			padding: 4px; border-radius: 6px;
			transition: color 0.2s;
		}
		.eye-toggle:hover { color: var(--gold); }

		/* ── Remember ── */
		.remember-row {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 1.5rem;
			cursor: pointer;
			animation: fadeInUp 0.5s ease-out 0.5s both;
		}
		.remember-row input { display: none; }
		.cbox {
			width: 17px; height: 17px;
			border: 1.5px solid #d5d5d5;
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			transition: all 0.2s;
		}
		.cbox svg { width: 10px; height: 10px; opacity: 0; transition: opacity 0.15s; }
		.remember-row input:checked ~ .cbox { background: var(--gold); border-color: var(--gold); }
		.remember-row input:checked ~ .cbox svg { opacity: 1; }
		.remember-row:hover .cbox { border-color: var(--gold); }
		.r-text { font-size: 0.8rem; color: #737373; user-select: none; }

		/* ── Submit ── */
		.submit-btn {
			width: 100%; height: 50px;
			border: none; border-radius: 14px;
			background: linear-gradient(135deg, #1e1e24 0%, #16161c 100%);
			color: #C0C0C0;
			font-size: 0.92rem; font-weight: 800;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			letter-spacing: 0.5px;
			position: relative; overflow: hidden;
			transition: transform 0.2s;
			box-shadow: 0 4px 18px rgba(0,0,0,0.15);
			animation: fadeInUp 0.5s ease-out 0.55s both;
		}
		.submit-btn .btn-label {
			background: linear-gradient(135deg, #888888, #b0b0b0, #d0d0d0);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		.submit-btn:hover .btn-label {
			background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		.submit-btn:hover { transform: translateY(-1px); }
		.submit-btn:active { transform: translateY(0); }

		/* ── Separator ── */
		.sep-line {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 1.2rem 0;
			animation: fadeInUp 0.5s ease-out 0.6s both;
		}
		.sep-line::before, .sep-line::after {
			content: ''; flex: 1; height: 1px;
			background: #e5e5e5;
		}
		.sep-line span { font-size: 0.7rem; color: #a0a0a0; }

		/* ── Google ── */
		.g-btn {
			width: 100%; height: 46px;
			border: 1.5px solid #e5e5e5;
			border-radius: 14px;
			background: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			font-size: 0.84rem; font-weight: 700;
			color: #555555;
			cursor: pointer; text-decoration: none;
			transition: border-color 0.25s, background 0.25s, transform 0.2s;
			animation: fadeInUp 0.5s ease-out 0.65s both;
		}
		.g-btn:hover {
			border-color: var(--gold);
			background: #fef9e7;
			color: #6b6356;
			transform: translateY(-1px);
			text-decoration: none;
		}
		.g-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

		.copy-text {
			text-align: center;
			margin-top: 1.8rem;
			font-size: 0.68rem;
			color: #a0a0a0;
			animation: fadeInUp 0.5s ease-out 0.7s both;
		}
		.copy-text a { color: var(--gold-dark); font-weight: 700; text-decoration: none; }
		.copy-text a:hover { color: var(--gold); }

		/* ═══════════════════════════════
		   Accent divider
		   ═══════════════════════════════ */
		.accent-line {
			width: 2px;
			background: linear-gradient(180deg,
				transparent 5%,
				var(--gold-dark) 20%,
				var(--gold) 35%,
				var(--gold-light) 50%,
				var(--silver) 60%,
				var(--silver-light) 70%,
				transparent 95%);
			flex-shrink: 0;
		}

		/* ═══════════════════════════════
		   LEFT: Brand Panel
		   ═══════════════════════════════ */
		.brand-side {
			width: 46%;
			background: linear-gradient(160deg, #1e1e24 0%, #16161c 100%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			padding: 3rem 2rem;
			animation: panelLeft 0.8s cubic-bezier(0.22,1,0.36,1) both;
		}
		@keyframes panelLeft {
			from { opacity: 0; transform: translateX(-40px); }
			to   { opacity: 1; transform: translateX(0); }
		}

		/* Corner frames */
		.corner { position: absolute; width: 56px; height: 56px; }
		.corner-tl { top: 20px; right: 20px;
			border-top: 1.5px solid rgba(212,168,40,0.22);
			border-right: 1.5px solid rgba(212,168,40,0.22); }
		.corner-br { bottom: 20px; left: 20px;
			border-bottom: 1.5px solid rgba(138,150,166,0.15);
			border-left: 1.5px solid rgba(138,150,166,0.15); }
		.corner-tr { top: 20px; left: 20px;
			border-top: 1.5px solid rgba(138,150,166,0.1);
			border-left: 1.5px solid rgba(138,150,166,0.1); }
		.corner-bl { bottom: 20px; right: 20px;
			border-bottom: 1.5px solid rgba(212,168,40,0.1);
			border-right: 1.5px solid rgba(212,168,40,0.1); }

		/* ── Animated background mesh ── */
		.brand-side::before {
			content: '';
			position: absolute;
			inset: 0;
			background-image:
				linear-gradient(rgba(212,168,40,0.04) 1px, transparent 1px),
				linear-gradient(90deg, rgba(212,168,40,0.04) 1px, transparent 1px);
			background-size: 40px 40px;
			animation: meshMove 20s linear infinite;
			pointer-events: none;
			z-index: 0;
		}
		@keyframes meshMove {
			0%   { background-position: 0 0; }
			100% { background-position: 40px 40px; }
		}

		/* Aurora glow */
		.brand-aurora {
			position: absolute;
			inset: 0;
			background: radial-gradient(ellipse 80% 60% at 50% 50%,
				rgba(212,168,40,0.05) 0%, transparent 65%);
			animation: auroraShift 8s ease-in-out infinite alternate;
			pointer-events: none;
			z-index: 0;
		}
		@keyframes auroraShift {
			0%   { transform: translate(-10%,-10%) scale(1);   opacity: 0.5; }
			50%  { transform: translate(10%, 5%)  scale(1.2);  opacity: 1;   }
			100% { transform: translate(-5%, 10%) scale(0.9);  opacity: 0.6; }
		}

		/* Ambient glow */
		.brand-glow {
			position: absolute;
			width: 380px; height: 380px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(212,168,40,0.07) 0%, transparent 70%);
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			pointer-events: none;
			z-index: 0;
			animation: glowPulse 4s ease-in-out infinite;
		}
		@keyframes glowPulse {
			0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1);    }
			50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.15); }
		}

		/* ── Floating Icons ── */
		.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
		.fi {
			position: absolute;
			bottom: -40px;
			display: block;
			animation: floatIcon linear infinite;
			opacity: 0;
			z-index: 0;
		}
		/* Gold coin dots */
		.fi-g { color: var(--gold); }
		/* Silver diamond */
		.fi-s { color: var(--silver); }
		/* Light gold */
		.fi-gl { color: var(--gold-light); }

		.fi1  { left:8%;  width:28px; height:28px; animation-duration:9s;   animation-delay:0s;   }
		.fi2  { left:18%; width:22px; height:22px; animation-duration:12s;  animation-delay:2s;   }
		.fi3  { left:28%; width:30px; height:30px; animation-duration:8s;   animation-delay:1s;   }
		.fi4  { left:38%; width:20px; height:20px; animation-duration:11s;  animation-delay:3.5s; }
		.fi5  { left:48%; width:26px; height:26px; animation-duration:7s;   animation-delay:0.5s; }
		.fi6  { left:57%; width:24px; height:24px; animation-duration:13s;  animation-delay:5s;   }
		.fi7  { left:65%; width:28px; height:28px; animation-duration:9.5s; animation-delay:2.5s; }
		.fi8  { left:74%; width:22px; height:22px; animation-duration:10s;  animation-delay:4s;   }
		.fi9  { left:83%; width:26px; height:26px; animation-duration:8.5s; animation-delay:1.5s; }
		.fi10 { left:92%; width:20px; height:20px; animation-duration:11.5s; animation-delay:6s;  }
		.fi11 { left:22%; width:24px; height:24px; animation-duration:14s;  animation-delay:7s;   }
		.fi12 { left:70%; width:22px; height:22px; animation-duration:10s;  animation-delay:3s;   }

		@keyframes floatIcon {
			0%   { transform: translateY(0)    rotate(0deg)   scale(0.8); opacity: 0; }
			8%   { opacity: 0.75; }
			85%  { opacity: 0.5; }
			100% { transform: translateY(-105vh) rotate(180deg) scale(0.4); opacity: 0; }
		}

		/* ── Logo ── */
		.logo-area {
			position: relative; z-index: 1;
			width: 170px; height: 170px;
			animation: logoEntry 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;
		}
		@keyframes logoEntry {
			from { opacity: 0; transform: scale(0.8) translateY(20px); }
			to   { opacity: 1; transform: scale(1) translateY(0); }
		}
		.logo-area img {
			width: 100%; height: 100%;
			object-fit: contain;
			filter: drop-shadow(0 6px 28px rgba(212,168,40,0.18));
			animation: logoFloat 5s ease-in-out infinite;
		}
		@keyframes logoFloat {
			0%, 100% { transform: translateY(0); }
			50%       { transform: translateY(-8px); }
		}

		/* ── Brand Name ── */
		.brand-name {
			font-size: 1.9rem; font-weight: 900;
			text-align: center; position: relative; z-index: 1;
			margin-bottom: 0.3rem;
			animation: fadeInUp 0.6s ease-out 0.5s both;
		}
		.brand-name .gp {
			background: linear-gradient(90deg,
				var(--gold-dark), var(--gold), var(--gold-light), var(--gold));
			background-size: 200% 100%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: textShine 4s ease-in-out infinite;
		}
		.brand-name .sp {
			background: linear-gradient(90deg,
				#888888, #b0b0b0, #d0d0d0, #b0b0b0);
			background-size: 200% 100%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: textShine 4s ease-in-out infinite;
			animation-delay: 0.5s;
		}
		@keyframes textShine {
			0%, 100% { background-position: 0% 50%; }
			50%       { background-position: 100% 50%; }
		}

		/* ── Persian subtitle ── */
		.brand-fa {
			font-size: 0.82rem;
			color: #b0b0b0;
			text-align: center;
			position: relative; z-index: 1;
			margin-bottom: 0.7rem;
			animation: fadeInUp 0.6s ease-out 0.6s both;
		}

		/* ── Ornament ── */
		.ornament {
			display: flex;
			align-items: center;
			width: 170px;
			margin: 0 auto 0.7rem;
			position: relative; z-index: 1;
			animation: fadeInUp 0.6s ease-out 0.65s both;
		}
		.ornament::before, .ornament::after {
			content: ''; flex: 1; height: 1px;
			background: linear-gradient(90deg, transparent, rgba(212,168,40,0.3), transparent);
		}
		.ornament-diamond {
			width: 7px; height: 7px;
			background: var(--gold);
			transform: rotate(45deg);
			margin: 0 10px;
			opacity: 0.55;
		}

		.brand-tagline {
			font-size: 0.72rem;
			color: #b5b5b5;
			text-align: center;
			letter-spacing: 1px;
			position: relative; z-index: 1;
			animation: fadeInUp 0.6s ease-out 0.7s both;
		}

		/* ═══════════════════════════════
		   MOBILE
		   ═══════════════════════════════ */
		@media (max-width: 768px) {
			body { overflow-y: auto; }
			.split { min-height: 100vh; }
			.brand-side { display: none; }
			.accent-line { display: none; }
			.form-side {
				width: 100%;
				min-height: 100vh;
				padding: 2rem 1.5rem;
				align-items: center;
			}
			.form-container { max-width: 100%; }
		}