/* Expenses and Shared expenses (BudgetRollup.swift, SharedBudgetScreen.swift). */
.ex-app .ex-bk { width: 40px; height: 40px; top: 64px; background: rgba(255,255,255,.7); }
.ex-scroll { position: absolute; left: 18px; right: 18px; top: 124px; display: flex; flex-direction: column; gap: 18px; transition: transform .8s cubic-bezier(.3,.8,.3,1); }
.ex-tabs { position: relative; }
.ex-tabs span { position: relative; z-index: 1; transition: opacity .12s ease; }
.ex-tabs span.press { opacity: .6; }
.ex-tabs .pill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .25s cubic-bezier(.3,.9,.3,1); }
.ex-app.shared .ex-tabs .pill { transform: translateX(100%); }
.ex-pane { display: flex; flex-direction: column; gap: 18px; }
.ex-pane.b { display: none; }
.ex-app.shared .ex-pane.a { display: none; }
.ex-app.shared .ex-pane.b { display: flex; animation: ex-in .35s ease; }
@keyframes ex-in { from { opacity: 0; transform: translateY(6px); } }
.ex-note { margin: 0; font-size: 14px; line-height: 17px; color: #000; }
.ex-hero { padding: 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px #E5E8F0; display: flex; flex-direction: column; gap: 16px; }
.ex-hero .r1 { display: flex; gap: 12px; align-items: flex-start; }
.ex-hero .it { width: 48px; height: 48px; border-radius: 16px; background: #7A5AF8; display: grid; place-items: center; flex: none; }
.ex-hero .r1 div b { display: block; font-size: 16px; font-weight: 600; line-height: 19px; color: #11142D; }
.ex-hero .r1 div span { display: block; margin-top: 4px; font-size: 14px; line-height: 17px; color: #6D748A; }
.ex-hero .tot { display: flex; flex-direction: column; gap: 8px; }
.ex-hero .tot b { font-size: 36px; font-weight: 600; line-height: 40px; color: #11142D; letter-spacing: -.3px; }
.ex-hero .cv { border-top: 1px solid #E5E8F0; padding-top: 8px; }
.ex-hero .cv .l { display: flex; align-items: baseline; justify-content: space-between; }
.ex-hero .cv .l b { font-size: 22px; font-weight: 600; color: #11142D; }
.ex-hero .cv .l span { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #7A5AF8; }
.ex-hero .cv p { margin: 8px 0 0; font-size: 13px; line-height: 16px; color: #6D748A; }
.ex-hero .cv p.yl { margin: 0; font-size: 14px; }
.ex-seg { height: 32px; padding: 3px; border-radius: 16px; background: #EEEEEF; display: flex; }
.ex-seg span { flex: 1; display: grid; place-items: center; border-radius: 13px; font-size: 13px; color: #000; }
.ex-seg .on { background: #fff; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ex-sec .sh { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ex-sec .sh b { flex: 1; font-size: 18px; font-weight: 600; color: #11142D; }
.ex-ring { position: relative; width: 120px; height: 120px; margin: 4px auto 30px; }
.ex-ring svg { overflow: visible; }
.ex-ring .sl { fill: none; stroke-width: 16; transition: stroke-width .18s ease, opacity .18s ease; }
.ex-ring.has-sel .sl { opacity: .22; }
.ex-ring.has-sel .sl.on { opacity: 1; stroke-width: 22; }
.ex-ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #7A5AF8; opacity: 0; transition: opacity .18s ease; }
.ex-ring .mid b { font-size: 19px; font-weight: 600; color: #11142D; }
.ex-ring.has-sel .mid { opacity: 1; }
.ex-rows { display: flex; flex-direction: column; gap: 10px; }
.ex-row, .ex-pc { padding: 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #E5E8F0; display: flex; align-items: center; gap: 12px; transition: opacity .18s ease, transform .12s ease; }
.ex-row.dim { opacity: .42; }
.ex-row.press { transform: scale(.98); }
.ex-row .tl { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.ex-row > div, .ex-pc > div { flex: 1; min-width: 0; }
.ex-row b, .ex-pc b { display: block; font-size: 16px; font-weight: 600; line-height: 19px; color: #11142D; }
.ex-row span, .ex-pc > div span { display: block; margin-top: 4px; font-size: 13px; line-height: 16px; color: #6D748A; }
.ex-row em { font-style: normal; font-size: 16px; font-weight: 600; color: #11142D; }
.ex-hint { display: flex; gap: 10px; align-items: flex-start; }
.ex-hint p { flex: 1; margin: 0; font-size: 14px; line-height: 17px; color: #000; }
.ex-hint b { font-size: 14px; font-weight: 600; color: #7A5AF8; white-space: nowrap; }
.av { flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; font-weight: 600; }
.ex-pc .bal { font-style: normal; height: 26px; padding: 0 10px; border-radius: 13px; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.ex-pc .bal.neg { color: #C93B40; background: #FDECEC; }
.ex-pc .bal.pos { color: #1A8A4A; background: #E4F5EA; }
.ex-pc .pair { display: flex; flex: none; }
.ex-pc .pair .av + .av { margin-left: -8px; }
.ex-pc.debt b { font-size: 15px; }
.ex-pc.debt strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; color: #11142D; }
.ex-ring .sl { stroke-linecap: butt; }