.km-honeypot {
	position: absolute !important;
	left: -9999px !important;
}

#km-login-form,
.km-auth-form {
	display: grid;
	gap: 16px;
}

#km-login-form label,
.km-auth-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

#km-login-form input[type="text"],
#km-login-form input[type="password"],
.km-auth-form input[type="text"],
.km-auth-form input[type="email"],
.km-auth-form input[type="password"] {
	width: 100%;
}

/* Login submit — inherits primary button style from design system */
#km-login-form input[type="submit"] {
	border: 0;
	border-radius: var(--km-portal-radius-sm);
	padding: var(--km-button-padding-y) var(--km-button-padding-x);
	background: linear-gradient(135deg, #b456ff, #d556df);
	color: var(--km-text-inverse);
	cursor: pointer;
	transition: background var(--km-transition-base), box-shadow var(--km-transition-base), color var(--km-transition-base);
}

#km-login-form input[type="submit"]:hover,
#km-login-form input[type="submit"]:focus-visible {
	background: linear-gradient(135deg, #c168ff, #df69e7);
	color: var(--km-text-inverse);
	box-shadow: 0 12px 28px rgba(180, 86, 255, 0.24);
}

#km-login-form .login-remember {
	display: flex;
	align-items: center;
	gap: 10px;
}

#km-login-form .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

#km-login-form .login-remember input[type="checkbox"] {
	width: auto;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

#km-login-form .km-auth-card__toggle,
.km-auth-form .km-auth-card__toggle {
	margin: 0;
}

.km-tutorial-popover {
	position: fixed;
	z-index: var(--km-z-popover);
	width: min(320px, calc(100vw - 24px));
	padding: 1rem 1rem 0.95rem;
	border: 1px solid var(--km-border-accent);
	border-radius: var(--km-portal-radius);
	background: linear-gradient(180deg, rgba(42, 36, 80, 0.98), rgba(31, 26, 62, 0.98));
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
	color: var(--km-text);
}

.km-tutorial-popover__eyebrow {
	margin-bottom: 0.45rem;
	padding-right: 2rem;
	color: var(--km-accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.km-tutorial-popover__text {
	margin: 0;
	padding-right: 1rem;
	color: var(--km-text);
	font-size: 0.95rem;
	line-height: 1.55;
}

.km-tutorial-popover__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	border: 1px solid var(--km-border-soft);
	border-radius: var(--km-portal-radius-sm);
	background: var(--km-surface-3);
	color: var(--km-text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--km-transition-fast), border-color var(--km-transition-fast), transform var(--km-transition-fast);
}

.km-tutorial-popover__close:hover,
.km-tutorial-popover__close:focus-visible {
	background: var(--km-hover-soft);
	border-color: var(--km-border-strong);
	transform: scale(1.03);
}

.is-km-tutorial-highlight {
	position: relative;
	box-shadow: 0 0 0 1px rgba(248, 224, 171, 0.26), 0 0 0 8px rgba(248, 224, 171, 0.06);
}

.km-settings-grid {
	display: grid;
	gap: 20px;
}

.km-settings-card {
	display: grid;
	gap: 1rem;
}

.km-settings-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.km-settings-card__head h3,
.km-settings-card__head p {
	margin: 0;
}

.km-settings-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.km-settings-actions form {
	margin: 0;
}

.km-settings-account-summary {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--km-border-soft);
	border-radius: var(--km-portal-radius);
	background: var(--km-surface-3);
}

.km-settings-account-summary span {
	color: var(--km-muted);
	font-size: 0.84rem;
}

.km-settings-account-summary strong {
	color: var(--km-text);
	font-size: 1rem;
}

.km-settings-forms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.km-settings-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--km-border-soft);
	border-radius: var(--km-portal-radius);
	background: var(--km-surface-3);
}

.km-settings-form h4 {
	margin: 0;
}

.km-settings-form p {
	margin: 0;
}

.km-settings-form__spacer {
	min-height: 74px;
	visibility: hidden;
	pointer-events: none;
}

.km-settings-form > .km-button {
	margin-top: auto;
	align-self: flex-start;
}

@media (max-width: 900px) {
	.km-settings-forms {
		grid-template-columns: minmax(0, 1fr);
	}
}