/* BitaSolve reference fidelity + legibility pass · mobile first */
:root{
  --bs-jade:#1E6B5E;
  --bs-jade-light:#5FB8A6;
  --bs-graphite:#22262B;
  --bs-graphite-mist:#4A4F58;
  --bs-pearl:#F4EFE7;
  --bs-silver:#D9D4C7;
  --bs-coral:#D77A6C;
  --bs-ease:cubic-bezier(.22,1,.36,1);
}

/* HOME HERO
   The approved reference has a wide mineral island with a protected text basin.
   Decorative pearl/silver masses must never cross the number or action labels. */
#balanceHero{
  min-height:226px!important;
  height:clamp(226px,56vw,252px)!important;
  padding:27px 26px 24px 34px!important;
  background:
    radial-gradient(ellipse 31% 22% at 91% 2%,rgba(255,255,255,.98) 0 24%,rgba(244,239,231,.97) 25% 41%,rgba(217,212,199,.75) 42% 57%,transparent 58%),
    radial-gradient(ellipse 22% 18% at 5% 96%,rgba(244,239,231,.95) 0 27%,rgba(217,212,199,.76) 28% 45%,transparent 46%),
    radial-gradient(ellipse 50% 70% at 17% 18%,rgba(95,184,166,.64),transparent 58%),
    radial-gradient(ellipse 53% 74% at 82% 82%,rgba(34,38,43,.97),transparent 62%),
    linear-gradient(132deg,#173f39 0%,#1E6B5E 34%,#37766c 53%,#2d4946 68%,#22262B 90%)!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 360' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M82 42C46 50 28 82 30 124C31 159 53 183 86 197C111 207 123 223 111 241C95 265 72 278 77 304C84 334 121 349 158 343C205 336 247 315 295 320C391 329 483 340 574 326C665 312 730 306 799 322C863 337 919 309 945 264C966 227 953 194 936 168C921 145 920 121 932 94C950 55 928 25 890 20C851 15 820 36 790 52C754 70 719 61 679 55C600 42 524 35 446 41C352 49 279 60 208 49C158 42 118 36 82 42Z'/%3E%3Cellipse fill='black' cx='842' cy='43' rx='108' ry='45'/%3E%3Cellipse fill='black' cx='112' cy='306' rx='88' ry='48'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 360' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M82 42C46 50 28 82 30 124C31 159 53 183 86 197C111 207 123 223 111 241C95 265 72 278 77 304C84 334 121 349 158 343C205 336 247 315 295 320C391 329 483 340 574 326C665 312 730 306 799 322C863 337 919 309 945 264C966 227 953 194 936 168C921 145 920 121 932 94C950 55 928 25 890 20C851 15 820 36 790 52C754 70 719 61 679 55C600 42 524 35 446 41C352 49 279 60 208 49C158 42 118 36 82 42Z'/%3E%3Cellipse fill='black' cx='842' cy='43' rx='108' ry='45'/%3E%3Cellipse fill='black' cx='112' cy='306' rx='88' ry='48'/%3E%3C/svg%3E")!important;
}
#balanceHero::before{
  width:48%!important;
  height:62%!important;
  right:-3%!important;
  bottom:-12%!important;
  opacity:.9!important;
}
/* Integrated silver/pearl cap: decorative, never on top of the amount. */
#balanceHero::after{
  width:118px!important;
  height:58px!important;
  right:3%!important;
  top:-5px!important;
  border-radius:58% 42% 66% 34% / 49% 61% 39% 51%!important;
  background:
    radial-gradient(ellipse at 30% 24%,rgba(255,255,255,.98) 0 15%,rgba(244,239,231,.98) 28%,rgba(217,212,199,.92) 53%,rgba(114,121,122,.78) 76%,rgba(55,61,64,.78) 100%)!important;
  box-shadow:inset 7px 6px 10px rgba(255,255,255,.72),inset -8px -7px 12px rgba(74,79,88,.22),0 8px 14px rgba(10,24,22,.18)!important;
  transform:rotate(9deg)!important;
}
#balanceHero>small,
#balanceHero>.amount,
#balanceHero>.sub,
#balanceHero>.hero-context,
#balanceHero>.hero-actions{
  position:relative;
  z-index:3;
  max-width:none!important;
}
#balanceHero>small{
  width:68%;
  font-size:11px!important;
  line-height:14px!important;
  letter-spacing:.065em!important;
  white-space:nowrap;
}
#balanceHero>.amount{
  width:69%;
  margin:8px 0 0!important;
  font-size:clamp(35px,9.2vw,45px)!important;
  line-height:.98!important;
  letter-spacing:-.048em!important;
  white-space:nowrap;
  overflow:visible;
  text-shadow:0 2px 9px rgba(8,28,25,.28);
}
#balanceHero>.sub{
  width:70%;
  margin-top:7px!important;
  font-size:15px!important;
  line-height:19px!important;
  font-weight:620!important;
  white-space:nowrap;
}
#balanceHero>.hero-context{
  width:88%;
  margin-top:7px!important;
  font-size:10.5px!important;
  line-height:14px!important;
  white-space:nowrap;
  color:rgba(244,239,231,.82)!important;
}
#balanceHero>.hero-actions{
  width:68%!important;
  max-width:68%!important;
  margin:12px 0 0 8px!important;
  display:grid!important;
  grid-template-columns:1fr 1.12fr!important;
  gap:8px!important;
}
#balanceHero>.hero-actions .btn{
  min-height:38px!important;
  height:38px!important;
  padding:0 11px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:720!important;
  white-space:nowrap;
  border-radius:999px/78% 91% 74% 88%!important;
}
#balanceHero #homeBalanceDetail{
  color:var(--bs-pearl)!important;
  background:rgba(18,52,47,.42)!important;
  border:1px solid rgba(244,239,231,.66)!important;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.16)!important;
}
#balanceHero #homeRegisterExpense{
  color:var(--bs-graphite)!important;
  background:linear-gradient(150deg,#fffdf8,#E4DED2)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 5px 12px rgba(10,24,22,.18),inset 1px 1px 2px #fff!important;
}

/* Home quick actions in the approved references are soft mineral capsules, not square tiles. */
.home-quick-actions{
  gap:8px!important;
  margin-top:14px!important;
}
.home-quick-actions button{
  min-height:58px!important;
  border-radius:48% 52% 46% 54% / 44% 51% 49% 56%!important;
  background:linear-gradient(150deg,rgba(255,255,255,.91),rgba(228,222,210,.72))!important;
  border:1px solid rgba(217,212,199,.82)!important;
  box-shadow:0 6px 14px rgba(34,38,43,.065),inset 1px 1px 2px rgba(255,255,255,.94)!important;
}
.home-quick-actions button:nth-child(even){border-radius:54% 46% 52% 48% / 50% 43% 57% 50%!important}

/* GROUPS WITH BALANCE
   A debt/credit card must never use jade text on a jade highlight. */
#groupsList>.row[data-balance-state="positive"],
#homeGroups>.row[data-balance-state="positive"]{
  background:
    radial-gradient(ellipse at 86% 12%,rgba(255,255,255,.20),transparent 24%),
    linear-gradient(138deg,#315f57,#1E6B5E 53%,#253b39 100%)!important;
  border-color:rgba(95,184,166,.28)!important;
  box-shadow:0 11px 25px rgba(30,107,94,.18),inset 1px 1px 2px rgba(255,255,255,.36)!important;
}
#groupsList>.row[data-balance-state="negative"],
#homeGroups>.row[data-balance-state="negative"]{
  background:
    radial-gradient(ellipse at 86% 12%,rgba(215,122,108,.18),transparent 24%),
    linear-gradient(138deg,#42494b,#22262B 70%,#34383d 100%)!important;
  border-color:rgba(215,122,108,.30)!important;
  box-shadow:0 11px 25px rgba(34,38,43,.18),inset 1px 1px 2px rgba(255,255,255,.22)!important;
}
#groupsList>.row[data-balance-state="positive"] .row-title,
#groupsList>.row[data-balance-state="positive"] .row-sub,
#groupsList>.row[data-balance-state="positive"] .money,
#homeGroups>.row[data-balance-state="positive"] .row-title,
#homeGroups>.row[data-balance-state="positive"] .row-sub,
#homeGroups>.row[data-balance-state="positive"] .money,
#groupsList>.row[data-balance-state="negative"] .row-title,
#groupsList>.row[data-balance-state="negative"] .row-sub,
#groupsList>.row[data-balance-state="negative"] .money,
#homeGroups>.row[data-balance-state="negative"] .row-title,
#homeGroups>.row[data-balance-state="negative"] .row-sub,
#homeGroups>.row[data-balance-state="negative"] .money{
  color:var(--bs-pearl)!important;
}
#groupsList>.row[data-balance-state="positive"] .row-sub,
#homeGroups>.row[data-balance-state="positive"] .row-sub,
#groupsList>.row[data-balance-state="negative"] .row-sub,
#homeGroups>.row[data-balance-state="negative"] .row-sub{opacity:.78}
#groupsList>.row .money,#homeGroups>.row .money{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  margin-left:14px;
  font-size:17px!important;
  line-height:20px!important;
  font-weight:820!important;
  letter-spacing:-.025em;
  text-shadow:none!important;
}
#groupsList>.row[data-balance-state="positive"] .money,
#homeGroups>.row[data-balance-state="positive"] .money,
#groupsList>.row[data-balance-state="negative"] .money,
#homeGroups>.row[data-balance-state="negative"] .money{
  text-shadow:0 1px 5px rgba(0,0,0,.24)!important;
}

/* GROUP DETAIL: force readable balance and actions regardless of inherited button styles. */
#groupDetail>.hero .amount{
  color:var(--bs-pearl)!important;
  text-shadow:0 2px 9px rgba(0,0,0,.26)!important;
  font-weight:760!important;
}
#groupDetail>.hero small,#groupDetail>.hero .sub{
  color:rgba(244,239,231,.92)!important;
}
#groupDetail>.grid.two{
  gap:10px!important;
}
#groupDetail>.grid.two>[data-action="expense-current"],
#groupDetail>.grid.two>[data-action="payment-current"]{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:0 14px!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:760!important;
  white-space:nowrap!important;
  opacity:1!important;
  text-shadow:none!important;
}
#groupDetail>.grid.two>[data-action="expense-current"]{
  color:var(--bs-pearl)!important;
  background:linear-gradient(145deg,#5FB8A6,#1E6B5E 68%,#184e45)!important;
  border:1px solid rgba(95,184,166,.38)!important;
}
#groupDetail>.grid.two>[data-action="payment-current"]{
  color:var(--bs-graphite)!important;
  background:linear-gradient(150deg,#fffdf8,#E4DED2)!important;
  border:1px solid rgba(74,79,88,.14)!important;
  box-shadow:0 6px 14px rgba(34,38,43,.08),inset 1px 1px 2px #fff!important;
}

@media(max-width:420px){
  #balanceHero{
    min-height:218px!important;
    height:218px!important;
    padding:25px 19px 22px 30px!important;
  }
  #balanceHero>.amount{font-size:34px!important;width:72%}
  #balanceHero>.sub{font-size:14px!important;width:72%}
  #balanceHero>.hero-context{font-size:9.8px!important;width:91%}
  #balanceHero>.hero-actions{width:72%!important;max-width:72%!important;margin-top:10px!important}
  #balanceHero>.hero-actions .btn{height:36px!important;min-height:36px!important;font-size:10.5px!important;padding:0 8px!important}
  #balanceHero::after{width:102px!important;height:50px!important;right:2%!important}
  #groupsList>.row .money,#homeGroups>.row .money{font-size:15px!important;margin-left:10px}
}

@media(max-width:360px){
  #balanceHero>.amount{font-size:32px!important}
  #balanceHero>.hero-context{font-size:9.2px!important;letter-spacing:-.01em}
  #balanceHero>.hero-actions{width:76%!important;max-width:76%!important;margin-left:4px!important}
  #groupDetail>.grid.two>[data-action="expense-current"],#groupDetail>.grid.two>[data-action="payment-current"]{font-size:12px!important;padding:0 9px!important}
}