:root {
	--aram-cream-bg: #F6F2EA;
	--aram-cream-card: #FAF8F4;
	--aram-ink: #15140F;
	--aram-ink-text: #1A1A17;
	--aram-accent: #FE840C;
	--aram-accent-ink: #7A3D04;
	--aram-text-muted: #524E46;
	--aram-field: #E2DCD0;
	--aram-danger: #a3271f;
	--aram-ok: #1a6b32;
}

.aram-auth-body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aram-cream-bg);
	color: var(--aram-ink-text);
	font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	padding: 24px;
}

.aram-auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--aram-cream-card);
	border: 1px solid var(--aram-field);
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow: 0 18px 44px rgba(21, 20, 15, .08);
}

.aram-auth-eyebrow {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aram-accent-ink);
	margin: 0 0 10px;
}

.aram-auth-card h1 {
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var(--aram-ink);
}

.aram-auth-lead {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--aram-text-muted);
	margin: 0 0 24px;
}

.aram-auth-field {
	margin: 0 0 16px;
}

.aram-auth-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--aram-ink-text);
}

.aram-auth-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid var(--aram-field);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	color: var(--aram-ink-text);
	font-family: inherit;
}

.aram-auth-input:focus {
	outline: 2px solid var(--aram-ink);
	outline-offset: 1px;
}

.aram-auth-input--code {
	letter-spacing: .5em;
	font-size: 22px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.aram-auth-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 18px;
	border: none;
	border-radius: 10px;
	background: var(--aram-accent);
	color: var(--aram-ink);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
}

.aram-auth-btn:hover { filter: brightness(.96); }

.aram-auth-btn:focus-visible { outline: 2px solid var(--aram-ink); outline-offset: 2px; }

.aram-auth-btn--ghost {
	background: transparent;
	color: var(--aram-ink-text);
	border: 1.5px solid var(--aram-field);
}

.aram-auth-btn--danger {
	background: #fff;
	color: var(--aram-danger);
	border: 1.5px solid var(--aram-danger);
}

.aram-auth-error {
	background: #FBEAE8;
	border: 1px solid #E7B7B1;
	color: var(--aram-danger);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13.5px;
	margin: 0 0 18px;
}

.aram-auth-notice {
	background: #EEF4EA;
	border: 1px solid #C9DABF;
	color: var(--aram-ok);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13.5px;
	margin: 0 0 18px;
}

.aram-auth-meta {
	margin-top: 20px;
	font-size: 13px;
	color: var(--aram-text-muted);
	text-align: center;
}

.aram-auth-meta a { color: var(--aram-accent-ink); }

.aram-auth-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--aram-text-muted); margin: 0 0 20px; }

.aram-auth-qr {
	display: inline-block;
	background: #fff;
	border: 1.5px solid var(--aram-field);
	border-radius: 12px;
	padding: 12px;
	line-height: 0;
	margin: 0 0 14px;
}

.aram-auth-qr svg { display: block; width: 100%; height: auto; max-width: 260px; }

.aram-auth-hint { font-size: 13px; color: var(--aram-text-muted); margin: 0 0 16px; }

.aram-auth-secret-box {
	background: #fff;
	border: 1.5px dashed var(--aram-field);
	border-radius: 10px;
	padding: 14px;
	font-family: 'Courier New', monospace;
	font-size: 16px;
	letter-spacing: .08em;
	word-break: break-all;
	margin: 0 0 14px;
}

.aram-auth-codes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 14px;
	background: #fff;
	border: 1.5px solid var(--aram-field);
	border-radius: 10px;
}

.aram-auth-codes li {
	font-family: 'Courier New', monospace;
	font-size: 14.5px;
	letter-spacing: .04em;
}

.aram-auth-otpauth {
	word-break: break-all;
	font-size: 12px;
	color: var(--aram-text-muted);
}

.aram-auth-panel { max-width: 640px; }
.aram-auth-panel h2 { margin-top: 0; }
.aram-auth-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; }
.aram-auth-status--on { background: #EEF4EA; color: var(--aram-ok); }
.aram-auth-status--off { background: #FBEAE8; color: var(--aram-danger); }