/* ═══════════════════════════════════════════════════════════════════════════
   ZXSTUDIO E-BOOK THEMES
   ─────────────────────────────────────────────────────────────────────────
   Jak dodać nowy motyw:
   1. Skopiuj dowolny blok [data-theme="..."] poniżej
   2. Zmień nazwę atrybutu, np. [data-theme="ocean"]
   3. Nadpisz tokeny CSS wewnątrz :root lub bezpośrednio przez selektory
   4. Dodaj nowy motyw do listy w pliku ebook.html (stała THEMES w <script>)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   WSPÓLNE WŁAŚCIWOŚCI (niezależne od motywu)
   ─────────────────────────────────────────────────────────────────────────── */

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

:root {
  --page-w: 794px;
  --page-h: 1123px;
  --font-mono:   'Share Tech Mono', monospace;
  --font-head:   'Rajdhani', sans-serif;
  --font-deco:   'Cinzel Decorative', serif;
  --font-body:   'Exo 2', sans-serif;
}

body {
  font-family: var(--font-body);
  min-height: 100vh;
  transition: background 0.4s;
}

/* ── shell ── */
.screen-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 28px 24px 72px;
}

/* ── top bar ── */
.topbar {
  width: var(--page-w);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.topbar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.page-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* ── theme switcher ── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-switcher label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
}
.theme-select {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 130px;
  transition: all 0.2s;
}

/* ── toc button ── */
.toc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: all 0.2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.toc-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── toc overlay ── */
.toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  backdrop-filter: blur(3px);
}
.toc-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.toc-panel {
  width: 340px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
}
.toc-header h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.toc-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px;
  transition: color 0.15s;
}
.toc-scan { height: 1px; }
.toc-list { flex: 1; overflow-y: auto; padding: 12px 0; }
.toc-list::-webkit-scrollbar { width: 3px; }

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 24px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.toc-item.level-2 { padding-left: 40px; }
.toc-item.level-3 { padding-left: 56px; }

.toc-num  { font-family: var(--font-mono); font-size: 9px; min-width: 28px; white-space: nowrap; }
.toc-label { font-family: var(--font-body); font-size: 12.5px; font-weight: 300; line-height: 1.4; }
.toc-pg   { margin-left: auto; font-family: var(--font-mono); font-size: 9px; white-space: nowrap; }

/* ── nav bar ── */
.nav-bar {
  width: var(--page-w);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 12px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: all 0.2s;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.nav-btn:disabled { opacity: 0.2; cursor: default; }
.nav-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.dots { display: flex; gap: 10px; align-items: center; }
.dot {
  width: 9px; height: 9px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  background: transparent;
}

/* ── page ── */
.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  display: none;
  flex-direction: column;
  align-items: center;
  transition: background 0.4s;
}
.page.active { display: flex; }

/* grid overlay */
.page::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}
/* top radial / wash */
.page::after {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
}

/* scanline */
.scanline {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  z-index: 1; pointer-events: none;
}

/* edge lines */
.edge-line {
  position: absolute; left: 90px; right: 90px; height: 1px; z-index: 2;
}
.edge-line.top    { top: 18px; }
.edge-line.bottom { bottom: 18px; }
.edge-line::before { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(3px); opacity: 0.5; }

/* corners */
.corner { position: absolute; width: 72px; height: 72px; z-index: 3; }
.corner svg { width: 100%; height: 100%; }
.corner.tl { top: 18px;    left: 18px; }
.corner.tr { top: 18px;    right: 18px;  transform: scaleX(-1); }
.corner.bl { bottom: 18px; left: 18px;   transform: scaleY(-1); }
.corner.br { bottom: 18px; right: 18px;  transform: scale(-1,-1); }

/* side bars */
.side-bar { position: absolute; z-index: 2; }
.side-bar.left  { left: 18px;  top: 110px; bottom: 110px; width: 3px; }
.side-bar.right { right: 18px; top: 110px; bottom: 110px; width: 3px; }
.bar-line { width: 100%; height: 100%; position: relative; }
.bar-line::before { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(4px); opacity: 0.6; }

/* ticks */
.ticks { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.ticks.left  { left: 26px;  top: 160px; }
.ticks.right { right: 26px; top: 160px; }
.tick { display: flex; align-items: center; gap: 4px; }
.ticks.right .tick { flex-direction: row-reverse; }
.tick-line       { height: 1px; }
.tick-line.long  { width: 18px; }
.tick-line.short { width: 8px; }
.tick-dot { width: 3px; height: 3px; border-radius: 50%; }

/* hex side */
.hex-col { position: absolute; z-index: 1; }
.hex-col.left  { left: 42px;  top: 50%; transform: translateY(-50%); }
.hex-col.right { right: 42px; top: 50%; transform: translateY(-50%); }

/* content */
.content {
  position: relative; z-index: 4; width: 100%; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 80px;
}

/* header */
.header { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 36px; }
.logo-wrap { width: 86px; height: 86px; position: relative; }
.logo-wrap img { width: 100%; height: 100%; }
.header-line { width: 180px; height: 1px; margin: 14px 0 10px; position: relative; }
.header-line::after { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(3px); }
.company-name { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; }

/* title area */
.title-area { margin-top: 44px; text-align: center; width: 100%; }
.ebook-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px; opacity: 0.7; margin-bottom: 18px; text-transform: uppercase; }
.main-title { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1.1; letter-spacing: 1px; }
.main-title span { /* accent color set per theme */ }
.subtitle { font-family: var(--font-body); font-weight: 200; font-size: 16px; letter-spacing: 2px; margin-top: 14px; font-style: italic; }

/* divider */
.divider { display: flex; align-items: center; gap: 16px; margin: 32px 0; width: 100%; max-width: 480px; }
.div-line   { flex: 1; height: 1px; }
.div-line.r { /* reversed gradient – set per theme */ }
.div-hex    { font-size: 14px; opacity: 0.8; }

/* body area */
.body-area { width: 100%; max-width: 580px; flex: 1; }
.chapter-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; }
.chapter-title { font-family: var(--font-head); font-weight: 600; font-size: 24px; border-left: 3px solid; padding-left: 14px; margin-bottom: 16px; letter-spacing: 0.5px; }
.chapter-title.h2 { font-size: 19px; margin-top: 22px; }
.body-text { font-family: var(--font-body); font-weight: 300; font-size: 13px; line-height: 1.9; letter-spacing: 0.3px; margin-bottom: 14px; }

.info-box { margin-top: 24px; border: 1px solid; border-left-width: 3px; padding: 20px 24px; position: relative; }
.info-box::before {
  content: attr(data-label);
  position: absolute; top: -8px; left: 20px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  padding: 0 8px; text-transform: uppercase;
}
.info-box p { font-family: var(--font-mono); font-size: 11px; line-height: 1.8; opacity: 0.9; }

/* page number */
.page-num { position: absolute; bottom: 58px; right: 80px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; z-index: 5; }

/* footer */
.footer { position: absolute; bottom: 30px; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-line { width: 320px; height: 1px; position: relative; }
.footer-line::after { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(3px); }
.footer-text { font-family: var(--font-deco); font-size: 12px; font-weight: 400; letter-spacing: 3px; }
.footer-text .exclamation { font-style: normal; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW: dark  (domyślny)
   Cyjanowy HUD na głębokiej czerni – styl interfejsu technicznego
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --c-accent:      #00c8ff;
  --c-accent2:     #0066ff;
  --c-accent3:     #00ff99;
  --c-gold:        #d4a843;
  --c-text:        #cce8f0;
  --c-text-body:   rgba(180,220,235,0.78);
  --c-text-dim:    #4a7a94;
  --c-frame:       rgba(0,200,255,0.35);
  --c-frame-hi:    rgba(0,200,255,0.7);
  --c-grid:        rgba(0,200,255,0.04);
  --c-bg:          #04080f;
  --c-bg-page:     linear-gradient(160deg, #06111f 0%, #030b15 50%, #060f1e 100%);
  --c-bg-panel:    #030b15;
  --c-shadow:      0 0 0 1px rgba(0,200,255,0.06), 0 8px 60px rgba(0,10,30,0.8), 0 0 80px rgba(0,100,200,0.06);
  --c-svg-stroke:  #00c8ff;
  --c-svg-fill:    rgba(0,200,255,0.06);
  --c-hex-opacity: 0.07;
}

[data-theme="dark"] body { background: #010509; color: var(--c-text); }

[data-theme="dark"] .topbar-title { color: var(--c-accent); opacity: 0.6; }
[data-theme="dark"] .page-counter  { color: var(--c-text-dim); }

[data-theme="dark"] .theme-select {
  color: var(--c-accent);
  border-color: var(--c-frame);
  background: rgba(0,200,255,0.03);
}
[data-theme="dark"] .theme-select option { background: #06111f; color: var(--c-text); }
[data-theme="dark"] .theme-switcher label { color: var(--c-text-dim); }

[data-theme="dark"] .toc-btn { color: var(--c-accent); border-color: var(--c-frame); }
[data-theme="dark"] .toc-btn:hover { background: rgba(0,200,255,0.08); border-color: var(--c-accent); box-shadow: 0 0 16px rgba(0,200,255,0.2); }

[data-theme="dark"] .toc-overlay { background: rgba(0,4,12,0.75); }
[data-theme="dark"] .toc-panel { background: linear-gradient(160deg,#06111f,#030b15); border-left: 1px solid var(--c-frame); box-shadow: -8px 0 40px rgba(0,200,255,0.08); }
[data-theme="dark"] .toc-header { border-bottom: 1px solid rgba(0,200,255,0.12); }
[data-theme="dark"] .toc-header h2 { color: var(--c-accent); opacity: 0.8; }
[data-theme="dark"] .toc-close { color: var(--c-text-dim); }
[data-theme="dark"] .toc-close:hover { color: var(--c-accent); }
[data-theme="dark"] .toc-list::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.2); }
[data-theme="dark"] .toc-item:hover { background: rgba(0,200,255,0.05); border-left-color: rgba(0,200,255,0.3); }
[data-theme="dark"] .toc-item.active { background: rgba(0,200,255,0.07); border-left-color: var(--c-accent); }
[data-theme="dark"] .toc-num  { color: var(--c-text-dim); }
[data-theme="dark"] .toc-label { color: var(--c-text-body); }
[data-theme="dark"] .toc-item.active .toc-label { color: var(--c-text); font-weight: 400; }
[data-theme="dark"] .toc-pg   { color: var(--c-text-dim); }
[data-theme="dark"] .toc-scan { background: linear-gradient(to right, transparent, var(--c-accent), transparent); opacity: 0.15; }

[data-theme="dark"] .nav-btn { color: var(--c-accent); border-color: rgba(0,200,255,0.2); }
[data-theme="dark"] .nav-btn:hover:not(:disabled) { background: rgba(0,200,255,0.08); border-color: var(--c-accent); box-shadow: 0 0 20px rgba(0,200,255,0.15); }
[data-theme="dark"] .dot { border-color: rgba(0,200,255,0.4); }
[data-theme="dark"] .dot.active { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 8px rgba(0,200,255,0.7); }
[data-theme="dark"] .dot:hover:not(.active) { background: rgba(0,200,255,0.2); border-color: rgba(0,200,255,0.7); }

[data-theme="dark"] .page { background: var(--c-bg-page); box-shadow: var(--c-shadow); }
[data-theme="dark"] .page::after { top:20%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(ellipse,rgba(0,100,200,0.1) 0%,transparent 70%); }
[data-theme="dark"] .grid-var { --grid: var(--c-grid); }

[data-theme="dark"] .scanline { background: linear-gradient(to right,transparent,rgba(0,200,255,0.12),transparent); animation: scan 7s linear infinite; }
@keyframes scan { 0%{top:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100%;opacity:0} }

[data-theme="dark"] .edge-line { background: linear-gradient(to right,transparent,var(--c-frame) 15%,var(--c-frame-hi) 50%,var(--c-frame) 85%,transparent); }
[data-theme="dark"] .corner svg path[stroke] { stroke: var(--c-svg-stroke); }
[data-theme="dark"] .corner svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }
[data-theme="dark"] .corner svg circle { fill: var(--c-svg-stroke); }
[data-theme="dark"] .side-bar .bar-line { background: linear-gradient(to bottom,transparent,var(--c-accent) 15%,var(--c-accent) 85%,transparent); opacity: 0.5; }
[data-theme="dark"] .tick-line { background: var(--c-accent); }
[data-theme="dark"] .tick-line.long  { opacity: 0.4; }
[data-theme="dark"] .tick-line.short { opacity: 0.2; }
[data-theme="dark"] .tick-dot { background: var(--c-accent); opacity: 0.6; }
[data-theme="dark"] .hex-col { opacity: var(--c-hex-opacity); }
[data-theme="dark"] .hex-col svg path   { stroke: var(--c-svg-stroke); }
[data-theme="dark"] .hex-col svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }

[data-theme="dark"] .logo-wrap { filter: drop-shadow(0 0 14px rgba(0,200,255,0.7)) drop-shadow(0 0 30px rgba(0,100,255,0.4)); }
[data-theme="dark"] .logo-wrap::after { content:'';position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,200,255,0.15) 0%,transparent 65%);animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.6}50%{opacity:1} }
[data-theme="dark"] .header-line { background: linear-gradient(to right,transparent,var(--c-accent),transparent); }
[data-theme="dark"] .company-name { color: var(--c-accent); opacity: 0.8; }

[data-theme="dark"] .ebook-label { color: var(--c-accent3); }
[data-theme="dark"] .main-title { color: #ffffff; text-shadow: 0 0 40px rgba(0,200,255,0.3),0 2px 4px rgba(0,0,0,0.8); }
[data-theme="dark"] .main-title span { color: var(--c-accent); text-shadow: 0 0 20px rgba(0,200,255,0.8),0 0 40px rgba(0,200,255,0.4); }
[data-theme="dark"] .subtitle { color: var(--c-text-dim); }

[data-theme="dark"] .div-line   { background: linear-gradient(to right, transparent, var(--c-frame)); }
[data-theme="dark"] .div-line.r { background: linear-gradient(to left,  transparent, var(--c-frame)); }
[data-theme="dark"] .div-hex    { color: var(--c-accent); }

[data-theme="dark"] .chapter-tag   { color: var(--c-accent2); opacity: 0.8; }
[data-theme="dark"] .chapter-title { color: var(--c-text); border-left-color: var(--c-accent); }
[data-theme="dark"] .chapter-title.h2 { border-left-color: rgba(0,200,255,0.4); }
[data-theme="dark"] .body-text     { color: var(--c-text-body); }
[data-theme="dark"] .info-box      { border-color: rgba(0,200,255,0.18); background: rgba(0,200,255,0.03); }
[data-theme="dark"] .info-box::before { color: var(--c-accent); background: var(--c-bg-panel); }
[data-theme="dark"] .info-box p    { color: var(--c-accent); }

[data-theme="dark"] .page-num { color: var(--c-text-dim); }

[data-theme="dark"] .footer-line { background: linear-gradient(to right,transparent,var(--c-frame) 30%,var(--c-frame) 70%,transparent); }
[data-theme="dark"] .footer-text { color: var(--c-gold); text-shadow: 0 0 12px rgba(212,168,67,0.6),0 0 24px rgba(212,168,67,0.3); }
[data-theme="dark"] .footer-text .exclamation { color: var(--c-accent); text-shadow: 0 0 10px rgba(0,200,255,0.9),0 0 20px rgba(0,200,255,0.5); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW: light
   Stalowy błękit na bieli – czytelny, gotowy do druku
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --c-accent:      #1a5fa8;
  --c-accent2:     #0e3f7a;
  --c-accent-mid:  #5a96d4;
  --c-accent-lt:   #c8ddf5;
  --c-gold:        #8a6510;
  --c-text:        #0e1e2e;
  --c-text-body:   #2a3d52;
  --c-text-dim:    #7a95aa;
  --c-frame:       rgba(26,95,168,0.25);
  --c-frame-hi:    rgba(26,95,168,0.6);
  --c-grid:        rgba(26,95,168,0.045);
  --c-bg:          #d0d8e4;
  --c-bg-page:     #f7f9fc;
  --c-bg-panel:    #eef3f9;
  --c-bg-top:      linear-gradient(170deg,#ddeaf8 0%,#eef4fb 60%,transparent 100%);
  --c-shadow:      0 4px 40px rgba(14,62,122,0.14), 0 1px 6px rgba(14,62,122,0.08);
  --c-svg-stroke:  #1a5fa8;
  --c-svg-fill:    rgba(26,95,168,0.06);
  --c-hex-opacity: 0.09;
}

[data-theme="light"] body { background: var(--c-bg); color: var(--c-text); }

[data-theme="light"] .topbar-title { color: var(--c-accent2); opacity: 0.75; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; }
[data-theme="light"] .page-counter  { color: var(--c-text-dim); }

[data-theme="light"] .theme-select { color: var(--c-accent); border-color: var(--c-accent-lt); background: #fff; }
[data-theme="light"] .theme-select option { background: #fff; color: var(--c-text); }
[data-theme="light"] .theme-switcher label { color: var(--c-text-dim); }

[data-theme="light"] .toc-btn { color: var(--c-accent); border-color: var(--c-accent-lt); }
[data-theme="light"] .toc-btn:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

[data-theme="light"] .toc-overlay { background: rgba(10,20,40,0.45); }
[data-theme="light"] .toc-panel { background: #fff; border-left: 3px solid var(--c-accent); }
[data-theme="light"] .toc-header { border-bottom: 1px solid var(--c-accent-lt); background: var(--c-bg-panel); }
[data-theme="light"] .toc-header h2 { color: var(--c-accent2); }
[data-theme="light"] .toc-close { color: var(--c-text-dim); }
[data-theme="light"] .toc-close:hover { color: var(--c-accent); }
[data-theme="light"] .toc-list::-webkit-scrollbar-thumb { background: var(--c-accent-lt); }
[data-theme="light"] .toc-item:hover { background: var(--c-bg-panel); border-left-color: var(--c-accent-lt); }
[data-theme="light"] .toc-item.active { background: #e8f1fb; border-left-color: var(--c-accent); }
[data-theme="light"] .toc-num  { color: var(--c-accent-mid); }
[data-theme="light"] .toc-label { color: var(--c-text-body); }
[data-theme="light"] .toc-item.active .toc-label { color: var(--c-accent2); font-weight: 400; }
[data-theme="light"] .toc-pg   { color: var(--c-text-dim); }
[data-theme="light"] .toc-scan { display: none; }

[data-theme="light"] .nav-btn { color: var(--c-accent); border-color: var(--c-accent-lt); }
[data-theme="light"] .nav-btn:hover:not(:disabled) { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
[data-theme="light"] .dot { border-color: var(--c-accent-mid); }
[data-theme="light"] .dot.active { background: var(--c-accent); border-color: var(--c-accent); }
[data-theme="light"] .dot:hover:not(.active) { background: var(--c-accent-lt); }

[data-theme="light"] .page { background: var(--c-bg-page); box-shadow: var(--c-shadow); }
[data-theme="light"] .page::after { top:0;left:0;right:0;height:140px;background:var(--c-bg-top); }
[data-theme="light"] .scanline { display: none; }

[data-theme="light"] .edge-line { background: linear-gradient(to right,transparent,var(--c-frame) 15%,var(--c-frame-hi) 50%,var(--c-frame) 85%,transparent); }
[data-theme="light"] .corner svg path[stroke] { stroke: var(--c-svg-stroke); }
[data-theme="light"] .corner svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }
[data-theme="light"] .corner svg circle { fill: var(--c-svg-stroke); }
[data-theme="light"] .side-bar .bar-line { background: linear-gradient(to bottom,transparent,var(--c-accent) 12%,var(--c-accent) 88%,transparent); opacity: 0.28; }
[data-theme="light"] .bar-line::before { display: none; }
[data-theme="light"] .tick-line { background: var(--c-accent); }
[data-theme="light"] .tick-line.long  { opacity: 0.35; }
[data-theme="light"] .tick-line.short { opacity: 0.18; }
[data-theme="light"] .tick-dot { background: var(--c-accent); opacity: 0.45; }
[data-theme="light"] .hex-col { opacity: var(--c-hex-opacity); }
[data-theme="light"] .hex-col svg path   { stroke: var(--c-svg-stroke); }
[data-theme="light"] .hex-col svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }

[data-theme="light"] .logo-wrap { filter: drop-shadow(0 2px 8px rgba(26,95,168,0.25)); }
[data-theme="light"] .header-line { background: linear-gradient(to right,transparent,var(--c-accent-mid),transparent); opacity: 0.5; }
[data-theme="light"] .company-name { color: var(--c-accent); opacity: 0.75; }

[data-theme="light"] .ebook-label { color: var(--c-text-dim); }
[data-theme="light"] .main-title { color: var(--c-text); }
[data-theme="light"] .main-title span { color: var(--c-accent); }
[data-theme="light"] .subtitle { color: var(--c-text-dim); }

[data-theme="light"] .div-line   { background: linear-gradient(to right, transparent, var(--c-frame-hi)); opacity: 0.5; }
[data-theme="light"] .div-line.r { background: linear-gradient(to left,  transparent, var(--c-frame-hi)); opacity: 0.5; }
[data-theme="light"] .div-hex    { color: var(--c-accent); opacity: 0.55; }

[data-theme="light"] .chapter-tag   { color: var(--c-text-dim); }
[data-theme="light"] .chapter-title { color: var(--c-text); border-left-color: var(--c-accent); }
[data-theme="light"] .chapter-title.h2 { border-left-color: var(--c-accent-lt); }
[data-theme="light"] .body-text     { color: var(--c-text-body); }
[data-theme="light"] .info-box      { border-color: var(--c-accent-lt); background: var(--c-bg-panel); }
[data-theme="light"] .info-box::before { color: var(--c-accent); background: var(--c-bg-panel); }
[data-theme="light"] .info-box p    { color: var(--c-accent2); }

[data-theme="light"] .page-num { color: var(--c-text-dim); }

[data-theme="light"] .footer-line { background: linear-gradient(to right,transparent,var(--c-accent-mid) 30%,var(--c-accent-mid) 70%,transparent); opacity: 0.4; }
[data-theme="light"] .footer-text { color: var(--c-gold); }
[data-theme="light"] .footer-text .exclamation { color: var(--c-accent); }

/* ─ light: header band (pseudo-element na osobnym div, bo ::after zajęty) ─ */
[data-theme="light"] .header-band {
  position: absolute; top: 0; left: 0; right: 0; height: 130px;
  background: linear-gradient(170deg,#ddeaf8 0%,#eef4fb 60%,transparent 100%);
  z-index: 1;
  border-bottom: 1px solid var(--c-accent-lt);
}
[data-theme="dark"] .header-band { display: none; }

/* ─ light: druk ─ */
[data-theme="light"] .page {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW: sepia
   Ciepły pergamin – styl dokumentu / raportu retro
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="sepia"] {
  --c-accent:      #8b5e3c;
  --c-accent2:     #5c3d1e;
  --c-gold:        #c09a4a;
  --c-text:        #2b1d0e;
  --c-text-body:   #3d2b16;
  --c-text-dim:    #9a7d5a;
  --c-frame:       rgba(139,94,60,0.3);
  --c-frame-hi:    rgba(139,94,60,0.65);
  --c-grid:        rgba(139,94,60,0.05);
  --c-bg:          #c9b89a;
  --c-bg-page:     #f5ead6;
  --c-bg-panel:    #ede0c4;
  --c-shadow:      0 4px 32px rgba(60,30,10,0.18), 0 1px 4px rgba(60,30,10,0.1);
  --c-svg-stroke:  #8b5e3c;
  --c-svg-fill:    rgba(139,94,60,0.07);
  --c-hex-opacity: 0.1;
}

[data-theme="sepia"] body { background: var(--c-bg); color: var(--c-text); }

[data-theme="sepia"] .topbar-title { color: var(--c-accent2); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; opacity: 0.8; }
[data-theme="sepia"] .page-counter  { color: var(--c-text-dim); }

[data-theme="sepia"] .theme-select { color: var(--c-accent); border-color: var(--c-frame); background: rgba(245,234,214,0.8); }
[data-theme="sepia"] .theme-select option { background: #f5ead6; color: var(--c-text); }
[data-theme="sepia"] .theme-switcher label { color: var(--c-text-dim); }

[data-theme="sepia"] .toc-btn { color: var(--c-accent); border-color: var(--c-frame); }
[data-theme="sepia"] .toc-btn:hover { background: var(--c-accent); color: #f5ead6; }

[data-theme="sepia"] .toc-overlay { background: rgba(30,15,5,0.5); }
[data-theme="sepia"] .toc-panel { background: #f5ead6; border-left: 3px solid var(--c-accent); }
[data-theme="sepia"] .toc-header { border-bottom: 1px solid rgba(139,94,60,0.2); background: var(--c-bg-panel); }
[data-theme="sepia"] .toc-header h2 { color: var(--c-accent2); }
[data-theme="sepia"] .toc-close { color: var(--c-text-dim); }
[data-theme="sepia"] .toc-close:hover { color: var(--c-accent); }
[data-theme="sepia"] .toc-list::-webkit-scrollbar-thumb { background: rgba(139,94,60,0.25); }
[data-theme="sepia"] .toc-item:hover { background: rgba(139,94,60,0.06); border-left-color: rgba(139,94,60,0.3); }
[data-theme="sepia"] .toc-item.active { background: rgba(139,94,60,0.1); border-left-color: var(--c-accent); }
[data-theme="sepia"] .toc-num  { color: var(--c-text-dim); }
[data-theme="sepia"] .toc-label { color: var(--c-text-body); }
[data-theme="sepia"] .toc-item.active .toc-label { color: var(--c-accent2); font-weight: 400; }
[data-theme="sepia"] .toc-pg   { color: var(--c-text-dim); }
[data-theme="sepia"] .toc-scan { display: none; }

[data-theme="sepia"] .nav-btn { color: var(--c-accent); border-color: var(--c-frame); }
[data-theme="sepia"] .nav-btn:hover:not(:disabled) { background: var(--c-accent); color: #f5ead6; }
[data-theme="sepia"] .dot { border-color: rgba(139,94,60,0.4); }
[data-theme="sepia"] .dot.active { background: var(--c-accent); border-color: var(--c-accent); }
[data-theme="sepia"] .dot:hover:not(.active) { background: rgba(139,94,60,0.15); }

[data-theme="sepia"] .page { background: var(--c-bg-page); box-shadow: var(--c-shadow); }
[data-theme="sepia"] .page::after { top:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,rgba(192,154,74,0.12),transparent); }
[data-theme="sepia"] .scanline { display: none; }
[data-theme="sepia"] .header-band { position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(170deg,rgba(192,154,74,0.15) 0%,transparent 100%);z-index:1;border-bottom:1px solid rgba(139,94,60,0.15); }

[data-theme="sepia"] .edge-line { background: linear-gradient(to right,transparent,var(--c-frame) 15%,var(--c-frame-hi) 50%,var(--c-frame) 85%,transparent); }
[data-theme="sepia"] .corner svg path[stroke] { stroke: var(--c-svg-stroke); }
[data-theme="sepia"] .corner svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }
[data-theme="sepia"] .corner svg circle { fill: var(--c-svg-stroke); }
[data-theme="sepia"] .side-bar .bar-line { background: linear-gradient(to bottom,transparent,var(--c-accent) 12%,var(--c-accent) 88%,transparent); opacity: 0.3; }
[data-theme="sepia"] .bar-line::before { display: none; }
[data-theme="sepia"] .tick-line { background: var(--c-accent); }
[data-theme="sepia"] .tick-line.long  { opacity: 0.35; }
[data-theme="sepia"] .tick-line.short { opacity: 0.18; }
[data-theme="sepia"] .tick-dot { background: var(--c-accent); opacity: 0.5; }
[data-theme="sepia"] .hex-col { opacity: var(--c-hex-opacity); }
[data-theme="sepia"] .hex-col svg path   { stroke: var(--c-svg-stroke); }
[data-theme="sepia"] .hex-col svg path[fill]:not([fill="none"]) { fill: var(--c-svg-fill); }

[data-theme="sepia"] .logo-wrap { filter: sepia(0.5) drop-shadow(0 2px 8px rgba(139,94,60,0.3)); }
[data-theme="sepia"] .header-line { background: linear-gradient(to right,transparent,var(--c-accent),transparent); opacity: 0.4; }
[data-theme="sepia"] .company-name { color: var(--c-accent); opacity: 0.8; }

[data-theme="sepia"] .ebook-label { color: var(--c-text-dim); }
[data-theme="sepia"] .main-title { color: var(--c-text); }
[data-theme="sepia"] .main-title span { color: var(--c-accent); }
[data-theme="sepia"] .subtitle { color: var(--c-text-dim); }

[data-theme="sepia"] .div-line   { background: linear-gradient(to right,transparent,var(--c-frame)); }
[data-theme="sepia"] .div-line.r { background: linear-gradient(to left,transparent,var(--c-frame)); }
[data-theme="sepia"] .div-hex    { color: var(--c-accent); }

[data-theme="sepia"] .chapter-tag   { color: var(--c-text-dim); }
[data-theme="sepia"] .chapter-title { color: var(--c-text); border-left-color: var(--c-accent); }
[data-theme="sepia"] .chapter-title.h2 { border-left-color: rgba(139,94,60,0.35); }
[data-theme="sepia"] .body-text     { color: var(--c-text-body); }
[data-theme="sepia"] .info-box      { border-color: rgba(139,94,60,0.25); background: var(--c-bg-panel); }
[data-theme="sepia"] .info-box::before { color: var(--c-accent); background: var(--c-bg-panel); }
[data-theme="sepia"] .info-box p    { color: var(--c-accent2); }

[data-theme="sepia"] .page-num { color: var(--c-text-dim); }
[data-theme="sepia"] .footer-line { background: linear-gradient(to right,transparent,var(--c-frame) 30%,var(--c-frame) 70%,transparent); opacity: 0.6; }
[data-theme="sepia"] .footer-text { color: var(--c-gold); }
[data-theme="sepia"] .footer-text .exclamation { color: var(--c-accent); }
[data-theme="sepia"] .page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }


/* ═══════════════════════════════════════════════════════════════════════════
   PRINT (wspólne dla wszystkich motywów)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .screen-shell > .topbar,
  .screen-shell > .nav-bar,
  .toc-overlay { display: none !important; }

  body, .screen-shell { background: white !important; padding: 0 !important; }

  .page {
    display: flex !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
    width: 100% !important;
    height: var(--page-h);
    max-height: var(--page-h);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .page:last-of-type { page-break-after: avoid; break-after: avoid; }

  @page { size: A4; margin: 0; }
}