/* BitaSolve sculpted morphology layer · reference fidelity pass */
:root{
  --bs-jade:#1E6B5E;
  --bs-jade-light:#5FB8A6;
  --bs-graphite:#22262B;
  --bs-graphite-mist:#4A4F58;
  --bs-pearl:#F4EFE7;
  --bs-pearl-mineral:#E4DED2;
  --bs-silver:#D9D4C7;
  --bs-coral:#D77A6C;
  --bs-champagne:#E2A857;
  --bs-ease:cubic-bezier(.22,1,.36,1);
}

/* The golden rule: sequences must not read as repeated rounded rectangles. */
.card,
.movement-card,
#groupsList>.row,
#homeGroups>.row,
#activityGlobalList>.movement-card,
#monthlyPeriodPanel .period-balance-card,
.plan-card,.pantry-row,.shopping-block,
.field input,.field select,.field textarea{
  border-radius:28px 42px 31px 38px / 34px 27px 43px 30px;
}

/* HERO = a true mineral island, not a card */
.hero{
  min-height:198px;
  border-radius:44px 68px 50px 62px / 50px 42px 68px 54px !important;
  background:
    radial-gradient(ellipse at 78% 8%,rgba(255,255,255,.72) 0 5%,rgba(217,212,199,.72) 6%,transparent 18%),
    radial-gradient(ellipse at 18% 22%,rgba(95,184,166,.55),transparent 31%),
    radial-gradient(ellipse at 75% 85%,rgba(34,38,43,.92),transparent 46%),
    linear-gradient(137deg,#173f39 0%,#1E6B5E 34%,#355d58 54%,#22262B 82%,#3d4248 100%) !important;
  box-shadow:0 18px 46px rgba(30,107,94,.20),0 5px 12px rgba(34,38,43,.14),inset 1px 1px 2px rgba(255,255,255,.58),inset -12px -18px 28px rgba(8,23,22,.22) !important;
  overflow:hidden;
  transform-origin:50% 55%;
}
.hero::before{
  width:42%;height:46%;right:-4%;bottom:-10%;
  border-radius:64% 36% 58% 42% / 45% 62% 38% 55%;
  transform:rotate(-12deg);
  background:linear-gradient(145deg,rgba(244,239,231,.96),rgba(217,212,199,.58) 42%,rgba(74,79,88,.22) 76%,transparent 77%) !important;
  box-shadow:-12px -9px 22px rgba(255,255,255,.10),inset 5px 7px 8px rgba(255,255,255,.42) !important;
}
.hero::after{
  left:auto;right:13%;top:12%;width:64px;height:64px;
  border:0 !important;border-radius:57% 43% 50% 50% / 42% 55% 45% 58%;
  background:radial-gradient(circle at 34% 26%,#fff 0 8%,#f4efe7 24%,#d9d4c7 56%,rgba(217,212,199,.15) 72%,transparent 74%) !important;
  transform:none !important;opacity:.94 !important;
  filter:drop-shadow(0 7px 10px rgba(34,38,43,.18));
}
@media(prefers-reduced-motion:no-preference){.hero{animation:bsHeroBreathe 4s var(--bs-ease) infinite alternate}}
@keyframes bsHeroBreathe{from{transform:scale(1)}to{transform:scale(1.008)}}

/* Home metric islands: intentionally different silhouettes. */
.home-metrics{gap:14px}
.home-metrics>.card{
  min-height:112px;border:1px solid rgba(217,212,199,.72) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(228,222,210,.72)) !important;
  box-shadow:0 8px 20px rgba(34,38,43,.07),inset 1px 1px 2px rgba(255,255,255,.82) !important;
}
.home-metrics>.card:nth-child(1){border-radius:42px 28px 48px 34px / 32px 46px 31px 43px}
.home-metrics>.card:nth-child(2){border-radius:29px 49px 33px 45px / 45px 31px 46px 32px;transform:translateY(5px)}
.home-metrics>.card::before{content:"";position:absolute;inset:7px 12px auto auto;width:28px;height:15px;border-radius:50%;background:linear-gradient(110deg,rgba(255,255,255,.78),rgba(255,255,255,0));transform:rotate(-16deg);pointer-events:none}

/* Quick actions = liquid capsules with slight deformation. */
.home-quick-actions button,.quick-actions button,.period-card-actions button,.period-batch-btn{
  min-height:52px;
  border-radius:999px 999px 999px 999px / 84% 72% 88% 70% !important;
  border:1px solid rgba(217,212,199,.92) !important;
  background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(228,222,210,.67)) !important;
  box-shadow:0 6px 14px rgba(34,38,43,.07),inset 1px 1px 2px rgba(255,255,255,.88),inset -5px -7px 12px rgba(74,79,88,.05) !important;
  transition:transform 120ms var(--bs-ease),border-radius 120ms var(--bs-ease),box-shadow 120ms var(--bs-ease) !important;
}
.home-quick-actions button:nth-child(even){border-radius:999px 999px 999px 999px / 68% 88% 72% 82% !important}
.home-quick-actions button:active,.quick-actions button:active,.period-card-actions button:active{transform:scale(.98);border-radius:999px / 62% 88% 67% 86% !important}

/* Featured household pebble. */
.home-module-card{
  border-radius:46px 30px 58px 34px / 34px 55px 31px 52px !important;
  background:
    radial-gradient(ellipse at 80% 12%,rgba(255,255,255,.38),transparent 20%),
    linear-gradient(135deg,#2f6158,#1E6B5E 48%,#263b3a 86%) !important;
  color:var(--bs-pearl) !important;
  box-shadow:0 13px 30px rgba(30,107,94,.20),inset 1px 1px 2px rgba(255,255,255,.42),inset -10px -12px 20px rgba(34,38,43,.15) !important;
}
.home-module-card .row-title,.home-module-card .kpi-label{color:var(--bs-pearl) !important}.home-module-card .kpi-label{opacity:.78}

/* Group pebbles: four controlled silhouettes repeating only after four items. */
#groupsList>.row,#homeGroups>.row{
  margin:0 0 13px !important;padding:18px 20px !important;
  border:1px solid rgba(217,212,199,.78) !important;
  background:linear-gradient(150deg,rgba(255,255,255,.79),rgba(228,222,210,.68)) !important;
  box-shadow:0 6px 18px rgba(34,38,43,.07),inset 1px 1px 2px rgba(255,255,255,.86) !important;
  overflow:hidden;
}
#groupsList>.row:nth-child(4n+1),#homeGroups>.row:nth-child(4n+1){border-radius:38px 22px 48px 30px / 30px 43px 28px 45px}
#groupsList>.row:nth-child(4n+2),#homeGroups>.row:nth-child(4n+2){border-radius:24px 48px 28px 42px / 42px 29px 46px 31px}
#groupsList>.row:nth-child(4n+3),#homeGroups>.row:nth-child(4n+3){border-radius:47px 34px 24px 50px / 33px 49px 39px 27px}
#groupsList>.row:nth-child(4n),#homeGroups>.row:nth-child(4n){border-radius:29px 39px 51px 25px / 48px 31px 35px 44px}
#groupsList>.row::after,#homeGroups>.row::after{content:"";position:absolute;right:-18px;top:-20px;width:86px;height:58px;border-radius:63% 37% 62% 38%;background:radial-gradient(ellipse at 30% 30%,rgba(95,184,166,.24),rgba(95,184,166,.04) 58%,transparent 60%);pointer-events:none}

/* Movement / Activity rows become individual sculpted pebbles. */
.movement-list-card,#activityGlobalList{background:transparent !important;border:0 !important;box-shadow:none !important;overflow:visible !important}
.movement-card{
  position:relative;margin:0 0 12px !important;padding:16px 18px !important;
  border:1px solid rgba(217,212,199,.82) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(228,222,210,.68)) !important;
  box-shadow:0 7px 18px rgba(34,38,43,.075),inset 1px 1px 2px rgba(255,255,255,.9) !important;
  overflow:hidden;
}
.movement-card:nth-child(4n+1){border-radius:34px 22px 45px 28px / 26px 42px 31px 45px !important}
.movement-card:nth-child(4n+2){border-radius:23px 44px 30px 49px / 42px 28px 47px 34px !important;transform:translateX(3px)}
.movement-card:nth-child(4n+3){border-radius:48px 31px 23px 39px / 31px 47px 40px 27px !important;transform:translateX(-2px)}
.movement-card:nth-child(4n){border-radius:29px 50px 41px 25px / 47px 34px 29px 43px !important}
.movement-card::after{content:"";position:absolute;right:-7px;top:-12px;width:72px;height:45px;border-radius:50%;background:linear-gradient(155deg,rgba(255,255,255,.68),rgba(255,255,255,0));transform:rotate(-18deg);pointer-events:none}
.movement-icon{border-radius:55% 45% 58% 42% / 42% 55% 45% 58% !important;background:linear-gradient(145deg,#5FB8A6,#1E6B5E 62%,#34413f) !important;color:var(--bs-pearl) !important;box-shadow:0 5px 10px rgba(30,107,94,.22),inset 1px 1px 2px rgba(255,255,255,.5) !important}
.movement-icon.carry{background:linear-gradient(145deg,#4d5758,#22262B 70%) !important;color:var(--bs-pearl) !important}

/* Monthly modules: larger pearl mineral islands with distinct shapes. */
#monthlyPeriodPanel .period-balance-list{gap:18px !important}
#monthlyPeriodPanel .period-balance-card{
  position:relative;
  border:1px solid rgba(217,212,199,.88) !important;
  background:linear-gradient(148deg,rgba(255,255,255,.83),rgba(228,222,210,.69)) !important;
  box-shadow:0 9px 24px rgba(34,38,43,.085),inset 1px 1px 2px rgba(255,255,255,.92) !important;
  overflow:hidden;
}
#monthlyPeriodPanel .period-balance-card:nth-child(3n+1){border-radius:42px 26px 53px 33px / 31px 51px 29px 45px !important}
#monthlyPeriodPanel .period-balance-card:nth-child(3n+2){border-radius:27px 52px 35px 44px / 48px 29px 49px 32px !important}
#monthlyPeriodPanel .period-balance-card:nth-child(3n){border-radius:51px 34px 27px 47px / 35px 46px 43px 28px !important}
#monthlyPeriodPanel .period-balance-card::before{content:"";position:absolute;right:-24px;top:-24px;width:122px;height:74px;border-radius:50%;background:radial-gradient(ellipse at 35% 35%,rgba(95,184,166,.16),transparent 68%);pointer-events:none}
#monthlyPeriodPanel .period-flow>div{
  border-radius:999px 999px 999px 999px / 72% 86% 74% 88% !important;
  background:linear-gradient(150deg,rgba(95,184,166,.22),rgba(244,239,231,.82)) !important;
  border:1px solid rgba(30,107,94,.12) !important;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),0 3px 8px rgba(34,38,43,.04) !important;
}
#monthlyPeriodPanel .period-flow>div:nth-child(even){border-radius:999px / 86% 70% 90% 73% !important}
#monthlyPeriodPanel .period-summary-total{
  border-radius:48px 31px 55px 36px / 36px 52px 32px 48px !important;
  background:linear-gradient(135deg,#315f57,#1E6B5E 48%,#293f3c 88%) !important;color:var(--bs-pearl) !important;
  box-shadow:0 12px 30px rgba(30,107,94,.20),inset 1px 1px 2px rgba(255,255,255,.45) !important;
}

/* Group detail: member chips are mineral capsules, hero keeps the sculptural treatment. */
.member-chip{border-radius:999px / 78% 91% 75% 88% !important;background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(228,222,210,.72)) !important;border:1px solid rgba(217,212,199,.8) !important}
#groupDetail>.hero{border-radius:52px 70px 45px 64px / 47px 39px 66px 56px !important}
.group-ledger-tabs{border-radius:999px / 78% 90% 75% 88% !important;background:rgba(228,222,210,.76) !important}
.group-ledger-tabs button{border-radius:999px / 73% 88% 76% 90% !important}
.group-ledger-tabs button.active{background:linear-gradient(145deg,#5FB8A6,#1E6B5E) !important;color:var(--bs-pearl) !important}

/* Forms and modals: sculpted field islands. */
.field input,.field select,.field textarea{
  min-height:52px;
  border-radius:25px 38px 28px 35px / 34px 27px 39px 30px !important;
  border:1px solid rgba(217,212,199,.9) !important;
  background:linear-gradient(150deg,rgba(255,255,255,.84),rgba(228,222,210,.68)) !important;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.96),0 4px 12px rgba(34,38,43,.045) !important;
}
.field:nth-child(even) input,.field:nth-child(even) select,.field:nth-child(even) textarea{border-radius:39px 24px 36px 29px / 28px 41px 29px 38px !important}
.modal-card{
  border-radius:48px 34px 58px 30px / 34px 55px 31px 49px !important;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(228,222,210,.90)) !important;
  box-shadow:0 30px 70px rgba(34,38,43,.24),inset 1px 1px 2px rgba(255,255,255,.96) !important;
}
.btn.primary{
  border-radius:999px / 76% 91% 73% 88% !important;
  background:linear-gradient(145deg,#5FB8A6 0%,#1E6B5E 60%,#184e45 100%) !important;
  color:var(--bs-pearl) !important;
  box-shadow:0 8px 19px rgba(30,107,94,.24),inset 1px 1px 2px rgba(255,255,255,.5),inset -5px -7px 10px rgba(34,38,43,.12) !important;
}
.btn.secondary{border-radius:999px / 84% 70% 90% 74% !important;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(228,222,210,.76)) !important;border:1px solid rgba(217,212,199,.88) !important}
.btn:active{transform:scale(.98);border-radius:999px / 64% 88% 68% 91% !important}

/* Activity filter island more faithful to reference: search + chips feel embedded. */
#activityView .activity-filters{
  border-radius:41px 29px 48px 33px / 31px 46px 35px 42px !important;
  background:linear-gradient(148deg,rgba(255,255,255,.84),rgba(228,222,210,.71)) !important;
  border:1px solid rgba(217,212,199,.84) !important;
  box-shadow:0 8px 22px rgba(34,38,43,.07),inset 1px 1px 2px rgba(255,255,255,.88) !important;
}

/* Profile and auth are mineral islands rather than centered rounded rectangles. */
#profileView>.card,.auth-card{
  border-radius:52px 34px 63px 38px / 41px 59px 37px 52px !important;
  background:linear-gradient(155deg,rgba(255,255,255,.90),rgba(228,222,210,.78)) !important;
  border:1px solid rgba(217,212,199,.9) !important;
  box-shadow:0 18px 44px rgba(34,38,43,.11),inset 1px 1px 2px rgba(255,255,255,.96) !important;
}

/* Floating nav = pearl island with graphite central action. */
.bottomnav{
  border-radius:48px 44px 52px 42px / 40px 52px 42px 48px !important;
  background:rgba(244,239,231,.87) !important;
  border:1px solid rgba(217,212,199,.88) !important;
  box-shadow:0 20px 48px rgba(34,38,43,.16),inset 1px 1px 2px rgba(255,255,255,.94) !important;
}
.fab{
  border-radius:53% 47% 58% 42% / 45% 56% 44% 55% !important;
  background:linear-gradient(145deg,#34413f,#22262B 62%,#1E6B5E) !important;
  box-shadow:0 12px 26px rgba(34,38,43,.26),inset 1px 1px 2px rgba(255,255,255,.42) !important;
}
.navbtn.active{color:var(--bs-jade) !important}

/* Keep geometry premium but readable on narrow screens. */
@media(max-width:620px){
  .hero{min-height:190px;border-radius:40px 56px 43px 52px / 42px 35px 58px 47px !important}
  .home-metrics>.card{min-height:106px}
  .movement-card{padding:15px 14px !important}
  #monthlyPeriodPanel .period-balance-card{border-radius:35px 25px 43px 29px / 28px 39px 31px 36px !important}
  .modal-card{border-radius:38px 28px 44px 25px / 28px 42px 27px 39px !important}
}

@media(prefers-reduced-motion:reduce){.hero{animation:none!important}.movement-card{transform:none!important}}

/* Home hero fidelity pass · use a real SVG silhouette instead of a rounded rectangle. */
#balanceHero{
  position:relative;
  isolation:isolate;
  min-height:238px !important;
  height:clamp(238px,58vw,274px);
  padding:34px 30px 28px 42px !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:
    radial-gradient(ellipse 35% 27% at 83% 7%,rgba(255,255,255,.98) 0 25%,rgba(244,239,231,.98) 26% 40%,rgba(217,212,199,.90) 41% 56%,transparent 57%),
    radial-gradient(ellipse 24% 19% at 5% 91%,rgba(244,239,231,.97) 0 28%,rgba(217,212,199,.91) 29% 45%,rgba(74,79,88,.34) 46% 57%,transparent 58%),
    radial-gradient(ellipse 43% 55% at 17% 18%,rgba(95,184,166,.72),transparent 58%),
    radial-gradient(ellipse 55% 70% at 79% 83%,rgba(34,38,43,.98),transparent 63%),
    linear-gradient(132deg,#163e38 0%,#1E6B5E 32%,#39786d 52%,#2e4644 66%,#22262B 88%,#3e4449 100%) !important;
  box-shadow:none !important;
  filter:drop-shadow(0 16px 24px rgba(30,107,94,.18)) drop-shadow(0 8px 12px rgba(34,38,43,.12));
  -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='M94 45C53 50 26 81 25 122C24 158 45 181 77 195C107 208 114 228 90 250C58 281 67 318 104 338C142 358 190 346 230 331C318 298 400 334 503 330C608 326 681 304 758 320C838 337 910 315 946 266C971 232 961 199 940 172C920 147 918 125 930 96C948 54 922 23 884 18C848 13 821 31 794 46C768 61 743 65 707 60C637 50 584 36 512 39C415 43 330 56 240 47C181 41 135 40 94 45Z'/%3E%3Cellipse fill='black' cx='823' cy='51' rx='116' ry='51'/%3E%3Cellipse fill='black' cx='118' cy='292' rx='96' ry='54'/%3E%3C/svg%3E");
  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='M94 45C53 50 26 81 25 122C24 158 45 181 77 195C107 208 114 228 90 250C58 281 67 318 104 338C142 358 190 346 230 331C318 298 400 334 503 330C608 326 681 304 758 320C838 337 910 315 946 266C971 232 961 199 940 172C920 147 918 125 930 96C948 54 922 23 884 18C848 13 821 31 794 46C768 61 743 65 707 60C637 50 584 36 512 39C415 43 330 56 240 47C181 41 135 40 94 45Z'/%3E%3Cellipse fill='black' cx='823' cy='51' rx='116' ry='51'/%3E%3Cellipse fill='black' cx='118' cy='292' rx='96' ry='54'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
#balanceHero::before{
  content:"" !important;
  position:absolute;
  z-index:0;
  width:52%;height:67%;right:-5%;bottom:-15%;left:auto;top:auto;
  border-radius:68% 32% 56% 44% / 44% 62% 38% 56%;
  background:
    radial-gradient(ellipse at 31% 20%,rgba(255,255,255,.18),transparent 27%),
    linear-gradient(145deg,rgba(77,86,87,.94),rgba(34,38,43,.98) 66%,rgba(19,29,28,.95)) !important;
  box-shadow:inset 4px 5px 8px rgba(255,255,255,.12),inset -12px -13px 18px rgba(0,0,0,.16) !important;
  transform:rotate(-9deg);
  opacity:.96;
}
#balanceHero::after{
  content:"" !important;
  position:absolute;
  z-index:1;
  width:70px;height:70px;right:17%;top:18%;left:auto;bottom:auto;
  border:0 !important;
  border-radius:57% 43% 52% 48% / 44% 58% 42% 56%;
  background:radial-gradient(circle at 32% 25%,#fff 0 9%,#f8f5ef 18%,#F4EFE7 38%,#D9D4C7 69%,#9aa09f 100%) !important;
  box-shadow:inset 5px 5px 8px rgba(255,255,255,.75),inset -7px -8px 12px rgba(74,79,88,.22),0 9px 16px rgba(10,24,22,.22) !important;
  transform:rotate(7deg) !important;
  opacity:1 !important;
}
#balanceHero>small,#balanceHero>.amount,#balanceHero>.sub,#balanceHero>.hero-context,#balanceHero>.hero-actions{position:relative;z-index:2;max-width:76%}
#balanceHero>.amount{font-size:clamp(40px,10vw,50px);line-height:1.02;letter-spacing:-.055em;margin-top:10px}
#balanceHero>.hero-context{margin-top:9px;line-height:1.35}
#balanceHero>.hero-actions{width:76%;margin-top:18px;gap:10px}
#balanceHero>.hero-actions .btn{min-height:46px;padding-left:16px;padding-right:16px}

@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  #balanceHero{clip-path:polygon(8% 4%,72% 5%,79% 0,90% 4%,93% 23%,98% 45%,94% 77%,83% 94%,57% 91%,34% 97%,13% 92%,4% 78%,9% 63%,3% 43%,5% 20%);border-radius:52px 70px 58px 74px / 52px 48px 72px 66px !important}
}

@media(max-width:620px){
  #balanceHero{height:244px;min-height:244px !important;padding:32px 22px 27px 34px !important}
  #balanceHero>small,#balanceHero>.amount,#balanceHero>.sub,#balanceHero>.hero-context,#balanceHero>.hero-actions{max-width:78%}
  #balanceHero>.amount{font-size:40px}
  #balanceHero>.hero-actions{width:78%;margin-top:15px}
  #balanceHero>.hero-actions .btn{font-size:12px;padding-left:12px;padding-right:12px}
}