/* Chat → Us: the Us page, chat cards (tab, loan, payment, reminders), sheets (Split or owe,
   Pay, When to settle), Our tab, How to pay me. Only a record: no money moves in SixCity. */

:root { --us-owe: #b42318; --us-owed: #157f3c; --us-ink: #171717; --us-muted: #6c6d67; }

/* ---------- Chat: the Us button, the balance under the name, + panel ---------- */
.us-top-button[hidden] { display: none !important; }
.us-top-button { position: relative; z-index: 41; pointer-events: auto; flex: none; width: 44px; height: 40px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.us-pair { display: flex; }
.us-pair-face { width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 9px; font-weight: 700; }
.us-pair-face + .us-pair-face { margin-left: -9px; }
.us-top-button.owe::after, .us-top-button.owed::after { content: ""; position: absolute; right: 4px; top: 7px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--us-owed); }
.us-top-button.owe::after { background: var(--us-owe); }
/* Us sits beside ⋯ on the right (🔍 is on the left, by ←), so the corners stay two buttons wide. */
html.is-us-chat .app:has(#chatSearchButton:not([hidden])) .topbar-corner-right { gap: 0; }
.chat-attachment-option[data-money-option] { display: none; }
html.is-us-chat .chat-attachment-option[data-money-option] { display: grid; }
/* The first few chats: a grip on the right edge says "swipe for Us" (a tap opens it too). */
.us-edge-grip { position: fixed; right: 0; top: 50%; z-index: 60; width: 20px; height: 76px; margin-top: -38px; padding: 0; border: 0; border-radius: 12px 0 0 12px; display: grid; place-items: center; background: rgb(23 23 23 / .08); color: #6c6d67; font-size: 15px; cursor: pointer; animation: us-grip-nudge 1.6s ease-in-out 2; }
.us-edge-grip[hidden], html.is-us-open .us-edge-grip, html.is-desktop-board .us-edge-grip { display: none; }
@keyframes us-grip-nudge { 50% { transform: translateX(-6px); } }
/* Toasts over the Us page and its sheets. */
html.is-us-open .toast, html:has(.money-layer, .us-sub.open) .toast { position: fixed; z-index: 400; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Chat cards ---------- */
.message-bubble.money-bubble { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; color: var(--us-ink) !important; max-width: none; }
.message.money-sys-line { display: flex; justify-content: center; margin: 6px 0; }
.money-card { width: min(272px, calc(100vw - 104px)); padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ecebe6, 0 2px 8px rgb(0 0 0 / .04); color: var(--us-ink); text-align: left; font-size: 14px; line-height: 1.3; }
.money-card.is-sys { width: min(300px, calc(100vw - 40px)); background: #f5f9ff; box-shadow: 0 0 0 1px #dbe8f9; }
.money-card-wait { margin: 0; color: var(--us-muted); }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #eaf3fd; font-size: 20px; }
.mc-what { flex: 1; min-width: 0; }
.mc-what strong { display: block; overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mc-what small { display: block; color: var(--us-muted); font-size: 12.5px; }
.mc-amt { flex: none; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.mc-plan { margin: 8px 0 0; color: var(--us-muted); font-size: 12.5px; }
.mc-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e6e6e2; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--us-muted); font-size: 12.5px; }
.mc-btns { flex: none; display: flex; gap: 6px; }
.mc-btn { height: 30px; padding: 0 13px; border: 0; border-radius: 99px; background: #171717; color: #fff; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.mc-btn.soft { background: #f2f2f0; color: #4a4a46; }
.mc-btn:disabled { opacity: .5; }
/* A loan: the same size as a name card (270px, 52px circle, 34px buttons), one row, then
   Decline · Accept / Take back / one quiet line. */
.money-card.is-loan { cursor: pointer; width: min(270px, 75vw); max-width: 100%; padding: 13px; border: 1px solid #e4e4e7; border-radius: 18px 18px 18px 6px; background: linear-gradient(145deg, #fafafa, #f4f4f5); box-shadow: 0 4px 13px rgb(24 24 27 / .06); }
.message.user .money-card.is-loan { border-radius: 18px 18px 6px 18px; }
.loan-c.is-off { opacity: .62; }
.loan-c.is-off strong { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgb(0 0 0 / .35); }
.loan-row { min-height: 60px; display: flex; align-items: center; gap: 11px; }
.loan-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #ececec; }
.loan-mark { display: block; width: 28px; height: 28px; }
.loan-emoji { font-size: 26px; line-height: 1; }
.loan-mid { flex: 1; min-width: 0; }
.loan-dir { display: -webkit-box; margin-top: 1px; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:is(.loan-mid strong, .loan-dir).is-up { color: var(--us-owed); }
:is(.loan-mid strong, .loan-dir).is-down { color: var(--us-owe); }
.loan-row strong { display: block; min-width: 0; overflow: hidden; font-size: 22px; font-weight: 800; letter-spacing: -.4px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.loan-tag { flex: none; padding: 2px 8px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #ececec; color: #4a4a46; font-size: 10.5px; font-weight: 750; }
.loan-acts { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(48 97 75 / .12); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.loan-acts .mc-btn { height: 34px; padding: 0; border-radius: 11px; font-size: 12px; font-weight: 800; }
.loan-acts .mc-btn.soft { background: rgb(255 255 255 / .85); color: #18181b; }
.loan-foot { min-height: 44px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(48 97 75 / .12); display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #748079; font-size: 11.5px; font-weight: 650; }
.loan-foot .ok { color: var(--us-owed); font-weight: 650; }
.loan-link { padding: 0; border: 0; background: none; color: #18181b; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
/* A Picture link: the photo across the top of the card, then the tag, its name and who tagged whom. */
.money-card.is-pic { padding-top: 0; overflow: hidden; }
.pic-c-photo { display: block; width: calc(100% + 26px); height: 150px; margin: 0 -13px 10px; object-fit: cover; background: #e9eae6; }
.pic-c-tag { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #fff3ee; color: #c2603f; font-size: 11.5px; font-weight: 750; }
.money-card.is-pic .loan-c > .pic-c-row:first-child { margin-top: 13px; }
.pic-c-title { display: block; margin-top: 6px; overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pic-c-sub { display: block; margin-top: 2px; overflow: hidden; color: #6c6d67; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.loan-link:disabled { opacity: .5; }

/* ---------- Us page and its pages ---------- */
.us-page, .us-sub { position: fixed; inset: 0; z-index: 206; display: flex; flex-direction: column; background: #f2f2f7; color: var(--us-ink); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); box-shadow: -10px 0 30px rgb(0 0 0 / .08); }
.us-sub { z-index: 207; }
.us-page.open, .us-sub.open { transform: none; }
.us-page.dragging, .us-page.no-anim { transition: none; }
.us-top { flex: none; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: max(10px, env(safe-area-inset-top, 0px)) 10px 6px; }
.us-top strong { justify-self: center; font-size: 17px; font-weight: 650; }
.us-back { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 32px; line-height: 1; cursor: pointer; }
.us-save, .us-gear { justify-self: end; height: 40px; padding: 0 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.us-gear { font-size: 20px; }
.us-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(40px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.us-hero { padding: 20px 16px 18px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, #fff4ea 0%, #eef8fc 100%); }
.us-pair-big { display: flex; justify-content: center; }
.us-face { width: 64px; height: 64px; border: 3px solid #fff; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 22px; font-weight: 700; box-shadow: 0 6px 16px rgb(0 0 0 / .08); }
.us-face + .us-face { margin-left: -16px; }
.us-hero h2 { margin: 10px 0 2px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.us-hero > small { color: var(--us-muted); font-size: 13px; }
.us-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.us-stats div { padding: 10px 4px; border-radius: 14px; background: rgb(255 255 255 / .7); }
.us-stats b { display: block; font-size: 19px; font-weight: 800; }
.us-stats span { color: var(--us-muted); font-size: 11.5px; }
/* Six seats around the two faces: lit ones in color, the rest dashed and waiting. */
.us-seats { position: relative; width: min(272px, 100%); aspect-ratio: 1; margin: -4px auto -6px; }
.us-seats::before { content: ""; position: absolute; inset: 12%; border: 3px solid rgb(0 0 0 / .06); border-radius: 50%; }
.us-seats.is-full::before { border-color: rgb(247 199 75 / .7); box-shadow: 0 0 0 6px rgb(247 199 75 / .14); }
.us-seats .us-pair-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.us-seat { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.us-seat:active { transform: scale(.94); }
.us-seat.is-on { background: var(--c); box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 6px 14px rgb(0 0 0 / .1); }
.us-seat.is-off { background: rgb(255 255 255 / .75); border: 2px dashed #cfd2cf; }
.us-seat.is-off span { opacity: .4; filter: grayscale(1); }
.us-seat.is-pick { outline: 2.5px solid #171717; outline-offset: 3px; }
.us-seats.is-pop .us-seat.is-on { animation: us-seat-pop .5s calc(var(--i) * .1s + .15s) backwards cubic-bezier(.3, 1.6, .5, 1); }
@keyframes us-seat-pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .us-seats.is-pop .us-seat.is-on { animation: none; } }
.us-seat-tip { display: table; margin: 8px auto 0; padding: 6px 12px; border-radius: 999px; background: #fff3ee; color: #c2603f; font-size: 13px; font-weight: 650; }
.us-seat-tip:empty { display: none; }
.us-seat-tip[data-post] { cursor: pointer; }
.us-seat-tip.is-info { background: #e9f6fa; color: #2f7f98; }
.us-card { margin-top: 12px; padding: 14px; border-radius: 20px; background: #fff; }
.us-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.us-card-h strong { font-size: 15.5px; font-weight: 700; }
.us-card-h button { padding: 0; border: 0; background: none; color: #198cff; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.us-count { color: #8a8a86; font-size: 13px; font-weight: 600; }
.us-muted { color: #8a8a86; font-size: 12.5px; }
.us-loading { text-align: center; margin-top: 20px; }
.us-tab-bal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.us-tab-bal b { font-size: 30px; font-weight: 850; letter-spacing: -.8px; color: #6c6d67; }
.us-tab-bal b.owe { color: var(--us-owe); }
.us-tab-bal b.owed { color: var(--us-owed); }
.us-tab-bal small { color: var(--us-muted); font-size: 13px; text-align: right; }
.money-bar { height: 6px; margin: 10px 0 4px; border-radius: 3px; overflow: hidden; background: #ececea; }
.money-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #61c8e6, #f7c74b, #f7a593); }
.us-mini { margin-top: 10px; display: grid; gap: 6px; }
.us-mini div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.us-mini i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff4dc; font-style: normal; }
.us-mini span { flex: 1; min-width: 0; overflow: hidden; color: #3b4048; text-overflow: ellipsis; white-space: nowrap; }
.us-mini em { flex: none; font-style: normal; font-weight: 700; }
.us-mini em.is-up, .money-e-amt.is-up { color: var(--us-owed); }
.us-mini em.is-down, .money-e-amt.is-down { color: var(--us-owe); }
.us-row2 { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-row2 button { height: 40px; border: 0; border-radius: 20px; background: #f2f2f0; color: var(--us-ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.us-row2 .dark { background: #171717; color: #fff; }
.us-row2.is-one { grid-template-columns: 1fr; }
/* Money: one card on Us (tap it), and the Money with <name> page. */
.us-money { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.us-money .us-card-h { margin-bottom: 4px; }
.us-chev { color: #b0b1aa; font-size: 20px; font-style: normal; line-height: 1; }
.us-money-big { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.us-money-big span { font-size: 15px; font-weight: 700; color: #6c6d67; }
.us-money-big b { font-size: 28px; font-weight: 850; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
:is(.us-money-big span, .us-money-big b, .us-money-top p, .us-money-top b).is-up { color: var(--us-owed); }
:is(.us-money-big span, .us-money-big b, .us-money-top p, .us-money-top b).is-down { color: var(--us-owe); }
.us-money-top { text-align: center; }
.us-money-top .us-face { width: 48px; height: 48px; font-size: 16px; }
.us-money-top p { margin: 10px 0 0; color: #6c6d67; font-size: 15px; font-weight: 700; }
.us-money-top b { display: block; margin-top: 2px; font-size: 40px; font-weight: 850; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.us-money-row .mc-ico { background: #f4f4f2; }
.us-money-bar { display: block; height: 4px; margin-top: 5px; border-radius: 4px; overflow: hidden; background: #eef0f2; }
.us-money-bar i { display: block; height: 100%; background: #34a35b; }
.us-mini-btn { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: #171717; color: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
/* We're even: on the Money card, and its short confirm. */
.us-even { width: 100%; height: 40px; margin-top: 8px; border: 0; border-radius: 20px; background: #eaf6ee; color: var(--us-owed); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.us-even.is-down { background: #fdecea; color: var(--us-owe); }
.us-even-wait { margin: 8px 0 0; padding: 9px 12px; border-radius: 14px; background: #f7f7f5; color: #6c6d67; font-size: 12.5px; }
.even-sheet { text-align: center; }
.even-check { width: 60px; height: 60px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center; background: #eaf6ee; color: var(--us-owed); font-size: 28px; font-weight: 800; }
.even-sheet .money-title { margin-bottom: 4px; }
.even-amt { margin: 0; font-size: 36px; font-weight: 850; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.even-amt.is-up { color: var(--us-owed); } .even-amt.is-down { color: var(--us-owe); }
.even-sub { margin: 6px 0 0; color: var(--us-muted); font-size: 13.5px; }
.even-wait { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #fff8e6; color: #7a5a12; font-size: 12px; }
.us-money-empty { margin: 0; padding: 14px; color: #8a8a86; font-size: 13.5px; text-align: center; }
.us-money-open { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.us-money-open i { flex: none; color: #c4c4c7; font-size: 20px; font-style: normal; }
.us-loan-big { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.us-loan-big b { font-size: 30px; font-weight: 850; letter-spacing: -.8px; color: #1f5fa8; }
.us-loan-big small { color: var(--us-muted); font-size: 13px; text-align: right; }
.us-loan-bar { height: 8px; margin: 10px 0 4px; border-radius: 4px; overflow: hidden; background: #e9eef6; }
.us-loan-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #61c8e6, #3b82f6); }
.us-loan-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #8a8a86; font-size: 12.5px; }
.us-pays { margin-top: 10px; display: grid; gap: 6px; }
.us-pays div { display: flex; justify-content: space-between; font-size: 13.5px; color: #3b4048; }
.us-note-line { margin: 10px 0 0; color: #b45309; font-size: 12.5px; }
.us-now { display: grid; gap: 8px; }
.us-now div { padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.us-now .thought { background: linear-gradient(90deg, #fff4ea, #eef8fc); }
.us-now .thought small { color: #8a8a86; }
.us-now .mode { background: var(--m-bg, #fdeef0); color: var(--m-ink, #a3214a); font-weight: 600; }
.us-meet { display: flex; align-items: center; gap: 12px; }
.us-meet + .us-meet { margin-top: 10px; }
.us-cal { flex: none; width: 50px; height: 50px; border: 1px solid #e6e6e2; border-radius: 12px; display: grid; place-items: center; align-content: center; text-align: center; line-height: 1.05; }
.us-cal small { color: #e11d48; font-size: 9.5px; font-weight: 700; }
.us-cal b { font-size: 15px; font-weight: 650; }
.us-meet > span { flex: 1; min-width: 0; }
.us-meet strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.us-meet small { color: #8a8a86; font-size: 12.5px; }
.us-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.us-photos img { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: #e8e8e4; }
.us-private { padding: 12px; border-radius: 14px; background: #f7f7f5; color: #3b4048; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.us-private small { display: block; margin-top: 6px; color: #8a8a86; font-size: 12px; }
.us-ways { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.us-ways small { flex-basis: 100%; margin-top: 4px; color: var(--us-muted); font-size: 13px; }
.us-fine { margin: 16px 4px 0; color: #8a8a86; font-size: 12px; line-height: 1.45; text-align: center; }
.way-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; font-style: normal; }
.way-ico.v { background: #3d95ce; } .way-ico.p { background: #1f3b77; } .way-ico.z { background: #6d1ed4; }
.way-ico.w { background: #1aad19; font-size: 14px; } .way-ico.a { background: #1677ff; font-size: 14px; }
.way-ico.ca { background: #00c244; } .way-ico.c { background: #eef8f1; font-size: 17px; }

/* ---------- Sheets ---------- */
.money-layer { position: fixed; inset: 0; z-index: 230; }
.money-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .32); }
.money-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff; color: var(--us-ink); animation: money-up .26s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 700px) { .money-sheet { left: 50%; right: auto; width: 420px; transform: translateX(-50%); bottom: 24px; border-radius: 26px; animation: none; } }
@keyframes money-up { from { transform: translateY(40px); opacity: .4; } }
.money-sheet button { font: inherit; cursor: pointer; }
.money-grab { width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #dcdcd8; }
.money-title { margin: 0 0 14px; font-size: 18px; font-weight: 750; text-align: center; }
.money-seg { padding: 3px; border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #f2f2f0; }
.money-seg button { height: 38px; border: 0; border-radius: 11px; background: transparent; color: #5b5b57; font-size: 14px; font-weight: 600; }
.money-seg button[aria-pressed="true"] { background: #fff; color: #171717; box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.money-amount { margin: 14px 0 6px; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.money-amount b { font-size: 26px; color: #8a8a86; }
.money-amount input { width: 1.6ch; max-width: 80%; border: 0; background: none; color: inherit; font: inherit; font-size: 46px; font-weight: 800; letter-spacing: -1px; text-align: center; outline: none; }
.money-split { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.money-split button, .money-days button { height: 32px; padding: 0 12px; border: 1px solid #e6e6e2; border-radius: 99px; background: #fff; color: #4a4a46; font-size: 13px; }
.money-split button[aria-pressed="true"], .money-days button[aria-pressed="true"] { border-color: #171717; background: #171717; color: #fff; }
.money-whats { display: flex; flex-wrap: wrap; gap: 6px; }
.money-whats button { height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: #f4f4f2; color: inherit; font-size: 14px; }
.money-whats button[aria-pressed="true"] { background: #fff4dc; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.money-note { box-sizing: border-box; width: 100%; height: 44px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 14px; background: #f7f7f5; box-shadow: inset 0 0 0 1px #ecebe6; color: inherit; font: inherit; font-size: 16px; outline: none; }
.money-textarea { box-sizing: border-box; width: 100%; min-height: 150px; padding: 12px 14px; border: 0; border-radius: 14px; background: #f7f7f5; box-shadow: inset 0 0 0 1px #ecebe6; color: inherit; font: inherit; font-size: 16px; line-height: 1.45; outline: none; resize: vertical; }
.money-label { margin: 14px 2px 8px; color: #4a4a46; font-size: 13px; font-weight: 650; }
.money-per { margin-top: 8px; height: 46px; padding: 0 14px; border-radius: 14px; display: flex; align-items: center; gap: 6px; background: #f7f7f5; box-shadow: inset 0 0 0 1px #ecebe6; }
.money-per[hidden] { display: none; }
.money-per span { flex: 1; color: var(--us-muted); font-size: 14px; }
.money-per b { color: #8a8a86; }
.money-per input { width: 110px; border: 0; background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 750; text-align: right; outline: none; }
.money-days { display: flex; flex-wrap: wrap; gap: 6px; }
.money-preview { min-height: 17px; margin: 12px 0 0; color: var(--us-muted); font-size: 13px; text-align: center; }
.money-fine { margin: 12px 4px 0; color: #8a8a86; font-size: 12px; line-height: 1.45; text-align: center; }
.money-main { width: 100%; height: 50px; margin-top: 12px; border: 0; border-radius: 25px; background: #171717; color: #fff; font-size: 16px; font-weight: 650; }
.money-main:disabled { opacity: .5; }
.money-ghost { width: 100%; height: 44px; margin-top: 6px; border: 0; background: none; color: var(--us-muted); font-size: 15px; font-weight: 600; }
.money-pay-amt { margin: 2px 0; font-size: 52px; font-weight: 850; letter-spacing: -1.4px; text-align: center; }
.money-pay-note { margin: 0 0 14px; color: #8a8a86; font-size: 13px; text-align: center; }
.money-ways { margin-top: 10px; border-radius: 18px; overflow: hidden; background: #f7f7f5; }
.money-ways button { width: 100%; min-height: 58px; padding: 8px 14px; border: 0; background: none; color: inherit; display: flex; align-items: center; gap: 12px; text-align: left; }
.money-ways button + button { box-shadow: inset 0 1px #ecebe6; }
.money-ways button:active { background: #efefec; }
.money-ways span:not(.way-ico) { flex: 1; min-width: 0; }
.money-ways strong { display: block; font-size: 15.5px; }
.money-ways small { display: block; overflow: hidden; color: #8a8a86; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.money-ways i { color: #c4c4c7; font-size: 20px; font-style: normal; }
.money-opened { padding: 16px; border-radius: 18px; background: #f7f7f5; color: #4a4a46; font-size: 14px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.money-big-line { font-size: 18px; }
.money-qr { display: block; width: min(240px, 70vw); aspect-ratio: 1; margin: 4px auto 10px; border-radius: 14px; background: #fff; object-fit: contain; }
.money-copy { display: inline-flex; align-items: center; height: 36px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e6e6e2; color: inherit; font-weight: 650; text-decoration: none; }
.money-q { margin: 16px 0 0; font-size: 15px; text-align: center; }
.money-opt { width: 100%; padding: 14px; border: 0; border-radius: 16px; display: flex; align-items: center; gap: 12px; background: #f7f7f5; color: inherit; text-align: left; box-shadow: 0 0 0 1.5px transparent; }
.money-opt + .money-opt { margin-top: 8px; }
.money-opt[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1.5px #171717; }
.money-opt i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-size: 19px; font-style: normal; }
.money-opt span:not(.money-check) { flex: 1; }
.money-opt strong, .money-toggle strong { display: block; font-size: 15.5px; }
.money-opt small, .money-toggle small { color: #8a8a86; font-size: 13px; }
.money-check { flex: none; width: 22px; height: 22px; border: 2px solid #d4d4d0; border-radius: 50%; box-sizing: border-box; }
.money-opt[aria-pressed="true"] .money-check { border-color: #171717; background: radial-gradient(#171717 45%, transparent 50%); }
.money-toggle { width: 100%; margin-top: 14px; padding: 14px; border: 0; border-radius: 16px; display: flex; align-items: center; gap: 12px; background: #f7f7f5; color: inherit; text-align: left; }
.money-toggle > span:first-child { flex: 1; }
.money-switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 15px; background: #d4d4d0; transition: background .2s; }
.money-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s; }
.money-toggle[aria-pressed="true"] .money-switch { background: #34c759; }
.money-toggle[aria-pressed="true"] .money-switch::after { transform: translateX(20px); }

/* ---------- Lend: like a transfer screen ---------- */
.lend-page { background: #ededed; }
.lend-top { flex: none; padding: max(10px, env(safe-area-inset-top, 0px)) 10px 0; }
.lend-who { flex: none; display: flex; align-items: center; gap: 14px; margin: 14px 24px 22px; }
.lend-who > span:first-child { flex: 1; min-width: 0; }
.lend-who strong { display: block; overflow: hidden; font-size: 18px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lend-who small { display: block; margin-top: 3px; color: #8a8a86; font-size: 13.5px; }
.lend-face { flex: none; width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 17px; font-weight: 700; }
.lend-card { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 24px 16px; border-radius: 18px 18px 0 0; background: #fff; }
.lend-label { margin: 0; color: #171717; font-size: 15px; }
.lend-amount { display: flex; align-items: center; gap: 10px; height: 74px; margin-top: 8px; border-bottom: 1px solid #ececea; }
.lend-amount b { font-size: 36px; font-weight: 700; }
.lend-amount span { font-size: 44px; font-weight: 700; letter-spacing: -.5px; }
.lend-caret { width: 2.5px; height: 46px; border-radius: 2px; background: #07c160; animation: lend-blink 1.1s steps(1) infinite; }
@keyframes lend-blink { 50% { opacity: 0; } }
.lend-link { display: block; margin-top: 16px; padding: 0; border: 0; background: none; color: #576b95; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lend-link[hidden] { display: none; }
.lend-note { margin-top: 14px; }
.lend-note[hidden] { display: none; }
.lend-pad { flex: none; display: grid; grid-template-columns: repeat(3, 1fr) 1.05fr; grid-template-rows: repeat(4, 54px); gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: #f3f3f3; }
.lend-pad button { border: 0; border-radius: 8px; background: #fff; color: #171717; font: inherit; font-size: 24px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lend-pad button:active { background: #e6e6e6; }
.lend-pad button[data-key="1"] { grid-column: 1; grid-row: 1; }
.lend-pad button[data-key="4"] { grid-column: 1; grid-row: 2; }
.lend-pad button[data-key="7"] { grid-column: 1; grid-row: 3; }
.lend-pad .wide { grid-column: 1 / span 2; grid-row: 4; }
.lend-pad button[data-key="."] { grid-column: 3; grid-row: 4; }
.lend-pad .back { grid-column: 4; grid-row: 1; font-size: 22px; }
.lend-pad .go { grid-column: 4; grid-row: 2 / span 3; background: #171717; color: #fff; font-size: 18px; font-weight: 650; }
.lend-pad .go:disabled { background: #9a9a96; color: #f2f2f0; cursor: default; }
.lend-pad .go:active:not(:disabled) { background: #000; }
/* Split · I owe · Owes me: the amount first, the emoji, the three choices, one row of faces
   (each with its own amount under it) and one sentence. */
.owe-page { background: #fff; }
.owe-card { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 12px; scrollbar-width: none; }
.owe-card > * { flex-shrink: 0; }
.owe-amount { display: flex; align-items: center; justify-content: center; gap: 4px; height: 62px; }
.owe-amount b { align-self: flex-start; margin-top: 8px; color: #b0b1aa; font-size: 28px; font-weight: 700; }
.owe-amount span { font-size: 50px; font-weight: 800; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.owe-amount .lend-caret { height: 40px; background: #198cff; }
.owe-whats { margin: 6px -16px 0; padding: 0 16px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.owe-whats button { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 99px; background: #f3f3f1; color: #171717; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.owe-whats button[aria-pressed="true"] { background: #171717; color: #fff; }
.owe-seg { margin-top: 14px; padding: 4px; border-radius: 14px; background: #f2f2f0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.owe-seg button { height: 38px; padding: 0; border: 0; border-radius: 10px; background: none; color: #6c6d67; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.owe-seg button[aria-pressed="true"] { background: #fff; color: #171717; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.owe-people { margin-top: 12px; padding: 12px 4px 10px; border-radius: 18px; background: #f7f7f5; }
.owe-people-h { margin: 0 10px 4px; display: flex; justify-content: space-between; color: #6c6d67; font-size: 12px; font-weight: 700; }
.owe-faces { display: flex; padding-top: 6px; overflow-x: auto; scrollbar-width: none; }
.owe-p { flex: 1 0 50px; max-width: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; display: grid; justify-items: center; gap: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.owe-face { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 15px; font-weight: 800; }
/* Who paid: a black ring and a small "paid" tag. */
.owe-p.is-payer .owe-face { overflow: visible; box-shadow: 0 0 0 2.5px #f7f7f5, 0 0 0 4.5px #171717; }
.owe-p.is-payer .owe-face::after { content: "paid"; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 99px; background: #171717; color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; }
.owe-p small { max-width: 58px; margin-top: 3px; overflow: hidden; color: #4a4a46; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.owe-p em { min-height: 15px; font-style: normal; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.owe-p em.is-up { color: var(--us-owed); } .owe-p em.is-down { color: var(--us-owe); } .owe-p em.is-muted { color: #b0b1aa; }
.owe-add .owe-face { border: 1.5px dashed #c9cbc6; background: none; color: #8a8a86; font-size: 20px; font-weight: 500; }
.owe-say { margin: 10px 4px 0; color: #171717; font-size: 13.5px; font-weight: 650; line-height: 1.35; text-align: center; }
.owe-say .is-up { color: var(--us-owed); } .owe-say .is-down { color: var(--us-owe); }
.owe-extras { margin-top: 10px; display: flex; justify-content: center; gap: 20px; }
.owe-extras .lend-link { margin: 0; font-size: 13px; font-weight: 600; }
.owe-page .lend-pad .go.is-up:not(:disabled) { background: #1f9d55; }
.owe-page .lend-pad .go.is-down:not(:disabled) { background: #e0564b; }
.owe-page .lend-pad .go { font-size: 16px; line-height: 1.25; }
.owe-pick-head { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; text-align: center; }
.owe-pick-head strong { font-size: 16.5px; }
.owe-pick-head button { padding: 8px 0; border: 0; background: none; color: #6c6d67; font: inherit; font-size: 14px; cursor: pointer; }
.owe-pick-head .done { color: #171717; font-weight: 800; }
.owe-search { margin-top: 8px; }
.owe-pick-list { max-height: min(52vh, 440px); margin-top: 6px; overflow-y: auto; }
.owe-pick { width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid #f0f0ee; background: none; color: inherit; font: inherit; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.owe-pick[hidden] { display: none; }
.owe-pick-face { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 14px; font-weight: 800; }
.owe-pick .nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.owe-tick { flex: none; width: 24px; height: 24px; border: 2px solid #d4d4d8; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; }
.owe-pick[aria-pressed="true"] .owe-tick { border-color: #171717; background: #171717; }
.owe-pick[aria-pressed="true"] .owe-tick::after { content: "✓"; }
html:is(.is-dark, [data-profile-theme="dark"]) .owe-page { background: #0f1115; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.owe-seg, .owe-people, .owe-whats button) { background: #1b1e24; color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) .owe-seg button[aria-pressed="true"] { background: #2a2e36; color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.owe-say, .owe-p small) { color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) .owe-p.is-payer .owe-face { box-shadow: 0 0 0 2.5px #1b1e24, 0 0 0 4.5px #f2f3f5; }
html:is(.is-dark, [data-profile-theme="dark"]) .owe-whats button[aria-pressed="true"] { background: #f2f3f5; color: #111; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.owe-pick-head .done, .owe-pick) { color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-page { background: #0f1115; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-card { background: #1b1e24; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-label,
html:is(.is-dark, [data-profile-theme="dark"]) .lend-pad button { color: #f2f3f5; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-pad { background: #15181d; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-pad button { background: #252931; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-pad .go { background: #f2f3f5; color: #111; }
html:is(.is-dark, [data-profile-theme="dark"]) .lend-link { color: #8fa6d8; }

/* ---------- Our tab ---------- */
.money-bal { padding: 22px 18px 18px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 26px rgb(15 23 42 / .07); }
.money-bal > small { display: block; color: var(--us-muted); font-size: 14px; }
.money-big { margin: 4px 0; font-size: 44px; font-weight: 850; letter-spacing: -1.2px; color: #6c6d67; }
.money-big.owed { color: var(--us-owed); } .money-big.owe { color: var(--us-owe); }
.money-rule { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #f7f7f5; color: #4a4a46; font-size: 13px; line-height: 1.4; }
.money-rule small { color: #8a8a86; }
.money-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.money-actions button { height: 44px; border: 0; border-radius: 22px; background: #f2f2f0; color: inherit; font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; }
.money-actions .dark { background: #171717; color: #fff; }
.money-list-h { margin: 22px 4px 8px; color: #8a8a86; font-size: 12.5px; font-weight: 700; }
.money-entries { border-radius: 18px; overflow: hidden; background: #fff; }
.money-entry { min-height: 60px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.money-entry + .money-entry { box-shadow: inset 0 1px #f0efec; }
.money-entry.is-faded { opacity: .55; }
.money-entry .mc-ico { width: 38px; height: 38px; font-size: 19px; }
.money-e-amt { flex: none; font-size: 15px; font-weight: 750; }

/* ---------- How to pay me ---------- */
.money-setup-lead { margin: 4px 4px 14px; color: var(--us-muted); font-size: 13.5px; line-height: 1.45; }
.money-setup-h { margin: 20px 4px 8px; color: #8a8a86; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.money-setup-list { border-radius: 18px; overflow: hidden; background: #fff; }
.money-setup-row { min-height: 56px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; }
.money-setup-row + .money-setup-row { box-shadow: inset 0 1px #f0efec; }
.money-setup-k { flex: none; width: 98px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.money-setup-row input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: #3b4048; font: inherit; font-size: 16px; text-align: right; outline: none; }
.money-qr-mini { margin-left: auto; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #f2f2f0; }
.money-link { padding: 0 4px; border: 0; background: none; color: #198cff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.money-link.muted { color: #8a8a86; }
.money-add-qr { margin-left: auto; height: 32px; padding: 0 12px; border: 1.5px dashed #cfd5dc; border-radius: 99px; background: none; color: #4a4a46; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ---------- Wallet · Pay me (Me → Friends and Us), and the Wallet page ---------- */
.wallet-two { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ecebe6, 0 2px 8px rgb(0 0 0 / .04); overflow: hidden; }
.wallet-two > button { min-width: 0; padding: 18px 8px 14px; border: 0; background: none; color: inherit; font: inherit; display: grid; justify-items: center; align-content: start; gap: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wallet-two > button:active { background: #f6f6f4; }
.wallet-two > button + button { box-shadow: inset 1px 0 #f0efec; }
.wallet-two strong { margin-top: 4px; font-size: 16px; font-weight: 600; }
.wallet-two .wallet-num { font-size: 15px; }
/* Under the balance: Lent | Borrowed, a small word over each amount. */
.wallet-cols { width: 100%; margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; }
.wallet-cols > span { min-width: 0; display: grid; gap: 1px; }
.wallet-cols > span + span { box-shadow: inset 1px 0 #f0efec; }
.wallet-cols small { color: #a0a09b; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.wallet-cols b { overflow: hidden; color: #8a8a86; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-mark { display: block; width: 40px; height: 40px; }
.wallet-mark.big { width: 50px; height: 50px; margin: 0 auto; }
.wallet-num, .wallet-sub { max-width: 100%; overflow: hidden; color: #8a8a86; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-sub { font-weight: 500; }
/* Green: someone owes you. Red: you owe. Grey: even. */
:is(.wallet-num, .wallet-cols b, .wallet-big, .wallet-row-num, .wallet-split b, .money-e-amt).is-up { color: var(--us-owed); }
:is(.wallet-num, .wallet-cols b, .wallet-big, .wallet-row-num, .wallet-split b, .money-e-amt).is-down { color: var(--us-owe); }
.me-wallet-host:not(:empty) { margin: 4px 0 14px; }
.us-wallet { margin-top: 12px; }
/* Without a right-hand column, the number takes that place (never a line of its own). */
.link-contact > .wallet-row-num { grid-column: 3; grid-row: 1; justify-self: end; }
.link-contact .wallet-row-num { flex: none; margin-left: 6px; font-size: 14px; font-style: normal; font-weight: 750; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.link-contact .wallet-row-num small { display: block; font-size: 11px; font-weight: 600; }
.wallet-hero { padding: 22px 16px 18px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 26px rgb(15 23 42 / .07); }
.wallet-lbl { margin-top: 8px; color: var(--us-muted); font-size: 13px; font-weight: 600; }
.wallet-big { margin: 2px 0 2px; color: #6c6d67; font-size: 40px; font-weight: 850; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.wallet-hero > small { color: var(--us-muted); font-size: 13.5px; }
.wallet-split { margin-top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.wallet-split > i { color: #b0b1aa; font-style: normal; font-weight: 700; }
.wallet-none { margin: 0; padding: 14px; color: #8a8a86; font-size: 13.5px; text-align: center; }
.wallet-split div { padding: 10px 6px; border-radius: 14px; background: #f7f7f5; }
.wallet-split b { display: block; font-size: 17px; font-weight: 800; }
.wallet-split span { color: var(--us-muted); font-size: 12px; }
.wallet-friend { width: 100%; border: 0; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wallet-face { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-size: 14px; font-weight: 700; }
.wallet-howto { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 16px; display: flex; align-items: center; gap: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wallet-howto > span:not(.way-ico) { flex: 1; min-width: 0; }
.wallet-howto strong { display: block; font-size: 15px; font-weight: 600; }
.wallet-howto small { color: #8a8a86; font-size: 12.5px; }
.wallet-howto i { flex: none; color: #c4c4c7; font-size: 20px; font-style: normal; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.wallet-two, .wallet-hero, .wallet-friend, .wallet-howto) { background: #1b1e24; box-shadow: none; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.wallet-two > button + button, .wallet-cols > span + span) { box-shadow: inset 1px 0 #2a2e36; }
html:is(.is-dark, [data-profile-theme="dark"]) .wallet-split div { background: #252931; }

/* ---------- Dark ---------- */
html:is(.is-dark, [data-profile-theme="dark"]) { --us-ink: #f2f3f5; --us-muted: #a9afba; --us-owe: #ff8a80; --us-owed: #6fdc8c; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-page,
html:is(.is-dark, [data-profile-theme="dark"]) .us-sub { background: #0f1115; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.us-card, .money-card, .money-sheet, .money-bal, .money-entries, .money-setup-list) { background: #1b1e24; box-shadow: none; }
html:is(.is-dark, [data-profile-theme="dark"]) .money-card.is-sys { background: #172233; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.us-money-row .mc-ico, .us-money-bar) { background: #252931; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-mini-btn { background: #f2f3f5; color: #111; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-even { background: #1d2a22; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-even.is-down { background: #2a1d1d; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.us-even-wait, .even-check) { background: #252931; }
html:is(.is-dark, [data-profile-theme="dark"]) .even-wait { background: #2b2618; color: #e8cf8a; }
html:is(.is-dark, [data-profile-theme="dark"]) .money-card.is-loan { border-color: #2e323a; background: #1b1e24; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.loan-ico, .loan-tag) { background: #252931; box-shadow: none; color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.loan-acts, .loan-foot) { border-top-color: #2e323a; }
html:is(.is-dark, [data-profile-theme="dark"]) .pic-c-tag { background: rgb(247 165 147 / .14); color: #f7b9a8; }
html:is(.is-dark, [data-profile-theme="dark"]) .pic-c-sub { color: #a1a1aa; }
html:is(.is-dark, [data-profile-theme="dark"]) .loan-link { color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-hero { background: linear-gradient(160deg, #2a2119 0%, #15242b 100%); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-stats div { background: rgb(255 255 255 / .06); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seats::before { border-color: rgb(255 255 255 / .08); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seat.is-on { box-shadow: 0 0 0 4px rgb(255 255 255 / .08), 0 6px 14px rgb(0 0 0 / .3); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seat.is-off { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .18); }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seat.is-pick { outline-color: #f2f3f5; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seat-tip { background: rgb(247 165 147 / .14); color: #f7b9a8; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-seat-tip.is-info { background: rgb(97 200 230 / .14); color: #9ad9ec; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.us-private, .money-ways, .money-opened, .money-rule, .money-opt, .money-toggle, .money-per, .money-note, .money-textarea, .us-row2 button, .money-actions button, .money-seg, .money-whats button, .mc-btn.soft) { background: #252931; color: var(--us-ink); box-shadow: none; }
html:is(.is-dark, [data-profile-theme="dark"]) .money-seg button[aria-pressed="true"],
html:is(.is-dark, [data-profile-theme="dark"]) .money-opt[aria-pressed="true"] { background: #353a44; color: #fff; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.mc-btn, .money-main, .us-row2 .dark, .money-actions .dark) { background: #f2f3f5; color: #111; }
html:is(.is-dark, [data-profile-theme="dark"]) :is(.us-mini span, .us-pays div, .money-setup-row input) { color: var(--us-ink); }
html:is(.is-dark, [data-profile-theme="dark"]) .mc-foot { border-top-color: #2e323a; }
html:is(.is-dark, [data-profile-theme="dark"]) .us-pair-face { border-color: #111; }