:root {
	color-scheme: dark;
	font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#web-auth-shell {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
	overflow: auto;
	touch-action: pan-y;
	background:
		radial-gradient(circle at 12% 12%, rgba(19, 196, 255, .38), transparent 32%),
		radial-gradient(circle at 88% 18%, rgba(255, 115, 38, .35), transparent 31%),
		radial-gradient(circle at 50% 100%, rgba(122, 67, 255, .35), transparent 38%),
		linear-gradient(145deg, #061631 0%, #081c43 48%, #160b38 100%);
}

#web-auth-shell[hidden] { display: none; }

.auth-orb { position: fixed; border-radius: 50%; filter: blur(2px); opacity: .7; pointer-events: none; animation: auth-float 7s ease-in-out infinite; }
.auth-orb.one { width: 90px; height: 90px; top: 9%; left: 5%; background: linear-gradient(135deg, #23d7ff, #1555ff); }
.auth-orb.two { width: 64px; height: 64px; right: 8%; bottom: 12%; background: linear-gradient(135deg, #ffcd45, #ff4f78); animation-delay: -2.5s; }

.auth-card {
	position: relative;
	width: min(460px, 100%);
	box-sizing: border-box;
	padding: clamp(22px, 5.5vw, 34px);
	border: 1px solid rgba(151, 214, 255, .6);
	border-radius: 30px;
	background: linear-gradient(155deg, rgba(16, 48, 99, .96), rgba(7, 19, 50, .97));
	box-shadow: 0 26px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.12);
	backdrop-filter: blur(18px);
}

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #15cfff, #5652ff 58%, #ff5e92); box-shadow: 0 8px 28px rgba(31, 162, 255, .45); font-weight: 1000; font-size: 24px; }
.auth-brand-copy strong { display: block; font-size: 20px; letter-spacing: .02em; }
.auth-brand-copy span { color: #a9c8ed; font-size: 13px; }

.auth-callout {
	position: relative;
	margin: 0 0 18px;
	padding: 14px 44px 14px 15px;
	border-radius: 18px;
	background: linear-gradient(110deg, rgba(255, 103, 52, .95), rgba(255, 55, 130, .92));
	box-shadow: 0 10px 30px rgba(255, 69, 101, .25);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
}
.auth-callout::after { content: "↓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 27px; animation: auth-point 1s ease-in-out infinite; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; margin-bottom: 20px; border-radius: 17px; background: rgba(2, 10, 30, .65); }
.auth-tab { min-height: 50px; border: 0; border-radius: 13px; color: #bed8f6; background: transparent; font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.auth-tab[aria-selected="true"] { color: #07152f; background: linear-gradient(135deg, #71e8ff, #fff 48%, #ffca70); box-shadow: 0 6px 18px rgba(68, 207, 255, .25); }

.auth-title { margin: 0; font-size: clamp(27px, 7vw, 36px); line-height: 1.05; }
.auth-subtitle { margin: 9px 0 20px; color: #c4d9f3; line-height: 1.45; }
.auth-field { display: grid; gap: 7px; margin: 0 0 14px; }
.auth-field span { color: #d8eaff; font-size: 14px; font-weight: 750; }
.auth-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	border: 2px solid rgba(134, 188, 238, .38);
	border-radius: 15px;
	outline: 0;
	color: #fff;
	background: rgba(2, 12, 34, .72);
	font: inherit;
	font-size: 16px;
	caret-color: #68e7ff;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}
.auth-field input:focus { border-color: #58dcff; box-shadow: 0 0 0 4px rgba(38, 201, 255, .18); transform: translateY(-1px); }
.auth-field input::placeholder { color: #7898bd; }

.auth-primary, .auth-google { box-sizing: border-box; width: 100%; min-height: 58px; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 900; touch-action: manipulation; }
.auth-primary { border: 0; color: #171022; background: linear-gradient(120deg, #ffca54, #ff7953 52%, #ff5da5); box-shadow: 0 12px 30px rgba(255, 103, 91, .3); }
.auth-primary:active { transform: scale(.985); }
.auth-primary:disabled, .auth-google:disabled { opacity: .62; cursor: wait; }
.auth-separator { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #89a8cb; font-size: 13px; }
.auth-separator::before, .auth-separator::after { content: ""; height: 1px; flex: 1; background: rgba(151, 190, 230, .25); }
.auth-google { position: relative; display: grid; place-items: center; overflow: hidden; border: 2px solid #8dc8ff; color: #46617f; background: #fff; }
#auth-google-render { position: relative; z-index: 2; display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; }
#auth-google-render iframe { max-width: 100% !important; }
#auth-google-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: 14px; }
.auth-status { min-height: 21px; margin: 13px 2px 0; color: #a9c9ee; text-align: center; font-size: 14px; line-height: 1.4; }
.auth-status.error { color: #ffb0b8; }
.auth-status.success { color: #8dffc5; }
.auth-progress { display: none; margin-top: 14px; }
.auth-progress.show { display: block; }
.auth-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.auth-progress-bar { width: 16%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3ee5ff, #ffbf4c, #ff57a0); transition: width .25s; }
.auth-progress small { display: block; margin-top: 8px; color: #bcd3ee; text-align: center; }

@keyframes auth-point { 50% { transform: translateY(-35%); } }
@keyframes auth-float { 50% { transform: translateY(16px) translateX(8px); } }
@media (max-height: 710px) { .auth-card { padding: 19px; } .auth-brand { margin-bottom: 11px; } .auth-callout { margin-bottom: 12px; } .auth-subtitle { margin-bottom: 14px; } .auth-field input { min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { .auth-orb, .auth-callout::after { animation: none; } }