/* CyberKuźnia — style komponentów widoków. */

/* dashboard */
.hero-dash { padding: 22px 0 8px; }
.dash-title { font-size: clamp(28px, 5vw, 44px); margin: 8px 0 12px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; background: var(--bg-card); }
.badge.off { opacity: .38; filter: grayscale(.6); }
.badge .bi { font-size: 30px; }
.badge .bn { color: var(--green-hi); font-weight: 700; margin-top: 4px; font-size: 13px; }
.badge .bd { font-size: 11px; margin-top: 2px; }

.methodology { border: 1px solid var(--line); border-left: 3px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 6%, transparent); border-radius: 6px; padding: 14px 18px; font-size: 13px; color: var(--ink); }
.methodology b { color: var(--amber); }

/* chips (filtry) */
.chip { font: inherit; font-size: 12px; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; cursor: pointer; }
.chip:hover { color: var(--green); border-color: var(--line-strong); }
.chip.on { color: var(--bg-deep); background: var(--green); border-color: var(--green); font-weight: 700; }

/* wiki */
.wiki-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; }
.wiki-nav { position: sticky; top: 64px; align-self: start; }
.wiki-nav a { display: block; padding: 7px 10px; color: var(--muted); border-radius: 6px; font-size: 13px; border-left: 2px solid transparent; }
.wiki-nav a:hover { color: var(--green); background: color-mix(in srgb, var(--green) 6%, transparent); text-decoration: none; }
.wiki-nav a.active { color: var(--green-hi); border-left-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.wiki-content { min-width: 0; }
.wiki-subnav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:8px 0; border-bottom:1px solid var(--line); }
.wiki-subnav a { padding:6px 9px; border-radius:5px; color:var(--muted); font-size:12px; }
.wiki-subnav a.active, .wiki-subnav a:hover { color:var(--green-hi); background:color-mix(in srgb, var(--green) 10%, transparent); text-decoration:none; }
.video-resources { display:grid; gap:8px; margin:10px 0 22px; }
.video-resource { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-left:3px solid var(--red, var(--cyan)); border-radius:6px; background:var(--bg-deep); color:var(--ink); }
.video-resource:hover { border-color:var(--line-strong); text-decoration:none; }
.video-icon { color:var(--green-hi); font-size:20px; line-height:1; }
.video-resource b, .video-resource small, .video-resource em { display:block; }
.video-resource b { color:var(--cyan); margin-bottom:4px; }
.video-resource small { color:var(--amber); font-size:11px; margin-bottom:4px; }
.video-resource em { color:var(--muted); font-size:12px; font-style:normal; }
.wiki-search { width: 100%; font: inherit; font-size: 13px; background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px; margin-bottom: 10px; }
.wiki-search:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.wiki-content h3.wk { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  margin: 26px 0 8px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.wiki-content p { max-width: 72ch; color: var(--ink); }
.root-cause { border-left: 3px solid var(--violet); padding: 10px 14px; background: color-mix(in srgb, var(--violet) 6%, transparent); border-radius: 6px; }
.wiki-deep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 4px; }
.wiki-deep-card { border: 1px solid var(--line); border-top: 2px solid var(--cyan); border-radius: 7px; padding: 12px 14px; background: var(--bg-card); }
.wiki-deep-card h4 { margin: 0 0 7px; color: var(--cyan); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.wiki-deep-card ul { margin-bottom: 0; }
.wiki-deep-card.pitfall { border-top-color: var(--amber); }
.wiki-deep-card.pitfall h4, .wiki-deep-card.severity h4 { color: var(--amber); }
.wiki-deep-card.severity { border-top-color: var(--amber); }
.wiki-deep-card.defense { border-top-color: var(--green); grid-column: 1 / -1; }
.wiki-deep-card.defense h4 { color: var(--green-hi); }
.report-checklist { padding-left: 22px; max-width: 78ch; }
.report-checklist li { margin: 8px 0; color: var(--ink); }
.report-checklist li::marker { color: var(--green); font-weight: 700; }
.wiki-links { display: grid; gap: 7px; }
.wiki-links a { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; background: var(--bg-deep); }
.wiki-links a:hover { border-color: var(--line-strong); text-decoration: none; }
.wiki-links a span { min-width: 72px; color: var(--amber); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* fiszki */
.fc { max-width: 640px; margin: 0 auto; }
.fc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fc-face { background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 40px 28px; text-align: center; cursor: pointer; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.fc-face:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.fc-q { font-size: 20px; color: var(--green-hi); line-height: 1.4; }
.fc-a { font-size: 15px; color: var(--ink); line-height: 1.6; border-top: 1px dashed var(--line); padding-top: 16px; }
.fc-hint { font-size: 12px; }
.fc-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.fc-grades .g { font: inherit; font-size: 13px; cursor: pointer; border-radius: 8px; padding: 10px 4px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.fc-grades .g small { color: var(--muted); font-size: 10px; }
.fc-grades .g:hover { border-color: var(--line-strong); }
.fc-grades .g0:hover { border-color: var(--red); color: var(--red); }
.fc-grades .g2:hover, .fc-grades .g3:hover { border-color: var(--green); color: var(--green-hi); }

/* quiz + gate */
.q-card { max-width: 720px; }
.q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.q-scenario { background: var(--bg-deep); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 6px; padding: 12px 14px; color: var(--ink); margin-bottom: 12px; }
.q-text { font-size: 16px; color: var(--green-hi); margin: 4px 0 14px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.sev-opts { display: grid; grid-template-columns: repeat(2, 1fr); }
.opt { font: inherit; text-align: left; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; color: var(--ink); cursor: pointer; }
.opt:hover:not(:disabled) { border-color: var(--line-strong); background: color-mix(in srgb, var(--green) 6%, transparent); }
.opt:disabled { cursor: default; }
.opt.correct { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-hi); }
.opt.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.expl { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.expl b { color: var(--green-hi); }

/* wspólny interfejs nauki */
.learn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.learn-head h1 { margin: 5px 0 4px; font-size: clamp(30px, 5vw, 46px); }
.learn-head p { max-width: 64ch; margin: 0; color: var(--muted); }
.learn-count { min-width: 120px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); text-align: right; }
.learn-count strong { display: block; color: var(--green-hi); font: 700 27px/1 var(--mono); }
.learn-count span { color: var(--muted); font-size: 11px; }
.learn-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); }
.toolbar-label { margin-left: 4px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-deep); }
.segmented button { min-height: 32px; padding: 5px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 600 12px var(--sans); cursor: pointer; }
.segmented button:hover { color: var(--green-hi); }
.segmented button.on { background: color-mix(in srgb, var(--green) 16%, var(--bg-card)); color: var(--green-hi); }
.btn.compact { min-height: 38px; margin-left: auto; padding: 7px 13px; }
.filter-scroll { display: flex; gap: 6px; margin: 12px 0; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: thin; }
.filter-scroll .chip { flex: 0 0 auto; min-height: 34px; }
.session-progress { margin: 14px 0 22px; color: var(--muted); font: 11px var(--mono); }
.session-progress .bar { margin-top: 7px; }
.session-result { padding: 38px !important; text-align: center; }
.result-icon { font-size: 44px; }
.q-type { color: var(--cyan); }
.q-card { margin-inline: auto; }
.q-card .opt { min-height: 52px; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.q-scenario { padding: 16px 18px; font-size: 14px; line-height: 1.65; }
.q-text { font-family: var(--sans); font-size: 18px; font-weight: 650; }
.expl { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--cyan) 5%, var(--bg-card)); color: var(--ink); }
.expl.answer-ok { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--bg-card)); }
.expl-label { display: block; margin-bottom: 4px; color: var(--cyan); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.expl.answer-ok .expl-label { color: var(--green-hi); }
.expl p { margin: 0; }

/* uproszczony dashboard */
.dashboard-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 0 28px; }
.dashboard-logo img { width: clamp(78px, 15vw, 112px); height: auto; filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--green) 18%, transparent)); }
.dashboard-logo div { color: var(--green-hi); font: 800 clamp(22px, 5vw, 38px)/1 var(--mono); letter-spacing: .16em; }
.dashboard-logo span { color: var(--green-dim); }
.dashboard-stats { margin-top: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quick-card, .quick-grid .daily-card { min-height: 146px; }
.quick-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.quick-card.primary { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--bg-card)); }
.quick-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--bg-deep); color: var(--green); font: 700 22px var(--mono); }
.quick-card h3, .daily-card h3 { margin: 0 0 4px; font-size: 15px; }
.quick-card p, .daily-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.quick-arrow { align-self: end; color: var(--green); font: 22px var(--mono); }
.daily-card { height: 100%; position: relative; }
.daily-card .quick-arrow { position: absolute; right: 18px; bottom: 14px; }
.module-grid .card { min-height: 124px; }
.module-grid h3 { margin: 4px 0 8px; font-size: 15px; }
.dashboard-more { margin-top: 36px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg-card) 82%, transparent); overflow: hidden; }
.dashboard-more summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; color: var(--green-hi); font-weight: 650; cursor: pointer; list-style: none; }
.dashboard-more summary::-webkit-details-marker { display: none; }
.dashboard-more summary span { color: var(--muted); font: 11px var(--mono); }
.dashboard-more[open] summary { border-bottom: 1px solid var(--line); }
.dashboard-more-body { padding: 0 18px 22px; }

@media (max-width: 760px) {
  .learn-head { align-items: flex-start; }
  .learn-count { min-width: 96px; padding: 10px 12px; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-card, .quick-grid .daily-card { min-height: 112px; }
}

@media (max-width: 520px) {
  .learn-head { display: block; margin-bottom: 16px; }
  .learn-head p { font-size: 13px; }
  .learn-count { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 12px; text-align: left; }
  .learn-count strong { font-size: 21px; }
  .learn-toolbar { gap: 8px; padding: 9px; }
  .toolbar-label { width: 100%; margin-top: 2px; }
  .segmented { flex: 1; }
  .segmented button { flex: 1; padding-inline: 7px; }
  .btn.compact { width: 100%; margin-left: 0; }
  .session-result { padding: 28px 16px !important; }
  .q-card .opt { min-height: 56px; padding: 13px; }
  .dashboard-logo { padding: 6px 0 20px; }
  .dashboard-logo div { letter-spacing: .1em; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-stats .tile { padding: 13px; }
  .dashboard-stats .tile .v { font-size: 25px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
  .module-grid .card { min-height: 126px; padding: 14px; }
  .dashboard-more-body { padding-inline: 12px; }
}

/* spot-the-bug code */
.codelines { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.codeline { display: flex; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: 13px;
  background: var(--bg-deep); color: var(--ink); border: none; border-bottom: 1px solid var(--line);
  padding: 7px 12px; cursor: pointer; white-space: pre; }
.codeline:last-child { border-bottom: none; }
.codeline .ln { color: var(--muted); width: 20px; text-align: right; flex: none; user-select: none; }
.codeline:hover:not(:disabled) { background: color-mix(in srgb, var(--cyan) 8%, var(--bg-deep)); }
.codeline.correct { background: color-mix(in srgb, var(--green) 16%, var(--bg-deep)); }
.codeline.wrong { background: color-mix(in srgb, var(--red) 14%, var(--bg-deep)); }

/* CTF list */
.ch-card h3 { color: var(--green-hi); }
.solved-banner { margin-top: 14px; border: 1px solid var(--green-dim); background: color-mix(in srgb, var(--green) 8%, transparent);
  border-radius: 6px; padding: 10px 14px; color: var(--green-hi); font-size: 13px; }
.solved-banner code, .flag-found code, .flag-box code { color: var(--amber); }

/* repeater */
.repeater { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rp-col { min-width: 0; }
.rp-head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dim); margin-bottom: 8px; }
.rp-line { display: flex; gap: 8px; margin-bottom: 10px; }
.rp-line select { font: inherit; background: var(--bg-deep); color: var(--green); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.rp-path { flex: 1; min-width: 0; font: inherit; background: var(--bg-deep); color: var(--amber); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.rp-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.rp-area { width: 100%; font: inherit; font-size: 13px; background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; resize: vertical; }
.rp-resp { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px;
  white-space: pre-wrap; word-break: break-word; min-height: 120px; font-size: 13px; color: var(--ink); overflow-x: auto; }
.rp-path:focus, .rp-area:focus, .rp-line select:focus, .flag-input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* jwt */
.jwt-raw { font-size: 12px; word-break: break-all; white-space: pre-wrap; }
.jwt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* flaga + gate */
.flag-box { margin-top: 22px; border: 1px solid var(--green-dim); border-radius: var(--radius); padding: 18px; background: color-mix(in srgb, var(--green) 5%, var(--bg-card)); }
.flag-found { font-size: 15px; color: var(--green-hi); margin-bottom: 12px; }
.flag-input { flex: 1; min-width: 200px; font: inherit; background: var(--bg-deep); color: var(--amber); border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 12px; }
.gate { border-top: 1px dashed var(--line); }

/* race / parallel lab */
.race-state { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; font-size: 15px; color: var(--ink); }
.race-state b { font-variant-numeric: tabular-nums; }

/* spójny focus dla elementów sterowanych klawiaturą */
.opt:focus-visible, .codeline:focus-visible, .chip:focus-visible,
.fc-grades .g:focus-visible, .card.click:focus-visible, .wiki-nav a:focus-visible,
.badge:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* hint box + stopniowane podpowiedzi */
.hint-box { margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 6%, transparent); border-radius: 6px; padding: 10px 14px; font-size: 13px; color: var(--ink); }
.hints-wrap { margin-top: 14px; }
.hints-wrap .hint-btn { font-size: 12px; padding: 7px 12px; }
.hints-wrap .hint-box b { color: var(--cyan); }

/* heatmapa aktywności */
.heatmap { display: inline-block; }
.hm-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; }
.hm-cell { width: 13px; height: 13px; border-radius: 3px; display: inline-block; background: var(--line); }
.hm-cell.l0 { background: color-mix(in srgb, var(--line) 70%, var(--bg-deep)); }
.hm-cell.l1 { background: color-mix(in srgb, var(--green) 30%, var(--bg-deep)); }
.hm-cell.l2 { background: color-mix(in srgb, var(--green) 55%, var(--bg-deep)); }
.hm-cell.l3 { background: color-mix(in srgb, var(--green) 80%, var(--bg-deep)); }
.hm-cell.l4 { background: var(--green-hi); }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.hm-legend .hm-cell { width: 11px; height: 11px; }

/* wyzwanie dnia */
.daily-card { border-left: 3px solid var(--amber); }

/* łańcuchy — stepper */
.chain-steps { display: flex; flex-direction: column; gap: 14px; }
.chain-step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
.chain-step.locked { opacity: .5; }
.chain-step.active { border-color: var(--green-dim); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent); }
.chain-step.done { border-color: var(--green-dim); }
.cs-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.cs-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-deep); border: 1px solid var(--line-strong); color: var(--green-hi); font-weight: 700; }
.chain-step.done .cs-num { background: var(--green); color: var(--bg-deep); border-color: var(--green); }
.cs-title { color: var(--green-hi); font-weight: 700; }
.cs-state { margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: none; }
.cs-body:not(:empty) { padding: 0 16px 16px; }
.chain-complete { text-align: center; border: 1px solid var(--green-dim); border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 6%, var(--bg-card)); padding: 30px; margin-top: 20px; }
.chain-complete code { color: var(--amber); }

/* bug bounty — przewodnik po programach */
.bounty-hero { padding: 22px 0 8px; max-width: 900px; }
.bounty-hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 8px 0 12px; }
.bounty-warning { margin-top: 16px; line-height: 1.65; }
.bounty-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bounty-type { border: 1px solid var(--line); border-top: 2px solid var(--cyan); border-radius: var(--radius);
  padding: 16px; background: var(--bg-card); }
.bounty-type > span { color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.bounty-type h3 { color: var(--green-hi); font-size: 15px; margin: 8px 0; }
.bounty-type p, .bounty-platform p { color: var(--ink); font-size: 13px; line-height: 1.6; margin-bottom: 0; }
.bounty-flow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bounty-flow li { display: flex; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent); }
.bounty-flow li:last-child { grid-column: 1 / -1; }
.bounty-step { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--green-dim);
  border-radius: 50%; color: var(--green-hi); font-size: 11px; font-weight: 700; }
.bounty-flow h3 { color: var(--green-hi); font-size: 14px; margin: 1px 0 6px; }
.bounty-flow p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.bounty-intro { max-width: 78ch; margin: -7px 0 14px; }
.bounty-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bounty-platform h3 { color: var(--green-hi); margin: 0; }
.bounty-platform .row { margin-top: 15px; }
.bounty-level { border: 1px solid var(--line); border-radius: 20px; color: var(--amber); padding: 4px 9px;
  font-size: 10px; white-space: nowrap; }
.bounty-region { color: var(--cyan); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.bounty-direct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bounty-direct a { display: flex; flex-direction: column; min-height: 150px; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; background: var(--bg-card); color: var(--ink); }
.bounty-direct a:hover, .bounty-learn a:hover { border-color: var(--green-dim); text-decoration: none; transform: translateY(-1px); }
.bounty-direct strong { color: var(--green-hi); }
.bounty-direct span { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 8px 0; }
.bounty-direct i { margin-top: auto; color: var(--cyan); font-size: 11px; font-style: normal; }
.bounty-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bounty-report, .bounty-no-reward { height: calc(100% - 57px); }
.bounty-report ol, .bounty-no-reward ul { padding-left: 22px; }
.bounty-report li, .bounty-no-reward li { color: var(--ink); font-size: 13px; line-height: 1.55; margin: 8px 0; }
.bounty-report li::marker { color: var(--green); font-weight: 700; }
.bounty-no-reward li::marker { color: var(--amber); }
.bounty-learn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bounty-learn a { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; background: var(--bg-card); transition: .15s ease; }
.bounty-learn a > span { grid-row: 1 / 3; color: var(--amber); font-size: 10px; letter-spacing: .08em; }
.bounty-learn strong { color: var(--green-hi); font-size: 13px; }
.bounty-learn p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 5px 0 0; }
.bounty-finish { margin-top: 24px; }

/* podstawy WWW — kurs zerowy */
.web-hero { padding: 22px 0 8px; max-width: 900px; }
.web-hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; margin: 8px 0 12px; }
.web-goal { margin-top: 18px; border-left: 3px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, transparent);
  border-radius: 6px; padding: 12px 15px; color: var(--ink); font-size: 13px; }
.web-goal b { color: var(--cyan); }
.web-toc { position: sticky; top: 57px; z-index: 20; display: flex; flex-wrap: wrap; gap: 5px; margin: 22px 0 8px;
  padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(8px); }
.web-toc a { color: var(--muted); border-radius: 16px; padding: 4px 9px; font-size: 11px; }
.web-toc a:hover { color: var(--green-hi); background: color-mix(in srgb, var(--green) 8%, transparent); text-decoration: none; }
.web-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.web-journey article { position: relative; border: 1px solid var(--line); border-top: 2px solid var(--green-dim);
  border-radius: 7px; padding: 13px 11px; background: var(--bg-card); min-width: 0; }
.web-journey article:not(:last-child)::after { content: "›"; position: absolute; right: -8px; top: 28px; z-index: 2; color: var(--green); }
.web-journey-num { color: var(--muted); font-size: 9px; }
.web-journey i { display: block; color: var(--cyan); font-size: 19px; font-style: normal; margin: 8px 0; }
.web-journey h3 { font-size: 13px; margin: 0 0 6px; }
.web-journey p, .web-url-parts p, .web-anatomy p, .web-statuses p, .web-headers p, .web-formats p,
.web-foundations p, .web-state p, .web-security p, .web-api p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; }
.web-url { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-deep); padding: 16px;
  overflow-x: auto; font-size: clamp(12px, 2vw, 16px); }
.web-url code { color: var(--amber); white-space: nowrap; }
.web-url-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0; }
.web-url-parts article { border: 1px solid var(--line); border-radius: 7px; padding: 11px 13px; background: var(--bg-card); }
.web-url-parts code { color: var(--amber); display: block; overflow-wrap: anywhere; }
.web-url-parts strong { color: var(--cyan); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0; }
.web-message-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.web-message-grid article { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.web-message-head { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line);
  color: var(--cyan); font-size: 11px; font-weight: 700; }
.web-message-head.response { color: var(--green-hi); }
.web-message-head small { color: var(--muted); font-weight: 400; }
.web-message-grid pre { margin: 0; padding: 15px; background: var(--bg-deep); color: var(--ink); overflow-x: auto;
  min-height: 220px; font: 12px/1.6 var(--mono); white-space: pre; }
.web-anatomy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.web-anatomy article { border-left: 2px solid var(--green-dim); padding: 8px 11px; background: color-mix(in srgb, var(--green) 3%, transparent); }
.web-anatomy b { color: var(--green-hi); font-size: 12px; }
.web-subtitle { color: var(--green-hi); font-size: 15px; margin: 30px 0 12px; }
.web-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.web-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--bg-card); font-size: 12px; }
.web-table th { text-align: left; color: var(--green-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--bg-deep); }
.web-table th, .web-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.web-table tbody tr:last-child td { border-bottom: 0; }
.web-table code { color: var(--amber); font-weight: 700; }
.web-statuses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.web-statuses article { border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: var(--bg-card); }
.web-statuses strong { color: var(--amber); display: block; font-size: 20px; }
.web-statuses b { color: var(--ink); display: block; font-size: 12px; }
.web-statuses code { color: var(--cyan); display: block; font-size: 10px; margin: 5px 0; }
.web-headers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.web-headers article { display: grid; grid-template-columns: minmax(150px, .7fr) 80px 1.5fr; gap: 10px; align-items: start;
  border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; background: var(--bg-card); }
.web-headers code { color: var(--amber); overflow-wrap: anywhere; }
.web-headers span { color: var(--cyan); font-size: 9px; text-transform: uppercase; }
.web-formats, .web-foundations, .web-state, .web-security, .web-api { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.web-formats article, .web-foundations article, .web-state article, .web-security article, .web-api article {
  border: 1px solid var(--line); border-radius: 7px; padding: 13px; background: var(--bg-card); }
.web-formats code { color: var(--cyan); font-size: 10px; overflow-wrap: anywhere; }
.web-formats pre { color: var(--amber); font: 11px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 9px 0; }
.web-foundations h3, .web-state h3, .web-api h3 { color: var(--green-hi); font-size: 13px; margin: 0 0 7px; }
.web-code-note { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 1px solid var(--line);
  border-radius: 8px; padding: 15px; background: var(--bg-card); margin-top: 12px; }
.web-code-note pre { margin: 0; padding: 13px; background: var(--bg-deep); border-radius: 6px; overflow-x: auto; color: var(--ink); font: 11px/1.6 var(--mono); }
.web-code-note h3 { margin-top: 0; font-size: 13px; }
.web-code-note li { color: var(--muted); font-size: 12px; margin: 6px 0; }
.web-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding-left: 22px; }
.web-check-list li { color: var(--ink); font-size: 12px; }
.web-check-list li::marker { color: var(--green); }
.web-flow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px;
  border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--bg-deep); }
.web-flow-line span { color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 4px 10px; font-size: 11px; }
.web-flow-line i { color: var(--green); font-style: normal; }
.web-security article { border-top: 2px solid var(--cyan); }
.web-security span { color: var(--cyan); font-weight: 700; font-size: 13px; display: block; margin-bottom: 6px; }
.web-workflow { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.web-workflow li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 7px;
  padding: 11px 13px; background: var(--bg-card); }
.web-workflow span { color: var(--green); font-size: 10px; }
.web-workflow p { color: var(--ink); font-size: 12px; margin: 0; }
.web-hypothesis { display: grid; gap: 8px; border-left: 3px solid var(--amber); border-radius: 6px; padding: 12px 15px;
  background: color-mix(in srgb, var(--amber) 6%, transparent); }
.web-hypothesis b { color: var(--amber); font-size: 11px; text-transform: uppercase; }
.web-hypothesis code { color: var(--ink); white-space: normal; }
.web-ready-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.web-ready-head p { color: var(--muted); margin: 0 0 9px; }
.web-ready-head strong { color: var(--amber); font-size: 18px; white-space: nowrap; }
.web-ready-bar { margin-bottom: 12px; }
.web-ready-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.web-ready-list label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 12px; background: var(--bg-card); cursor: pointer; }
.web-ready-list label:has(input:checked) { border-color: var(--green-dim); background: color-mix(in srgb, var(--green) 7%, var(--bg-card)); }
.web-ready-list input { accent-color: var(--green); margin-top: 3px; }
.web-ready-list span { color: var(--ink); font-size: 12px; }
.web-ready-result { margin-top: 12px; padding: 10px 13px; border-radius: 6px; background: var(--bg-deep); color: var(--muted); font-size: 12px; }
.web-ready-result.complete { color: var(--green-hi); border: 1px solid var(--green-dim); }
.web-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.web-links a { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 7px; padding: 10px 12px; background: var(--bg-card); }
.web-links a:hover { border-color: var(--green-dim); text-decoration: none; }
.web-links span { color: var(--amber); font-size: 9px; letter-spacing: .08em; }
.web-links strong { color: var(--ink); font-size: 12px; }
.web-links i { color: var(--cyan); font-style: normal; }

/* egzamin */
.exam-timer { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green-hi);
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 16px; }
.exam-timer.low { color: var(--red); border-color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .exam-timer.low { animation: none; } }

/* responsywność */
@media (max-width: 820px) {
  .wiki-layout { grid-template-columns: 1fr; }
  .wiki-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .wiki-deep-grid { grid-template-columns: 1fr; }
  .wiki-deep-card.defense { grid-column: auto; }
  .repeater, .jwt-grid { grid-template-columns: 1fr; }
  .sev-opts { grid-template-columns: 1fr; }
  .bounty-types, .bounty-platforms, .bounty-direct, .bounty-two-col, .bounty-learn { grid-template-columns: 1fr; }
  .bounty-flow { grid-template-columns: 1fr; }
  .bounty-flow li:last-child { grid-column: auto; }
  .web-journey { grid-template-columns: repeat(2, 1fr); }
  .web-journey article:not(:last-child)::after { display: none; }
  .web-url-parts, .web-statuses, .web-formats, .web-foundations, .web-state, .web-security, .web-api { grid-template-columns: 1fr 1fr; }
  .web-message-grid, .web-code-note, .web-workflow, .web-ready-list, .web-links { grid-template-columns: 1fr; }
  .web-anatomy { grid-template-columns: 1fr 1fr; }
  .web-headers { grid-template-columns: 1fr; }
  .web-toc { position: static; }
}
@media (max-width: 520px) {
  .web-journey, .web-url-parts, .web-statuses, .web-formats, .web-foundations, .web-state, .web-security, .web-api,
  .web-check-list { grid-template-columns: 1fr; }
  .web-headers article { grid-template-columns: 1fr; gap: 4px; }
  .web-message-grid pre { min-height: 0; }
}