body { margin:0; font-family:sans-serif; transition: filter 0.3s;}
.pwa-banner, .offline-banner, .update-notification { display:none; position:fixed; z-index:10000; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.15); padding:12px; color:white;}
.pwa-banner { top:0; left:50%; transform:translateX(-50%); background: linear-gradient(135deg,#0d6efd,#0056b3); max-width:500px; width:90%; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.pwa-banner img { width:40px; height:40px; border-radius:8px;}
.install-btn { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); padding:8px 16px; border-radius:20px; cursor:pointer;}
.install-btn:hover { background:rgba(255,255,255,0.3);}
.dismiss-btn { background:none; border:none; color:white; font-size:24px; cursor:pointer;}
.loading-screen { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fa; z-index:9999; transition: opacity 0.5s;}
.loading-spinner { width:40px; height:40px; border:4px solid #e9ecef; border-top:4px solid #0d6efd; border-radius:50%; animation:spin 1s linear infinite; margin:16px 0;}
@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.offline-banner { bottom:20px; left:50%; transform:translateX(-50%); background:#ffc107; color:#000; padding:12px; display:flex; align-items:center; gap:12px;}
.retry-btn { padding:6px 12px; cursor:pointer; border-radius:4px;}
.update-notification { top:20px; right:20px; background:#28a745; padding:16px; display:flex; align-items:center; gap:12px;}
.app-container { padding:20px; min-height:100vh;}
body.offline { filter: grayscale(0.5);}