/* Login pages (login.html · login-staff.html) on theme v4.1 macOS Neon.
   Loaded after /cx/glass-mono-core.css (copy of CodexPHub/CodexPHub_Theme/glass-mono-core.css) · sizes/colours only from its tokens
   v4.1: background art layer (--bg-art on body) · black see-through glass · no borders · primary = solid white */
.ap-app { min-height: 100vh; }
.ap-logo { display: block; flex: none; object-fit: contain; }
.ap-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--ink-faint); display: inline-block; flex: none; }
.ap-dot--ok { background: var(--success); box-shadow: var(--glow-in); }

/* 2FA / kicked-out dialogs */
.ap-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }
.ap-modal[hidden] { display: none; }
.ap-modal__box { width: 100%; max-width: 380px; max-height: 90vh; overflow: auto; }
.ap-detail-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); text-align: center; align-items: stretch; }
.ap-confirm__mark { width: var(--space-8); height: var(--space-8); display: grid; place-items: center; border-radius: 50%; background: var(--tint); font-size: var(--fs-3); font-weight: 700; }
.ap-help-title { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: 600; }

/* page */
.lg { position: relative; overflow: hidden; display: grid; place-items: center; padding: var(--space-8) var(--space-4); }
.lg-gloss { display: none; } /* v4.1: the art layer is the body background */
.lg-wrap { position: relative; width: 100%; max-width: 400px; animation: lg-rise var(--dur) var(--ease) both; }
.lg-card { width: 100%; border: 0; }
.lg-card-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6) 0; text-align: center; }
.lg-card-head .ap-logo { width: 80px; height: 80px; border-radius: 50%; margin-bottom: var(--space-2); box-shadow: var(--shadow-pop); }
.lg-name { margin: 0; font-size: var(--fs-4); line-height: var(--lh-4); font-weight: 700; letter-spacing: -0.025em; }
.lg-by { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
.lg-by img { width: var(--space-6); height: var(--space-6); object-fit: contain; }
.lg-by b { color: var(--ink); font-weight: 700; }
.lg-form { position: relative; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.lg-form .gm-field input, #c { height: calc(var(--h-ctl) + var(--space-2)); }
.lg-go { width: 100%; height: calc(var(--h-ctl) + var(--space-2)); font-weight: 600; font-size: var(--fs-3); }
.lg-foot { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--glass-200); }
.lg-err { min-height: var(--lh-1); text-align: center; }
.lg-err:empty { min-height: 0; }
#c { font-size: var(--fs-4); letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.lg-theme { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(var(--space-2)); } }
@media (max-width: 600px) {
  .lg-form .gm-field input, #c { font-size: 16px; } /* iOS: no zoom on focus */
  .lg-card-head, .lg-form { padding-left: var(--space-4); padding-right: var(--space-4); }
}