/* ============================================================================
   numernabis-2026.css — wspólna warstwa wizualna Numernabisa.

   Jeden arkusz zamiast kolejnego pliku na każdą poprawkę: tokeny, okna
   dialogowe, kafelki paska narzędzi, pasek materiałów i karty zapisanej pracy.
   Ładowany jako ostatni, więc wygrywa z warstwami historycznymi bez !important
   tam, gdzie tylko się da.
   ========================================================================== */

:root{
  /* Kolory marki — granat jako baza, indygo jako akcent. */
  --nb-navy:#14213d;
  --nb-indigo:#5965f3;
  --nb-indigo-soft:#eef0ff;
  --nb-ink:#1b2440;
  --nb-ink-soft:#5b6584;
  --nb-ink-faint:#8b93ab;
  --nb-line:#e4e7f2;
  --nb-line-strong:#d2d7e8;
  --nb-surface:#ffffff;
  --nb-surface-sunken:#f7f8fc;
  --nb-danger:#d8385a;
  --nb-danger-soft:#fdeef1;
  --nb-success:#0f9b6c;

  /* Promienie i cienie — trzy poziomy, konsekwentnie w całym produkcie. */
  --nb-radius-sm:10px;
  --nb-radius:16px;
  --nb-radius-lg:22px;
  --nb-shadow-sm:0 2px 8px rgba(20,33,61,.06);
  --nb-shadow:0 12px 32px rgba(20,33,61,.10);
  --nb-shadow-lg:0 28px 70px rgba(20,33,61,.20);

  --nb-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================================
   1. Okna dialogowe — jeden wygląd dla wszystkich komunikatów
   ========================================================================== */

dialog.nb-dialog,
dialog.axio-dialog{
  width:min(520px,calc(100vw - 32px));
  padding:0;
  border:none;
  border-radius:var(--nb-radius-lg);
  background:var(--nb-surface);
  box-shadow:var(--nb-shadow-lg);
  color:var(--nb-ink);
  overflow:hidden;
}
/* Edytor profilu to szerokie, dwukolumnowe okno — pełne wymiary, tło i obramowanie
   trzyma dashboard-profile.css. Tu celowo nie ruszamy jego szerokości. */
dialog.nb-dialog::backdrop,
dialog.axio-dialog::backdrop,
dialog.profile-dialog::backdrop{
  background:rgba(14,20,40,.44);
  backdrop-filter:blur(3px);
}
dialog.nb-dialog[open]{animation:nb-dialog-in .22s var(--nb-ease)}
@keyframes nb-dialog-in{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}

.nb-dialog form{display:grid;gap:0;margin:0}

.nb-dialog header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--nb-line);
}
.nb-dialog header>div{flex:1;min-width:0}
.nb-dialog header small{
  display:block;
  margin-bottom:3px;
  color:var(--nb-ink-faint);
  font:800 9px/1.2 Manrope,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nb-dialog header h2,
.nb-dialog header h3{
  margin:0;
  color:var(--nb-ink);
  font:800 19px/1.25 Manrope,sans-serif;
  letter-spacing:-.02em;
}

.nb-dialog-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--nb-indigo-soft);
  color:var(--nb-indigo);
  font:800 17px/1 Manrope,sans-serif;
}
.nb-dialog-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nb-dialog-icon.is-danger{background:var(--nb-danger-soft);color:var(--nb-danger)}
.nb-dialog-icon.is-success{background:#e8f7f1;color:var(--nb-success)}

.nb-dialog-close{
  flex:0 0 auto;
  width:32px;height:32px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--nb-ink-faint);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.nb-dialog-close:hover{background:var(--nb-surface-sunken);color:var(--nb-ink)}

.nb-dialog-body{padding:20px 24px;display:grid;gap:14px}
.nb-dialog-body>p{margin:0;color:var(--nb-ink-soft);font:400 14px/1.6 "DM Sans",sans-serif}
.nb-dialog-body label{display:grid;gap:6px;color:var(--nb-ink);font:700 12px/1.3 Manrope,sans-serif}
.nb-dialog-body input,
.nb-dialog-body select,
.nb-dialog-body textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--nb-line-strong);
  border-radius:var(--nb-radius-sm);
  background:var(--nb-surface);
  color:var(--nb-ink);
  font:400 14px/1.4 "DM Sans",sans-serif;
  transition:border-color .16s,box-shadow .16s;
}
.nb-dialog-body input:focus,
.nb-dialog-body select:focus,
.nb-dialog-body textarea:focus{
  outline:none;
  border-color:var(--nb-indigo);
  box-shadow:0 0 0 3px rgba(89,101,243,.16);
}
.nb-dialog-body textarea{resize:vertical;min-height:86px}
/* Komunikat walidacji pola w oknie prompt — bez niego odrzucona nazwa znikala
   po cichu razem z zamykanym oknem. */
.nb-dialog-error{
  margin-top:-6px;
  color:var(--nb-danger,#c2334d);
  font:600 12px/1.45 "DM Sans",sans-serif;
}
.nb-dialog-body input[aria-invalid="true"],
.nb-dialog-body textarea[aria-invalid="true"]{
  border-color:var(--nb-danger,#c2334d);
  box-shadow:0 0 0 3px rgba(194,51,77,.14);
}

.nb-dialog footer{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:16px 24px 20px;
  border-top:1px solid var(--nb-line);
  background:var(--nb-surface-sunken);
}
.nb-dialog footer .nb-spacer{margin-right:auto}

.nb-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:11px;
  font:700 13px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:transform .14s var(--nb-ease),box-shadow .16s,background .16s,border-color .16s;
}
.nb-button:active{transform:translateY(1px)}
.nb-button-primary{background:var(--nb-indigo);color:#fff;box-shadow:0 6px 16px rgba(89,101,243,.28)}
.nb-button-primary:hover{background:#4a56e8;box-shadow:0 9px 22px rgba(89,101,243,.34)}
.nb-button-secondary{background:var(--nb-surface);color:var(--nb-ink-soft);border-color:var(--nb-line-strong)}
.nb-button-secondary:hover{background:var(--nb-surface-sunken);color:var(--nb-ink)}
.nb-button-danger{background:var(--nb-danger);color:#fff;box-shadow:0 6px 16px rgba(216,56,90,.26)}
.nb-button-danger:hover{background:#c22e50}

/* --- Stare okna `.axio-dialog` doprowadzone do wyglądu `.nb-dialog` ---------
   Zostały w app.html i dashboard.html z własnym znacznikiem (`.dialog-icon`,
   `.dialog-close`, `.dialog-primary`…). Przepinanie ich na Numernabis.confirm
   zmieniłoby zachowanie — okno wznowienia sesji traktuje Esc jako „kontynuuj",
   a okno udostępniania ma własną listę uczestników. Dlatego wyrównujemy je
   arkuszem: ten sam podział nagłówek / treść / stopka, te same przyciski. */
dialog.axio-dialog>form{width:auto;padding:0!important;display:grid;gap:0;margin:0}

dialog.axio-dialog form>header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0!important;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--nb-line);
}
dialog.axio-dialog form>header>div{flex:1;min-width:0}
dialog.axio-dialog form>header small{
  display:block;
  margin-bottom:3px;
  color:var(--nb-ink-faint);
  font:800 9px/1.2 Manrope,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
dialog.axio-dialog form h2,dialog.axio-dialog form h3{
  margin:0;
  color:var(--nb-ink);
  font:800 19px/1.25 Manrope,sans-serif;
  letter-spacing:-.02em;
}

dialog.axio-dialog .dialog-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--nb-indigo-soft);
  color:var(--nb-indigo);
  font:800 17px/1 Manrope,sans-serif;
}
dialog.axio-dialog .dialog-icon.warning{background:var(--nb-danger-soft);color:var(--nb-danger)}
dialog.axio-dialog .dialog-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

dialog.axio-dialog .dialog-close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--nb-ink-faint);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s;
}
dialog.axio-dialog .dialog-close:hover{background:var(--nb-surface-sunken);color:var(--nb-ink)}

/* Treść to wszystko między nagłówkiem a stopką — bez wyliczania każdego pola.
   Odsuwamy marginesem, nie paddingiem: panel uczestników ma własne tło i przy
   paddingu rozlewałoby się ono na całą szerokość okna. */
dialog.axio-dialog form>*:not(header):not(footer){margin:0 24px 14px}
dialog.axio-dialog form>header+*{margin-top:20px}
dialog.axio-dialog form>p:empty{display:none}
dialog.axio-dialog form>p{color:var(--nb-ink-soft);font:400 14px/1.6 "DM Sans",sans-serif}
dialog.axio-dialog form>label{
  display:grid;
  gap:6px;
  color:var(--nb-ink);
  font:700 12px/1.3 Manrope,sans-serif;
}
dialog.axio-dialog input,dialog.axio-dialog textarea,dialog.axio-dialog select{
  width:100%;
  margin-top:0;
  padding:11px 13px;
  border:1px solid var(--nb-line-strong);
  border-radius:var(--nb-radius-sm);
  background:var(--nb-surface);
  color:var(--nb-ink);
  font:400 14px/1.4 "DM Sans",sans-serif;
  transition:border-color .16s,box-shadow .16s;
}
dialog.axio-dialog input:focus,dialog.axio-dialog textarea:focus,dialog.axio-dialog select:focus{
  outline:none;
  border-color:var(--nb-indigo);
  box-shadow:0 0 0 3px rgba(89,101,243,.16);
}

dialog.axio-dialog form>footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin:6px 0 0!important;
  padding:16px 24px 20px;
  border-top:1px solid var(--nb-line);
  background:var(--nb-surface-sunken);
}
dialog.axio-dialog form>footer>a{margin-right:auto}
dialog.axio-dialog form>footer button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:11px;
  font:700 13px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:transform .14s var(--nb-ease),box-shadow .16s,background .16s,border-color .16s;
}
dialog.axio-dialog form>footer button:active{transform:translateY(1px)}
dialog.axio-dialog .dialog-primary{background:var(--nb-indigo);color:#fff;box-shadow:0 6px 16px rgba(89,101,243,.28)}
dialog.axio-dialog .dialog-primary:hover{background:#4a56e8;box-shadow:0 9px 22px rgba(89,101,243,.34)}
dialog.axio-dialog .dialog-secondary{background:var(--nb-surface);color:var(--nb-ink-soft);border-color:var(--nb-line-strong)}
dialog.axio-dialog .dialog-secondary:hover{background:var(--nb-surface-sunken);color:var(--nb-ink)}
dialog.axio-dialog .dialog-danger{background:var(--nb-danger);color:#fff;box-shadow:0 6px 16px rgba(216,56,90,.26)}
dialog.axio-dialog .dialog-danger:hover{background:#c22e50}

/* ============================================================================
   2. Pasek narzędzi tablicy — wąski pasek z zakładkami, panel rozwija się POD nim
   ========================================================================== */

/* Pasek to jedna linia zakładek (KOLOR / ROZMIAR / EDYCJA / STYL KRESKI).
   Kontrolki każdej grupy nie leżą już w pasku — zjeżdżają w panel pod paskiem
   dopiero po najechaniu. Dzięki temu sam pasek ma wysokość jednego napisu,
   a nie „białego placka" z poprzedniej wersji. */
@container (min-width:721px){
  .workspace-page .tool-options{
    align-items:center;
    gap:4px;
    padding:4px;
    min-height:0;
    overflow:visible;
    transform:translateX(-50%);
  }

  .workspace-page .tool-options .toolbar-group{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
    min-height:0;
    margin:0;
    padding:7px 12px!important;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    overflow:visible;
    transition:background .18s ease,border-color .18s ease;
  }
  .workspace-page .tool-options .toolbar-group:hover,
  .workspace-page .tool-options .toolbar-group:focus-within{
    border-color:var(--nb-line);
    background:var(--nb-surface);
  }
  /* Niewidzialny mostek, żeby kursor przeszedł z zakładki na panel bez utraty hoveru. */
  .workspace-page .tool-options .toolbar-group::after{
    content:"";
    position:absolute;
    top:100%;left:-4px;right:-4px;
    height:10px;
  }

  /* Etykieta = nazwa zakładki: zawsze widoczna. */
  .workspace-page .tool-options .toolbar-group-label{
    position:static!important;
    display:flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    color:var(--nb-ink-soft)!important;
    font:800 9px/1 Manrope,sans-serif!important;
    letter-spacing:.1em!important;
    text-transform:uppercase;
    white-space:nowrap;
    transition:color .18s ease;
  }
  .workspace-page .tool-options .toolbar-group:hover .toolbar-group-label,
  .workspace-page .tool-options .toolbar-group:focus-within .toolbar-group-label{color:var(--nb-indigo)!important}

  /* Jedyne dziecko grupy poza etykietą to panel kontrolek — zjeżdża pod pasek,
     wyrównany do lewej krawędzi swojej zakładki. */
  .workspace-page .tool-options .color-toolbar .colors,
  .workspace-page .tool-options .size-toolbar .size-control,
  .workspace-page .tool-options .history-toolbar .history-actions,
  .workspace-page .tool-options .line-style-toolbar .line-style-options{
    position:absolute;
    top:calc(100% + 9px);
    left:0;
    transform:translateY(-6px);
    width:max-content;
    max-width:80vw;
    margin:0;
    padding:11px 13px;
    border:1px solid var(--nb-line);
    border-radius:13px;
    background:var(--nb-surface);
    box-shadow:var(--nb-shadow);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease,transform .22s var(--nb-ease);
    z-index:20;
  }
  /* Ostatnia zakładka rozwija się w lewo, żeby panel nie wychodził poza pasek. */
  .workspace-page .tool-options .line-style-toolbar .line-style-options{left:auto;right:0}

  .workspace-page .tool-options .toolbar-group:hover .colors,
  .workspace-page .tool-options .toolbar-group:focus-within .colors,
  .workspace-page .tool-options .toolbar-group:hover .size-control,
  .workspace-page .tool-options .toolbar-group:focus-within .size-control,
  .workspace-page .tool-options .toolbar-group:hover .history-actions,
  .workspace-page .tool-options .toolbar-group:focus-within .history-actions,
  .workspace-page .tool-options .toolbar-group:hover .line-style-options,
  .workspace-page .tool-options .toolbar-group:focus-within .line-style-options{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* Kliknięta kontrolka zachowuje fokus, ale panel ma mimo tego zniknąć po
     opuszczeniu całego kafelka kursorem. */
  .workspace-page .tool-options .toolbar-group.collapsed-after-leave .colors,
  .workspace-page .tool-options .toolbar-group.collapsed-after-leave .size-control,
  .workspace-page .tool-options .toolbar-group.collapsed-after-leave .history-actions,
  .workspace-page .tool-options .toolbar-group.collapsed-after-leave .line-style-options{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-6px)!important;
  }

  /* Więcej miejsca na suwak i opis grubości narzędzia. */
  .workspace-page .tool-options .size-toolbar .size-control{
    grid-template-columns:32px minmax(224px,1fr) 44px;
    width:344px;
    min-width:344px;
  }
  .workspace-page .tool-options .size-toolbar .size-control-body,
  .workspace-page .tool-options .size-toolbar .range-shell,
  .workspace-page .tool-options .size-toolbar .size-control input{
    width:100%!important;
    min-width:0;
  }
  .workspace-page .tool-options .size-toolbar .size-control-caption b{font-size:9px}
  .workspace-page .tool-options .size-toolbar .size-control-caption small{font-size:7px}

  /* Rozwijana paleta kolorów startuje pod swoim panelem, nie pod całym paskiem. */
  .workspace-page .tool-options .color-toolbar .color-palette{top:calc(100% + 8px)}

  /* Pasek nie ma się już nigdy zwijać do przewijania w tym zakresie. */
  .workspace-page .tool-options{overflow:visible!important}
}

/* ============================================================================
   3. Równoległy pasek materiałów przy lewej listwie
   ========================================================================== */

/* Pasek dzieli komórkę siatki z obszarem tablicy, czyli zaczyna się dokładnie
   tam, gdzie kończy się listwa narzędzi. Dzięki temu trzyma się jej krawędzi
   niezależnie od szerokości listwy i marginesów układu — przeliczanie pikseli
   rozjeżdżało się przy każdym wariancie motywu. */
.workspace-page .workspace{position:relative}
.files-rail{
  grid-column:auto;
  grid-row:auto;
  align-self:auto;
  justify-self:auto;
  position:absolute;
  top:12px;
  bottom:auto;
  left:78px;
  margin:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  width:300px;
  height:min(520px,calc(100% - 24px));
  max-height:calc(100% - 24px);
  border:1px solid var(--nb-line);
  border-radius:18px;
  background:var(--nb-surface);
  box-shadow:0 24px 64px rgba(31,42,83,.18),0 5px 18px rgba(31,42,83,.08);
  opacity:0;
  transform:translateX(-8px) scale(.985);
  transform-origin:left var(--files-rail-anchor-y,50%);
  transition:opacity .18s ease,transform .22s var(--nb-ease),height .18s ease,top .18s ease;
  pointer-events:none;
}
.files-rail.open{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.files-rail[hidden]{display:none}
.files-rail::before{content:"";position:absolute;top:0;right:100%;bottom:0;width:10px}
.files-rail::after{
  content:"";
  position:absolute;
  top:var(--files-rail-anchor-y,50%);
  left:-6px;
  width:12px;
  height:12px;
  border-left:1px solid var(--nb-line);
  border-bottom:1px solid var(--nb-line);
  background:var(--nb-surface);
  transform:translateY(-50%) rotate(45deg);
}

@media(max-width:900px){.files-rail{left:68px;width:min(300px,calc(100% - 80px))}}
@media(max-width:520px){.files-rail{left:62px;width:min(288px,calc(100% - 74px))}}

.files-rail>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--nb-line);
  border-radius:17px 17px 0 0;
  background:linear-gradient(145deg,#fff,#f7f8ff);
}
.files-rail>header>div{flex:1;min-width:0}
.files-rail>header small{
  display:block;
  color:var(--nb-ink-faint);
  font:800 8px/1.2 Manrope,sans-serif;
  letter-spacing:.14em;
}
.files-rail>header strong{
  display:block;
  color:var(--nb-ink);
  font:800 13px/1.3 Manrope,sans-serif;
}
#files-rail-add{
  padding:8px 12px;
  border:1px solid var(--nb-line-strong);
  border-radius:9px;
  background:var(--nb-surface);
  color:var(--nb-indigo);
  font:700 11px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
#files-rail-add:hover{background:var(--nb-indigo-soft);border-color:var(--nb-indigo)}

.files-rail-list{
  flex:1;
  min-height:0;
  display:grid;
  align-content:start;
  gap:9px;
  padding:13px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#cfd6e8 transparent;
}
.files-rail-empty{
  margin:6px 2px;
  color:var(--nb-ink-faint);
  font:400 12px/1.6 "DM Sans",sans-serif;
}

.files-rail-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"kind name" "kind meta";
  align-items:center;
  min-height:68px;
  gap:3px 11px;
  padding:10px;
  border:1px solid var(--nb-line);
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#fafbff);
  cursor:grab;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.files-rail-card:hover{border-color:#9baaf0;background:#fff;box-shadow:0 8px 22px rgba(53,69,135,.12)}
.files-rail-card:focus-visible{outline:2px solid var(--nb-indigo);outline-offset:2px}
.files-rail-card.dragging{opacity:.45;cursor:grabbing}
.files-rail-kind{
  grid-area:kind;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  overflow:hidden;
  border:1px solid #e4e8f3;
  border-radius:11px;
  background:var(--nb-indigo-soft);
  color:var(--nb-indigo);
  font:800 9px/1 Manrope,sans-serif;
  letter-spacing:.04em;
}
.files-rail-kind.has-preview{background:#eef1f8;color:transparent}
.files-rail-kind img{display:block;width:100%;height:100%;object-fit:cover}
.files-rail-card strong{
  grid-area:name;
  overflow:hidden;
  color:var(--nb-ink);
  font:700 12px/1.35 Manrope,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.files-rail-card small{grid-area:meta;color:var(--nb-ink-faint);font:400 10px/1.3 "DM Sans",sans-serif}

.files-rail>footer{
  padding:11px 15px 13px;
  border-top:1px solid var(--nb-line);
  border-radius:0 0 17px 17px;
  background:#fafbfe;
  color:var(--nb-ink-faint);
  font:400 10px/1.5 "DM Sans",sans-serif;
}

/* ============================================================================
   4. Pulpit — nagłówki sekcji i karty zapisanej pracy
   ========================================================================== */

.dashboard-page .dash-section{margin-bottom:34px}
.dashboard-page .section-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--nb-line);
}
.dashboard-page .section-label{
  display:block;
  margin-bottom:5px;
  color:var(--nb-indigo);
  font:800 9px/1 Manrope,sans-serif;
  letter-spacing:.16em;
}
.dashboard-page .section-top h2{
  margin:0 0 4px;
  color:var(--nb-ink);
  font:800 22px/1.2 Manrope,sans-serif;
  letter-spacing:-.02em;
}
.dashboard-page .section-top>div>p{margin:0;color:var(--nb-ink-soft);font:400 13px/1.5 "DM Sans",sans-serif}
.dashboard-page .boards-actions{display:flex;align-items:center;gap:12px}
.dashboard-page #boards-counter{color:var(--nb-ink-faint);font:700 11px/1 Manrope,sans-serif;white-space:nowrap}

/* Wspólny przycisk „Nowa tablica” — w nagłówku pulpitu i przy zapisanych pracach. */
.dashboard-page .new-board{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px 10px 17px;
  border:none;
  border-radius:12px;
  background:var(--nb-indigo);
  color:#fff;
  font:700 13px/1 Manrope,sans-serif;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(89,101,243,.26);
  transition:transform .16s var(--nb-ease),box-shadow .2s;
}
.dashboard-page .new-board:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(89,101,243,.34)}
.dashboard-page .new-board:active{transform:none}
.dashboard-page .new-board-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:rgba(255,255,255,.2)}
.dashboard-page .new-board-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* — Karty zapisanych tablic — */
.dashboard-page .boards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
}
.dashboard-page .saved-board-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--nb-line);
  border-radius:var(--nb-radius);
  background:var(--nb-surface);
  box-shadow:var(--nb-shadow-sm);
  transition:transform .2s var(--nb-ease),box-shadow .22s,border-color .2s;
}
.dashboard-page .saved-board-card:hover{
  transform:translateY(-3px);
  border-color:var(--nb-indigo);
  box-shadow:var(--nb-shadow);
}
.dashboard-page .board-preview{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  background:var(--nb-surface-sunken) center/cover no-repeat;
  border-bottom:1px solid var(--nb-line);
}
.dashboard-page .board-preview-empty{
  background:
    linear-gradient(rgba(89,101,243,.05),rgba(89,101,243,.05)),
    repeating-linear-gradient(0deg,transparent 0 23px,var(--nb-line) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,var(--nb-line) 23px 24px),
    var(--nb-surface);
}
.dashboard-page .board-preview-badge{
  position:absolute;
  top:10px;left:10px;
  padding:4px 8px;
  border-radius:7px;
  background:rgba(255,255,255,.92);
  color:var(--nb-ink-faint);
  font:800 7px/1 Manrope,sans-serif;
  letter-spacing:.12em;
}
.dashboard-page .board-preview-mark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--nb-line-strong);
}
.dashboard-page .board-preview:not(.board-preview-empty) .board-preview-mark{display:none}
.dashboard-page .board-preview-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4}

.dashboard-page .board-card-copy{display:flex;flex-direction:column;gap:7px;padding:15px 16px 14px}
.dashboard-page .board-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dashboard-page .board-card-meta small{color:var(--nb-ink-faint);font:600 10px/1 "DM Sans",sans-serif}
.dashboard-page .board-save-state{
  padding:3px 8px;
  border-radius:99px;
  background:#e8f7f1;
  color:var(--nb-success);
  font:700 9px/1.4 Manrope,sans-serif;
}
.dashboard-page .saved-board-card h3{
  margin:0;
  overflow:hidden;
  color:var(--nb-ink);
  font:800 15px/1.3 Manrope,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-page .board-card-copy>p{
  display:flex;align-items:center;gap:6px;
  margin:0;
  color:var(--nb-ink-soft);
  font:400 12px/1.4 "DM Sans",sans-serif;
}
.dashboard-page .board-card-copy>p svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.dashboard-page .saved-board-card footer{
  display:flex;
  gap:8px;
  margin-top:5px;
  padding-top:12px;
  border-top:1px solid var(--nb-line);
}
.dashboard-page .saved-board-card footer a,
.dashboard-page .saved-board-card footer button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:10px;
  font:700 12px/1 Manrope,sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.dashboard-page .saved-board-card footer a{flex:1;justify-content:center;background:var(--nb-indigo-soft);color:var(--nb-indigo)}
.dashboard-page .saved-board-card footer a:hover{background:var(--nb-indigo);color:#fff}
.dashboard-page .saved-board-card footer button{background:transparent;color:var(--nb-ink-faint);border-color:var(--nb-line)}
.dashboard-page .saved-board-card footer button:hover{background:var(--nb-danger-soft);color:var(--nb-danger);border-color:var(--nb-danger)}
.dashboard-page .saved-board-card footer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* — Karty notatek i podsumowań — */
.dashboard-page .notes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
}
.dashboard-page .note-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:17px 17px 15px;
  overflow:hidden;
  border:1px solid var(--nb-line);
  border-radius:var(--nb-radius);
  background:var(--nb-surface);
  box-shadow:var(--nb-shadow-sm);
  transition:transform .2s var(--nb-ease),box-shadow .22s,border-color .2s;
}
.dashboard-page .note-card:hover{transform:translateY(-3px);border-color:var(--nb-indigo);box-shadow:var(--nb-shadow)}
/* Notatka spisana przez Numernabisa dostaje indygo krawędź — od razu widać,
   co uczeń napisał sam, a co powstało po sesji. */
.dashboard-page .note-card-automatic::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(var(--nb-indigo),var(--nb-indigo-light,#9ba3ff));
}
.dashboard-page .note-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dashboard-page .note-card-tag{
  padding:4px 9px;
  border-radius:99px;
  background:var(--nb-surface-sunken);
  color:var(--nb-ink-soft);
  font:700 9px/1.4 Manrope,sans-serif;
  letter-spacing:.05em;
}
.dashboard-page .note-card-automatic .note-card-tag{background:var(--nb-indigo-soft);color:var(--nb-indigo)}
.dashboard-page .note-card-date{color:var(--nb-ink-faint);font:600 10px/1 "DM Sans",sans-serif}
.dashboard-page .note-card-title-row{display:flex;align-items:flex-start;gap:9px}
.dashboard-page .note-card-mark{
  display:grid;place-items:center;
  flex:0 0 28px;width:28px;height:28px;
  border-radius:9px;
  background:var(--nb-surface-sunken);
  color:var(--nb-ink-soft);
}
.dashboard-page .note-card-automatic .note-card-mark{background:var(--nb-indigo-soft);color:var(--nb-indigo)}
.dashboard-page .note-card-mark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dashboard-page .note-card h3{margin:0;color:var(--nb-ink);font:800 14px/1.35 Manrope,sans-serif}
.dashboard-page .note-card-excerpt{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:var(--nb-ink-soft);
  font:400 13px/1.6 "DM Sans",sans-serif;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.dashboard-page .note-board-preview{
  margin-top:2px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--nb-line);
  border-radius:11px;
  background:var(--nb-surface-sunken);
  cursor:zoom-in;
}
.dashboard-page .note-board-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

.dashboard-page .empty-library,
.dashboard-page .notes-grid>p,
.dashboard-page .boards-grid>p{
  grid-column:1/-1;
  margin:0;
  padding:28px 22px;
  border:1px dashed var(--nb-line-strong);
  border-radius:var(--nb-radius);
  background:var(--nb-surface-sunken);
  color:var(--nb-ink-soft);
  font:400 13px/1.6 "DM Sans",sans-serif;
  text-align:center;
}

/* ============================================================================
   5. Nagłówek stron publicznych — panel ucznia obok znacznika konta
   ========================================================================== */

.public-header-actions .public-account{display:flex;align-items:center;gap:10px}

.public-panel-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border-radius:11px;
  background:var(--nb-indigo);
  color:#fff;
  font:700 13px/1 Manrope,sans-serif;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(89,101,243,.26);
  transition:transform .16s var(--nb-ease),box-shadow .2s;
}
.public-panel-button:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(89,101,243,.34)}
.public-panel-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.public-account-chip{position:relative}
.public-account-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:80;
  min-width:196px;
  padding:6px;
  border:1px solid var(--nb-line);
  border-radius:13px;
  background:var(--nb-surface);
  box-shadow:var(--nb-shadow);
}
.public-account-menu[hidden]{display:none}
.public-account-menu button{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--nb-ink);
  font:700 13px/1 Manrope,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.public-account-menu button:hover{background:var(--nb-danger-soft);color:var(--nb-danger)}
.public-account-menu button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Podświetlenie tablicy w chwili upuszczania materiału. */
#canvas-wrap.file-drop-target::after{
  content:"Upuść, aby wstawić na tablicę";
  position:absolute;
  inset:10px;
  z-index:70;
  display:grid;
  place-items:center;
  border:2px dashed var(--nb-indigo);
  border-radius:var(--nb-radius);
  background:rgba(89,101,243,.06);
  color:var(--nb-indigo);
  font:800 13px/1 Manrope,sans-serif;
  pointer-events:none;
}

/* ============================================================================
   6. Najczęstsze pytania na stronie korepetycji — rozwijana lista
   ========================================================================== */

/* `<details>` rysowało systemowy trójkącik, jedyny nieostylowany element na
   tej stronie. Znacznik zostaje bez zmian — chowamy marker i rysujemy własny. */
.faq-section details{
  border-bottom:1px solid var(--nb-line);
  transition:border-color .2s ease;
}
.faq-section details:hover{border-color:var(--nb-line-strong)}

.faq-section summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:19px 4px;
  color:var(--nb-ink);
  font:800 13px/1.45 Manrope,sans-serif;
  list-style:none;
  cursor:pointer;
  transition:color .18s ease;
}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary:hover{color:var(--nb-indigo)}
.faq-section summary:focus-visible{
  outline:3px solid rgba(89,101,243,.22);
  outline-offset:3px;
  border-radius:8px;
}

/* Znak „+" składany z dwóch kresek: pionowa znika przy otwarciu. */
.faq-section summary::after{
  content:"";
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:7px;
  background:
    linear-gradient(currentColor,currentColor) center/9px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 9px no-repeat,
    var(--nb-indigo-soft);
  color:var(--nb-indigo);
  transition:transform .24s var(--nb-ease),background-size .24s var(--nb-ease);
}
.faq-section details[open] summary{color:var(--nb-indigo)}
.faq-section details[open] summary::after{
  transform:rotate(180deg);
  background-size:9px 1.6px,1.6px 0;
}

.faq-section details p{
  margin:0;
  padding:0 4px 20px;
  color:var(--nb-ink-soft);
  font:400 13px/1.7 "DM Sans",sans-serif;
}

/* ============================================================================
   7. Ostatni ślad starej, morskiej palety — nadpisy na logowaniu
   ========================================================================== */

/* `.kicker` został jeszcze w kolorze #8dc7bb z czasów Axio i był jedynym
   morskim akcentem w całym produkcie. Na granatowej połowie potrzebny jest
   jaśniejszy odcień indygo, na białej karcie — pełne indygo marki. */
.auth-message .kicker{color:#9ba3ff}
.auth-heading .kicker{color:var(--nb-indigo)}

/* ============================================================================
   8. Zapisana praca — czytelne podglądy i zdecydowane akcje
   ========================================================================== */

/* Źródło miniatury jest już wykadrowane przez board-image-tools.js. `contain`
   pokazuje cały zapis ucznia i nie ucina skrajnych fragmentów równania. */
.dashboard-page .board-preview.board-preview-cropped{
  background-color:#f3f5fa!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
}
.dashboard-page .note-board-preview img{
  height:100%;
  object-fit:contain!important;
  background:#fff;
}
.dashboard-page .note-board-preview.expanded img{height:auto;max-height:430px}
.dashboard-page :where(.board-preview,.note-board-preview).is-processing{
  background:linear-gradient(105deg,#f1f3f8 25%,#fafbfe 38%,#f1f3f8 52%)!important;
  background-size:220% 100%!important;
  animation:nb-preview-loading 1.1s linear infinite;
}
@keyframes nb-preview-loading{to{background-position:-220% 0}}

/* Granat i nasycone indygo dają właściwą hierarchię. Czerwień pojawia się
   dopiero po świadomym najechaniu na akcję usuwania. */
.dashboard-page .saved-board-card footer a{
  border-color:transparent!important;
  background:linear-gradient(135deg,#243764,#3d4f9d)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(32,49,94,.2);
}
.dashboard-page .saved-board-card footer a:hover{
  background:linear-gradient(135deg,#192b55,#334792)!important;
  box-shadow:0 10px 22px rgba(32,49,94,.28);
  transform:translateY(-2px);
}
.dashboard-page .saved-board-card footer .rename-board{
  border-color:#cbd3e4!important;
  background:#fff!important;
  color:#293858!important;
  box-shadow:0 3px 9px rgba(31,45,76,.07);
}
.dashboard-page .saved-board-card footer .rename-board:hover{
  border-color:#68769a!important;
  background:#f8f9fc!important;
  color:#172642!important;
  transform:translateY(-2px);
}
.dashboard-page .saved-board-card footer button:not(.rename-board){
  border-color:transparent!important;
  background:transparent!important;
  color:#687287!important;
}
.dashboard-page .saved-board-card footer button:not(.rename-board):hover{
  border-color:#b92d4b!important;
  background:#fff!important;
  color:#b92d4b!important;
  transform:translateY(-2px);
}

.dashboard-page .note-actions .edit-note{
  border-color:#cbd3e4!important;
  background:#fff!important;
  color:#293858!important;
}
.dashboard-page .note-actions .download-note{
  border-color:transparent!important;
  background:linear-gradient(135deg,#243764,#4d45a5)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(32,49,94,.2);
}
.dashboard-page .note-actions .edit-note:hover{
  border-color:#68769a!important;
  background:#f8f9fc!important;
  color:#172642!important;
  transform:translateY(-2px);
}
.dashboard-page .note-actions .download-note:hover{
  border-color:transparent!important;
  background:linear-gradient(135deg,#192b55,#423a91)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(32,49,94,.28);
  transform:translateY(-2px);
}
.dashboard-page .note-actions .delete-note{
  border-color:transparent!important;
  background:transparent!important;
  color:#687287!important;
}
.dashboard-page .note-actions .delete-note:hover{
  border-color:#b92d4b!important;
  background:#fff!important;
  color:#b92d4b!important;
  transform:translateY(-2px);
}
.dashboard-page .note-actions button:disabled{opacity:.62;cursor:wait;transform:none!important}
.dashboard-page .note-actions .download-note.is-working span{font-size:0}
.dashboard-page .note-actions .download-note.is-working span::after{content:"Tworzę PDF…";font-size:8px}

/* Biblioteka: przyciski reagują ruchem, ale zachowują spokojną, ciemną paletę. */
.library-page :where(.library-upload-primary,.library-empty button){
  background:linear-gradient(135deg,#243764,#5140a6)!important;
  box-shadow:0 9px 22px rgba(32,49,94,.24)!important;
}
.library-page .library-dropzone button{border-color:#aeb9d0!important;background:#fff!important;color:#293858!important}
.library-page .library-card-actions button{
  height:34px;
  border-radius:9px;
  font-size:8px;
  transition:transform .16s var(--nb-ease),box-shadow .18s,border-color .16s,background .16s,color .16s;
}
.library-page .library-card-actions .preview{
  border-color:transparent!important;
  background:#263b6d!important;
  color:#fff!important;
  box-shadow:0 5px 13px rgba(30,47,89,.18);
}
.library-page .library-card-actions .download{
  border-color:#cbd3e4!important;
  background:#fff!important;
  color:#293858!important;
}
.library-page .library-card-actions .remove{
  border-color:transparent!important;
  background:transparent!important;
  color:#687287!important;
}
.library-page .library-card-actions button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 17px rgba(31,45,76,.16)}
.library-page .library-card-actions .preview:not(:disabled):hover{background:#192b55!important}
.library-page .library-card-actions .download:not(:disabled):hover{border-color:#68769a!important;background:#f8f9fc!important;color:#172642!important}
.library-page .library-card-actions .remove:not(:disabled):hover{border-color:#b92d4b!important;background:#fff!important;color:#b92d4b!important}
.library-page .library-card-preview img{transition:transform .3s var(--nb-ease),filter .25s}
.library-page .library-card-preview:hover img{transform:scale(1.035);filter:saturate(1.05)}
.library-page .file-preview-dialog .preview-download{border:0!important;background:#263b6d!important;color:#fff!important}
.library-page .file-preview-dialog .preview-delete{border-color:#cbd3e4!important;background:#fff!important;color:#687287!important}
.library-page .file-preview-dialog footer button{transition:transform .16s var(--nb-ease),box-shadow .18s,border-color .16s,color .16s}
.library-page .file-preview-dialog footer button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 17px rgba(31,45,76,.14)}
.library-page .file-preview-dialog .preview-delete:not(:disabled):hover{border-color:#b92d4b!important;color:#b92d4b!important}

@media (prefers-reduced-motion:reduce){
  .dashboard-page :where(.board-preview,.note-board-preview).is-processing{animation:none}
  .dashboard-page :where(.saved-board-card footer a,.saved-board-card footer button,.note-actions button),
  .library-page :where(.library-card-actions button,.library-card-preview img,.file-preview-dialog footer button){transform:none!important}
}