*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:13.5px/1.45 Inter,-apple-system,"Segoe UI",sans-serif;background:#f7f8fa;color:#1d2330}
a{color:inherit}
.top{height:52px;background:#fff;border-bottom:1px solid #e3e5ea;display:flex;align-items:center;padding:0 24px;gap:14px}
.logo{font-weight:700}
.nav{display:flex;gap:4px;margin-left:10px}
.nav a{font-size:13px;padding:5px 11px;border-radius:6px;color:#555;text-decoration:none}
.nav a.on{background:#eef0ff;color:#4b3fd1;font-weight:600}
.sp{flex:1}
.wrap{max-width:1200px;margin:0 auto;padding:22px 24px}
.msg{color:#888}.msg.err{color:#c03030}
.foot{max-width:1200px;margin:0 auto;padding:0 24px 24px;font-size:11.5px;color:#888}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tile{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:16px 18px 14px;min-height:150px;display:flex;flex-direction:column;cursor:pointer;text-align:left;font:inherit;color:inherit}
.tile:hover,.tile:focus-visible{border-color:#c9ccd4;box-shadow:0 4px 14px rgba(20,30,50,.07);outline:none}
.tile:focus-visible{outline:2px solid #4b3fd1;outline-offset:2px}
.tn{font-size:15px;font-weight:600;line-height:1.3}
.tk{font:11px ui-monospace,monospace;color:#a3a8b2;margin-top:2px;min-height:14px}
.chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:14px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.s-czeka{background:#fff1d9;color:#a8600c}.s-blok{background:#fde8e8;color:#c03030}.s-toku{background:#e4efff;color:#2563c9}
.s-start{background:#e9eef5;color:#4b6584}.s-brak,.s-pomysl{background:#f1f2f4;color:#8a909a}
.why{font-size:12.5px;color:#7a808a;margin-top:8px;line-height:1.35}
.sec{font-size:11px;color:#c03030;margin-top:6px}
.pb{margin-top:auto;padding-top:14px}
.pb div{height:4px;background:#eef0f3;border-radius:2px;overflow:hidden}
.pb span{display:block;height:100%;background:#3fb26b}
.hint{font-size:12px;color:#a3a8b2;margin:14px 2px 0}
.ov{position:fixed;inset:0;background:rgba(20,25,35,.28);display:none;z-index:10}
.ov.on{display:block}
.panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;background:#fff;z-index:11;visibility:hidden;transform:translateX(100%);transition:transform .2s;display:flex;flex-direction:column}
.panel.on{transform:none;visibility:visible;box-shadow:-8px 0 30px rgba(20,30,50,.12)}
.ph{display:flex;align-items:flex-start;gap:10px;padding:20px 24px 12px;border-bottom:1px solid #eef0f3}
.ph h2{margin:0;font-size:18px}
.ph .chip{margin-top:8px;font-size:12.5px;padding:4px 10px}
.x{margin-left:auto;border:0;background:#f1f2f4;border-radius:8px;width:34px;height:34px;font-size:18px;cursor:pointer;color:#555;flex:none}
.pbody{overflow:auto;padding:8px 24px 28px}
.ps{margin-top:18px}
.pl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9aa0aa;font-weight:600;margin-bottom:8px}
.pi{padding:7px 0;border-top:1px solid #f2f3f5;line-height:1.45}
.pi:first-of-type{border-top:0}
.pid{font:11px ui-monospace,monospace;color:#a3a8b2;margin-right:6px}
.psrc{display:block;font:10.5px ui-monospace,monospace;color:#9aa0aa;margin-top:2px;word-break:break-all}
.q{color:#444}
.tagb{font-size:10.5px;border-radius:4px;padding:0 6px;margin-right:6px;font-weight:600}
.tb{background:#fde8e8;color:#c03030}.ty{background:#fff1d9;color:#a8600c}.tt{background:#f0f1f4;color:#666}
.dash{color:#c3c6cc}
@media (max-width:700px){
  .wrap{padding:14px}.grid{grid-template-columns:1fr;gap:10px}
  .tile{min-height:128px;padding:13px 14px 12px}.chip{font-size:13px;padding:5px 10px}
  .top{padding:0 12px;gap:8px}.logo{font-size:0}.logo::before{content:"◧ Projekty";font-size:13.5px}
  .nav{margin-left:0}.nav a{padding:5px 8px;font-size:12.5px}
  .panel{width:100%}.foot{padding:0 14px 18px}
}

/* Mapa projektów (#mapa) */
#mapa { overflow-x: auto; }
.map-in { position: relative; min-width: 900px; }
.map-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
#mapa .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: #666; margin-bottom: 8px; }
#mapa .legend b { color: #333; }
#mapa .l-tekst { color: #e08a1e; }
#mapa .l-blk { color: #d23c3c; }
#mapa .lane { display: flex; background: #fff; border: 1px solid #e3e5ea; border-radius: 10px; margin-bottom: 8px; }
#mapa .lh { width: 170px; flex-shrink: 0; padding: 9px 12px; border-right: 1px solid #eef0f3; }
#mapa .ln { font-weight: 600; margin-top: 3px; line-height: 1.25; }
#mapa .ls { font-size: 11px; color: #888; }
#mapa .lp { height: 5px; background: #eceef2; border-radius: 3px; margin: 5px 0 2px; overflow: hidden; }
#mapa .lp div { height: 100%; background: #3fb26b; }
#mapa .lb { flex: 1; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
#mapa .ep { border: 1px solid #e3e5ea; border-left: 3px solid #9aa0aa; border-radius: 7px; padding: 5px 8px; width: 260px; background: #fbfbfc; }
#mapa .ep.wide { border-left-color: #4b3fd1; }
#mapa .ep.loose { width: 100%; border-left-color: #e0c08a; background: #fffdf8; }
#mapa .eh { display: flex; gap: 6px; align-items: center; }
#mapa .et { font-size: 12px; margin: 2px 0; line-height: 1.3; }
#mapa .en { font-size: 11px; color: #777; }
#mapa .miss { color: #b7791f; font-style: italic; font-size: 12px; }
#mapa .muted { color: #888; font-size: 11px; }
#mapa .empty { font-size: 12px; color: #aaa; padding: 4px; }
#mapa .id { font: 600 11.5px ui-monospace, SFMono-Regular, monospace; color: #4b3fd1; white-space: nowrap; }
#mapa .kod { font: 600 11px ui-monospace, monospace; background: #eef0ff; color: #4b3fd1; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
#mapa .st { font-size: 11px; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
#mapa .bl { background: #eceef2; color: #555; }
#mapa .td { background: #e6f0fb; color: #2c64a8; }
#mapa .ip { background: #ece8ff; color: #5b44d6; }
#mapa .dn { background: #e3f4e8; color: #23824a; }
#mapa .cx { background: #f6e6e6; color: #a33; }
#mapa .ebar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 4px 0; }
#mapa .sg.bl { background: #d6d9e0; } #mapa .sg.td { background: #9cc0ea; }
#mapa .sg.ip { background: #7c5cff; } #mapa .sg.dn { background: #3fb26b; } #mapa .sg.cx { background: #e3b0b0; }
#mapa .ep > .tc { margin-top: 4px; }
#mapa .dcs { display: flex; gap: 60px; margin-top: 4px; }
#mapa .dc { display: flex; flex-direction: column; gap: 4px; width: 250px; }
#mapa .dl { font-size: 10.5px; color: #999; text-transform: uppercase; letter-spacing: .04em; }
#mapa .tc { border: 1px solid #dfe2e8; border-radius: 6px; padding: 2px 7px; font-size: 11.5px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
#mapa .tc.ip { border-color: #c9bdff; } #mapa .tc.dn { border-color: #b5e0c3; }
#mapa .tc.blk { box-shadow: inset 3px 0 0 #d23c3c; }
#mapa .ct { color: #333; }
