/* Dorax Finance — a category opened, the owner's, in the "v6" look (v350, features/phone/r6-catv.js; the canvas "Categoria-abierta-V6" and
   "Vacio-Categoria-abierta-V6"): the page's black, its name with "···" and × side by side, its drawing in its colour beside the month's figure
   (large and light), the limits as one gauge in parts (dashed with its 80% mark when there is none), the subcategories and the latest
   transactions each in one card, the rules as quiet lines, its two actions at the thumb with the page fading under them.
   The panel is drawn only for the owner (r6Mine), so its colours are written here and do not lean on the page's r6 class. */
@media (max-width: 920px) {
  :root.land #overlay .drawer:has(.r6cv) { background: #070808; color: #EFF1F6; }

  /* ---------- the top row: its name; "···" and × as two dark glass circles ---------- */
  :root.land #overlay .drawer:has(.r6cv) > header { padding: 14px 16px 10px; background: #070808; }
  :root.land #overlay .drawer:has(.r6cv) > header h2 { color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .drawer:has(.r6cv) > header :is([data-a="close"], .cvl-more) { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu { width: 220px; padding: 6px; border: 1px solid transparent; border-radius: 22px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#121414, #121414) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06)) border-box; }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item { min-height: 50px; border-radius: 16px; color: #EFF1F6; font-size: 15px; }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item + .umenu-item { border-top: 1px solid rgba(239, 241, 246, .07); border-radius: 0 0 16px 16px; }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item svg { color: rgba(239, 241, 246, .7); }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item.danger, :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item.danger svg { color: #FF8A80; }

  /* ---------- the page under it ---------- */
  :root.land #overlay .r6cv { gap: 0; padding: 10px 16px 32px; color: #EFF1F6; }
  :root.land #overlay .r6cv .mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; }
  :root.land #overlay .r6cv :is(button, .r6cv-link):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; border-radius: 14px; }
  :root.land #overlay .r6cv .press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .r6cv .press:active { transform: scale(.965); }

  /* the top: its drawing in its colour (a tap changes it) beside the month's figure */
  :root.land #overlay .r6cv-top { display: flex; flex-direction: column; }
  :root.land #overlay .r6cv-head { display: flex; align-items: center; gap: 16px; }
  :root.land #overlay .r6cv-ic { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv-ic > .cg { width: 64px; height: 64px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 32%, transparent), color-mix(in srgb, var(--c) 14%, transparent) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
  :root.land #overlay .r6cv-ic > .cg svg { width: 28px; height: 28px; }
  :root.land #overlay .r6cv-ic > .cg:is(.pic, .dx) svg, :root.land #overlay .r6cv-ic > .cg img { width: 40px; height: 40px; }
  :root.land #overlay .r6cv-what { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  :root.land #overlay .r6cv-what small { color: rgba(239, 241, 246, .6); font-size: 15px; }
  :root.land #overlay .r6cv-what b { color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
  :root.land #overlay .r6cv-what b.quiet { color: rgba(239, 241, 246, .42); }
  :root.land #overlay .r6cv-what b .cents { opacity: 1; color: rgba(239, 241, 246, .42); font-size: 26px; letter-spacing: -.02em; }
  :root.land #overlay .r6cv-sub { margin: 14px 0 0; color: rgba(239, 241, 246, .55); font-size: 13.5px; line-height: 1.4; }

  /* the limits: one gauge in parts, each as wide as its limit; with none yet, the dashed gauge and the 80% mark it would watch */
  :root.land #overlay .r6cv-lim { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv-lh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  :root.land #overlay .r6cv-lh > b { font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6cv-lh > span { color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.land #overlay .r6cv-lh > span b { color: #9FD182; font-weight: 500; }
  :root.land #overlay .r6cv-lh > span b.warn { color: #F7D27A; }
  :root.land #overlay .r6cv-lh > span b.crit { color: #FF8A80; }
  :root.land #overlay .r6cv-g, :root.land #overlay .r6cv-gl { display: flex; gap: 4px; }
  :root.land #overlay .r6cv-gp { position: relative; display: block; min-width: 92px; height: 16px; overflow: hidden; border-radius: 8px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .1); }
  :root.land #overlay .r6cv-gp > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: #9FD182; transform-origin: 0 50%; animation: r6cv-grow 1s cubic-bezier(.2, .9, .25, 1) .25s both; }
  :root.land #overlay .r6cv-gp.warn > i { background: #F7D27A; }
  :root.land #overlay .r6cv-gp.crit > i { background: #FF8A80; }
  :root.land #overlay .r6cv-gl > span { min-width: 92px; display: flex; flex-direction: column; gap: 2px; color: rgba(239, 241, 246, .55); font-size: 12.5px; }
  :root.land #overlay .r6cv-gl > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-gl > span > b { color: #EFF1F6; font-weight: 500; line-height: 1.3; }      /* a narrow part's figure goes to two lines rather than past the edge */
  :root.land #overlay .r6cv-lim.none .r6cv-lh > b { color: rgba(239, 241, 246, .6); }
  :root.land #overlay .r6cv-lim.none .r6cv-lh > small { color: rgba(239, 241, 246, .42); font-size: 13px; }
  :root.land #overlay .r6cv-dash { position: relative; display: block; height: 14px; box-sizing: border-box; border: 1.5px dashed rgba(239, 241, 246, .18); border-radius: 7px; }
  :root.land #overlay .r6cv-dash .mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(239, 241, 246, .28); }
  @keyframes r6cv-grow { from { transform: scaleX(0); } to { transform: none; } }

  /* the sections: a heading at 22 px, what it counts at its right */
  :root.land #overlay .r6cv-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
  :root.land #overlay .r6cv-top + .r6cv-sec { margin-top: 34px; }
  :root.land #overlay .r6cv .r6-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
  :root.land #overlay .r6cv .r6-h h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .r6cv .r6-h > small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.land #overlay .r6cv-empty { gap: 6px; }
  :root.land #overlay .r6cv-empty h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .r6cv-empty p { margin: 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }
  :root.land #overlay .r6cv-note { margin: 0; color: rgba(239, 241, 246, .55); font-size: 14px; line-height: 1.45; }

  /* one card: the subcategories, or the latest transactions; quiet rows at zero when nothing went out this month */
  :root.land #overlay .r6cv-card { display: flex; flex-direction: column; padding: 0 18px 0 14px; border: 1px solid transparent; border-radius: 30px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#121414, #121414) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06)) border-box; }
  :root.land #overlay .r6cv-card.ghost { border: 1.5px dashed rgba(239, 241, 246, .14); background: none; }
  :root.land #overlay .r6cv-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; color: #EFF1F6; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv-row > .cg { width: 42px; height: 42px; }
  :root.land #overlay .r6cv-row > .cg svg { width: 18px; height: 18px; }
  :root.land #overlay .r6cv-rt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 68px; }
  :root.land #overlay .r6cv-rt.line { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay .r6cv-card.ghost .r6cv-rt { min-height: 64px; }
  :root.land #overlay .r6cv-card.ghost .r6cv-rt.line { border-top-style: dashed; border-top-color: rgba(239, 241, 246, .1); }
  :root.land #overlay .r6cv-card.ghost .r6cv-t b { color: rgba(239, 241, 246, .7); }
  :root.land #overlay .r6cv-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .r6cv-t b { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-t small { overflow: hidden; color: rgba(239, 241, 246, .5); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-am { flex: none; font-size: 16px; font-weight: 500; }
  :root.land #overlay .r6cv-am.none { color: rgba(239, 241, 246, .38); }
  :root.land #overlay .r6cv-am.in { color: #9FD182; }
  :root.land #overlay .r6cv-dd { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(239, 241, 246, .07); }
  :root.land #overlay .r6cv-dd b { font-size: 15px; font-weight: 500; line-height: 1; }
  :root.land #overlay .r6cv-dd small { margin-top: 2px; color: rgba(239, 241, 246, .5); font-size: 10.5px; font-weight: 500; text-transform: uppercase; }

  /* the rules: quiet lines, edited on a computer */
  :root.land #overlay .r6cv-rules { display: flex; flex-direction: column; margin-top: -4px; }
  :root.land #overlay .r6cv-rule { display: flex; align-items: center; gap: 14px; min-height: 58px; }
  :root.land #overlay .r6cv-ri { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(159, 209, 130, .12); color: #9FD182; }
  :root.land #overlay .r6cv-ri svg { width: 16px; height: 16px; }
  :root.land #overlay .r6cv-rp { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13.5px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-rule > small { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 46%; overflow: hidden; color: rgba(239, 241, 246, .6); font-size: 13.5px; white-space: nowrap; }
  :root.land #overlay .r6cv-rule > small svg { flex: none; }
  :root.land #overlay .r6cv-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -12px; padding-left: 50px; }
  :root.land #overlay .r6cv-more small { color: rgba(239, 241, 246, .45); font-size: 13px; }
  :root.land #overlay .r6cv-link { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: #9FD182; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv-link svg { width: 15px; height: 15px; }

  /* ---------- at the thumb: its limits in dark glass, a new subcategory in lime; the page fades under them ---------- */
  :root.land #overlay .drawer:has(.r6cv) > footer.r6cv-foot { position: relative; justify-content: flex-end; flex-wrap: nowrap; gap: 10px; padding: 8px 20px calc(28px + var(--safe-b, 0px)); border: 0; background: #070808; }
  :root.land #overlay .r6cv-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; pointer-events: none; background: linear-gradient(180deg, rgba(7, 8, 8, 0), #070808); }
  :root.land #overlay .r6cv-db { all: unset; box-sizing: border-box; flex: none; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
    background: rgba(26, 29, 29, .92); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 8px 22px rgba(0, 0, 0, .45); color: #EFF1F6; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .r6cv-db.go { padding: 0 22px 0 18px; background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212; }
  :root.land #overlay .r6cv-db:active { transform: scale(.965); }
  :root.land #overlay .r6cv-db:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.land #overlay .r6cv-db svg { width: 18px; height: 18px; }
  :root.land #overlay .r6cv-gi { display: grid; color: #9FD182; }

  @media (prefers-reduced-motion: reduce) {
    :root.land #overlay .r6cv-gp > i { animation: none; }
    :root.land #overlay :is(.r6cv .press, .r6cv-db) { transition: none; }
  }
}