/* ============================================================
   Rysunki i karty tematów (app/includes/tresci/topics.php, rysunki: app/content/tematy/rysunki/,
   karty: app/content/tematy/karty/). Używane pod pytaniem (quiz.php) i na kartach tematów w poradniku.
   ============================================================ */

/* --- elementy rysunków SVG --- */
.fg-paper { fill: none; stroke: var(--paper-line); stroke-width: 1; }
.fg-label { font: 500 14px var(--font-body, 'IBM Plex Sans', sans-serif); fill: var(--ink); }
.fg-small { font: 400 12.5px var(--font-body, 'IBM Plex Sans', sans-serif); fill: var(--ink); }
.fg-tag { font: 700 15px var(--font-head, 'Space Grotesk', sans-serif); fill: var(--ink); }
.fg-b { font-weight: 700; }
.fg-soft { fill: var(--ink-soft); }
.fg-red { fill: #c0392b; }
.fg-teal { fill: #23806f; }
.fg-amber { fill: #b06f16; }
.fg-teal-1 { fill: rgba(63,167,150,.28); stroke: #3fa796; stroke-width: 1.5; }
.fg-teal-2 { fill: rgba(63,167,150,.12); stroke: #3fa796; stroke-width: 1.5; }
.fg-amber-1 { fill: rgba(217,142,43,.22); stroke: #d98e2b; stroke-width: 1.5; }
.fg-amber-2 { fill: rgba(217,142,43,.45); stroke: none; }
.fg-hatch { fill: rgba(192,57,43,.08); stroke: #c0392b; stroke-width: 1.5; stroke-dasharray: 6 4; }
.fg-ink-fill { fill: var(--ink); }
.fg-ink-soft-fill { fill: var(--ink-soft); opacity: .25; }
.fg-ground { stroke: var(--ink); stroke-width: 2.5; }
.fg-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fg-line-thick { fill: none; stroke: var(--ink); stroke-width: 3; }
.fg-line-dash { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 6 5; }
.fg-red-line { stroke: #c0392b; }
.fg-teal-line { stroke: #3fa796; stroke-width: 3; }
.fg-amber-line { stroke: #d98e2b; stroke-width: 3; }
.fg-ink-line { stroke: var(--ink); stroke-width: 3; }
.fg-arrow { marker-end: none; }
.fg-tick { stroke-width: 3; }
.fg-valve { stroke-width: 5; }
.fg-piston { fill: var(--ink-soft); stroke: var(--ink); stroke-width: 1.5; }
.fg-spark { fill: #d98e2b; stroke: #85500e; stroke-width: 1; }
.fg-plane path { fill: var(--ink); }
.fg-sea { fill: rgba(63,120,167,.25); }
.fg-terrain { fill: rgba(120,110,80,.18); stroke: var(--ink-soft); stroke-width: 1.5; }
.fg-head { fill: var(--ink); }
.fg-head-teal { fill: #3fa796; }
.fg-head-amber { fill: #d98e2b; }
.fg-thin { stroke-width: 2; }
.fg-sym { stroke-width: 2.5; }
.fg-red-fill { fill: #c0392b; }
.fg-blue { fill: #2e6da4; }
.fg-blue-line { stroke: #2e6da4; }
.fg-blue-fill { fill: #2e6da4; }
.fg-cloud { fill: rgba(120,130,145,.16); stroke: var(--ink-soft); stroke-width: 1.2; }
.fg-rain { stroke: #2e6da4; stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .8; }
.fg-rain-heavy { stroke-width: 2; stroke-dasharray: 5 3; }
.fg-wing { fill: rgba(120,130,145,.14); stroke: var(--ink); stroke-width: 1.5; }
.fg-curve { fill: none; }
.fg-dash { stroke-dasharray: 7 5; }
.fg-dot-teal { fill: #3fa796; }
.fg-dot-amber { fill: #d98e2b; }
.fg-duct { fill: rgba(63,167,150,.08); stroke: none; }
.fg-box { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fg-fuel { fill: rgba(217,142,43,.22); stroke: none; }
.fg-float { fill: var(--surface, #fff); stroke: var(--ink); stroke-width: 1.5; }
.fg-ice { fill: rgba(120,180,230,.55); stroke: #2e6da4; stroke-width: 1.2; }
.fg-ice-text { fill: #2e6da4; }
.fg-wheel { fill: var(--surface, #fff); stroke: var(--ink); stroke-width: 3; }
.fg-cg { fill: var(--surface, #fff); stroke: var(--ink); stroke-width: 1.5; }
[data-theme="dark"] .fg-blue, [data-theme="dark"] .fg-ice-text { fill: #7fb2e0; }
[data-theme="dark"] .fg-blue-line, [data-theme="dark"] .fg-rain { stroke: #7fb2e0; }
[data-theme="dark"] .fg-blue-fill { fill: #7fb2e0; }
.fg-cold { fill: rgba(46,109,164,.10); stroke: none; }
.fg-l { font: 600 15px var(--font-head, 'Space Grotesk', sans-serif); fill: var(--ink); }
.fg-big { font-size: 17px; }
.fg-t { font: 500 14px var(--font-body, 'IBM Plex Sans', sans-serif); fill: var(--ink); }
.fg-m { font: 400 13px var(--font-body, 'IBM Plex Sans', sans-serif); fill: var(--ink-soft); }
.fg-cloud2 { fill: #eef1f4; stroke: #8a97a6; stroke-width: 1.3; }
.fg-ns { fill: #c9d0d8; }
.fg-cb { fill: #d6dce3; }
.fg-thin-cloud { fill: #f4f6f8; }
.fg-arc { stroke-width: 1.2; }
[data-theme="dark"] .fg-cloud2 { fill: #2a3a4e; stroke: #6d7f93; }
[data-theme="dark"] .fg-ns { fill: #3a4b60; }
[data-theme="dark"] .fg-cb { fill: #34465b; }
[data-theme="dark"] .fg-thin-cloud { fill: #24344a; }
[data-theme="dark"] .fg-cold { fill: rgba(127,178,224,.12); }

/* --- pod pytaniem: jedna linijka; rysunek w okienku nad pytaniem --- */
.topic-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: 13px; }
.topic-line a, .topic-line button.topic-open { font: inherit; font-weight: 600; color: var(--amber-text, #85500e); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.topic-line a:hover, .topic-line button.topic-open:hover { text-decoration: underline; }
.topic-line button.topic-open { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--amber); color: var(--ink); }
.topic-line button.topic-open:hover { background: var(--tint-amber, #fbf6ec); text-decoration: none; }
.topic-open-ico { width: 14px; height: 11px; border: 1.5px solid currentColor; position: relative; }
.topic-open-ico::after { content: ''; position: absolute; left: 2px; bottom: 1px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.topic-chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--paper-line); background: var(--bg, var(--paper)); font-family: var(--font-head); font-weight: 600; font-size: 12.5px; color: var(--ink); }
[data-theme="dark"] .topic-line a, [data-theme="dark"] .topic-line button.topic-open { color: var(--amber); }
[data-theme="dark"] .topic-line button.topic-open:hover { background: rgba(217,142,43,.12); }

.topic-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(11,20,32,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.topic-modal[hidden] { display: none; }
.topic-modal-box { background: var(--surface, #fff); border: 1px solid var(--paper-line); width: 100%; max-width: 980px; max-height: 100%; overflow: auto; }
.topic-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--paper-line); position: sticky; top: 0; background: var(--surface, #fff); }
.topic-modal-head span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.topic-modal-head strong { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.topic-modal-close { flex-shrink: 0; font: 600 13px var(--font-body); color: var(--ink); background: none; border: 1px solid var(--paper-line); padding: 7px 12px; cursor: pointer; }
.topic-modal-body { padding: 16px 18px 18px; }
.topic-modal-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 18px; border-top: 1px solid var(--paper-line); font-size: 13.5px; }
.topic-modal-foot a { font-weight: 600; color: var(--amber-text, #85500e); text-decoration: none; }
[data-theme="dark"] .topic-modal-foot a { color: var(--amber); }
.topic-modal-points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.topic-modal-points li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.topic-modal-points li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; background: var(--teal); }
body.topic-modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .topic-modal { padding: 0; align-items: stretch; }
  .topic-modal-box { max-width: none; border: 0; }
}

/* --- rysunki: siatka (1 albo 2 obok siebie), dopasowane do szerokości --- */
.tf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.tf-item { margin: 0; border: 1px solid var(--paper-line); background: var(--surface, #fff); }
.tf-item svg { display: block; width: 100%; height: auto; padding: 8px; box-sizing: border-box; }
.tf-item figcaption { padding: 8px 12px; border-top: 1px solid var(--paper-line); font-size: 13px; font-weight: 600; color: var(--ink); }
.tf-one { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* starsze, szerokie rysunki (jeden plik z opisami w środku): na telefonie przewijane w bok */
.tf-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) { .tf-wide svg { width: 680px; max-width: none; } }

/* --- karta tematu w poradniku (/poradnik/{przedmiot}/{karta}, poradnik/temat.php) --- */
.tc-figs { margin-top: 22px; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tc-table th, .tc-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--paper-line); line-height: 1.45; }
.tc-table thead th { font-family: var(--font-head); font-size: 13px; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.tc-table tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.tc-scroll { overflow-x: auto; }
.tc-q { border-top: 1px solid var(--paper-line); padding: 12px 0; }
.tc-q:first-of-type { border-top: 0; }
.tc-q-code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); }
.tc-q-text { font-weight: 600; font-size: 14.5px; color: var(--ink); margin: 3px 0 6px; line-height: 1.45; }
.tc-q details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--amber-text, #85500e); min-height: 28px; display: inline-flex; align-items: center; }
.tc-q details p { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.tc-q details p b { color: var(--teal-dark, #23806f); }
.tc-sources { font-size: 13px; color: var(--ink-soft); }
.tc-sources li { margin: 0 0 4px; }
.tc-sources a { color: inherit; }
[data-theme="dark"] .tc-q details summary { color: var(--amber); }
.question-topic { font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
/* partia 2: przestrzeń powietrzna, warstwa przejściowa, silnik */
.fg-ctl { fill: rgba(217,142,43,.14); stroke: none; }
.fg-g { fill: rgba(63,167,150,.10); stroke: none; }
.fg-tma { fill: rgba(217,142,43,.26); stroke: #b06f16; stroke-width: 1.2; }
.fg-ctr { fill: rgba(217,142,43,.38); stroke: #b06f16; stroke-width: 1.2; }
.fg-atz { fill: rgba(63,167,150,.22); stroke: #23806f; stroke-width: 1.2; stroke-dasharray: 5 3; }
.fg-layer { fill: rgba(120,130,145,.16); stroke: none; }
.fg-gas-mix { fill: rgba(63,167,150,.28); }
.fg-gas-burn { fill: rgba(217,142,43,.45); }
.fg-gas-exh { fill: rgba(120,130,145,.35); }
[data-theme="dark"] .fg-ctl { fill: rgba(217,142,43,.12); }
[data-theme="dark"] .fg-layer { fill: rgba(160,175,190,.14); }
/* partia 3: stery, gradienty */
.fg-surf { fill: #d98e2b; stroke: #b06f16; stroke-width: 1; }
.fg-ink-dash { stroke: var(--ink); }
.fg-soft-dash { stroke: var(--ink-soft); }
.fg-halo { paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 5px; stroke-linejoin: round; }
/* partia 4: stateczność, krąg, oko */
.fg-ball { fill: #d98e2b; stroke: #b06f16; stroke-width: 1.5; }
.fg-runway { fill: var(--ink-soft); opacity: .55; }
.fg-rw-mark { stroke: var(--surface, #fff); stroke-width: 2; }
.fg-plane-give path { fill: #d98e2b; }
.fg-eye { fill: rgba(120,130,145,.08); stroke: var(--ink); stroke-width: 2; }
.fg-cornea { stroke: var(--ink); stroke-width: 2; fill: rgba(63,167,150,.10); }
.fg-lens { fill: rgba(63,167,150,.25); stroke: #23806f; stroke-width: 1.5; }
.fg-retina { stroke: #c0392b; stroke-width: 3; opacity: .7; }
.fg-blind { fill: var(--surface, #fff); stroke: #c0392b; stroke-width: 2; }
/* partia 5: meteorologia */
.fg-air { fill: #3fa796; opacity: .55; }
.fg-sun { fill: #d98e2b; }
.fg-moon { fill: var(--ink-soft); opacity: .6; }
.fg-fog { fill: rgba(150,160,175,.45); }
.fg-drop { fill: #2e6da4; }
.fg-mono { font: 600 15px 'IBM Plex Mono', monospace; fill: var(--ink); }
[data-theme="dark"] .fg-drop { fill: #7fb2e0; }
.fg-num { font: 700 11px var(--font-body, 'IBM Plex Sans', sans-serif); fill: #0b1420; }
/* partia 6: osiągi, zasady lotu */
.fg-tree { fill: #3fa796; opacity: .55; }
.fg-dot-red { fill: #c0392b; }
.fg-dial { fill: var(--surface, #fff); stroke: var(--ink); stroke-width: 3; }
.fg-arc-white { fill: none; stroke: #b8c0c8; stroke-width: 10; }
.fg-arc-green { fill: none; stroke: #3fa796; stroke-width: 10; }
.fg-arc-yellow { fill: none; stroke: #e8b52a; stroke-width: 10; }
.fg-arc-red { stroke: #c0392b; stroke-width: 5; }
.fg-arc-white-t { fill: #b8c0c8; } .fg-arc-green-t { fill: #3fa796; } .fg-arc-yellow-t { fill: #e8b52a; } .fg-arc-red-t { fill: #c0392b; }
.fg-ghost { opacity: .35; }
.fg-mass { fill: var(--ink); }
[data-theme="dark"] .fg-dial { fill: #13233a; }
/* partia 7: prawo */
.fg-sig-g { fill: #2fae5a; } .fg-sig-r { fill: #c0392b; } .fg-sig-w { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.fg-tire { fill: #39424d; stroke: var(--ink); stroke-width: 1.5; }
[data-theme="dark"] .fg-tire { fill: #4a5563; }
/* ramka: baza ULC a przepisy */
.tc-exam { border-left: 4px solid var(--amber, #d98e2b); }
.tc-exam h2 { margin: 0 0 10px; }
.tc-exam dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; }
.tc-exam dt { font-weight: 600; color: var(--ink); }
.tc-exam dd { margin: 0; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 600px) { .tc-exam dl { grid-template-columns: 1fr; gap: 2px; } .tc-exam dd { margin-bottom: 10px; } }

/* --- rysunki "fx": nowy, bogatszy styl (gradienty, pastylki z nazwami, większy tekst); kolory z motywu --- */
.fx { --fx-sky-a: #d9e7f4; --fx-sky-b: #f6f9fc; --fx-cold-a: #86b6e0; --fx-cold-b: #cde3f5; --fx-warm-a: #e0952b; --fx-warm-b: #f6cf8a;
  --fx-cloud-a: #ffffff; --fx-cloud-b: #dfe7f0; --fx-line: #8394a9; --fx-ns-a: #7c8b9f; --fx-ns-b: #b3bfcc; --fx-as-a: #c5cfdb; --fx-as-b: #e6ecf2; --fx-cs-a: #f4f8fc; --fx-cs-b: #e1e9f2;
  --fx-red: #c0392b; --fx-rain: #2f78b8; --fx-pill: #14202c; --fx-pill-t: #fff; --fx-ground: #cfc8b6; --fx-cwarm: #a9610d; --fx-ccold: #1f5f9a; }
.fx text { font-family: var(--font-body, 'IBM Plex Sans', sans-serif); }
[data-theme="dark"] .fx { --fx-sky-a: #14233a; --fx-sky-b: #1b2d46; --fx-cold-a: #2c5d8c; --fx-cold-b: #1f3f60; --fx-warm-a: #e0952b; --fx-warm-b: #8f5a16;
  --fx-cloud-a: #4a5d75; --fx-cloud-b: #34465c; --fx-line: #8ea3ba; --fx-ns-a: #55677d; --fx-ns-b: #3a4b60; --fx-as-a: #4a5d75; --fx-as-b: #3a4b60; --fx-cs-a: #53667d; --fx-cs-b: #3f5169;
  --fx-rain: #7fb2e0; --fx-pill: #e6e3d8; --fx-pill-t: #14202c; --fx-ground: #2b3a4d; --fx-cwarm: #f0b25a; --fx-ccold: #8dc0ec; }
.fx-sky-a, .fx-cl-a { stop-color: var(--fx-sky-a); } .fx-sky-b { stop-color: var(--fx-sky-b); }
.fx-cold-a { stop-color: var(--fx-cold-a); } .fx-cold-b { stop-color: var(--fx-cold-b); }
.fx-warm-a { stop-color: var(--fx-warm-a); } .fx-warm-b { stop-color: var(--fx-warm-b); }
.fx-ns-a { stop-color: var(--fx-ns-a); } .fx-ns-b { stop-color: var(--fx-ns-b); }
.fx-as-a { stop-color: var(--fx-as-a); } .fx-as-b { stop-color: var(--fx-as-b); }
.fx-cs-a { stop-color: var(--fx-cs-a); } .fx-cs-b { stop-color: var(--fx-cs-b); }
.fx-cloud-line { fill: var(--fx-line); stroke: var(--fx-line); stroke-width: 3; stroke-linejoin: round; }
.fx-cloud { filter: none; }
.fx-ground-fill { fill: var(--fx-ground); opacity: .55; }
.fx-ground { stroke: var(--ink); stroke-width: 3; }
.fx-rain line { stroke: var(--fx-rain); stroke-width: 1.8; stroke-linecap: round; opacity: .75; }
.fx-front { fill: none; stroke: var(--fx-red); stroke-width: 4; stroke-linecap: round; }
.fx-front-dot { fill: var(--fx-red); stroke: var(--surface, #fff); stroke-width: 3; }
.fx-ci path { fill: none; stroke: var(--fx-line); stroke-width: 2.5; stroke-linecap: round; }
.fx-pill { fill: var(--fx-pill); }
.fx-pill-t { font: 700 15px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--fx-pill-t); }
.fx-t1 { font: 600 17px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--ink); }
.fx-t2 { font: 400 14px var(--font-body, 'IBM Plex Sans', sans-serif) !important; fill: var(--ink-soft); }
.fx-c-warm { fill: var(--fx-cwarm); } .fx-c-cold { fill: var(--fx-ccold); }
.fx-brace { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-arrow { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; } .fx-arrow-h { fill: var(--ink); }
.fx-warm-arrow { stroke: none; }
.fx { --fx-panel: rgba(255,255,255,.55); --fx-panel-line: #c9d4e0; --fx-cb-a: #8f9db0; --fx-cb-b: #d3dbe5; --fx-cu-a: #ffffff; --fx-cu-b: #d8e2ee; --fx-up: #d9851b; --fx-down: #2f78b8; }
[data-theme="dark"] .fx { --fx-panel: rgba(255,255,255,.04); --fx-panel-line: #2a3f5a; --fx-cb-a: #5a6c82; --fx-cb-b: #3a4b60; --fx-cu-a: #5b6f88; --fx-cu-b: #3d5068; --fx-up: #f0a847; --fx-down: #7fb2e0; }
.fx-cb-a { stop-color: var(--fx-cb-a); } .fx-cb-b { stop-color: var(--fx-cb-b); }
.fx-cu-a { stop-color: var(--fx-cu-a); } .fx-cu-b { stop-color: var(--fx-cu-b); }
.fx-panel { fill: var(--fx-panel); stroke: var(--fx-panel-line); stroke-width: 1.5; }
.fx-up { stroke: var(--fx-up); stroke-width: 4; stroke-linecap: round; fill: none; } .fx-up-h { fill: var(--fx-up); }
.fx-down { stroke: var(--fx-down); stroke-width: 4; stroke-linecap: round; fill: none; } .fx-down-h { fill: var(--fx-down); }
.fx-num { fill: var(--fx-pill); } .fx-num-t { font: 700 14px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--fx-pill-t); }
.fx-sub { font: 400 13.5px var(--font-body, 'IBM Plex Sans', sans-serif) !important; fill: var(--ink-soft); }
.fx { --fx-mt-a: #a9a28f; --fx-mt-b: #d8d2c0; --fx-snow: #ffffff; --fx-stream: #2a9d8a; --fx-lens: #f4f8fc; --fx-ns-fill: #aab6c4; --fx-cred: #b8322a; }
[data-theme="dark"] .fx { --fx-mt-a: #4b5668; --fx-mt-b: #2b3a4d; --fx-snow: #9fb0c1; --fx-stream: #55c4b0; --fx-lens: #4a5d75; --fx-ns-fill: #55677d; --fx-cred: #f08a7d; }
.fx-mt-a { stop-color: var(--fx-mt-a); } .fx-mt-b { stop-color: var(--fx-mt-b); }
.fx-mt-snow { fill: var(--fx-snow); opacity: .9; }
.fx-stream { fill: none; stroke: var(--fx-stream); stroke-width: 3.5; stroke-linecap: round; }
.fx-lens { fill: var(--fx-lens); } .fx-ns-fill { fill: var(--fx-ns-fill); }
.fx-rotor { fill: none; stroke: var(--fx-cred); stroke-width: 3.5; stroke-linecap: round; } .fx-rotor-h { fill: var(--fx-cred); }
.fx-c-red { fill: var(--fx-cred); }
.fx-mt-t { fill: #4a4536 !important; } [data-theme="dark"] .fx-mt-t { fill: #d5dde6 !important; }
.fx { --fx-grass: #dfe9d6; --fx-info: rgba(255,255,255,.7); --fx-rw: #3a4452; --fx-plane: #14202c; }
[data-theme="dark"] .fx { --fx-grass: #1d3a30; --fx-info: rgba(255,255,255,.05); --fx-rw: #0d1622; --fx-plane: #e6e3d8; }
.fx-grass { fill: var(--fx-grass); }
.fx-info { fill: var(--fx-info); stroke: var(--fx-panel-line); stroke-width: 1.2; }
.fx-runway { fill: var(--fx-rw); } .fx-rw-mark { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .9; }
.fx-pattern { fill: none; stroke: var(--fx-up); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fx-plane path { fill: var(--fx-plane); }
.fx { --fx-steel-a: #e9eef3; --fx-steel-b: #9aa8b8; --fx-face-a: #ffffff; --fx-face-b: #dfe6ee; --fx-ring: #26323f; --fx-total: #1f8a78; --fx-static: #2f78b8; --fx-needle: #d9851b; }
[data-theme="dark"] .fx { --fx-steel-a: #8ea3ba; --fx-steel-b: #4a5d75; --fx-face-a: #2f4259; --fx-face-b: #18283b; --fx-ring: #0b1420; --fx-total: #55c4b0; --fx-static: #7fb2e0; --fx-needle: #f0a847; }
.fx-steel-a { stop-color: var(--fx-steel-a); } .fx-steel-b { stop-color: var(--fx-steel-b); }
.fx-face-a { stop-color: var(--fx-face-a); } .fx-face-b { stop-color: var(--fx-face-b); }
.fx-pitot, .fx-pitot-nose { fill: url(#ps-steel); stroke: var(--fx-ring); stroke-width: 1.8; }
.fx-skin { fill: var(--fx-steel-b); stroke: var(--fx-ring); stroke-width: 1.5; opacity: .85; }
.fx-port { fill: var(--fx-ring); }
.fx-pipe { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fx-pipe-total { stroke: var(--fx-total); } .fx-pipe-static { stroke: var(--fx-static); }
.fx-leg { stroke-width: 5; }
.fx-joint { fill: var(--fx-static); stroke: var(--surface, #fff); stroke-width: 2; }
.fx-arrow-total { stroke: var(--fx-total); } .fx-arrow-total-h { fill: var(--fx-total); }
.fx-gauge-ring { fill: var(--fx-ring); } .fx-gauge-face { stroke: none; }
.fx-gtick { stroke: var(--fx-ring); stroke-width: 1.6; stroke-linecap: round; }
[data-theme="dark"] .fx-gtick { stroke: #9fb0c1; }
.fx-needle { stroke: var(--fx-needle); stroke-width: 3.5; stroke-linecap: round; } .fx-hub { fill: var(--fx-ring); stroke: var(--fx-needle); stroke-width: 1.5; }
.fx { --fx-code-a: #1c2e47; --fx-code-b: #0f1b2c; }
[data-theme="dark"] .fx { --fx-code-a: #0f1b2c; --fx-code-b: #0a121d; }
.fx-code-a { stop-color: var(--fx-code-a); } .fx-code-b { stop-color: var(--fx-code-b); }
.fx-codepanel { stroke: #22344a; stroke-width: 1; }
.fx-chip { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.2); stroke-width: 1; }
.fx-chip-n, .fx-leg-n { fill: #e0952b; }
.fx-chip-nt { font: 700 12px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: #0b1420; }
.fx-mono2 { font: 600 15.5px 'IBM Plex Mono', monospace !important; fill: #f1efe6; letter-spacing: .3px; }
.fx-sub2 { font: 500 13.5px var(--font-body, 'IBM Plex Sans', sans-serif) !important; fill: var(--ink); }
.fx-front-cold { stroke: var(--fx-static, #2f78b8); }
.fx-front-tri { fill: var(--fx-static, #2f78b8); }
.fx-bolt { fill: #f0b43c; stroke: #b4720f; stroke-width: 1.5; stroke-linejoin: round; }
.fx-curve { fill: none; }

/* ===== Rysunki kart: wspólny język „fx2” (karty Prawa lotniczego): karty, pigułki, wymiary, samoloty, lampki ===== */
.fx { --fx2-surf: #ffffff; --fx2-teal: #23806f; --fx2-teal-bg: rgba(63,167,150,.18); --fx2-amber: #a9610d; --fx2-amber-bg: rgba(217,142,43,.22); --fx2-red: #b8322a; --fx2-red-bg: rgba(192,57,43,.12); --fx2-blue: #2f78b8; --fx2-blue-bg: rgba(47,120,184,.14); --fx2-ink-bg: rgba(20,32,44,.06); --fx2-gr: #3fa796; --fx2-am: #d98e2b; --fx2-rd: #c0392b; }
[data-theme="dark"] .fx { --fx2-surf: #14233a; --fx2-teal: #55c4b0; --fx2-teal-bg: rgba(85,196,176,.2); --fx2-amber: #f0b25a; --fx2-amber-bg: rgba(240,178,90,.3); --fx2-red: #f08a7d; --fx2-red-bg: rgba(240,138,125,.16); --fx2-blue: #7fb2e0; --fx2-blue-bg: rgba(127,178,224,.18); --fx2-ink-bg: rgba(255,255,255,.06); --fx2-gr: #55c4b0; --fx2-am: #f0b25a; --fx2-rd: #f08a7d; }
.fx2-card { fill: var(--fx2-surf); stroke: var(--fx-panel-line); stroke-width: 1.5; }
.fx2-bg-teal { fill: var(--fx2-teal-bg); stroke: var(--fx2-gr); stroke-width: 1.6; }
.fx2-bg-amber { fill: var(--fx2-amber-bg); stroke: var(--fx2-am); stroke-width: 1.6; }
.fx2-bg-red { fill: var(--fx2-red-bg); stroke: var(--fx2-rd); stroke-width: 1.6; }
.fx2-bg-blue { fill: var(--fx2-blue-bg); stroke: var(--fx2-blue); stroke-width: 1.6; }
.fx2-bg-ink { fill: var(--fx2-ink-bg); stroke: var(--fx-panel-line); stroke-width: 1.4; }
.fx2-bg-navy { fill: var(--fx-pill); }
.fx2-fl-teal { fill: var(--fx2-gr); } .fx2-fl-amber { fill: var(--fx2-am); } .fx2-fl-red { fill: var(--fx2-rd); } .fx2-fl-blue { fill: var(--fx2-blue); } .fx2-fl-ink { fill: var(--ink); } .fx2-fl-soft { fill: var(--ink-soft); } .fx2-fl-none { fill: none; }
.fx2-st-teal { stroke: var(--fx2-gr); } .fx2-st-amber { stroke: var(--fx2-am); } .fx2-st-red { stroke: var(--fx2-rd); } .fx2-st-blue { stroke: var(--fx2-blue); }
.fx2-ln { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx2-ln-s { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fx2-th { stroke-width: 4; } .fx2-dash { stroke-dasharray: 6 5; } .fx2-dot { stroke-dasharray: 2 5; }
.fx2-h { font: 700 16px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--ink); }
.fx2-b { font: 600 14.5px var(--font-body, 'IBM Plex Sans', sans-serif) !important; fill: var(--ink); }
.fx2-s { font: 400 13px var(--font-body, 'IBM Plex Sans', sans-serif) !important; fill: var(--ink-soft); }
.fx2-n { font: 700 28px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--ink); }
.fx2-n2 { font: 700 21px var(--font-head, 'Space Grotesk', sans-serif) !important; fill: var(--ink); }
.fx2-mono { font: 600 15px ui-monospace, Consolas, monospace !important; fill: var(--ink); }
.fx2-cap { font: 600 11.5px var(--font-body, 'IBM Plex Sans', sans-serif) !important; letter-spacing: .07em; fill: var(--ink-soft); }
.fx2-w { fill: var(--fx-pill-t) !important; }
.fx2-c-teal { fill: var(--fx2-teal) !important; } .fx2-c-amber { fill: var(--fx2-amber) !important; } .fx2-c-red { fill: var(--fx2-red) !important; } .fx2-c-blue { fill: var(--fx2-blue) !important; }
.fx2-pl path, .fx2-pl .p { fill: var(--fx-plane); }
.fx2-pl.am path, .fx2-pl.am .p { fill: var(--fx2-am); } .fx2-pl.gr path, .fx2-pl.gr .p { fill: var(--fx2-gr); } .fx2-pl.rd path, .fx2-pl.rd .p { fill: var(--fx2-rd); }
.fx2-pl .pr { stroke: var(--fx-plane); stroke-width: 2; fill: none; opacity: .55; }
.fx2-cloud { fill: var(--fx-cloud-b); stroke: var(--fx-line); stroke-width: 1.4; }
.fx2-hill { fill: var(--fx-mt-b); stroke: var(--fx-line); stroke-width: 1.2; }
.fx2-bld { fill: var(--ink-soft); opacity: .32; }
.fx2-tree { fill: var(--fx2-gr); opacity: .55; } .fx2-trunk { stroke: var(--ink-soft); stroke-width: 3; }
.fx2-glass { fill: var(--fx-lens); stroke: var(--fx-ring); stroke-width: 1.4; }
.fx2-lamp-g { fill: #2fae5c; } .fx2-lamp-r { fill: #d6402f; } .fx2-lamp-w { fill: var(--fx2-surf); stroke: var(--ink); stroke-width: 2; }
.fx2-lamp-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .4; }
.fx2-ok { fill: none; stroke: var(--fx2-gr); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx2-no { fill: none; stroke: var(--fx2-rd); stroke-width: 3; stroke-linecap: round; }
.fx2-pl.wh path { fill: #fff; }
[data-theme="dark"] .fx2-pl.wh path { fill: #0b1420; }
/* Karty tematów: punkty „Co musisz zapamiętać” jako ponumerowane kroki */
.ls-keypoints ul { counter-reset: kp; }
.ls-keypoints li { counter-increment: kp; padding: 2px 0 14px 40px; }
.ls-keypoints li::before { content: counter(kp); left: 0; top: 2px; width: 26px; height: 26px; background: var(--teal); color: #fff; font: 700 13px/26px var(--font-head, 'Space Grotesk', sans-serif); text-align: center; }
[data-theme="dark"] .ls-keypoints li::before { color: #0b1420; }
.fx2-ln.fx2-st-teal { stroke: var(--fx2-gr); } .fx2-ln.fx2-st-amber { stroke: var(--fx2-am); } .fx2-ln.fx2-st-red { stroke: var(--fx2-rd); } .fx2-ln.fx2-st-blue { stroke: var(--fx2-blue); }

/* ===== Rysunki „realistyczne” (Meteorologia): niebo, chmury z objętością, góry, morze; kolory z motywu ===== */
.fx { --rl-sa: #7fb0dd; --rl-sb: #e2eef9; --rl-na: #0c1830; --rl-nb: #2c4467; --rl-ch: #ffffff; --rl-cl: #b9c7d8; --rl-cline: #8fa3ba; --rl-hl: #ffffff;
  --rl-sh: #aab4c2; --rl-sl: #4c5666; --rl-ga: #a9c38f; --rl-gb: #6f9660; --rl-tree: #3f6a47; --rl-tree2: #2f5a3c; --rl-rl: #bdb6a6; --rl-rd: #6d685c;
  --rl-snow: #ffffff; --rl-snowd: #c5d0de; --rl-wa: #6fb0d8; --rl-wb: #2f6f9f; --rl-soil: #a89c84; --rl-warm: rgba(231,150,50,.24); --rl-cold: rgba(70,130,200,.26); }
[data-theme="dark"] .fx { --rl-sa: #16294a; --rl-sb: #35567e; --rl-na: #060d1a; --rl-nb: #17294a; --rl-ch: #8da2bb; --rl-cl: #3d5169; --rl-cline: #8ea3ba; --rl-hl: #c8d6e6;
  --rl-sh: #566a82; --rl-sl: #232f40; --rl-ga: #2f5646; --rl-gb: #1d3a30; --rl-tree: #1b3b2c; --rl-tree2: #12291f; --rl-rl: #66748a; --rl-rd: #2f3b4d;
  --rl-snow: #c3d0de; --rl-snowd: #7f90a6; --rl-wa: #2a5f8c; --rl-wb: #12304f; --rl-soil: #3a4656; --rl-warm: rgba(240,170,80,.22); --rl-cold: rgba(100,160,230,.24); }
.rl-sa { stop-color: var(--rl-sa); } .rl-sb { stop-color: var(--rl-sb); } .rl-na { stop-color: var(--rl-na); } .rl-nb { stop-color: var(--rl-nb); }
.rl-ch { stop-color: var(--rl-ch); } .rl-cl { stop-color: var(--rl-cl); } .rl-sh { stop-color: var(--rl-sh); } .rl-sl { stop-color: var(--rl-sl); }
.rl-ga { stop-color: var(--rl-ga); } .rl-gb { stop-color: var(--rl-gb); } .rl-wa { stop-color: var(--rl-wa); } .rl-wb { stop-color: var(--rl-wb); }
.rl-ra { stop-color: var(--rl-rl); } .rl-rb { stop-color: var(--rl-rd); }
.rl-f-hl { fill: var(--rl-hl); } .rl-f-snow { fill: var(--rl-snow); } .rl-f-snowd { fill: var(--rl-snowd); } .rl-f-rl { fill: var(--rl-rl); } .rl-f-rd { fill: var(--rl-rd); }
.rl-f-tree { fill: var(--rl-tree); } .rl-f-tree2 { fill: var(--rl-tree2); } .rl-f-soil { fill: var(--rl-soil); } .rl-f-warm { fill: var(--rl-warm); } .rl-f-cold { fill: var(--rl-cold); }
.rl-f-cl { fill: var(--rl-cl); } .rl-f-sl { fill: var(--rl-sl); } .rl-f-sh { fill: var(--rl-sh); }
.rl-cline { fill: none; stroke: var(--rl-cline); stroke-width: .8; opacity: .35; }
.rl-st-hl { fill: none; stroke: var(--rl-hl); stroke-linecap: round; }
.rl-halo { stroke: var(--fx2-surf); stroke-linecap: round; fill: none; opacity: .6; }
.fx { --rl-bc: #cddff0; --rl-bw: #f4dcb6; }
[data-theme="dark"] .fx { --rl-bc: #22394f; --rl-bw: #5b4a37; }
.rl-f-bc { fill: var(--rl-bc); } .rl-f-bw { fill: var(--rl-bw); }