/* Accounts & Assets cleanup */
#budgetPanel-assets .accountsIntro.compactAccountsIntro{display:none!important}
#budgetPanel-assets .budgetAssetsBlock{margin-top:0!important;padding-top:0!important}
#budgetPanel-assets .assetSubTabs.billAssetsTabsRaised{margin-top:0!important}

/* Cute My BILLingsly header decoration without changing the existing app shell */
.phone>.top{position:relative}
.billTopBrandGroup{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.billTopBrandGroup>.brand{margin:0!important;white-space:nowrap}
.billTopMascot{position:relative;width:48px;height:42px;flex:0 0 48px;margin-left:1px;filter:drop-shadow(0 5px 9px rgba(94,70,255,.28));animation:billTopFloat 4s ease-in-out infinite}
.billTopHead{position:absolute;left:9px;top:6px;width:31px;height:27px;border-radius:12px 12px 11px 11px;background:linear-gradient(145deg,#eff7ff,#a8d1ff 52%,#7e67ef);border:1.5px solid #7079e8;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.billTopFace{position:absolute;inset:5px 4px 4px;border-radius:8px;background:linear-gradient(180deg,#15264a,#0d1830);border:1px solid #4b64bd}
.billTopEye{position:absolute;top:6px;width:4px;height:6px;border-radius:50%;background:#65e1ff;box-shadow:0 0 5px #5edcff}.billTopEye.left{left:6px}.billTopEye.right{right:6px}
.billTopSmile{position:absolute;left:8px;bottom:4px;width:9px;height:4px;border:1px solid #8effd8;border-top:0;border-left-color:transparent;border-right-color:transparent;border-radius:0 0 8px 8px}
.billTopBody{position:absolute;left:16px;top:31px;width:18px;height:9px;border-radius:6px 6px 8px 8px;background:linear-gradient(145deg,#77a1f4,#7859ec);border:1px solid #6e69df}
.billTopAntenna{position:absolute;left:24px;top:0;width:2px;height:7px;border-radius:2px;background:#8f7aff}.billTopAntenna:after{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#ff74c7;box-shadow:0 0 7px rgba(255,116,199,.85)}
.billTopEar{position:absolute;top:14px;width:5px;height:10px;border-radius:5px;background:#766ce3}.billTopEar.left{left:5px}.billTopEar.right{right:5px}
.billTopSpark{position:absolute;font-weight:900;pointer-events:none}.billTopSpark.one{right:0;top:2px;color:#a992ff;font-size:9px}.billTopSpark.two{left:0;bottom:2px;color:#75dcff;font-size:7px}
.billTopCoin{position:absolute;right:1px;bottom:0;width:11px;height:11px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd968,#e7a82f);border:1px solid #ffe58d;color:#6b4300;font-size:6px;font-weight:950;box-shadow:0 0 8px rgba(255,197,74,.32)}
@keyframes billTopFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}

/* Header controls: full-size on normal screens so labels never clip */
.phone>.top .headerPrefs{display:flex!important;align-items:center!important;gap:8px!important;margin-left:auto!important;flex:0 0 auto!important;min-width:max-content}
.phone>.top .headerPrefs select{height:36px!important;margin:0!important;border-radius:10px!important;font-size:12px!important;font-weight:850!important;line-height:1.1!important;padding-top:5px!important;padding-bottom:5px!important}
.phone>.top .headerPrefs #appLanguage{width:82px!important;min-width:82px!important;flex:0 0 82px!important;padding-left:12px!important;padding-right:26px!important}
.phone>.top .headerPrefs #appCurrency,
.phone>.top .headerPrefs #appCurrency.billCurrencyWide{width:96px!important;min-width:96px!important;flex:0 0 96px!important;padding-left:12px!important;padding-right:28px!important;text-overflow:clip!important}
.billTopLogout{height:36px!important;width:auto!important;min-width:78px!important;flex:0 0 auto!important;margin:0!important;padding:5px 12px!important;border-radius:10px!important;border:1px solid rgba(255,116,108,.38)!important;background:rgba(255,116,108,.10)!important;color:#ff9a94!important;font-size:12px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;box-shadow:none!important}
.billTopLogout:hover{background:rgba(255,116,108,.16)!important;border-color:rgba(255,116,108,.55)!important}
.billTopLogout:disabled{opacity:.55!important;cursor:wait!important}

/* Approved shared 3D mascot fallback. This skins legacy robot containers even if older JS is cached. */
.billTopBrandGroup .billTopMascot{order:-1!important;background:url('/billingsly-title-mascot-v1.svg?v=20260828-01') center/contain no-repeat!important}
.billTopBrandGroup .billTopMascot>*:not(.billTopMascotImage){display:none!important}
.billTopMascotImage{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}

.billAuthMascot{background:url('/billingsly-mascot-v2.svg?v=20260828-03') center/contain no-repeat!important}
.billAuthMascot>*:not(.billAuthMascotImage){display:none!important}
.billAuthMascotImage{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}

svg.billCuteRobot{background:url('/billingsly-mascot-v2.svg?v=20260828-03') center/contain no-repeat!important}
svg.billCuteRobot>*{opacity:0!important}
img.billCuteRobot{object-fit:contain!important}

@media(max-width:560px){
  .billTopBrandGroup{gap:4px}
  .billTopMascot{width:40px;height:36px;flex-basis:40px;transform:scale(.9);transform-origin:left center}
  .billTopCoin,.billTopSpark.two{display:none}
  .phone>.top .headerPrefs{gap:5px!important}
  .phone>.top .headerPrefs select{height:32px!important;font-size:11px!important}
  .phone>.top .headerPrefs #appLanguage{width:66px!important;min-width:66px!important;flex-basis:66px!important;padding-left:9px!important;padding-right:22px!important}
  .phone>.top .headerPrefs #appCurrency,
  .phone>.top .headerPrefs #appCurrency.billCurrencyWide{width:82px!important;min-width:82px!important;flex-basis:82px!important;padding-left:9px!important;padding-right:24px!important}
  .billTopLogout{height:32px!important;min-width:68px!important;padding-left:9px!important;padding-right:9px!important;font-size:10.5px!important}
}
@media(max-width:390px){
  .billTopMascot{width:33px;flex-basis:33px;transform:scale(.78)}
  .phone>.top .headerPrefs{gap:4px!important}
  .phone>.top .headerPrefs #appLanguage{width:62px!important;min-width:62px!important;flex-basis:62px!important}
  .phone>.top .headerPrefs #appCurrency,
  .phone>.top .headerPrefs #appCurrency.billCurrencyWide{width:78px!important;min-width:78px!important;flex-basis:78px!important}
  .billTopLogout{min-width:64px!important;padding-left:7px!important;padding-right:7px!important;font-size:10px!important}
}


/* The concierge introduces himself beneath the title. */
.billConciergeHeading{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  margin:12px 0 16px!important;
  min-width:0!important;
  text-align:center;
}
.billConciergeHeading>h1{
  margin:0!important;
  min-width:0!important;
  max-width:100%;
}
.billConciergeMascot{
  display:block!important;
  width:112px!important;
  height:135px!important;
  flex:0 0 auto!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 8px 14px rgba(94,70,255,.28))!important;
}
@media(max-width:560px){
  .billConciergeHeading{gap:10px!important;margin-top:10px!important}
  .billConciergeHeading>h1{font-size:clamp(24px,6.5vw,34px)!important;line-height:1.15!important}
  .billConciergeMascot{width:90px!important;height:108px!important}
}