:root {
	--sfal-bg: #07111f;
	--sfal-panel: rgba(255,255,255,.96);
	--sfal-text: #0f172a;
	--sfal-muted: #64748b;
	--sfal-blue: #2563eb;
	--sfal-cyan: #06b6d4;
	--sfal-green: #16a34a;
	--sfal-red: #dc2626;
	--sfal-border: rgba(148,163,184,.35);
	--sfal-shadow: 0 22px 70px rgba(2,8,23,.18);
}

.sfal-face-widget {
	max-width: 620px;
}

.sfal-login-widget {
	margin: 0 0 16px;
	max-width: 100%;
}

.sfal-panel {
	max-width: 760px;
	padding: 26px;
	border: 1px solid var(--sfal-border);
	border-radius: 22px;
	background:
		radial-gradient(circle at top left, rgba(6,182,212,.16), transparent 35%),
		linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	box-shadow: var(--sfal-shadow);
	color: var(--sfal-text);
}

.sfal-panel h3 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.sfal-onhosty-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sfal-muted);
}

.sfal-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.sfal-brand-dot,
.sfal-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	letter-spacing: -.04em;
	color: #fff;
	background: linear-gradient(135deg, var(--sfal-blue), var(--sfal-cyan));
	box-shadow: 0 12px 30px rgba(37,99,235,.3);
}

.sfal-brand-dot {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	font-size: 13px;
}

.sfal-camera-frame {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, rgba(6,182,212,.18), rgba(37,99,235,.12)),
		#08111f;
	border: 1px solid rgba(125,211,252,.35);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 45px rgba(15,23,42,.22);
}

.sfal-camera-frame:before {
	content: "";
	position: absolute;
	inset: 14px;
	z-index: 2;
	pointer-events: none;
	border-radius: 18px;
	border: 1px dashed rgba(255,255,255,.35);
	box-shadow: 0 0 35px rgba(6,182,212,.18);
}

.login .sfal-camera-frame {
	max-width: 100%;
}

.sfal-camera-frame video,
.sfal-camera-frame canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfal-camera-frame canvas {
	pointer-events: none;
}

.sfal-status {
	min-height: 24px;
	margin: 14px 0;
	padding: 10px 12px;
	font-weight: 700;
	border-radius: 14px;
	background: rgba(241,245,249,.85);
	color: var(--sfal-text);
}

.sfal-status-error {
	color: var(--sfal-red);
	background: #fff1f2;
}

.sfal-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.sfal-actions .button,
.sfal-panel .button {
	border-radius: 999px !important;
	padding: 6px 18px !important;
	min-height: 40px;
	font-weight: 800;
}

.sfal-actions .button-primary,
.sfal-panel .button-primary,
.sfal-admin-wrap .button-primary {
	background: linear-gradient(135deg, var(--sfal-blue), var(--sfal-cyan)) !important;
	border: 0 !important;
	box-shadow: 0 12px 30px rgba(37,99,235,.25) !important;
}

.sfal-panel input[data-sfal-login] {
	width: 100%;
	max-width: 420px;
	padding: 12px 14px;
	border: 1px solid var(--sfal-border);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

.sfal-notice {
	padding: 13px 15px;
	border-radius: 16px;
	margin: 14px 0;
	border: 1px solid var(--sfal-border);
	background: #f8fafc;
	color: var(--sfal-text);
}

.sfal-notice-error {
	border-color: rgba(220,38,38,.35);
	background: #fff1f2;
}

.sfal-notice-success {
	border-color: rgba(22,163,74,.35);
	background: #f0fdf4;
}

.login .sfal-status {
	font-size: 13px;
	line-height: 1.4;
}

.login .sfal-face-widget .submit {
	margin-bottom: 0;
}

.sfal-admin-wrap {
	max-width: 1080px;
}

.sfal-admin-hero {
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 18px 0 22px;
	padding: 26px;
	border-radius: 26px;
	background:
		radial-gradient(circle at 15% 20%, rgba(6,182,212,.22), transparent 34%),
		linear-gradient(135deg, #06111f, #102546 55%, #07111f);
	color: #fff;
	box-shadow: var(--sfal-shadow);
	overflow: hidden;
	position: relative;
}

.sfal-admin-hero:after {
	content: "";
	position: absolute;
	inset: auto -80px -120px auto;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(37,99,235,.38), transparent 62%);
	pointer-events: none;
}

.sfal-brand-mark {
	width: 74px;
	height: 74px;
	border-radius: 24px;
	font-size: 22px;
	flex: 0 0 auto;
}

.sfal-admin-hero h1 {
	color: #fff;
	font-size: 34px;
	line-height: 1;
	margin: 0 0 8px;
	font-weight: 900;
	letter-spacing: -.04em;
}

.sfal-admin-hero p {
	margin: 0;
	max-width: 760px;
	color: rgba(255,255,255,.76);
	font-size: 15px;
}

.sfal-admin-hero .sfal-kicker {
	margin: 0 0 7px;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 11px;
	font-weight: 900;
	color: #67e8f9;
}

.sfal-admin-wrap form,
.sfal-admin-wrap .widefat {
	background: rgba(255,255,255,.96);
	border: 1px solid var(--sfal-border);
	border-radius: 22px;
	box-shadow: 0 14px 42px rgba(15,23,42,.08);
	padding: 14px 20px;
}

.sfal-admin-wrap .form-table th {
	font-weight: 900;
	color: var(--sfal-text);
}

.sfal-admin-wrap input[type="number"],
.sfal-admin-wrap select,
.sfal-admin-wrap textarea {
	border-radius: 12px;
	border-color: rgba(148,163,184,.65);
}

.sfal-admin-wrap .description {
	color: var(--sfal-muted);
}

@media (max-width: 640px) {
	.sfal-admin-hero,
	.sfal-card-head {
		align-items: flex-start;
	}
	.sfal-admin-hero {
		flex-direction: column;
	}
	.sfal-panel {
		padding: 20px;
		border-radius: 18px;
	}
}

/* v1.7 WP login page integration */
.sfal-login-choice{
	margin:16px 0 10px;
	padding:14px;
	border:1px solid rgba(31,111,235,.25);
	border-radius:14px;
	background:linear-gradient(135deg, rgba(31,111,235,.10), rgba(124,58,237,.08));
	text-align:center;
}
.sfal-login-choice .sfal-login-choice-button{
	width:100%;
	text-align:center;
	border-radius:10px;
}
.sfal-login-choice p{
	margin:8px 0 0;
	font-size:12px;
	color:#64748b;
}

/* v2.0 Pro dashboard additions */
.sfal-pro-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(160px, 1fr));
	gap: 14px;
	margin: 18px 0 22px;
}

.sfal-pro-card {
	background: rgba(255,255,255,.96);
	border: 1px solid var(--sfal-border);
	border-radius: 20px;
	padding: 18px;
	box-shadow: 0 14px 42px rgba(15,23,42,.08);
}

.sfal-pro-card span {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 900;
	color: var(--sfal-muted);
	margin-bottom: 8px;
}

.sfal-pro-card strong {
	display: block;
	font-size: 30px;
	line-height: 1;
	color: var(--sfal-text);
}

.sfal-pro-card-alert strong {
	color: var(--sfal-red);
}

.sfal-admin-tools form,
.sfal-security-table,
.sfal-audit-table {
	margin: 14px 0 24px;
}

.sfal-admin-tools form {
	padding: 20px;
}

.sfal-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	background: #e2e8f0;
	color: #334155;
	margin: 0 4px 4px 0;
}

.sfal-badge-good {
	background: #dcfce7;
	color: #166534;
}

.sfal-badge-warn {
	background: #fef3c7;
	color: #92400e;
}

.sfal-badge-danger {
	background: #fee2e2;
	color: #991b1b;
}

.sfal-action-buttons .button {
	margin: 0 4px 4px 0;
}

.sfal-danger-link {
	border-color: rgba(220,38,38,.45) !important;
	color: #b91c1c !important;
}

.sfal-audit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
}

.sfal-audit-head h2 {
	margin: 0;
}

@media (max-width: 900px) {
	.sfal-pro-grid {
		grid-template-columns: repeat(2, minmax(160px, 1fr));
	}
}

@media (max-width: 600px) {
	.sfal-pro-grid {
		grid-template-columns: 1fr;
	}

	.sfal-audit-head {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Face ID Lock Gates */
.sfal-lock-panel { margin: 20px 0; }
.sfal-biometric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.sfal-biometric-card { border: 1px solid #dcdcde; border-radius: 14px; padding: 18px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.05); }
.sfal-biometric-card h4 { margin: 0 0 8px; font-size: 18px; }
.sfal-lock-widget { max-width: 520px; margin: 20px auto; padding: 18px; border: 1px solid #dcdcde; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.sfal-protected-file-link { display: inline-block; margin: 10px 0; }
.sfal-admin-wrap .sfal-admin-tools { margin: 24px 0; padding: 18px; border: 1px solid #dcdcde; border-radius: 12px; background: #fff; }
.sfal-admin-wrap .form-table textarea.code { min-height: 72px; }
@media (max-width: 640px) {
	.sfal-biometric-grid { grid-template-columns: 1fr; }
}

/* OnHosty Biometric Security v3 additions */
.ohbio-suite-wrap .sfal-panel code,
.ohbio-security-center code{background:#f3f4f6;border-radius:6px;padding:2px 6px}.ohbio-security-center hr{border:0;border-top:1px solid #e5e7eb;margin:22px 0}.ohbio-devices form{margin:10px 0 16px}.ohbio-devices input[type=text]{max-width:280px;margin-right:8px}.ohbio-secure-file{display:inline-flex;align-items:center;gap:8px;text-decoration:none}.ohbio-secure-file:before{content:"🔒"}.ohbio-suite-wrap .form-table th{width:250px}.ohbio-suite-wrap .sfal-pro-card strong{font-size:26px}.ohbio-suite-wrap h2{margin-top:28px}.ohbio-suite-wrap .widefat small{color:#667085}

.ohbio-passkeys{margin:18px 0;padding:18px;border:1px solid #dcdcde;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ohbio-passkeys h3{margin-top:0}.ohbio-passkey-register-box{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}.ohbio-passkey-status{margin-top:10px;font-weight:600}.ohbio-passkey-error{color:#b32d2e}.ohbio-passkey-table{margin-top:12px}.login .ohbio-passkeys{box-shadow:none;border:0;padding:0}.ohbio-login-passkey{text-align:center;margin:12px 0 0}


/* OnHosty first-run setup + master passcode fallback */
.ohbio-first-setup-wrap .sfal-admin-hero{margin-bottom:18px}.ohbio-first-setup-panel{margin:18px 0;padding:22px;border-radius:16px;background:#fff;border:1px solid #dcdcde;box-shadow:0 10px 28px rgba(0,0,0,.04)}.ohbio-master-passcode-box{margin-top:18px;padding:16px;border-radius:14px;border:1px solid #dcdcde;background:#f8fafc}.ohbio-master-passcode-box h4{margin:0 0 8px}.ohbio-master-passcode-box p{margin:8px 0}.sfal-lock-widget .ohbio-master-passcode-box{border-left:4px solid #2271b1}.login .ohbio-master-passcode-box{background:#fff;border:1px solid #dcdcde;padding:14px;margin:14px 0;border-radius:10px}