:root {
			--ab-bg0: #0b1020;
			--ab-bg1: #151b33;
			--ab-card: rgba(255,255,255,0.06);
			--ab-stroke: rgba(255,255,255,0.12);
			--ab-text: #f8fafc;
			--ab-muted: #94a3b8;
			--ab-accent: #8b5cf6;
			--ab-accent2: #38bdf8;
		}
		* { box-sizing: border-box; }
		html, body {
			margin: 0;
			min-height: 100%;
			font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
			color: var(--ab-text);
			background:
				radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,.35), transparent 55%),
				radial-gradient(900px 500px at 100% 0%, rgba(56,189,248,.22), transparent 50%),
				linear-gradient(165deg, var(--ab-bg0), var(--ab-bg1) 55%, #0a0f1c);
		}
		body {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 32px 20px;
		}
		.ab-cc {
			width: 100%;
			max-width: 560px;
			text-align: center;
			padding: 48px 36px 40px;
			border-radius: 24px;
			background: var(--ab-card);
			border: 1px solid var(--ab-stroke);
			backdrop-filter: blur(16px);
			box-shadow: 0 30px 80px rgba(0,0,0,.45);
			animation: ab-rise .7s ease both;
		}
		@keyframes ab-rise {
			from { opacity: 0; transform: translateY(16px); }
			to { opacity: 1; transform: none; }
		}
		.ab-cc-logo {
			width: 88px;
			height: auto;
			object-fit: contain;
			margin: 0 auto 20px;
			display: block;
			filter: drop-shadow(0 8px 24px rgba(139,92,246,.35));
		}
		.ab-cc-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 14px;
			border-radius: 999px;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .04em;
			text-transform: uppercase;
			color: #e9d5ff;
			background: rgba(139,92,246,.2);
			border: 1px solid rgba(167,139,250,.35);
			margin-bottom: 22px;
		}
		.ab-cc-badge i {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #a78bfa;
			box-shadow: 0 0 0 0 rgba(167,139,250,.6);
			animation: ab-pulse 1.8s ease infinite;
		}
		@keyframes ab-pulse {
			0% { box-shadow: 0 0 0 0 rgba(167,139,250,.55); }
			70% { box-shadow: 0 0 0 10px rgba(167,139,250,0); }
			100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
		}
		h1 {
			margin: 0 0 14px;
			font-size: clamp(1.75rem, 4vw, 2.25rem);
			font-weight: 700;
			letter-spacing: -0.02em;
			line-height: 1.2;
		}
		.ab-cc-msg {
			margin: 0 auto 28px;
			max-width: 42ch;
			font-size: 1.05rem;
			line-height: 1.65;
			color: var(--ab-muted);
		}
		.ab-cc-site {
			margin: 0 0 28px;
			font-size: .95rem;
			font-weight: 600;
			color: #cbd5e1;
		}
		.ab-cc-bar {
			height: 4px;
			border-radius: 4px;
			background: rgba(255,255,255,.08);
			overflow: hidden;
			margin: 0 auto 28px;
			max-width: 220px;
		}
		.ab-cc-bar span {
			display: block;
			height: 100%;
			width: 42%;
			border-radius: 4px;
			background: linear-gradient(90deg, var(--ab-accent), var(--ab-accent2));
			animation: ab-load 2.2s ease-in-out infinite;
		}
		@keyframes ab-load {
			0% { transform: translateX(-80%); }
			100% { transform: translateX(280%); }
		}
		.ab-cc-login {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 12px 22px;
			border-radius: 12px;
			font-size: 14px;
			font-weight: 600;
			text-decoration: none;
			color: #0f172a;
			background: #f8fafc;
			transition: transform .15s ease, box-shadow .15s ease;
			box-shadow: 0 8px 24px rgba(0,0,0,.25);
		}
		.ab-cc-login:hover {
			transform: translateY(-1px);
			box-shadow: 0 12px 28px rgba(0,0,0,.35);
		}
		.ab-cc-foot {
			margin-top: 28px;
			font-size: 12px;
			color: #64748b;
		}
		@media (max-width: 480px) {
			.ab-cc { padding: 36px 22px 32px; }
		}
