:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef2ff;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --success: #166534;
  --success-soft: #f0fdf4;
  --success-border: #bbf7d0;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, .18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #131c2e;
    --surface-2: #1a2438;
    --text: #e6ebf5;
    --muted: #94a3b8;
    --border: #263145;
    --accent: #a5b4fc;
    --accent-hover: #c7d2fe;
    --accent-soft: #1e2547;
    --danger: #fca5a5;
    --danger-soft: #2a1618;
    --danger-border: #5b2326;
    --success: #86efac;
    --success-soft: #122a1c;
    --success-border: #1f5130;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, .7);
    --btn-text: #131c2e;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  background:
    radial-gradient(1100px 520px at 12% -12%, var(--accent-soft), transparent 62%),
    radial-gradient(900px 460px at 105% 0%, rgba(79, 70, 229, .10), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  justify-content: center;
}

body > * { width: min(100%, 46rem); }

h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--text);
}

h2 {
  margin: 2.1rem 0 .85rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

body > p { margin: 0 0 .4rem; color: var(--muted); font-size: 1.02rem; }

/* --- Komunikaty (błędy / potwierdzenie zapisu) --------------------- */
.flash-error, .flash-success {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .94rem;
}
.flash-error li { margin: .15rem 0; }
.flash-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }

/* --- Widok wybranej notatki --------------------------------------- */
h2 + dl, dl {
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.05rem;
}
dt:first-child { margin-top: 0; }
dd { margin: .28rem 0 0; font-size: 1.02rem; overflow-wrap: anywhere; }
dd strong { font-size: 1.22rem; font-weight: 700; letter-spacing: -.012em; }
dl dd + dt { padding-top: .95rem; border-top: 1px solid var(--border); }

/* --- Formularz ---------------------------------------------------- */
form {
  display: grid; gap: 1rem;
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
form p { margin: 0; display: grid; gap: .45rem; }
label { font-size: .8rem; font-weight: 650; letter-spacing: .03em; color: var(--muted); }

input[name="title"], textarea[name="body"] {
  width: 100%; padding: .72rem .9rem;
  font: inherit; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
input:focus, textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 'justify-self' dotyczy tylko children siatki; w pasku akcji nie wolno
   sciagac klawiszy do lewej, wiec kasujemy ja dla modalu i listy. */
button {
  justify-self: start;
  padding: .74rem 1.5rem;
  font: inherit; font-weight: 650; color: var(--btn-text, #fff);
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
button:hover { filter: brightness(1.07); box-shadow: 0 10px 26px -10px rgba(79, 70, 229, .6); transform: translateY(-1px); }
button:active { transform: translateY(0); filter: brightness(.97); }
button:focus-visible { outline: 3px solid rgba(79, 70, 229, .4); outline-offset: 2px; }

/* --- Naglowek strony + przycisk DODAJ w prawym gornym rogu ---------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: .2rem;
}
.page-head-text { min-width: 0; }
.page-head h1 { margin-bottom: .35rem; }

.btn-add {
  flex: 0 0 auto; justify-self: auto;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .9rem; font-weight: 700;
  padding: .7rem 1.35rem;
}

/* --- Modale (dodawanie i podglad) -----------------------------------
   <dialog> daje native modalnosc (Escape, backdrop, tlo poza fokus).
   Okno ma zawsze nieprzezroczyste, bardzo jasne tlo oraz padding od kazdej
   krawedzi, wiec tekst jest czytelny niezaleznie od tego, co jest pod spodem. */
dialog.modal {
  width: min(100% - 2rem, 34rem);
  margin: auto;
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #fbfcff;
  background: color-mix(in srgb, var(--surface) 96%, #eef1fa);
  color: var(--text);
  box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .5);
  overflow: visible;
}
dialog.modal:not([open]) { display: none; }
dialog.modal[open] { display: block; animation: modalIn .18s ease both; }
dialog.modal::backdrop { background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes modalIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) {
  dialog.modal { background: #131c2e; background: var(--surface); }
}

/* Zawartosc okna nie dodaje wlasnego tla ani odstepu - odstep daje dialog. */
dialog.modal form, dialog.modal .modal-card {
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background-color: rgba(0, 0, 0, 0); box-shadow: none;
}
dialog.modal .modal-head {
  display: block; margin: 0 0 .15rem;
  font-size: 1.2rem; font-weight: 750; letter-spacing: -.015em; color: var(--text);
}
dialog.modal input[name="title"], dialog.modal textarea[name="body"] { width: 100%; }
dialog.modal textarea[name="body"] { min-height: 8rem; }

/* Pasek akcji modalu dodawania: ANULUJ po lewej, ZAPISZ po prawej. */
.modal-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .35rem;
}
.modal-actions .btn { flex: 0 0 auto; justify-self: auto; }

/* --- Modal podgladu notatki -----------------------------------------
   Jedynym sterowaniem jest krzyzyk w prawym gornym rogu (plus Escape i
   klikniecie w tlo). Tresc ma odstep od kazdej krawedzi okna. */
dialog.view-modal { position: relative; }
.view-heading {
  margin: 0 2.8rem .95rem 0;
  font-size: 1.2rem; font-weight: 750; letter-spacing: -.015em;
  text-transform: none; color: var(--text);
}
.view-x {
  position: absolute; top: .8rem; right: .8rem;
  width: 2rem; height: 2rem; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  justify-self: auto;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: none; filter: none; color: var(--muted); cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.view-x:hover {
  background: var(--surface-2); border-color: var(--accent); color: var(--text);
  transform: none; filter: none; box-shadow: none;
}
.view-x .btn-icon-glyph { font-size: 1.3rem; }

.view-body { display: grid; gap: .9rem; font-size: 1rem; }
.view-body p { margin: 0; }
.view-body b {
  display: block; margin-bottom: .2rem;
  color: var(--muted); font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.view-body .v-title { font-size: 1.22rem; font-weight: 700; letter-spacing: -.012em; }
.view-body .v-title span { color: var(--text); }
.view-body .v-date span { color: var(--text); font-variant-numeric: tabular-nums; }
.view-body .v-text { padding-top: .9rem; border-top: 1px solid var(--border); min-height: 2rem; }
.view-body .v-text span {
  display: block; color: var(--text);
  white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere;
}

/* Zablokowanie przewijania tla przy otwartym modalu (fallback bez <dialog>). */
html.has-modal { overflow: hidden; }

/* Fallback dla przegladarek bez <dialog>: to samo okno, reczne pozycjonowanie. */
dialog.modal[data-open="true"] {
  display: block; position: fixed; inset: 0; z-index: 60;
  width: min(100% - 2rem, 34rem); height: max-content; margin: auto;
}

/* Bez JavaScriptu okna nie moga zostac niedostepne: wychodza do strumienia
   strony jako statyczne sekcje z tym samym jasnym tlem. */
html[data-nojs="true"] dialog.modal {
  display: block; position: static; width: auto; margin: 1.5rem 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
html[data-nojs="true"] dialog.modal form { display: grid; }
html[data-nojs="true"] dialog.modal .view-x { display: none; }
html[data-nojs="true"] dialog.modal .view-heading { margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] { animation: none; }
  .btn:hover, dialog.modal .btn:hover { transform: none; }
}

@media (max-width: 640px) {
  .btn-add { width: 100%; justify-content: center; }
  .modal-actions .btn { flex: 1 1 0; justify-content: center; }
}


/* --- Lista notatek ------------------------------------------------ */
.note-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
}
.note-list > .note {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.note-list > .note:hover {
  transform: translateY(-2px); border-color: #c7cbf5;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: var(--shadow-md);
}
.note-id {
  flex: 0 0 auto; min-width: 2.9rem; padding: .18rem .55rem;
  font-size: .78rem; font-weight: 700; text-align: center;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px; text-decoration: none;
}
.note-id:hover { background: var(--accent); color: #fff; border-color: transparent; }
.note-date { margin-left: auto; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
em { color: var(--muted); }

@media (max-width: 640px) {
  .note-date { margin-left: 0; width: 100%; }
  button { justify-self: stretch; }
}

/* --- Przyciski ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .68rem 1.25rem;
  font: inherit; font-weight: 650; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  transition: transform .14s ease, box-shadow .18s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:focus-visible { outline: 3px solid rgba(79, 70, 229, .4); outline-offset: 2px; }
.btn-sm { padding: .48rem .9rem; font-size: .9rem; }

.btn-primary {
  color: var(--btn-text, #fff);
  background: #4f46e5;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(79, 70, 229, .55);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(.97); }

.btn-danger {
  color: var(--btn-danger-text, #fff);
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(220, 38, 38, .6);
}
.btn-danger:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(220, 38, 38, .7); }
.btn-danger:active { transform: translateY(0); filter: brightness(.96); }
.btn-danger:disabled { opacity: .65; cursor: progress; transform: none; filter: none; }

.btn-ghost {
  color: var(--text); background: var(--surface);
  border-color: var(--border); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: #c7cbf5; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-2); }

/* Znak X ma byc idealnie wycentrowany w pionie i poziomie klawisza.
   line-height/inline-grid nie wystarcza, bo &times; jako glif fontu ma
   wlasna baseline i zasieg (ink box) przesuniety wzgledem linii pisma.
   Rozwiazanie: glif jest wycentrowany geometrycznie wzgledem pola klawisza. */
.btn-icon {
  /* Kwadratowy, stały obszar klawisza. */
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 0; margin: 0 0 0 .45rem;
  font-size: 1.25rem; line-height: 1; font-weight: 700;
  text-align: center; text-indent: 0; white-space: nowrap;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .14s ease;
}
/* Glif X jest pozycjonowany wzgledem pola (border box) klawisza, a nie
   linii pisma, wiec jest srodkowany geometrycznie w pionie i poziomie.
   translate(-50%,-50%) liczy sie od srodka samego elementu, wiec 50%/50%
   dokladnie pokrywa srodek klawisza. */
.btn-icon > .btn-icon-glyph {
  display: block; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0; font-size: 1.15em;
}
.btn-icon:hover { color: #fff; background: #dc2626; border-color: transparent; transform: translateY(-1px); }
.btn-icon:hover > .btn-icon-glyph { transform: translate(-50%, -50%); }
.btn-icon[aria-expanded="true"] { color: #fff; background: #dc2626; border-color: transparent; }
.btn-icon:focus-visible { outline: 3px solid rgba(220, 38, 38, .4); outline-offset: 2px; }

/* --- Panel potwierdzenia usuniecia ----------------------------------- */
.detail-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.confirm {
  margin-top: 1rem; padding: 1.05rem 1.2rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-left: 4px solid #dc2626;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  animation: confirmIn .18s ease both;
}
.confirm[hidden] { display: none; }
@keyframes confirmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.confirm-lead { margin: 0; font-weight: 700; font-size: 1rem; color: var(--text); }
.confirm-body { margin: .3rem 0 .85rem; font-size: .92rem; color: var(--muted); overflow-wrap: anywhere; }
.confirm-body strong { color: var(--text); }
.confirm form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; display: block; gap: 0; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

/* Usuniecie wewnatrz wiersza listy: panel zajmuje pelna szerokosc. */
.note { position: relative; }
.confirm-inline { grid-column: 1 / -1; flex-basis: 100%; width: 100%; margin-top: .35rem; }

@media (max-width: 640px) {
  .confirm-actions .btn { flex: 1 1 auto; justify-content: center; }
  .detail-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .note-list > .note:hover, button:hover, .btn:hover, .btn-icon:hover { transform: none; }
}

/* --- Wiersz listy jako kafelek klikalny -----------------------------
   Caly wiersz to przycisk otwierajacy podglad; nadpisanie bazowych regul
   'button' (gradient, padding, justify-self) jest tu konieczne. */
.note-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; filter: none; justify-self: auto;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.note-open:hover { filter: none; box-shadow: none; transform: none; background: none; }
.note-open:hover .note-title { color: var(--accent-hover); }
.note-open:focus-visible { outline: 3px solid rgba(79, 70, 229, .4); outline-offset: 4px; border-radius: 6px; }
.note-id { display: inline-block; }