:root{
      --bg:#0b0d12; --card:#121622; --muted:#8e97ab; --text:#e9edf7;
      --line:#232a3b; --accent:#ffcc00; --accent2:#ff4d4d;
      --ok:#3ddc97; --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius:16px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:var(--sans); background:
        radial-gradient(900px 420px at 20% 0%, rgba(255,204,0,.18), transparent 55%),
        radial-gradient(700px 350px at 90% 20%, rgba(255,77,77,.12), transparent 60%),
        var(--bg);
      color:var(--text);
    }
    a{color:inherit}
    .wrap{max-width:1100px; margin:0 auto; padding:24px}
    header{
      display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
      margin: 8px 0 18px;
    }
    .brand{
      display:flex; gap:14px; align-items:center;
    }
    .logo{
      width:54px; height:54px; border-radius:14px;
      background: linear-gradient(135deg, rgba(255,204,0,.95), rgba(255,77,77,.9));
      box-shadow: var(--shadow);
      display:grid; place-items:center; font-weight:900; color:#10131a;
    }
    .hgroup h1{margin:0; font-size:28px; letter-spacing:.2px}
    .hgroup .sub{margin-top:6px; color:var(--muted); font-size:14px; line-height:1.3}
    .pillrow{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
    .pill{
      background: rgba(18,22,34,.9);
      border:1px solid var(--line);
      padding:10px 12px; border-radius:999px; color:var(--muted);
      font-size:12px; display:flex; gap:8px; align-items:center;
    }
    .pill b{color:var(--text)}
    .toolbar{
      display:flex; gap:12px; flex-wrap:wrap;
      background: rgba(18,22,34,.82);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      box-shadow: var(--shadow);
    }
    .field{
      display:flex; flex-direction:column; gap:6px;
      min-width: 220px; flex: 1;
    }
    label{font-size:12px; color:var(--muted)}
    input, select{
      background:#0f1320; color:var(--text);
      border:1px solid var(--line); border-radius:12px;
      padding:11px 12px; outline:none;
    }
    input::placeholder{color:#6f7890}
    .alert{
      margin-top:14px;
      background: rgba(255,77,77,.10);
      border:1px solid rgba(255,77,77,.35);
      padding: 12px 14px; border-radius: var(--radius);
      color: #ffd0d0;
    }
    .alert strong{color:#ffeaea}
    .grid{
      margin-top: 16px;
      display:grid; gap:12px;
    }
    details{
      background: rgba(18,22,34,.82);
      border:1px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    summary{
      list-style:none;
      padding: 14px 16px;
      display:flex; align-items:center; justify-content:space-between;
      cursor:pointer;
      gap:10px;
    }
    summary::-webkit-details-marker{display:none}
    .cat-title{
      display:flex; flex-direction:column; gap:3px;
    }
    .cat-title .name{font-weight:800}
    .cat-title .meta{font-size:12px; color:var(--muted)}
    .badge{
      font-family: var(--mono);
      font-size:12px;
      padding:7px 10px; border-radius:999px;
      background: rgba(255,204,0,.12);
      border:1px solid rgba(255,204,0,.35);
      color: #ffe07a;
      white-space:nowrap;
    }
    .tablewrap{padding: 0 16px 16px}
    table{width:100%; border-collapse:collapse}
    th, td{
      padding: 10px 10px;
      border-bottom:1px solid var(--line);
      text-align:left;
      font-size:14px;
    }
    th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.6px}
    tr:last-child td{border-bottom:none}
    .empty{
      padding: 14px 16px; color: var(--muted);
    }
    footer{
      margin: 20px 0 6px;
      color: var(--muted);
      font-size: 12px;
      display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between;
      opacity:.95;
    }
    .kfa{
      color: var(--text);
      font-weight:700;
    }
    @media (max-width:700px){
      header{flex-direction:column; align-items:stretch}
      .pillrow{justify-content:flex-start}
      .field{min-width: 100%}
      .hgroup h1{font-size:24px}
      th:nth-child(3), td:nth-child(3){display:none} /* ukryj klub na małych */
    }