/* ===================================================================
   /v2 simple dashboard (2026-10-21)
   Big tiles, big numbers, one line of text per item. Pie palette, one
   color per area: blue = studio, green = OBS, pink = team, gold =
   sponsors, purple = QR, brown = account. Loaded after application.css
   (the reused classic partials come from there); toasts are toasts.css.
   =================================================================== */

body.v2 {
  --v2-cream: #fcf3eb;
  --v2-ink: #3a2518;
  --v2-muted: #6e5546;
  --v2-line: #efe2d3;
  --v2-display: 'Baloo 2', 'Rubik', system-ui, sans-serif;

  --v2-blue: #4a66c8; --v2-blue-deep: #34499a; --v2-blue-bg: #e3e8fa; --v2-blue-line: #c9d3f5; --v2-blue-ink: #2c3f86;
  --v2-green: #4f8a1c; --v2-green-deep: #365f12; --v2-green-bg: #e4f3d4; --v2-green-line: #c8e5a9; --v2-green-ink: #2f5212;
  --v2-pink: #ad4790; --v2-pink-deep: #7d2763; --v2-pink-bg: #fbe3f3; --v2-pink-line: #f3c4e4; --v2-pink-ink: #7d2763;
  --v2-gold: #a85a14; --v2-gold-deep: #7a4210; --v2-gold-bg: #fdebd6; --v2-gold-line: #f7d3a9; --v2-gold-ink: #7a4210;
  --v2-purple: #84569a; --v2-purple-deep: #5c3470; --v2-purple-bg: #efe3f5; --v2-purple-line: #dcc4ea; --v2-purple-ink: #5c3470;
  --v2-brown: #6e5546; --v2-brown-deep: #4d3a2f;
  --v2-danger: #9b1c3a; --v2-danger-line: #f5c9cf;

  margin: 0;
  background: var(--v2-cream);
  color: var(--v2-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}
:lang(uk) body.v2 { --v2-display: 'Rubik', 'Baloo 2', system-ui, sans-serif; }

body.v2 a { color: var(--v2-blue-ink); }
body.v2 :focus-visible { outline: 3px solid var(--v2-blue); outline-offset: 3px; }

/* "Pressable" toy feel: lifts on hover, sinks on press. */
.v2-pill, .v2-btn, .v2-switch, .v2-scene, .v2-more > summary, :is(a, button).v2-bento-card {
  transition: transform .08s ease, box-shadow .08s ease;
  cursor: pointer;
}
.v2-pill:hover, .v2-btn:hover, .v2-scene:hover, .v2-more > summary:hover, :is(a, button).v2-bento-card:hover { transform: translateY(-2px); }
.v2-pill:active, .v2-btn:active, .v2-scene:active, .v2-more > summary:active, :is(a, button).v2-bento-card:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(58, 37, 24, .14) !important;
}
@media (prefers-reduced-motion: reduce) {
  .v2-pill, .v2-btn, .v2-switch, .v2-scene, .v2-more > summary, :is(a, button).v2-bento-card { transition: none; }
}

/* --- Header --- */
.v2-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--v2-blue) !important;
}
.v2-brand img { width: 40px; height: 40px; }
.v2-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--v2-line);
  box-shadow: 0 3px 0 var(--v2-line);
  color: var(--v2-ink) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.v2-pill svg { width: 17px; height: 17px; }
.v2-pill.is-active { color: #fff !important; }
.v2-pill--home.is-active { background: var(--v2-blue); border-color: var(--v2-blue); box-shadow: 0 3px 0 var(--v2-blue-deep); }
.v2-pill--team.is-active { background: var(--v2-pink); border-color: var(--v2-pink); box-shadow: 0 3px 0 var(--v2-pink-deep); }
.v2-pill--sponsors.is-active { background: var(--v2-gold); border-color: var(--v2-gold); box-shadow: 0 3px 0 var(--v2-gold-deep); }
.v2-pill--qr.is-active { background: var(--v2-purple); border-color: var(--v2-purple); box-shadow: 0 3px 0 var(--v2-purple-deep); }
.v2-pill--me.is-active { background: var(--v2-brown); border-color: var(--v2-brown); box-shadow: 0 3px 0 var(--v2-brown-deep); }
.v2-inline-form { display: inline; margin: 0; }

/* --- Page --- */
.v2-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.v2-h1 { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: clamp(30px, 4vw, 38px); line-height: 1.1; }
.v2-h2 { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.v2-lead { margin: 4px 0 0; font-size: 17px; font-weight: 500; color: var(--v2-muted); }
.v2-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.v2-stack { display: flex; flex-direction: column; gap: 16px; }
.v2-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v2-actions form { margin: 0; }
.v2-muted { color: var(--v2-muted); }
.v2-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-small { font-size: 15px; }

/* --- Status pill --- */
.v2-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  font-weight: 700;
  font-size: 15px;
}
.v2-status--ok { background: var(--v2-green-bg); border-color: var(--v2-green-line); color: var(--v2-green-ink); }
.v2-status--warn { background: var(--v2-gold-bg); border-color: var(--v2-gold-line); color: var(--v2-gold-ink); }
.v2-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.v2-status[hidden] { display: none; }

/* --- Home: cards sized by importance (bento) ---
   The overlay card is the big one (two columns, two rows); the small
   cards carry one number each and open their page. */
.v2-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.v2-hello-plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v2-notice-text { flex: 1 1 260px; font-size: 17px; font-weight: 600; }
.v2-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v2-bento > .v2-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v2-bento-hero { grid-column: span 2; grid-row: span 2; gap: 14px !important; background: var(--v2-blue-bg); border-color: var(--v2-blue-line); box-shadow: 0 4px 0 var(--v2-blue-line); }
.v2-bento-hero .v2-card-title { font-size: 24px; }
/* Its two buttons share a row and stretch to the picture's width; when
   the card is too narrow for both, each takes a full row. */
.v2-bento-hero .v2-actions .v2-btn { flex: 1 1 auto; }
.v2-bento-wide { grid-column: span 2; }
.v2-bento-full { grid-column: 1 / -1; }
:is(a, button).v2-bento-card { color: var(--v2-ink) !important; text-decoration: none; }
/* The OBS card is a button (it opens the OBS window): no button look. */
button.v2-bento-card { width: 100%; margin: 0; font: inherit; text-align: start; }
.v2-bento-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-bento-head .v2-card-title { flex: 1 1 auto; min-width: 0; }
.v2-bento-meta { margin-left: auto; color: var(--v2-blue-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.v2-badge { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--v2-brown); }
.v2-badge--blue { background: var(--v2-blue); }
.v2-badge--gold { background: var(--v2-gold); }
.v2-badge--pink { background: var(--v2-pink); }
.v2-badge--purple { background: var(--v2-purple); }
.v2-big { font-family: var(--v2-display); font-weight: 800; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-bento-label { color: var(--v2-muted); font-size: 14px; font-weight: 600; }
/* OBS: gold until OBS has loaded the overlay in the last day, then green.
   Its head is the badge and "OBS" like every card; the status sits under
   it, and the how-to link at the bottom. */
.v2-bento-status { font-weight: 700; font-size: 17px; line-height: 1.3; }
.v2-bento-status[hidden] { display: none; }
.v2-bento-obs.is-warn { background: var(--v2-gold-bg); border-color: var(--v2-gold-line); box-shadow: 0 4px 0 var(--v2-gold-line); color: var(--v2-gold-ink) !important; }
.v2-bento-obs.is-warn .v2-badge { background: var(--v2-gold); }
.v2-bento-obs.is-ok { background: var(--v2-green-bg); border-color: var(--v2-green-line); box-shadow: 0 4px 0 var(--v2-green-line); color: var(--v2-green-ink) !important; }
.v2-bento-obs.is-ok .v2-badge { background: var(--v2-green); }
.v2-bento-obs .v2-bento-label { color: inherit; margin-top: auto; }
.v2-faces { display: flex; padding-left: 8px; }
.v2-faces .v2-avatar { width: 36px; height: 36px; margin-left: -8px; border: 2px solid #fff; font-size: 16px; }
.v2-scenes-manage { font-size: 14px; font-weight: 700; }
/* What happened after "Copy OBS link": a toast in the layout's stack, so
   nothing on the page moves. Empty (no box) until v2Copy sets .is-copied
   or .is-failed; .is-leaving slides it out. Clicks pass through it. */
.v2-copy-note { margin: 0; }
.v2-copy-note .v2-when-done, .v2-copy-note .v2-when-failed { display: none; }
.v2-copy-note.is-copied .v2-when-done, .v2-copy-note.is-failed .v2-when-failed { display: inline; }
.v2-copy-note.is-copied, .v2-copy-note.is-failed {
  padding: 12px 16px; border-radius: 16px; border: 2px solid var(--v2-blue-line); background: #fff;
  box-shadow: 0 4px 0 var(--v2-blue-line); color: var(--v2-blue-ink); font-size: 15px; line-height: 1.4;
  animation: toast-in .35s cubic-bezier(.16, 1, .3, 1);
}
.v2-copy-note.is-failed { border-color: var(--v2-gold-line); box-shadow: 0 4px 0 var(--v2-gold-line); color: var(--v2-gold-ink); }
.v2-copy-note.is-leaving { animation: toast-out .3s cubic-bezier(.16, 1, .3, 1) forwards; }
/* In a card, the last stream's numbers share a row, each box as wide as
   its number ("4 год 50 хв" needs more than "2"), and its chart is a
   strip, not a poster. */
.v2-bento .v2-stat-grid { display: flex; flex-wrap: wrap; }
.v2-bento .v2-numbox { flex: 1 1 auto; }
.v2-bento .v2-num { font-size: 28px; }
.v2-bento .v2-chart { --plot: 92px; }
/* The overlay card's picture: a toy stream with an overlay
   (overlay-placeholder.svg), the same for everyone. Soft pastels at 2:1,
   so Edit overlay (blue) and Copy OBS link (green) are the card's
   strongest colors; a bold dashed frame in Edit overlay's blue marks it
   as the canvas you edit (the gaps show the card, not the sky). When the
   cards beside it are taller, the picture takes the spare height as more
   sky (drawn from the bottom, on the sky's color), so no gap opens under
   the buttons. */
.v2-preview { display: block; flex: 1 0 auto; overflow: hidden; border-radius: 20px; border: 8px dashed var(--v2-blue); background: #eef2fb padding-box; aspect-ratio: 2 / 1; }
.v2-preview img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* The studios a user helps with, one tile on both Homes (v2/_studios_tile):
   a row per studio with its OBS status, five shown, then "Show N more";
   a name search above ten. [hidden] needs its own rule, because
   .v2-list-row sets display. Below 700px the Open button takes its own
   row, so a long OBS status gets the whole width. */
.v2-studios [hidden] { display: none; }
.v2-studios-head .v2-chip { vertical-align: middle; }
.v2-studios-search { flex: 0 1 260px; min-height: 42px; }
.v2-studios .v2-list-row .v2-actions { gap: 6px; margin-top: 4px; }
.v2-studios-none { margin: 12px 0 0; }
@media (max-width: 699px) {
  .v2-studios .v2-list-row .v2-btn { flex: 1 1 100%; }
}
/* A mod who only edits other streamers' studios (v2/_editor_home): their
   own overlay is a dashed offer strip under the studios tile. */
.v2-bento > .v2-own-offer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.v2-own-offer-text { flex: 1 1 260px; min-width: 0; }
.v2-own-offer-text .v2-hint { margin: 4px 0 0; }
/* Four columns need about 1024px: narrower, the overlay card can't fit its
   two Ukrainian buttons beside two columns of small cards. Phones: it
   takes the full width and the small cards pair up under it. */
@media (max-width: 1023px) {
  .v2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-bento-hero { grid-row: auto; }
  .v2-bento-wide { grid-column: 1 / -1; }
}
/* 481-1023px: the overlay card keeps two thirds of the row, with OBS and
   the next card stacked beside it, and the rest pair up below (the side
   column is at least 156px, so "Спонсори" fits beside its badge). Without
   sponsors, QR goes under OBS and Team takes the row below (its tip is
   too long for the narrow column). The two buttons take a row each until
   the card is wide enough for both (about 750px). */
@media (min-width: 481px) and (max-width: 1023px) {
  .v2-bento { grid-template-columns: minmax(0, 2fr) minmax(156px, 1fr); }
  .v2-bento-hero { grid-column: 1; grid-row: span 2; }
  .v2-bento > .v2-bento-obs { grid-column: 2; }
  .v2-bento:not(:has(.v2-bento-sponsors)) > .v2-bento-qr { grid-area: 2 / 2; }
  .v2-bento:not(:has(.v2-bento-sponsors)) > .v2-bento-team { grid-column: 1 / -1; }
}
/* Below 700px the small cards are phone-narrow (140-210px), on phones and
   beside the overlay card alike: smaller heads, so "Спонсори" and
   "QR-скани" fit beside their badges. */
@media (max-width: 699px) {
  .v2-bento { gap: 12px; }
  .v2-bento > .v2-card { padding: 16px; gap: 8px; }
  .v2-bento-hero .v2-badge { width: 32px; height: 32px; border-radius: 10px; }
  .v2-bento-hero .v2-card-title { font-size: 20px; }
  .v2-bento-card .v2-bento-head { gap: 8px; }
  .v2-bento-card .v2-badge { width: 28px; height: 28px; border-radius: 9px; }
  .v2-bento-card .v2-badge svg { width: 15px; height: 15px; }
  .v2-bento-card .v2-card-title { font-size: 16px; }
  .v2-big { font-size: 34px; }
  .v2-bento-status { font-size: 15px; }
}

/* --- Cards --- */
.v2-card {
  box-sizing: border-box;
  padding: 22px;
  border-radius: 24px;
  border: 2px solid var(--v2-line);
  background: #fff;
  box-shadow: 0 4px 0 var(--v2-line);
  min-width: 0;
}
.v2-card--pink { background: var(--v2-pink-bg); border-color: var(--v2-pink-line); box-shadow: 0 4px 0 var(--v2-pink-line); color: var(--v2-pink-ink); }
.v2-card--purple { background: var(--v2-purple-bg); border-color: var(--v2-purple-line); box-shadow: 0 4px 0 var(--v2-purple-line); color: var(--v2-purple-ink); }
.v2-card--gold { background: var(--v2-gold-bg); border-color: var(--v2-gold-line); box-shadow: 0 4px 0 var(--v2-gold-line); color: var(--v2-gold-ink); }
.v2-card--dashed { border-style: dashed; box-shadow: none; }
.v2-card-title { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: 20px; line-height: 1.15; }
.v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.v2-grid--top { align-items: start; }
@media (max-width: 420px) { .v2-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .v2-card { padding: 18px; border-radius: 20px; } }

/* A card whose parts stack, with its buttons pinned to the bottom so
   cards side by side line their buttons up. */
.v2-card--col { display: flex; flex-direction: column; gap: 14px; }
.v2-card-foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.v2-card-foot > form { display: contents; }
.v2-card-foot .v2-btn { width: 100%; padding: 6px 16px; line-height: 1.2; text-align: center; white-space: normal; }
/* The main (big) action gets its own row; small ones share the next. */
.v2-card-foot .v2-btn--big { grid-column: 1 / -1; }

/* --- Buttons --- */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  box-shadow: 0 4px 0 var(--v2-line);
  color: var(--v2-ink) !important;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.v2-btn--big { font-family: var(--v2-display); font-weight: 800; font-size: 18px; }
.v2-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.v2-btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; box-shadow: 0 3px 0 var(--v2-line); }
.v2-btn--sm svg { width: 15px; height: 15px; }
.v2-btn--blue { background: var(--v2-blue); border-color: var(--v2-blue); box-shadow: 0 4px 0 var(--v2-blue-deep); color: #fff !important; }
.v2-btn--green { background: var(--v2-green); border-color: var(--v2-green); box-shadow: 0 4px 0 var(--v2-green-deep); color: #fff !important; }
.v2-btn--pink { background: var(--v2-pink); border-color: var(--v2-pink); box-shadow: 0 4px 0 var(--v2-pink-deep); color: #fff !important; }
.v2-btn--gold { background: var(--v2-gold); border-color: var(--v2-gold); box-shadow: 0 4px 0 var(--v2-gold-deep); color: #fff !important; }
.v2-btn--purple { background: var(--v2-purple); border-color: var(--v2-purple); box-shadow: 0 4px 0 var(--v2-purple-deep); color: #fff !important; }
.v2-btn--brown { background: var(--v2-brown); border-color: var(--v2-brown); box-shadow: 0 4px 0 var(--v2-brown-deep); color: #fff !important; }
.v2-btn--twitch { background: #9146ff; border-color: #9146ff; box-shadow: 0 4px 0 #6a2fc4; color: #fff !important; }
.v2-btn--danger { border-color: var(--v2-danger-line); box-shadow: 0 4px 0 var(--v2-danger-line); color: var(--v2-danger) !important; }
.v2-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Chips, avatars, numbers --- */
.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #f3ece4;
  color: var(--v2-muted);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.v2-chip--ok { background: var(--v2-green-bg); color: var(--v2-green-ink); }
.v2-chip--warn { background: var(--v2-gold-bg); color: var(--v2-gold-ink); }
.v2-chip--blue { background: var(--v2-blue-bg); color: var(--v2-blue-ink); }
.v2-chip--bad { background: #fdecef; color: var(--v2-danger); }
.v2-chip .v2-dot { width: 8px; height: 8px; }
.v2-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-pink);
  color: #fff;
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 22px;
}
.v2-avatar--blue { background: var(--v2-blue); }
.v2-avatar--muted { background: #b9a593; }
.v2-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-person-name { display: block; font-family: var(--v2-display); font-weight: 800; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.v2-nums { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-numbox { flex: 1 1 130px; padding: 12px 14px; border-radius: 16px; background: var(--v2-cream); }
.v2-numbox--gold { background: var(--v2-gold-bg); color: var(--v2-gold-ink); }
.v2-numbox--purple { background: var(--v2-purple-bg); color: var(--v2-purple-ink); }
.v2-num { display: block; font-family: var(--v2-display); font-weight: 800; font-size: 32px; line-height: 1; }
.v2-num--huge { font-size: clamp(48px, 7vw, 72px); line-height: .95; }
.v2-num-label { display: block; font-size: 14px; font-weight: 600; }

/* --- Switch (OBS access) --- */
.v2-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--v2-cream); font-weight: 600; font-size: 15px; }
.v2-switch-row form { margin: 0; }
.v2-switch {
  position: relative;
  width: 58px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #d8cbbb;
  background: #e6dccf;
}
.v2-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(58, 37, 24, .18);
  transition: left .15s ease;
}
.v2-switch.is-on { background: var(--v2-green); border-color: var(--v2-green); }
.v2-switch.is-on::after { left: 27px; }

/* --- Forms --- */
.v2-label { display: block; font-family: var(--v2-display); font-weight: 800; font-size: 19px; line-height: 1.2; margin-bottom: 8px; }
.v2-hint { margin: 8px 0 0; font-size: 15px; color: var(--v2-muted); }
.v2-hint code { white-space: nowrap; }
.v2-input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 14px;
  border: 2px solid var(--v2-line);
  background: var(--v2-cream);
  color: var(--v2-ink);
  font: inherit;
  font-size: 16px;
  text-overflow: ellipsis;
}
.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-field-label { font-size: 14px; font-weight: 700; color: var(--v2-muted); }
.v2-field .v2-hint { margin: 0; }
.v2-input:focus { outline: 3px solid var(--v2-blue); outline-offset: 2px; }
.v2-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.v2-form-row .v2-input { flex: 1 1 220px; width: auto; }
/* Short values (scene names, up to 10 characters) keep the button beside them. */
.v2-form-row--short .v2-input { flex-basis: 120px; }
.v2-form-row form { margin: 0; }
.v2-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-choices form { flex: 1 1 160px; margin: 0; display: flex; }
.v2-choices .v2-btn { flex: 1 1 auto; }
.v2-btn.is-picked { background: var(--v2-blue); border-color: var(--v2-blue); box-shadow: 0 4px 0 var(--v2-blue-deep); color: #fff !important; }

/* The shared "Where do you stream?" chips, made big. */
body.v2 .platform-chips { gap: 12px; }
body.v2 .platform-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 2px solid var(--v2-line);
  box-shadow: 0 3px 0 var(--v2-line);
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink);
}
/* Picked: a light fill and a check mark, so it doesn't look like the solid
   blue Save button under the chips. Not picked: a plus in the same spot,
   so a chip doesn't change width when tapped. (!important: bi_icon sets
   display inline.) */
body.v2 .platform-chip span { gap: 6px; }
body.v2 .platform-chip .platform-on, body.v2 .platform-chip input:checked + span .platform-off { display: none !important; }
body.v2 .platform-chip input:checked + span .platform-on { display: inline-block !important; }
body.v2 .platform-chip input:checked + span { background: var(--v2-blue-bg); border-color: var(--v2-blue); box-shadow: 0 3px 0 var(--v2-blue-line); color: var(--v2-blue-ink); }
body.v2 .platform-chip input:focus-visible + span { outline: 3px solid var(--v2-blue); outline-offset: 3px; }
body.v2 .platform-actions { margin-top: 16px; }

/* --- Numbered steps (sponsors help) --- */
.v2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.v2-steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.v2-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-gold);
  color: #fff;
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 20px;
}

/* --- Weekly bars (QR) --- */
.v2-bars { flex: 999 1 340px; display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.v2-bar { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; font-weight: 700; font-size: 14px; }
.v2-bar i { display: block; width: 100%; min-height: 8px; border-radius: 14px 14px 6px 6px; background: var(--v2-purple); }
.v2-bar i.is-zero { background: var(--v2-purple-line); }

/* --- Scenes (home) --- */
.v2-scenes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v2-scenes form { margin: 0; }
.v2-scene {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  box-shadow: 0 3px 0 var(--v2-line);
  color: var(--v2-ink);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
}
.v2-scene.is-live { background: var(--v2-green-bg); border-color: var(--v2-green-line); box-shadow: 0 3px 0 var(--v2-green-line); color: var(--v2-green-ink); cursor: default; }

/* --- Thumbnails and fold-outs --- */
.v2-thumb {
  flex: 0 1 200px;
  min-height: 110px;
  border-radius: 18px;
  background: var(--v2-gold-bg) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-gold-ink);
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 20px;
  overflow: hidden;
}
/* The whole banner, scaled to fit: a crop would cut off the sponsor's name. */
.v2-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.v2-more { border-radius: 24px; }
.v2-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  box-shadow: 0 3px 0 var(--v2-line);
  font-weight: 700;
  font-size: 15px;
}
.v2-more > summary::-webkit-details-marker { display: none; }
.v2-more--pink > summary {
  min-height: 48px;
  background: var(--v2-pink);
  border-color: var(--v2-pink);
  box-shadow: 0 4px 0 var(--v2-pink-deep);
  color: #fff;
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 18px;
}
.v2-more[open] > summary { margin-bottom: 14px; }
.v2-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 2px solid var(--v2-line); }
.v2-list-row:first-child { border-top: none; }
.v2-list-row .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
/* In a Home card (the studios you help with) the button stays beside the
   name down to phone widths; a long name ends in "...". */
.v2-bento .v2-list-row .grow { flex-basis: 140px; }

/* The classic OBS setup partial, inside a v2 card: pie blue, larger text. */
body.v2 .v2-obs { --accent: #4a66c8; --accent-subtle: rgba(74, 102, 200, .08); font-size: 15px; }
body.v2 .v2-obs .setup-guide-toggle { font-size: 15px; padding: 10px 0; }
body.v2 .v2-obs .obs-drag-compact { min-height: 44px; border-radius: 14px; }
body.v2 .v2-obs .grid-console { min-height: 44px; border-radius: 14px; }

/* Detail pages (campaign, QR link) set `main.v2-compact`. Since the
   2026-10-23 scale their pieces are the same size as everywhere else;
   their titles can be long names or addresses, so they wrap anywhere. */
.v2-compact .v2-h1 { overflow-wrap: anywhere; }

.v2-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  color: var(--v2-muted) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.v2-back:hover { background: var(--v2-cream); }
.v2-head { display: flex; flex-direction: column; gap: 12px; }
.v2-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.v2-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--v2-muted); font-size: 15px; font-weight: 500; }
.v2-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.v2-meta .is-warn { color: var(--v2-gold-ink); font-weight: 700; }
.v2-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.v2-section-head .v2-card-title { display: inline-flex; align-items: center; gap: 10px; }
.v2-section-note { color: var(--v2-muted); font-size: 14px; font-weight: 600; }

/* Numbers: a grid of number boxes and one quiet line of extra facts. */
.v2-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.v2-numbox--green { background: var(--v2-green-bg); color: var(--v2-green-ink); }
.v2-numbox--blue { background: var(--v2-blue-bg); color: var(--v2-blue-ink); }
/* Words as values ("Комп'ютер", "Android") shrink with their box so they
   never break mid-word; the line stays as tall as a number's, so the labels
   under the boxes line up. */
.v2-numbox:has(> .v2-num--text, > .v2-num--date) { container-type: inline-size; }
.v2-num.v2-num--text { font-size: clamp(16px, 16cqi, 24px); line-height: 32px; overflow-wrap: break-word; }
/* A date ("30 жовт.") stays on one line and lines up with the numbers. */
.v2-num.v2-num--date { font-size: clamp(16px, 20cqi, 26px); line-height: 32px; white-space: nowrap; }
.v2-num-sub { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; }
.v2-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--v2-muted); font-size: 15px; }
.v2-facts b { color: var(--v2-ink); font-variant-numeric: tabular-nums; }

/* Range and page pills. */
.v2-ranges { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-range {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  color: var(--v2-ink) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.v2-range:hover { background: var(--v2-cream); }
.v2-range.is-active { background: var(--v2-gold); border-color: var(--v2-gold); color: #fff !important; }
.v2-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Bar chart without JS: one grid column per bar; --h is the bar's share
   of the tallest one (0 to 1), of a --plot-tall area. Axis labels sit on
   the same columns. With .v2-chart--values each bar's number sits on top
   of it, in --room taken from the plot; --tight charts (9 to 12 bars)
   use a smaller number when narrow. */
.v2-chart { position: relative; display: flex; flex-direction: column; gap: 8px; --plot: 150px; --room: 0px; --bar: var(--v2-gold); --bar-zero: var(--v2-gold-line); --ink: var(--v2-gold-ink); }
.v2-chart--purple { --bar: var(--v2-purple); --bar-zero: var(--v2-purple-line); --ink: var(--v2-purple-ink); }
.v2-chart--values { --room: 20px; }
.v2-chart-bars, .v2-chart-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: clamp(1px, .5vw, 6px); }
.v2-chart-bars { grid-template-rows: var(--plot); }
.v2-chart-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.v2-chart-value { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-chart-bar { align-self: stretch; height: max(calc((var(--plot) - var(--room)) * var(--h)), 6px); border-radius: 8px 8px 3px 3px; background: var(--bar); }
.v2-chart-bar.is-zero { height: 6px; background: var(--bar-zero); }
/* The bubble the chart tooltips (layout) put above a hovered or tapped
   bar: its exact number and date. */
.v2-chart-col.is-active .v2-chart-bar { filter: brightness(.85); }
.v2-chart-tip { position: absolute; z-index: 3; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 12px; border-radius: 12px; background: var(--v2-ink); color: #fff; font-size: 13px; line-height: 1.25; white-space: nowrap; box-shadow: 0 3px 0 rgba(58, 37, 24, .25); }
.v2-chart-tip[hidden] { display: none; }
.v2-chart-tip b { font-size: 15px; font-weight: 800; }
.v2-chart-tip span { color: rgba(255, 255, 255, .78); font-weight: 600; }
.v2-chart-axis { color: var(--v2-muted); font-size: 13px; font-weight: 600; }
.v2-chart-axis span { grid-row: 1; justify-self: center; white-space: nowrap; }
.v2-chart-axis span:first-child { justify-self: start; }
.v2-chart-axis span:last-child { justify-self: end; }
/* A narrow chart (phones) keeps the first, middle and last dates, so longer
   Ukrainian dates ("06 жовт.") don't run into each other. */
.v2-chart { container-type: inline-size; }
@container (max-width: 420px) {
  .v2-chart-axis span:not(:first-child):not(:last-child) { display: none; }
  .v2-chart-axis span:nth-child(2):nth-last-child(2),
  .v2-chart-axis span:nth-child(3):nth-last-child(3) { display: block; }
  .v2-chart--tight .v2-chart-value { font-size: 11px; letter-spacing: -.02em; }
}
.v2-empty { margin: 0; padding: 18px; border-radius: 18px; background: var(--v2-cream); color: var(--v2-muted); font-weight: 600; text-align: center; }
/* An empty slot in a card grid (the Team page's "You help" before any
   studio): grey and flat, no shadow or hover, so it doesn't read as a
   button, with a line saying how a card gets there. */
.v2-empty-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 180px; text-align: center; background: rgba(110, 85, 70, .06); border: 2px dashed rgba(110, 85, 70, .22); box-shadow: none; color: var(--v2-muted); }
.v2-empty-slot p { margin: 0; max-width: 34ch; font-weight: 600; }
.v2-empty-slot svg { opacity: .7; }

/* Label, bar, count rows (devices, languages, categories). */
.v2-breakdowns { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 28px; }
.v2-breakdown { --bar: var(--v2-purple); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2-breakdown--blue { --bar: var(--v2-blue); }
.v2-breakdown--green { --bar: var(--v2-green); }
.v2-breakdown--pink { --bar: var(--v2-pink); }
.v2-breakdown--gold { --bar: var(--v2-gold); }
.v2-breakdown-title { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--v2-muted); font-size: 15px; font-weight: 800; }
.v2-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 30%) auto; align-items: center; gap: 10px; font-size: 15px; }
.v2-breakdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-breakdown-bar { height: 10px; border-radius: 999px; background: var(--v2-cream); overflow: hidden; }
.v2-breakdown-bar i { display: block; height: 100%; border-radius: inherit; background: var(--bar); }
.v2-breakdown-num { min-width: 28px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tables. On phones each row becomes a short block: the time on its own
   line, then "label value" pairs that wrap. */
.v2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2-table th { padding: 8px 10px; border-bottom: 2px solid var(--v2-line); color: var(--v2-muted); font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
.v2-table td { padding: 9px 10px; border-bottom: 2px solid var(--v2-line); }
.v2-table tr:last-child td { border-bottom: none; }
.v2-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.v2-table .when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-table .clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-table .muted { color: var(--v2-muted); }
/* The seven-column plays table needs the short rows up to tablet width. */
@media (max-width: 900px) {
  .v2-table--wide thead, .v2-table--wide td.idx { display: none; }
  .v2-table--wide, .v2-table--wide tbody { display: block; }
  .v2-table--wide tr { display: flex; flex-wrap: wrap; gap: 3px 16px; padding: 10px 0; border-bottom: 2px solid var(--v2-line); }
  .v2-table--wide tr:last-child { border-bottom: none; }
  .v2-table--wide td { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; text-align: left; }
  .v2-table--wide td::before { content: attr(data-label); color: var(--v2-muted); }
  .v2-table--wide td.when { flex-basis: 100%; font-weight: 700; }
  .v2-table--wide td.when::before { content: none; }
  .v2-table--wide td.clip { max-width: 100%; white-space: normal; }
  .v2-table--wide td.wide { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .v2-table thead, .v2-table td.idx { display: none; }
  .v2-table, .v2-table tbody { display: block; }
  .v2-table tr { display: flex; flex-wrap: wrap; gap: 3px 16px; padding: 10px 0; border-bottom: 2px solid var(--v2-line); }
  .v2-table tr:last-child { border-bottom: none; }
  .v2-table td { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; text-align: left; }
  .v2-table td::before { content: attr(data-label); color: var(--v2-muted); }
  .v2-table td.when { flex-basis: 100%; font-weight: 700; }
  .v2-table td.when::before { content: none; }
  .v2-table td.clip { max-width: 100%; white-space: normal; }
  .v2-table td.wide { flex-basis: 100%; }
}

/* Sponsor link rows: thumb, name, link, numbers. */
.v2-link-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 2px solid var(--v2-line); }
.v2-link-row:first-child { border-top: none; padding-top: 0; }
.v2-link-row:last-child { padding-bottom: 0; }
.v2-link-row--wide { grid-template-columns: minmax(0, 1fr); }
.v2-link-thumb {
  align-self: start;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--v2-gold-bg);
  color: var(--v2-gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.v2-link-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-link-thumb.is-qr { background: var(--v2-purple-bg); color: var(--v2-purple); }
.v2-link-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v2-link-name { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.v2-link-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v2-link-tools form { margin: 0; }
.v2-url {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 14px;
  border: 2px solid var(--v2-line);
  background: var(--v2-cream);
  color: var(--v2-muted);
  font: 500 14px/1 ui-monospace, 'SF Mono', Menlo, monospace;
  text-overflow: ellipsis;
}
.v2-name-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.v2-name-form .v2-input { flex: 1 1 120px; width: auto; min-height: 40px; border-radius: 14px; font-weight: 700; }
.v2-note { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 18px; background: var(--v2-gold-bg); color: var(--v2-gold-ink); font-size: 15px; font-weight: 600; }
.v2-note svg { flex-shrink: 0; margin-top: 3px; }
/* Phones: thumb beside the name, links and numbers full width below. */
@media (max-width: 520px) {
  .v2-link-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
  .v2-link-main { display: contents; }
  .v2-link-main > * { grid-column: 1 / -1; }
  .v2-link-main > .v2-name-form { grid-column: 2; }
  .v2-name-form .v2-input { flex-basis: 100%; }
  /* The 64px thumb: "No image" and the QR icon stay clear of the corners. */
  .v2-link-thumb { border-radius: 10px; padding: 0 4px; font-size: 11px; line-height: 1.15; }
  .v2-link-thumb svg { width: 24px; height: 24px; }
}

/* Settings form. */
.v2-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; gap: 14px; }
.v2-input.v2-textarea { min-height: 96px; padding: 12px 18px; resize: vertical; line-height: 1.4; }

/* --- Billing (subscriptions/show, callback) --- */
.v2-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.v2-plan-form { margin: 0; display: flex; }
.v2-plan {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 18px;
  border: 2px solid var(--v2-line);
  background: #fff;
  color: var(--v2-ink);
  font: inherit;
  text-align: left;
}
.v2-plan.is-current { border-color: var(--v2-green-line); background: var(--v2-green-bg); }
.v2-plan--pick { cursor: pointer; box-shadow: 0 4px 0 var(--v2-line); transition: transform .08s ease, box-shadow .08s ease; }
.v2-plan--pick:hover { transform: translateY(-2px); }
.v2-plan--pick:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--v2-line); }
.v2-plan-name { font-weight: 700; color: var(--v2-muted); }
.v2-plan-price { font-family: var(--v2-display); font-weight: 800; font-size: 30px; line-height: 1; }
.v2-plan-price small { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--v2-muted); }
.v2-plan-badge { position: absolute; top: -12px; right: 14px; }
.v2-plan .v2-btn { pointer-events: none; }
.v2-plan-switch { margin: 0; }
.v2-plan-switch label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--v2-muted); cursor: pointer; }
.v2-rules { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--v2-muted); font-size: 15px; }
.v2-rules b { color: var(--v2-ink); }
.v2-pay-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v2-pay-status form { margin: 0; }
.v2-pay-status .v2-range { min-height: 32px; padding: 0 10px; font-size: 13px; }
/* Pagy's page links as pills. */
.v2-pager .pagy { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v2-pager .pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--v2-line);
  background: #fff;
  color: var(--v2-ink) !important;
  font-weight: 700;
  text-decoration: none;
}
.v2-pager .pagy a[aria-current] { background: var(--v2-gold); border-color: var(--v2-gold); color: #fff !important; }
.v2-pager .pagy a[aria-disabled] { opacity: .45; }
.v2-dialog { margin: auto; width: min(460px, 92vw); padding: 24px; border-radius: 24px; border: 2px solid var(--v2-line); background: #fff; color: var(--v2-ink); box-shadow: 0 4px 0 var(--v2-line); }
.v2-dialog::backdrop { background: rgba(58, 37, 24, .45); backdrop-filter: blur(3px); }
.v2-dialog form { margin: 0; }
/* The OBS window (Home): a fixed head with the status, then the setup,
   which scrolls inside. On phones it's a sheet from the bottom. */
.v2-obs-dialog { width: min(640px, 92vw); max-height: min(88vh, 880px); padding: 0; overflow: hidden; }
.v2-obs-dialog[open] { display: flex; flex-direction: column; }
.v2-obs-dialog [hidden] { display: none !important; }
.v2-obs-dialog-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 2px solid var(--v2-line); }
.v2-obs-dialog-head.is-warn .v2-badge { background: var(--v2-gold); }
.v2-obs-dialog-head.is-ok .v2-badge { background: var(--v2-green); }
.v2-obs-dialog-heading { flex: 1 1 auto; min-width: 0; display: grid; justify-items: start; gap: 6px; }
.v2-obs-dialog-close { width: 42px; padding: 0; justify-content: center; flex: none; }
.v2-obs-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 18px 22px; }
.v2-obs-dialog-lead { margin: 0 0 14px; font-size: 16px; line-height: 1.55; }
@media (max-width: 600px) {
  .v2-obs-dialog { width: 100%; max-width: 100%; max-height: 88vh; max-height: 88dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-bottom: 0; box-shadow: none; }
}
.v2-callback { max-width: 560px; width: 100%; margin: 24px auto 0; align-items: center; text-align: center; }
.v2-callback .v2-h1 { font-size: clamp(28px, 4vw, 34px); }
.v2-callback-icon { display: flex; width: 72px; height: 72px; border-radius: 50%; align-items: center; justify-content: center; background: var(--v2-gold-bg); color: var(--v2-gold); }
.v2-callback-icon--ok { background: var(--v2-green-bg); color: var(--v2-green); }
.v2-callback-icon--bad { background: #fdecef; color: var(--v2-danger); }

/* --- Team: the "+" card that ends the people grid ---
   Closed: a big round "+" and "Invite a mod", centered in a dashed card
   the height of its row. Open: the "+" turns into a close "x" and the
   invite form shows in the same card. */
.v2-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: var(--v2-pink-line);
  background: #fffafd;
  box-shadow: none;
}
.v2-add-card > details { width: 100%; }
.v2-add-card summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--v2-pink-ink);
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 20px;
  text-align: center;
}
.v2-add-card summary::-webkit-details-marker { display: none; }
.v2-add-plus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-pink);
  color: #fff;
  box-shadow: 0 4px 0 var(--v2-pink-deep);
  transition: transform .12s ease, box-shadow .08s ease;
}
.v2-add-card summary:hover .v2-add-plus { transform: translateY(-2px); }
.v2-add-card summary:active .v2-add-plus { transform: translateY(4px); box-shadow: 0 2px 0 var(--v2-pink-deep); }
.v2-add-card details[open] summary { flex-direction: row; gap: 14px; padding: 0 0 14px; font-size: 18px; text-align: left; }
.v2-add-card details[open] .v2-add-plus { width: 40px; height: 40px; transform: rotate(45deg); box-shadow: 0 3px 0 var(--v2-pink-deep); }
.v2-add-card details[open] summary:hover .v2-add-plus { transform: rotate(45deg) translateY(-2px); }
.v2-add-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.v2-add-form .v2-btn { width: 100%; white-space: normal; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .v2-add-plus { transition: none; } }

/* --- Bottom tabs: the nav on phones and small tablets, where the header
   pills would wrap into rows (v2_nav_link tab: true). --- */
.v2-tabs { display: none; }
@media (max-width: 900px) {
  .v2-top .v2-nav { display: none; }
  .v2-wrap { padding-bottom: 104px; }
  .v2-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 6px 8px 10px;
    background: #fff;
    border-top: 2px solid var(--v2-line);
    box-shadow: 0 -4px 14px rgba(58, 37, 24, .06);
  }
  .v2-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 14px;
    color: var(--v2-muted) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }
  .v2-tab svg { width: 22px; height: 22px; }
  .v2-tab--home.is-active { background: var(--v2-blue-bg); color: var(--v2-blue-ink) !important; }
  .v2-tab--team.is-active { background: var(--v2-pink-bg); color: var(--v2-pink-ink) !important; }
  .v2-tab--sponsors.is-active { background: var(--v2-gold-bg); color: var(--v2-gold-ink) !important; }
  .v2-tab--qr.is-active { background: var(--v2-purple-bg); color: var(--v2-purple-ink) !important; }
  .v2-tab--me.is-active { background: #f3ece4; color: var(--v2-brown) !important; }
}

/* ===================================================================
   Phones (up to 480px): a step smaller again, and labels wrap between
   words instead of running off the screen. Ukrainian runs longer than
   English, so this is checked at 320px in both languages
   (script/phone_fit_audit.js). Inputs stay at 16px so iOS doesn't zoom
   in on focus.
   =================================================================== */
@media (max-width: 480px) {
  .v2-top { padding: 14px 16px 4px; gap: 10px 12px; }
  .v2-brand { gap: 8px; font-size: 22px; }
  .v2-brand img { width: 34px; height: 34px; }
  .v2-wrap { padding: 8px 16px 104px; gap: 16px; }
  .v2-h1 { font-size: 28px; overflow-wrap: break-word; }
  .v2-h2 { font-size: 21px; }
  .v2-lead { font-size: 16px; }
  .v2-card-title { font-size: 18px; }
  .v2-label { font-size: 18px; }
  .v2-btn { min-height: 46px; padding: 8px 18px; font-size: 15px; line-height: 1.2; text-align: center; white-space: normal; }
  .v2-btn--big { font-size: 17px; }
  .v2-btn--sm { min-height: 38px; padding: 6px 12px; font-size: 14px; }
  .v2-chip { white-space: normal; }
  .v2-status { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .v2-person { gap: 10px; }
  .v2-person-name { font-size: 18px; }
  .v2-avatar { width: 42px; height: 42px; font-size: 19px; }
  .v2-numbox { padding: 10px 12px; }
  .v2-num { font-size: 26px; }
  .v2-num.v2-num--text { font-size: clamp(16px, 16cqi, 20px); line-height: 26px; }
  .v2-num.v2-num--date { line-height: 26px; }
  .v2-num--huge { font-size: 44px; }
  .v2-input { min-height: 46px; }
  .v2-more > summary { min-height: 40px; padding: 6px 14px; font-size: 15px; }
  .v2-more--pink > summary { min-height: 46px; font-size: 17px; }
  .v2-steps li { gap: 10px; font-size: 15px; }
  .v2-step-num { width: 36px; height: 36px; font-size: 18px; }
  .v2-switch-row { padding: 10px 12px; font-size: 15px; }
  .v2-thumb { min-height: 90px; }
  .v2-add-plus { width: 48px; height: 48px; }
  .v2-add-card summary { font-size: 18px; }
  .v2-plan-price { font-size: 26px; }
  /* A studio's Open button gets its own full row under the name. */
  .v2-bento .v2-list-row .v2-btn { flex: 1 1 100%; }
  .v2-badge { width: 32px; height: 32px; border-radius: 10px; }
}

/* ===================================================================
   Sign-in pages (layouts/auth): login, sign-up, password reset, email
   confirmation, status, studio invite. One card in a narrow column,
   with the dashboard's buttons and fields.
   =================================================================== */
.v2-auth-top { max-width: 560px; }
.v2-auth-lang { height: 40px; padding: 0 14px; font-size: 15px; box-shadow: 0 3px 0 var(--v2-line); }
.v2-auth-lang svg { width: 20px; height: 14px; border-radius: 3px; }
.v2-auth-main { box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 12px 20px 72px; }
.v2-auth-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.v2-auth-head { display: flex; flex-direction: column; gap: 8px; }
.v2-auth-head--center { align-items: center; text-align: center; }
.v2-auth-card .v2-h1 { font-size: 34px; overflow-wrap: break-word; }
.v2-auth-card .v2-lead { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.v2-auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #fff;
  background: var(--v2-blue);
  box-shadow: 0 4px 0 var(--v2-blue-deep);
}
.v2-auth-icon--green { background: var(--v2-green); box-shadow: 0 4px 0 var(--v2-green-deep); }
.v2-auth-icon--pink { background: var(--v2-pink); box-shadow: 0 4px 0 var(--v2-pink-deep); }
.v2-auth-icon--danger { background: var(--v2-danger); box-shadow: 0 4px 0 #6f1229; }
.v2-auth-form, .v2-auth-oauth { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.v2-auth-oauth { gap: 14px; }
.v2-auth-oauth-form { margin: 0; }
.v2-auth-card .v2-btn { width: 100%; }
.v2-auth-form > .v2-btn { margin-top: 6px; }
.v2-google-g { width: 22px; height: 22px; flex-shrink: 0; }
/* "or" between the Twitch/Google buttons and the email form. */
.v2-auth-or { display: flex; align-items: center; gap: 14px; color: var(--v2-muted); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v2-auth-or::before, .v2-auth-or::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: var(--v2-line); }
.v2-auth-links { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; color: var(--v2-muted); font-size: 16px; font-weight: 600; }
.v2-auth-links a { font-weight: 700; }
.v2-auth-links--center { justify-content: center; text-align: center; }
.v2-auth-errors { padding: 16px 18px; border-radius: 20px; background: #fdecef; border: 3px solid var(--v2-danger-line); color: var(--v2-danger); }
.v2-auth-errors h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.v2-auth-errors ul { margin: 0; padding-left: 20px; font-size: 16px; }
.v2-auth-note { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: var(--v2-cream); }
.v2-auth-note p { margin: 0; color: var(--v2-muted); font-size: 16px; text-align: center; }
.v2-auth-note form { margin: 0; }
/* Status page: one row per service, then two numbers. */
.v2-auth-rows { border: 3px solid var(--v2-line); border-radius: 24px; }
.v2-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 18px; font-weight: 700; }
.v2-auth-row + .v2-auth-row { border-top: 3px solid var(--v2-line); }
.v2-auth .v2-num.is-ok { color: var(--v2-green); }
.v2-auth .v2-num.is-warn { color: var(--v2-gold); }
.v2-auth .v2-num.is-bad { color: var(--v2-danger); }
.v2-auth .v2-num small { font-size: 16px; font-weight: 600; color: var(--v2-muted); }
@media (max-width: 480px) {
  .v2-auth-lang { height: 38px; padding: 0 12px; font-size: 14px; }
  .v2-auth-main { padding: 8px 16px 56px; }
  .v2-auth-card { padding: 22px 20px; gap: 18px; }
  .v2-auth-card .v2-h1 { font-size: 26px; }
  .v2-auth-card .v2-lead { font-size: 16px; }
  .v2-auth-icon { width: 56px; height: 56px; border-radius: 20px; }
  .v2-auth-note { padding: 16px; }
}