:root {
	--bg-1: #ffffff;
	--bg-2: #f8fafc;
	--bg-3: #f1f5f9;
	--card: #ffffff;
	--border: #e5e7eb;
	--shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	--fg: #0f172a;
	--muted: #64748b;
	--muted-2: #94a3b8;
	--primary: #3b82f6;
	--primary-2: #2563eb;
	--danger: #ef4444;
	--success: #10b981;
}

 * { box-sizing: border-box; }

 html, body { height: 100%; }

body {
 	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	color: var(--fg);
	background: var(--bg-2);
 }

 .page { min-height: 100%; display: grid; place-items: center; padding: 24px; }

 .shell { width: min(1080px, 100%); display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }

 .brand { display: flex; align-items: center; gap: 16px; }
.brand .logo { position: relative; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255,255,255,.15); }
.brand .logo::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, #60a5fa, #2563eb, #60a5fa); filter: blur(10px); opacity: .85; animation: spin 8s linear infinite; }
.brand .logo::after { content: ""; position: absolute; inset: 2px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -20px 40px rgba(0,0,0,.25); }
 .brand .meta h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: .3px; }
 .brand .meta p { margin: 0; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 28px; }
 .card-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .2px; }

 .flashes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.flash { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; color: var(--fg); }
.flash.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.flash.success { border-color: #bbf7d0; background: #ecfdf5; color: #166534; }
.flash.info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }

 .form { display: grid; gap: 14px; }
 .field { display: grid; gap: 8px; }
 label { font-size: 13px; color: var(--muted); }
 input[type="text"], input[type="password"] {
 	appearance: none;
 	width: 100%;
 	padding: 12px 12px;
 	border-radius: 12px;
 	border: 1px solid var(--border);
	background: #ffffff;
 	color: var(--fg);
 	outline: none;
 	transition: border-color .2s ease, box-shadow .2s ease;
 }
 input::placeholder { color: var(--muted-2); }
 input:focus { border-color: rgba(59, 130, 246, .65); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

 .input-with-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ghost { appearance: none; background: #f1f5f9; color: #334155; border: 1px solid #e5e7eb; padding: 10px 12px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.06); transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ghost:hover { color: #0f172a; border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ghost:active { transform: translateY(1px); }

/* Password toggle specific tweaks */
#toggle-password { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; }
#toggle-password::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(59,130,246,.25), 0 0 0 0 rgba(59,130,246,.0); transition: box-shadow .25s ease; }
#toggle-password:hover::after { box-shadow: inset 0 0 0 1px rgba(59,130,246,.45), 0 0 0 8px rgba(59,130,246,.10); }

 .captcha { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
 #captcha-img { width: 160px; height: 60px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; cursor: pointer; }

 .client-error { border: 1px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .1); color: #fecaca; padding: 10px 12px; border-radius: 10px; }

 .primary { appearance: none; border: 0; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(37, 99, 235, .35); }
 .primary:hover { filter: brightness(1.05); }

 .note { margin-top: 12px; color: var(--muted); font-size: 12px; }

 @media (max-width: 900px) {
 	.shell { grid-template-columns: 1fr; }
 }

 @media (max-width: 560px) {
 	.page { padding: 16px; }
 	.card { padding: 20px; border-radius: 14px; }
 	.brand .logo { width: 44px; height: 44px; border-radius: 12px; }
 	.brand .meta h1 { font-size: 22px; }
 }

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.brand .logo::before { animation: none; }
}