:root { --bg:#0b1020; --card:#121833; --text:#e8ecff; --muted:#a8b2d1; --accent:#8ab4ff; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:1rem}
header.container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:800;font-size:1.25rem}
nav a{margin-left:1rem;opacity:.9}
.hero h1{font-size:2rem;margin:.25rem 0}
.card{background:var(--card);border-radius:16px;padding:1rem;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.grid.slim{grid-template-columns:repeat(5,minmax(0,1fr))}
label{display:flex;flex-direction:column;font-size:.9rem}
input,select,button{padding:.6rem .7rem;border-radius:12px;border:1px solid #202a52;background:#0d1430;color:var(--text)}
button{cursor:pointer;font-weight:600}
.hint{opacity:.8;margin-top:.5rem}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tags a{display:inline-block;background:#0d1430;border:1px solid #202a52;padding:.35rem .6rem;border-radius:999px}
.list{columns:2}
.footer{opacity:.7;font-size:.9rem;margin-top:2rem}
.muted{color:var(--muted)}
.result{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.result .big{font-size:2.2rem;font-weight:800}
hr{border:0;border-top:1px solid #223060;margin:1rem 0}
@media (max-width:720px){ .grid,.grid.slim{grid-template-columns:1fr 1fr} }
.suggestions{
  position:absolute; right:0; top:2.6rem; width:320px; max-height:280px; overflow:auto;
  background:#0d1430; border:1px solid #202a52; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  z-index:1000;
}
.suggestions a{
  display:block; padding:.5rem .75rem; text-decoration:none; color:var(--text);
}
.suggestions a:hover, .suggestions a.active{ background:#121a3b; }
.error{ color:#ff8080; display:block; }
input.invalid{ border-color:#a04444; box-shadow:0 0 0 3px rgba(160,68,68,.2); }

section h2{ margin-top:.25rem }
.list li{ break-inside: avoid; padding: .1rem 0; }

/*-------------------------------*/
/* Header layout */
/* Header layout */
.site-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; position:relative; }
.nav-toggle { display:inline-flex; align-items:center; justify-content:center; background:#0d1430; border:1px solid #202a52; color:var(--text); border-radius:12px; padding:.45rem .6rem; }
.nav { 
  position:absolute; top:100%; right:0; margin-top:.5rem;
  background:#0d1430; border:1px solid #202a52; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:.5rem .75rem;
  display:none; flex-direction:column; gap:.25rem; min-width:240px;
  z-index:1000;
}
.nav a { padding:.4rem .25rem; display:block; opacity:.95; }
.nav.open { display:flex; }

.search { margin-left:auto; display:flex; gap:.5rem; position:relative; }
#search-box { flex:1; min-width:0; }

/* Formularze / siatki */
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.grid.slim { grid-template-columns:repeat(5,minmax(0,1fr)); }
label { display:flex; flex-direction:column; font-size:.9rem; min-width:0; }
input, select, button { width:100%; }

/* Wynik */
.result { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1rem; }
.result .big { font-size:2.2rem; font-weight:800; }

/* Sugestie */
.suggestions { width:420px; right:0; }

/* TABLET: formularze wygodniejsze */
@media (max-width: 1024px){
  .grid, .grid.slim { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .suggestions { width:100%; left:0; right:0; }
}

/* MOBILE: formularze w jednej kolumnie */
@media (max-width: 880px){
  .site-header { grid-template-columns:auto auto 1fr; }
  .search { grid-column: 1 / -1; order: 3; margin-left:0; width:100%; }

  .nav { 
    left:0; right:0; top:60px; margin-top:0; border-radius:12px;
  }

  .grid, .grid.slim { grid-template-columns:1fr; }
  .result { flex-direction:column; align-items:flex-start; }
}

/* Drobne */
header.container{ gap:.75rem }
section h2{ margin-top:.25rem }
.list li{ break-inside: avoid; padding:.1rem 0; }

/* 1) Nie rób wszystkich buttonów na 100% szer. */
input, select { width: 100%; }
button { width: auto; }

/* Burger – kompaktowy */
.nav-toggle{
  padding: .4rem .5rem;   /* mniejsze */
  min-width: 0;           /* nie wymuszaj szer. */
  line-height: 1;         /* ciaśniej */
}

/* 2) Dropdown menu – niech dopasuje się do treści, a nie na całą szer. */
.nav{
  width: max-content;     /* szerokość wg zawartości */
  max-width: 90vw;        /* ale z limitem na małych ekranach */
  min-width: 220px;       /* delikatne minimum (zmień wg potrzeb) */
  right: 0; left: auto;   /* trzymaj przy prawej krawędzi */
}

/* Search ma rosnąć */
.site-header { grid-template-columns: auto auto 1fr; } /* brand | burger | search */
.search { margin-left: 0; }
#search-box { flex: 1; min-width: 0; }

/* Na tablet/desktop formularze w gridach mogą mieć auto-szer. przycisków */
@media (min-width: 881px){
  .grid button, .grid.slim button { width: auto; }
}

/* Na mobile przyciski nadal pełna szerokość (dla wygody) */
@media (max-width: 880px){
  .grid button, .grid.slim button { width: 100%; }
}

/* Pionowy układ sekcji „About …” i „Related …” na wszystkich szerokościach */
.stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

/* W tych sekcjach listy mają być jednokolumnowe,
   bo globalnie .list ma columns:2 */
.stack .list{
  columns: 1;
}

/* Lekki odstęp między kartami wewnątrz .stack */
.stack > *{
  background: transparent; /* zostawiamy tło sekcji jak jest */
}

.brand {
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.25rem; color:var(--text);
  text-decoration:none;
}
.brand .logo {
  display:block;
}
.brand-text {
  letter-spacing:.2px;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-link { color: var(--text); font-weight: 700; text-decoration: none; }
.brand-link:hover { text-decoration: underline; }