/* AMS login page: brand side (colours / picture chosen in "AMS Branding") + sign-in card */
body { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif !important; background: #F8FAFC !important; }
.navbar, .web-footer, footer.web-footer, .page-header-wrapper, .page-breadcrumbs { display: none !important; }
.page-content-wrapper, .page-content-wrapper > .container, main.container, .container.my-4, .page_content, .webpage-content { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

.ams-login { display: flex; min-height: 100vh; width: 100%; }
.ams-brand { flex: 1.15; position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px; }
.ams-bg-grad { background: linear-gradient(140deg, var(--ams-dark) 0%, var(--ams-dark) 25%, var(--ams-primary) 75%, var(--ams-accent) 100%); }
.ams-bg-img { background-size: cover; background-position: center; }
.ams-overlay::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--ams-dark) 0%, var(--ams-primary) 100%); opacity: .82; z-index: 1; }

.ams-orb { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 1; animation: ams-float 14s ease-in-out infinite; }
.ams-orb.o1 { width: 420px; height: 420px; top: -140px; inset-inline-end: -120px; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.ams-orb.o2 { width: 300px; height: 300px; bottom: -90px; inset-inline-start: -60px; background: radial-gradient(circle, rgba(20,184,166,.45), rgba(20,184,166,0) 70%); animation-delay: -5s; }
.ams-orb.o3 { width: 160px; height: 160px; top: 55%; inset-inline-end: 18%; background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); animation-delay: -9s; }
@keyframes ams-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-24px) } }

.ams-brand-inner { position: relative; z-index: 2; max-width: 540px; }
.ams-logo { width: 88px; height: 88px; object-fit: contain; padding: 14px; border-radius: 24px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.ams-brand h1 { color: #fff; font-size: 42px; font-weight: 700; line-height: 1.25; margin: 30px 0 12px; }
.ams-tagline { font-size: 18px; line-height: 1.8; opacity: .9; margin-bottom: 34px; }
.ams-features { list-style: none; padding: 0; margin: 0; }
.ams-features li { display: flex; align-items: center; gap: 14px; font-size: 16px; margin-bottom: 16px; opacity: .95; }
.ams-features li::before { content: "✓"; flex: 0 0 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }
.ams-brand-foot { position: absolute; bottom: 26px; inset-inline-start: 72px; font-size: 13px; opacity: .7; z-index: 2; }

.ams-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #F8FAFC; }
.ams-main-inner { width: 100%; max-width: 430px; }
.ams-main section { width: 100%; max-width: 430px; margin: 0 auto; }
.ams-card-head { text-align: start; margin-bottom: 22px !important; }
.ams-card-head h4 { font-size: 30px !important; font-weight: 700 !important; color: var(--ams-dark) !important; margin: 0 0 6px !important; }
.ams-sub { color: #64748B; font-size: 15px; margin: 0; }
.ams-mobile-logo { display: none !important; }

.ams-main .login-content.page-card { border: 0 !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 24px 60px rgba(15,23,42,.08) !important; padding: 34px 30px !important; max-width: none !important; }
.ams-main .page-card-body { padding: 0 !important; }
.ams-main .form-control { height: 52px !important; border-radius: 14px !important; background: #F1F5F9 !important; border: 1.5px solid transparent !important; font-size: 15px !important; padding-inline: 44px 16px !important; transition: all .2s; }
.ams-main .form-control:focus { background: #fff !important; border-color: var(--ams-primary) !important; box-shadow: 0 0 0 4px rgba(13,148,136,.14) !important; }
.ams-main .field-icon { color: #94A3B8; }
.ams-main .forgot-password-message a, .ams-main .sign-up-message a, .ams-main .toggle-password { color: var(--ams-primary) !important; font-weight: 600; }
.ams-main .btn-primary, .ams-main .btn-login.btn-primary { height: 52px; border: 0 !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; background: linear-gradient(90deg, var(--ams-primary), var(--ams-accent)) !important; box-shadow: 0 10px 24px rgba(13,148,136,.32); transition: transform .15s, box-shadow .15s; }
.ams-main .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(13,148,136,.4); }
.ams-main .btn-default.btn-login-option { height: 46px; border-radius: 14px !important; }
.ams-main .login-divider { color: #94A3B8; }

@media (max-width: 960px) {
	.ams-brand { display: none; }
	.ams-main { background: linear-gradient(160deg, var(--ams-dark), var(--ams-primary)); }
	.ams-mobile-logo { display: block !important; width: 72px; height: 72px; margin: 0 0 18px; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.15); }
	.ams-card-head h4, .ams-sub { color: #fff !important; }
}

/* show / hide password: an eye, and an eye with a line */
.password-field { position: relative; }
html[dir="rtl"] .password-field input, html[lang^="ar"] .password-field input { padding-left: 46px !important; }
html[dir="ltr"]:not([lang^="ar"]) .password-field input { padding-right: 46px !important; }
.ams-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent;
	color: var(--ams-primary, #0D9488); display: grid; place-items: center; border-radius: 8px; cursor: pointer; padding: 0; z-index: 2; }
.ams-eye:hover { background: rgba(13,148,136,.1); }
.ams-forgot-help { margin: 0 20px 12px; line-height: 1.7; text-align: start; }

/* ---- professional extras: top bar, greeting, trust line, quick access QR codes ---- */
.ams-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; color: #475569; font-size: 13px; }
.ams-clock { display: flex; flex-direction: column; line-height: 1.5; }
.ams-clock b { font-size: 22px; color: var(--ams-dark); font-weight: 700; letter-spacing: .5px; }
.ams-top-right { display: flex; align-items: center; gap: 10px; }
.ams-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: #ECFDF5; color: #047857; font-weight: 600; font-size: 12px; }
.ams-status i { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.25); animation: ams-pulse 2s infinite; }
.ams-status.off { background: #FEF2F2; color: #B91C1C; } .ams-status.off i { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
@keyframes ams-pulse { 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
.ams-lang { padding: 5px 12px; border-radius: 99px; border: 1px solid #CBD5E1; color: #334155 !important; font-weight: 600; font-size: 12px; text-decoration: none !important; }
.ams-lang:hover { border-color: var(--ams-primary); color: var(--ams-primary) !important; }
.ams-greet { font-size: 15px; color: var(--ams-primary); font-weight: 600; margin-bottom: 4px; }
.ams-caps { margin-top: 8px; font-size: 12.5px; color: #B45309; background: #FFFBEB; border-radius: 10px; padding: 6px 10px; }
.ams-remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #475569; margin: 4px 2px 6px; cursor: pointer; font-weight: 500; }
.ams-remember input { width: 17px; height: 17px; accent-color: var(--ams-primary); }
.ams-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 22px; font-size: 12.5px; color: #64748B; }
.ams-quick-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.ams-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0;
	color: #0F172A !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; box-shadow: 0 4px 14px rgba(15,23,42,.05); cursor: pointer; }
.ams-chip:hover { border-color: var(--ams-primary); color: var(--ams-primary) !important; }
.ams-qr-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.ams-qr { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); max-width: 300px; }
.ams-qr img { width: 92px; height: 92px; border-radius: 12px; background: #fff; padding: 4px; flex: 0 0 auto; }
.ams-qr b { display: block; font-size: 15px; margin-bottom: 4px; }
.ams-qr span { display: block; font-size: 12.5px; line-height: 1.6; opacity: .85; }
/* the Telegram services button shows on every device (computer, tablet, phone) */
@media (max-width: 960px) {
	.ams-topbar, .ams-topbar .ams-clock b { color: #fff; }
	.ams-greet { color: #CCFBF1; }
	.ams-lang { color: #fff !important; border-color: rgba(255,255,255,.5); }
	.ams-trust { color: rgba(255,255,255,.85); }
}
.ams-status, .ams-lang { white-space: nowrap; }
.ams-main #login_email::placeholder { font-size: 13.5px; }

.ams-forgot-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ams-fu { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; margin: 4px 0 12px; }
.ams-fu-t { font-weight: 700; margin-bottom: 8px; color: var(--ams-dark); }
.ams-fu .form-control { height: 44px !important; margin-bottom: 8px; padding-inline: 14px !important; }
.ams-fu-msg { margin-top: 8px; color: #047857; line-height: 1.7; }

/* × to empty the user name / password box */
.email-field, .password-field { position: relative; }
.ams-clear { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0;
	background: transparent; color: #111827; font-size: 20px; font-weight: 400; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 3;
	opacity: .55; transition: opacity .15s, background .15s; }
.ams-clear:hover, .ams-clear:focus-visible { opacity: 1; background: rgba(15, 23, 42, .07); }
.ams-clear[hidden] { display: none; }
.ams-clear-pw { inset-inline-end: 44px; }
html[dir="rtl"] .ams-clear, html[lang^="ar"] .ams-clear { inset-inline-end: auto; left: 8px; }
html[dir="rtl"] .ams-clear-pw, html[lang^="ar"] .ams-clear-pw { left: 44px; }
html[dir="rtl"] .ams-main #login_email, html[lang^="ar"] .ams-main #login_email { padding-left: 44px !important; }
html[dir="rtl"] .ams-main #login_password, html[lang^="ar"] .ams-main #login_password { padding-left: 80px !important; }

/* long messages inside the buttons (e.g. «request received…») wrap instead of pushing the page sideways */
.ams-main .btn, .ams-main .btn-primary, .ams-main .btn-login, .ams-main .btn-forgot { white-space: normal !important; height: auto !important; min-height: 52px;
	line-height: 1.5 !important; padding-top: 10px !important; padding-bottom: 10px !important; word-break: break-word; }
html, body { max-width: 100%; overflow-x: hidden; }
.ams-login, .ams-main, .ams-main-inner, .ams-main section, .ams-main .login-content.page-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 960px) { .ams-main { padding: 24px 14px !important; } .ams-main .login-content.page-card { padding: 24px 18px !important; } }

/* long status messages on the buttons wrap instead of pushing the page sideways (phones) */
html, body { overflow-x: hidden !important; max-width: 100%; }
.ams-login, .ams-main, .ams-main-inner, .ams-main section, .ams-main .login-content.page-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
.ams-main .btn { white-space: normal !important; height: auto !important; min-height: 52px; line-height: 1.5; padding-top: 10px; padding-bottom: 10px; overflow-wrap: anywhere; }
.ams-card-head h4 { overflow-wrap: anywhere; }
@media (max-width: 960px) { .ams-main { padding: 24px 14px; } .ams-main .login-content.page-card { padding: 24px 18px !important; } .ams-card-head h4 { font-size: 26px !important; } }

/* iPhone: a box with text under 16px makes Safari zoom the page on tap and leave it zoomed (the page looked scrambled
   when the keyboard opened). 16px boxes stop that; the layout height follows the visible screen, not the keyboard. */
.ams-main .form-control, .ams-main input, .ams-main select, .ams-main textarea, #login_email, #login_password, .ams-main #login_email::placeholder { font-size: 16px !important; }
.ams-login { min-height: 100vh; min-height: 100svh; }
.ams-main input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* 🖥️ sign-in like the lock screen of the hybrid desktop: the wallpaper everywhere, the card as glass */
body { background: radial-gradient(1100px 700px at 12% 8%, #C9E4FF 0%, transparent 60%), radial-gradient(900px 600px at 88% 20%, #E3D7FF 0%, transparent 55%), radial-gradient(1000px 700px at 60% 100%, #CFF3EC 0%, transparent 60%), linear-gradient(160deg, #EAF2FB, #F3EFFA) fixed !important; }
.ams-main { background: transparent !important; }
.ams-main .login-content.page-card { background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .7) !important; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 30px 80px rgba(16, 24, 40, .18), 0 8px 24px rgba(16, 24, 40, .08) !important; }
.ams-brand { border-radius: 0 0 28px 28px; }
@media (min-width: 961px) { .ams-brand { margin: 18px; border-radius: 28px; box-shadow: 0 30px 80px rgba(16, 24, 40, .25); } }
.ams-main .form-control { background: rgba(255, 255, 255, .85) !important; border-radius: 10px !important; }
.ams-main .btn-primary { border-radius: 10px !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--ams-primary) 35%, transparent) !important; }
/* the theme the user chose inside the system (read from this browser) wins over the device setting */
html.ams-dark body { background: radial-gradient(1100px 700px at 12% 10%, #1D3A6B 0%, transparent 60%), radial-gradient(900px 650px at 88% 18%, #3B1F66 0%, transparent 58%), radial-gradient(1000px 700px at 55% 105%, #0F4C5C 0%, transparent 60%), linear-gradient(160deg, #0B1020, #120E22) fixed !important; color: #E8EAED; }
html.ams-dark .ams-main .login-content.page-card { background: rgba(28, 32, 40, .66) !important; border-color: rgba(255, 255, 255, .1) !important; color: #E8EAED; }
html.ams-dark .ams-card-head h4 { color: #F3F4F6 !important; } html.ams-dark .ams-sub, html.ams-dark .ams-main .text-muted { color: #B4BAC4 !important; }
html.ams-dark .ams-main .form-control { background: rgba(255, 255, 255, .08) !important; color: #E8EAED !important; border-color: rgba(255, 255, 255, .14) !important; }
@media (prefers-color-scheme: dark) {
	html:not(.ams-light) body { background: radial-gradient(1100px 700px at 12% 10%, #1D3A6B 0%, transparent 60%), radial-gradient(900px 650px at 88% 18%, #3B1F66 0%, transparent 58%), radial-gradient(1000px 700px at 55% 105%, #0F4C5C 0%, transparent 60%), linear-gradient(160deg, #0B1020, #120E22) fixed !important; color: #E8EAED; }
	html:not(.ams-light) .ams-main .login-content.page-card { background: rgba(28, 32, 40, .66) !important; border-color: rgba(255, 255, 255, .1) !important; color: #E8EAED; }
	html:not(.ams-light) .ams-card-head h4 { color: #F3F4F6 !important; } html:not(.ams-light) .ams-sub, html:not(.ams-light) .ams-main .text-muted { color: #B4BAC4 !important; }
	html:not(.ams-light) .ams-main .form-control { background: rgba(255, 255, 255, .08) !important; color: #E8EAED !important; border-color: rgba(255, 255, 255, .14) !important; }
}

/* the glass notice of the login page (goes away by itself) */
.ams-ltoasts { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px;
	width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.ams-ltoast { pointer-events: auto; cursor: pointer; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.6; direction: rtl; text-align: right;
	background: rgba(255, 255, 255, .78); color: #111827; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
	-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
	opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .25s ease, transform .25s ease; }
.ams-ltoast.in { opacity: 1; transform: none; }
.ams-ltoast.out { opacity: 0; transform: translateY(-10px); }
.ams-ltoast b { display: block; font-weight: 700; margin-bottom: 2px; }
html.ams-dark .ams-ltoast { background: rgba(28, 32, 40, .78); color: #E8EAED; border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { html:not(.ams-light) .ams-ltoast { background: rgba(28, 32, 40, .78); color: #E8EAED; border-color: rgba(255, 255, 255, .1); } }

/* the sign-in box comes first in the page (phone: right under the logo); on the computer the brand panel stays at the side */
.ams-brand { order: -1; }
@media (max-width: 960px) {
	.ams-login { flex-direction: column; }
	.ams-main { align-items: flex-start; }
	.ams-main-inner { display: flex; flex-direction: column; }
	.ams-main-inner > .ams-topbar, .ams-main-inner > .ams-greet { order: 5; margin-top: 14px; }
	.ams-main-inner > section, .ams-main-inner > .for-login { order: 1; }
}
/* phone, light: the old dark-gradient colours (white titles) are not readable on the light glass — dark text instead */
@media (max-width: 960px) {
	html:not(.ams-dark) .ams-card-head h4 { color: #0F172A !important; }
	html:not(.ams-dark) .ams-sub { color: #475569 !important; }
	html:not(.ams-dark) .ams-topbar, html:not(.ams-dark) .ams-topbar .ams-clock b { color: #0F172A !important; }
	html:not(.ams-dark) .ams-topbar .ams-clock span { color: #475569 !important; }
	html:not(.ams-dark) .ams-greet { color: #0F766E !important; }
	html:not(.ams-dark) .ams-lang { color: #0F172A !important; border-color: rgba(15, 23, 42, .25) !important; }
	html:not(.ams-dark) .ams-trust { color: #475569 !important; }
	.ams-mobile-logo { margin-inline: auto !important; }
	.ams-card-head { text-align: center !important; }
}
.ams-main .form-control::placeholder { color: #94A3B8 !important; opacity: 1; }
html.ams-dark .ams-main .form-control::placeholder { color: #8B93A0 !important; }

/* 📱 phone / small tablet: one tidy column —
   logo · system name + its line · the sign-in box · the features · the codes (QR) · clock and language · © — small even gaps, no lines */
@media (max-width: 960px) {
	.ams-login { display: flex !important; flex-direction: column; align-items: center; gap: 18px; padding: max(28px, env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom)); min-height: 100svh; }
	.ams-brand, .ams-brand-inner, .ams-main, .ams-main-inner { display: contents !important; }
	.ams-orb, .ams-mobile-logo { display: none !important; }
	.ams-login > * , .ams-brand-inner > *, .ams-main-inner > *, .ams-brand > .ams-brand-foot { width: 100%; max-width: 440px; margin: 0 !important; }
	/* 1 — the logo and the name */
	.ams-brand .ams-logo { order: 1; width: 76px !important; height: 76px !important; max-width: 76px; padding: 12px; border-radius: 22px; border: 0 !important;
		background: rgba(255, 255, 255, .7); box-shadow: 0 10px 30px rgba(15, 23, 42, .12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	.ams-brand h1 { order: 2; text-align: center; font-size: 26px !important; line-height: 1.35; margin-top: -4px !important; color: #0F172A !important; }
	.ams-tagline { order: 3; text-align: center; font-size: 15px !important; line-height: 1.8; margin-top: -10px !important; opacity: 1 !important; color: #475569 !important; }
	/* 2 — the sign-in box */
	.ams-login .ams-main-inner > section, .ams-login .ams-main-inner > noscript { order: 6; }
	.ams-card-head { display: none !important; } /* the name is already above it */
	.ams-main .login-content.page-card { padding: 22px 18px !important; }
	/* 3 — what the system offers, then the codes */
	.ams-features { order: 7; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px !important; border-radius: 20px; background: rgba(255, 255, 255, .55);
		-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); color: #1E293B; }
	.ams-features li { margin: 0 !important; font-size: 14.5px; opacity: 1 !important; }
	.ams-features li::before { border: 0 !important; background: color-mix(in srgb, var(--ams-primary) 16%, transparent) !important; color: var(--ams-primary); flex: 0 0 26px !important; height: 26px !important; border-radius: 8px !important; }
	.ams-qr-row { order: 8; display: flex; flex-direction: column; gap: 12px; }
	.ams-qr { border: 0 !important; background: rgba(255, 255, 255, .55) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); color: #1E293B; padding: 12px !important; }
	.ams-qr { width: 100% !important; max-width: none !important; box-sizing: border-box; margin: 0 !important; }
	.ams-qr img { width: 84px !important; height: 84px !important; box-shadow: none; border: 0; }
	/* under the name: clock, connection, language and the greeting — then the sign-in box; © last */
	.ams-login .ams-main-inner > .ams-topbar { order: 4; margin: 0 !important; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .45); }
	.ams-login .ams-main-inner > .ams-greet { order: 5; text-align: center; margin-top: -8px !important; }
	.ams-login .ams-main-inner > .ams-greet:empty { display: none; }
	.ams-brand > .ams-brand-foot { order: 9; position: static !important; text-align: center; font-size: 12px; opacity: 1 !important; color: #64748B !important; }
	/* night (dark) */
	html.ams-dark .ams-brand .ams-logo { background: rgba(255, 255, 255, .1); }
	html.ams-dark .ams-brand h1 { color: #F3F4F6 !important; }
	html.ams-dark .ams-tagline { color: #B4BAC4 !important; }
	html.ams-dark .ams-features, html.ams-dark .ams-qr, html.ams-dark .ams-main-inner > .ams-topbar { background: rgba(28, 32, 40, .55) !important; color: #E8EAED; }
	html.ams-dark .ams-brand > .ams-brand-foot { color: #8B93A0 !important; }
}

/* a company logo (Settings → company identity): the whole tile is the logo on white */
.ams-logo[data-brand], .ams-brand .ams-logo[data-brand], html.ams-dark .ams-brand .ams-logo[data-brand] { padding: 0 !important; background: #fff !important; object-fit: cover; }
.ams-qr b { margin-bottom: 0; }
/* the × on dark boxes is light; on a box the phone filled (pale yellow) it stays black */
html.ams-dark .ams-clear { color: #E8EAED; }
html.ams-dark .ams-clear:hover { background: rgba(255, 255, 255, .10); }
@media (prefers-color-scheme: dark) { html:not(.ams-light) .ams-clear { color: #E8EAED; } html:not(.ams-light) .ams-clear:hover { background: rgba(255, 255, 255, .10); } }
.ams-main input:-webkit-autofill ~ .ams-clear, .ams-main input:autofill ~ .ams-clear { color: #111827 !important; }