.akhp--admin-login { --akhp-accent: #ff0d19; --akhp-border: rgba(255, 255, 255, 0.18); background: #000 !important; color: #fff; font-family: Rajdhani, sans-serif; min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 32px max(16px, env(safe-area-inset-left, 0px)) 48px max(16px, env(safe-area-inset-right, 0px)); } .akhp-admin-login { width: 100%; max-width: 440px; } .akhp-admin-login__panel { background: #141414; border: 1px solid var(--akhp-border); border-radius: 14px; padding: 28px 24px 32px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } .akhp-admin-login__eyebrow { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; } .akhp-admin-login__title { margin: 0 0 8px; font-size: clamp(1.75rem, 5vw, 2.1rem); font-weight: 700; line-height: 1.1; } .akhp-admin-login__sub { margin: 0 0 22px; font-size: 1rem; color: rgba(255, 255, 255, 0.68); line-height: 1.45; } .akhp-admin-login__message { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; } .akhp-admin-login__message.is-error { background: rgba(255, 13, 25, 0.12); border: 1px solid rgba(255, 13, 25, 0.35); color: #ff8a8a; } .akhp-admin-login__message.is-success { background: rgba(46, 160, 67, 0.12); border: 1px solid rgba(46, 160, 67, 0.35); color: #8ee4a8; } .akhp-admin-login__form { display: grid; gap: 16px; } .akhp-admin-login__field { display: flex; flex-direction: column; gap: 8px; } .akhp-admin-login__label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .akhp-admin-login__field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--akhp-border); border-radius: 8px; background: #0f0f0f; color: #fff; font-family: Rajdhani, sans-serif; font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .akhp-admin-login__field input:focus { outline: none; border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255, 13, 25, 0.18); } .akhp-admin-login__password-wrap { position: relative; display: block; } .akhp-admin-login__password-wrap input { padding-right: 72px; } .akhp-admin-login__toggle-pw { position: absolute; top: 50%; right: 8px; z-index: 1; transform: translateY(-50%); padding: 6px 10px; border: 1px solid var(--akhp-border); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); font-family: Rajdhani, sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .akhp-admin-login__toggle-pw:hover, .akhp-admin-login__toggle-pw:focus { outline: none; background: rgba(255, 13, 25, 0.14); border-color: rgba(255, 13, 25, 0.45); color: #fff; } .akhp-admin-login__toggle-pw[aria-pressed="true"] { background: rgba(255, 13, 25, 0.2); border-color: rgba(255, 13, 25, 0.55); color: #fff; } .akhp-admin-login__submit { margin-top: 4px; width: 100%; padding: 13px 18px; border: 0; border-radius: 8px; background: var(--akhp-accent); color: #fff; font-family: Rajdhani, sans-serif; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .akhp-admin-login__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 13, 25, 0.35); } @media (min-width: 768px) { .akhp-admin-login__panel { padding: 34px 32px 38px; } }