/* PWA Install Banner — CMD Akademia AI Dodaj w index.html */ .pwa-install-banner { position: fixed; bottom: 70px; left: 16px; right: 16px; max-width: 480px; margin: 0 auto; background: linear-gradient(135deg, #061329 0%, #0d2137 100%); color: #fff; border: 1px solid rgba(94, 229, 229, 0.15); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); z-index: 60; animation: pwa-slideUp 0.3s ease; } @keyframes pwa-slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pwa-install-banner__icon { flex-shrink: 0; } .pwa-install-banner__text { flex: 1; min-width: 0; } .pwa-install-banner__text strong { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 2px; } .pwa-install-banner__text span { font-size: 12px; color: #94b8d4; line-height: 1.3; } .pwa-install-banner .btn--sm { flex-shrink: 0; padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; background: #5ee5e5; color: #061329; transition: background 0.2s; } .pwa-install-banner .btn--sm:hover { background: #7fffff; } .pwa-install-banner__close { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; flex-shrink: 0; transition: color 0.2s; } .pwa-install-banner__close:hover { color: #94b8d4; } /* Responsywność — mniejsze telefony */ @media (max-width: 380px) { .pwa-install-banner { flex-wrap: wrap; gap: 8px; padding: 12px 14px; } .pwa-install-banner__text strong { font-size: 13px; } .pwa-install-banner .btn--sm { width: 100%; text-align: center; order: 3; } .pwa-install-banner__close { position: absolute; top: 8px; right: 8px; } }