*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html, body {
     height: 100%; font-family: "Inter", sans-serif;
     color: #000000; background: red; overflow: hidden;
 }
 .app {
     display: flex; height: 100vh;
     background: #ffffff;
 }

 /* ═══════════════════════════════════════════
  P AN*EL 1 – sidebar: Pokaż wszystkie + Dodaj mail + adresy
  ═══════════════════════════════════════════ */
 .panel1 {
     width: 230px; flex-shrink: 0;
     display: flex; flex-direction: column;
 }

 .p1-header {
     padding: 12px 12px 10px;
     border-bottom: 1px solid #5164BE33;
     flex-shrink: 0;
 }
 .p1-nav-row {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 10px;
 }
 .p1-nav-row a { font-size: 12px; color: #000000; text-decoration: none; }
 .p1-nav-row a:hover { color: #000000; }

 /* Pokaż wszystkie */
 .btn-show-all {
     display: flex; align-items: center; gap: 7px;
     width: 100%; padding: 8px 10px;
     background: #dce0f0; border: 1px solid #5164BE77;
     border-radius: 9px; color: #000000;
     font-size: 12px; font-weight: 500;
     cursor: pointer; font-family: "Inter", sans-serif;
     transition: background .15s; margin-bottom: 7px;
 }
 .btn-show-all:hover { background: #dce0f0; }

 /* Dodaj mail */
 .btn-add-mail {
     display: flex; align-items: center; gap: 7px;
     width: 100%; padding: 8px 10px;
     background: none; border: 1px solid #5164BE44;
     border-radius: 9px; color: #000000;
     font-size: 12px; font-weight: 500;
     cursor: pointer; font-family: "Inter", sans-serif;
     transition: background .15s, color .15s;
 }
 .btn-add-mail:hover { background: #f0f2fa; color: #000000; }
 .btn-add-mail.open  { background: #f0f2fa; color: #000000; border-color: #5164BE88; }

 /* Inline add-form */
 .add-form-wrap {
     overflow: hidden; max-height: 0;
     transition: max-height .25s cubic-bezier(.4,0,.2,1);
     flex-shrink: 0; padding: 0 12px;
 }
 .add-form-wrap.open { max-height: 120px; padding-bottom: 8px; }

 .add-form-box {
     margin-top: 8px;
     background: #f5f5f5; border: 1px solid #5164BE44;
     border-radius: 10px; overflow: hidden;
 }
 .cfield {
     display: flex; align-items: center; gap: 8px;
     padding: 8px 10px; border-bottom: 1px solid #5164BE22;
 }
 .cfield label { font-size: 11px; color: #000000; min-width: 38px; }
 .cfield input {
     flex: 1; background: none; border: none; outline: none;
     color: #000000; font-size: 12px; font-family: "Inter", sans-serif;
 }
 .cfield input::placeholder { color: #666666; }
 .add-err { font-size: 11px; color: #000000; padding: 4px 10px 0; min-height: 18px; }
 .btn-create {
     display: block; width: 100%;
     background: #e8ecf8; border: none; border-top: 1px solid #5164BE66;
     color: #000000; font-size: 12px; font-weight: 500;
     padding: 8px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
     text-align: center; margin-top: 4px;
 }
 .btn-create:hover { background: #dce0f0; }
 .btn-create:disabled { background: #ffffff; color: #000000; cursor: default; }

 /* Lista adresów w panelu 1 */
 .p1-addr-title {
     padding: 10px 12px 3px;
     font-size: 10px; font-weight: 600; color: #000000;
     text-transform: uppercase; letter-spacing: .8px; flex-shrink: 0;
 }
 .p1-addr-list { flex: 1; overflow-y: auto; }
 .p1-addr-list::-webkit-scrollbar { width: 3px; }
 .p1-addr-list::-webkit-scrollbar-thumb { background: #dce0f0; border-radius: 3px; }

 .addr-row {
     padding: 9px 12px; cursor: pointer;
     border-bottom: 1px solid #5164BE15;
     transition: background .15s;
 }
 .addr-row:hover { background: #f0f2fa; }
 .addr-row.active { background: #f0f2fa; border-left: 2px solid #00a896; padding-left: 10px; }
 .addr-name { font-size: 13px; color: #000000; margin-bottom: 2px; }
 .addr-row.active .addr-name { color: #000000; font-weight: 500; }
 .addr-email { font-size: 11px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-fp { font-size: 10px; color: #555555; font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
 .addr-badge {
     display: inline-block; margin-top: 3px;
     background: #e6fffa; border: 1px solid #00a896;
     color: #000000; font-size: 10px; border-radius: 6px;
     padding: 1px 6px;
 }
 .p1-empty { padding: 12px; font-size: 12px; color: #000000; text-align: center; }

 /* ═══════════════════════════════════════════
  P AN*EL 2 – lista tematów
  ═══════════════════════════════════════════ */
 .panel2 {
     width: 300px; flex-shrink: 0;
     display: flex; flex-direction: column;
 }
 .p2-header {
     padding: 12px 14px 11px;
     border-bottom: 1px solid #5164BE33; flex-shrink: 0;
 }
 .p2-title { font-size: 14px; font-weight: 600; color: #000000; }
 .p2-sub { font-size: 11px; color: #000000; margin-top: 2px; }
 .p2-rows { flex: 1; overflow-y: auto; }
 .p2-rows::-webkit-scrollbar { width: 4px; }
 .p2-rows::-webkit-scrollbar-thumb { background: #dce0f0; border-radius: 4px; }

 .p2-row {
     padding: 11px 14px; border-bottom: 1px solid #5164BE18;
     cursor: pointer; transition: background .15s; position: relative;
 }
 .p2-row:hover  { background: #f0f2fa; }
 .p2-row.active { background: #f0f2fa; border-left: 3px solid #00a896; padding-left: 11px; }
 .p2-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 2px; }
 .p2-sender { font-size: 13px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
 .p2-row.unread .p2-sender { color: #000000; font-weight: 600; }
 .p2-date { font-size: 11px; color: #000000; white-space: nowrap; flex-shrink: 0; }
 .p2-subj { font-size: 13px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .p2-row.unread .p2-subj { color: #000000; }
 .p2-toaddr { font-size: 10px; color: #000000; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .unread-dot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #d6fff8; }

 /* ═══════════════════════════════════════════
  P AN*EL 3 – podgląd maila
  ═══════════════════════════════════════════ */
 .panel3 { flex: 1; display: flex; flex-direction: column; overflow: hidden;  }
 .preview-empty {
     flex: 1; display: flex; flex-direction: column;
     align-items: center; justify-content: center; color: #000000; gap: 12px;
 }
 .preview-empty p { font-size: 14px; }
 .preview-scroll { flex: 1; overflow-y: auto; padding: 36px 44px; display: none; }
 .preview-scroll::-webkit-scrollbar { width: 4px; }
 .preview-scroll::-webkit-scrollbar-thumb { background: #dce0f0; border-radius: 4px; }

 .pv-subject { font-size: 22px; font-weight: 600; color: #000000; line-height: 1.3; margin-bottom: 20px; }
 .pv-meta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f5f5f5; border: 1px solid #5164BE2a; border-radius: 12px; margin-bottom: 28px; }
 .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#e8ecf8,#e6fffa); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; }
 .pv-meta-info { flex: 1; min-width: 0; }
 .pv-name { font-size: 14px; font-weight: 500; }
 .pv-addr-line { font-size: 12px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pv-date-right { font-size: 12px; color: #000000; white-space: nowrap; }
 .pv-to-badge {
     display: inline-block; margin-bottom: 20px;
     background: #e6fffa; border: 1px solid #00a896;
     color: #000000; font-size: 11px; border-radius: 7px;
     padding: 3px 10px;
 }
 /* Nadawca bez potwierdzenia SPF/DKIM/DMARC */
 .auth-warn { color: #b45309; }
 .pv-auth-warn {
     margin-bottom: 16px; padding: 8px 12px;
     background: #fff7ed; border: 1px solid #f59e0b;
     border-radius: 8px; font-size: 12px; line-height: 1.5; color: #000000;
 }
 .btn-delete-mail {
     display: inline-block; margin: 0 0 20px 8px;
     background: none; border: 1px solid #ff7070;
     border-radius: 7px; color: #000000; font-size: 11px;
     padding: 3px 10px; cursor: pointer; font-family: "Inter", sans-serif;
 }
 .btn-delete-mail:hover { background: #ffecec; }
 .btn-delete-mail:disabled { opacity: .5; cursor: default; }
 .btn-load-older { justify-content: center; margin: 10px auto; width: calc(100% - 20px); }
 .pv-divider { height: 1px; background: #f0f2fa; margin-bottom: 24px; }
 .pv-text { font-size: 14px; line-height: 1.8; color: #000000; white-space: pre-wrap; }

 .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #e9f7ee; border: 1px solid #00a896; color: #000000; font-size: 13px; padding: 10px 20px; border-radius: 10px; z-index: 300; opacity: 0; transition: opacity .3s; pointer-events: none; }
 .toast.show { opacity: 1; }
 .state-msg { padding: 20px 14px; text-align: center; font-size: 13px; color: #000000; }
 .state-err  { color: #000000; }

 /* copy btn */
 .addr-row-header { display: flex; align-items: center; gap: 5px; }
 .addr-name { flex: 1; }
 .btn-copy {
     background: none; border: none; cursor: pointer; padding: 2px 4px;
     color: #000000; border-radius: 5px; line-height: 1;
     transition: color .15s, background .15s; flex-shrink: 0;
 }
 .btn-copy:hover { color: #000000; background: #e6fffa; }
 .btn-copy.copied { color: #000000; }

 /* freeze btn */
 .btn-freeze {
     display: block; width: 100%; margin-top: 5px;
     background: none; border: 1px solid #5164BE33;
     border-radius: 6px; color: #000000;
     font-size: 10px; padding: 3px 0; cursor: pointer;
     font-family: "Inter", sans-serif; transition: all .15s;
     text-align: center;
 }
 .btn-freeze:hover { border-color: #cccccc; color: #000000; background: #f5f5f5; }
 .addr-row.frozen .btn-freeze { color: #000000; border-color: #00a896; }
 .addr-row.frozen .btn-freeze:hover { color: #000000; border-color: #00a896; }
 .addr-row.frozen { opacity: .7; }

 /* sekcja zamrożonych */
 .frozen-separator {
     padding: 8px 12px 3px;
     font-size: 10px; font-weight: 600; color: #000000;
     text-transform: uppercase; letter-spacing: .8px;
     border-top: 1px solid #5164BE22; margin-top: 4px;
 }

 /* ═══ Przycisk Napisz w panel 2 ═══ */
 .btn-compose {
     display: flex; align-items: center; gap: 6px;
     background: #e8ecf8; border: 1px solid #5164BE; border-radius: 8px;
     color: #000000; font-size: 12px; font-weight: 500;
     padding: 6px 12px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
     margin-top: 8px; width: 100%;
 }
 .btn-compose:hover { background: #dce0f0; }

 /* ═══ Panel compose (zastępuje panel 3) ═══ */
 .compose-panel {
     flex: 1; display: none; flex-direction: column;
     background: #ffffff; overflow: hidden;
 }
 .compose-panel.active { display: flex; }
 .compose-header {
     padding: 20px 36px 14px;
     border-bottom: 1px solid #5164BE22; flex-shrink: 0;
     display: flex; align-items: center; justify-content: space-between;
 }
 .compose-title { font-size: 18px; font-weight: 600; color: #000000; }
 .btn-compose-close {
     background: none; border: none; cursor: pointer;
     color: #000000; padding: 4px; border-radius: 6px;
     transition: color .15s, background .15s;
 }
 .btn-compose-close:hover { color: #000000; background: #f5f5f5; }

 .compose-fields { flex: 1; overflow-y: auto; padding: 0 36px 20px; }
 .cf-row {
     display: flex; align-items: center;
     border-bottom: 1px solid #5164BE18; padding: 12px 0;
 }
 .cf-label { font-size: 12px; color: #000000; min-width: 60px; flex-shrink: 0; }
 .cf-input {
     flex: 1; background: none; border: none; outline: none;
     color: #000000; font-size: 13px; font-family: "Inter", sans-serif;
 }
 .cf-input::placeholder { color: #666666; }
 .cf-select {
     flex: 1; background: #ffffff; border: none; outline: none;
     color: #000000; font-size: 13px; font-family: "Inter", sans-serif;
     cursor: pointer;
 }
 .cf-select option { background: #ffffff; }
 .compose-body-wrap { flex: 1; display: flex; flex-direction: column; padding: 16px 0 0; }
 .cf-textarea {
     flex: 1; background: none; border: none; outline: none; resize: none;
     color: #000000; font-size: 14px; line-height: 1.7;
     font-family: "Inter", sans-serif; min-height: 200px;
 }
 .cf-textarea::placeholder { color: #666666; }
 .compose-footer {
     padding: 12px 36px 16px; border-top: 1px solid #5164BE22;
     display: flex; align-items: center; gap: 10px; flex-shrink: 0;
 }
 .btn-send {
     display: flex; align-items: center; gap: 7px;
     background: #e8ecf8; border: 1px solid #5164BE; border-radius: 8px;
     color: #000000; font-size: 13px; font-weight: 500;
     padding: 9px 22px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
 }
 .btn-send:hover { background: #dce0f0; }
 .btn-send:disabled { background: #ffffff; color: #000000; cursor: default; }
 .send-err { font-size: 12px; color: #000000; }
 .send-ok  { font-size: 12px; color: #000000; }

 /* ═══════════════════════════════════════════
  FOLDERY (panel 1)
  ═══════════════════════════════════════════ */
 .p1-folders { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
 .folder-btn {
     display: flex; align-items: center; gap: 7px;
     width: 100%; padding: 7px 10px;
     background: none; border: 1px solid transparent;
     border-radius: 9px; color: #000000;
     font-size: 12px; font-weight: 500;
     cursor: pointer; font-family: "Inter", sans-serif;
     transition: background .15s, border-color .15s;
     text-align: left;
 }
 .folder-btn:hover { background: #f0f2fa; }
 .folder-btn.active { background: #dce0f0; border-color: #5164BE77; }
 .folder-count { margin-left: auto; font-size: 11px; color: #000000; opacity: .65; }

 /* ═══════════════════════════════════════════
  SZUKANIE I ZAZNACZANIE (panel 2)
  ═══════════════════════════════════════════ */
 .p2-search {
     display: flex; align-items: center; gap: 6px;
     margin-top: 8px; padding: 6px 9px;
     background: #f5f5f5; border: 1px solid #5164BE33; border-radius: 8px;
 }
 .p2-search input {
     flex: 1; min-width: 0; background: none; border: none; outline: none;
     color: #000000; font-size: 12px; font-family: "Inter", sans-serif;
 }
 .p2-search input::placeholder { color: #666666; }
 .btn-szukaj-clear {
     background: none; border: none; cursor: pointer; color: #000000;
     font-size: 15px; line-height: 1; padding: 0 2px;
 }

 .p2-tools { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
 .p2-tools-right { display: flex; gap: 6px; flex-wrap: wrap; }
 .btn-tool {
     background: none; border: 1px solid #5164BE44; border-radius: 7px;
     color: #000000; font-size: 11px; padding: 3px 9px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
 }
 .btn-tool:hover { background: #f0f2fa; }
 .btn-tool.active { background: #dce0f0; border-color: #5164BE; }
 .btn-tool.danger { border-color: #ff7070; }
 .btn-tool.danger:hover { background: #ffecec; }
 .btn-tool:disabled { opacity: .5; cursor: default; }

 .p2-row.zaznaczalny { padding-left: 30px; }
 .p2-row.zaznaczona { background: #e6fffa; }
 .p2-check { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); }
 .p2-clip { margin-right: 6px; font-size: 10px; }
 .p2-sent-tag { font-size: 10px; color: #000000; opacity: .6; }

 /* ═══════════════════════════════════════════
  AKCJE I ZAŁĄCZNIKI (panel 3)
  ═══════════════════════════════════════════ */
 .pv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
 .btn-akcja {
     display: flex; align-items: center; gap: 6px;
     background: none; border: 1px solid #5164BE44; border-radius: 7px;
     color: #000000; font-size: 11px; padding: 4px 10px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
 }
 .btn-akcja:hover { background: #f0f2fa; }
 .btn-akcja:disabled { opacity: .5; cursor: default; }
 .pv-actions .btn-delete-mail { margin: 0; }

 .pv-attach { margin-top: 28px; border-top: 1px solid #f0f2fa; padding-top: 18px; }
 .pv-attach-title {
     font-size: 10px; font-weight: 600; color: #000000;
     text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px;
 }
 .pv-attach-list { display: flex; flex-direction: column; gap: 6px; }

 .attach-chip {
     display: flex; align-items: center; gap: 8px;
     background: #f5f5f5; border: 1px solid #5164BE2a; border-radius: 9px;
     padding: 7px 10px; font-size: 12px; color: #000000;
 }
 .attach-chip.broken { border-color: #f59e0b; background: #fff7ed; }
 .attach-ikona { flex-shrink: 0; }
 .attach-nazwa { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .attach-rozmiar { font-size: 11px; color: #000000; opacity: .6; flex-shrink: 0; }
 .attach-pobierz {
     background: #e8ecf8; border: 1px solid #5164BE77; border-radius: 6px;
     color: #000000; font-size: 11px; padding: 2px 9px; cursor: pointer;
     font-family: "Inter", sans-serif; flex-shrink: 0;
 }
 .attach-pobierz:hover { background: #dce0f0; }
 .attach-pobierz:disabled { opacity: .5; cursor: default; }
 .attach-usun {
     background: none; border: none; cursor: pointer; color: #000000;
     font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0;
 }
 .attach-usun:hover { color: #b45309; }

 .pv-images { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
 .pv-image { max-width: 260px; }
 .pv-image img {
     max-width: 100%; max-height: 220px; border-radius: 10px;
     border: 1px solid #5164BE2a; cursor: zoom-in; display: block;
 }
 .pv-image figcaption {
     font-size: 11px; color: #000000; opacity: .65; margin-top: 4px;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }

 /* Obrazek na pełnym ekranie */
 .lightbox {
     position: fixed; inset: 0; z-index: 400;
     display: none; align-items: center; justify-content: center;
     background: rgba(0, 0, 0, .82); padding: 40px;
 }
 .lightbox.show { display: flex; flex-direction: column; gap: 12px; }
 .lightbox img { max-width: 100%; max-height: 84vh; border-radius: 8px; }
 .lightbox-name { color: #ffffff; font-size: 12px; }
 .lightbox-close {
     position: absolute; top: 16px; right: 22px;
     background: none; border: none; color: #ffffff;
     font-size: 30px; line-height: 1; cursor: pointer;
 }

 /* ═══ Załączniki w oknie pisania ═══ */
 .compose-attach { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 0; }
 .compose-attach-title {
     font-size: 10px; font-weight: 600; color: #000000;
     text-transform: uppercase; letter-spacing: .8px;
 }
 .btn-attach {
     display: flex; align-items: center; gap: 6px;
     background: none; border: 1px solid #5164BE44; border-radius: 8px;
     color: #000000; font-size: 12px; padding: 8px 14px; cursor: pointer;
     font-family: "Inter", sans-serif; transition: background .15s;
 }
 .btn-attach:hover { background: #f0f2fa; }
 .compose-panel.upuszczanie { outline: 2px dashed #5164BE; outline-offset: -8px; }

 /* Obrazek osadzony przez nadawcę w środku treści – rysowany w miejscu,
    w którym stał, a nie na końcu wiadomości. */
 .pv-image.w-tresci { margin: 14px 0; max-width: 100%; }
 .pv-image.w-tresci img { max-height: 420px; }
 .pv-inline-slot { display: none; }
/* Wynik weryfikacji podpisow (audyt E2E 2026-09-23) */
.pv-verify-ok {
    margin-bottom: 12px; font-size: 11px; line-height: 1.5; color: #166534;
}

 /* List z haslem dla odbiorcy spoza octopoda.net (2026-09-25) */
 .cf-zewn { border-top: 1px solid #5164BE18; padding: 12px 0 0; font-size: 13px; }
 .cf-zewn-opcja { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
 .cf-zewn-opcja input { margin-top: 3px; }
 #cZewnPola { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0 22px; }
 #cZewnPola .cf-input { border: 1px solid #5164BE44; border-radius: 8px; padding: 8px 10px; }
 .cf-zewn-uwaga { font-size: 12px; color: #444444; line-height: 1.45; }