:root{
  --bg:#f4f6f8;--panel:#fff;--line:#e6e9ef;--line2:#eef1f5;--hov:#f6f8fa;
  --tx:#1d2433;--mut:#6b7385;--mut2:#98a0b0;
  --pri:#0f8b6b;--pri2:#0b7358;--pri-bg:#e8f5f0;--pri-bg2:#f2faf7;
  --ink:#131417;--err:#c2410c;--err-bg:#fff4ed;--warn-bg:#fff8e6;--warn:#8a5a00;
  --r:12px;--sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
svg{flex:none}
[hidden]{display:none!important}
.mut{color:var(--mut)}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:13.5px;border:1px solid transparent;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn.pri{background:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(15,139,107,.25)}
.btn.pri:hover{background:var(--pri2)}
.btn.ghost{border-color:var(--line);background:#fff;color:var(--tx)}
.btn.ghost:hover{background:var(--hov)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55;cursor:default}
.ico{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;color:var(--mut)}
.ico:hover{background:var(--hov);color:var(--tx)}
.ico svg{width:18px;height:18px}
.ico.danger:hover{color:var(--err);background:var(--err-bg)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--pri);color:#fff;font-size:11px;font-weight:700;font-style:normal;display:inline-grid;place-items:center}
.alert{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px}
.alert.err{background:var(--err-bg);color:var(--err);border:1px solid #fed7c3}
.alert.ok{background:var(--pri-bg);color:var(--pri2);border:1px solid #c8eadd}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f5e0a8}

/* układ */
.app{display:flex;height:100vh;height:100dvh}
.side{width:248px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px 14px}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;color:var(--tx)}
.brand img{border-radius:10px}
.brand b{display:block;font-weight:800;font-size:17px;letter-spacing:.06em;line-height:1}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--pri);letter-spacing:.2em;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border-radius:10px;color:#3b4354;font-weight:600}
.nav a svg{width:19px;height:19px;color:var(--mut)}
.nav a:hover{background:var(--hov)}
.nav a.on{background:var(--pri-bg);color:var(--pri2)}
.nav a.on svg{color:var(--pri)}
.nav a .badge{margin-left:auto}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--line2)}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0f8b6b,#12a07c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.me-t{min-width:0;flex:1}
.me-t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-t small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{flex:1;min-width:0;overflow:auto;padding:24px 28px;position:relative}
.pg-mail .main{padding:0;overflow:hidden}
.menu-btn{display:none}
.fold-btn{display:none}

/* nagłówek strony + ustawienia */
.page-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.page-h h1{font-size:24px;font-weight:800;letter-spacing:-.01em}
.set-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start;max-width:1180px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh)}
.card h2{font-size:17px;font-weight:700;margin-bottom:4px}
.card>p{font-size:13.5px;margin-bottom:16px}
.form{display:grid;gap:12px;max-width:440px}
.form label,.login-card label{display:grid;gap:6px;font-size:12.5px;font-weight:600;color:#3b4354}
.form input,.login-card input{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:500}
.form input:focus,.login-card input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(15,139,107,.15)}
.form .btn{justify-self:start;margin-top:4px}
.wide-card{grid-column:1/-1}
.blok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.blok{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.blok-h{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;background:#fbfcfd;border-bottom:1px solid var(--line2)}
.blok-h small{color:var(--mut);font-size:12px}
.blok-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line2)}
.blok-r:last-child{border-bottom:0}
.blok-r span{min-width:0}
.blok-r b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.blok-r small{color:var(--mut);font-size:11.5px}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px}
.btn.przen{height:32px;padding:0 8px 0 10px;gap:6px;margin-right:4px}
.btn.przen svg{width:16px;height:16px}
.btn.przen .car{width:14px;height:14px;color:var(--mut)}
.blok-pusto{padding:14px;color:var(--mut);font-size:13px}
.sig-prev{margin-top:22px;padding:18px;border:1px dashed var(--line);border-radius:10px;background:#fbfcfd}
.sig-prev .lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:-10px}

/* KLIENCI */
.back-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:12px}
.back-link:hover{color:var(--pri2)}
.back-link svg{width:16px;height:16px}
.kl-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.kl-bar .search{width:420px;max-width:100%;background:#fff}
.seg{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg a{padding:6px 12px;border-radius:7px;font-weight:600;font-size:13px;color:#3b4354;white-space:nowrap}
.seg a em{font-style:normal;color:var(--mut2);font-weight:600;margin-left:3px}
.seg a:hover{background:var(--hov)}
.seg a.on{background:var(--pri-bg);color:var(--pri2)}
.kl-table{padding:0;overflow:hidden}
.kl-row{display:grid;grid-template-columns:2.2fr 1.3fr 1fr 1.4fr 170px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line2);color:var(--tx)}
.kl-row:last-child{border-bottom:0}
a.kl-row:hover{background:var(--pri-bg2)}
.kl-head{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);background:#fbfcfd;padding:10px 18px}
.kl-name{display:flex;align-items:center;gap:12px;min-width:0}
.kl-name b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-name small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-name>span:last-child{min-width:0}
.kl-av{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--pri2);background:linear-gradient(135deg,#e3f4ee,#d3ede3)}
.kl-av.big{width:64px;height:64px;border-radius:16px;font-size:22px}
.kl-kont small{display:block;font-size:12.5px;color:#3b4354;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.st{display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.st-aktywny{background:var(--pri-bg);color:var(--pri2)}
.st-potencjalny{background:#fff4e2;color:#b45309}
.st-archiwalny{background:#eef1f5;color:#6b7385}
.pl{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:12px;font-weight:600;color:var(--mut);margin-left:8px}
.pl svg{width:14px;height:14px}
.kl-empty{display:grid;justify-items:center;gap:6px;padding:48px;text-align:center}
.kl-empty svg{width:48px;height:48px;color:#c6ccd6}
.kl-hero{display:flex;align-items:center;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.kl-hero-t{flex:1;min-width:260px}
.kl-hero-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kl-hero h1{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.kl-chips{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.kl-chips>*{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#3b4354}
.kl-chips a:hover{color:var(--pri2)}
.kl-chips svg{width:15px;height:15px;color:var(--mut)}
.kl-hero-a{display:flex;gap:8px;flex-wrap:wrap}
.kl-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;align-items:start}
.dane{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;margin-top:14px;font-size:13.5px}
.dane dt{color:var(--mut);font-weight:600}
.dane dd{font-weight:500;word-break:break-word}
h3.sub{font-size:13px;font-weight:700;margin:20px 0 6px;color:#3b4354}
.notatki{white-space:pre-wrap;font-size:13.5px;background:#fbfcfd;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;color:#3b4354}
.meta-l{margin-top:16px;font-size:11.5px;color:var(--mut2)}
.sec-h{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.drop{border:1.5px dashed #cfd6e0;border-radius:12px;background:#fbfcfd;margin-bottom:12px}
.drop.nad{border-color:var(--pri);background:var(--pri-bg2)}
.drop-in{display:grid;justify-items:center;gap:3px;padding:18px;cursor:pointer;text-align:center;font-size:13px}
.drop-in svg{width:28px;height:28px;color:var(--pri);margin-bottom:2px}
.drop-in u{color:var(--pri2);text-decoration:none;font-weight:600}
.drop-opt{padding:0 14px 14px;display:grid;gap:10px}
.drop-list{display:flex;flex-wrap:wrap;gap:6px}
.drop-row{display:flex;gap:8px}
.drop-row select,.drop-row input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff;font-size:13.5px}
.drop-row input{flex:1;min-width:0}
.files{list-style:none}
.files li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line2)}
.files li:first-child{border-top:0}
.fi{width:40px;height:44px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:10px;font-weight:800;text-transform:uppercase;background:#eef1f5;color:#4b5467}
.fi.f-pdf{background:#fdecec;color:#c0392b}
.fi.f-doc,.fi.f-docx,.fi.f-odt{background:#e8f0fe;color:#1a56db}
.fi.f-xls,.fi.f-xlsx,.fi.f-ods,.fi.f-csv{background:#e6f6ec;color:#15803d}
.fi.f-jpg,.fi.f-jpeg,.fi.f-png,.fi.f-webp{background:#f3e8ff;color:#7e22ce}
.fl-t{flex:1;min-width:0}
.fl-t b{display:block;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-t a:hover b{color:var(--pri2)}
.fl-t small{color:var(--mut);font-size:12px}
.kat{font-style:normal;font-weight:700;color:var(--pri2);background:var(--pri-bg);padding:1px 7px;border-radius:5px;margin-right:4px;font-size:11px}
.fl-a{display:flex;gap:2px}
.files-empty{color:var(--mut);font-size:13px;padding:14px 4px!important}
.kl-form{max-width:900px;display:grid;gap:8px}
.fg{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.fg h3{font-size:14px;font-weight:700}
.kl-form label{display:grid;gap:6px;font-size:12.5px;font-weight:600;color:#3b4354}
.kl-form input,.kl-form select,.kl-form textarea{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:500;width:100%}
.kl-form textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.kl-form input:focus,.kl-form select:focus,.kl-form textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(15,139,107,.15)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}
.nipw{display:flex;gap:8px}
.nipw .btn{height:42px;flex:none}
.hint{font-size:12px;font-weight:500;color:var(--mut);min-height:16px}
.hint.ok{color:var(--pri2)}.hint.err{color:var(--err)}
.form-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
@media (max-width:1100px){.kl-row{grid-template-columns:2fr 1.2fr 1fr 150px}.kl-row>span:nth-child(4){display:none}.kl-grid{grid-template-columns:1fr}}
@media (max-width:700px){.kl-row{grid-template-columns:1fr auto}.kl-row>span:nth-child(2),.kl-row>span:nth-child(3){display:none}.kl-head{display:none}.f2,.f3{grid-template-columns:1fr}.nipw{flex-direction:column}.drop-row{flex-direction:column}.dane{grid-template-columns:1fr;gap:2px}.dane dd{margin-bottom:8px}}

/* logowanie */
.login-body{background:linear-gradient(135deg,#eef6f3 0%,#f6f7f9 55%,#eef1f6 100%);min-height:100vh}
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;max-width:1100px;margin:0 auto;align-items:center;gap:60px;padding:40px 28px}
.brand.big b{font-size:22px}.brand.big small{font-size:12px}
.login-art h1{font-size:40px;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:26px 0 14px}
.login-art p{color:var(--mut);font-size:16px;max-width:430px}
.login-art ul{list-style:none;margin-top:24px;display:grid;gap:10px}
.login-art li{display:flex;align-items:center;gap:10px;font-weight:500;color:#3b4354}
.login-art li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--pri-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8b6b' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px 26px;box-shadow:0 20px 50px -20px rgba(16,24,40,.18);display:grid;gap:14px}
.login-card h2{font-size:22px;font-weight:800}
.login-card>p{margin-top:-8px}
.login-card .foot{text-align:center;font-size:11.5px;margin-top:4px}

/* POCZTA */
.mail{display:flex;flex-direction:column;height:100%}
.mail-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.boxes{display:flex;gap:8px;min-width:0;overflow-x:auto}
.box{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;flex:none}
.box:hover{background:var(--hov)}
.box.on{border-color:var(--pri);background:var(--pri-bg2);box-shadow:0 0 0 3px rgba(15,139,107,.1)}
.box-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#eef1f5;color:#4b5467}
.box-ic.wsp{background:#fff4e2;color:#b45309}
.box.on .box-ic{background:var(--pri);color:#fff}
.box-ic svg{width:18px;height:18px}
.box-t small{display:block;font-size:11px;font-weight:600;color:var(--mut);line-height:1.2}
.box-t b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.top-r{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:8px;height:40px;width:300px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd;color:var(--mut)}
.search:focus-within{border-color:var(--pri);background:#fff;box-shadow:0 0 0 3px rgba(15,139,107,.12)}
.search svg{width:17px;height:17px}
.search input{border:0;background:none;outline:none;flex:1;min-width:0;font-size:13.5px;color:var(--tx)}
.mail-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(320px,400px) 1fr}
.folders{background:var(--panel);border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.folders button{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:9px;font-weight:600;color:#3b4354;text-align:left}
.folders button svg{width:18px;height:18px;color:var(--mut)}
.folders button:hover{background:var(--hov)}
.folders button.on{background:var(--pri-bg);color:var(--pri2)}
.folders button.on svg{color:var(--pri)}
.cnt{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--pri)}
.cnt.mut{color:var(--mut2);font-weight:600}
.fold-sec{display:flex;align-items:center;justify-content:space-between;padding:16px 6px 6px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.fold-sec button{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--mut)}
.fold-sec button:hover{background:var(--pri-bg);color:var(--pri2)}
.fold-sec button svg{width:15px;height:15px}
#wlasne{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0}
.fw{position:relative;display:flex;align-items:center;border-radius:9px}
.fw>button{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:9px;font-weight:600;color:#3b4354;text-align:left}
.fw>button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw>button svg{width:18px;height:18px;color:var(--mut)}
.fw:hover{background:var(--hov)}
.fw.on{background:var(--pri-bg)}
.fw.on>button{color:var(--pri2)}.fw.on>button svg{color:var(--pri)}
.fw-a{display:none;gap:1px;padding-right:4px}
.fw:hover .fw-a{display:flex}
.fw-a button{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--mut)}
.fw-a button:hover{background:#fff;color:var(--tx)}
.fw-a button svg{width:14px;height:14px}
.fw-pusto{font-size:12px;color:var(--mut2);padding:2px 10px 6px}
.dmenu{position:fixed;z-index:80;min-width:220px;max-width:300px;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -12px rgba(16,24,40,.28);padding:6px}
.dm-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);padding:6px 10px 4px}
.dmenu button{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border-radius:8px;font-weight:600;font-size:13.5px;text-align:left;color:#3b4354}
.dmenu button:hover{background:var(--pri-bg2);color:var(--pri2)}
.dmenu button svg{width:17px;height:17px;color:var(--mut)}
.dmenu .dm-nowy{border-top:1px solid var(--line2);border-radius:0 0 8px 8px;margin-top:4px;color:var(--pri2)}
.fold-note{margin-top:auto;font-size:11.5px;color:var(--mut);padding:10px;border-radius:9px;background:#fbfcfd;border:1px solid var(--line2);line-height:1.45}
.list{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.list-h{display:flex;align-items:center;gap:8px;height:52px;padding:0 10px 0 14px;border-bottom:1px solid var(--line)}
.list-t{flex:1;min-width:0}
.list-t b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.list-t small{color:var(--mut);font-size:11.5px}
.bulk{display:flex;gap:2px;align-items:center}
.zaz-licz{flex:1;font-size:13px;font-weight:700;white-space:nowrap}
.chk{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;cursor:pointer}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{width:17px;height:17px;border:1.6px solid #c6ccd6;border-radius:5px;background:#fff}
.chk input:checked+span{background:var(--pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--pri)}
.msgs{list-style:none;overflow-y:auto;flex:1}
.msg{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative}
.msg:hover{background:var(--hov)}
.msg.on{background:var(--pri-bg2);box-shadow:inset 3px 0 0 var(--pri)}
.msg .l1{display:flex;align-items:baseline;gap:8px}
.msg .kto{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.msg .kiedy{font-size:11.5px;color:var(--mut);white-space:nowrap}
.msg .tem{font-size:13px;color:#3b4354;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msg .meta{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.msg.nowa .kto,.msg.nowa .tem{font-weight:700;color:var(--tx)}
.msg.nowa::before{content:"";position:absolute;left:5px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--pri)}
.msg .qa{position:absolute;right:10px;bottom:9px;display:none;gap:4px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:0 4px 12px -4px rgba(16,24,40,.18)}
.msg:hover .qa{display:flex}
.msg .qa button{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--mut)}
.msg .qa button svg{width:16px;height:16px}
.msg .qa button:hover{background:var(--hov);color:var(--tx)}
.msg .qa button.dz:hover{background:var(--err-bg);color:var(--err)}
.btn.dz:hover{background:var(--err-bg);color:var(--err);border-color:#fed7c3}
.btn.warn:hover{background:var(--warn-bg);color:var(--warn);border-color:#f5e0a8}
@media (hover:none){.msg .qa{display:none!important}}
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;background:#eef1f5;color:#4b5467}
.tag.pri{background:var(--pri-bg);color:var(--pri2)}
.tag.star{background:#fff4e2;color:#b45309}
.tag svg{width:12px;height:12px}
.list-empty{padding:40px 20px;text-align:center;color:var(--mut)}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.pager .ico{font-size:20px}
.reader{min-width:0;overflow-y:auto;background:var(--bg);display:flex;flex-direction:column}
.empty{margin:auto;text-align:center;display:grid;justify-items:center;gap:6px;color:var(--mut);padding:40px}
.empty svg{width:54px;height:54px;color:#c6ccd6;margin-bottom:6px}
.empty b{color:var(--tx);font-size:15px}
.rd{margin:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);display:flex;flex-direction:column;min-height:0}
.rd-bar{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line2)}
.rd-bar .sp{flex:1}
.rd-bar .btn{height:34px;padding:0 12px;font-size:13px}
.rd-bar .btn svg{width:16px;height:16px}
.back{display:none}
.rd-h{padding:18px 22px 14px}
.rd-h h2{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.005em;margin-bottom:12px}
.who{display:flex;gap:12px;align-items:flex-start}
.who .av{width:40px;height:40px;font-size:14px}
.who-t{flex:1;min-width:0}
.who-t b{font-weight:700}
.who-t .adr{color:var(--mut);font-size:12.5px}
.who-t .do{color:var(--mut);font-size:12.5px;margin-top:2px;word-break:break-word}
.who .kiedy{font-size:12.5px;color:var(--mut);white-space:nowrap}
.wyslal{margin-top:10px}
.imgs{margin:0 22px 10px;padding:9px 12px;border-radius:9px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.imgs button{font-weight:700;color:var(--warn);text-decoration:underline}
.rd-body{padding:0 22px 8px}
.rd-body iframe{width:100%;border:0;display:block;min-height:120px}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:6px 22px 18px}
.att{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 9px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd;color:var(--tx);max-width:280px}
.att:hover{border-color:var(--pri);background:var(--pri-bg2)}
.att .fi{width:30px;height:30px;border-radius:7px;background:var(--pri-bg);color:var(--pri2);display:grid;place-items:center;font-size:9.5px;font-weight:800;text-transform:uppercase;flex:none}
.att span{min-width:0}
.att b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att small{color:var(--mut);font-size:11px}
.thr{margin:0 18px 18px}
.thr-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin:4px 4px 8px}
.thr-i{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer}
.thr-i:hover{border-color:var(--pri)}
.thr-i b{font-size:13px}
.thr-i span{flex:1;min-width:0;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-i small{color:var(--mut);font-size:11.5px;white-space:nowrap}
.load{height:3px;background:linear-gradient(90deg,transparent,var(--pri),transparent);background-size:40% 100%;background-repeat:no-repeat}

/* okno pisania */
.compose{position:fixed;inset:0;z-index:50;background:rgba(19,20,23,.28);display:flex;justify-content:flex-end;align-items:flex-end;padding:20px}
.cmp-box{width:min(760px,100%);height:min(720px,100%);background:#fff;border-radius:16px;box-shadow:0 30px 70px -20px rgba(16,24,40,.35);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.cmp-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;background:var(--ink);color:#fff}
.cmp-h b{font-size:14px}
.cmp-h .ico{color:#c9ccd3}.cmp-h .ico:hover{background:rgba(255,255,255,.1);color:#fff}
.cmp-f{padding:2px 18px}
.row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line2);min-height:42px}
.row>span{width:52px;flex:none;color:var(--mut);font-size:13px;font-weight:600}
.row input,.row select{flex:1;min-width:0;border:0;outline:none;height:40px;background:none;font-size:14px}
.row select{font-weight:600;cursor:pointer}
.lnk{font-size:12px;font-weight:700;color:var(--pri)}
.tools{display:flex;align-items:center;gap:2px;padding:6px 14px;border-bottom:1px solid var(--line2)}
.tools button{width:32px;height:30px;border-radius:7px;display:grid;place-items:center;color:#4b5467;font-size:14px}
.tools button:hover{background:var(--hov);color:var(--tx)}
.tools button svg{width:17px;height:17px}
.tools .sep{width:1px;height:18px;background:var(--line);margin:0 6px}
.cmp-scroll{flex:1;overflow-y:auto;padding:14px 18px}
.editor{min-height:180px;outline:none;font-size:14.5px;line-height:1.6}
.editor p,.editor div{margin:0}
.editor blockquote{margin:6px 0 0 4px;padding-left:12px;border-left:3px solid #d8dde6;color:#5b6475}
.editor:empty::before{content:"Napisz wiadomość…";color:var(--mut2)}
.cmp-sig{opacity:.8;pointer-events:none;user-select:none;margin-top:18px;padding-top:4px;border-top:1px dashed var(--line)}
.sig-lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);margin:6px 0 -14px}
.cmp-att{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.cmp-att:not(:empty){padding:8px 18px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:8px;background:#eef1f5;font-size:12.5px;font-weight:600;max-width:260px}
.chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip small{color:var(--mut);font-weight:500}
.chip button{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--mut)}
.chip button:hover{background:#dde2ea;color:var(--tx)}
.cmp-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.cmp-msg{flex:1;font-size:12.5px;color:var(--mut);text-align:right}
.cmp-msg.err{color:var(--err)}
.acmp{position:fixed;z-index:90;max-height:320px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -14px rgba(16,24,40,.3);padding:5px}
.acmp button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border-radius:8px;text-align:left}
.acmp button.on,.acmp button:hover{background:var(--pri-bg2)}
.acmp-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--pri2);background:var(--pri-bg)}
.acmp-t{min-width:0}
.acmp-t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acmp-t small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acmp-t em{font-style:normal;color:var(--pri2);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:500;box-shadow:0 12px 30px -10px rgba(0,0,0,.35);max-width:90vw}
.toast.err{background:#9a3412}

/* RWD */
@media (max-width:1560px){
  #rOdpw span,#rPrzek span{display:none}
  #rOdpw,#rPrzek{padding:0 10px}
}
@media (max-width:1280px){
  #rSpam span,#rUsun span,#rNieSpam span,#rPrzen span{display:none}
  #rSpam,#rUsun,#rNieSpam,#rPrzen{padding:0 10px}
  .mail-body{grid-template-columns:176px minmax(300px,360px) 1fr}
  .search{width:220px}
}
@media (max-width:1080px){
  .mail-body{grid-template-columns:minmax(300px,380px) 1fr}
  .folders{display:none}
  .mail.fold .folders{display:flex;position:absolute;z-index:20;top:0;bottom:0;left:0;width:220px;box-shadow:10px 0 30px -12px rgba(0,0,0,.2)}
  .box-t small{display:none}
  .fold-btn{display:inline-grid}
}
@media (max-width:900px){
  .side{position:fixed;z-index:70;inset:0 auto 0 0;transform:translateX(-100%);box-shadow:20px 0 40px -20px rgba(0,0,0,.3)}
  .side.open{transform:none}
  .menu-btn{display:grid;place-items:center;position:absolute;z-index:30;top:14px;left:12px;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff}
  .menu-btn svg{width:20px;height:20px}
  .main{padding:70px 16px 24px}
  .pg-mail .main{padding:0}
  .mail-top{padding:12px 12px 12px 62px;flex-wrap:wrap}
  .top-r{width:100%}
  .search{flex:1;width:auto}
  .mail-body{grid-template-columns:1fr;position:relative}
  .reader{position:absolute;inset:0;z-index:15;display:none}
  .mail.czyt .reader{display:flex}
  .rd{margin:0;border-radius:0;border:0;min-height:100%}
  .back{display:inline-grid}
  .set-grid{grid-template-columns:1fr}
  .login{grid-template-columns:1fr;gap:28px}
  .login-art h1{font-size:30px}
  .login-art ul{display:none}
  .compose{padding:0}
  .cmp-foot{flex-wrap:wrap}
  .cmp-msg{order:5;flex-basis:100%;text-align:left}
  .cmp-msg:empty{display:none}
  .cmp-box{height:100%;border-radius:0}
}