:root{
	--bg:#f8fafc;
	--card:#ffffff;
	--accent:#0b3d91; /* deep navy */
	--accent-2:#f0a500; /* warm gold */
	--muted:#596174;
	--glass: rgba(255,255,255,0.72);
}

*{box-sizing:border-box;font-family: 'Cairo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}

html,body{height:100%}
body{
	margin:0;
	min-height:100vh;
	background: radial-gradient(1200px 400px at 10% 10%, rgba(36,99,255,0.06), transparent 8%),
							radial-gradient(800px 300px at 90% 90%, rgba(107,140,255,0.04), transparent 10%),
							linear-gradient(180deg,var(--bg), #fff 60%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:28px;
}

.card{
	width:100%;
	max-width:820px;
	background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
	border-radius:14px;
	padding:28px;
	box-shadow: 0 10px 30px rgba(20,40,80,0.08);
	position:relative;
	overflow:hidden;
}

.brand{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.brand .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:white;font-size:22px;box-shadow:0 8px 26px rgba(11,36,73,0.12)}
.brand h1{margin:0;font-size:1.25rem;color:#0b2545}
.brand .sub{font-size:0.9rem;color:var(--muted);margin-top:4px}

.lead{margin:0 0 18px;color:var(--muted)}
label{display:block;margin:10px 0;font-size:0.95rem;color:#233049}
input{width:100%;padding:12px 14px;border:1px solid rgba(173,216,230,0.9);border-radius:10px;margin-top:8px;background:linear-gradient(180deg,#eaf6ff,#f7fdff);transition:box-shadow .18s ease,border-color .18s ease;color:#08304a}
input::placeholder{color:rgba(8,48,74,0.4)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 8px 22px rgba(11,61,145,0.08)}

.buttons{display:flex;gap:12px;margin-top:16px}
button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:600;box-shadow:0 10px 30px rgba(11,36,73,0.08);transition:transform .12s ease,box-shadow .12s ease}
button:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(11,36,73,0.12)}
button:active{transform:translateY(0)}
button.muted{background:transparent;color:#0b2545;border:1px solid #eef3ff;box-shadow:none}

.result{margin-top:20px;padding-top:18px;border-top:1px solid rgba(14,54,99,0.04)}
.full{display:flex;gap:8px;align-items:center}
.codes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.code{display:flex;gap:8px;align-items:center}
.code input{padding:10px;text-align:center;border-radius:8px;background:#eaf6ff;border:1px solid rgba(173,216,230,0.9);color:#08304a}
.note{font-size:0.88rem;color:var(--muted);margin-top:12px}

/* Login page tweaks */
.login-card{max-width:420px;text-align:right}
.login-card label{margin-top:12px}
.login-brand{margin-bottom:14px}

/* Logout button */
.logout-btn{position:absolute;top:18px;left:18px;padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(11,38,82,0.06);color:#0b2545}

/* small screens */
@media (max-width:760px){
	.card{padding:20px;border-radius:12px}
	.codes{grid-template-columns:repeat(2,1fr)}
	.brand .logo{width:48px;height:48px}
}

@media (max-width:420px){
	body{padding:14px}
	.brand{gap:10px}
	.brand h1{font-size:1.05rem}
	.brand .sub{font-size:0.85rem}
}

/* Snackbar (bottom toast) */
.snackbar{
	position:fixed;
	left:50%;
	transform:translateX(-50%) translateY(120%);
	bottom:18px;
	min-width:160px;
	max-width:90%;
	background:rgba(11,61,145,0.95);
	color:#fff;
	padding:10px 16px;
	border-radius:10px;
	box-shadow:0 10px 30px rgba(11,36,73,0.18);
	font-weight:600;
	text-align:center;
	transition:transform .36s cubic-bezier(.22,.9,.28,1),opacity .2s;
	opacity:0;
	z-index:99999;
}
.snackbar.show{ transform:translateX(-50%) translateY(0); opacity:1 }
.snackbar.error{ background:rgba(190,41,41,0.95); box-shadow:0 10px 30px rgba(190,41,41,0.12) }