/* ==========================================================================
   JAAQOB - animowane ekrany tabletu (proces, kroki 4 i 5)
   Wymaga wdrożonego jq-www-device-scroll.css (obudowa .jq-www-device).
   Sceny: [data-jq-scene="code"] i [data-jq-scene="launch"].
   Animacje startują, gdy JS doda klasę .is-run do .jq-www-scene.
   Stan bazowy (bez .is-run) to początek animacji.
   ========================================================================== */

/* --- Wspólne ----------------------------------------------------------- */
.jq-www-device__chrome--status { box-shadow: none; }

.jq-www-device__app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.jq-www-scene {
  position: absolute;
  inset: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.jq-www-scene svg { display: block; }

/* Wygaszenie na końcu cyklu i pojawienie się przy kolejnym */
.jq-www-scene.is-run .jq-www-scene__fade {
  animation: jq-www-scene-out var(--jq-scene-dur, 16s) linear both;
}
.jq-www-scene.is-run.is-loop .jq-www-scene__fade {
  animation-name: jq-www-scene-inout;
}
@keyframes jq-www-scene-out {
  0%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes jq-www-scene-inout {
  0% { opacity: 0; }
  3%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes jq-www-show {
  from { opacity: 0; transform: translateY(0.4cqw); }
  to { opacity: 1; transform: none; }
}
@keyframes jq-www-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jq-www-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes jq-www-window {
  0%, 99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes jq-www-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes jq-www-spin { to { transform: rotate(360deg); } }
@keyframes jq-www-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.45); }
  70%, 100% { box-shadow: 0 0 0 0.6cqw rgba(46, 160, 67, 0); }
}

/* ==========================================================================
   Scena 4 - edytor kodu i testy
   ========================================================================== */
.jq-www-code {
  --code-bg: #1e1e1e;
  --code-side: #181818;
  --code-line: #2b2b2b;
  --code-text: #d4d4d4;
  --code-dim: #6e7681;
  --code-accent: #ef6d5e;
  --code-ok: #3fb950;
  --code-fs: 1.45cqw;
  --code-lh: 2.36cqw;

  display: grid;
  grid-template-columns: 2.6cqw 15.5cqw minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 1.75cqw;
  background: var(--code-bg);
  color: var(--code-text);
  font-size: 1.05cqw;
}

/* Pasek aktywności */
.jq-www-code__activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqw;
  padding-top: 1.2cqw;
  background: var(--code-side);
  border-right: 1px solid var(--code-line);
  color: #858585;
}
.jq-www-code__activity svg {
  width: 1.45cqw;
  height: 1.45cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jq-www-code__activity .is-active { color: #e6e6e6; }

/* Eksplorator plików */
.jq-www-code__explorer {
  padding: 0.9cqw 0;
  background: var(--code-side);
  border-right: 1px solid var(--code-line);
  overflow: hidden;
  white-space: nowrap;
}
.jq-www-code__explorer-title {
  padding: 0 1.1cqw 0.8cqw;
  color: #bbbbbb;
  font-size: 0.9cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.jq-www-code__file {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  height: 1.8cqw;
  padding-left: calc(1.1cqw + var(--lvl, 0) * 1cqw);
  color: #c5c5c5;
}
.jq-www-code__file i {
  flex: none;
  width: 0.95cqw;
  height: 0.95cqw;
  border-radius: 0.2cqw;
  background: var(--ico, #7a7a7a);
  opacity: 0.85;
}
.jq-www-code__file--dir i {
  background: none;
  border: solid #9a9a9a;
  border-width: 0 0.14cqw 0.14cqw 0;
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 0;
  transform: translateY(-0.12cqw) rotate(45deg);
  margin: 0 0.25cqw 0 0.1cqw;
}
.jq-www-code__file--closed i { transform: rotate(-45deg); }
.jq-www-code__file.is-active {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0.15cqw 0 0 var(--code-accent);
  color: #ffffff;
}

/* Główna kolumna: zakładki, kod, terminal */
.jq-www-code__main {
  display: grid;
  grid-template-rows: 2.7cqw minmax(0, 1fr) 18cqw;
  min-width: 0;
}

.jq-www-code__tabs {
  display: flex;
  background: var(--code-side);
  border-bottom: 1px solid var(--code-line);
}
.jq-www-code__tab {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0 1.3cqw;
  border-right: 1px solid var(--code-line);
  color: #8b8b8b;
  white-space: nowrap;
}
.jq-www-code__tab i {
  width: 0.85cqw;
  height: 0.85cqw;
  border-radius: 0.18cqw;
  background: var(--ico, #7a7a7a);
}
.jq-www-code__tab.is-active {
  background: var(--code-bg);
  color: #ffffff;
  box-shadow: inset 0 0.14cqw 0 var(--code-accent);
  margin-bottom: -1px;
}
.jq-www-code__dirty {
  position: relative;
  width: 0.9cqw;
  height: 0.9cqw;
}
.jq-www-code__dirty::before,
.jq-www-code__dirty::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}
/* kropka "niezapisane zmiany" */
.jq-www-code__dirty::before {
  width: 0.6cqw;
  height: 0.6cqw;
  border-radius: 50%;
  background: #cccccc;
  opacity: 0;
}
/* krzyżyk zamknięcia po zapisie */
.jq-www-code__dirty::after {
  width: 0.75cqw;
  height: 0.75cqw;
  background:
    linear-gradient(45deg, transparent 45%, #9a9a9a 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #9a9a9a 45% 55%, transparent 55%);
}
.is-run .jq-www-code__dirty::before {
  animation: jq-www-window var(--dirty-t) linear var(--dirty-d) forwards;
}
.is-run .jq-www-code__dirty::after {
  animation:
    jq-www-fade-out 0.01s linear var(--dirty-d) forwards,
    jq-www-fade-in 0.01s linear calc(var(--dirty-d) + var(--dirty-t)) forwards;
}

/* Edytor */
.jq-www-code__editor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5cqw;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  overflow: hidden;
}
.jq-www-code__crumbs {
  grid-column: 1 / -1;
  height: 2cqw;
  padding-left: 1.6cqw;
  color: #8b8b8b;
  font-size: 0.95cqw;
  line-height: 2cqw;
}
.jq-www-code__crumbs span + span::before {
  content: "›";
  margin: 0 0.5cqw;
  color: #5f5f5f;
}
.jq-www-code__lines {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--code-fs);
  line-height: var(--code-lh);
}
.jq-www-code__line {
  position: relative;
  display: flex;
  height: var(--code-lh);
  white-space: pre;
}
.jq-www-code__ln {
  flex: none;
  width: 3.6cqw;
  padding-right: 1.5cqw;
  color: #5c6370;
  text-align: right;
}
.jq-www-code__src {
  display: flex;
  align-items: center;
  padding-left: calc(var(--i, 0) * 1ch);
}
.jq-www-code__type {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  vertical-align: top;
}
.jq-www-code__caret {
  display: inline-block;
  width: 0.14cqw;
  height: 1.65cqw;
  margin-left: 0.05cqw;
  background: #e6e6e6;
  opacity: 0;
}

/* Linie wpisywane - stan bazowy: ukryte */
.jq-www-code__line--typed .jq-www-code__ln { opacity: 0; }
.jq-www-code__line--typed .jq-www-code__type { width: 0; }
.jq-www-code__line--typed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  pointer-events: none;
}
.is-run .jq-www-code__line--typed .jq-www-code__ln {
  animation: jq-www-fade-in 0.01s linear var(--d) forwards;
}
.is-run .jq-www-code__line--typed .jq-www-code__type {
  animation: jq-www-type var(--t) steps(var(--c), end) var(--d) both;
}
.is-run .jq-www-code__line--typed .jq-www-code__caret,
.is-run .jq-www-code__line--typed::before {
  animation: jq-www-window calc(var(--t) + 0.12s) linear var(--d) forwards;
}
.is-run .jq-www-code__caret--end {
  animation: jq-www-blink 1.05s linear var(--bd, var(--d)) infinite !important;
}
@keyframes jq-www-type {
  from { width: 0; }
  to { width: calc(var(--c) * 1ch); }
}

/* Kolory składni */
.jq-www-code .tk-t { color: #808080; }
.jq-www-code .tk-n { color: #569cd6; }
.jq-www-code .tk-a { color: #9cdcfe; }
.jq-www-code .tk-s { color: #ce9178; }
.jq-www-code .tk-p { color: #c586c0; }
.jq-www-code .tk-f { color: #dcdcaa; }
.jq-www-code .tk-v { color: #4fc1ff; }
.jq-www-code .tk-x { color: #d4d4d4; }

/* Minimapa */
.jq-www-code__minimap {
  padding: 0.4cqw 0.9cqw 0 0.6cqw;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}
.jq-www-code__minimap span {
  display: block;
  height: 0.22cqw;
  margin: 0 0 0.2cqw var(--x, 0);
  width: var(--w, 50%);
  border-radius: 0.1cqw;
  background: var(--c, rgba(156, 220, 254, 0.35));
}

/* Terminal */
.jq-www-term {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--code-line);
  background: #181818;
}
.jq-www-term__tabs {
  display: flex;
  gap: 1.8cqw;
  height: 2.4cqw;
  padding: 0 1.6cqw;
  align-items: center;
  color: #8b8b8b;
  font-size: 0.9cqw;
  letter-spacing: 0.04em;
}
.jq-www-term__tabs .is-active {
  color: #e6e6e6;
  box-shadow: 0 0.55cqw 0 -0.4cqw #e6e6e6;
}
.jq-www-term__body {
  padding: 0.3cqw 1.6cqw 0;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.18cqw;
  line-height: 1.9cqw;
}
.jq-www-term__row {
  display: flex;
  white-space: pre;
  align-items: center;
  gap: 0.6cqw;
  opacity: 0;
}
.is-run .jq-www-term__row {
  animation: jq-www-fade-in 0.12s linear var(--d) forwards;
}
.jq-www-term__row--cmd { opacity: 1; }
.is-run .jq-www-term__row--cmd { animation: none; }
.jq-www-term__prompt { color: var(--code-ok); }
.jq-www-term__path { color: #4fc1ff; }
.jq-www-term__dim { color: var(--code-dim); }
.jq-www-term__ok { color: var(--code-ok); }
.jq-www-term__sum { color: var(--code-ok); font-weight: 600; }
.jq-www-term__cmd .jq-www-code__type { width: 0; }
.is-run .jq-www-term__cmd .jq-www-code__type {
  animation: jq-www-type var(--t) steps(var(--c), end) var(--d) both;
}
.jq-www-term__cmd .jq-www-code__caret { opacity: 1; height: 1.3cqw; }
.is-run .jq-www-term__cmd .jq-www-code__caret {
  animation: jq-www-blink 1.05s linear 0s infinite, jq-www-fade-out 0.01s linear var(--done) forwards;
}
.jq-www-term__icon {
  position: relative;
  flex: none;
  width: 1.15cqw;
  height: 1.15cqw;
}
.jq-www-term__spin,
.jq-www-term__check {
  position: absolute;
  inset: 0;
}
.jq-www-term__spin {
  border: 0.16cqw solid rgba(255, 255, 255, 0.18);
  border-top-color: #e3b341;
  border-radius: 50%;
}
.is-run .jq-www-term__spin {
  animation: jq-www-spin 0.7s linear infinite, jq-www-fade-out 0.15s linear var(--done) forwards;
}
.jq-www-term__check { color: var(--code-ok); opacity: 0; line-height: 1.15cqw; text-align: center; }
.is-run .jq-www-term__check { animation: jq-www-fade-in 0.15s linear var(--done) forwards; }

/* Pasek stanu edytora */
.jq-www-code__status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2cqw;
  background: #202124;
  border-top: 1px solid var(--code-line);
  color: #a8a8a8;
  font-size: 0.92cqw;
  white-space: nowrap;
}
.jq-www-code__status > span { display: flex; gap: 1.6cqw; }
.jq-www-code__branch { color: #e6e6e6; }
.jq-www-code__branch::before {
  content: "";
  display: inline-block;
  width: 0.55cqw;
  height: 0.55cqw;
  margin-right: 0.5cqw;
  border-radius: 50%;
  background: var(--code-accent);
  vertical-align: 0.05cqw;
}

/* ==========================================================================
   Scena 5 - publikacja, analityka i integracje
   ========================================================================== */
.jq-www-dash {
  --dash-bg: #f5f6f8;
  --dash-card: #ffffff;
  --dash-line: #e7e9ee;
  --dash-ink: #1d2340;
  --dash-text: #4a5063;
  --dash-dim: #8b90a0;
  --dash-accent: #ef6d5e;
  --dash-ok: #23964f;
  --dash-ok-bg: #e6f5ec;

  display: grid;
  grid-template-columns: 5.4cqw minmax(0, 1fr);
  background: var(--dash-bg);
  color: var(--dash-text);
  font-size: 1.1cqw;
}

.jq-www-dash__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1cqw;
  padding-top: 1.6cqw;
  background: var(--dash-card);
  border-right: 1px solid var(--dash-line);
  color: #9aa0ae;
}
.jq-www-dash__logo {
  display: grid;
  place-items: center;
  width: 2.8cqw;
  height: 2.8cqw;
  margin-bottom: 0.8cqw;
  border-radius: 0.8cqw;
  background: var(--dash-ink);
  color: #ffffff;
}
.jq-www-dash__nav {
  display: grid;
  place-items: center;
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 0.8cqw;
}
.jq-www-dash__nav.is-active { background: #fdeceA; color: var(--dash-accent); }
.jq-www-dash__side svg {
  width: 1.45cqw;
  height: 1.45cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jq-www-dash__main {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 1.4cqw;
  padding: 1.7cqw 2.2cqw 2cqw;
  min-width: 0;
}

/* Nagłówek */
.jq-www-dash__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding-bottom: 1.2cqw;
}
.jq-www-dash__site {
  display: grid;
  place-items: center;
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  background: var(--dash-card);
  box-shadow: 0 0 0 1px var(--dash-line);
  color: var(--dash-ink);
}
.jq-www-dash__site svg {
  width: 1.3cqw;
  height: 1.3cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.jq-www-dash__domain {
  color: var(--dash-ink);
  font-size: 1.55cqw;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.jq-www-dash__pills {
  position: relative;
  display: grid;
}
.jq-www-dash__pill {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  height: 2cqw;
  padding: 0 0.9cqw;
  justify-self: start;
  border-radius: 1cqw;
  font-size: 0.98cqw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.jq-www-dash__pill--deploy { background: #fdf3df; color: #9a6a00; }
.jq-www-dash__pill--live { background: var(--dash-ok-bg); color: var(--dash-ok); opacity: 0; }
.jq-www-dash__pill--deploy i {
  width: 0.85cqw;
  height: 0.85cqw;
  border: 0.15cqw solid rgba(154, 106, 0, 0.25);
  border-top-color: #c58a00;
  border-radius: 50%;
}
.jq-www-dash__pill--live i {
  width: 0.6cqw;
  height: 0.6cqw;
  border-radius: 50%;
  background: var(--dash-ok);
}
.is-run .jq-www-dash__pill--deploy i { animation: jq-www-spin 0.7s linear infinite; }
.is-run .jq-www-dash__pill--deploy { animation: jq-www-fade-out 0.25s ease var(--live) forwards; }
.is-run .jq-www-dash__pill--live { animation: jq-www-fade-in 0.25s ease var(--live) forwards; }
.is-run .jq-www-dash__pill--live i { animation: jq-www-pulse 1.6s ease-out var(--live) infinite; }
.jq-www-dash__range {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 2.1cqw;
  padding: 0 1cqw;
  border-radius: 0.7cqw;
  background: var(--dash-card);
  box-shadow: 0 0 0 1px var(--dash-line);
  color: var(--dash-text);
  font-size: 0.98cqw;
}
.jq-www-dash__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.22cqw;
  border-radius: 0.2cqw;
  background: var(--dash-line);
  overflow: hidden;
}
.jq-www-dash__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--dash-ink);
}
.is-run .jq-www-dash__progress i {
  animation: jq-www-progress calc(var(--live) - 0.3s) cubic-bezier(0.3, 0.1, 0.3, 1) 0.3s forwards;
}
.is-run .jq-www-dash__progress {
  animation: jq-www-tone 0.4s ease var(--live) forwards;
}
@keyframes jq-www-progress { to { width: 100%; } }
@keyframes jq-www-tone { to { opacity: 0; } }

/* Karty */
.jq-www-dash__card {
  background: var(--dash-card);
  border-radius: 1.1cqw;
  box-shadow: 0 0 0 1px var(--dash-line), 0 0.2cqw 0.6cqw rgba(29, 35, 64, 0.04);
}
.jq-www-dash__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2cqw;
}
.jq-www-dash__kpi { padding: 1.2cqw 1.4cqw 1.3cqw; }
.jq-www-dash__label { color: var(--dash-dim); font-size: 1cqw; }
.jq-www-dash__num {
  margin: 0.35cqw 0 0.25cqw;
  color: var(--dash-ink);
  font-size: 2.9cqw;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.jq-www-dash__sub {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
  color: var(--dash-dim);
  font-size: 0.92cqw;
}
.jq-www-dash__sub i {
  width: 0.55cqw;
  height: 0.55cqw;
  border-radius: 50%;
  background: #c8ccd5;
}
.is-run .jq-www-dash__sub--live i { animation: jq-www-live 0.3s ease var(--live) forwards, jq-www-pulse 1.6s ease-out var(--live) infinite; }
@keyframes jq-www-live { to { background: var(--dash-ok); } }
.jq-www-dash__kpi--lead { position: relative; }
.jq-www-dash__kpi--lead::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.14cqw var(--dash-accent);
  opacity: 0;
}
.is-run .jq-www-dash__kpi--lead::after { animation: jq-www-flash 1.6s ease var(--lead) forwards; }
@keyframes jq-www-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* Dolny rząd */
.jq-www-dash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.2cqw;
  min-height: 0;
}
.jq-www-dash__col {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.2cqw;
  min-height: 0;
}
.jq-www-dash__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--dash-ink);
  font-size: 1.12cqw;
  font-weight: 600;
  line-height: 1.2;
}
.jq-www-dash__title small { color: var(--dash-dim); font-size: 0.92cqw; font-weight: 400; }

.jq-www-dash__chart {
  display: flex;
  flex-direction: column;
  padding: 1.2cqw 1.4cqw 1cqw;
  min-height: 0;
}
.jq-www-dash__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.8cqw;
}
.jq-www-dash__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.jq-www-dash__grid-line { stroke: var(--dash-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jq-www-dash__line { fill: none; stroke: var(--dash-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jq-www-dash__area { fill: url(#jq-www-dash-fill); }
.jq-www-dash__series { clip-path: inset(0 100% 0 0); }
.is-run .jq-www-dash__series {
  animation: jq-www-reveal var(--chart-t) linear var(--chart-d) forwards;
}
@keyframes jq-www-reveal { to { clip-path: inset(0 0 0 0); } }
.jq-www-dash__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5cqw;
  color: var(--dash-dim);
  font-size: 0.85cqw;
}

/* Zdarzenia */
.jq-www-dash__feed { padding: 1.1cqw 1.4cqw 0.6cqw; }
.jq-www-dash__event {
  display: grid;
  grid-template-columns: 2.1cqw minmax(0, 1fr) auto;
  gap: 0.9cqw;
  align-items: center;
  padding: 0.6cqw 0;
  border-top: 1px solid var(--dash-line);
  opacity: 0;
}
.jq-www-dash__title + .jq-www-dash__event { margin-top: 0.6cqw; }
.is-run .jq-www-dash__event { animation: jq-www-show 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both; }
.jq-www-dash__etext b { display: block; color: var(--dash-ink); font-size: 1.02cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jq-www-dash__etext span { display: block; color: var(--dash-dim); font-size: 0.9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jq-www-dash__event time { color: var(--dash-dim); font-size: 0.88cqw; }
.jq-www-dash__eicon {
  display: grid;
  place-items: center;
  width: 2.1cqw;
  height: 2.1cqw;
  border-radius: 50%;
  background: var(--bg, #eef0f4);
  color: var(--fg, var(--dash-ink));
}
.jq-www-dash__eicon svg {
  width: 1.1cqw;
  height: 1.1cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Integracje */
.jq-www-dash__tools {
  display: flex;
  flex-direction: column;
  padding: 1.2cqw 1.4cqw 0.6cqw;
}
.jq-www-dash__tool {
  display: grid;
  grid-template-columns: 2.3cqw minmax(0, 1fr) auto;
  gap: 0.9cqw;
  align-items: center;
  flex: 1 1 0;
  padding: 0.6cqw 0;
  border-top: 1px solid var(--dash-line);
}
.jq-www-dash__title + .jq-www-dash__tool { margin-top: 0.8cqw; }
.jq-www-dash__tname b { display: block; color: var(--dash-ink); font-size: 1.02cqw; font-weight: 600; white-space: nowrap; }
.jq-www-dash__tname span { display: block; color: var(--dash-dim); font-size: 0.88cqw; white-space: nowrap; }
.jq-www-dash__ticon {
  display: grid;
  place-items: center;
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: 0.7cqw;
  background: #f1f2f6;
  color: var(--dash-ink);
}
.jq-www-dash__ticon svg {
  width: 1.2cqw;
  height: 1.2cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jq-www-dash__chips { display: grid; justify-items: end; }
.jq-www-dash__chip {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4cqw;
  height: 1.75cqw;
  padding: 0 0.75cqw;
  border-radius: 0.9cqw;
  font-size: 0.88cqw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.jq-www-dash__chip--wait { background: #f0f1f4; color: #8b90a0; }
.jq-www-dash__chip--on { background: var(--dash-ok-bg); color: var(--dash-ok); opacity: 0; transform: scale(0.9); }
.jq-www-dash__chip--on svg { width: 0.85cqw; height: 0.85cqw; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-run .jq-www-dash__chip--wait { animation: jq-www-fade-out 0.2s ease var(--d) forwards; }
.is-run .jq-www-dash__chip--on { animation: jq-www-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--d) forwards; }
@keyframes jq-www-pop { to { opacity: 1; transform: none; } }

/* --- Ograniczenie ruchu: od razu stan końcowy, bez pętli ------------- */
.jq-www-scene.is-static *,
.jq-www-scene.is-static *::before,
.jq-www-scene.is-static *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}
.jq-www-scene.is-static .jq-www-scene__fade { animation: none !important; }
.jq-www-scene.is-static .jq-www-code__caret--end { animation: none !important; opacity: 1; }