/* Tapsy sign-in overlay + inline error (user and admin login pages) */
body.tp7a-noscroll { overflow: hidden; }
.tp7a { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .25s;
  font-family: inherit; color: #0b1220;
  background: radial-gradient(90% 60% at 100% 0%, rgba(234,179,8,.22), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(59,130,246,.3), transparent 60%), linear-gradient(160deg, #07142f, #0D285E 70%, #0a1e47); }
.tp7a.on { opacity: 1; }
.tp7a-card { position: relative; width: min(100%, 380px); padding: 28px 24px 24px; text-align: center; border-radius: 28px; background: #fff; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55); transform: translateY(14px) scale(.97); transition: transform .4s cubic-bezier(.2,.9,.3,1.2); }
.tp7a.on .tp7a-card { transform: none; }
.tp7a-logo { height: 34px; margin-bottom: 14px; } .tp7a-logo img { max-height: 34px; width: auto; }
.tp7a-orb { position: relative; width: 96px; height: 96px; margin: 4px auto 14px; display: grid; place-items: center; }
.tp7a-padlock { position: relative; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, #123a82, #0D285E); box-shadow: 0 10px 24px -8px rgba(13,40,94,.7); animation: tp7a-pulse 1.4s ease-in-out infinite; }
.tp7a-padlock::before { content: ""; position: absolute; left: 20px; top: 14px; width: 18px; height: 16px; border: 3px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; }
.tp7a-padlock::after { content: ""; position: absolute; left: 17px; top: 28px; width: 24px; height: 16px; border-radius: 5px; background: #eab308; }
.tp7a-orb .ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 3px solid rgba(13,40,94,.12); border-top-color: #0D285E; animation: tp7a-spin 1s linear infinite; }
.tp7a-orb .ring.r2 { top: 8px; left: 8px; right: 8px; bottom: 8px; border-top-color: #eab308; animation-duration: 1.6s; animation-direction: reverse; }
@keyframes tp7a-spin { to { transform: rotate(360deg) } } @keyframes tp7a-pulse { 50% { transform: scale(1.07) } }
.tp7a h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; } .tp7a h2 span { color: #0D285E; }
.tp7a p { margin: 0 0 16px; font-size: 13.5px; color: #5b6475; min-height: 20px; }
.tp7a-steps { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 250px; text-align: left; display: grid; gap: 9px; }
.tp7a-steps li { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: #98a1b3; transition: color .3s; }
.tp7a-steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d6dcea; box-sizing: border-box; flex-shrink: 0; transition: .3s; }
.tp7a-steps li.now { color: #0b1220; } .tp7a-steps li.now::before { border-color: #0D285E; border-top-color: transparent; animation: tp7a-spin .8s linear infinite; }
.tp7a-steps li.done { color: #5b6475; } .tp7a-steps li.done::before { background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l3 3 5-6'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #22c55e; }
.tp7a-bar { height: 5px; border-radius: 9px; background: #eef1f8; overflow: hidden; }
.tp7a-bar span { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0D285E, #eab308); transition: width 1.1s cubic-bezier(.3,.8,.3,1); }
.tp7a.ok .tp7a-bar span { background: #22c55e; transition-duration: 1.7s; }
.tp7a-mark { width: 96px; height: 96px; } .tp7a-mark circle { fill: none; stroke: #22c55e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: tp7a-draw .6s ease forwards; }
.tp7a-mark path { fill: none; stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tp7a-draw .4s .45s ease forwards; }
@keyframes tp7a-draw { to { stroke-dashoffset: 0 } }
.tp7a-go { display: block; margin-top: 16px; padding: 13px; border-radius: 14px; background: #0D285E; color: #fff !important; font-weight: 700; text-decoration: none; }
.tp7a-card s { pointer-events: none; position: absolute; left: 50%; top: 100px; width: 8px; height: 12px; border-radius: 2px; text-decoration: none; opacity: 0; animation: tp7a-fall 1.4s var(--d) ease-out forwards; }
@keyframes tp7a-fall { 0% { opacity: 1; transform: translate(0,0) rotate(0) } 100% { opacity: 0; transform: translate(var(--x), 280px) rotate(var(--r)) } }

/* inline error (clear on phones, unlike the old toast) */
.tp7a-error { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px; font-weight: 600; text-align: left; animation: tp7a-in .25s ease; }
.tp7a-error i { flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #ef4444 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' d='M8 4v5M8 12v.01'/%3E%3C/svg%3E") center/14px no-repeat; }
@keyframes tp7a-in { from { opacity: 0; transform: translateY(-6px) } }
.tp7a-shake { animation: tp7a-shake .4s; } @keyframes tp7a-shake { 20%,60% { transform: translateX(-6px) } 40%,80% { transform: translateX(6px) } }
@media (prefers-reduced-motion: reduce) { .tp7a, .tp7a * , .tp7a-error, .tp7a-shake { animation-duration: .01s !important; transition-duration: .01s !important; } }