/* Neutral placeholders use opacity, never dimensions, for motion. */
.loading-line,.loading-avatar,.loading-donut,.loading-mask i { background:var(--ui-skeleton,#e3e5e8); animation:loading-pulse 1.4s ease-in-out infinite; }
.loading-line { display:block; height:12px; width:70%; border-radius:5px; flex-shrink:0; }
.loading-line.short { width:38%; }
.loading-line.balance { width:min(240px,75%); height:48px; margin:20px 0; }
.loading-line.amount { width:66px; margin-left:auto; }
.loading-row { display:flex; align-items:center; gap:14px; min-height:74px; padding:14px 16px; border-bottom:1px solid var(--surface-outline,#f1f2f3); }
.loading-row > div { flex:1; min-width:0; display:grid; gap:10px; }
.loading-avatar { display:block; width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.loading-rows { min-width:0; }
.loading-page { display:grid; gap:24px; }
.loading-household,.loading-panel { padding:24px; border-radius:24px; background:var(--bg,#fafafa); }
.loading-household { min-height:210px; }
.loading-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.loading-people > section,.loading-settings > section { min-width:0; padding:16px 0; }
.loading-settings { display:grid; gap:24px; }
.loading-chart { min-height:300px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; }
.loading-donut { width:min(240px,100%); aspect-ratio:1; border-radius:50%; justify-self:center; mask:radial-gradient(transparent 48%,#000 49%); -webkit-mask:radial-gradient(transparent 48%,#000 49%); }
.loading-table { overflow:hidden; min-height:480px; }
.loading-table > div { display:grid; grid-template-columns:156px; grid-auto-columns:minmax(42px,1fr); grid-auto-flow:column; gap:8px; min-height:25px; padding:6px; border-bottom:1px solid #f0f1f2; }
.loading-table .loading-line { width:80%; height:10px; }
.loading-held { position:relative!important; }
.loading-held > :not(.loading-mask) { visibility:hidden!important; }
.loading-held { color:transparent!important; }
.loading-mask { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; visibility:visible!important; }
.loading-mask i { position:absolute; display:block; }
.loading-inline { display:inline-flex; align-items:center; min-height:1.5em; width:120px; vertical-align:middle; }
.loading-inline .loading-line { width:100%; }
.loading-rate { min-height:40px; display:grid; align-content:center; gap:7px; }
.loading-rate .loading-line { width:150px; max-width:100%; }
.loading-rate .loading-line.short { width:105px; }
#chart-status { min-height:20px; margin:0 0 8px; }
#chart-status:empty { display:block; }
#spending-chart { min-height:340px; }
.emoji-groups { min-height:62px; }
.emoji-catalog-grid { min-height:310px; }
.emoji-current { min-height:20px; }
.emoji-pages { min-height:44px; }
.emoji-pages[hidden] { display:flex!important; visibility:hidden; }
.emoji-loading-tile { height:44px; border-radius:10px; background:var(--ui-skeleton,#e3e5e8); animation:loading-pulse 1.4s ease-in-out infinite; }
@keyframes loading-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
@media(max-width:700px){.loading-people{grid-template-columns:1fr}.loading-people > section+section{display:none}.loading-chart{grid-template-columns:1fr;gap:12px}.loading-donut{width:200px}.loading-chart .loading-rows{width:100%}}
@media(prefers-reduced-motion:reduce){.loading-line,.loading-avatar,.loading-donut,.loading-mask i,.emoji-loading-tile{animation:none;opacity:.7}}

.loading-failed .loading-line,.loading-failed .loading-avatar,.loading-failed .loading-donut { animation:none; opacity:.45; }

.loading-image { background:var(--ui-skeleton,#e3e5e8); animation:loading-pulse 1.4s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){.loading-image{animation:none;}}

.account-rate,#account-rate { min-height:40px; }

.emoji-status { min-height:20px; }
/* Descendant rules must not punch holes through an active mask. */
.loading-held > :not(.loading-mask),.loading-held > :not(.loading-mask) * { visibility:hidden!important; }
.loading-held .loading-mask,.loading-held .loading-mask i { visibility:visible!important; }
.loading-page .loading-row:last-child { border-bottom:0; }
.loading-page .loading-rows { border:1px solid var(--surface-outline,#eff0f2); border-radius:16px; overflow:hidden; background:var(--paper); }
.loading-page-transactions .loading-rows { border:0; border-radius:0; }
.loading-page-transactions .loading-row { border:1px solid var(--surface-outline,#eff0f2); border-radius:16px; margin-bottom:8px; }
.loading-ledger > .loading-line { width:100px; margin-bottom:16px; }
.loading-controls { display:grid; gap:18px; padding:14px; border:1px solid var(--surface-outline,#eff0f2); border-radius:16px; }
.loading-controls > .loading-line { width:100%; height:24px; }
.loading-filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; }
.loading-filter-grid .loading-line { width:100%; height:36px; border-radius:10px; }
.loading-chip-row { display:flex; gap:10px; margin:16px 0 0; }
.loading-chip-row .loading-line { width:80px; height:36px; border-radius:30px; }
.loading-account-groups { display:grid; gap:28px; }
.loading-account-groups section > .loading-line,.loading-settings section > .loading-line { width:100px; margin-bottom:12px; }
.loading-profile .loading-row { min-height:96px; }
.loading-profile .loading-avatar { width:52px; height:52px; }
.loading-settings { gap:24px; }
.loading-settings > section { padding:0; }
.loading-category-toolbar { display:flex; gap:16px; }
.loading-category-toolbar .loading-line { width:50%; height:44px; border-radius:12px; }
@media(min-width:1200px){.loading-page-transactions{grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start;}.loading-filter-grid{grid-template-columns:1fr;}}
@media(max-width:1199px){.loading-page-transactions{gap:40px;}.loading-controls{display:flex;align-items:center;height:48px;padding:12px;}.loading-controls>.loading-line{height:20px;}.loading-filter-grid{display:none;}}
@media(prefers-reduced-motion:reduce){.loading-mask i{animation:none;}}

.loading-mask i.loading-ring { mask:radial-gradient(transparent 48%,#000 49%); -webkit-mask:radial-gradient(transparent 48%,#000 49%); }

.loading-chart-graphic { display:grid; place-items:center; min-height:200px; }
.loading-chart-data { height:48px; margin-top:0; border:0; display:flex; align-items:center; }
.loading-chart-data .loading-line { width:86px; height:10px; }
#chart-total .loading-inline { height:1.18em; min-height:1.18em; vertical-align:top; }

.loading-page-accounts .loading-rows,.loading-page-overview .loading-rows { display:grid; gap:6px; border:0; overflow:visible; background:transparent; }
.loading-page-accounts .loading-row,.loading-page-overview .loading-row { border:0; border-radius:14px; background:var(--bg); }
.loading-page-accounts .loading-avatar { width:40px; height:40px; }
.loading-page-transactions .loading-row { min-height:70px; padding:14px; margin-bottom:4px; }
.loading-page-plans > section:last-child .loading-rows { display:grid; gap:8px; border:0; }
.loading-page-plans > section:last-child .loading-row { min-height:56px; padding:8px 12px; border:0; border-radius:14px; background:var(--bg); }
@media(min-width:1100px){.loading-page-plans > section:last-child .loading-rows{grid-template-columns:repeat(2,minmax(0,1fr));}}

.loading-people { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:18px; }
.loading-audit-row { display:grid; gap:8px; padding:14px 16px; border-bottom:1px solid var(--surface-outline); }

/* Loading follows the same balance → person → accounts → recent order as Home. */
.loading-page-overview { gap:18px; }
.loading-page-overview .loading-household { min-height:160px; padding:clamp(18px,3vw,30px); }
.loading-household-head,.loading-currencies,.loading-owner,.loading-account-pair,.loading-person-tabs { display:flex; align-items:center; }
.loading-household-head,.loading-account-pair { justify-content:space-between; gap:12px; }
.loading-currencies,.loading-owner { gap:8px; }
.loading-line.name { width:76px; max-width:45%; }
.loading-line.currency-pill { width:38px; height:24px; border-radius:14px; }
.loading-page-overview .loading-household .balance { width:min(210px,65%); margin:28px 0 0; }
.loading-page-overview .loading-people > section { padding:0; }
.loading-owner-card { padding:20px; background:var(--bg); border-radius:20px; }
.loading-owner .loading-avatar { width:32px; height:32px; }
.loading-line.owner-balance { width:112px; height:27px; margin:14px 0; }
.loading-account-pairs { display:grid; gap:12px; padding-top:12px; border-top:1px solid var(--surface-outline); }
.loading-recent { margin-top:18px; }
.loading-person-tabs { gap:5px; }
.loading-person-tabs .loading-owner { flex:1; min-width:0; padding:12px; background:var(--bg); border-radius:17px 17px 0 0; }
.loading-person-tabs .loading-avatar { width:24px; height:24px; }
.loading-person-tabs + .loading-people .loading-owner-card { border-top-left-radius:0; border-top-right-radius:0; }
@keyframes placeholder-enter { from {opacity:.86} to {opacity:1} }
@media(prefers-reduced-motion:no-preference){
 :is(.loading-page,.loading-mask,.loading-chart,.loading-table,.loading-rate,.monthly-placeholder,#admin-budget-list > .loading-rows,#action-content .loading-rows,[data-recent-loading],.emoji-catalog-grid:has(.emoji-loading-tile),#entry-plan-preview.is-loading) { animation:placeholder-enter 105ms ease-out 35ms backwards; }
}

.current-recent[data-recent-loading] .loading-rows { display:grid; gap:4px; padding-top:24px; }
.current-recent[data-recent-loading] .loading-row { min-height:66px; border:0; border-radius:14px; background:var(--bg); }

#login[hidden] { display:none; }
#app[data-starting] { visibility:hidden; }
.loading-page-overview .loading-household { background:var(--accent); color:var(--on-accent); }
:is(.loading-household,.monthly-spending,.loading-owner-card,.loading-person-tabs,.household,.person-card) :is(.loading-line,.loading-avatar,.loading-mask i) {
 background:color-mix(in srgb,currentColor 8%,transparent);
 animation:none;
}