:root{
  --bg:#FAF9F5; --paper:#FFFFFF; --ink:#1F2937; --rule:#DCD7C8;
  --red:#B5342A; --navy:#1E3A5F; --gold:#C99A3F; --gray:#6B6F76; --band:#F3EFE3;
  --content-w: 1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Source Serif 4',serif; line-height:1.65;
}
a{ color:var(--navy); }
img{ max-width:100%; }

/* ---------- header / nav ---------- */
header.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 4vw; border-bottom:2px solid var(--ink); background:var(--paper);
}
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo-img{ height:64px; width:auto; display:block; }
header.site-header nav{ display:flex; gap:24px; }
header.site-header nav a{ color:var(--gray); text-decoration:none; font-size:14px; font-family:'IBM Plex Mono',monospace; }
header.site-header nav a:hover{ color:var(--navy); }
.burger{ display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); padding:6px; line-height:1; }
@media(max-width:760px){
  header.site-header{ padding:8px 4vw; }
  header.site-header nav{ display:none; }
  .logo-img{ height:44px; }
  .burger{ display:block; font-size:32px; padding:4px 6px; }
  .mobile-menu .logo-img{ height:40px; }
}

/* ---------- mobile menu panel ---------- */
.mobile-menu{ display:none; }
.mobile-menu.open{
  display:flex; flex-direction:column;
  position:fixed; inset:0; z-index:1000; background:var(--paper);
  padding:18px 6vw 30px; overflow-y:auto;
}
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mobile-menu .mm-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink); }
.mobile-menu a{
  display:block; padding:14px 0; font-size:17px; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule); font-family:'Archivo',sans-serif; font-weight:600;
}
.mobile-menu .mm-section-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gray); margin:22px 0 4px;
}
.mobile-menu .mm-legal a{ font-size:14px; font-weight:400; color:var(--gray); padding:10px 0; }
body.mm-open{ overflow:hidden; }

.catstrip{
  display:flex; gap:0; overflow-x:auto; background:var(--paper); border-bottom:1px solid var(--rule);
  padding:0 4vw;
}
.catstrip a{
  flex-shrink:0; padding:13px 18px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  letter-spacing:0.5px; color:var(--gray); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap;
}
.catstrip a.active{ color:var(--red); border-bottom-color:var(--red); font-weight:600; }
.catstrip a:hover{ color:var(--navy); }

/* ---------- hero ---------- */
.hero{ max-width:var(--content-w); margin:0 auto; padding:36px 5vw 10px; }
.stamp{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px;
  color:var(--red); border:1px solid var(--red); padding:4px 10px; transform:rotate(-1.5deg); margin-bottom:16px;
}
.hero h1, .page-title{ font-size:clamp(24px,2.6vw,34px); line-height:1.2; margin:0 0 14px; font-weight:700; }
.hero .lede, .lede{ color:var(--gray); font-size:16px; border-left:3px solid var(--red); padding-left:14px; margin-bottom:30px; }

/* ---------- ad slots ---------- */
.ad{ max-width:var(--content-w); margin:26px auto; padding:14px 5vw; text-align:center; }
.ad-box{
  border:1px dashed var(--rule); background:var(--band); color:var(--gray);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:16px; border-radius:4px;
}

/* ---------- wizualizacja sygnału (kropki/kreski) — działa wszędzie: tablica, tabele, trener ---------- */
.morse{ display:flex; align-items:center; gap:4px; height:9px; }
.morse .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0; }
.morse .dash{ width:17px; height:7px; border-radius:2px; background:var(--red); flex-shrink:0; }

/* ---------- alphabet chart ---------- */
.chart-wrap{ max-width:var(--content-w); margin:10px auto 0; padding:0 5vw; }
.chart-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.chart-head h2{ font-size:19px; margin:0; font-family:'Archivo',sans-serif; font-weight:700; }
.chart-head span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gray); }
.chart{ display:grid; grid-template-columns:repeat(9,1fr); border:1px solid var(--ink); background:var(--paper); }
@media(max-width:860px){ .chart{grid-template-columns:repeat(6,1fr);} }
@media(max-width:560px){ .chart{grid-template-columns:repeat(4,1fr);} }
.chart .cell{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:16px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; background:none; font:inherit; color:inherit;
}
.chart .cell:hover{ background:var(--band); }
.chart .cell .letter{ font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; }
.chart .cell .morse{ justify-content:center; }
.chart .cell.sos{ background:var(--band); }
.chart .cell.sos .letter{ color:var(--red); }

/* ---------- section overview cards ---------- */
.bands{ max-width:var(--content-w); margin:36px auto; padding:0 5vw; }
.bands-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.bands-head h2{ font-size:19px; margin:0; font-family:'Archivo',sans-serif; font-weight:700; }
.bands-head span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gray); }
.bandgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media(max-width:700px){ .bandgrid{grid-template-columns:1fr;} }
.band{ background:var(--paper); padding:22px 20px; position:relative; }
.band::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); }
.band small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--red); margin-bottom:8px; }
.band strong{ display:block; font-family:'Archivo',sans-serif; font-size:16px; margin-bottom:8px; }
.band p{ margin:0; color:var(--gray); font-size:13.5px; line-height:1.5; }

/* ---------- translator device ---------- */
.device{ max-width:var(--content-w); margin:0 auto 40px; padding:0 5vw; }
.device-inner{ border:1px solid var(--ink); background:var(--paper); }
.device-top{ display:flex; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--rule); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray); }
.device-body{ padding:24px 20px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:700px){ .device-body{grid-template-columns:1fr;} }
.field label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
.field textarea{ width:100%; min-height:100px; border:1px solid var(--rule); padding:12px; font-family:'IBM Plex Mono',monospace; font-size:15px; background:var(--bg); color:var(--ink); resize:vertical; }
.field textarea:focus{ outline:2px solid var(--navy); outline-offset:1px; }
.actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.btn{ background:var(--navy); color:#fff; border:none; padding:10px 18px; font-family:'IBM Plex Mono',monospace; font-size:12px; cursor:pointer; border-radius:2px; }
.btn:hover{ opacity:0.9; }
.btn.ghost{ background:transparent; border:1px solid var(--navy); color:var(--navy); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.wpm-control{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray); margin-top:12px; }
.wpm-control input{ width:120px; }
.light-indicator{
  width:16px; height:16px; border-radius:50%; background:var(--rule); display:inline-block; margin-left:6px; vertical-align:middle;
  transition:background 0.05s;
}
.light-indicator.on{ background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ---------- entries / split layout ---------- */
.split{ max-width:var(--content-w); margin:0 auto 70px; padding:0 5vw; display:grid; grid-template-columns:1fr 260px; gap:36px; }
@media(max-width:820px){ .split{grid-template-columns:1fr;} }
.entries h2{ font-size:21px; margin:0 0 18px; font-family:'Archivo',sans-serif; }
.entry{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; }
.entry:hover .idx{ color:var(--navy); }
.entry .idx{ font-family:'IBM Plex Mono',monospace; color:var(--red); font-size:13px; width:36px; flex-shrink:0; }
.entry h3{ margin:0 0 4px; font-size:16px; }
.entry p{ margin:0; color:var(--gray); font-size:13.5px; }

.rail-box{ border:1px solid var(--rule); background:var(--paper); padding:18px 16px; margin-bottom:20px; }
.rail-box h3{ font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin:0 0 12px; font-family:'IBM Plex Mono',monospace; }
.qr{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:13px; padding:5px 0; border-bottom:1px dashed var(--rule); }

/* ---------- article / knowledge base page ---------- */
.article{ max-width:var(--content-w); margin:0 auto; padding:0 5vw 60px; }
.article h2{ font-family:'Archivo',sans-serif; font-size:24px; margin:36px 0 14px; }
.article h3{ font-family:'Archivo',sans-serif; font-size:19px; margin:28px 0 10px; }
.article p{ font-size:16px; margin:0 0 16px; }
.article ul, .article ol{ font-size:16px; margin:0 0 16px; padding-left:22px; }
.article table{ width:100%; border-collapse:collapse; margin:20px 0; font-family:'IBM Plex Mono',monospace; font-size:14px; }
.article table th, .article table td{ border:1px solid var(--rule); padding:9px 12px; text-align:left; vertical-align:middle; }
.article table th{ background:var(--band); font-family:'Archivo',sans-serif; }
.article table td.code{ color:var(--red); font-weight:600; font-size:15px; letter-spacing:0.5px; }
.article table td .morse{ justify-content:flex-start; }
.article table td .morse .dot{ width:5px; height:5px; background:var(--gray); }
.article table td .morse .dash{ width:12px; height:5px; background:var(--gray); }
.callout{ background:var(--band); border-left:3px solid var(--red); padding:16px 18px; margin:22px 0; font-size:15px; }

/* ---------- footer ---------- */
footer.site-footer{ background:#1F2838; color:#D7E0EC; margin-top:20px; }
.footer-row{
  max-width:var(--content-w); margin:0 auto; padding:26px 5vw; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-brand{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; color:#fff; }
.footer-brand span{ color:var(--gold); }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ color:#C7D3E5; text-decoration:none; font-size:13.5px; }
.footer-links a:hover{ color:#fff; }
.footer-copy{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#7E8FAB; }

/* ---------- trainer (quiz) ---------- */
.trainer{ max-width:var(--content-w); margin:0 auto 60px; padding:0 5vw; }
.trainer-controls{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:22px; }
.trainer-group h4{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); margin:0 0 10px; }
.pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ border:1px solid var(--rule); background:var(--paper); padding:8px 16px; border-radius:20px; font-size:13px; font-family:'Inter',sans-serif; cursor:pointer; color:var(--ink); }
.pill:hover{ border-color:var(--navy); }
.pill.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.trainer-box{ border:1px solid var(--ink); background:var(--paper); padding:34px 30px; text-align:center; }
.trainer-mode-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:18px; }
.trainer-prompt{ font-family:'Archivo',sans-serif; font-weight:700; font-size:42px; margin-bottom:20px; }
.trainer-morse{ display:flex; justify-content:center; align-items:center; gap:8px; height:20px; margin-bottom:26px; }
.trainer-morse .dot{ width:14px; height:14px; border-radius:50%; background:var(--red); }
.trainer-morse .dash{ width:36px; height:14px; border-radius:3px; background:var(--red); }
.trainer-input{ font-family:'IBM Plex Mono',monospace; font-size:18px; padding:10px 14px; border:1px solid var(--rule); width:220px; text-align:center; text-transform:uppercase; }
.trainer-input:focus{ outline:2px solid var(--navy); outline-offset:1px; }
.trainer-feedback{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:14px; min-height:20px; }
.trainer-feedback.ok{ color:#1a7a3a; }
.trainer-feedback.bad{ color:var(--red); }
.trainer-stats{ display:flex; gap:36px; justify-content:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--rule); }
.trainer-stat{ text-align:center; }
.trainer-stat strong{ display:block; font-family:'Archivo',sans-serif; font-size:20px; color:var(--ink); }
.trainer-stat span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; }

/* ---------- print ---------- */
@media print{
  header.site-header, .catstrip, .ad, footer.site-footer, .actions, .btn, .cookie-banner{ display:none !important; }
}

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:var(--navy); color:#E7ECF3; padding:16px 5vw;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-banner p{ margin:0; font-size:13.5px; max-width:760px; color:#C7D3E5; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-banner .actions{ margin:0; flex-shrink:0; }
.cookie-banner .btn{ background:var(--gold); color:#1F2937; font-family:'Inter',sans-serif; padding:9px 20px; }
.cookie-banner .btn.ghost{ background:transparent; border:1px solid #4A5A72; color:#C7D3E5; }
.cookie-banner[hidden]{ display:none; }