:root {
  color-scheme: light dark;
  --bg: #f3f6f7;
  --card: #ffffff;
  --ink: #172d35;
  --muted: #4c616a;
  --line: #ccd8db;
  --accent: #006257;
  --soft: #e4f3ef;
  --hover: #f1f8f6;
  --active: #075c54;
  --on-active: #fff;
  --shadow: 0 3px 14px rgb(32 62 67 / 7%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111b20; --card: #19282e; --ink: #edf4f5; --muted: #b6c8cc;
    --line: #3c5158; --accent: #8ad8c4; --soft: #233f3d; --hover: #21343a;
    --active: #91dfcd; --on-active: #102e29; --shadow: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
header, main { padding-inline: max(16px, calc((100% - 1140px)/2)); }
header { display: flex; gap: 14px; align-items: center; min-height: 60px; background: var(--card); border-bottom: 1px solid var(--line); }
header strong { color: var(--accent); font-size: 1.18rem; letter-spacing: -.035em; }
header span { padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); }
#logout { margin-left: auto; }
main { padding-block: 20px 56px; }
h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -.045em; margin: 0 0 4px; line-height: 1.2; }
h2 { line-height: 1.25; }
button, select, textarea, input { font: inherit; color: inherit; }
button, select, textarea, input:not([type=checkbox]) { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
button, summary { cursor: pointer; }
button:hover:not(:disabled) { background: var(--hover); }
button:disabled { opacity: .65; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#status { margin: 7px 0 18px; color: var(--muted); }
#tools { display: flex; align-items: end; gap: 10px; }
#tools label { display: grid; gap: 4px; font-weight: 600; flex: 1; max-width: 540px; }
#tools input { width: 100%; font-weight: 400; }
details { margin: 12px 0; }
summary, a { color: var(--accent); font-weight: 600; }
#providers, .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
nav { display: grid; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
nav button { text-align: left; border: 0; padding: 10px 12px; font-weight: 550; }
nav button[aria-pressed=true], nav button[aria-pressed=true]:hover { background: var(--active); color: var(--on-active); }
#list { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
#list > p { padding: 12px 18px; color: var(--muted); }
article + article { border-top: 1px solid var(--line); }
.row { display: grid; gap: 2px; text-align: left; width: 100%; border: 0; border-radius: 0; padding: 13px 20px; background: transparent; overflow-wrap: anywhere; }
article:first-child .row { border-radius: 11px 11px 0 0; }
article:last-child .row[aria-expanded=false] { border-radius: 0 0 11px 11px; }
.row strong { font-size: 1.07rem; line-height: 1.4; font-weight: 680; }
.row > span:not(.meta) { color: var(--ink); }
.meta { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.row[aria-expanded=true] { background: var(--soft); box-shadow: inset 4px 0 var(--accent); }
.detail { padding: 18px clamp(16px, 3vw, 32px) 24px; border-top: 1px solid var(--line); }
.detail pre { font: 1.09rem/1.68 system-ui, "Segoe UI", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; margin: 0 0 20px; tab-size: 4; }
.detail > p, .detail small { color: var(--muted); overflow-wrap: anywhere; }
.detail > p:empty { display: none; }
.actions { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.actions label { display: inline-flex; align-items: center; gap: 5px; }
textarea { display: block; width: 100%; min-height: 124px; resize: vertical; margin: 16px 0 10px; line-height: 1.6; }
.detail > button { margin: 0 6px 8px 0; }
.detail small { display: block; }
#login { max-width: 420px; padding: 22px; margin: 22px 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
#login h2 { margin: 0 0 12px; }
#login input { display: block; width: 100%; margin: 6px 0 14px; }
#login button { background: var(--active); color: var(--on-active); }
@media (max-width: 760px) {
  .layout { display: block; }
  nav { display: flex; overflow-x: auto; margin-bottom: 12px; }
  nav button { flex: none; white-space: nowrap; }
  header, main { padding-inline: 16px; }
  .row { padding: 12px 14px; }
  .detail { padding: 16px; }
  .actions :is(select,button), #providers input { max-width: 100%; }
  #tools label { min-width: 0; }
}
/* Poczta: szeroki widok, niebieskie zaznaczenie i osobna karta nadawcy. */
:root { --accent:#075ca4; --active:#085da5; --soft:#e5f1fb; --hover:#f0f6fc; }
@media(prefers-color-scheme:dark){:root{--accent:#98cdff;--active:#a6d4ff;--on-active:#102c43;--soft:#203b50;--hover:#20333f}}
header,main {padding-inline:clamp(16px,2vw,36px)}
.mail-heading {display:grid;gap:2px;padding:0 0 14px;margin-bottom:12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.mail-heading strong {color:var(--accent)}
.mail-heading span {font-size:.9rem;color:var(--muted)}
.mail-heading span:empty {display:none}
.detail iframe {max-width:960px;margin-inline:auto;border-radius:6px}
.detail iframe + h3 {margin-top:18px}
.detail div > button {margin:4px 6px 8px 0}
@media(max-width:760px){header,main{padding-inline:16px}}
.mail-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.mail-row > button:last-child {margin-inline:6px;min-height:44px}

/* Compact message-list trash action */
.mail-row > button[aria-label*="do kosza"] { font-size:0; width:36px; height:36px; padding:0; align-self:center; display:inline-grid; place-items:center; }
.mail-row > button[aria-label*="do kosza"]:not(:has(svg))::before { content:"🗑"; font:18px/1 "Segoe UI Symbol", sans-serif; }

.mail-row > button[aria-label*="do kosza"]{background:transparent;border-color:transparent;color:var(--muted);border-radius:9px;}
.mail-row > button[aria-label*="do kosza"]:not(:has(svg))::before{content:"";width:19px;height:19px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%207h15M9%207V5.5Q9%204%2010.5%204h3Q15%204%2015%205.5V7M6.5%207l.8%2012q.1%201.5%201.6%201.5h6.2q1.5%200%201.6-1.5l.8-12M10.2%2010.5l.3%206M13.8%2010.5l-.3%206%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.mail-row > button[aria-label*="do kosza"]:is(:hover,:focus-visible){color:light-dark(#ae3444,#ffadb8);background:color-mix(in srgb,currentColor 10%,transparent);}