*{margin:0;padding:0;box-sizing:border-box}
html,body{overscroll-behavior:none}
body{background:#0a0a1a;color:#fff;font-family:system-ui,-apple-system,sans-serif;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
input,textarea,button{font-family:inherit;font-size:inherit}
a{color:#60a5fa;text-decoration:none}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-30%);opacity:0}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pullSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.slide-in{animation:slideIn .25s ease-out}
.fade-in{animation:fadeIn .2s ease-out}

/* Login */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;padding-top:max(16px,env(safe-area-inset-top))}
.login-box{width:100%;max-width:360px;animation:fadeIn .4s ease-out}
.login-logo{width:72px;height:72px;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 12px 40px rgba(37,99,235,.35)}
.login-logo svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:2}
.login-title{text-align:center;font-size:24px;font-weight:700;margin-bottom:4px}
.login-sub{text-align:center;color:#6b7280;font-size:13px;margin-bottom:28px}
.field{width:100%;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:15px;outline:none;transition:.2s}
.field:focus{border-color:#2563eb;background:rgba(255,255,255,.08)}
.field+.field{margin-top:10px}
.field::placeholder{color:#4b5563}
.btn{width:100%;padding:14px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:600;font-size:15px;border:none;cursor:pointer;margin-top:16px;transition:.2s;box-shadow:0 4px 16px rgba(37,99,235,.3)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5}
.error{color:#f87171;font-size:13px;text-align:center;margin-top:10px}
.hint{color:#4b5563;font-size:11px;text-align:center;margin-top:20px}

/* App shell */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.topbar{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:4px;background:rgba(10,10,26,.95);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.topbar-email{font-size:13px;color:#9ca3af;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-btn{background:none;border:none;color:#6b7280;padding:8px;cursor:pointer;border-radius:10px;transition:.15s}
.topbar-btn:active{background:rgba(255,255,255,.08);transform:scale(.92)}
.topbar-btn.primary{color:#60a5fa}
.unread-badge{background:#ef4444;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:4px}

/* Folders */
.folders{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;scrollbar-width:none}
.folders::-webkit-scrollbar{display:none}
.folder-btn{padding:7px 16px;border-radius:10px;font-size:12px;font-weight:600;background:none;border:none;color:#6b7280;cursor:pointer;white-space:nowrap;transition:.15s;position:relative}
.folder-btn:active{transform:scale(.95)}
.folder-btn.active{background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(124,58,237,.1));color:#818cf8}

/* Search */
.search-wrap{padding:4px 12px 8px;position:relative}
.search{width:100%;padding:9px 12px 9px 36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#fff;font-size:13px;outline:none;transition:.2s}
.search:focus{border-color:rgba(37,99,235,.3);background:rgba(255,255,255,.06)}
.search-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:#4b5563;pointer-events:none}

/* Pull to refresh */
.pull-indicator{text-align:center;padding:0;height:0;overflow:hidden;transition:height .2s;color:#6b7280;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.pull-indicator.active{height:40px}
.pull-indicator svg{width:16px;height:16px}

/* Inbox / message / compose views fill remaining app height */
#inboxView{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#messageView{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#composeView{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* Message list */
.msglist{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:max(env(safe-area-inset-bottom),var(--nav-bottom,64px))}
.msg{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.025);cursor:pointer;align-items:flex-start;transition:background .15s,transform .2s;position:relative;overflow:hidden}
.msg:active{background:rgba(255,255,255,.04)}
.msg.unread{background:rgba(37,99,235,.03)}
.msg.swiping{transition:none}

/* Avatar */
.msg-avatar{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;color:#fff;text-transform:uppercase}

.msg-body{flex:1;min-width:0}
.msg-row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.msg-from{font-size:14px;color:#d1d5db;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.unread .msg-from{color:#fff;font-weight:600}
.msg-date{font-size:10px;color:#6b7280;flex-shrink:0}
.msg-subject{font-size:13px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.msg.unread .msg-subject{color:#a5b4fc}
.msg-preview{font-size:11px;color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.msg-icons{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-top:4px}
.msg-dot{width:8px;height:8px;border-radius:50%;background:#3b82f6;flex-shrink:0}

/* Swipe actions */
.swipe-bg{position:absolute;top:0;bottom:0;right:0;display:flex;align-items:center;padding:0 20px;font-size:12px;font-weight:600;border-radius:0;opacity:0;transition:opacity .15s}
.swipe-bg.delete{background:#ef4444;color:#fff}
.swipe-bg.star{background:#f59e0b;color:#fff;left:0;right:auto}
.msg.swiped-left .swipe-bg.delete{opacity:1}
.msg.swiped-right .swipe-bg.star{opacity:1}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#374151;animation:fadeIn .3s ease-out}
.empty svg{width:56px;height:56px;margin-bottom:16px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.5}
.empty p{font-size:14px}

/* Message view */
.msgview{flex:1;overflow-y:auto;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom));animation:slideIn .2s ease-out}
.msgview h2{font-size:18px;font-weight:600;margin-bottom:12px;line-height:1.3}
.msgview-header{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.msgview-avatar{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;color:#fff}
.msgview-meta{font-size:13px;color:#6b7280;margin-bottom:3px}
.msgview-meta strong{color:#d1d5db}
.msgview-content{margin-top:20px;font-size:14px;line-height:1.7;color:#d1d5db;word-wrap:break-word;border-top:1px solid rgba(255,255,255,.05);padding-top:20px}
.msgview-content pre{white-space:pre-wrap;font-family:inherit}
.msgview-content img{max-width:100%;height:auto;border-radius:8px}
.msgview-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.msgview-images img{max-width:200px;max-height:200px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:zoom-in}
.msgview-content img{cursor:zoom-in}
/* Lightbox — podgląd obrazu w apce (zamykany ✕ / dotykiem / Wstecz) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex;animation:fadeIn .15s ease-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lightbox-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:201}
.lightbox-hint{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.5);font-size:12px;pointer-events:none}
.msgview-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.attachment-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;color:#9ca3af}
.msgview-actions{display:flex;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.action-btn{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
.action-btn:active{transform:scale(.95)}
.action-btn.reply{background:rgba(37,99,235,.12);color:#60a5fa}
.action-btn.reply-all{background:rgba(124,58,237,.12);color:#a78bfa}
.action-btn.forward{background:rgba(34,197,94,.1);color:#4ade80}
.action-btn.delete{background:rgba(239,68,68,.1);color:#f87171}

/* Compose */
.compose{flex:1;display:flex;flex-direction:column;overflow-y:auto;animation:slideIn .2s ease-out}
.compose-fields{padding:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;flex:1}
.compose-input{width:100%;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:14px;outline:none;transition:.2s}
.compose-input:focus{border-color:#2563eb;background:rgba(255,255,255,.07)}
textarea.compose-input{flex:1;min-height:200px;resize:none;line-height:1.6}
.compose-from{font-size:13px;color:#6b7280;padding:4px 0}
.compose-label{font-size:11px;color:#4b5563;margin-bottom:-6px}

/* Signature */
.signature-preview{font-size:11px;color:#4b5563;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.06);margin-top:4px}

/* Settings panel */
.settings-panel{position:fixed;bottom:0;left:0;right:0;background:#111827;border-top:1px solid rgba(255,255,255,.1);border-radius:16px 16px 0 0;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom));z-index:50;transform:translateY(100%);transition:transform .3s ease-out;max-height:60vh;overflow-y:auto}
.settings-panel.open{transform:translateY(0)}
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.settings-overlay.open{opacity:1;pointer-events:auto}
.settings-title{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.setting-label{font-size:13px;color:#d1d5db}
.setting-desc{font-size:11px;color:#6b7280;margin-top:2px}

/* Toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:#1f2937;color:#fff;padding:10px 20px;border-radius:12px;font-size:13px;z-index:100;transition:transform .3s ease-out;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px;padding-bottom:max(env(safe-area-inset-bottom),var(--nav-bottom,64px));border-top:1px solid rgba(255,255,255,.05)}
.pagination button{background:rgba(255,255,255,.05);border:none;color:#9ca3af;padding:8px 14px;cursor:pointer;border-radius:8px;font-size:13px;transition:.15s}
.pagination button:active{transform:scale(.95)}
.pagination button:disabled{opacity:.3}
.pagination span{font-size:12px;color:#6b7280}

.spinner{display:flex;align-items:center;justify-content:center;padding:40px}
.spin{animation:spin 1s linear infinite}
.hidden{display:none!important}

/* Toggle switch */
.toggle{position:relative;width:44px;height:24px;display:inline-block}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:#374151;border-radius:12px;transition:.2s;cursor:pointer}
.toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-track{background:#2563eb}
.toggle input:checked+.toggle-track+.toggle-thumb{left:22px}

/* Safe area for notch phones */
.toast{bottom:max(80px,calc(env(safe-area-inset-bottom) + 60px))}

/* Small screens */
@media(max-width:360px){
.topbar-btn{padding:6px}
.topbar-email{font-size:11px}
.folder-btn{padding:6px 10px;font-size:11px}
.action-btn{padding:8px 12px;font-size:12px}
}

/* ── 11.10.2026 (K2): style przeniesione z atrybutów style="" (CSP bez 'unsafe-inline') ── */
.remember{display:flex;align-items:center;gap:8px;margin-top:12px;cursor:pointer}
.remember input{width:18px;height:18px;accent-color:#2563eb;border-radius:4px;cursor:pointer}
.remember span{font-size:13px;color:#9ca3af}
.compose-attachments{display:flex;flex-wrap:wrap;gap:6px}
.attach-label{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer;font-size:13px;color:#9ca3af;transition:.15s;align-self:flex-start}
.btn.btn-secondary{background:rgba(255,255,255,.08);box-shadow:none;margin-top:8px}
.settings-close{background:none;border:none;color:#6b7280;font-size:20px;cursor:pointer}
.signature-input{margin-top:8px;min-height:80px}
.mt16{margin-top:16px}
.settings-footer{margin-top:20px;text-align:center}
.settings-version{font-size:11px;color:#4b5563}
.settings-site{font-size:10px;color:#374151;margin-top:2px}
.msg-clip{color:#6b7280;font-size:12px}
.attachment-chip.clickable{cursor:pointer;text-decoration:none}
.attachment-chip.offline{opacity:.5}
.msgview-date{color:#4b5563}
.offline-note{margin-top:12px;color:#f59e0b;font-size:12px}
/* Treść HTML maila: izolowana ramka bez skryptów (iframe sandbox), biała „kartka” — czytelna dla każdego maila */
.msg-frame{display:block;width:100%;min-height:120px;border:0;border-radius:10px;background:#fff}