/* PaperCSS Framework - wersja 0.2.1 Autor Patryk Szkudlarek
*/


/* =========================
   ROOT / TYPO
   ========================= */
:root {
  /* Papierowyekran e-ink - ciepłe, naturalne odcienie */
  --paper-bg: #faf8f3;
  --paper-bg-alt: #f5f2ec;
  --paper-border: #e0d8c7;
  --paper-ink: #2b2925;
  --paper-ink-soft: #4a453f;
  --paper-accent: #8b5a2b;
  --paper-accent-hover: #9d6635;
  --paper-accent-rgb: 139,90,43;
  --paper-highlight: #fff2d6;
  --paper-danger: #a0453c;
  --paper-warning: #b8850a;
  --paper-success: #2e5d32;
  --paper-info: #1e4961;

  /* RGB values for semantic colors (needed for alpha blending in toasts) */
  --paper-danger-rgb: 160,69,60;
  --paper-warning-rgb: 184,133,10;
  --paper-success-rgb: 46,93,50;
  --paper-info-rgb: 30,73,97;

  --paper-danger-hover: #b04f45;
  --paper-warning-hover: #c79114;
  --paper-success-hover: #356a3a;
  --paper-info-hover: #235370;

  --paper-radius-xs: 2px;
  --paper-radius-sm: 3px;
  --paper-radius: 6px;
  --paper-radius-lg: 12px;
  --paper-shadow: 0 1px 3px rgba(139,90,43,0.08), 0 2px 6px rgba(139,90,43,0.04);
  --paper-shadow-layer: 0 2px 4px rgba(139,90,43,0.1), 0 4px 12px rgba(139,90,43,0.06);
  --paper-shadow-focus: 0 0 0 2px rgba(var(--paper-accent-rgb), .2);

  --paper-max-width: 1200px;
  --paper-font-serif: "Literata", "Crimson Text", "Georgia", serif;
  --paper-font-sans: "Inter", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --paper-font-mono: "JetBrains Mono", "Source Code Pro", "Consolas", monospace;
  --paper-line-height: 1.6;
  --paper-transition: 200ms cubic-bezier(.2,0,.3,1);
  --paper-grid-gap: 1.25rem;
  
  /* Tekstura papieru e-ink */
  --paper-texture: 
    radial-gradient(circle at 20% 30%, rgba(139,90,43,0.02) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139,90,43,0.015) 0, transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(139,90,43,0.01) 0, transparent 40%),
    linear-gradient(90deg, transparent 0px, rgba(139,90,43,0.008) 1px, transparent 1px),
    linear-gradient(0deg, transparent 0px, rgba(139,90,43,0.005) 1px, transparent 1px);
    
  --paper-code-bg: #f0ebe0;
  --paper-selection-bg: #e8d4a6;
  --paper-selection-color: #2b2925;

  /* Skala typografii */
  --step--2: clamp(.66rem, .74rem + -.1vw, .72rem);
  --step--1: clamp(.78rem, .8rem + .1vw, .85rem);
  --step-0: clamp(.95rem, .92rem + .25vw, 1rem);
  --step-1: clamp(1.15rem, 1.08rem + .5vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.2rem + 1vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.4rem + 1.25vw, 2.15rem);
  --step-4: clamp(2rem, 1.7rem + 2vw, 2.8rem);
  --step-5: clamp(2.4rem, 2rem + 3vw, 3.6rem);

  /* Spacing */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Przycisk – bazowe custom properties (papierowy wygląd) */
  --btn-font-weight: 500;
  --btn-shadow-inset: 0 1px 0 rgba(255,255,255,0.2) inset;
  --btn-shadow-lift: 
    0 1px 2px rgba(var(--paper-accent-rgb), 0.08), 
    0 2px 4px rgba(var(--paper-accent-rgb), 0.04);
  --btn-height-sm: 2.1rem;
  --btn-height: 2.5rem;
  --btn-height-lg: 3rem;

  --paper-fade-in: fadeIn .4s ease;
}

:root[data-theme="dark"] {
  /* Papierowy ekran nocny - ciepła sepia zamiast zimnych kolorów */
  --paper-bg: #1a1815;
  --paper-bg-alt: #221f1a;
  --paper-border: #3c362b;
  --paper-ink: #e6dcc9;
  --paper-ink-soft: #c4b89d;
  --paper-accent: #d4964a;
  --paper-accent-hover: #e2a558;
  --paper-highlight: #433a28;
  --paper-code-bg: #2a251e;
  --paper-selection-bg: #5c4a2f;
  --paper-selection-color: #e6dcc9;
  --paper-shadow: 0 1px 3px rgba(212,150,74,0.15), 0 2px 6px rgba(212,150,74,0.08);
  --paper-shadow-layer: 0 2px 4px rgba(212,150,74,0.2), 0 4px 12px rgba(212,150,74,0.12);

  --paper-danger-hover: #b55a50;
  --paper-warning-hover: #c79624;
  --paper-success-hover: #3a7240;
  --paper-info-hover: #2a5f82;
}

@media (prefers-reduced-motion: reduce) {
  :root { --paper-transition: 0ms; }
  * { animation: none !important; transition: none !important; }
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin:0;
  font-family: var(--paper-font-sans);
  font-size: var(--step-0);
  line-height: var(--paper-line-height);
  background: var(--paper-bg);
  color: var(--paper-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga","kern","onum","pnum";
  
  /* Tekstura papieru e-ink z subtelnym wzorem */
  background-image: var(--paper-texture);
  background-attachment: fixed;
  background-size: 400px 400px, 300px 300px, 500px 500px, 2px 2px, 2px 2px;
  background-position: 0 0, 100px 100px, 200px 50px, 0 0, 0 0;
}
::selection { background: var(--paper-selection-bg); color: var(--paper-selection-color); }
img,picture,video,canvas,svg { display:block; max-width:100%; }
img { height:auto; }
a {
  color: var(--paper-accent);
  text-decoration: none;
  position: relative;
  transition: color var(--paper-transition);
}
a:hover,a:focus-visible { color: var(--paper-accent-hover); }
a:focus-visible {
  outline:none;
  box-shadow: var(--paper-shadow-focus);
  border-radius: var(--paper-radius-sm);
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--paper-font-serif);
  font-weight:600;
  line-height:1.15;
  margin: var(--space-6) 0 var(--space-3);
  letter-spacing:.5px;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); text-transform:uppercase; letter-spacing:1px; }
p,ul,ol,dl,blockquote,pre,table { margin:0 0 var(--space-5); }
code,pre,kbd,samp {
  font-family: var(--paper-font-mono);
  background: var(--paper-code-bg);
  padding:.15em .4em;
  border-radius: var(--paper-radius-sm);
  font-size:.9em;
  border:1px solid var(--paper-border);
}
pre { padding: var(--space-4); overflow-x:auto; line-height:1.35; position:relative; }
hr { border:none; border-top:1px dashed var(--paper-border); margin:var(--space-6) 0; opacity:.6; }

/* =========================
   LAYOUT / UTILITIES
   ========================= */
.container { width:100%; margin:0 auto; max-width: var(--paper-max-width); padding:0 var(--space-5); }
.grid { display:grid; gap: var(--paper-grid-gap); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.grid.fixed-2 { grid-template-columns: repeat(2,1fr); }
.grid.fixed-3 { grid-template-columns: repeat(3,1fr); }
.grid.fixed-4 { grid-template-columns: repeat(4,1fr); }

.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.flex-col { flex-direction:column; }
.flex-center { justify-content:center; align-items:center; }
.flex-between { justify-content:space-between; }
.gap-1 { gap: var(--space-2); }
.gap-2 { gap: var(--space-3); }
.gap-3 { gap: var(--space-4); }
.gap-4 { gap: var(--space-5); }

.m-0 { margin:0!important; }
.m-1 { margin:var(--space-1)!important; }
.m-2 { margin:var(--space-2)!important; }
.m-3 { margin:var(--space-3)!important; }
.m-4 { margin:var(--space-4)!important; }
.m-5 { margin:var(--space-5)!important; }
.m-6 { margin:var(--space-6)!important; }
.mt-0 { margin-top:0!important; }
.mt-1 { margin-top:var(--space-1)!important; }
.mt-2 { margin-top:var(--space-2)!important; }
.mt-3 { margin-top:var(--space-3)!important; }
.mt-4 { margin-top:var(--space-4)!important; }
.mt-5 { margin-top:var(--space-5)!important; }
.mt-6 { margin-top:var(--space-6)!important; }
.mb-0 { margin-bottom:0!important; }
.mb-1 { margin-bottom:var(--space-1)!important; }
.mb-2 { margin-bottom:var(--space-2)!important; }
.mb-3 { margin-bottom:var(--space-3)!important; }
.mb-4 { margin-bottom:var(--space-4)!important; }
.mb-5 { margin-bottom:var(--space-5)!important; }
.mb-6 { margin-bottom:var(--space-6)!important; }
.p-0 { padding:0!important; }
.p-1 { padding:var(--space-1)!important; }
.p-2 { padding:var(--space-2)!important; }
.p-3 { padding:var(--space-3)!important; }
.p-4 { padding:var(--space-4)!important; }
.p-5 { padding:var(--space-5)!important; }
.p-6 { padding:var(--space-6)!important; }

.text-center { text-align:center!important; }
.text-right { text-align:right!important; }
.text-muted { color: var(--paper-ink-soft)!important; }
.text-accent { color: var(--paper-accent)!important; }
.d-none { display:none!important; }
.d-block { display:block!important; }
.d-inline { display:inline!important; }
.d-inline-block { display:inline-block!important; }
.w-100 { width:100%!important; }
.maxw-sm { max-width:480px; }
.maxw-md { max-width:720px; }
.maxw-lg { max-width:960px; }
.rounded { border-radius: var(--paper-radius); }
.shadow { box-shadow: var(--paper-shadow); }
.shadow-layer { box-shadow: var(--paper-shadow-layer); }

/* =========================
   NAVBAR
   ========================= */
.navbar {
  position: sticky;
  top:0;
  z-index:50;
  background: var(--paper-bg-alt);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--paper-border);
  display:flex;
  align-items:center;
  padding:.75rem 1rem;
  gap: var(--space-5);
}
.navbar[data-scroll-elevated="true"] {
  box-shadow: var(--paper-shadow-layer);
  background: linear-gradient(var(--paper-bg-alt), var(--paper-bg));
}
.navbar-brand {
  font-family: var(--paper-font-serif);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:.5px;
}
.navbar-menu {
  display:flex;
  gap: var(--space-4);
  align-items:center;
  flex-wrap:wrap;
}
.navbar a {
  padding:.35rem .65rem;
  border-radius: var(--paper-radius-sm);
  font-weight:500;
  line-height:1.2;
  transition: background var(--paper-transition), color var(--paper-transition);
}
.navbar a.is-active,
.navbar a:hover {
  background: var(--paper-highlight);
  color: var(--paper-ink);
}
.navbar-toggle {
  display:none;
  background:none;
  border:1px solid var(--paper-border);
  padding:.55rem .75rem;
  border-radius: var(--paper-radius-sm);
  cursor:pointer;
  font-size:.95rem;
  font-weight:500;
  background: var(--paper-bg);
}
.navbar-toggle:focus-visible { box-shadow: var(--paper-shadow-focus); }
@media (max-width: 820px) {
  .navbar { flex-wrap:wrap; }
  .navbar-toggle { display:inline-flex; align-items:center; gap:.35rem; }
  .navbar-menu {
    flex-direction:column;
    width:100%;
    align-items:flex-start;
    display:none;
    padding-bottom:.75rem;
  }
  .navbar-menu.open { display:flex; animation: drop .25s ease; }
  @keyframes drop {
    from { opacity:0; transform:translateY(-6px); }
    to { opacity:1; transform:translateY(0); }
  }
}

/* =========================
   HERO
   ========================= */
.hero {
  padding: clamp(3rem, 8vh, 6rem) 0;
  background: linear-gradient(135deg, var(--paper-bg-alt) 0%, var(--paper-bg) 60%, var(--paper-bg-alt) 100%);
  position:relative;
  overflow:hidden;
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    /* Subtelne linie jak na papierze */
    repeating-linear-gradient(
      90deg, 
      transparent 0 24px, 
      rgba(var(--paper-accent-rgb), 0.02) 24px 25px
    ),
    repeating-linear-gradient(
      0deg, 
      transparent 0 48px, 
      rgba(var(--paper-accent-rgb), 0.015) 48px 49px
    ),
    /* Tekstura papieru */
    radial-gradient(
      circle at 25% 25%, 
      rgba(var(--paper-accent-rgb), 0.01) 0, 
      transparent 40%
    );
  opacity:.4;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.hero-content { position:relative; max-width:760px; z-index:2; }
.hero h1 { margin-top:0; margin-bottom: var(--space-4); }
.hero .lead { font-size: var(--step-1); line-height:1.5; margin-bottom: var(--space-5); }

/* =========================
   BUTTON SYSTEM
   ========================= */
/* Bazowa klasa */
.btn {
  --_bg: var(--paper-accent);
  --_bg-hover: var(--paper-accent-hover);
  --_color: #fff;
  --_border: var(--_bg);
  --_shadow: var(--btn-shadow-lift);
  --_radius: var(--paper-radius-sm);
  --_px: 1.05rem;
  --_gap: .5rem;
  --_font-size: .95rem;
  --_height: var(--btn-height);
  --_line-height: 1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: var(--_gap);
  position:relative;
  cursor:pointer;
  font-family: var(--paper-font-sans);
  font-weight: var(--btn-font-weight);
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  min-height: var(--_height);
  padding: 0 var(--_px);
  color: var(--_color);
  background: var(--_bg);
  border:1px solid var(--_border);
  border-radius: var(--_radius);
  text-decoration:none;
  user-select:none;
  -webkit-user-select:none;
  vertical-align:middle;
  text-shadow:0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 
    var(--btn-shadow-inset), 
    var(--_shadow),
    /* Subtelny papierowy efekt */
    inset 0 0 0 1px rgba(255,255,255,0.1);
  transition: all var(--paper-transition);
}
.btn:hover:not(.is-loading):not(.is-disabled):not([disabled]) {
  background: var(--_bg-hover);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn:active:not(.is-loading):not(.is-disabled):not([disabled]) {
  transform: translateY(0);
  filter: brightness(.95);
}
.btn:focus-visible {
  outline:none;
  box-shadow: var(--paper-shadow-focus);
}
.btn[disabled],
.btn.is-disabled {
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.1);
  transform:none!important;
}

/* Warianty semantyczne (solid) */
.btn-success { --_bg: var(--paper-success); --_bg-hover: var(--paper-success-hover); }
.btn-info    { --_bg: var(--paper-info); --_bg-hover: var(--paper-info-hover); }
.btn-warning { --_bg: var(--paper-warning); --_bg-hover: var(--paper-warning-hover); }
.btn-danger  { --_bg: var(--paper-danger); --_bg-hover: var(--paper-danger-hover); }

/* Secondary - e-ink paper aesthetic */
.btn-secondary {
  --_bg: var(--paper-bg-alt);
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-ink);
  --_border: var(--paper-border);
  --_radius: var(--paper-radius-xs); /* Mniej okrągły dla e-ink */
  --_shadow: 0 1px 3px rgba(0,0,0,0.08); /* Subtelniejszy cień */
  text-shadow: none; /* Usuń text-shadow dla e-ink */
  background-image: 
    /* Papierowa tekstura */
    linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.01) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(0,0,0,0.01) 50%, transparent 51%);
  background-size: 4px 4px;
}

.btn-secondary:hover:not(.is-loading):not(.is-disabled):not([disabled]) {
  background-color: var(--_bg-hover);
  border-color: var(--paper-accent);
  box-shadow: 
    var(--btn-shadow-inset),
    0 2px 6px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transform: translateY(-1px);
  filter: none; /* Usuń brightness dla e-ink */
}

.btn-submit { 
  /* Alias dla akcentu - dziedziczy wszystkie style z .btn */
  --_bg: var(--paper-accent);
  --_bg-hover: var(--paper-accent-hover);
}

/* Outline – neutral & semantyczne */
/* Improved OUTLINE buttons – cohesive with paper ink + works standalone on <a class="btn-outline"> */
.btn-outline {
  /* Theme-able tokens */
  --_tone: var(--paper-accent);
  --_tone-hover: var(--paper-accent-hover);
  --_ink-wash: rgba(var(--paper-accent-rgb), .10);
  --_ink-wash-hover: rgba(var(--paper-accent-rgb), .18);
  --_bg: var(--paper-bg);
  --_bg-alt: var(--paper-bg-alt);
  --_radius: var(--paper-radius-sm);
  --_font-size: .95rem;
  --_px: 1.05rem;
  --_height: var(--btn-height);

  /* Base button anatomy (so .btn-outline can be used without .btn) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family: var(--paper-font-sans);
  font-weight: var(--btn-font-weight);
  font-size: var(--_font-size);
  line-height:1.2;
  min-height: var(--_height);
  padding:0 var(--_px);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  text-decoration:none;
  position:relative;
  vertical-align:middle;
  border-radius: var(--_radius);
  background: linear-gradient(135deg, var(--_bg), var(--_bg-alt) 92%);
  color: var(--_tone);
  border:1px solid var(--_tone);
  text-shadow:none;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, var(--btn-shadow-inset);
  transition:
    background var(--paper-transition),
    color var(--paper-transition),
    border-color var(--paper-transition),
    transform var(--paper-transition),
    filter var(--paper-transition);
}

.btn-outline::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 32%, var(--_ink-wash), transparent 62%),
    linear-gradient(180deg, rgba(var(--paper-accent-rgb), .06), transparent 55%);
  opacity:.0;
  mix-blend-mode:multiply;
  pointer-events:none;
  transition: opacity var(--paper-transition);
}

.btn-outline:hover:not(.is-loading):not(.is-disabled):not([disabled]) {
  background: var(--paper-highlight);
  color: var(--_tone-hover);
  transform:translateY(-1px);
}
.btn-outline:hover::after { opacity:1; }
.btn-outline:active:not(.is-loading):not(.is-disabled):not([disabled]) {
  transform:translateY(0);
}
.btn-outline:focus-visible {
  outline:none;
  box-shadow: var(--paper-shadow-focus);
}

/* Disabled */
.btn-outline[disabled],
.btn-outline.is-disabled {
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
}

/* Loading spinner recolor */
.btn-outline.is-loading .btn__spinner {
  border-color: rgba(0,0,0,.25);
  border-top-color: var(--_tone);
}

/* Semantic variants (override tone only) */
.btn-outline-success { --_tone: var(--paper-success); --_tone-hover: var(--paper-success-hover); --_ink-wash: rgba(47,109,58,.14); --_ink-wash-hover: rgba(47,109,58,.22); }
.btn-outline-info    { --_tone: var(--paper-info);    --_tone-hover: var(--paper-info-hover);    --_ink-wash: rgba(31,86,122,.14); --_ink-wash-hover: rgba(31,86,122,.22); }
.btn-outline-warning { --_tone: var(--paper-warning); --_tone-hover: var(--paper-warning-hover); --_ink-wash: rgba(183,130,0,.18); --_ink-wash-hover: rgba(183,130,0,.26); }
.btn-outline-danger  { --_tone: var(--paper-danger);  --_tone-hover: var(--paper-danger-hover);  --_ink-wash: rgba(166,56,48,.16); --_ink-wash-hover: rgba(166,56,48,.25); }

/* Ghost–lite accent (neutral ink outline) */
.btn-outline-ink {
  --_tone: var(--paper-ink-soft);
  --_tone-hover: var(--paper-ink);
  --_ink-wash: rgba(0,0,0,.06);
  --_ink-wash-hover: rgba(0,0,0,.12);
}

/* Compact sizes reuse existing size utilities if .btn-outline + .btn-sm etc are combined.
   Provide direct helpers for standalone usage */
.btn-outline.btn-sm,
.btn-outline-sm { --_font-size:.8rem; --_height:2rem; --_px:.85rem; }
.btn-outline.btn-lg,
.btn-outline-lg { --_font-size:1.05rem; --_height:3rem; --_px:1.4rem; }

/* Dark theme adjustments */
:root[data-theme="dark"] .btn-outline {
  --_ink-wash: rgba(var(--paper-accent-rgb), .24);
  --_ink-wash-hover: rgba(var(--paper-accent-rgb), .34);
  background: linear-gradient(140deg, var(--paper-bg-alt), var(--paper-bg) 90%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
:root[data-theme="dark"] .btn-outline:hover:not(.is-loading):not(.is-disabled):not([disabled]) {
  background: color-mix(in srgb, var(--paper-highlight) 60%, var(--paper-bg));
  color: var(--_tone-hover);
}
:root[data-theme="dark"] .btn-outline::after {
  mix-blend-mode:screen;
  opacity:.18;
}
:root[data-theme="dark"] .btn-outline:hover::after {
  opacity:.38;
}

/* Ensure inline anchor looks clean inside text flow */
a.btn-outline { line-height:1.2; }

/* Ghost - standalone przyciski bez solidnego tła */
.btn-ghost {
  /* Theme-able tokens */
  --_bg: transparent;
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-accent);
  --_border: transparent;
  --_radius: var(--paper-radius-sm);
  --_font-size: .95rem;
  --_px: 1.05rem;
  --_height: var(--btn-height);

  /* Base button anatomy (standalone) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family: var(--paper-font-sans);
  font-weight: var(--btn-font-weight);
  font-size: var(--_font-size);
  line-height:1.2;
  min-height: var(--_height);
  padding:0 var(--_px);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  text-decoration:none;
  position:relative;
  vertical-align:middle;
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_color);
  border:1px solid var(--_border);
  text-shadow:none;
  box-shadow:none;
  transition:
    background var(--paper-transition),
    color var(--paper-transition),
    transform var(--paper-transition);
}
.btn-ghost:hover:not(.is-loading):not(.is-disabled):not([disabled]) {
  background: var(--_bg-hover);
  transform:translateY(-1px);
}
.btn-ghost:active:not(.is-loading):not(.is-disabled):not([disabled]) {
  transform:translateY(0);
}
.btn-ghost:focus-visible {
  outline:none;
  box-shadow: var(--paper-shadow-focus);
}
.btn-ghost[disabled],
.btn-ghost.is-disabled {
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
}
.btn-ghost-success { 
  --_bg: transparent;
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-success);
  --_border: transparent;
  text-shadow:none;
  box-shadow:none;
  border:1px solid transparent;
}
.btn-ghost-info {
  --_bg: transparent;
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-info);
  --_border: transparent;
  text-shadow:none;
  box-shadow:none;
  border:1px solid transparent;
}
.btn-ghost-warning {
  --_bg: transparent;
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-warning);
  --_border: transparent;
  text-shadow:none;
  box-shadow:none;
  border:1px solid transparent;
}
.btn-ghost-danger {
  --_bg: transparent;
  --_bg-hover: var(--paper-highlight);
  --_color: var(--paper-danger);
  --_border: transparent;
  text-shadow:none;
  box-shadow:none;
  border:1px solid transparent;
}

/* Contrast – wysoki kontrast (dla A11y) */
.btn-contrast {
  --_bg: #111;
  --_bg-hover:#000;
  --_color:#fff;
  --_border:#000;
  text-shadow:none;
}

/* Rozmiary */
.btn-xs { --_font-size: .7rem; --_height: 1.75rem; --_px: .65rem; }
.btn-sm { --_font-size: .8rem; --_height: 2rem;   --_px: .85rem; }
.btn-lg { --_font-size: 1.05rem; --_height: 3rem;  --_px: 1.4rem; }

.btn-block { display:flex; width:100%; }

/* Ikonowy przycisk */
.btn-icon {
  --_px: .75rem;
  --_height: 2.3rem;
  width: var(--_height);
  padding:0;
  aspect-ratio:1/1;
  font-size:1rem;
  line-height:1;
}
.btn-icon .btn__label { display:none; }

/* Loader – struktura: <button><span class="btn__content">Tekst</span><span class="btn__spinner" aria-hidden="true"></span></button> */
.btn__content { display:inline-flex; align-items:center; gap:.45rem; }
.btn__spinner {
  --_sp-size: 16px;
  width:var(--_sp-size);
  height:var(--_sp-size);
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation: btnspin .7s linear infinite;
  display:none;
  position:relative;
}
.btn.is-loading .btn__content { opacity:0; }
.btn.is-loading .btn__spinner { display:inline-block; }
.btn-outline.is-loading .btn__spinner,
.btn-ghost.is-loading .btn__spinner {
  border-color: rgba(0,0,0,.25);
  border-top-color: var(--paper-accent);
}
@keyframes btnspin {
  to { transform: rotate(360deg); }
}

/* Prosty fallback (gdy ktoś użyje starego wzorca bez .btn__content) */
.btn.is-loading:not(:has(.btn__content)) {
  color:transparent!important;
}
.btn.is-loading:not(:has(.btn__content))::after {
  content:"";
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation: btnspin .7s linear infinite;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

/* Grupa przycisków */
.btn-group {
  display:inline-flex;
  align-items:stretch;
  position:relative;
  border-radius: var(--paper-radius-sm);
}
.btn-group .btn {
  border-radius:0;
  margin:0;
}
.btn-group .btn:first-child { border-top-left-radius: var(--paper-radius-sm); border-bottom-left-radius: var(--paper-radius-sm); }
.btn-group .btn:last-child  { border-top-right-radius: var(--paper-radius-sm); border-bottom-right-radius: var(--paper-radius-sm); }
.btn-group .btn + .btn { margin-left:-1px; }
.btn-group:focus-within { box-shadow: var(--paper-shadow-focus); border-radius: var(--paper-radius-sm); }

/* Dodatkowe style przycisków */
/* Przycisk OK z uwydatnieniem */
.btn-ok {
  --_bg: linear-gradient(135deg, var(--paper-success), var(--paper-success-hover));
  --_bg-hover: linear-gradient(135deg, var(--paper-success-hover), var(--paper-success));
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  position: relative;
}
.btn-ok::before {
  content: '✓';
  margin-right: .3rem;
  font-weight: bold;
  opacity: .8;
}
.btn-ok:hover::before {
  opacity: 1;
  transform: scale(1.1);
}

/* Przycisk Cancel/Anuluj */
.btn-cancel {
  --_bg: var(--paper-ink-soft);
  --_bg-hover: var(--paper-ink);
  --_color: var(--paper-bg);
}

/* Przycisk Premium z gradientem */
.btn-premium {
  --_bg: linear-gradient(135deg, #ffd700, #ffb347);
  --_bg-hover: linear-gradient(135deg, #ffb347, #ffd700);
  --_color: #8b4513;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
  box-shadow: var(--btn-shadow-inset), 0 4px 15px rgba(255,215,0,0.3);
}

/* Przycisk z animacją pulsowania */
.btn-pulse {
  animation: btnPulse 2s infinite;
}
@keyframes btnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Przycisk z efektem świecenia */
.btn-glow {
  box-shadow: var(--btn-shadow-inset), 0 0 20px rgba(var(--paper-accent-rgb), 0.3);
}
.btn-glow:hover {
  box-shadow: var(--btn-shadow-inset), 0 0 25px rgba(var(--paper-accent-rgb), 0.5);
}

/* Przycisk z efektem 3D */
.btn-3d {
  box-shadow: 
    var(--btn-shadow-inset),
    0 4px 0 rgba(0,0,0,0.2),
    0 6px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.btn-3d:hover {
  transform: translateY(-3px);
  box-shadow: 
    var(--btn-shadow-inset),
    0 6px 0 rgba(0,0,0,0.2),
    0 8px 16px rgba(0,0,0,0.15);
}
.btn-3d:active {
  transform: translateY(-1px);
  box-shadow: 
    var(--btn-shadow-inset),
    0 2px 0 rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.1);
}
/* =========================
   BADGE
   ========================= */
.badge {
  display:inline-block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.75px;
  padding:.25rem .5rem;
  background: var(--paper-accent);
  color:#fff;
  border-radius:999px;
  font-weight:600;
  line-height:1;
  cursor: help;
  transition: all 0.2s ease;
  position: relative;
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.badge[data-tooltip]:hover {
  z-index: 1000;
}

.badge-outline {
  background: var(--paper-highlight);
  color: var(--paper-ink);
  border: 1px solid var(--paper-border);
  cursor: help;
  transition: all 0.2s ease;
  position: relative;
}

.badge-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: var(--paper-accent);
}

.badge-outline[data-tooltip]:hover {
  z-index: 1000;
}

/* =========================
   CARD / PANEL
   ========================= */
.card {
  background: var(--paper-bg-alt);
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius);
  padding: var(--space-5);
  position:relative;
  box-shadow: var(--paper-shadow);
  display:flex;
  flex-direction:column;
  gap: var(--space-4);
  
  /* Subtelna tekstura papieru na kartach */
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(var(--paper-accent-rgb), 0.01) 0, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(var(--paper-accent-rgb), 0.008) 0, transparent 60%);
}
.card.layered {
  box-shadow: 
    var(--paper-shadow),
    0 3px 6px rgba(var(--paper-accent-rgb), 0.06),
    0 6px 12px rgba(var(--paper-accent-rgb), 0.04);
  --_stack-offset:4px;
}
.card.layered::before,
.card.layered::after {
  content:"";
  position:absolute;
  inset:0;
  background: var(--paper-bg);
  border:1px solid var(--paper-border);
  z-index:-1;
  border-radius: calc(var(--paper-radius) + 1px);
  transform: translate(var(--_stack-offset), var(--_stack-offset));
  box-shadow: var(--paper-shadow);
  opacity: .95;
}
.card.layered::after {
  transform: translate(calc(var(--_stack-offset) * 2), calc(var(--_stack-offset) * 2));
  opacity:.85;
  background: 
    var(--paper-bg),
    radial-gradient(circle at 50% 50%, rgba(var(--paper-accent-rgb), 0.005) 0, transparent 70%);
}
.panel {
  background: var(--paper-bg);
  border:1px dashed var(--paper-border);
  padding: var(--space-4);
  border-radius: var(--paper-radius-sm);
}

/* =========================
   TABS
   ========================= */
.tabs { display:flex; flex-direction:column; gap: var(--space-3); }
.tab-list {
  display:flex;
  gap:.25rem;
  flex-wrap:wrap;
  background: var(--paper-bg-alt);
  padding:.35rem;
  border-radius: var(--paper-radius);
  border:1px solid var(--paper-border);
}
.tab-list button {
  background:transparent;
  border:none;
  font:inherit;
  padding:.6rem 1rem;
  border-radius: var(--paper-radius-sm);
  cursor:pointer;
  font-weight:500;
  position:relative;
  color: var(--paper-ink-soft);
  transition: var(--paper-transition);
}
.tab-list button[aria-selected="true"] {
  background: var(--paper-highlight);
  color: var(--paper-ink);
  box-shadow:0 1px 0 rgba(255,255,255,0.35) inset;
}
.tab-panel { display:none; animation: fadeIn .4s ease; }
.tab-panel.active { display:block; }

/* =========================
   ACCORDION
   ========================= */
.accordion {
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius);
  overflow:hidden;
  background: var(--paper-bg-alt);
}
.accordion-item + .accordion-item { border-top:1px solid var(--paper-border); }
.accordion-header { margin:0; }
.accordion-button {
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:1rem 1.25rem;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.accordion-button::after {
  content:"›";
  transform:rotate(90deg);
  margin-left:auto;
  transition: var(--paper-transition);
  opacity:.6;
}
.accordion-button[aria-expanded="false"]::after { transform:rotate(0deg); }
.accordion-content { padding:0 1.25rem 1.25rem; display:none; animation: fadeIn .35s ease; }
.accordion-content.open { display:block; }

/* =========================
   MODAL
   ========================= */
.modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:4rem 1rem 2rem;
  z-index:200;
}
.modal-backdrop.open { display:flex; animation: fadeIn .3s ease; }
.modal {
  background: var(--paper-bg);
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius-lg);
  max-width:640px;
  width:100%;
  box-shadow: var(--paper-shadow-layer);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-header,
.modal-footer {
  padding:1rem 1.25rem;
  background: var(--paper-bg-alt);
  border-bottom:1px solid var(--paper-border);
}
.modal-footer {
  border-top:1px solid var(--paper-border);
  border-bottom:none;
  display:flex;
  justify-content:flex-end;
  gap:.75rem;
  background: var(--paper-bg);
}
.modal-body { padding:1.25rem 1.25rem 1.75rem; }
.modal-close {
  position:absolute;
  top:.6rem;
  right:.6rem;
  background: var(--paper-highlight);
  border:1px solid var(--paper-border);
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:1rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight:bold;
  color: var(--paper-ink-soft);
}
.modal-close:hover {
  background: var(--paper-accent);
  color:#fff;
  border-color: var(--paper-accent);
}

/* =========================
   TOOLTIP STATIC
   ========================= */
.tooltip {
  position:absolute;
  background: var(--paper-ink);
  color:#fff;
  font-size:.7rem;
  padding:.4rem .55rem;
  border-radius: var(--paper-radius-sm);
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition: var(--paper-transition);
  white-space:nowrap;
  z-index:300;
  letter-spacing:.5px;
}
[data-tooltip] { position:relative; cursor:help; }
[data-tooltip]:hover .tooltip,
[data-tooltip]:focus .tooltip {
  opacity:1;
  transform:translateY(-6px);
}

/* =========================
   ALERTS
   ========================= */
.alert {
  padding:.9rem 1.1rem;
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius-sm);
  background: var(--paper-bg-alt);
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  position:relative;
}
.alert::before {
  content:"";
  width:7px;
  border-radius:4px;
  background: var(--paper-accent);
  display:inline-block;
}
.alert-success::before { background: var(--paper-success); }
.alert-danger::before { background: var(--paper-danger); }
.alert-warning::before { background: var(--paper-warning); }
.alert-info::before { background: var(--paper-info); }

/* =========================
   TOAST NOTIFICATIONS
   ========================= */
/* Container dla toastów */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 400px;
  width: 100%;
}

/* Bazowy toast */
.toast {
  background: var(--paper-bg-alt);
  border: 1px solid var(--paper-border);
  border-radius: var(--paper-radius);
  padding: .75rem 1rem;
  position: relative;
  pointer-events: auto;
  box-shadow: 
    var(--paper-shadow),
    0 2px 8px rgba(var(--paper-accent-rgb), 0.08);
  transform: translateX(100%) scale(.95);
  opacity: 0;
  transition: all 400ms cubic-bezier(.2,0,.3,1);
  
  /* Tekstura papieru na toaście */
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(var(--paper-accent-rgb), 0.008) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--paper-accent-rgb), 0.005) 0, transparent 60%);
    
  /* Efekt zagięcia papieru */
  border-left: 4px solid var(--paper-accent);
  
  font-size: .85rem;
  line-height: 1.4;
  color: var(--paper-ink);
}

/* Toast widoczny */
.toast.show {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Toast znikający */
.toast.hide {
  transform: translateX(100%) scale(.9);
  opacity: 0;
  margin-bottom: -3rem; /* Collapse height */
}

/* Warianty semantyczne toastów */
.toast-success {
  border-left-color: var(--paper-success);
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-success-rgb), 0.02));
}

.toast-warning {
  border-left-color: var(--paper-warning);
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-warning-rgb), 0.02));
}

.toast-danger {
  border-left-color: var(--paper-danger);
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-danger-rgb), 0.02));
}

.toast-info {
  border-left-color: var(--paper-info);
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-info-rgb), 0.02));
}

/* Nagłówek toasta */
.toast-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
  font-weight: 500;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--paper-ink-soft);
}

.toast-header::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-accent);
  flex-shrink: 0;
}

.toast-success .toast-header::before { background: var(--paper-success); }
.toast-warning .toast-header::before { background: var(--paper-warning); }
.toast-danger .toast-header::before { background: var(--paper-danger); }
.toast-info .toast-header::before { background: var(--paper-info); }

/* Treść toasta */
.toast-body {
  color: var(--paper-ink);
  line-height: 1.4;
}

/* Przycisk zamykania */
.toast-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .7rem;
  color: var(--paper-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--paper-transition);
  opacity: .6;
}

.toast-close:hover {
  background: var(--paper-highlight);
  opacity: 1;
  transform: scale(1.1);
}

/* Pasek postępu dla auto-hide */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--paper-accent);
  transition: width linear;
  opacity: .3;
  border-radius: 0 0 var(--paper-radius-sm) var(--paper-radius-sm);
}

.toast-success .toast-progress { background: var(--paper-success); }
.toast-warning .toast-progress { background: var(--paper-warning); }
.toast-danger .toast-progress { background: var(--paper-danger); }
.toast-info .toast-progress { background: var(--paper-info); }

/* Responsive */
@media (max-width: 640px) {
  .toast-container {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  
  .toast {
    font-size: .8rem;
    padding: .6rem .8rem;
  }
}

/* =========================
   BREADCRUMB
   ========================= */
.breadcrumb {
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  align-items:center;
  font-size:.85rem;
}
.breadcrumb a {
  background: var(--paper-bg-alt);
  padding:.35rem .6rem;
  border-radius: var(--paper-radius-sm);
  border:1px solid var(--paper-border);
  line-height:1.1;
}
.breadcrumb span { opacity:.6; }

/* =========================
   PAGINATION
   ========================= */
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; }
.pagination a,
.pagination button {
  background: var(--paper-bg);
  border:1px solid var(--paper-border);
  padding:.5rem .75rem;
  border-radius: var(--paper-radius-sm);
  cursor:pointer;
  font:inherit;
  line-height:1;
  min-width:38px;
  display:flex;
  justify-content:center;
}
.pagination .is-active {
  background: var(--paper-accent);
  color:#fff;
  border-color: var(--paper-accent);
}

/* =========================
   TABLE
   ========================= */
.table-wrapper {
  width:100%;
  overflow-x:auto;
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius);
  background: var(--paper-bg-alt);
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  background: var(--paper-bg-alt);
}
thead { background: var(--paper-bg); }
th,td {
  padding:.75rem .9rem;
  border-bottom:1px solid var(--paper-border);
  text-align:left;
}
tbody tr:hover { background: var(--paper-highlight); }

/* =========================
   FORMS
   ========================= */
.form-group {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom: var(--space-5);
  position:relative;
}
label {
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: var(--paper-ink-soft);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  font:inherit;
  padding:.65rem .75rem;
  border:1px solid var(--paper-border);
  border-radius: var(--paper-radius-sm);
  background: var(--paper-bg);
  transition: var(--paper-transition);
  width:100%;
  resize:vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline:none;
  border-color: var(--paper-accent);
  box-shadow: var(--paper-shadow-focus);
}
input[disabled],
select[disabled],
textarea[disabled] {
  opacity:.6;
  cursor:not-allowed;
  background: var(--paper-bg-alt);
}
.input-inline { display:flex; gap:.75rem; flex-wrap:wrap; }
.help-text {
  font-size:.75rem;
  color: var(--paper-ink-soft);
}

/* Walidacja */
.field-success input,
.field-success select,
.field-success textarea { border-color: var(--paper-success); }
.field-success .help-text { color: var(--paper-success); }
.field-warning input,
.field-warning select,
.field-warning textarea { border-color: var(--paper-warning); }
.field-warning .help-text { color: var(--paper-warning); }
.field-danger input,
.field-danger select,
.field-danger textarea { border-color: var(--paper-danger); }
.field-danger .help-text { color: var(--paper-danger); }
.field-info input,
.field-info select,
.field-info textarea { border-color: var(--paper-info); }
.field-info .help-text { color: var(--paper-info); }

/* =========================
   FOOTER
   ========================= */
.footer {
  margin-top: var(--space-7);
  padding: var(--space-6) 0;
  background: var(--paper-bg-alt);
  border-top:1px solid var(--paper-border);
  font-size:.85rem;
}
.footer a { font-weight:500; }

/* =========================
   FEATURE LIST
   ========================= */
.feature-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.feature-list li {
  background: var(--paper-bg);
  border:1px solid var(--paper-border);
  padding:.55rem .75rem .55rem 2rem;
  border-radius: var(--paper-radius-sm);
  position:relative;
}
.feature-list li::before {
  content:"✦";
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color: var(--paper-accent);
  font-size:.75rem;
}

/* =========================
   DYNAMIC TOOLTIP (JS)
   ========================= */
.tooltip-float {
  position:fixed;
  pointer-events:none;
  background: var(--paper-ink);
  color:#fff;
  font-size:.65rem;
  padding:.4rem .55rem;
  border-radius: var(--paper-radius-sm);
  z-index:400;
  transform:translate(-50%, -110%);
  white-space:nowrap;
  opacity:0;
  transition: opacity .15s ease;
  letter-spacing:.5px;
}

/* =========================
   PAPER EDGE
   ========================= */
.paper-edge {
  position:relative;
  background: var(--paper-bg);
  border:1px solid var(--paper-border);
  box-shadow: var(--paper-shadow);
  padding: var(--space-5);
  border-radius: var(--paper-radius);
}
.paper-edge::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.08) 0%, transparent 40%),
    linear-gradient(-45deg, rgba(0,0,0,0.03) 0%, transparent 70%);
  mix-blend-mode:multiply;
  opacity:.35;
  pointer-events:none;
  border-radius:inherit;
}

/* =========================
   SCROLL PROGRESS
   ========================= */
.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  height:4px;
  width:0;
  background: linear-gradient(90deg, var(--paper-accent), var(--paper-info));
  z-index:300;
  transition: width .12s linear;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.15);
}
.scroll-progress[data-complete="true"] {
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}

/* =========================
   BACK TO TOP
   ========================= */
.back-to-top {
  position:fixed;
  bottom:clamp(1rem,2vw,1.75rem);
  right:clamp(1rem,2vw,1.75rem);
  background: var(--paper-accent);
  color:#fff;
  border:none;
  padding:.75rem .9rem;
  border-radius:50%;
  box-shadow: var(--paper-shadow-layer);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition: var(--paper-transition);
  font-size:1rem;
  line-height:1;
}
.back-to-top:hover { background: var(--paper-accent-hover); }
.back-to-top.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* =========================
   REVEAL ANIMATIONS
   ========================= */
[data-reveal] {
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.25,.65,.25,1);
  will-change:opacity, transform;
}
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal="fade-in"] { transform:none; }
[data-reveal="zoom-in"] { transform: scale(.95); }
[data-reveal="zoom-in"].is-visible { transform: scale(1); }
[data-reveal="tilt"] { transform: perspective(600px) rotateX(8deg) translateY(12px); }
[data-reveal="tilt"].is-visible { transform: perspective(600px) rotateX(0deg) translateY(0); }
/* Fallback gdy JS nie działa */
.no-js [data-reveal] { opacity:1!important; transform:none!important; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; will-change:auto !important; }
}

/* =========================
   THEME TOGGLE
   ========================= */
.theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  font-size:.85rem;
  background: var(--paper-bg-alt);
  padding:.45rem .75rem;
  border-radius: var(--paper-radius-sm);
  border:1px solid var(--paper-border);
}

/* =========================
   ANIMACJE / PRINT / RESPONSIVE
   ========================= */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}

@media print {
  .navbar, .hero, .modal-backdrop, .theme-toggle, .scroll-progress, .back-to-top { display:none!important; }
  body { background:#fff; }
  .card, .panel { box-shadow:none; }
}

@media (max-width: 640px) {
  .hide-sm { display:none!important; }
  h1 { font-size: var(--step-4); }
  .hero { padding:3rem 0 3.5rem; }
}

/* =========================
   SKELETON LOADING (E-BOOK STYLE)
   ========================= */
.skeleton {
  background: linear-gradient(90deg, var(--paper-bg-alt) 25%, var(--paper-highlight) 50%, var(--paper-bg-alt) 75%);
  background-size: 200% 100%;
  animation: paperShimmer 1.8s ease-in-out infinite;
  border-radius: var(--paper-radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(var(--paper-accent-rgb), 0.008) 0, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(var(--paper-accent-rgb), 0.005) 0, transparent 60%);
}

@keyframes paperShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
  width: 60%;
  margin-bottom: 0;
}

.skeleton-title {
  height: 1.5rem;
  margin-bottom: 1rem;
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton-card {
  padding: var(--space-5);
  border: 1px solid var(--paper-border);
  border-radius: var(--paper-radius);
}

/* =========================
   OFFCANVAS (PAPER SLIDE)
   ========================= */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--paper-accent-rgb), 0.15);
  backdrop-filter: blur(3px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms cubic-bezier(.2,0,.3,1);
}

.offcanvas-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(400px, 80vw);
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  box-shadow: 
    var(--paper-shadow-layer),
    inset 4px 0 0 rgba(var(--paper-accent-rgb), 0.1);
  z-index: 101;
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(.2,0,.3,1);
  display: flex;
  flex-direction: column;
  
  /* Tekstura jak strona księgi */
  background-image: 
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(var(--paper-accent-rgb), 0.01) 24px 25px),
    radial-gradient(circle at 20% 30%, rgba(var(--paper-accent-rgb), 0.005) 0, transparent 60%);
}

.offcanvas.show {
  transform: translateX(0);
}

.offcanvas-end {
  right: 0;
  transform: translateX(100%);
  box-shadow: 
    var(--paper-shadow-layer),
    inset -4px 0 0 rgba(var(--paper-accent-rgb), 0.1);
}

.offcanvas-end.show {
  transform: translateX(0);
}

.offcanvas-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--paper-border);
  background: var(--paper-bg-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offcanvas-title {
  margin: 0;
  font-size: var(--step-1);
  font-family: var(--paper-font-serif);
}

.offcanvas-body {
  padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
}

.offcanvas-close {
  background: none;
  border: 1px solid var(--paper-border);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--paper-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--paper-transition);
}

.offcanvas-close:hover {
  background: var(--paper-accent);
  color: var(--paper-bg);
  border-color: var(--paper-accent);
}

/* =========================
   DROPDOWN MENU (PAPER CASCADE)
   ========================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: var(--paper-radius);
  box-shadow: 
    var(--paper-shadow-layer),
    0 4px 20px rgba(0,0,0,0.15),
    0 0 0 1px rgba(var(--paper-accent-rgb), 0.05);
  z-index: 9999; /* maksymalny z-index ponad wszystkimi kartami */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.95);
  transition: all 200ms cubic-bezier(.2,0,.3,1);
  
  /* Papierowa tekstura */
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(var(--paper-accent-rgb), 0.005) 0, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(var(--paper-accent-rgb), 0.003) 0, transparent 60%);
}

.dropdown.show .dropdown-menu,
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Wariant otwierany w górę (auto flip) */
.dropdown[data-direction="up"] .dropdown-menu {
  top: auto;
  bottom: 100%;
  transform: translateY(8px) scale(.95);
  transform-origin: bottom left;
}
.dropdown[data-direction="up"].show .dropdown-menu,
.dropdown[data-direction="up"]:hover .dropdown-menu {
  transform: translateY(0) scale(1);
}

/* Gdy dostosowujemy pozycję do prawej krawędzi */
.dropdown-menu[data-align="right"] {
  left: auto !important;
  right: 0 !important;
  transform-origin: top right;
}
.dropdown[data-direction="up"] .dropdown-menu[data-align="right"] {
  transform-origin: bottom right;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .6rem 1rem;
  color: var(--paper-ink);
  text-decoration: none;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--paper-transition);
  border-bottom: 1px solid transparent;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--paper-highlight);
  color: var(--paper-ink);
  border-bottom-color: rgba(var(--paper-accent-rgb), 0.1);
}

.dropdown-item:first-child {
  border-radius: var(--paper-radius) var(--paper-radius) 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 var(--paper-radius) var(--paper-radius);
}

.dropdown-divider {
  height: 1px;
  background: var(--paper-border);
  margin: .25rem 0;
  opacity: .6;
}

/* =========================
   CHIP/TAGS (PAPER LABELS)
   ========================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  background: var(--paper-bg-alt);
  border: 1px solid var(--paper-border);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--paper-ink);
  transition: all var(--paper-transition);
  position: relative;
  
  /* Subtelny papierowy efekt */
  box-shadow: 
    0 1px 2px rgba(var(--paper-accent-rgb), 0.05),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.chip:hover {
  background: var(--paper-highlight);
  transform: translateY(-1px);
  box-shadow: 
    0 2px 4px rgba(var(--paper-accent-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.chip-closable {
  padding-right: .35rem;
}

.chip-close {
  background: none;
  border: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: .6rem;
  color: var(--paper-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--paper-transition);
  opacity: .7;
}

.chip-close:hover {
  background: rgba(var(--paper-danger-rgb), 0.1);
  color: var(--paper-danger);
  opacity: 1;
  transform: scale(1.1);
}

.chip-success {
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-success-rgb), 0.08));
  border-color: rgba(var(--paper-success-rgb), 0.2);
  color: var(--paper-success);
}

.chip-warning {
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-warning-rgb), 0.08));
  border-color: rgba(var(--paper-warning-rgb), 0.2);
  color: var(--paper-warning);
}

.chip-danger {
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-danger-rgb), 0.08));
  border-color: rgba(var(--paper-danger-rgb), 0.2);
  color: var(--paper-danger);
}

.chip-info {
  background: linear-gradient(135deg, var(--paper-bg-alt), rgba(var(--paper-info-rgb), 0.08));
  border-color: rgba(var(--paper-info-rgb), 0.2);
  color: var(--paper-info);
}

/* =========================
   PROGRESS BAR (E-READER STYLE)
   ========================= */
.progress {
  width: 100%;
  height: 8px;
  background: var(--paper-bg-alt);
  border: 1px solid var(--paper-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(var(--paper-accent-rgb), 0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--paper-accent), var(--paper-accent-hover));
  border-radius: 999px;
  transition: width 300ms ease;
  position: relative;
  
  /* Papierowy efekt świecenia */
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 1px 3px rgba(var(--paper-accent-rgb), 0.3);
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
  border-radius: 999px 999px 0 0;
}

.progress-striped .progress-bar {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(255,255,255,0.1) 6px,
    rgba(255,255,255,0.1) 12px
  );
  background-size: 12px 12px;
}

.progress-animated .progress-bar {
  animation: paperProgress 1s linear infinite;
}

@keyframes paperProgress {
  0% { background-position: 0 0; }
  100% { background-position: 12px 0; }
}

.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

/* Warianty kolorystyczne */
.progress-success .progress-bar {
  background: linear-gradient(90deg, var(--paper-success), var(--paper-success-hover));
}

.progress-warning .progress-bar {
  background: linear-gradient(90deg, var(--paper-warning), var(--paper-warning-hover));
}

.progress-danger .progress-bar {
  background: linear-gradient(90deg, var(--paper-danger), var(--paper-danger-hover));
}

.progress-info .progress-bar {
  background: linear-gradient(90deg, var(--paper-info), var(--paper-info-hover));
}

/* Cienkie progress bary */
.progress-container.progress-thin {
  height: 4px;
}

.progress-container.progress-xs {
  height: 2px;
}

.progress-container.progress-lg {
  height: 12px;
}

/* Progress container style */
.progress-container {
  width: 100%;
  height: 8px;
  background: var(--paper-bg-alt);
  border: 1px solid var(--paper-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(var(--paper-accent-rgb), 0.1);
}

/* ============ DODATKOWE KOMPONENTY E-INK ============ */

/* TOOLTIP SYSTEM */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.3;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 250px;
  z-index: 10000;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.3), 
    0 0 0 1px rgba(255,255,255,0.1);
  opacity: 0;
  pointer-events: none;
  animation: tooltipFadeIn 0.25s ease-out forwards;
  backdrop-filter: blur(4px);
}

/* Długie tooltipsy z zawijaniem tekstu */
[data-tooltip*=" "][data-tooltip*=" "][data-tooltip*=" "]::before {
  white-space: normal;
  max-width: 200px;
  text-align: center;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-1px);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  z-index: 10001;
  opacity: 0;
  animation: tooltipFadeIn 0.25s ease-out forwards;
}

/* Responsywne pozycjonowanie na małych ekranach */
@media (max-width: 480px) {
  [data-tooltip]:hover::before,
  [data-tooltip]:focus::before {
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
    text-align: center;
  }
  
  [data-tooltip]:hover::after,
  [data-tooltip]:focus::after {
    left: 50%;
    transform: translateX(-50%) translateY(-1px);
  }
}

/* Ciemny tooltip dla jasnego motywu */
:root[data-theme="light"] [data-tooltip]:hover::after,
:root[data-theme="light"] [data-tooltip]:focus::after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* Jasny tooltip dla ciemnego motywu */
:root[data-theme="dark"] [data-tooltip]:hover::before,
:root[data-theme="dark"] [data-tooltip]:focus::before {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.4), 
    0 0 0 1px rgba(0,0,0,0.1);
}

:root[data-theme="dark"] [data-tooltip]:hover::after,
:root[data-theme="dark"] [data-tooltip]:focus::after {
  border-top-color: rgba(255, 255, 255, 0.95);
}

@keyframes tooltipFadeIn {
  from { 
    opacity: 0; 
    transform: translateX(-50%) translateY(-12px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(-50%) translateY(-8px); 
  }
}

/* ALERT/BANNER COMPONENTS */
.alert {
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  background: var(--paper-bg);
  position: relative;
  font-size: 0.9rem;
}

.alert-info {
  border-color: var(--paper-accent);
  background: var(--paper-accent-bg);
}

.alert-success {
  border-color: var(--paper-success);
  background: var(--paper-success-bg);
}

.alert-warning {
  border-color: var(--paper-warning);
  background: var(--paper-warning-bg);
}

.alert-error {
  border-color: var(--paper-error);
  background: var(--paper-error-bg);
}

.alert-dismissible {
  padding-right: 3rem;
}

.alert-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.alert-close:hover {
  opacity: 1;
}

/* PAGINATION */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  justify-content: center;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  color: var(--paper-text);
  text-decoration: none;
  transition: var(--paper-transition);
  border-radius: 4px;
  font-size: 0.9rem;
}

.pagination-item:hover {
  background: var(--paper-hover-bg);
  border-color: var(--paper-accent);
  text-decoration: none;
}

.pagination-item.active {
  background: var(--paper-accent);
  color: var(--paper-white);
  border-color: var(--paper-accent);
}

.pagination-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* SEARCH/FILTER COMPONENTS */
.search-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid var(--paper-border);
  background: var(--paper-bg);
  border-radius: 4px;
  font-size: 1rem;
  transition: var(--paper-transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--paper-accent);
  box-shadow: 0 0 0 2px var(--paper-accent-shadow);
}

.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--paper-text-muted);
  pointer-events: none;
}

.filter-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.filter-btn {
  padding: 0.5rem 1rem;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  color: var(--paper-text);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--paper-transition);
  font-size: 0.875rem;
}

.filter-btn:hover {
  background: var(--paper-hover-bg);
  border-color: var(--paper-accent);
}

.filter-btn.active {
  background: var(--paper-accent);
  color: var(--paper-white);
  border-color: var(--paper-accent);
}

/* EMPTY STATES */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--paper-text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--paper-text);
}

.empty-state p {
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* LOADING STATES */
.loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.loading-dots span {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--paper-accent);
  border-radius: 50%;
  animation: loadingBounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--paper-border);
  border-radius: 50%;
  border-top-color: var(--paper-accent);
  animation: spin 1s ease-in-out infinite;
}

.loading-pulse {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--paper-accent);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* IMAGE GALLERY */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--paper-border);
  background: var(--paper-bg);
  transition: var(--paper-transition);
  cursor: pointer;
}

.gallery-item:hover {
  box-shadow: 0 4px 12px var(--paper-shadow-color);
  transform: translateY(-2px);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.gallery-caption {
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--paper-text-muted);
}

/* RESPONSIVE IMAGES */
.img-responsive {
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 4px;
}

.img-circle {
  border-radius: 50%;
}

.img-paper {
  border: 1px solid var(--paper-border);
  padding: 4px;
  background: var(--paper-bg);
  box-shadow: 0 2px 4px var(--paper-shadow-color);
}

/* Responsywność dodatkowych komponentów */
@media (max-width: 768px) {
  .pagination { flex-wrap: wrap; }
  .filter-group { justify-content: center; }
  .gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .gallery-item img { height: 150px; }
}