/* ComproCast — Jasny Interfejs Instytucjonalny (Light UI) wg Księgi Znaku. */
:root {
  --bg: #F8FAFC;
  --subtle: #F1F5F9;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #475569;
  --faint: #64748B;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --danger: #B91C1C;
  --success: #047857;
  --live: #E11D48;
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --stage-bg: #0B0D13;
  --wrap: 1280px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(56, 198, 217, .25); }
a { color: var(--brand); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.1rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Widoczny fokus klawiatury (WCAG 2.4.7) — kontrast ≥ 3:1. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ---------- pasek dostępności i nagłówek ---------- */
.a11y-bar { background: var(--subtle); border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.a11y-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 6px; padding-bottom: 6px; }
.a11y-intro { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a11y-intro .tag {
  flex: none; padding: 1px 9px; border-radius: 6px; background: var(--surface); border: 1px solid #BAE6FD; color: #075985; font-weight: 700;
}
.a11y-tools { display: flex; align-items: center; gap: 4px; background: var(--surface); padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border); }
.a11y-tools > span { color: var(--faint); font-weight: 500; margin-right: 2px; }
.a11y-tools button {
  height: auto; padding: 2px 7px; border: none; background: transparent; box-shadow: none; border-radius: 5px; font-size: .78rem; font-weight: 700; color: var(--text);
}
.a11y-tools button:hover { background: var(--subtle); }
.a11y-tools button[aria-pressed=true] { background: var(--text); color: #fff; }
.a11y-tools .sep { width: 1px; height: 14px; background: var(--border-strong); margin: 0 4px; }
@media (max-width: 640px) { .a11y-intro .text { display: none; } }

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 80px; }
.brand-lockup { display: flex; align-items: center; gap: 20px; text-decoration: none; }
.brand-logo { display: block; flex: none; }
/* Pełne logo: min. 150 px szerokości (Księga Znaku, układ A). */
.brand-logo img { display: block; height: 56px; width: auto; min-width: 160px; }
@media (max-width: 639px) { .brand-logo img { height: 36px; min-width: 96px; } .site-header .wrap { min-height: 64px; gap: 12px; } }
.partner-badge {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: var(--radius-md);
  background: rgba(240, 249, 255, .8); border: 1px solid #BAE6FD; line-height: 1.25; font-size: .75rem; color: var(--muted);
}
.partner-badge b { display: block; color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
.partner-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc-teal); flex: none; }
.partner-divider { width: 1px; align-self: stretch; margin: 18px 0; background: var(--border-strong); }
@media (max-width: 1023px) { .partner-badge, .partner-divider { display: none; } }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.site-footer { margin-top: 48px; padding: 28px 0; background: var(--surface); border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer .foot-brand { display: flex; align-items: center; gap: 16px; }
.site-footer .foot-brand img { height: 40px; width: auto; }
.site-footer b { display: block; color: var(--text); }
.site-footer .foot-links { text-align: right; }
.site-footer .foot-links a { color: var(--muted); margin-left: 12px; }
@media (max-width: 640px) { .site-footer .foot-links { text-align: left; } .site-footer .foot-links a { margin: 0 12px 0 0; } }

/* ---------- odznaki ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 6px; background: var(--subtle); color: var(--muted); border: 1px solid var(--border);
}
.badge.live { background: var(--live); border-color: var(--live); color: #fff; }
.badge.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.badge.video { background: #F0F9FF; border-color: #BAE6FD; color: #075985; }
.badge.waiting { background: #F0F9FF; border-color: #BAE6FD; color: #075985; }
.badge.replay { background: #F5F3FF; border-color: #DDD6FE; color: #5B21B6; }
.badge.ended { background: var(--subtle); color: var(--muted); }
.badge.free { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; text-transform: none; letter-spacing: 0; }
.pill { display: inline-flex; padding: 3px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #F0F9FF; color: #075985; border: 1px solid #BAE6FD; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- karty, formularze, przyciski ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-xs);
}
label { display: block; font-weight: 600; margin-bottom: 14px; }
label > span { display: block; margin-bottom: 5px; font-size: .82rem; color: var(--text); }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], input[type=number], input[type=search], textarea, select {
  width: 100%; font: inherit; font-size: .9rem; color: var(--text); background: var(--bg);
  padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
input::placeholder, textarea::placeholder { color: #94A3B8; }
input:focus, textarea:focus, select:focus { background: var(--surface); border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 0; }
textarea { resize: vertical; min-height: 80px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .85rem; color: var(--muted); cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); transition: border-color .15s, opacity .15s, background .15s;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--brand); }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--brand-gradient); border-color: transparent; color: var(--brand-contrast); }
.btn-primary:hover:not(:disabled), a.btn-primary:hover { border-color: transparent; opacity: .93; }
.btn-live { background: var(--live); border-color: var(--live); color: #fff; }
.btn-live:hover:not(:disabled) { border-color: var(--live); opacity: .93; }
.btn-danger { color: var(--danger); }
.btn-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-block { width: 100%; padding: 12px; }
.error { color: var(--danger); font-size: .88rem; min-height: 1.4em; margin: 8px 0 0; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }

/* ---------- strona dołączania ---------- */
.join-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; padding-top: 32px; }
@media (max-width: 960px) { .join-wrap { grid-template-columns: 1fr; padding-top: 20px; } }
.event-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.event-card .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.event-card h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.event-card .desc { color: var(--muted); white-space: pre-wrap; margin: 0; }
.event-card .meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.speaker { display: flex; align-items: center; gap: 12px; }
.speaker img { width: 40px; height: 40px; object-fit: contain; }
.speaker b { display: block; font-size: .85rem; }
.speaker span { font-size: .8rem; color: var(--muted); }
.when-line { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; font-weight: 600; }
.cal-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.join-card { padding: 32px; display: flex; flex-direction: column; }
.join-card .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.join-card .head h2 { margin: 0; }
.join-card .intro { color: var(--muted); font-size: .85rem; margin: 0 0 18px; }
.join-card .foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: .78rem; color: var(--faint); }
.join-card form { margin-bottom: 14px; }
.message-wrap { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.message-wrap .card { text-align: center; padding: 40px 28px; }
.message-wrap img { height: 52px; margin-bottom: 18px; }
.eyebrow { color: #5B21B6; font-weight: 700; font-size: .78rem; margin: 0; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- program (agenda) ---------- */
.agenda h3 { font-size: .85rem; margin-bottom: 10px; }
.agenda-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.agenda-list li { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: .8rem; }
.agenda-list time { display: block; font-weight: 700; color: var(--faint); font-size: .75rem; }
.agenda-list li.done time { color: var(--success); }
.agenda-list li.now { border: 2px solid var(--brand); background: var(--brand-soft); padding: 9px 11px; }
.agenda-list li.now time { color: var(--brand); }
.agenda-list li.now span { font-weight: 700; }

/* ---------- sala (pokój) ---------- */
.room {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; padding-top: 20px;
  grid-template-areas: "bar side" "stage side" "below side" "agenda side";
  grid-template-rows: auto auto auto 1fr;
}
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-radius: var(--radius-md); }
.room-bar .room-title { font-weight: 700; font-size: .9rem; min-width: 0; flex: 1; }
.room-bar .room-meta { display: flex; gap: 14px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-card { padding: 12px; background: var(--brand-soft-gradient); }
.below-stage { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.room > .room-bar { grid-area: bar; }
.room > .stage-card { grid-area: stage; }
.room > .below-stage { grid-area: below; }
.room > .agenda { grid-area: agenda; padding: 16px 18px; align-self: start; }
.room > .room-side { grid-area: side; }
.room-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.side-card { position: relative; flex: 1; min-height: 480px; padding: 0; overflow: hidden; }
.side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
@media (max-width: 1000px) {
  .room { grid-template-columns: 1fr; grid-template-areas: "bar" "stage" "below" "cta" "side" "agenda"; grid-template-rows: none; }
  .room-side { display: contents; }
  .room-side .cta-slot { grid-area: cta; }
  .room-side .side-card { grid-area: side; min-height: 62vh; }
}

/* ---------- zakładki ---------- */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--subtle); border-bottom: 1px solid var(--border); }
.tabs button {
  height: auto; padding: 8px 6px; border: none; box-shadow: none; background: transparent; color: var(--muted);
  font-size: .8rem; font-weight: 500; border-radius: 9px;
}
.tabs button:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,.6); }
.tabs button[aria-selected=true] { background: var(--brand-gradient); color: #fff; font-weight: 600; }
.tabs .count { font-size: .7rem; padding: 0 6px; border-radius: 999px; background: rgba(15,23,42,.08); }
.tabs button[aria-selected=true] .count { background: rgba(255,255,255,.25); }
.tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- scena ---------- */
.stage {
  position: relative; background: var(--stage-bg); border-radius: var(--radius-md);
  overflow: hidden; aspect-ratio: 16 / 9; width: 100%; margin: 0 auto; color: #fff;
}
.stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.stage .layer { position: absolute; inset: 0; display: none; }
.stage[data-state=video] .layer-video { display: block; }
.stage[data-state=live] .layer-live { display: block; }
.stage .live-main { position: absolute; inset: 0; display: grid; gap: 6px; }
.stage .live-main[data-count="2"] { grid-template-columns: 1fr 1fr; padding: 6px; align-content: center; }
.stage .live-main[data-count="3"], .stage .live-main[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 6px; }
.stage .live-main[data-count="2"] .tile { aspect-ratio: 16 / 9; }
.stage .tile { position: relative; min-height: 0; overflow: hidden; border-radius: 8px; background: #000; }
.stage .live-main[data-count="1"] .tile { border-radius: 0; }
.stage .live-main[data-count]:not([data-count="1"]) video { object-fit: cover; }

/* Belka prelegenta (lower-third): pełnokolorowy sygnet na ciemnym tle. */
.stage .tile-name {
  position: absolute; left: 3%; bottom: 5%; max-width: 70%; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 10px; background: rgba(11, 13, 19, .88); border: 1px solid var(--cc-aqua);
  color: #fff; line-height: 1.2; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.stage .tile-name img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.stage .tile-name b { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .tile-name small { display: block; font-size: .72rem; color: var(--cc-aqua); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .live-main[data-count]:not([data-count="1"]) .tile-name { padding: 4px 10px 4px 6px; gap: 6px; }
.stage .live-main[data-count]:not([data-count="1"]) .tile-name img { width: 20px; height: 20px; }
.stage .live-main[data-count]:not([data-count="1"]) .tile-name small { display: none; }
.stage .live-pip {
  position: absolute; right: 14px; bottom: 14px; width: 20%;
  display: flex; flex-direction: column; gap: 8px;
}
.stage .live-pip:empty { display: none; }
.stage .live-pip .tile { aspect-ratio: 16 / 9; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.stage .live-pip video { object-fit: cover; }
.stage .live-pip .tile-name { left: 4px; bottom: 4px; padding: 2px 6px; gap: 0; border-radius: 6px; border-width: 0; }
.stage .live-pip .tile-name img, .stage .live-pip .tile-name small { display: none; }
.stage .live-pip .tile-name b { font-size: .68rem; }
.stage video.mirror { transform: scaleX(-1); }

/* Oznaczenie narożne transmisji (corner bug). */
.stage .corner-bug {
  position: absolute; top: 3.3%; right: 1.9%; z-index: 3; display: none; pointer-events: none;
  padding: 6px 12px; border-radius: 10px; background: rgba(11, 13, 19, .82);
}
.stage .corner-bug img { display: block; width: clamp(150px, 9vw, 170px); height: auto; }
/* Na wąskiej scenie pełne logo zasłaniałoby obraz, a poniżej 150 px nie wolno go zmniejszać. */
@media (max-width: 760px) { .stage .corner-bug { display: none !important; } }
.stage[data-state=live][data-has-video=yes] .corner-bug { display: block; }

.stage .overlay {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 8px;
  background: radial-gradient(ellipse at 50% 30%, #1E293B 0%, var(--stage-bg) 75%);
}
.stage .overlay::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand-line); }
.stage .overlay .ov-logo { width: clamp(150px, 26%, 300px); height: auto; margin-bottom: 10px; }
.stage .overlay h2 { font-size: clamp(1rem, 2.4vw, 1.6rem); margin: 0; color: #fff; }
.stage .overlay p { margin: 0; color: #CBD5E1; }
.stage[data-state=waiting] .ov-waiting,
.stage[data-state=ended] .ov-ended,
.stage[data-state=video][data-phase=after] .ov-after,
.stage[data-state=live][data-has-video=no] .ov-connecting { display: flex; }

.spinner {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 8px;
  border: 3px solid rgba(255,255,255,.2); border-top-color: var(--cc-aqua); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.stage .unmute {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  background: var(--brand-gradient); color: #fff; border: none; padding: 14px 22px; font-size: 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

/* Studio: podgląd kamery prowadzącego, zanim przejdzie na żywo. */
.stage.host[data-state=waiting][data-has-video=yes] .layer-live { display: block; }
.stage.host[data-state=waiting][data-has-video=yes] .ov-waiting { display: none; }

/* Kontrolki odtwarzacza widza */
.stage-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  opacity: 0; transition: opacity .2s;
}
.stage:hover .stage-controls, .stage.show-controls .stage-controls, .stage-controls:focus-within { opacity: 1; }
.stage[data-state=waiting] .stage-controls, .stage[data-state=ended] .stage-controls { display: none; }
.stage .sc-btn { background: transparent; border: none; color: #fff; padding: 6px; border-radius: 6px; box-shadow: none; }
.stage .sc-btn:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.stage .sc-volume { width: 100px; accent-color: #fff; }
.stage .sc-spacer { flex: 1; }
.stage:fullscreen { border-radius: 0; aspect-ratio: auto; }
.stage:fullscreen .live-pip { width: 18%; }
@media (hover: none) { .stage .sc-volume { display: none; } }

/* Reakcje */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.reactions button { padding: 6px 12px; font-size: .82rem; font-weight: 500; }
.reaction-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.reaction-float {
  position: absolute; bottom: 8%; font-size: clamp(1.4rem, 3vw, 2.2rem); animation: float-up 2.6s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@keyframes float-up {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  12% { opacity: 1; transform: translateY(-8%) scale(1); }
  100% { transform: translateY(-260%) translateX(var(--drift, 0)); opacity: 0; }
}
.reaction-toast { font-size: .8rem; color: var(--brand); font-weight: 600; }

/* ---------- czat ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat .messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat .msg { position: relative; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: .85rem; }
.chat .msg .who { font-weight: 700; font-size: .8rem; }
.chat .msg .who time { font-weight: 400; color: var(--faint); margin-left: 6px; font-size: .75rem; }
.chat .msg .text { white-space: pre-wrap; word-wrap: break-word; color: var(--text); }
.chat .msg.host { background: #F0F9FF; border-color: #BAE6FD; }
.chat .msg.host .who { color: #075985; }
.chat .empty { color: var(--muted); font-size: .85rem; margin: auto; text-align: center; }
.chat form, .side-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.chat form input, .side-form input { flex: 1; min-width: 0; }
.chat .msg-del {
  margin-left: 6px; padding: 2px; height: auto; width: auto; border: none; background: transparent; box-shadow: none !important;
  color: var(--faint); vertical-align: middle; opacity: 0; cursor: pointer;
}
.chat .msg-del svg { width: 14px; height: 14px; }
.chat .msg:hover .msg-del, .chat .msg-del:focus-visible { opacity: 1; }
.chat .msg-del:hover { color: var(--danger); }

/* ---------- pytania (Q&A) ---------- */
.qa-intro { padding: 12px 16px 0; margin: 0; font-size: .8rem; color: var(--muted); }
.qa-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.qa-item { padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); font-size: .85rem; display: grid; gap: 6px; }
.qa-item.mine { background: rgba(240, 249, 255, .7); border-color: #BAE6FD; }
.qa-item.answered { opacity: .85; }
.qa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qa-head b { font-size: .8rem; }
.qa-head small { display: block; color: var(--faint); font-size: .74rem; }
.qa-text { margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.vote {
  flex: none; height: auto; padding: 2px 9px; border-radius: 6px; font-size: .78rem; font-weight: 700;
  background: #E0F2FE; color: #075985; border: 1px solid #BAE6FD; box-shadow: none;
}
.vote[aria-pressed=true] { background: #075985; color: #fff; border-color: #075985; }
.qa-answer { margin: 0; padding: 7px 9px; border-radius: 8px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; font-size: .8rem; font-weight: 500; }
.qa-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-actions button { height: 28px !important; padding: 0 9px !important; font-size: .76rem !important; }
.qa-reply { display: flex; gap: 6px; }
.qa-reply input { padding: 6px 10px; font-size: .8rem; }

/* ---------- materiały ---------- */
.materials { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.material { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); }
.material b { display: block; font-size: .82rem; }
.material small { display: block; color: var(--muted); font-size: .75rem; }
.material.cert { background: #ECFDF5; border-color: #A7F3D0; }
.material .btn { padding: 6px 11px; font-size: .78rem; flex: none; }

/* ---------- CTA ---------- */
.cta-slot:empty { display: none; }
.cta-bar {
  display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--subtle); border: 1px solid var(--border); animation: cta-in .35s ease-out;
}
.cta-bar p { margin: 0; font-size: .85rem; color: var(--muted); }
.cta-bar p b { display: block; color: var(--text); font-size: .9rem; }
.cta-bar .btn { padding: 11px 18px; }
@keyframes cta-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- odtwarzanie po webinarze ---------- */
.replay-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; padding-top: 20px; align-items: start; }
.replay-wrap .replay-main { display: grid; gap: 14px; }
.replay-wrap .replay-side { display: grid; gap: 16px; }
.replay-wrap .replay-side .side-card { min-height: 360px; }
.replay-wrap video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-md); display: block; }
@media (max-width: 1000px) { .replay-wrap { grid-template-columns: 1fr; } }

/* ---------- ankieta ---------- */
.survey-dialog {
  border: none; border-radius: var(--radius); padding: 28px; width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(15,23,42,.3);
}
.survey-dialog::before { content: ''; display: block; height: 4px; margin: -28px -28px 22px; background: var(--brand-line); }
.survey-dialog::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.survey-q { margin: 0 0 18px; border: none; padding: 0; }
.survey-q legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.survey-q legend .req { color: var(--danger); }
.stars { display: flex; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { margin: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--border-strong); transition: color .1s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #F59E0B; }
.stars input:focus-visible + label { outline: 2px solid var(--focus); border-radius: 4px; }
.choice-list label { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0 0 8px; cursor: pointer; }
.choice-list input { accent-color: var(--brand); width: 16px; height: 16px; }
.survey-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- portal (strona główna) ---------- */
.portal { display: grid; gap: 32px; padding-top: 32px; }
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 18px 20px; }
.highlight { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px; }
.highlight + .highlight { border-left: 1px solid var(--border); }
.highlight:first-child { padding-left: 0; }
.highlight .num { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: .75rem; font-weight: 700; border: 1px solid; }
.highlight:nth-child(4n+1) .num { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
.highlight:nth-child(4n+2) .num { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.highlight:nth-child(4n+3) .num { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.highlight:nth-child(4n+4) .num { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.highlight h2 { font-family: var(--font); font-size: .8rem; margin: 0; }
.highlight p { margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 1000px) {
  .highlights { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .highlight:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .highlights { grid-template-columns: 1fr; }
  .highlight { padding: 0; } .highlight + .highlight { border-left: none; border-top: 1px solid var(--border); padding-top: 14px; }
}
.catalog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.catalog-head h2 { font-size: 1.2rem; margin: 0; }
.catalog-head p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { padding: 6px 12px; font-size: .78rem; font-weight: 500; border-color: var(--border); color: var(--muted); }
.filters button[aria-pressed=true] { background: var(--brand-gradient); color: #fff; border-color: transparent; font-weight: 600; }
.catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .catalog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .catalog { grid-template-columns: 1fr; } }
.webinar-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; transition: border-color .15s; }
.webinar-card:hover { border-color: #0EA5E9; }
.webinar-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .75rem; color: var(--faint); font-weight: 500; }
.webinar-card .cat { font-size: .75rem; font-weight: 700; color: #0369A1; }
.webinar-card h3 { font-family: var(--font); font-size: 1rem; line-height: 1.35; margin: 0; }
.webinar-card p { margin: 0; font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.webinar-card .bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.webinar-card .bottom span { font-size: .78rem; font-weight: 600; min-width: 0; }
.webinar-card .bottom .btn { padding: 7px 13px; font-size: .78rem; flex: none; }
.catalog-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); }
.search-field:focus-within { background: var(--surface); border-color: var(--brand); }
.search-field svg { color: #94A3B8; flex: none; }
.search-field input { border: none; background: transparent; padding: 8px 0; outline: none !important; width: 220px; font-size: .82rem; }
@media (max-width: 760px) { .site-header .search-field { display: none; } }

/* ---------- dostępność: większy tekst, wysoki kontrast ---------- */
html.a11y-large { font-size: 112%; }
body.a11y-contrast {
  --bg: #FFFFFF; --subtle: #FFFFFF; --muted: #1E293B; --faint: #334155; --border: #0F172A; --border-strong: #0F172A;
  --brand: #1E3A8A; --brand-gradient: linear-gradient(#1E3A8A, #1E3A8A); --brand-soft-gradient: #FFFFFF;
  color: #000;
}
body.a11y-contrast .card, body.a11y-contrast .msg, body.a11y-contrast .qa-item, body.a11y-contrast .material,
body.a11y-contrast input, body.a11y-contrast textarea, body.a11y-contrast select, body.a11y-contrast button, body.a11y-contrast .btn {
  border-width: 2px; box-shadow: none;
}
body.a11y-contrast .partner-badge, body.a11y-contrast .badge, body.a11y-contrast .pill { border: 2px solid #0F172A; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}