/* Student Certificate Verification System — frontend (glass UI). */

.scvs-shell{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:28px 16px;
	min-height:280px;
	background:
		radial-gradient(1200px 700px at 10% 10%, rgba(110,168,255,.35), transparent 55%),
		radial-gradient(900px 600px at 90% 20%, rgba(167,139,250,.25), transparent 55%),
		radial-gradient(900px 700px at 60% 90%, rgba(52,211,153,.18), transparent 55%);
}

@media (prefers-color-scheme: light){
	.scvs-shell{
		background:
			radial-gradient(1200px 700px at 10% 10%, rgba(59,130,246,.18), transparent 55%),
			radial-gradient(900px 600px at 90% 20%, rgba(147,51,234,.12), transparent 55%),
			radial-gradient(900px 700px at 60% 90%, rgba(16,185,129,.10), transparent 55%),
			linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,247,251,.92));
	}
}

.scvs-card{
	width:min(760px, 100%);
	border-radius:22px;
	padding:26px 22px;
	position:relative;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.22);
	box-shadow:
		0 24px 70px rgba(0,0,0,.35),
		0 2px 0 rgba(255,255,255,.06) inset;
	background:rgba(12,16,26,.38);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	transform:translateZ(0);
	animation:scvsFadeUp .55s ease both;
}

@media (prefers-color-scheme: light){
	.scvs-card{
		border:1px solid rgba(15,23,42,.10);
		box-shadow:
			0 26px 80px rgba(15,23,42,.12),
			0 2px 0 rgba(255,255,255,.65) inset;
		background:rgba(255,255,255,.58);
	}
}

@keyframes scvsFadeUp{
	from{opacity:0;transform:translate3d(0,10px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}

@media (prefers-reduced-motion: reduce){
	.scvs-card{animation:none}
}

.scvs-card::before{
	content:"";
	position:absolute;
	inset:-2px;
	background:
		linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.05), rgba(255,255,255,.18));
	opacity:.35;
	pointer-events:none;
	mask:linear-gradient(#000, transparent);
}

.scvs-card__header{
	position:relative;
	z-index:1;
	text-align:center;
	margin-bottom:18px;
}

.scvs-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:7px 12px;
	border-radius:999px;
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-weight:700;
	color:rgba(255,255,255,.92);
	border:1px solid rgba(255,255,255,.22);
	background:rgba(255,255,255,.06);
}

@media (prefers-color-scheme: light){
	.scvs-badge{
		color:rgba(15,23,42,.82);
		border:1px solid rgba(15,23,42,.12);
		background:rgba(255,255,255,.55);
	}
}

.scvs-title{
	margin:14px 0 8px;
	font-size:clamp(22px, 3vw, 30px);
	line-height:1.15;
	font-weight:800;
	color:rgba(255,255,255,.96);
	letter-spacing:-.02em;
}

@media (prefers-color-scheme: light){
	.scvs-title{color:rgba(15,23,42,.92)}
}

.scvs-subtitle{
	margin:0 auto;
	max-width:56ch;
	color:rgba(255,255,255,.74);
	font-size:14px;
	line-height:1.55;
}

@media (prefers-color-scheme: light){
	.scvs-subtitle{color:rgba(15,23,42,.62)}
}

.scvs-form{
	position:relative;
	z-index:1;
	margin-top:10px;
}

.scvs-label{
	display:block;
	text-align:center;
	font-size:13px;
	font-weight:650;
	color:rgba(255,255,255,.78);
	margin:14px 0 10px;
}

@media (prefers-color-scheme: light){
	.scvs-label{color:rgba(15,23,42,.62)}
}

.scvs-field{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
}

.scvs-input{
	flex:1 1 260px;
	min-height:52px;
	padding:12px 14px;
	border-radius:16px;
	border:1px solid rgba(255,255,255,.22);
	background:rgba(0,0,0,.25);
	color:rgba(255,255,255,.94);
	outline:none;
	box-shadow:0 14px 40px rgba(0,0,0,.25);
	transition:border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

@media (prefers-color-scheme: light){
	.scvs-input{
		border:1px solid rgba(15,23,42,.14);
		background:rgba(255,255,255,.72);
		color:rgba(15,23,42,.92);
		box-shadow:0 14px 40px rgba(15,23,42,.08);
	}
}

.scvs-input:focus{
	border-color:rgba(110,168,255,.85);
	box-shadow:
		0 14px 40px rgba(0,0,0,.25),
		0 0 0 4px rgba(110,168,255,.18);
}

.scvs-button{
	min-height:52px;
	padding:0 18px;
	border-radius:16px;
	border:1px solid rgba(255,255,255,.22);
	background:linear-gradient(135deg, rgba(110,168,255,.95), rgba(147,112,219,.95));
	color:#081022;
	font-weight:850;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	box-shadow:0 18px 48px rgba(110,168,255,.28);
	transition:transform .06s ease, filter .2s ease, opacity .2s ease;
	position:relative;
}

.scvs-button:active{transform:translateY(1px)}
.scvs-button[disabled]{opacity:.65;cursor:not-allowed;filter:saturate(.85)}

.scvs-button__label{display:inline-block}

.scvs-spinner{
	width:18px;
	height:18px;
	border-radius:999px;
	border:2px solid rgba(8,16,34,.35);
	border-top-color:rgba(8,16,34,.95);
	animation:scvsSpin .85s linear infinite;
	opacity:0;
	transform:scale(.92);
	transition:opacity .2s ease;
}

.scvs-button.is-loading .scvs-spinner{opacity:1}
.scvs-button.is-loading .scvs-button__label{opacity:.92}

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

@media (prefers-reduced-motion: reduce){
	.scvs-spinner{animation:none;border-top-color:rgba(8,16,34,.95)}
}

.scvs-hint{
	text-align:center;
	margin:12px 0 0;
	font-size:12px;
	color:rgba(255,255,255,.62);
}

@media (prefers-color-scheme: light){
	.scvs-hint{color:rgba(15,23,42,.52)}
}

.scvs-alert{
	margin-top:14px;
	padding:12px 14px;
	border-radius:14px;
	border:1px solid rgba(239,68,68,.35);
	background:rgba(239,68,68,.12);
	color:rgba(255,230,230,.95);
	text-align:center;
	font-size:13px;
	line-height:1.45;
}

@media (prefers-color-scheme: light){
	.scvs-alert{
		border:1px solid rgba(220,38,38,.28);
		background:rgba(254,226,226,.55);
		color:rgba(127,29,29,.92);
	}
}