:root{
    --ink: #1B1D21;
    --ink-soft: #5A5E66;
    --ink-faint: #8B8F96;
    --paper: #F1F2EC;
    --card: #FFFFFF;
    --border: #E1E2D9;
    --border-soft: #ECEDE6;
    --high: #B23B2E;
    --high-bg: #FBEDEB;
    --med: #A2701E;
    --med-bg: #FBF1E1;
    --low: #3C7A5C;
    --low-bg: #E9F3EE;
    --tech: #435A82;
    --tech-bg: #EBEFF6;
    --info: #6B6F76;
    --info-bg: #EDEEEA;
    --done: #2F7D5C;
    --new: #7A3E9D;
    --new-bg: #F2EAF8;
    --shadow: 0 1px 2px rgba(27,29,33,0.04), 0 4px 14px rgba(27,29,33,0.05);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; }
  code, .mono{ font-family: 'JetBrains Mono', monospace; }

  .shell{ max-width: 1600px; margin: 0 auto; padding: 0 24px 80px; }

  header.top{
    padding: 44px 0 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
  }

  .eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }

  h1{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }
  h1 em{ font-style: italic; font-weight: 500; color: var(--high); }

  .meta-row{
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    font-size: 13.5px; color: var(--ink-soft); margin-bottom: 26px;
  }
  .meta-row span{ display:inline-flex; align-items:center; gap:6px; }
  .meta-row .dot{ width:5px; height:5px; border-radius:50%; background: var(--ink-faint); display:inline-block; }

  /* ---------- Control bar ---------- */
  .progress-wrap{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .progress-track{
    flex: 1 1 200px; height: 10px; background: var(--border-soft);
    border-radius: 999px; overflow: hidden; min-width: 140px;
  }
  .progress-fill{
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--done), #4F9A78);
    border-radius: 999px; transition: width .4s ease;
  }

  #progress-count{
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; white-space: nowrap;
  }

  #save-status{
    font-size: 12px; color: var(--done); min-width: 84px;
    font-family: 'JetBrains Mono', monospace;
  }

  .btn{
    border: 1px solid var(--border);
    background: none;
    color: var(--ink-soft);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
  }
  .btn:hover{ background: var(--tech-bg); border-color: var(--tech); color: var(--tech); }

  .toggle{
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px;
    user-select: none;
  }
  .toggle:hover{ background: var(--border-soft); }
  .toggle input{ margin: 0; cursor: pointer; }

  /* ---------- Connection-mode bar ---------- */
  .modebar{
    display: none;
    margin-top: 12px;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    line-height: 1.5;
    align-items: center;
    gap: 10px;
  }
  .modebar.show{ display: flex; }
  .modebar.shared{ background: var(--low-bg); border: 1px solid #CBE3D8; color: #245C45; }
  .modebar.local{ background: var(--med-bg); border: 1px solid #EBD6AB; color: #7A5313; }
  .modebar.error{ background: var(--high-bg); border: 1px solid #EFC9C3; color: #8C2F24; }
  .modebar strong{ font-weight: 600; }

  /* ---------- New-tasks banner ---------- */
  .newbar{
    display: none;
    margin-top: 12px;
    background: var(--new-bg);
    border: 1px solid #DDCBEC;
    color: #5C2E78;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .newbar.show{ display: flex; }
  .newbar strong{ font-weight: 600; }
  .newbar .btn{ border-color:#C9B0DE; color:#5C2E78; margin-left:auto; }
  .newbar .btn:hover{ background:#fff; border-color:var(--new); color:var(--new); }

  /* ---------- Layout ---------- */
  .layout{ display: grid; grid-template-columns: 252px 1fr; gap: 40px; align-items: start; }

  nav.toc{
    position: sticky; top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    display: flex; flex-direction: column; gap: 3px;
  }

  .nav-item{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    border-radius: 8px 3px 3px 8px;
    border-left: 4px solid transparent;
    cursor: pointer; text-decoration: none;
    font-size: 13.5px; color: var(--ink-soft);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .nav-item .nav-label{ display:flex; align-items:center; gap:9px; }
  .nav-item .nav-num{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint); width:16px; }
  .nav-badge{
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint);
    background:var(--border-soft); padding:1px 6px; border-radius:999px;
  }
  .nav-item:hover{ background: var(--card); }
  .nav-item.active{ background:var(--card); border-left-color:var(--ink); color:var(--ink); font-weight:600; box-shadow:var(--shadow); }
  .nav-item.complete .nav-badge{ background: var(--low-bg); color: var(--done); }

  .tag-high .nav-num{ color: var(--high); }
  .tag-med .nav-num{ color: var(--med); }
  .tag-low .nav-num{ color: var(--low); }
  .tag-tech .nav-num{ color: var(--tech); }
  .tag-info .nav-num{ color: var(--info); }

  .legend{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:7px; font-size:11.5px; color:var(--ink-faint);
  }
  .legend-row{ display:flex; align-items:center; gap:8px; }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
  .legend-title{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink); font-weight:500; margin-top:10px;
  }
  .legend-title:first-child{ margin-top:0; }
  .legend-hint{ text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400; }
  /* pigułki w legendzie bez lewego marginesu (nie następują po tekście) */
  .legend-row .pill{ margin-left:0; }

  /* ---------- Sections ---------- */
  main{ min-width: 0; }
  .section{ margin-bottom: 52px; scroll-margin-top: 24px; }
  .section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
  .section-num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-faint); }
  h2.section-title{ font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin:0; letter-spacing:-0.01em; }

  .section-desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; max-width:760px; margin:10px 0 22px; }
  .section-desc code{ background:var(--border-soft); padding:1px 6px; border-radius:4px; font-size:13px; }

  .callout{
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--high);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 22px;
    max-width: 860px;
    box-shadow: var(--shadow);
  }
  .callout.ok{ border-left-color: var(--done); }
  .callout strong{ color: var(--ink); }

  .url-group{ margin-bottom: 22px; }
  .url-group:last-child{ margin-bottom: 0; }

  .url-label{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink-soft);
    background:var(--card); border:1px solid var(--border);
    display:inline-block; padding:5px 10px;
    border-radius:6px 6px 0 0; border-bottom:none; margin-left:2px;
  }
  .url-open{
    text-decoration:none; margin-left:7px; color:var(--tech);
    opacity:.55; font-size:1.05em; line-height:1; transition:opacity .12s;
  }
  .url-open:hover{ opacity:1; }
  .url-open:focus-visible{ outline:2px solid var(--tech); outline-offset:2px; border-radius:3px; }

  .task-stack{
    border:1px solid var(--border); border-radius:10px; overflow:hidden;
    background:var(--card); box-shadow:var(--shadow);
  }
  .url-group .task-stack{ border-top-left-radius: 0; }

  .task{ display:block; }
  .task + .task{ border-top: 1px solid var(--border-soft); }

  /* Zadanie krytyczne — priorytet, nie typ. Czerwona krawędź całej karty. */
  .task.critical .task-inner{ border-left: 4px solid var(--high); }
  .task.critical.done .task-inner{ border-left-color: var(--ink-faint); }

  .task-inner{ display:flex; align-items:flex-start; gap:14px; padding:15px 18px; transition:background .15s ease; }
  .task:hover .task-inner{ background:#FAFAF7; }

  .task-check{
    appearance:none; -webkit-appearance:none;
    width:19px; height:19px; min-width:19px;
    border-radius:5px; border:1.5px solid var(--ink-faint);
    margin-top:2px; cursor:pointer; position:relative; transition:all .15s ease;
  }
  .task-check:checked{ background:var(--done); border-color:var(--done); }
  .task-check:checked::after{
    content:""; position:absolute; left:5px; top:1px;
    width:5px; height:10px; border:solid white; border-width:0 2px 2px 0;
    transform:rotate(40deg);
  }

  .task-num{
    font-size:12px; font-weight:700; color:var(--ink-faint);
    min-width:30px; margin-top:2px; user-select:all;
  }

  .task-body{ flex:1; min-width:0; }
  .task-title{ font-size:14.5px; font-weight:600; line-height:1.45; margin-bottom:4px; transition:color .15s ease; }
  .task-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
  .task-desc code{ font-size:12px; background:var(--border-soft); padding:1px 5px; border-radius:4px; word-break:break-word; }
  .q{
    display: block;
    padding: 7px 11px;
    margin: 8px 0;
    background: var(--paper);
    border-radius: 6px;
    border-left: 3px solid var(--border);
    font-size: 13px;
  }
  .q.bad{ border-left-color: var(--high); }
  .q.good{ border-left-color: var(--done); }
  .task-desc .q{ margin: 6px 0; }
  .task-desc .len{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint); }

  .task.done .task-title{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--ink-faint); }
  .task.done .task-desc{ color:var(--ink-faint); }
  .task.done .task-inner{ background:#FAFBF8; }
  .task.done .task-desc .q{ opacity:.6; }

  .task-when{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--done);
    margin-top:6px; display:none;
  }
  .task.done .task-when{ display:block; }

  .pill{
    display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
    letter-spacing:.02em; padding:2px 7px; border-radius:999px;
    margin-left:8px; vertical-align:middle; transform:translateY(-1px); white-space:nowrap;
  }
  /* Pigułki TYPU — rodzaj zmiany. Blade tło, kolor wg rodziny. */
  .pill-link{ background:var(--tech-bg); color:var(--tech); }
  .pill-content{ background:var(--med-bg); color:var(--med); }
  .pill-fix{ background:var(--high-bg); color:var(--high); }
  .pill-new{ background:var(--new-bg); color:var(--new); }

  /* Znacznik PRIORYTETU — nie typ. Wypełniony, żeby odróżniał się od pigułek typu. */
  .pill-critical{ background:var(--high); color:#fff; font-weight:500; }

  /* hide done tasks when filtering */
  body.filter-open .task.done{ display:none; }
  body.filter-open .task-stack:not(:has(.task:not(.done))){ display:none; }
  body.filter-open .url-group:not(:has(.task:not(.done))){ display:none; }


  /* ---------- Znacznik priorytetu zadania ---------- */
  /* Skala natężenia (nie hue), żeby nie mylić się z pigułkami TYPU:
     krytyczny = czerwony wypełniony · wysoki = ciemny · średni = szary · niski = kontur */
  .pri-tag{
    display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9.5px;
    letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:999px;
    margin-left:6px; vertical-align:middle; transform:translateY(-1px); white-space:nowrap;
  }
  .pri-tag--wys{ background:var(--ink-soft); color:#fff; }
  .pri-tag--sred{ background:var(--border); color:var(--ink-soft); }
  .pri-tag--nis{ background:transparent; border:1px solid var(--border); color:var(--ink-faint); padding:0 5px; }

  /* ---------- Tabela zmian „przed → po” (dwie kolumny) ---------- */
  .change-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:10px 0; }
  .change-table th{
    text-align:left; padding:7px 12px; font-family:'JetBrains Mono',monospace;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-soft); font-weight:500; border-bottom:1px solid var(--border);
  }
  .change-table td{ padding:9px 12px; vertical-align:top; line-height:1.5; border-bottom:1px solid var(--border-soft); }
  .change-table tr:last-child td{ border-bottom:none; }
  .change-table td.from{ color:var(--ink-soft); }
  .change-table td.arrow{ color:var(--ink-faint); text-align:center; width:22px; padding:9px 2px; }
  .change-table td.to{ color:var(--ink); font-weight:500; }
  .change-table td.del{ color:var(--high); }

  /* ---------- Filtr priorytetu (klik w legendzie) ---------- */
  .pri-filter, .pri-reset{
    cursor: pointer; border-radius: 5px; padding: 2px 5px; margin: 0 -5px;
    transition: background .12s ease, color .12s ease;
  }
  .pri-filter:hover, .pri-reset:hover{ background: var(--border-soft); color: var(--ink); }
  .pri-filter.active{ background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
  .pri-reset{ display: none; color: var(--ink-soft); }
  body.pri-filtering .pri-reset{ display: flex; }
  .legend-swatch--all{ background: transparent; border: 1px solid var(--ink-faint); }
  .legend-swatch--kryt{ background: var(--high); }
  .legend-swatch--wys{ background: var(--ink-soft); }
  .legend-swatch--sred{ background: var(--border); }
  .legend-swatch--nis{ background: transparent; border: 1px solid var(--border); }

  .task.hidden-pri, .task-stack.hidden-pri, .url-group.hidden-pri,
  .section.hidden-pri, .nav-item.hidden-pri{ display: none; }

  /* Ujednolicony filtr (priorytet + wykonanie + lista) — jedna klasa dla wszystkich. */
  .task.filtered-out, .task-stack.filtered-out, .url-group.filtered-out,
  .section.filtered-out, .nav-item.filtered-out{ display: none; }

  /* ---------- Ikona „dodaj do listy” (zadania niemożliwe do wykonania samodzielnie) ---------- */
  /* Zakładka przy każdym zadaniu: domyślnie kontur, po kliknięciu wypełniona. */
  .bookmark{
    flex:0 0 auto; margin-top:1px; width:26px; height:26px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; border-radius:6px;
    color:var(--ink-faint); transition:color .15s ease, background .15s ease;
  }
  .bookmark:hover{ background:var(--new-bg); color:var(--new); }
  .bookmark svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; pointer-events:none; }
  .task.is-listed .bookmark{ color:var(--new); }
  .task.is-listed .bookmark svg{ fill:currentColor; }

  /* Filtr „tylko z mojej listy” — analogicznie do „tylko niewykonane”. */
  body.list-filtering .task:not(.is-listed){ display:none; }
  body.list-filtering .task-stack:not(:has(.task.is-listed)){ display:none; }

  /* ---------- Notatka przy zadaniu — wspólna ---------- */
  .task-note{ position:relative; margin-top:12px; }
  .task-note-text{
    display:block; width:100%; min-height:64px; resize:vertical;
    font:inherit; font-size:13.5px; line-height:1.6; color:var(--ink);
    background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:10px 70px 10px 12px; box-sizing:border-box; transition:border-color .15s ease;
  }
  .task-note-text:focus{ outline:none; border-color:var(--ink-faint); }
  .task-note-text::placeholder{ color:var(--ink-faint); }
  .task-note-save{
    position:absolute; top:7px; right:8px; font-size:11px; font-weight:600;
    background:none; border:none; cursor:pointer; color:var(--ink-faint);
    padding:2px 4px; transition:color .15s ease;
  }
  .task-note-save:hover{ color:var(--med); }
  .task-note-save.is-dirty{ color:var(--high); }
  .task-note-meta{ font-size:11px; color:var(--ink-faint); margin-top:3px; min-height:14px; }
  body.list-filtering .url-group:not(:has(.task.is-listed)){ display:none; }

  /* Filtr „tylko wykonane” — odwrotność „tylko niewykonane”. */
  body.done-filtering .task:not(.done){ display:none; }
  body.done-filtering .task-stack:not(:has(.task.done)){ display:none; }
  body.done-filtering .url-group:not(:has(.task.done)){ display:none; }

  /* Przełączniki filtrów w legendzie (checkbox + etykieta). */
  .legend .filter-toggle{ cursor:pointer; user-select:none; }
  .legend .filter-toggle input{ margin:0; cursor:pointer; }
  .legend-swatch--list{ background:var(--new); }
  .legend-swatch--done{ background:var(--done); }

  /* Licznik pasujących zadań przy każdej opcji filtra. */
  .legend-count{
    margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px;
    color:var(--ink-faint); background:var(--border-soft);
    padding:0 6px; border-radius:999px; min-width:18px; text-align:center;
  }
  .pri-filter.active .legend-count{ background:var(--card); color:var(--ink); }

  /* ---------- Diagnostic table ---------- */
  .table-wrap{
    overflow-x:auto; background:var(--card); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow);
  }
  table.diag{ border-collapse:collapse; width:100%; font-size:12.5px; min-width:900px; }
  table.diag th{
    text-align:left; padding:11px 12px; background:var(--border-soft);
    font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-soft); font-weight:500; white-space:nowrap;
    border-bottom:1px solid var(--border);
  }
  table.diag td{ padding:10px 12px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
  table.diag tr:last-child td{ border-bottom:none; }
  table.diag tr:hover td{ background:#FAFAF7; }
  table.diag td.u{ font-family:'JetBrains Mono',monospace; font-size:11.5px; white-space:nowrap; }

  /* Kolumna "Link" w tabelach inwentarza i wniosków (sekcje 16-18) — link
     skrócony wielokropkiem, żeby długi adres URL nie rozpychał tabeli i nie
     wypychał sąsiednich kolumn poza widok. Pełny adres widoczny w tooltipie
     (title) i po kliknięciu — otwiera się i tak docelowy URL. */
  table.diag.diag-link-narrow td.u a.u-link{
    display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Proporcje kolumn — tabela inwentarza (sekcje 16-17): tytuł/link */
  table.diag-inventory{ min-width: 560px; table-layout: fixed; }
  table.diag-inventory col.col-title{ width: 70%; }
  table.diag-inventory col.col-link{ width: 30%; }

  /* Proporcje kolumn — tabela wniosków (sekcja 18): link o połowę węższy
     niż pierwotnie, żeby kolumna "Decyzja" była widoczna bez przewijania */
  table.diag-decisions{ min-width: 760px; table-layout: fixed; }
  table.diag-decisions col.col-tematyka{ width: 16%; }
  table.diag-decisions col.col-tytul{ width: 40%; }
  table.diag-decisions col.col-link{ width: 15%; }
  table.diag-decisions col.col-decyzja{ width: 29%; }
  table.diag tr.pillar td{ background:var(--low-bg); }
  table.diag tr.pillar:hover td{ background:#DFEEE7; }
  .ok{ color:var(--done); font-weight:600; }
  .warn{ color:var(--med); font-weight:600; }
  .bad{ color:var(--high); font-weight:600; }
  .num{ font-family:'JetBrains Mono',monospace; }

  .snippet{
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:18px 20px; box-shadow:var(--shadow); margin-bottom:14px;
  }
  .snippet-label{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-faint); margin-bottom:8px; font-family:'JetBrains Mono',monospace;
  }
  .snippet-text{
    font-size:13.5px; line-height:1.6; background:var(--paper); border-radius:7px;
    padding:12px 14px; margin-bottom:10px; font-family:'JetBrains Mono',monospace;
    color:var(--ink); word-break:break-word; white-space:pre-wrap;
  }
  .copy-btn{
    background:var(--ink); color:white; border:none; font-family:'Inter',sans-serif;
    font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:7px;
    cursor:pointer; transition:opacity .15s ease;
  }
  .copy-btn:hover{ opacity:.85; }

  footer.done-footer{
    margin-top:60px; padding-top:24px; border-top:1px solid var(--border);
    font-size:12.5px; color:var(--ink-faint); line-height:1.7; text-align:center;
  }
  footer.done-footer code{ background:var(--border-soft); padding:1px 5px; border-radius:4px; }

  @media (max-width: 1024px){
    .layout{ grid-template-columns: 1fr; }
    nav.toc{
      position:sticky; top:0; z-index:10; flex-direction:row; overflow-x:auto; overflow-y:visible; max-height:none; scrollbar-gutter:auto;
      background:var(--paper); padding:10px 24px 14px; margin:0 -24px 10px;
      border-bottom:1px solid var(--border); gap:6px;
    }
    .nav-item{ flex-shrink:0; border-left:none; border-bottom:3px solid transparent; border-radius:8px 8px 0 0; }
    .nav-item.active{ border-bottom-color:var(--ink); }
    .legend{ display:none; }
  }

  /* ---------- Klasy pomocnicze (zamiast atrybutów style="") ---------- */

  /* pasek migracji postępu z localStorage na serwer */
  .newbar.migrate{ background: var(--tech-bg); border-color: #C6D2E6; color: #2E4468; }
  .newbar.migrate .btn{ border-color: #B4C4DC; color: #2E4468; }
  .newbar.migrate .btn:hover{ background: #fff; border-color: var(--tech); color: var(--tech); }
  /* wyższa specyficzność niż .newbar .btn{ margin-left:auto } — bez !important */
  .newbar .btn.btn-flush{ margin-left: 0; }

  /* kolory próbek w legendzie */
  .legend-swatch--high{ background: var(--high); }
  .legend-swatch--med{ background: var(--med); }
  .legend-swatch--low{ background: var(--low); }
  .legend-swatch--tech{ background: var(--tech); }
  .legend-swatch--new{ background: var(--new); }

  /* odstęp między tabelą diagnostyczną a listą zadań pod nią */
  .stack-gap{ margin-top: 22px; }

  /* Klikalny URL w tabelach mapy fraz i klastra. Dziedziczy kolor komórki
     (np. zielony w .ok), podkreśla się dopiero na hover. */
  a.u-link{ color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
  a.u-link:hover{ color: var(--tech); border-bottom-color: var(--tech); }

  .td-muted{ color: var(--ink-faint); }
  .note-warn{ color: var(--med); }
  .dim{ opacity: .7; }

  /* .pill ma margin-left:8px; ta klasa go zeruje (definicja PO .pill) */
  .pill-flush{ margin-left: 0; }

  /* ---------- Tabela wniosków — pigułki decyzji (sekcja "Wnioski") ---------- */
  .dec-pill{
    display:inline-block; padding:3px 10px; border-radius:999px;
    font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  }
  .dec-keep{ background:var(--low-bg); color:var(--done); }
  .dec-merge{ background:var(--med-bg); color:var(--med); }
  .dec-delete{ background:var(--high-bg); color:var(--high); }
  .dec-target{ font-size:12px; color:var(--ink-soft); display:inline-block; margin-top:5px; }
  .dec-reason{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
  table.diag tr.row-delete td{ background:var(--high-bg); }
  table.diag tr.row-delete:hover td{ background:#F7E0DB; }
  table.diag tr.row-merge td{ background:var(--med-bg); }
  table.diag tr.row-merge:hover td{ background:#F7E6C8; }

  /* ---------- Telefon (do 480px) ---------- */
  @media (max-width: 480px){
    .shell{ padding: 0 16px 60px; }
    .progress-wrap{ flex-direction: column; align-items: stretch; gap: 12px; }

    /* W kolumnie oś główna biegnie pionowo, więc flex-basis z .progress-track
       (1 1 200px) sterowałby WYSOKOŚCIĄ — pasek rozdymał się do 200px i przez
       border-radius wyglądał jak owal. Tu bazę zerujemy i wracamy do height: 10px. */
    .progress-track{ flex: 0 0 auto; width: 100%; height: 10px; min-width: 0; }

    /* .shell ma tu padding 16px, a nie 24px — menu musi to odwzorować,
       inaczej wystaje poza ekran i robi poziomy pasek przewijania. */
    nav.toc{ margin: 0 -16px 10px; padding-left: 16px; padding-right: 16px; }

    #save-status{ text-align: left; min-width: 0; }
    .section{ margin-bottom: 40px; }
    .task-inner{ padding: 13px 14px; }
    .url-label{ font-size: 11.5px; word-break: break-all; }
  }