:root { --bg:#0f1115; --card:#151922; --fg:#e7eaf0; --muted:#a7b0c0; }
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#0b0e13,#111827 60%,#0b0e13);
color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif;}
.wrap{max-width:980px;margin:0 auto;padding:32px 20px}
.hero{padding:42px 28px;background:radial-gradient(1200px 500px at -10% -10%,#142034,transparent),var(--card);
border:1px solid #20293a;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{font-size:clamp(26px,4vw,40px);margin:0 0 6px}
.tagline{color:var(--muted);font-size:clamp(14px,2.5vw,18px)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{background:#101522;border:1px solid #22314a;color:#bcd3f2;padding:6px 10px;border-radius:999px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.card{background:var(--card);border:1px solid #20293a;border-radius:16px;padding:18px}
h3{margin:0 0 8px;font-size:18px}
.muted{color:var(--muted)}
.footer{margin-top:26px;color:#9fb0c9;font-size:14px;display:flex;gap:14px;flex-wrap:wrap}
a.btn, button.btn{display:inline-block;margin-top:14px;padding:10px 14px;border-radius:12px;border:1px solid #23405f;
text-decoration:none;color:#d8ecff;background:#13263a;cursor:pointer}
.status{display:inline-flex;align-items:center;gap:8px;color:#ffddb0;background:#2a2216;border:1px solid #3b2f17;
padding:8px 12px;border-radius:12px;font-size:14px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a3548;background:#0f121a;color:#e7eaf0}
label{display:block;margin:10px 0 4px;color:#bcd3f2}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #20293a;padding:8px 6px;text-align:left}
.actions a{margin-right:8px}
.services li{margin-bottom:10px}

/* === NAV (templating) === */
.nav{margin:12px 0 18px}
.nav-list{display:flex;gap:14px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-item{}
.nav-link{
  display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;
  background:#101522;border:1px solid #22314a;color:#bcd3f2;
}
.nav-link:hover{filter:brightness(1.08)}
/* aktywny odnośnik po kotwicy # */
.nav-link[aria-current="page"], .nav-link.active{
  background:#13263a;border-color:#23405f;color:#d8ecff;
}

/* kompakt w układzie "compact" */
.layout-compact .nav{margin-bottom:10px}
.layout-compact .nav-link{padding:6px 10px;border-radius:8px}

/* === NAV (templating) === */
.nav{margin:12px 0 18px}
.nav-list{display:flex;gap:14px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-item{list-style:none}
.nav a,.nav a:visited{color:#bcd3f2;text-decoration:none}
.nav-link{
  display:inline-block;padding:8px 12px;border-radius:10px;
  background:#101522;border:1px solid #22314a;
}
.nav-link:hover{filter:brightness(1.08)}
.nav-link.active{background:#13263a;border-color:#23405f;color:#d8ecff}

/* kompakt */
.layout-compact .nav{margin-bottom:10px}
.layout-compact .nav-link{padding:6px 10px;border-radius:8px}

/* NAV – mocniejsza specyficzność i wygląd pigułek */
.wrap .nav{margin:12px 0 18px}
.wrap .nav .nav-list{display:flex;gap:14px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.wrap .nav .nav-item{list-style:none}
.wrap .nav a,
.wrap .nav a:visited{color:#bcd3f2;text-decoration:none}
.wrap .nav .nav-link{
  display:inline-block;padding:8px 12px;border-radius:10px;
  background:#101522;border:1px solid #22314a;
}
.wrap .nav .nav-link:hover{filter:brightness(1.08)}
.wrap .nav .nav-link.active{background:#13263a;border-color:#23405f;color:#d8ecff}

/* układ compact */
.layout-compact .nav{margin-bottom:10px}
.layout-compact .nav .nav-link{padding:6px 10px;border-radius:8px}