:root {
--pwa-brand: #2563eb;
--pwa-text-main: #111827;
--pwa-text-muted: #6b7280;
--pwa-bg-banner: rgba(255, 255, 255, 0.95);
}
.pwa-overlay {
position: fixed;
inset: 0;
background: linear-gradient(135deg, var(--pwa-brand), #1e40af);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s ease;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
overflow: hidden;
}
.pwa-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.pwa-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.6;
animation: pwa-float 10s infinite ease-in-out alternate;
z-index: 0;
pointer-events: none;
}
.pwa-orb-1 {
width: 400px; height: 400px;
background: #60a5fa;
top: -100px; left: -100px;
animation-delay: 0s;
}
.pwa-orb-2 {
width: 500px; height: 500px;
background: #3b82f6;
bottom: -150px; right: -100px;
animation-delay: -3s;
}
.pwa-orb-3 {
width: 300px; height: 300px;
background: #93c5fd;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation-delay: -6s;
}
@keyframes pwa-float {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 50px) scale(1.1); }
}
.pwa-content-wrapper {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
max-width: 400px;
}
.pwa-logo {
width: 100px;
height: 100px;
object-fit: contain;
margin-bottom: 2.5rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
padding: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);
animation: pwa-pulse 2s infinite ease-in-out;
display: block;
}
.pwa-loader {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.15);
border-top-color: #ffffff;
border-radius: 50%;
animation: pwa-spin 0.8s linear infinite;
margin-bottom: 1.5rem;
}
.pwa-text {
color: #ffffff;
font-size: 1.125rem;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
.pwa-title {
color: #ffffff;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.pwa-desc {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.pwa-install-banner {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 20px;
right: 20px;
background-color: var(--pwa-bg-banner);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
z-index: 99990;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom)));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, visibility 0.6s ease;
}
.pwa-install-banner.pwa-show {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.pwa-install-info {
display: flex;
align-items: center;
gap: 0.875rem;
flex: 1;
min-width: 0;
}
.pwa-install-info > div {
min-width: 0;
}
.pwa-install-icon {
width: 44px;
height: 44px;
border-radius: 10px;
flex-shrink: 0;
object-fit: contain;
}
.pwa-install-title {
display: block;
font-weight: 700;
color: var(--pwa-text-main);
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pwa-install-subtitle {
display: block;
font-size: 0.75rem;
color: var(--pwa-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pwa-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.pwa-close-btn {
background: none;
border: none;
font-size: 1.25rem;
color: var(--pwa-text-muted);
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
}
.pwa-close-btn:hover {
color: var(--pwa-text-main);
}
.pwa-ios-list {
text-align: left;
margin-bottom: 2rem;
padding-left: 1.25rem;
color: rgba(255, 255, 255, 0.9);
}
.pwa-ios-list li {
margin-bottom: 1rem;
font-weight: 500;
}
@keyframes pwa-spin { to { transform: rotate(360deg); } }
@keyframes pwa-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(0.95); } }
@media (min-width: 768px) {
.pwa-install-banner { max-width: 380px; left: auto; right: 24px; }
}