/* Dorax Finance — an account opened, in the owner's v6 look (v350; the markup: features/phone/r6-cardv.js; the board "Cuenta-abierta-V6"). The panel
   on the page's black, whatever the theme: its name, "···" and the close button side by side at the top; the card of v321 on the page (its own
   drawing: look-land-card-view.css); the invoice with its figure at 52 px and the limit in two parts; the transactions and the account in one card
   each (#121414 with its edge of light); an income in glass and the expense in lime at the foot. */
@media (max-width: 920px) {
  /* ---------- the panel: the page's black, the v6 inks ---------- */
  :root.land #overlay .drawer:has(.r6cv) {
    --ink: #EFF1F6; --ink-strong: #EFF1F6; --ink-2: rgba(239, 241, 246, .66); --ink-3: rgba(239, 241, 246, .5); --line: rgba(239, 241, 246, .08); --line-strong: rgba(239, 241, 246, .16);
    --surface: #121414; --surface-2: #181A1A; --surface-3: #212424; --well: #121414; --track: rgba(239, 241, 246, .1); --field: rgba(239, 241, 246, .16);
    --bq-ink: #EFF1F6; --bq-ink-2: rgba(239, 241, 246, .66); --bq-ink-3: rgba(239, 241, 246, .5); --bq-line: rgba(239, 241, 246, .08); --bq-card: #121414; --bq-accent: #9FD182; --bq-in: #9FD182;
    --switch-on: #30D158; --switch-off: rgba(239, 241, 246, .18); --knob: #FFFFFF; --link: #9FD182; --focus: #9FD182; --pos: #9FD182; --crit: #FF8A80;
    border: 0; border-radius: 0; background: #070808; color: #EFF1F6;
  }
  :root.land #overlay .drawer:has(.r6cv) > .grab::before { display: none; }
  :root.land #overlay .drawer:has(.r6cv) > header { align-items: center; gap: 10px; padding: 14px 16px 10px; border: 0; background: #070808; }
  :root.land #overlay .drawer:has(.r6cv) > header h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
  /* "···" and the close button: two round glass buttons side by side, never one on the other */
  :root.land #overlay .drawer:has(.r6cv) > header :is(.cvl-more, [data-a="close"]) {
    all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; -webkit-tap-highlight-color: transparent;
    transition: transform .34s cubic-bezier(.2, .9, .3, 1.25);
  }
  :root.land #overlay .drawer:has(.r6cv) > header :is(.cvl-more, [data-a="close"]):active { transform: scale(.94); }
  :root.land #overlay .drawer:has(.r6cv) > header :is(.cvl-more, [data-a="close"]):focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
  :root.land #overlay .drawer:has(.r6cv) > header [data-a="close"] svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu { border-radius: 22px; background: #121414; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12), 0 18px 40px -12px rgba(0, 0, 0, .8); }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item { min-height: 50px; border-radius: 16px; color: #EFF1F6; }
  :root.land #overlay .drawer:has(.r6cv) .cvl-menu .umenu-item svg { color: rgba(239, 241, 246, .7); }

  /* ---------- the page: the card, then its parts, no sheet ---------- */
  :root.land #overlay .r6cv { gap: 0; padding: 6px 16px 28px; background: #070808; }
  :root.land #overlay .r6cv > .cvl-card { margin: 0 auto; }
  :root.land #overlay .r6cv-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
  :root.land #overlay .r6cv-sec.cvl-ops { margin-top: 26px; }
  :root.land #overlay .r6cv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root.land #overlay .r6cv-h > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  :root.land #overlay .r6cv-sec h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .r6cv-h small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.land #overlay .r6cv-sum { flex: none; color: rgba(239, 241, 246, .75); font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv .bp-link { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: #9FD182; font-size: 14.5px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv .bp-link svg { width: 15px; height: 15px; }
  :root.land #overlay .r6cv .bp-link:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; border-radius: 12px; }
  :root.land #overlay .r6cv-h .bp-link { align-self: center; }

  /* ---------- the invoice: its name and when; the figure large; the limit in two parts ---------- */
  :root.land #overlay .r6cv-inv { gap: 0; }
  :root.land #overlay .r6cv-ih { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root.land #overlay .r6cv-ih h2 { color: rgba(239, 241, 246, .6); font-size: 15px; font-weight: 500; letter-spacing: 0; }
  :root.land #overlay .r6cv-due { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .75); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv-due.soon { background: rgba(247, 210, 122, .14); color: #F7D27A; }
  :root.land #overlay .r6cv-due.late { background: rgba(255, 138, 128, .14); color: #FF8A80; }
  :root.land #overlay .r6cv-fig { margin-top: 6px; color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
  :root.land #overlay .r6cv-fig .cents { opacity: 1; color: rgba(239, 241, 246, .42); font-size: .5em; letter-spacing: -.02em; }
  :root.land #overlay .r6cv-paid { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #EFF1F6; font-size: 18px; font-weight: 500; }
  :root.land #overlay .r6cv-paid svg { width: 20px; height: 20px; color: #9FD182; stroke-width: 2.4; }
  :root.land #overlay .r6cv-lim { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  :root.land #overlay .r6cv-lb { display: flex; gap: 3px; height: 14px; }
  :root.land #overlay .r6cv-lb i { display: block; min-width: 6px; border-radius: 7px; transform-origin: 0 50%; animation: r6cv-grow 1s cubic-bezier(.2, .9, .25, 1) .2s both; }
  :root.land #overlay .r6cv-lb i.used { background: #FF8A80; }
  :root.land #overlay .r6cv-lb i.left { background: rgba(159, 209, 130, .28); box-shadow: inset 0 0 0 1px rgba(159, 209, 130, .5); animation-delay: .32s; }
  @keyframes r6cv-grow { from { transform: scaleX(0); } to { transform: none; } }
  :root.land #overlay .r6cv-lt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; color: rgba(239, 241, 246, .6); font-size: 13.5px; }
  :root.land #overlay .r6cv-lt > span { white-space: nowrap; }
  :root.land #overlay .r6cv-lt b { color: #9FD182; font-weight: 500; }
  :root.land #overlay .r6cv-inv > .bp-link { margin-top: 4px; }
  /* v529/v531: the open invoice in two parts, under the figure: one flat block a tap opens, below a hairline (no box): the two parts, what it
     comes to at its closing and "See what makes it up" (v532: no bar of its own, the limit's is above) */
  :root.land #overlay .r6cv-mk { all: unset; box-sizing: border-box; cursor: pointer; display: block; margin-top: 22px; padding: 18px 0 4px; border-top: 1px solid rgba(239, 241, 246, .08); -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6cv-mk:focus-visible { outline: 2px solid #9FD182; outline-offset: 4px; border-radius: 12px; }
  :root.land #overlay .r6cv-mk-in { display: flex; flex-direction: column; gap: 10px; }
  :root.land #overlay .r6cv-mk-h { color: rgba(239, 241, 246, .6); font-size: 13.5px; }
  :root.land #overlay .r6cv-mk-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: rgba(239, 241, 246, .75); font-size: 15px; }
  :root.land #overlay .r6cv-mk-r > span { display: inline-flex; align-items: center; gap: 10px; }
  :root.land #overlay .r6cv-mk-r b { color: #EFF1F6; font-size: 16px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv-mk-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.land #overlay .r6cv-mk-t b { margin-left: 4px; color: #EFF1F6; font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv-mk-go { display: inline-flex; align-items: center; gap: 2px; color: #9FD182; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv-mk-go svg { width: 16px; height: 16px; }
  /* v531: paying it, a button the width of the panel: glass, and the bright green from a week before its day */
  :root.land #overlay .r6cv-pay { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 18px; padding: 0 20px; border-radius: 999px; background: rgba(239, 241, 246, .1); color: #EFF1F6; font-size: 15px; font-weight: 500; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .r6cv-pay.soon { background: #9FD182; color: #101212; }
  :root.land #overlay .r6cv-pay:active { transform: scale(.965); }
  :root.land #overlay .r6cv-pay:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }

  /* ---------- the installments to come: the months as small figures ---------- */
  :root.land #overlay .r6cv-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
  :root.land #overlay .r6cv-months li { display: flex; flex-direction: column; gap: 2px; }
  :root.land #overlay .r6cv-months small { color: rgba(239, 241, 246, .5); font-size: 12px; font-weight: 500; text-transform: uppercase; }
  :root.land #overlay .r6cv-months b { color: #EFF1F6; font-size: 15px; font-weight: 500; }

  /* ---------- Debit | Credit: on glass, the side in view in muted white; the pill slides ---------- */
  :root.land #overlay .r6cv .r6cv-seg { gap: 4px; padding: 4px; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); }
  :root.land #overlay .r6cv .r6cv-seg::before { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - 4px * (var(--n, 2) - 1)) / var(--n, 2)); background: #D9DCE1; transform: translateX(calc((100% + 4px) * var(--i, 0))); }
  :root.land #overlay .r6cv .r6cv-seg button { height: 44px; color: rgba(239, 241, 246, .7); font-size: 14.5px; font-weight: 500; }
  :root.land #overlay .r6cv .r6cv-seg button[aria-pressed="true"] { color: #101212; font-weight: 500; }
  :root.land #overlay .r6cv .r6cv-seg button:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }

  /* ---------- the transactions: the last five in one card, the day in a small tile, a hairline between ---------- */
  :root.land #overlay .r6cv .r6-card {
    position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 28px;
    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 .cvl-list.r6-card { padding: 0 18px 0 14px; }
  :root.land #overlay .r6cv-tx { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; color: #EFF1F6; -webkit-tap-highlight-color: transparent; animation: r6cv-rise .32s cubic-bezier(.2, .9, .25, 1) var(--d, 0ms) both; }
  @keyframes r6cv-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  :root.land #overlay .r6cv-tx:active { opacity: .7; }
  :root.land #overlay .r6cv-tx:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; border-radius: 14px; }
  :root.land #overlay .r6cv-tx.ignored { opacity: .55; }
  :root.land #overlay .r6cv-day { 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-day b { font-size: 15px; font-weight: 500; line-height: 1; }
  :root.land #overlay .r6cv-day small { margin-top: 2px; color: rgba(239, 241, 246, .5); font-size: 10.5px; font-weight: 500; text-transform: uppercase; }
  :root.land #overlay .r6cv-tr { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 68px; }
  :root.land #overlay .r6cv-tx + .r6cv-tx .r6cv-tr { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay .r6cv-tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .r6cv-tt > b { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-tt > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
  :root.land #overlay .r6cv-tt > span > small:first-child { overflow: hidden; color: rgba(239, 241, 246, .5); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6cv-tag { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .7); font-size: 11.5px; font-weight: 500; }
  :root.land #overlay .r6cv-amt { flex: none; color: #EFF1F6; font-size: 16px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6cv-amt.pos { color: #9FD182; }
  /* an account with nothing yet: three empty rows, and the app's words */
  :root.land #overlay .r6cv-none { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 0; }
  :root.land #overlay .r6cv-ghost { display: flex; flex-direction: column; gap: 10px; }
  :root.land #overlay .r6cv-ghost i { display: block; height: 52px; border-radius: 18px; border: 1.5px dashed rgba(239, 241, 246, .12); }
  :root.land #overlay .r6cv-ghost i:nth-child(2) { opacity: .7; }
  :root.land #overlay .r6cv-ghost i:nth-child(3) { opacity: .4; }
  :root.land #overlay .r6cv-none p { margin: 0; color: rgba(239, 241, 246, .6); font-size: 14.5px; line-height: 1.45; }

  /* ---------- the account: the main account's switch in Apple's green, then its rows ---------- */
  :root.land #overlay .r6cv-defs { display: flex; flex-direction: column; padding: 0 18px; }
  :root.land #overlay .r6cv-main { display: flex; align-items: center; gap: 14px; min-height: 72px; cursor: pointer; }
  :root.land #overlay .r6cv-mt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .r6cv-mt b { color: #EFF1F6; font-size: 16px; font-weight: 500; }
  :root.land #overlay .r6cv-mt small { color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.35; }
  :root.land #overlay .r6cv-main .switch { flex: none; --switch-on: #30D158; --switch-off: rgba(239, 241, 246, .18); --knob: #FFFFFF; }
  :root.land #overlay .r6cv-main .switch input:disabled + .track { opacity: 1; }
  :root.land #overlay .r6cv-main .switch input:focus-visible + .track { outline: 2px solid #9FD182; outline-offset: 2px; }
  :root.land #overlay .r6cv-def { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; color: #EFF1F6; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay :is(.r6cv-main, .r6cv-def) + .r6cv-def { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay .r6cv-def > span { flex: none; width: 112px; color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.land #overlay .r6cv-def > b { flex: 1 1 auto; min-width: 0; padding: 8px 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
  :root.land #overlay .r6cv-def > svg { flex: none; color: rgba(239, 241, 246, .45); }
  :root.land #overlay .r6cv-def:active { opacity: .7; }
  :root.land #overlay .r6cv-def:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; border-radius: 14px; }

  /* ---------- at the foot, at the thumb: an income in dark glass, the expense in lime; the page fades under them ---------- */
  :root.land #overlay .drawer:has(.r6cv) > footer.r6cv-foot {
    position: relative; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px calc(20px + var(--safe-b, 0px)); border: 0;
    background: linear-gradient(180deg, rgba(7, 8, 8, 0), rgba(7, 8, 8, .92) 30%, #070808); margin-top: -24px;
  }
  :root.land #overlay .r6cv-b {
    all: unset; box-sizing: border-box; cursor: pointer; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px 0 16px;
    border-radius: 999px; 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; font-size: 15px; font-weight: 500; white-space: nowrap;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-tap-highlight-color: transparent; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25);
  }
  :root.land #overlay .r6cv-b > span { overflow: hidden; text-overflow: ellipsis; }
  :root.land #overlay .r6cv-b svg { flex: none; width: 18px; height: 18px; }
  :root.land #overlay .r6cv-b:not(.go) svg { color: #9FD182; stroke-width: 2.3; }
  :root.land #overlay .r6cv-b.go { flex: none; padding: 0 22px 0 18px; background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212; }
  :root.land #overlay .r6cv-b.go svg { stroke-width: 2.4; }
  :root.land #overlay .r6cv-b:active { transform: scale(.965); }
  :root.land #overlay .r6cv-b:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  /* a narrow phone: the words whole, the icons go (both buttons keep their names) */
  @media (max-width: 359px) {
    :root.land #overlay .drawer:has(.r6cv) > footer.r6cv-foot { padding-left: 16px; padding-right: 16px; }
    :root.land #overlay .r6cv-b, :root.land #overlay .r6cv-b.go { padding: 0 14px; font-size: 14px; }
    :root.land #overlay .r6cv-b svg { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root.land #overlay :is(.r6cv-lb i, .r6cv-tx) { animation: none; }
    :root.land #overlay :is(.r6cv-b, .drawer:has(.r6cv) > header :is(.cvl-more, [data-a="close"])) { transition: none; }
  }
}