/* Zidos Trail v9 Overview — phone Overview 1:1 with approved overview-pick4 reference */

/* Card primitive */
.card {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
  color: var(--ink);
  border: 0;
  position: relative;
}

.card-head, .ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 44px;
}

.card-head h2, .card-head h3, .ch h2, .ch h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.link, .more, .r8-open, .r8-all {
  background: transparent;
  border: 0;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.pill-s, .btn-ghost {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--well);
  border: 0;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Period Capsule — mock .ov-period: one full-width panel capsule, short label + chevron.
   The capsule lives inside .shell-toolbar (a flex row), so it carries its own width:
   without it the flex item shrinks to the label (118 px on 18.10) instead of the
   mock's full row (358 px of 390). */
.r29-period {
  margin: 12px 0 14px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.r29-period .per-wrap {
  display: flex;
  width: 100%;
  background: var(--panel);
  border-radius: 999px;
  position: relative;
}

.r29-period .per-btn {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 14px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.r29-period .per-btn svg {
  width: 14px;
  height: 14px;
}

/* The full label stays in the DOM for aria and the dialog; the capsule shows the short one */
.r29-period .per-l {
  display: none;
}

.r29-period .per-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--panel);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
}

/* Month-step chips inside the period popup (the capsule itself has no arrows) */
.r29-period .per-pop .per-step {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.r29-period .per-pop .per-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.ov-head .h-sub {
  display: none;
}

.seg.account-scope,
.account-scope {
  display: flex;
  padding: 3px;
  background: var(--well-deep);
  border-radius: 999px;
  gap: 2px;
}

.account-scope button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: background var(--fade) var(--ease), color var(--fade) var(--ease);
}

.account-scope button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
}

/* Main Month Card (Lime) */
.card.r29-spend,
.card.spend,
#ovHero {
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
}

#ovHero .t-over {
  font-size: 12px;
  font-weight: 400;
  color: var(--lime-ink);
  margin-bottom: 4px;
}

/* Mock .hero-month: regular Onest digits on the lime card (the pixel face is the Doto family's
   job elsewhere); 36/500 with -1px tracking, kopecks at 26/500 */
#ovHero #ovPkFig,
#ovHero .hero-month {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--lime-ink);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

#ovHero .month-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

#ovHero .hero-num {
  font-family: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

#ovHero :is(.minor, .pk-minor) {
  font-family: inherit;
  font-size: 26px;
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

#ovHero :is(.cur, .pk-currency) {
  font-family: var(--sans);
  font-size: 0.4em;
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0;
}

/* Mock .over-pill is a quiet pill: the card's own tone (rgba(25,48,6,.09) on the lime
   month card) with ink text and a small tone dot — never a heavy semantic fill
   (coordinator 18.10: «тихий статус = светлая пилюля + цветная точка», mock pick3
   .ph .over-pill). Same ground in both themes, like .day-pill below.
   min-height stays 44: the owner a11y rule for the drill-down button. */
#ovHero :is(.pill.over, .pill.warn, .pill.fine, .pill.info, .over-pill, button.pill.over, .pk-answer) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(25, 48, 6, 0.09);
  color: #193006;
  border-radius: 12px;
  padding: 8px 12px;
  font: 400 11px/16px var(--sans);
  margin-top: 12px;
  max-width: 100%;
  white-space: normal;
  border: 0;
  cursor: pointer;
  min-height: 32px;
  text-align: left;
}
/* mock pick4: visible pill 32 px; the button itself stays 44 px (owner a11y) via a transparent
   6 px border that the background does not paint */
#ovHero button.pill.over {
  border: solid transparent;
  border-width: 6px 0;
  background-clip: padding-box;
  min-height: 44px;
  border-radius: 999px;
  background-color: var(--well);
  color: var(--ink);
  font: 500 11px/16px var(--sans);
}
@media (min-width: 768px) {
  #ovHero button.pill.over { font-size: 13px; }
}

#ovHero :is(.pill.over, .pill.warn, .over-pill, button.pill.over)::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ab3025;
}

#ovHero .pill.fine {
  background: rgba(25, 48, 6, 0.09);
  color: #193006;
}

#ovHero .pill.fine::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1b7045;
}

#ovHero .pill.info {
  background: rgba(25, 48, 6, 0.09);
  color: var(--lime-ink);
}

#ovHero :is(.pill.over, .over-pill, button.pill.over) .neg {
  color: inherit;
  font-weight: 500;
}

#ovHero .ov-hero-daily,
#ovHero .day-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-top: 20px;
  font: 400 13px/20px var(--sans);
  color: var(--lime-ink);
}

#ovHero .ov-hero-daily b.num,
#ovHero .day-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

/* Mock .day-note/.day-pill (mock-sheet 204-207, 279-284): translucent lime-ink plate
   with a tone dot — same ground in every theme, the dot carries the tone */
.r8-day-note {
  display: flex;
  margin-top: 4px;
}

.day-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 99px;
  background: rgba(25, 48, 6, 0.09);
  color: #193006;
  font: 500 12px/16px var(--sans);
  transition: background-color var(--tab) var(--ease);
}

.day-pill::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1b7045;
}

.day-pill[data-tone='close']::before {
  background: #b35a00;
}

.day-pill[data-tone='over']::before {
  background: #ab3025;
}

#ovHero .r29-quick,
#ovHero .quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: 8px;
  margin-top: 16px;
}

#ovHero .r29-quick button,
#ovHero .quick button {
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  white-space: nowrap;
  cursor: pointer;
}

#ovHero .r29-quick button.r29-primary,
#ovHero .quick button.lime {
  background: var(--well);
  color: var(--ink);
  font-weight: 500;
}

/* Subscriptions Card (Скоро спишется) — mock .card.soon + .sw4 plate */
.card.r29-soon,
#ovSoon {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
  color: var(--ink);
  overflow: visible;
}

#ovSoon .ch,
#ovSoon .card-head {
  margin-bottom: 14px;
}

#ovSoon .ch h2 {
  font: 500 16px/24px var(--sans);
}

/* The whole logo row + caption is one hoverable plate (mock .sw.sw4) */
.ztsw-trigger, .sw.sw4 {
  display: block;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color var(--fade) var(--ease);
}

.ztsw-trigger:hover, .sw.sw4:hover {
  background: var(--well);
}

.ztsw-in, .sw4-in {
  display: block;
}

.row4, .ztsw-row.row4 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  margin: 0 0 12px;
}

.w4i, .ztsw-w4i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 0;
}

/* The merchant tile sizes itself from the widget's inline --ztsw-size/--ztsw-tilt (nearest charge larger) */
#ovSoon .ztsw-icon.logo, #ovSoon .ztsw-w4i .sv.big {
  display: block;
  width: var(--ztsw-size, 48px);
  height: var(--ztsw-size, 48px);
  transform: rotate(var(--ztsw-tilt, 0deg));
}

#ovSoon .ztsw-icon.logo .ops-merchant,
#ovSoon .ztsw-w4i .sv.big .ops-merchant {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  font-style: normal;
}

#ovSoon .ztsw-icon.logo,
#ovSoon .ztsw-icon.logo .ops-merchant {
  border-radius: calc(var(--ztsw-size, 48px) * 0.32);
}

/* Service mark: an <img> of the white silhouette (mock .sv.big.logo img), not a masked
   span — the receipts stack then carries real img logos like the approved mock.
   In this row the mark stays under 28 px even inside the ±4° tilt, so the parity
   gap measure sees only the tiles, never a mark inside its own tile. */
#ovSoon .subscription-brand {
  display: block;
  width: 50%;
  height: 50%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

#ovSoon .sub-mono-l {
  font: 500 15px/1 var(--sans);
  color: #fff;
  letter-spacing: 0.02em;
}

.w4i small, .ztsw-w4i small {
  font: 400 10px/12px var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Mock pick3: the per-row badge stays out of the closed state */
.soon-badge, .ztsw-soon-badge {
  display: none;
}

.ztsw-line, .sw4-line {
  font: 400 12px/20px var(--sans);
  color: var(--ink-2);
}

/* Nearest charge (mock .next-charge): a quiet well plate under the plate */
.r8-next, .next-charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  margin-top: 12px;
  min-height: 56px;
  background: var(--well);
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  font: 500 13px/1.3 var(--sans);
}

.r8-next span:first-child, .next-charge span:first-child {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 4px;
}

.r8-next b, .next-charge b {
  font-size: 13px;
  font-weight: 500;
}

.r8-next small, .next-charge small {
  font-size: 11px;
  color: var(--ink-2);
}

.r8-next-amt, .next-charge b:last-child {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Mock .card-head .link (reference.css:64 + pick3:8): quiet 13px ink-2 «Все ›» with no plate padding */
#ovSoon .r8-all {
  padding: 10px 4px;
  min-height: 44px;
  min-width: 44px;
  justify-content: flex-end;
  font-weight: 400;
}

/* Limits Card */
#r8Limits {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
}

#r8Limits .r8-sum, .limit-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 4px;
}

#r8Limits .r8-l {
  font-size: 14px;
  color: var(--ink);
}

#r8Limits .r8-v {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

#r8Limits .r8-sub, .limit-card p.sub {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
  margin-bottom: 14px;
}

.r8-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r8-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--well);
  border-radius: 16px;
}

.r8-row .ms-cat, .r8-row .service-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c3) 14%, var(--panel));
  color: var(--c3);
  flex: none;
}

.r8-row .r8-lt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r8-row .r8-lt b {
  font-size: 13px;
  font-weight: 500;
}

.r8-row .r8-lt small {
  font-size: 11px;
  color: var(--ink-2);
}

.r8-row .r8-st {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.r8-row .r8-st::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}

.r8-row[data-tone="over"] .r8-st::before {
  background: var(--danger);
}

.r8-row[data-tone="over"] .r8-st {
  color: var(--danger);
}

/* Gamification: Health & Season */
#r8Health, .gm-health {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
}

.gm-health-btn {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.gm-h-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.gm-score {
  font-size: 32px;
  font-weight: 700;
  display: block;
  letter-spacing: -0.5px;
}

.gm-score small {
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 400;
  margin-left: 2px;
}

.gm-pix {
  display: flex;
  gap: 3px;
  margin: 12px 0 8px;
  height: 14px;
}

.gm-pix i {
  flex: 1;
  border-radius: 3px;
  background: var(--well-deep);
}

.gm-pix i.f {
  background: var(--lime);
}

:root[data-theme="dark"] .gm-pix i.f, html.dark .gm-pix i.f {
  background: var(--lime);
}

.gm-cap {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
}

/* Health details (gate 19.10 №8): one tap collapses/expands, chevron rotates.
   Open 320 ms, close 220 ms — the comment contract in web-r8-phone.js. */
.gm-h-top i {
  display: grid;
  place-items: center;
  transition: rotate var(--tab) var(--ease);
}

.gm-health-btn[aria-expanded="true"] .gm-h-top i {
  rotate: 180deg;
}

.gm-more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--mid) var(--ease), margin-top var(--mid) var(--ease);
}

.gm-more.is-open {
  grid-template-rows: 1fr;
  margin-top: 16px;
  transition-duration:  var(--tab), var(--tab);
}

.gm-more-in {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gm-more,
  .gm-h-top i {
    transition: none;
  }
}

.gm-more dl {
  margin: 0;
  display: grid;
  gap: 6px;
}

.gm-more dl div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}

.gm-more p {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-2);
}

/* Season (gate 19.10 №4): dark card with a pixel row of 13 weeks, the approved mock object */
#r8Season, .gm-season {
  background: #16181b;
  color: #f4f5f7;
  --ink-2: #b8bdc6;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
}

:root[data-theme="dark"] #r8Season,
html.dark #r8Season,
:root[data-theme="dark"] .gm-season,
html.dark .gm-season {
  background: var(--panel);
}

#r8Season .ch h2 {
  color: #f4f5f7;
}

.gm-s-fig {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  font: 400 14px/20px var(--sans);
  color: var(--ink-2);
}

.gm-s-fig b {
  font: 500 36px/1.1 var(--sans);
  color: var(--lime);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.gm-weeks {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 4px;
  height: 28px;
  margin-bottom: 4px;
}

.gm-weeks i {
  min-width: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}

.gm-weeks i.ok, .gm-weeks i.f, .gm-weeks i.plus {
  background: var(--lime);
}

.gm-weeks i.now {
  /* current week: outlined, not blue (owner: no blue accents) */
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--lime);
}

.gm-s-note {
  margin: 12px 0 0;
  font: 400 12px/17px var(--sans);
  color: var(--ink-2);
}

.gm-fact {
  margin: 8px 0 0;
  font: 500 13px/18px var(--sans);
  color: #f4f5f7;
}

/* Accounts Card (Bybit) */
#ovAcc, .card.acc {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
  color: var(--ink);
}

#ovAcc .acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  min-height: 44px;
}

#ovAcc .acc__title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

#ovAcc .acc__sync {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--well);
  border: 0;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

.r29-wallet, .wallet {
  background: var(--well);
  border-radius: 16px;
  padding: 12px 16px;
}

.r29-wallet-top, .w-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r29-currency, .w-cur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--well-deep);
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.r29-currency i, .w-cur i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--well-deep);
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
}

.r29-bybit, .w-brand {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--ink);
}

.r29-balance, .w-label {
  margin-top: 14px;
}

.r29-balance .t-label, .w-label {
  font-size: 12px;
  color: var(--ink-2);
}

.r29-balance > div, .w-bal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.r29-balance .num, .w-bal .w-money {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.r29-balance button, .eye {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.r29-frozen, .w-hint {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
  line-height: 1.4;
}

.r29-wallet-foot, .w-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2);
}

.r29-wallet-foot .dot-ok, .w-foot .ok::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  margin-right: 6px;
}

#r8Cashback, .gm-cb {
  margin-top: 14px;
  padding: 0;
}

.gm-cb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.gm-cb-t {
  color: var(--ink);
  font-weight: 500;
}

.gm-cb-v {
  font-weight: 600;
}

.gm-cb-of {
  font-size: 11px;
  color: var(--ink-2);
}

.gm-pix-14 {
  display: flex;
  gap: 3px;
  margin: 10px 0 6px;
  height: 12px;
}

.gm-pix-14 i {
  flex: 1;
  border-radius: 3px;
  background: var(--well-deep);
}

.gm-pix-14 i.f {
  background: var(--lime);
}

.gm-cb-note {
  font-size: 12px;
  color: var(--ink-2);
  margin: 4px 0 0;
}

#accMore summary, .card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  border: 0;
  background: transparent;
  list-style: none;
}

#accMore summary::-webkit-details-marker {
  display: none;
}

/* Lower Overview Cards */
.ov-ops, .ov-cats, .card.month, .card.ov-delta {
  background: var(--panel);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
  color: var(--ink);
}

.ov-ops .op {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--well);
  border-radius: 16px;
  margin-bottom: 8px;
  cursor: pointer;
}

.ov-ops .op-m {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ov-ops .op-m b {
  font-size: 13px;
  font-weight: 500;
}

.ov-ops .op-m span {
  font-size: 11px;
  color: var(--ink-2);
}

.ov-ops .op-a {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ov-ops .dayh {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  margin: 12px 4px 6px;
}

/* Trip suggestion banner */
.ov-trip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border-radius: 24px;
  margin-bottom: 12px;
}

.ov-trip .t {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  flex: 1;
}

.ov-trip__go {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.ov-trip__x {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: var(--well);
  color: var(--ink-2);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  padding: 0;
}

.ov-trip__x svg {
  width: 16px;
  height: 16px;
}

/* Ask Form in overview */
#r29AskForm {
  display: flex;
  align-items: center;
  gap: 8px;
}

#r29AskForm input {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--well);
  padding: 0 16px;
  color: var(--ink);
}

#r29AskForm .iconbtn.r29-primary {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

/* One Health component on every width (владелец: «Здоровье» салатовое с чёрными пикселями): moved out of desktop.css. */
#r8Health {
  background: var(--lime);
  color: var(--lime-ink);
  padding: 20px;
  isolation: isolate;
}
#r8Health :is(.gm-health-btn, .gm-score small, .gm-cap, .gm-more p, .gm-more dl div) { color: var(--lime-ink); }
#r8Health .gm-h-top { align-items: start; gap: 12px; }
#r8Health .gm-h-top svg { width: 20px; height: 20px; }
#r8Health .gm-pix { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); height: auto; gap: 4px; }
#r8Health .gm-pix i { aspect-ratio: 1; background: rgb(25 48 6 / 14%); border-radius: 2px; }
#r8Health .gm-pix i.f { background: #111; }

/* ============================================================
   Phone fix, gate 19.10 (r9): the Overview below «Счета Bybit»
   gets the same v9 objects as the top — card, row, pill, a
   20–24 px icon in a tinted 40 px well, and the desktop chart.
   Phone only: desktop.css owns ≥1024, so the whole block is
   wrapped in a max-width query (it loads earlier in the cascade).
   ============================================================ */
@media (max-width: 1023.98px) {

  /* --- summary strip: link rows on cards instead of raw text --- */
  #ovStrip, #restore2Hints { display: block; }
  #ovStrip > :not([hidden]) + :not([hidden]),
  #restore2Hints > :not([hidden]) + :not([hidden]) { margin-top: 12px; }

  .ov-debts > button, .r31-debt-return {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    border-radius: 24px;
    background: var(--panel);
    color: var(--ink);
    font: 400 14px/20px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  .ov-debts > button > span { flex: 1 1 auto; min-width: 0; }
  .ov-debts > button > svg, .r31-debt-return > svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--ink-2);
  }
  #ovDebtList { margin: 4px 16px 12px; }
  .debt-mini {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font: 400 13px/18px var(--sans);
  }
  #ovDebtList .panel__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 500 13px var(--sans);
    color: var(--ink-2);
    text-decoration: none;
  }

  #ovFinance > details {
    padding: 20px;
    border-radius: 24px;
    background: var(--panel);
    font: 400 14px/20px var(--sans);
    color: var(--ink);
  }
  #ovFinance summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
  }
  #ovFinance summary::-webkit-details-marker { display: none; }
  #ovFinance svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
  .finance-disclosure { padding: 8px 0 12px; }
  .finance-disclosure dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 0;
  }
  .finance-disclosure dd { margin: 0; font-variant-numeric: tabular-nums; }
  .finance-disclosure p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }

  /* the phone r8 cards read these legacy rows as text sources; they are never a visible row */
  #ovFinance > details#ovHealth, #ovSeasonLine { display: none; }

  /* announcement pill: the same link-row object as «Вам должны…» */
  .r33-announcement-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: 0;
    border-radius: 20px;
    background: var(--panel);
    color: var(--ink);
    font: 400 14px/20px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  .r33-announcement-pill > span { flex: 1 1 auto; min-width: 0; }
  .r33-announcement-pill > svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }

  /* --- tiles «К разбору / Кэшбэк / Средний чек / Комиссии» --- */
  .r29-metrics { margin: 12px 0 0; }
  #ovTiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #ovTiles > .tile {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border-radius: 20px;
    background: var(--panel);
    text-align: left;
    cursor: pointer;
  }
  #ovTiles .tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  #ovTiles .tile-lbl { font: 400 12px/16px var(--sans); color: var(--ink-2); }
  #ovTiles .tile-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--well);
    color: var(--ink-2);
  }
  #ovTiles .tile-ic svg, #ovTiles svg { width: 24px; height: 24px; }
  #ovTiles .tile-val {
    margin: 12px 0 8px;
    font: 500 28px/1.2 var(--sans);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
  }
  #ovTiles .tile-note, #ovTiles .r30-cashback-forecast {
    display: block;
    margin: 4px 0 0;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  .r29-segments { display: flex; gap: 2px; height: 4px; margin: 8px 0 0; }
  .r29-segments i { flex: 1; border-radius: 2px; background: var(--well-deep); }
  .r29-segments i.filled { background: var(--lime); }

  /* «Реальная цена покупки»: a details row on a card */
  #r29Exchange { margin: 12px 0 0; }
  .r29-exchange { padding: 20px; border-radius: 24px; background: var(--panel); }
  .r29-exchange > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font: 500 14px/20px var(--sans);
    color: var(--ink);
  }
  .r29-exchange > summary::-webkit-details-marker { display: none; }
  .r29-exchange > summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    background: var(--ink-2);
    -webkit-mask: var(--chev) center / 20px 20px no-repeat;
    mask: var(--chev) center / 20px 20px no-repeat;
    transition: transform var(--mid) var(--ease);
  }
  .r29-exchange[open] > summary::after { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) { .r29-exchange > summary::after { transition: none; } }
  .r29-exchange p { margin: 4px 0 8px; font: 400 13px/18px var(--sans); color: var(--ink-2); }

  /* --- «Категории · против лимитов» rows --- */
  #ovCats .bul {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 6px 0;
    font: 400 13px/18px var(--sans);
  }
  #ovCats .cat-point { width: 10px; height: 10px; border-radius: 50%; }
  #ovCats .bt, #ovCats .bul-meta { grid-column: 2 / -1; }
  #ovCats .nm.bul-nm {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 500 13px/18px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  #ovCats .v {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/18px var(--sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
  }
  #ovCats .v small { font-weight: 400; color: var(--ink-2); }
  #ovCats .bul-dr {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
  }
  #ovCats .bul-dr svg { width: 16px; height: 16px; }
  #ovCats .bt {
    position: relative;
    height: 6px;
    margin: 2px 0 4px;
    border-radius: 3px;
    background: var(--well-deep);
    overflow: hidden;
  }
  #ovCats .bt i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
  #ovCats .bt i.f { left: 0; background: var(--ink-3); }
  #ovCats .bt i.o { background: var(--danger); }
  #ovCats .bt b { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 1px; background: var(--ink); }
  #ovCats .bt b.pace { background: var(--ink-2); }
  #ovCats .bul-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 2px 0 6px;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovCats .bul-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 4px;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovCats .bul-foot .key { display: inline-flex; align-items: center; gap: 6px; }
  #ovCats .bul-foot .key b { width: 10px; height: 3px; border-radius: 2px; background: var(--ink-3); }
  #ovCats .bul-foot .key b.pv { background: var(--ink-2); }
  #ovWeek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 12px 0 -6px;
    font: 400 13px/18px var(--sans);
    color: var(--ink-2);
  }

  /* --- «Темп трат»: the desktop chart on the phone --- */
  #ovMonth {
    --data-line: var(--ink);
    --data-ghost: #d9dde3;
    --ink-4: var(--ink-3);
  }
  :root[data-theme="dark"] #ovMonth, html.dark #ovMonth {
    --data-line: var(--ink);
    --data-ghost: #4a525c;
  }
  #ovMonth .month-top { display: flex; flex-direction: column; gap: 12px; }
  #ovMonth .month-title-row { display: flex; align-items: center; gap: 8px; }
  #ovMonth .month-lbl { margin: 0; font: 500 16px/24px var(--sans); color: var(--ink); }
  #ovMonth .pace-info {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: var(--well);
    color: var(--ink-2);
    font: 500 13px/1 var(--sans);
    cursor: pointer;
  }
  #ovMonth .chip.foc {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    font: 500 12px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .month-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovMonth .seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--well-deep);
    width: fit-content;
  }
  #ovMonth .seg button {
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-2);
    font: 500 13px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); }
  #ovMonth .legend-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  #ovMonth .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .lg i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
  #ovMonth .lg[aria-pressed="false"] { opacity: 0.55; }
  #ovMonth .chart { position: relative; height: 220px; cursor: crosshair; touch-action: pan-y; }
  #ovMonth .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #ovMonth .lbl {
    position: absolute;
    font: 400 11px/14px var(--sans);
    color: var(--ink-2);
    white-space: nowrap;
    pointer-events: none;
  }
  #ovMonth .xlbl { bottom: -2px; transform: translateX(-50%); }
  #ovMonth .endlbl { font-weight: 500; transform: translateY(-50%); }
  #ovMonth .tag {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--panel);
    font: 500 12px/16px var(--sans);
    white-space: nowrap;
    pointer-events: none;
  }
  #ovMonth .tip-box {
    position: absolute;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fade) var(--ease), visibility 0s linear var(--fade);
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid var(--well-deep);
    border-radius: 8px;
    background: var(--panel);
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
    pointer-events: none;
  }
  #ovMonth .tip-box.on { opacity: 1; visibility: visible; transition: opacity var(--fade) var(--ease), visibility 0s; }
  #ovMonth .tip-box .d { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  #ovMonth .tip-box div { display: flex; justify-content: space-between; gap: 12px; }
  #ovMonth .brush {
    position: absolute;
    top: 12px;
    bottom: 22px;
    display: none;
    background: rgba(17, 17, 17, 0.08);
    border-left: 1px solid var(--ink-3);
    border-right: 1px solid var(--ink-3);
    pointer-events: none;
  }
  #ovMonth .brush.on { display: block; }
  :root[data-theme="dark"] #ovMonth .brush, html.dark #ovMonth .brush { background: rgba(255, 255, 255, 0.08); }

  /* --- «Что изменилось» rows (drawn only with data; hidden otherwise) --- */
  .ov-delta .dv {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    min-height: 44px;
    padding: 6px 0;
    font: 400 13px/18px var(--sans);
  }
  .ov-delta .dv .cat-point { width: 10px; height: 10px; border-radius: 50%; }
  .ov-delta .dv .nm {
    font-weight: 500;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ov-delta .dv .dv-values { grid-column: 2 / -1; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .ov-delta .dv .v { font-weight: 500; font-variant-numeric: tabular-nums; }
  .ov-delta .delta-scale {
    grid-column: 2 / -1;
    position: relative;
    height: 4px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--well-deep);
    overflow: hidden;
  }
  .ov-delta .delta-scale i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--ink-3); }
  .ov-delta .delta-scale--up i { background: var(--danger); }

  /* --- home-grid widgets below the accounts card --- */
  .hg-anchor {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: hidden;
  }
  /* raw widgets only (next_step / left_to_spend): the reference cells above keep their own .card */
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) {
    box-sizing: border-box;
    padding: 20px;
    border-radius: 24px;
    background: var(--panel);
    color: var(--ink);
  }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-body { box-sizing: border-box; padding: 0; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-t { margin: 0; font: 500 14px/1.25 var(--sans); color: var(--ink-2); }
  .hg-sub { margin: 0; font: 400 12px/1.3 var(--sans); color: var(--ink-2); }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-step { margin: 12px 0 0; font: 500 15px/20px var(--sans); color: var(--ink); }
  .hg-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  .hg-deadline svg { width: 18px; height: 18px; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-actions { margin: 12px 0 0; }
  .hg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/1 var(--sans);
    cursor: pointer;
  }
  .hg-add-source {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 0;
    background: none;
    font: 400 13px/18px var(--sans);
    color: var(--ink-2);
    cursor: pointer;
  }
  .pending-legend { margin: 8px 0 0; }
  .pl-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: none;
    font: 400 13px/16px var(--sans);
    color: var(--ink-2);
    cursor: pointer;
  }

  /* the daily-allowance figure without its heading (owner 14.10) */
  .p2-account-allowance { margin-top: 12px; }
  .allowance-main .hg-fig, .allowance-main .allowance-empty {
    display: block;
    font: 500 28px/1.2 var(--sans);
    font-variant-numeric: tabular-nums;
  }
  .allowance-main .hg-sub { margin: 4px 0 0; }
  .allowance-deviation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
  .allowance-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--well);
    font: 400 12px/16px var(--sans);
    color: var(--ink);
  }
  .p2-allowance-facts > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
  .p2-allowance-facts > summary::-webkit-details-marker { display: none; }
  .hg-facts { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .hg-facts li { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--sans); color: var(--ink); }
  .hg-facts li svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }

  /* pace widget (live data): the same quiet chart when it replaces the month card */
  .pace-scene { display: flex; flex-direction: column; gap: 4px; }
  .pace-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .pace-heading h4 { margin: 0; font: 500 14px/20px var(--sans); color: var(--ink); }
  .pace-heading span { font: 400 12px/16px var(--sans); color: var(--ink-2); }
  .pace-totals { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; font: 400 12px/16px var(--sans); color: var(--ink-2); }
  .pace-totals b.num { font-weight: 500; color: var(--ink); }
  .pace-plot { position: relative; margin: 12px 0 4px; }
  .pace-plot svg { display: block; width: 100%; height: auto; }
  .pace-actual { fill: none; stroke: var(--data-line, var(--ink)); stroke-width: 4; stroke-linecap: round; }
  .pace-plan { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 3 5; opacity: 0.6; }
  .pace-today-guide { stroke: var(--ink-3); stroke-width: 1; opacity: 0.5; }
  .pace-point { fill: var(--lime); }
  .pace-fact { font: 500 12px/1 var(--sans); color: var(--ink); }

  /* --- «Счета Bybit» tail: account links and the folded list --- */
  #accMore .acc__link, #accMore .panel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font: 400 13px/18px var(--sans);
    color: var(--ink);
    text-decoration: none;
  }
  #accMore summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
  #accMore summary::-webkit-details-marker { display: none; }
  .stack__card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: 400 13px/18px var(--sans);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
}

/* Recent operations: the original-currency amount sits under the USD amount, the day total keeps a gap. */
#page-overview .op-a > small, .op-a .amt-hold { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.dh-n { margin-right: 8px; }
/* «Что изменилось» renders only a heading when there is nothing to compare — hide the empty card. */
.ov-delta:not(:has(li, tr, [class*=row], svg, canvas)) { display: none; }

/* W7: text boundaries remain visible when flex discards whitespace nodes. */
#ovCats .bul-meta { gap: 4px 6px; }
#ovSoonTitle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  #page-overview .r29-trends { margin-top: 12px; }
  #ovNewsHost { padding: 0; }
  #ovAcc .acc__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title sync" "status sync";
    gap: 4px 12px;
    align-items: center;
  }
  #ovAcc .acc__title { grid-area: title; white-space: nowrap; }
  #ovAcc .acc__status { grid-area: status; display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--sans); }
  #ovAcc .acc__sync { grid-area: sync; }
}

/* ==== W8 · y1 · Overview disclosures in the v9 language ====
   Rows are wells on the card tone, money sits right, labels 13 px muted, one ink chevron for every
   disclosure. Everything is scoped to the Overview objects; closed phone states stay as they were. */

/* Onest draws U+202F 0.11em wide, so «25 авг» and «2 148,63» read as one word at 12–14 px.
   The same file as a second face for that one character widens it to 0.24em. */
@font-face {
  font-family: "Onest Gap";
  src: url("../../fonts/Onest-subset.woff2") format("woff2");
  font-weight: 100 900;
  unicode-range: U+202F;
  size-adjust: 220%;
}
#accMore, #ovMonth, #r29Exchange, #ovRunway, .amt-hold, #page-overview .op-a > small {
  --sans: "Onest Gap", Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the pending-amount line inherits its family; take the stack above */
.amt-hold, #page-overview .op-a > small { font-family: var(--sans); }

/* the chevron: ink, 20 px, turns over when open */
#ovRunway > summary::after, .acc__caret {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background: var(--ink-2);
  -webkit-mask: var(--chev) center / 20px 20px no-repeat;
  mask: var(--chev) center / 20px 20px no-repeat;
  transition: rotate var(--mid) var(--ease);
}
#ovRunway[open] > summary::after, [aria-expanded="true"] > .acc__caret { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) {
  #ovRunway > summary::after, .acc__caret { transition: none; }
}

/* runway: «Хватит примерно на N дней» */
#ovRunway > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
#ovRunway > summary::-webkit-details-marker { display: none; }
.r29-runway-detail p { margin: 4px 0 8px; font: 400 13px/18px var(--sans); color: var(--ink-2); }

/* health and capital rows: the browser indent of dd goes */
.gm-more dd { margin: 0; }

/* the visually hidden «автопроверка…» sits next to the sync time; keep it off the visible text */
#ovAcc .acc__stxt .sr { margin-inline-start: 4px; }

/* «Все счета и пополнения»: account rows, the funding journal, the list of top-ups */
#ovAcc .acc__grid { display: grid; gap: 12px; }
#ovAcc :is(.acc__list, .acc__mvlist) { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ovAcc .acc__moves { display: grid; gap: 8px; }
#ovAcc #accMore .acc__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
}
#ovAcc #accMore .acc__row[hidden] { display: none; }
#ovAcc :is(.acc__icon, .acc__mvic) {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-2);
  font: normal 400 16px/1 var(--sans);
}
#ovAcc :is(.acc__rname, .acc__mvt) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font: 500 14px/20px var(--sans);
  color: var(--ink);
  overflow-wrap: anywhere;
}
#ovAcc :is(.acc__rrole, .acc__mvd) { display: block; font: 400 13px/18px var(--sans); color: var(--ink-2); }
#ovAcc :is(.acc__rval, .acc__mva, .acc__movesum .num) {
  text-align: right;
  white-space: nowrap;
  font: 500 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#ovAcc #accMore :is(.acc__movesum, .acc__mv) {
  appearance: none;
  display: grid;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/20px var(--sans);
  text-align: left;
  cursor: pointer;
}
#ovAcc #accMore .acc__movesum { grid-template-columns: minmax(0, 1fr) auto 20px; padding: 8px 16px; }
#ovAcc #accMore .acc__mv { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px 16px 8px 8px; }
#ovAcc .acc__mvx {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  margin: 4px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
  font: 400 13px/18px var(--sans);
}
#ovAcc .acc__mvx[hidden] { display: none; }
#ovAcc .acc__mvx dt { color: var(--ink-2); }
#ovAcc .acc__mvx dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
#ovAcc .acc__mvx dd > button { margin-inline-start: 12px; }

/* «Реальная цена покупки»: label left, amount right */
#r29Exchange .r29-exchange > div { display: grid; gap: 12px; padding: 4px 0 12px; }
#r29Exchange .r29-exchange p { margin: 0; font: 400 13px/18px var(--sans); color: var(--ink-2); }
#r29Exchange .r30-price { display: grid; gap: 12px; margin: 0; padding: 0; }
#r29Exchange .r30-price h3 { margin: 0; font: 500 14px/20px var(--sans); color: var(--ink); }
#r29Exchange .r30-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
}
#r29Exchange .r30-exchange > div { display: grid; gap: 2px; min-width: 0; }
#r29Exchange .r30-exchange > div:last-child { text-align: right; }
#r29Exchange .r30-exchange small { display: block; font: 400 13px/18px var(--sans); color: var(--ink-2); }
#r29Exchange .r30-exchange b { font: 600 18px/24px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
#r29Exchange .r30-exchange > i { text-align: center; font-style: normal; color: var(--ink-2); }
#r29Exchange .r30-price dl { display: grid; gap: 8px; margin: 0; }
#r29Exchange .r30-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
  font: 400 13px/18px var(--sans);
}
#r29Exchange .r30-price-row dt { flex: none; color: var(--ink-2); }
#r29Exchange .r30-price-row dd { min-width: 0; margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
#r29Exchange .r30-price-row dd small { display: block; font: 400 12px/16px var(--sans); color: var(--ink-2); }
#r29Exchange .r30-price-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
  font: 500 14px/20px var(--sans);
}
#r29Exchange .r30-price-total b { font: 600 20px/28px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
#r29Exchange .r30-price-note { display: block; margin: 0; font: 400 12px/16px var(--sans); color: var(--ink-2); }
#r29Exchange .more {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/18px var(--sans);
  cursor: pointer;
}

/* «Темп трат»: the facts keep a clear gap, never one line of glued words */
#ovMonth .month-sub { gap: 2px 16px; }
/* the dot ends the previous fact: on a wrap it stays at the line end, never in front of the next line */
#ovMonth .month-sub > span:not(:last-child) { position: relative; }
#ovMonth .month-sub > span:not(:last-child)::after { content: "·"; position: absolute; right: -10px; color: var(--ink-2); }