* { box-sizing: border-box; }
body { margin:0; background:#f5f7f3; color:#203b2d; font:15px/1.6 Arial, sans-serif; }
header { display:flex; align-items:center; gap:25px; padding:20px max(5vw,20px); background:white; border-bottom:1px solid #dde5da; }
header img { display:block; max-height:62px; object-fit:contain; }
header span { color:#7c8877; font-size:13px; }
#logout { margin-left:auto; }
main { width:min(1180px,90%); margin:45px auto 80px; }
h1 { font-size:clamp(28px,4vw,40px); line-height:1.2; letter-spacing:-1px; margin:8px 0 15px; }
h2 { font-size:21px; margin-top:0; }
.eyebrow { letter-spacing:2px; font-size:10px; color:#75856b; }
.intro,.muted { color:#778371; }
#notice { padding:12px 16px; border-left:3px solid #aabb9c; background:#eaf0e5; }
#login,#detail { padding:28px; background:white; border:1px solid #dde5d7; border-radius:10px; }
#login { max-width:440px; margin-top:30px; }
label { display:block; font-size:13px; color:#64765b; }
input,select { display:block; padding:12px; margin:6px 0 18px; width:100%; font:inherit; color:#203b2d; border:1px solid #cfdcc6; border-radius:6px; background:#fff; }
button { font:inherit; font-size:13px; padding:11px 16px; border:1px solid #ccdac2; border-radius:6px; color:#285b47; background:white; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #88a780; outline-offset:3px; }
.primary { background:#285b47; color:white; border-color:#285b47; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:25px; }
.toolbar label { max-width:300px; width:100%; }
.toolbar select { margin-bottom:0; }
.layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(0,1.5fr); gap:24px; align-items:start; }
#records { display:grid; gap:10px; }
.record { text-align:left; padding:18px; display:grid; gap:6px; }
.record[aria-pressed=true] { border-color:#285b47; background:#edf3e8; }
.record strong { font-size:14px; }
.record small { color:#72846a; }
#detail { overflow-wrap:anywhere; }
#detail p { white-space:pre-wrap; }
#detail ul { padding-left:20px; }
#detail li { padding-bottom:12px; }
#detail select { max-width:300px; }
[hidden] { display:none !important; }
@media(max-width:700px) { .layout{grid-template-columns:1fr} header{gap:12px} header span{display:none} #detail{padding:20px} .toolbar{align-items:end} }
/* Oryginalny znak ma duże marginesy wewnątrz obrazu. */
header img { width:180px; height:68px; max-height:none; object-fit:cover; object-position:center; }