/* Streaming: the control room. See streaming.js.
   Built from the Rankings panels' language (game-intel.css): 18px panels on
   the workspace panel colour, KPI bands with thin dividers, a solid accent
   glyph beside each panel heading, figure grids whose column count is their
   item count. No shadows, rings, glow or pill radii. Motion is short and
   purposeful: views rise in when a tab changes, new events arrive into the
   feed, figures count to their new value. All of it stops under reduced
   motion. */

html.ui-v2 .stream {
  --stream-good: #56d79a;
  --stream-warm: #e4a283;
  --stream-soft: #ccd5ff;
  --stream-ease: cubic-bezier(.22, .68, .32, 1);
  --stream-out: cubic-bezier(.22, 1, .36, 1);
  --stream-focus: #2d334b;
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
html.ui-v2 .stream .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------- heading */

html.ui-v2 .stream-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
html.ui-v2 .stream-head .pf-h1 { margin: 0; }
html.ui-v2 .stream-head-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.ui-v2 .stream-head-side .pf-dd { width: 220px; }
html.ui-v2 .stream-head-side .pf-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; }
html.ui-v2 .stream-head-side .pf-btn svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- tabs */

/* Six equal tabs across the full width: one segmented bar, and a single ink
   that slides to the chosen tab rather than a fill that blinks between them. */
html.ui-v2 .stream-tabs {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--pf-panel);
}
html.ui-v2 .stream-tabs-ink {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 10px; background: var(--pf-panel-3);
  opacity: 0; pointer-events: none;
  transition: transform 420ms var(--stream-out), width 420ms var(--stream-out), height 420ms var(--stream-out), opacity 160ms ease;
}
html.ui-v2 .stream-tabs-ink.is-placed { opacity: 1; }
html.ui-v2 .stream-tabs-ink.is-still { transition: none; }
html.ui-v2 .stream-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--pf-dim);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
html.ui-v2 .stream-tab svg { width: 16px; height: 16px; flex: 0 0 16px; transition: color 160ms ease, transform 260ms var(--stream-out); }
html.ui-v2 .stream-tab span { overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-tab:hover { color: var(--pf-text); }
html.ui-v2 .stream-tab[aria-selected="true"] { color: var(--pf-text); }
html.ui-v2 .stream-tab[aria-selected="true"] svg { color: var(--v2-accent); transform: scale(1.08); }
html.ui-v2 .stream-tab:focus-visible { outline: none; background: rgba(255, 255, 255, .05); color: var(--pf-text); }

/* ---------------------------------------------------------------- views */

html.ui-v2 .stream-body { min-width: 0; }
html.ui-v2 .stream-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.ui-v2 .stream-row { display: grid; gap: 14px; min-width: 0; align-items: stretch; }
html.ui-v2 .stream-row-main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
html.ui-v2 .stream-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.ui-v2 .stream-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ui-v2 .stream-row-cards { grid-template-columns: repeat(var(--n-lg, 3), minmax(0, 1fr)); }

/* A view arrives in a short cascade: each block rises a few pixels as it
   fades in, one after the other. Fast enough that nothing waits on it. */
@keyframes stream-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.ui-v2 .stream-body.is-entering > .stream-view > :not(.stream-row),
html.ui-v2 .stream-body.is-entering .stream-row > * {
  animation: stream-rise 440ms var(--stream-ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* Rows inside a list follow their panel in, a beat apart, eight at most. */
html.ui-v2 .stream-body.is-entering > .stream-view > .stream-rules { animation: none; }
html.ui-v2 .stream-body.is-entering .stream-rule,
html.ui-v2 .stream-body.is-entering .stream-ev,
html.ui-v2 .stream-body.is-entering .stream-list li {
  animation: stream-rise 420ms var(--stream-ease) both;
  animation-delay: calc(110ms + var(--r, 0) * 35ms);
}

html.ui-v2 .stream-panel {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 20px 20px; border-radius: 18px; background: var(--pf-panel);
}
html.ui-v2 .stream-panel-head { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 28px; }
html.ui-v2 .stream-panel-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; color: var(--v2-accent); }
html.ui-v2 .stream-panel-icon:empty { display: none; }
html.ui-v2 .stream-panel-icon svg { width: 20px; height: 20px; }
html.ui-v2 .stream-panel-head h2 { margin: 0; min-width: 0; font-size: 15px; font-weight: 620; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-panel-aside { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; }
html.ui-v2 .stream-panel-aside > span { overflow: hidden; text-overflow: ellipsis; }

html.ui-v2 .stream-lede { margin: 0; color: var(--pf-dim); font-size: 12.5px; line-height: 1.65; text-wrap: pretty; }
html.ui-v2 .stream-lede b { color: var(--pf-text); font-weight: 650; }
html.ui-v2 .stream-hint { margin: -4px 0 0; color: var(--pf-dimmer); font-size: 11.5px; line-height: 1.5; text-wrap: pretty; }
html.ui-v2 .stream-empty { margin: 0; color: var(--pf-dimmer); font-size: 12.5px; line-height: 1.6; }
html.ui-v2 .stream-status { margin: 0; min-height: 18px; color: var(--pf-dimmer); font-size: 12px; line-height: 1.5; }
html.ui-v2 .stream-status:empty { min-height: 0; }
html.ui-v2 .stream-status.is-good { color: var(--stream-good); }
html.ui-v2 .stream-status.is-bad, html.ui-v2 .stream-status.is-warn { color: var(--stream-warm); }

html.ui-v2 .stream-message { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
html.ui-v2 .stream-message p { margin: 0; color: var(--pf-dim); font-size: 13px; line-height: 1.6; }

html.ui-v2 .stream-skel { min-height: 132px; border-radius: 18px; background: var(--pf-panel); opacity: .6; }
html.ui-v2 .stream-skel.is-band { min-height: 142px; }
html.ui-v2 .stream-skel.is-tall { min-height: 460px; }
html.ui-v2 .stream-skel.is-bar { min-height: 62px; border-radius: 16px; }
html.ui-v2 .stream-skel.is-row { min-height: 64px; border-radius: 16px; }

/* ------------------------------------------------------------- controls */

html.ui-v2 .stream .pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; min-height: 38px; padding: 0 15px; font-size: 13px; text-decoration: none; }
html.ui-v2 .stream .pf-btn.sm { height: 32px; min-height: 32px; padding: 0 11px; font-size: 12px; }
html.ui-v2 .stream .pf-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
html.ui-v2 .stream .pf-btn.sm svg { width: 13px; height: 13px; flex-basis: 13px; }
html.ui-v2 .stream .pf-btn.ghost { background: transparent; color: var(--pf-dim); }
html.ui-v2 .stream .pf-btn.ghost:hover { background: var(--pf-panel-2); color: var(--pf-text); }
html.ui-v2 .stream .pf-btn.ghost:focus-visible { background: var(--stream-focus); color: #f8f8ff; }
html.ui-v2 .stream .pf-btn.stream-danger:hover, html.ui-v2 .stream .pf-btn.stream-danger:focus-visible { background: rgba(228, 162, 131, .14); color: var(--stream-warm); }
html.ui-v2 .stream .pf-btn.stream-danger-solid { background: rgba(228, 162, 131, .16); color: var(--stream-warm); }
html.ui-v2 .stream .pf-btn.stream-danger-solid:hover, html.ui-v2 .stream .pf-btn.stream-danger-solid:focus-visible { background: rgba(228, 162, 131, .26); color: #f4c3ab; }
html.ui-v2 .stream .pf-btn[data-armed="true"] { background: rgba(228, 162, 131, .16); color: var(--stream-warm); }
html.ui-v2 .stream .pf-btn.is-done { color: var(--stream-good); }

html.ui-v2 .stream-fields { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; min-width: 0; }
html.ui-v2 .stream-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
html.ui-v2 .stream-field-l { color: var(--pf-dimmer); font-size: 11.5px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-input {
  width: 100%; min-width: 0; height: 38px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: var(--pf-panel-2); color: var(--pf-text); font: inherit; font-size: 13px; outline: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}
html.ui-v2 .stream-input::placeholder { color: var(--pf-dimmer); }
html.ui-v2 .stream-input:hover { background: var(--pf-panel-3); }
html.ui-v2 .stream-input:focus-visible { outline: none; border-color: rgba(141, 162, 255, .6); background: var(--pf-panel-2); }
html.ui-v2 .stream-input[readonly] { color: var(--pf-dim); text-overflow: ellipsis; cursor: text; }
html.ui-v2 .stream-input[type="number"] { appearance: textfield; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-input[type="number"]::-webkit-inner-spin-button, html.ui-v2 .stream-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html.ui-v2 .stream-input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

html.ui-v2 .stream .pf-dd { display: flex; width: 100%; min-width: 0 !important; }
html.ui-v2 .stream .pf-dd-btn.pf-select { height: 38px; padding: 0 11px 0 12px; font-size: 13px; font-weight: 520; }
html.ui-v2 .stream-head-side .pf-dd-btn.pf-select { height: 36px; }

html.ui-v2 .stream-suffix { position: relative; display: flex; min-width: 0; }
html.ui-v2 .stream-suffix .stream-input { padding-right: 62px; }
html.ui-v2 .stream-suffix em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pf-dimmer); font-size: 12px; font-style: normal; pointer-events: none; }
html.ui-v2 .stream-inline { display: flex; gap: 8px; min-width: 0; }
html.ui-v2 .stream-inline .pf-dd { flex: 1 1 auto; }

html.ui-v2 .stream-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-top: auto; }
html.ui-v2 .stream-actions > .stream-danger:first-child { margin-right: auto; }

html.ui-v2 .stream-icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 9px;
  background: var(--pf-panel-2); color: var(--pf-dim); cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
html.ui-v2 .stream .pf-btn.stream-icon-btn { width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; padding: 0; }
html.ui-v2 .stream-icon-btn svg { width: 12px; height: 12px; }
html.ui-v2 .stream .pf-btn.stream-icon-btn svg { width: 14px; height: 14px; }
html.ui-v2 .stream-icon-btn:hover:not(:disabled), html.ui-v2 .stream-icon-btn:focus-visible { outline: none; background: var(--stream-focus); color: #f8f8ff; }
html.ui-v2 .stream-icon-btn:disabled { opacity: .3; cursor: default; }
html.ui-v2 .stream svg.stream-chev { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; }
html.ui-v2 .stream svg.stream-chev-up { transform: rotate(-90deg); }
html.ui-v2 .stream svg.stream-chev-down { transform: rotate(90deg); }
/* Padded into its own margin, so a keyboard focus fill has room without moving the line. */
html.ui-v2 .stream-link { display: inline-flex; align-items: center; gap: 4px; margin: -3px -7px; padding: 3px 7px; border-radius: 7px; color: var(--v2-accent); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
html.ui-v2 .stream-link:hover { color: var(--stream-soft); background: transparent; }
html.ui-v2 .stream-link:focus-visible { outline: none; background: var(--stream-focus); color: #f8f8ff; }

/* A switch: the knob slides and the track fills, with the label beside it. */
html.ui-v2 .stream-switch {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 38px; padding: 0 12px 0 8px; border: 0; border-radius: 10px;
  background: var(--pf-panel-2); color: var(--pf-dim); font: inherit; font-size: 12.5px; font-weight: 560; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
html.ui-v2 .stream-switch-k { position: relative; width: 32px; height: 20px; flex: 0 0 32px; border-radius: 6px; background: rgba(255, 255, 255, .14); transition: background-color 180ms ease; }
html.ui-v2 .stream-switch-k::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 4px; background: #fff;
  transition: transform 240ms var(--stream-out), background-color 180ms ease;
}
html.ui-v2 .stream-switch-l { overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-switch[aria-checked="true"] { color: var(--pf-text); }
html.ui-v2 .stream-switch[aria-checked="true"] .stream-switch-k { background: var(--v2-accent); }
html.ui-v2 .stream-switch[aria-checked="true"] .stream-switch-k::after { transform: translateX(12px); background: #0b0d14; }
html.ui-v2 .stream-switch:hover { background: var(--pf-panel-3); }
html.ui-v2 .stream-switch:focus-visible { outline: none; background: var(--stream-focus); color: #f8f8ff; }
html.ui-v2 .stream-switch.is-compact { min-height: 32px; padding: 0 8px 0 6px; gap: 8px; background: transparent; }
html.ui-v2 .stream-switch.is-compact:hover { background: var(--pf-panel-2); }
html.ui-v2 .stream-switch.is-compact:focus-visible { background: var(--stream-focus); }
html.ui-v2 .stream-switch.is-compact .stream-switch-l { width: 22px; font-size: 12px; }

/* Segmented choices: a window, a price band, once or per unit. */
html.ui-v2 .stream-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--pf-panel-2); }
html.ui-v2 .stream-seg button {
  height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--pf-dim);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 140ms ease, color 140ms ease;
}
html.ui-v2 .stream-seg button[aria-checked="true"] { background: var(--pf-panel-3); color: var(--pf-text); }
html.ui-v2 .stream-seg button:hover, html.ui-v2 .stream-seg button:focus-visible { color: var(--pf-text); outline: none; }
html.ui-v2 .stream-seg button:focus-visible { background: var(--stream-focus); }
html.ui-v2 .stream-seg.is-block { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
html.ui-v2 .stream-seg.is-block button { height: 32px; }

html.ui-v2 .stream-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; white-space: nowrap;
  background: rgba(255, 255, 255, .06); color: var(--pf-dim); font-size: 11.5px; font-weight: 600;
}
html.ui-v2 .stream-tag.is-good { background: rgba(86, 215, 154, .12); color: var(--stream-good); }
html.ui-v2 .stream-tag.is-accent { background: rgba(141, 162, 255, .12); color: var(--stream-soft); }
html.ui-v2 .stream-tag.is-warn { background: rgba(228, 162, 131, .12); color: var(--stream-warm); }

html.ui-v2 .stream-mark {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--pf-panel-3); color: var(--brand, var(--pf-text));
}
html.ui-v2 .stream-mark svg { display: block; width: 16px; height: 16px; }
html.ui-v2 .stream-mark.is-lg { width: 40px; height: 40px; border-radius: 11px; }
html.ui-v2 .stream-mark.is-lg svg { width: 20px; height: 20px; }

html.ui-v2 .stream-copyfield { display: flex; gap: 8px; min-width: 0; }
html.ui-v2 .stream-copyfield .stream-input { flex: 1 1 auto; height: 36px; font-size: 12.5px; }
html.ui-v2 .stream-copyfield .pf-btn { flex: 0 0 auto; height: 36px; min-height: 36px; min-width: 88px; }

/* ----------------------------------------------------------------- live */

/* The window's figures in one band: earnings with its line on the left,
   four counts to the right, thin dividers between. */
html.ui-v2 .stream-band {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr); align-items: stretch;
  padding: 18px 4px 18px 0; border-radius: 18px; background: var(--pf-panel);
}
html.ui-v2 .stream-band-plain { grid-template-columns: minmax(0, 1fr); padding: 18px 4px; }
html.ui-v2 .stream-band-lead { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 22px; border-right: 1px solid var(--pf-line); }
html.ui-v2 .stream-band-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 34px; }
html.ui-v2 .stream-label { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
html.ui-v2 .stream-big { font-size: 36px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .stream-band.is-empty .stream-big, html.ui-v2 .stream-band.is-empty .stream-kpi dd b { color: var(--pf-dimmer); }
html.ui-v2 .stream-spark { height: 52px; margin-top: 6px; min-width: 0; }
html.ui-v2 .stream svg.stream-spark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.ui-v2 .stream-spark-line { fill: none; stroke: var(--stream-good); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html.ui-v2 .stream-spark-area { fill: rgba(86, 215, 154, .1); }

html.ui-v2 .stream-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-content: center; margin: 0; min-width: 0; }
html.ui-v2 .stream-kpi { min-width: 0; padding: 0 20px; }
html.ui-v2 .stream-kpi + .stream-kpi { border-left: 1px solid var(--pf-line); }
html.ui-v2 .stream-kpi dt { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-kpi dd { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 8px 0 0; }
html.ui-v2 .stream-kpi dd b { font-size: 26px; font-weight: 680; letter-spacing: -.8px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-kpi dd span { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The feed scrolls inside its panel, at the simulator's height. */
html.ui-v2 .stream-feed {
  list-style: none; display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-height: 420px; margin: 0 -8px; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
html.ui-v2 .stream-ev {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 12px; transition: background-color 120ms ease;
}
html.ui-v2 .stream-ev:hover { background: var(--pf-panel-2); }
html.ui-v2 .stream-ev-copy { min-width: 0; }
html.ui-v2 .stream-ev-copy p { margin: 0; color: var(--pf-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-ev-copy p b { color: var(--pf-text); font-weight: 620; }
html.ui-v2 .stream-ev-acts { display: flex; gap: 6px; min-width: 0; margin-top: 5px; overflow: hidden; }
html.ui-v2 .stream-ev-acts i {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 2px 8px 2px 5px; border-radius: 6px;
  background: rgba(141, 162, 255, .12); color: var(--stream-soft); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap;
}
html.ui-v2 .stream-ev-acts svg.stream-chev { width: 9px; height: 9px; flex-basis: 9px; }
html.ui-v2 .stream-ev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
html.ui-v2 .stream-ev-side b { color: var(--stream-good); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-ev-side time { color: var(--pf-dimmer); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-feed-empty { display: grid; place-items: center; flex: 1; padding: 24px 12px; color: var(--pf-dimmer); font-size: 12.5px; text-align: center; line-height: 1.6; }
@keyframes stream-arrive {
  0% { opacity: 0; transform: translateY(-10px) scale(.985); background-color: rgba(141, 162, 255, .18); }
  45% { opacity: 1; transform: none; background-color: rgba(141, 162, 255, .12); }
  100% { background-color: transparent; }
}
html.ui-v2 .stream-ev.is-new { animation: stream-arrive 900ms var(--stream-ease) both; }
html.ui-v2 .stream-ev.is-new .stream-mark { animation: stream-pop 520ms var(--stream-out) both; }
@keyframes stream-pop { 0% { scale: .6; } 60% { scale: 1.1; } 100% { scale: 1; } }

html.ui-v2 .stream-sim-form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
html.ui-v2 .stream-sim-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-top: auto; padding-top: 4px; }
html.ui-v2 .stream-sim-foot .stream-switch { flex: 0 1 auto; }
html.ui-v2 .stream .pf-btn.stream-fire { height: 42px; padding: 0 20px; font-size: 13.5px; }
html.ui-v2 .stream .pf-btn.stream-fire svg { width: 16px; height: 16px; flex-basis: 16px; }
@keyframes stream-zap { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.4) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }
html.ui-v2 .stream-fire.is-firing svg { animation: stream-zap 460ms var(--stream-out); }
html.ui-v2 .stream-sim-result { min-height: 52px; }
html.ui-v2 .stream-sim-result:empty { display: none; }
html.ui-v2 .stream-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.ui-v2 .stream-quick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px;
  background: var(--pf-panel-2); color: var(--pf-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 180ms var(--stream-out);
}
html.ui-v2 .stream-quick b { max-width: 100%; font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-quick span { color: var(--pf-dimmer); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-quick button:hover { background: var(--pf-panel-3); }
html.ui-v2 .stream-quick button:focus-visible { outline: none; border-color: rgba(141, 162, 255, .6); }
html.ui-v2 .stream-quick button:active { transform: scale(.96); }
html.ui-v2 .stream-quick button.is-fired { border-color: var(--v2-accent); }
html.ui-v2 .stream-quick button:disabled { opacity: .5; cursor: default; }
html.ui-v2 .stream-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html.ui-v2 .stream-chips span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px;
  background: rgba(141, 162, 255, .12); color: var(--stream-soft); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  animation: stream-rise 360ms var(--stream-out) both;
}
html.ui-v2 .stream-chips span:nth-child(2) { animation-delay: 60ms; }
html.ui-v2 .stream-chips span:nth-child(3) { animation-delay: 120ms; }

/* Top lists: rank, name, a short bar, the figure aligned right. */
html.ui-v2 .stream-list { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
html.ui-v2 .stream-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px 64px; align-items: center; gap: 12px; min-height: 48px; }
html.ui-v2 .stream-list li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .stream-list-platforms li { grid-template-columns: 32px minmax(0, 1fr) 44px 64px; }
html.ui-v2 .stream-rank { color: var(--pf-dimmer); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-list-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .stream-list-copy b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-list-copy span { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-list-bar {
  display: block; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--v2-accent) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%);
}
/* In a narrow panel the bar gives its room to the name. */
html.ui-v2 .stream-row-3 > .stream-panel { container-type: inline-size; container-name: stream-list; }
@container stream-list (max-width: 330px) {
  html.ui-v2 .stream-list li, html.ui-v2 .stream-list-platforms li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  html.ui-v2 .stream-list-platforms li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  html.ui-v2 .stream-list-bar { display: none; }
}
html.ui-v2 .stream-list em { color: var(--pf-text); font-size: 12.5px; font-style: normal; font-weight: 650; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- presets */

html.ui-v2 .stream-toolbar {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 12px 12px 20px; border-radius: 16px; background: var(--pf-panel);
}
html.ui-v2 .stream-toolbar-copy { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin-right: auto; }
html.ui-v2 .stream-toolbar-copy b { font-size: 14px; font-weight: 650; white-space: nowrap; }
html.ui-v2 .stream-toolbar-copy span { color: var(--pf-dimmer); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html.ui-v2 .stream-packs { display: grid; grid-template-columns: repeat(var(--n-lg, 4), minmax(0, 1fr)); gap: 10px; }
html.ui-v2 .stream-pack { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--pf-panel-2); }
html.ui-v2 .stream-pack-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
html.ui-v2 .stream-pack-copy b { font-size: 13px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-pack-copy span { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-pack .pf-btn { flex: 0 0 auto; }
html.ui-v2 .stream .stream-pack .pf-btn.sm { background: var(--pf-panel-3); }
html.ui-v2 .stream .stream-pack .pf-btn.sm:hover, html.ui-v2 .stream .stream-pack .pf-btn.sm:focus-visible { background: var(--stream-focus); }

html.ui-v2 .stream-rules { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
html.ui-v2 .stream-rule { min-width: 0; border-radius: 16px; background: var(--pf-panel); }
html.ui-v2 .stream-rule-head { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; }
html.ui-v2 .stream-rule-n { color: var(--pf-dimmer); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-rule-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; min-height: 46px; padding: 6px 12px 6px 8px;
  border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease;
}
html.ui-v2 .stream-rule-sum:hover { background: var(--pf-panel-2); }
html.ui-v2 .stream-rule-sum:focus-visible, html.ui-v2 .stream-rule.is-open .stream-rule-sum:focus-visible { outline: none; background: var(--stream-focus); }
html.ui-v2 .stream-rule.is-open .stream-rule-sum { background: var(--pf-panel-2); }
html.ui-v2 .stream-rule-line { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; }
html.ui-v2 .stream-rule-line .stream-mark { width: 30px; height: 30px; }
html.ui-v2 .stream-rule-line b { flex: 0 1 auto; min-width: 0; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-rule-line .stream-chev { color: var(--pf-dimmer); }
html.ui-v2 .stream-rule-then { flex: 0 1 auto; min-width: 0; color: var(--stream-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-rule-tags { display: flex; gap: 6px; flex: 0 0 auto; }
html.ui-v2 .stream-rule-tags:empty { display: none; }
html.ui-v2 .stream-rule-tags i { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--pf-dim); font-size: 11px; font-style: normal; font-weight: 560; white-space: nowrap; }
html.ui-v2 .stream-rule-tags i.is-warn { background: rgba(228, 162, 131, .12); color: var(--stream-warm); }
html.ui-v2 .stream-rule.is-off .stream-rule-line, html.ui-v2 .stream-rule.is-off .stream-rule-tags { opacity: .42; }
html.ui-v2 .stream-rule-order { display: flex; gap: 4px; }

@keyframes stream-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html.ui-v2 .stream-rule-body { padding: 4px 12px 12px; animation: stream-open 300ms var(--stream-ease) both; }
html.ui-v2 .stream-rule-edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html.ui-v2 .stream-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: 14px; background: var(--pf-panel-2); }
html.ui-v2 .stream-group h3 { margin: 0; color: var(--pf-text); font-size: 12.5px; font-weight: 650; }
html.ui-v2 .stream-group .stream-input, html.ui-v2 .stream-group .pf-dd-btn, html.ui-v2 .stream-group .stream-switch,
html.ui-v2 .stream-group .stream-seg, html.ui-v2 .stream .stream-group .pf-btn.stream-icon-btn { background: var(--pf-panel-3); }
html.ui-v2 .stream-group .stream-input:hover, html.ui-v2 .stream-group .pf-dd-btn:hover, html.ui-v2 .stream-group .stream-switch:hover { background: #25262c; }
html.ui-v2 .stream-group .stream-input:focus-visible { background: var(--pf-panel-3); }
html.ui-v2 .stream-group .stream-seg button[aria-checked="true"] { background: #2a2c33; }
html.ui-v2 .stream-group .stream-switch:focus-visible { background: var(--stream-focus); }
html.ui-v2 .stream-rule-foot { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 12px; }
html.ui-v2 .stream-rule-note { flex: 1 1 auto; min-width: 0; color: var(--pf-dimmer); font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The gift field: type to search the catalogue, the coin price inside the box. */
html.ui-v2 .stream-gift { position: relative; min-width: 0; }
html.ui-v2 .stream-gift .stream-input { padding-right: 84px; }
html.ui-v2 .stream-gift-coins { position: absolute; right: 12px; top: 19px; transform: translateY(-50%); color: var(--pf-dimmer); font-size: 11.5px; font-style: normal; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-gift-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 312px; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #16171b; scrollbar-width: thin;
  animation: stream-open 180ms var(--stream-ease) both;
}
html.ui-v2 .stream-gift-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--pf-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
html.ui-v2 .stream-gift-opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .stream-gift-opt em { color: var(--pf-dimmer); font-size: 11.5px; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-gift-opt.is-active, html.ui-v2 .stream-gift-opt:hover { background: rgba(255, 255, 255, .07); }
html.ui-v2 .stream-gift-none { margin: 0; padding: 10px; color: var(--pf-dimmer); font-size: 12px; line-height: 1.5; }

/* ---------------------------------------------------------------- gifts */

html.ui-v2 .stream-gift-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto 200px; align-items: center; gap: 10px; min-width: 0; }
html.ui-v2 .stream-search { position: relative; display: flex; align-items: center; min-width: 0; height: 38px; border-radius: 10px; background: var(--pf-panel-2); color: var(--pf-dimmer); }
html.ui-v2 .stream-search svg { position: absolute; left: 12px; width: 15px; height: 15px; pointer-events: none; }
html.ui-v2 .stream-search input {
  width: 100%; height: 100%; min-width: 0; padding: 0 12px 0 36px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--pf-text); font: inherit; font-size: 13px; outline: none;
}
html.ui-v2 .stream-search input::placeholder { color: var(--pf-dimmer); }
html.ui-v2 .stream-search input:focus-visible { border-color: rgba(141, 162, 255, .6); }
html.ui-v2 .stream-gift-tools .stream-seg button { height: 32px; }

/* The catalogue scrolls inside its panel, under a heading that stays put. */
html.ui-v2 .stream-table-wrap { min-width: 0; max-height: 620px; margin: 0 -8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html.ui-v2 .stream-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-col-num { width: 120px; }
html.ui-v2 .stream-col-bind { width: 112px; }
html.ui-v2 .stream-table th, html.ui-v2 .stream-table td { height: 54px; padding: 0 10px; text-align: left; vertical-align: middle; white-space: nowrap; }
html.ui-v2 .stream-table thead th { position: sticky; top: 0; z-index: 2; height: 36px; background: var(--pf-panel); color: var(--pf-dimmer); font-size: 11.5px; font-weight: 520; }
html.ui-v2 .stream-table tbody th { font-weight: 400; overflow: hidden; }
html.ui-v2 .stream-table tbody td, html.ui-v2 .stream-table tbody th { transition: background-color 120ms ease; }
html.ui-v2 .stream-table tbody tr:hover > * { background: var(--pf-panel-2); }
html.ui-v2 .stream-table tbody tr > :first-child { border-radius: 10px 0 0 10px; }
html.ui-v2 .stream-table tbody tr > :last-child { border-radius: 0 10px 10px 0; }
html.ui-v2 .stream-table .stream-num { text-align: right; }
html.ui-v2 .stream-table td.stream-num { font-weight: 600; }
html.ui-v2 .stream-table .stream-bind { text-align: right; }
html.ui-v2 .stream-table-empty td { height: 90px; color: var(--pf-dimmer); text-align: center; }
html.ui-v2 .stream-gift-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.ui-v2 .stream-letter { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--pf-panel-3); color: var(--pf-dim); font-size: 13px; font-weight: 700; }
html.ui-v2 .stream-gift-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.ui-v2 .stream-gift-copy b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-gift-copy span { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--stream-soft); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-more { display: flex; justify-content: center; }
html.ui-v2 .stream-more:empty { display: none; }

/* ----------------------------------------------------------------- game */

html.ui-v2 .stream-form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
html.ui-v2 .stream-steps { list-style: none; counter-reset: stream-step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
html.ui-v2 .stream-steps li {
  counter-increment: stream-step; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px;
  min-width: 0; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--pf-panel-2);
}
html.ui-v2 .stream-steps li::before {
  content: counter(stream-step); grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(141, 162, 255, .14); color: var(--stream-soft); font-size: 13px; font-weight: 700;
}
html.ui-v2 .stream-steps b { font-size: 13px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-steps span { color: var(--pf-dimmer); font-size: 12px; line-height: 1.5; text-wrap: pretty; }

html.ui-v2 .stream-facts { display: flex; flex-direction: column; margin: 0; }
html.ui-v2 .stream-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; padding: 9px 0; }
html.ui-v2 .stream-facts > div + div { border-top: 1px solid var(--pf-line); }
html.ui-v2 .stream-facts dt { flex: 0 0 auto; color: var(--pf-dimmer); font-size: 12px; }
html.ui-v2 .stream-facts dd { min-width: 0; margin: 0; color: var(--pf-text); font-size: 12.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
html.ui-v2 .stream-na { color: var(--pf-dimmer); font-weight: 400; }

/* -------------------------------------------------------------- sources */

html.ui-v2 .stream-sources-list { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
html.ui-v2 .stream-source { padding: 14px 0; }
html.ui-v2 .stream-source:first-child { padding-top: 4px; }
html.ui-v2 .stream-source:last-child { padding-bottom: 0; }
html.ui-v2 .stream-source + .stream-source { border-top: 1px solid var(--pf-line); }
html.ui-v2 .stream-source-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 300px 104px; align-items: center; gap: 14px; min-width: 0; }
html.ui-v2 .stream-source-meta { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
html.ui-v2 .stream-source-meta > .stream-tag { justify-self: start; }
html.ui-v2 .stream-source-head > .pf-btn, html.ui-v2 .stream-source-head > .stream-confirm { justify-self: end; }
html.ui-v2 .stream-source-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.ui-v2 .stream-source-copy b { font-size: 14px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-source-copy span { color: var(--pf-dimmer); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-source-last { color: var(--pf-dimmer); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .stream-source-last.is-bad { color: var(--stream-warm); white-space: normal; }
html.ui-v2 .stream-source-head > .pf-btn { width: 100%; }
html.ui-v2 .stream-confirm { display: flex; gap: 6px; }
html.ui-v2 .stream-confirm .pf-btn { width: auto; }
html.ui-v2 .stream-source-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 12px 0 0 54px; animation: stream-open 280ms var(--stream-ease) both; }
html.ui-v2 .stream-source-body .stream-hint { margin: 0; }

/* ------------------------------------------------------------- overlays */

html.ui-v2 .stream-ov-card { gap: 12px; }
html.ui-v2 .stream-ov-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--pf-panel-2); }
html.ui-v2 .stream-ov-stage iframe {
  position: absolute; left: 0; top: 0; width: 960px; height: 540px; border: 0; background: transparent;
  transform: scale(var(--ov-scale, .36)); transform-origin: 0 0; pointer-events: none;
}
html.ui-v2 .stream-ov-settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html.ui-v2 .stream-ov-save { grid-column: 1 / -1; justify-content: space-between; margin-top: 4px; }
html.ui-v2 .stream-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.ui-v2 .stream-swatches button {
  display: flex; align-items: center; gap: 9px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px;
  background: var(--pf-panel-3); color: var(--pf-dim); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
html.ui-v2 .stream-swatches i { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px; background: var(--swatch); transition: transform 220ms var(--stream-out); }
html.ui-v2 .stream-swatches span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .stream-swatches button:hover { color: var(--pf-text); background: #25262c; }
html.ui-v2 .stream-swatches button[aria-checked="true"] { border-color: var(--swatch); color: var(--pf-text); }
html.ui-v2 .stream-swatches button[aria-checked="true"] i { transform: scale(1.12); }
html.ui-v2 .stream-swatches button:focus-visible { outline: none; background: var(--stream-focus); color: #f8f8ff; }

/* --------------------------------------------------------------- create */

html.ui-v2 .stream-create-form { display: flex; flex-direction: column; gap: 14px; }
html.ui-v2 .stream-create .stream-actions { justify-content: flex-start; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1280px) {
  html.ui-v2 .stream-rule-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-v2 .stream-ov-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-v2 .stream-packs { grid-template-columns: repeat(var(--n-md, 2), minmax(0, 1fr)); }
  html.ui-v2 .stream-source-head { grid-template-columns: 40px minmax(0, 1fr) 260px 104px; }
}
@media (max-width: 1180px) {
  html.ui-v2 .stream-row-main { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-feed { flex: 0 0 auto; height: 400px; min-height: 0; }
  html.ui-v2 .stream-band { grid-template-columns: minmax(0, 1fr); padding: 18px 4px; }
  html.ui-v2 .stream-band-lead { border-right: 0; padding-bottom: 18px; }
  html.ui-v2 .stream-band-lead + .stream-kpis { padding-top: 18px; border-top: 1px solid var(--pf-line); }
  html.ui-v2 .stream-row-cards { grid-template-columns: repeat(var(--n-md, 2), minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  html.ui-v2 .stream-row-3, html.ui-v2 .stream-row-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  html.ui-v2 .stream-head .pf-btn span { display: none; }
  html.ui-v2 .stream-head .pf-btn { width: 36px; padding: 0; }
  html.ui-v2 .stream-head-side .pf-dd { width: 150px; }
  html.ui-v2 .stream-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.ui-v2 .stream-tab { height: 40px; font-size: 12.5px; gap: 7px; }
  html.ui-v2 .stream-panel { padding: 14px; border-radius: 16px; }
  html.ui-v2 .stream-band { padding: 14px 0; border-radius: 16px; }
  html.ui-v2 .stream-band-lead { padding: 0 14px; }
  html.ui-v2 .stream-big { font-size: 30px; }
  html.ui-v2 .stream-kpis, html.ui-v2 .stream-kpis[style] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  html.ui-v2 .stream-kpi { padding: 0 14px; }
  html.ui-v2 .stream-kpi:nth-child(odd) { border-left: 0; }
  html.ui-v2 .stream-kpi dd b { font-size: 21px; }
  html.ui-v2 .stream-band-lead { padding-bottom: 16px; }
  html.ui-v2 .stream-band-lead + .stream-kpis { padding-top: 16px; }
  html.ui-v2 .stream-feed { height: 380px; }
  html.ui-v2 .stream-ev { gap: 10px; }
  html.ui-v2 .stream-list li { grid-template-columns: 18px minmax(0, 1fr) 36px 60px; gap: 10px; }
  html.ui-v2 .stream-list-platforms li { grid-template-columns: 32px minmax(0, 1fr) 36px 60px; }
  html.ui-v2 .stream-sim-foot { flex-wrap: wrap; }
  html.ui-v2 .stream-sim-foot .stream-switch { flex: 1 1 100%; }
  html.ui-v2 .stream .pf-btn.stream-fire { flex: 1 1 100%; }

  html.ui-v2 .stream-toolbar { flex-wrap: wrap; padding: 12px; }
  html.ui-v2 .stream-toolbar-copy { flex: 1 1 100%; justify-content: space-between; padding: 0 4px 4px; }
  html.ui-v2 .stream-toolbar .pf-btn { flex: 1 1 0; }
  html.ui-v2 .stream-packs { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-rule-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px; }
  html.ui-v2 .stream-rule-n { display: none; }
  html.ui-v2 .stream-rule-sum { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 8px; }
  html.ui-v2 .stream-rule-line { width: 100%; font-size: 13px; }
  html.ui-v2 .stream-rule-tags { flex-wrap: wrap; }
  html.ui-v2 .stream-rule-order { flex-direction: column; }
  html.ui-v2 .stream-switch.is-compact .stream-switch-l { display: none; }
  html.ui-v2 .stream-switch.is-compact { padding: 0 4px; }
  html.ui-v2 .stream-rule-body { padding: 2px 8px 8px; }
  html.ui-v2 .stream-rule-edit { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-rule-foot { flex-wrap: wrap; }
  html.ui-v2 .stream-rule-note { order: 5; flex: 1 1 100%; text-align: left; }
  html.ui-v2 .stream-rule-foot .pf-btn { flex: 1 1 0; }

  html.ui-v2 .stream-gift-tools { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-gift-tools .stream-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-gift-tools .stream-seg button { padding: 0 4px; font-size: 11.5px; }
  html.ui-v2 .stream-col-num { width: 62px; }
  html.ui-v2 .stream-col-bind { width: 68px; }
  html.ui-v2 .stream-table-wrap { max-height: 560px; }
  html.ui-v2 .stream-table th, html.ui-v2 .stream-table td { padding: 0 6px; }
  html.ui-v2 .stream-table-wrap { margin: 0 -4px; }
  html.ui-v2 .stream-letter { width: 30px; height: 30px; flex-basis: 30px; }
  html.ui-v2 .stream-gift-name { gap: 10px; }

  html.ui-v2 .stream-steps { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-actions { flex-wrap: wrap; }
  html.ui-v2 .stream-actions > .pf-btn { flex: 1 1 0; }

  html.ui-v2 .stream-source-head { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "mark copy button" "mark meta button"; row-gap: 8px; column-gap: 12px; }
  html.ui-v2 .stream-source-head > .stream-mark { grid-area: mark; align-self: start; }
  html.ui-v2 .stream-source-head > .stream-source-copy { grid-area: copy; }
  html.ui-v2 .stream-source-head > .stream-source-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px 10px; }
  html.ui-v2 .stream-source-head > .pf-btn, html.ui-v2 .stream-source-head > .stream-confirm { grid-area: button; width: auto; }
  html.ui-v2 .stream-source-copy span { white-space: normal; }
  html.ui-v2 .stream-source-body { margin-left: 0; }
  html.ui-v2 .stream-copyfield .pf-btn { min-width: 0; }

  html.ui-v2 .stream-row-cards { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-ov-settings { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-ov-save { flex-direction: column-reverse; align-items: stretch; }

  html.ui-v2 .stream-create .stream-fields { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .stream-message { flex-direction: column; align-items: flex-start; }
}

@media (pointer: coarse) {
  html.ui-v2 .stream-icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
  html.ui-v2 .stream .pf-dd-btn.pf-select { height: 40px; }
  html.ui-v2 .stream-input { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .stream-body.is-entering > .stream-view > :not(.stream-row),
  html.ui-v2 .stream-body.is-entering .stream-row > *,
  html.ui-v2 .stream-body.is-entering .stream-rule, html.ui-v2 .stream-body.is-entering .stream-ev, html.ui-v2 .stream-body.is-entering .stream-list li,
  html.ui-v2 .stream-ev.is-new, html.ui-v2 .stream-ev.is-new .stream-mark, html.ui-v2 .stream-chips span,
  html.ui-v2 .stream-rule-body, html.ui-v2 .stream-gift-list, html.ui-v2 .stream-source-body, html.ui-v2 .stream-fire.is-firing svg { animation: none; }
  html.ui-v2 .stream-tabs-ink, html.ui-v2 .stream-switch-k::after, html.ui-v2 .stream-tab svg, html.ui-v2 .stream-swatches i { transition: none; }
}

/* Test events: marked in the feed, and counted in a line under the band's
   earnings rather than in its figures. */
html.ui-v2 .stream-test-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--pf-dim); font-size: 12px; line-height: 1.5; }
html.ui-v2 .stream-test-note[hidden] { display: none; }
html.ui-v2 .stream-test-note .stream-tag, html.ui-v2 .stream-tag-test { flex: 0 0 auto; }
/* With nothing earned yet the empty line gives its room to the test note. */
html.ui-v2 .stream-spark:has(.is-flat):has(+ .stream-test-note:not([hidden])) { display: none; }