/* MoneyBuddy ultra-final UX polish: mobile home, picker motion, reward reveals */

:root {
  --mb-app-ease: cubic-bezier(.2,.78,.25,1);
}

/* Small interaction improvements shared across the app. */
button, [role="button"], a {
  -webkit-tap-highlight-color: transparent;
}
button:active, [role="button"]:active {
  transition-duration: 90ms !important;
}

/* Buddy Picker opening/closing motion. */
#buddy-modal {
  transition: opacity 220ms ease !important;
}
#buddy-modal-content {
  transform: translateY(14px) scale(.985);
  opacity: .985;
  transition: transform 300ms var(--mb-app-ease), opacity 220ms ease !important;
  will-change: transform, opacity;
}
#buddy-modal.mb-picker-visible #buddy-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.buddy-card.mb-card-enter {
  opacity: 0;
  transform: translateY(9px) scale(.985);
}
.buddy-card.mb-card-enter.mb-card-entered {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 280ms ease, transform 330ms var(--mb-app-ease), border-color 180ms ease, box-shadow 180ms ease !important;
}
.buddy-card.mb-selected-pop {
  animation: mbBuddySelectedPop 430ms var(--mb-app-ease);
}
@keyframes mbBuddySelectedPop {
  0% { transform: scale(.97); }
  48% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* Atlas reveal should feel like a reward, not an abrupt dialog. */
#atlasUnlockModal {
  z-index: 10090 !important;
  opacity: 0;
  transition: opacity 260ms ease !important;
  background: rgba(12,31,29,.66) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}
#atlasUnlockModal.mb-unlock-visible { opacity: 1; }
#atlasUnlockModal .atlas-reveal-card {
  transform: translateY(18px) scale(.965);
  opacity: .92;
  transition: transform 380ms var(--mb-app-ease), opacity 280ms ease !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(201,162,74,.22), transparent 34%),
    linear-gradient(180deg, #fffefa 0%, #f9f6ed 100%) !important;
  border: 1px solid rgba(201,162,74,.28) !important;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#atlasUnlockModal.mb-unlock-visible .atlas-reveal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#atlasUnlockModal .atlas-reveal-image {
  filter: drop-shadow(0 18px 20px rgba(201,162,74,.16));
  animation: mbRewardFloat 3.2s ease-in-out infinite;
}
body.mb-atlas-modal-open { overflow: hidden !important; }

/* Ember reveal uses the same reward language as Atlas. */
#emberUnlockModal .ember-modal-card {
  transform: translateY(14px) scale(.975);
  opacity: .96;
  transition: transform 340ms var(--mb-app-ease), opacity 260ms ease !important;
}
#emberUnlockModal:not(.opacity-0) .ember-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#emberUnlockModal.ember-reveal-mode .ember-modal-image-wrap:not(.mystery-reward-image) img {
  animation: mbRewardFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 22px rgba(220,115,30,.18));
}
@keyframes mbRewardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Mobile: app-store-like shell without redesigning the dashboard. */
@media (max-width: 767px) {
  html { background: #f4f4ef; }
  body {
    background: linear-gradient(180deg, #faf9f5 0%, #f4f4ef 48%, #f1f2ed 100%) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  header.sticky {
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    background: rgba(250,249,245,.90) !important;
  }
  #mb-main-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 14px !important;
  }
  #mb-main-shell > div {
    gap: 14px !important;
  }
  #moneybuddy-brand-hero,
  #buddyHeroCard,
  #flexible-money-card,
  #safeToSpendCard,
  #where-it-goes-section,
  #money-plant-section,
  #buddy-insight-card,
  #daily-tip-card,
  #upcoming-obligations-card,
  #recent-activity-card,
  #net-worth-section,
  .money-summary-card {
    border-radius: 22px !important;
  }
  #buddyHeroCard,
  #flexible-money-card,
  #safeToSpendCard,
  #money-plant-section {
    border-color: rgba(30,42,58,.09) !important;
  }
  #buddyHeroCard,
  #flexible-money-card,
  #safeToSpendCard {
    box-shadow: 0 16px 36px -28px rgba(30,42,58,.34) !important;
  }
  #money-plant-section {
    box-shadow: 0 14px 32px -28px rgba(24,60,53,.30) !important;
  }
  main button:not(.buddy-card):not(.buddy-picker-close) {
    min-height: 42px;
  }
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS form zoom */
  }

  /* Mobile bottom bar behaves like a native tab bar. */
  #moneyBuddyMobileNav {
    left: 10px !important;
    right: 10px !important;
    bottom: max(9px, env(safe-area-inset-bottom)) !important;
    min-height: 66px !important;
    padding: 7px 8px !important;
    border-radius: 23px !important;
    background: rgba(255,255,255,.91) !important;
    border-color: rgba(30,42,58,.10) !important;
    box-shadow: 0 18px 48px -22px rgba(30,42,58,.38) !important;
    backdrop-filter: blur(22px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
  }
  #moneyBuddyMobileNav button {
    min-height: 50px !important;
    border-radius: 16px !important;
    transition: transform 120ms ease, background 160ms ease, color 160ms ease !important;
  }
  #moneyBuddyMobileNav button:active { transform: scale(.94); }
  #moneyBuddyMobileNav button.is-active:not(.mobile-add) {
    color: #183c35 !important;
    background: rgba(24,60,53,.08) !important;
  }
  #moneyBuddyMobileNav button.mobile-add {
    background: linear-gradient(180deg, #214b42 0%, #183c35 100%) !important;
    box-shadow: 0 12px 24px -16px rgba(24,60,53,.58) !important;
  }

  /* Bottom teaser feels like a campaign card rather than a loose website banner. */
  #hiddenBuddyTeaser {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 20px !important;
  }
  #hiddenBuddyTeaser .hidden-buddy-teaser-button {
    border-radius: 22px !important;
    box-shadow: 0 18px 44px -28px rgba(15,42,37,.48) !important;
  }
  #hiddenBuddyTeaser .hidden-buddy-teaser-button:active {
    transform: scale(.985) !important;
  }

  /* Picker opens like a polished bottom sheet, but still leaves breathing room. */
  #buddy-modal-content {
    max-height: 91dvh !important;
  }
  .buddy-picker-header::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(30,42,58,.16);
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
  }
  .buddy-picker-header {
    position: relative !important;
    padding-top: 21px !important;
  }
}

@media (max-width: 380px) {
  #mb-main-shell { padding-left: 10px !important; padding-right: 10px !important; }
  #moneyBuddyMobileNav { left: 8px !important; right: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #buddy-modal-content,
  .buddy-card.mb-card-enter,
  .buddy-card.mb-card-enter.mb-card-entered,
  #atlasUnlockModal,
  #atlasUnlockModal .atlas-reveal-card,
  #emberUnlockModal .ember-modal-card,
  #atlasUnlockModal .atlas-reveal-image,
  #emberUnlockModal.ember-reveal-mode .ember-modal-image-wrap img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
body.mb-buddy-picker-open { overflow: hidden !important; }
#emberUnlockModal #emberModalContent.mb-reward-content-enter {
  animation: mbRewardContentEnter 430ms var(--mb-app-ease);
}
@keyframes mbRewardContentEnter {
  0% { opacity: .45; transform: translateY(8px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #emberUnlockModal #emberModalContent.mb-reward-content-enter { animation: none !important; }
}

/* ============================================================
   Final Buddy collection alignment + locked reward shimmer
   ============================================================ */
/* Flex wrapping keeps every incomplete final row centered naturally. */
.buddy-picker-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.buddy-picker-grid > .buddy-card {
  width: auto !important;
  flex: 0 0 calc((100% - 42px) / 4) !important;
  max-width: calc((100% - 42px) / 4) !important;
}

/* Locked reward cards get a restrained shimmer. Removing the locked class removes it automatically. */
.buddy-card.locked-buddy-card {
  isolation: isolate !important;
  position: relative !important;
}
.buddy-card.locked-buddy-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -35% -70% !important;
  z-index: 6 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(
    110deg,
    transparent 34%,
    rgba(255,255,255,0.02) 42%,
    rgba(255,246,205,0.28) 49%,
    rgba(255,255,255,0.42) 52%,
    rgba(255,246,205,0.22) 56%,
    transparent 66%
  ) !important;
  transform: translateX(-58%) rotate(4deg);
  animation: mbLockedBuddyShimmer 3.4s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}
@keyframes mbLockedBuddyShimmer {
  0%, 18% { transform: translateX(-62%) rotate(4deg); opacity: 0; }
  24% { opacity: .78; }
  58% { opacity: .72; }
  72%, 100% { transform: translateX(62%) rotate(4deg); opacity: 0; }
}

/* Keep badges and lock text above the shimmer while artwork remains visible beneath it. */
.buddy-card.locked-buddy-card .locked-buddy-topline,
.buddy-card.locked-buddy-card .locked-buddy-lock-row,
.buddy-card.locked-buddy-card .locked-buddy-copy {
  position: relative;
  z-index: 7;
}
.buddy-card.locked-buddy-card .locked-buddy-art-stage {
  z-index: 5;
}

@media (max-width: 900px) and (min-width: 641px) {
  .buddy-picker-grid {
    gap: 14px !important;
  }
  .buddy-picker-grid > .buddy-card {
    flex-basis: calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
  }
}

@media (max-width: 640px) {
  .buddy-picker-grid {
    gap: 10px !important;
  }
  .buddy-picker-grid > .buddy-card {
    flex-basis: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }
  .buddy-card.locked-buddy-card::after {
    animation-duration: 3.8s;
    background: linear-gradient(
      110deg,
      transparent 36%,
      rgba(255,255,255,0.02) 43%,
      rgba(255,246,205,0.24) 49%,
      rgba(255,255,255,0.34) 52%,
      rgba(255,246,205,0.18) 57%,
      transparent 66%
    ) !important;
  }
}

@media (max-width: 380px) {
  .buddy-picker-grid {
    gap: 8px !important;
  }
  .buddy-picker-grid > .buddy-card {
    flex-basis: calc((100% - 8px) / 2) !important;
    max-width: calc((100% - 8px) / 2) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buddy-card.locked-buddy-card::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ============================================================
   Dashboard Buddy presence + mobile nav fit/final interaction polish
   ============================================================ */
/* Make the selected Buddy feel more present on the dashboard. */
#heroBuddyStage {
  max-width: 320px !important;
}
#heroBuddyImg {
  max-height: 320px !important;
}

/* The dashboard Buddy card always inherits the selected Buddy's color family. */
#buddyHeroCard[data-buddy="sidekick"] {
  background: linear-gradient(145deg, #ffffff 0%, #e9f7f1 58%, #d9eee5 100%) !important;
  border-color: rgba(24,60,53,.11) !important;
}
#buddyHeroCard[data-buddy="barnaby"] {
  background: linear-gradient(145deg, #ffffff 0%, #f4eee4 58%, #e8dfd2 100%) !important;
  border-color: rgba(87,65,44,.11) !important;
}
#buddyHeroCard[data-buddy="flora"] {
  background: linear-gradient(145deg, #ffffff 0%, #fbeff3 58%, #f4dfe6 100%) !important;
  border-color: rgba(151,87,111,.10) !important;
}
#buddyHeroCard[data-buddy="bella"] {
  background: linear-gradient(145deg, #ffffff 0%, #f3effb 58%, #e6ddf4 100%) !important;
  border-color: rgba(99,78,140,.10) !important;
}
#buddyHeroCard[data-buddy="penny"] {
  background: linear-gradient(145deg, #ffffff 0%, #fff1e6 58%, #f9dfcb 100%) !important;
  border-color: rgba(178,102,47,.10) !important;
}
#buddyHeroCard[data-buddy="buzz"] {
  background: linear-gradient(145deg, #ffffff 0%, #fff7dd 58%, #f5e8b9 100%) !important;
  border-color: rgba(171,136,44,.12) !important;
}
#buddyHeroCard[data-buddy="leo"] {
  background: linear-gradient(145deg, #ffffff 0%, #edf6e9 58%, #dfeeda 100%) !important;
  border-color: rgba(76,112,60,.10) !important;
}
#buddyHeroCard[data-buddy="atlas"] {
  background: linear-gradient(145deg, #ffffff 0%, #fbf4dc 50%, #efe2b8 100%) !important;
  border-color: rgba(173,133,39,.16) !important;
}
#buddyHeroCard[data-buddy="ember"] {
  background: linear-gradient(145deg, #ffffff 0%, #fff0e3 52%, #ffd9bd 100%) !important;
  border-color: rgba(201,103,40,.13) !important;
}

@media (max-width: 767px) {
  #heroBuddyStage {
    max-width: 188px !important;
    margin: 2px auto 6px !important;
  }
  #heroBuddyImg {
    max-height: 188px !important;
  }

  /* Fit all five mobile actions evenly, including narrow phones. */
  #moneyBuddyMobileNav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 1px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 6px 5px !important;
    min-height: 64px !important;
  }
  #moneyBuddyMobileNav button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 49px !important;
    padding: 4px 1px !important;
    gap: 0 !important;
    border-radius: 14px !important;
    font-size: 8.7px !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
  }
  #moneyBuddyMobileNav button > span:last-child {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #moneyBuddyMobileNav button .material-symbols-outlined {
    font-size: 20px !important;
    line-height: 22px !important;
  }
  #moneyBuddyMobileNav button.mobile-add {
    width: 49px !important;
    height: 49px !important;
    min-height: 49px !important;
    max-width: 49px !important;
    margin: -10px auto 0 !important;
    border-width: 3px !important;
  }
  #moneyBuddyMobileNav button.mobile-add .material-symbols-outlined {
    font-size: 24px !important;
  }
  #moneyBuddyMobileNav button.mobile-add span:last-child {
    font-size: 8px !important;
  }
}

@media (max-width: 360px) {
  #moneyBuddyMobileNav {
    left: 6px !important;
    right: 6px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #moneyBuddyMobileNav button {
    font-size: 8px !important;
    border-radius: 13px !important;
  }
  #moneyBuddyMobileNav button .material-symbols-outlined {
    font-size: 19px !important;
  }
  #moneyBuddyMobileNav button.mobile-add {
    width: 47px !important;
    height: 47px !important;
    min-height: 47px !important;
    max-width: 47px !important;
  }
}



/* ============================================================
   MoneyBuddy premium sign-in / signup experience
   Visual-only upgrade; auth IDs and Supabase flow remain unchanged.
   ============================================================ */
.mb-auth-modal-shell{
  background:rgba(18,39,34,.52)!important;
  backdrop-filter:blur(16px) saturate(.92)!important;
  -webkit-backdrop-filter:blur(16px) saturate(.92)!important;
}
.mb-auth-card-premium{
  width:min(920px,calc(100vw - 24px));
  max-height:min(720px,calc(100vh - 24px));
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);
  overflow:hidden;
  position:relative;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(24,60,53,.10);
  box-shadow:0 35px 90px -34px rgba(10,38,31,.48);
}
.mb-auth-close{
  position:absolute;
  z-index:20;
  top:16px;right:16px;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid rgba(24,60,53,.09);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#50605A;
  box-shadow:0 8px 24px -18px rgba(0,0,0,.32);
  transition:.18s ease;
}
.mb-auth-close:hover{transform:translateY(-1px);background:#fff;color:#183C35}
.mb-auth-close .material-symbols-outlined{font-size:19px}

.mb-auth-brand-panel{
  position:relative;
  overflow:hidden;
  min-height:590px;
  padding:28px;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(circle at 50% 52%,rgba(201,162,74,.18),transparent 15rem),
    linear-gradient(150deg,#173E36 0%,#1C4D42 55%,#142B5C 135%);
}
.mb-auth-brand-panel::after{
  content:"";
  position:absolute;
  width:350px;height:350px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  right:-160px;bottom:-170px;
}
.mb-auth-brand-glow{
  position:absolute;inset:-80px auto auto -120px;
  width:320px;height:320px;border-radius:50%;
  background:rgba(201,162,74,.08);
  filter:blur(10px);
}
.mb-auth-brand-top{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
}
.mb-auth-logo-wrap{
  width:48px;height:48px;
  border-radius:15px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.45);
}
.mb-auth-logo-wrap img{width:100%;height:100%;object-fit:cover}
.mb-auth-beta-pill{
  display:inline-flex;align-items:center;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(235,210,139,.22);
  background:rgba(201,162,74,.10);
  color:#F2DFA6;
  font-size:9px;font-weight:800;letter-spacing:.12em;
}
.mb-auth-brand-copy{position:relative;z-index:3;margin-top:40px}
.mb-auth-eyebrow{
  display:block;
  margin-bottom:9px;
  color:#EBD28A;
  font-size:10px;font-weight:800;letter-spacing:.13em;
}
.mb-auth-brand-copy h2{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1.07;
  font-weight:800;
  letter-spacing:-.045em;
}
.mb-auth-brand-copy p{
  max-width:330px;
  margin:13px 0 0;
  color:rgba(255,255,255,.69);
  font-size:13.5px;
  line-height:1.6;
}
.mb-auth-sidekick-stage{
  position:relative;z-index:2;
  flex:1;
  min-height:245px;
  display:flex;align-items:center;justify-content:center;
}
.mb-auth-sidekick-stage>img{
  position:relative;z-index:4;
  width:190px;height:190px;
  object-fit:contain;
  filter:drop-shadow(0 22px 20px rgba(3,27,21,.25));
}
.mb-auth-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
}
.mb-auth-orbit-one{width:230px;height:230px}
.mb-auth-orbit-two{width:290px;height:290px;border-color:rgba(201,162,74,.10)}
.mb-auth-sidekick-note{
  position:absolute;z-index:5;
  right:-1px;bottom:10px;
  width:205px;
  padding:10px 12px;
  display:flex;gap:9px;align-items:flex-start;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#183C35;
  box-shadow:0 20px 35px -25px rgba(0,0,0,.48);
}
.mb-auth-sidekick-note>.material-symbols-outlined{
  width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:9px;background:#E8F1EE;font-size:16px;
}
.mb-auth-sidekick-note div{display:flex;flex-direction:column}
.mb-auth-sidekick-note strong{font-size:10.5px;line-height:1.35}
.mb-auth-sidekick-note small{margin-top:2px;color:#72807A;font-size:8.8px;line-height:1.35}
.mb-auth-trust-row{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.09);
}
.mb-auth-trust-row>span{
  display:flex;align-items:center;gap:5px;
  color:rgba(255,255,255,.62);
  font-size:9.5px;font-weight:600;
}
.mb-auth-trust-row .material-symbols-outlined{font-size:14px;color:#E5CC83}

.mb-auth-form-panel{
  min-height:590px;
  padding:62px 54px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 90% 0%,rgba(232,241,238,.62),transparent 15rem),
    #FFFDF9;
}
.mb-auth-form-heading{
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
}
.mb-auth-mobile-logo{display:none}
.mb-auth-mini-label{
  display:block;
  margin-bottom:6px;
  color:#9A7B31;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;
}
.mb-auth-form-heading h3,.mb-auth-sent-state h3{
  margin:0;
  color:#183C35;
  font-size:28px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.04em;
}
.mb-auth-intro,.mb-auth-sent-state>p{
  margin:0 0 25px;
  color:#66746E;
  font-size:13.5px;
  line-height:1.65;
}
.mb-auth-field label{
  display:block;
  margin-bottom:7px;
  color:#31463F;
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.025em;
}
.mb-auth-input-wrap{
  min-height:52px;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
  border:1px solid rgba(24,60,53,.14);
  border-radius:15px;
  background:#fff;
  transition:.18s ease;
  box-shadow:0 8px 22px -22px rgba(20,43,92,.55);
}
.mb-auth-input-wrap:focus-within{
  border-color:rgba(24,60,53,.44);
  box-shadow:0 0 0 4px rgba(24,60,53,.07);
}
.mb-auth-input-wrap>.material-symbols-outlined{font-size:18px;color:#82908A}
.mb-auth-input-wrap input{
  width:100%;
  min-width:0;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#1B2925;
  font-size:16px!important;
  padding:0!important;
}
.mb-auth-input-wrap input::placeholder{color:#A2AAA6}
.mb-auth-primary-btn{
  width:100%;
  min-height:52px;
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,#183C35,#24564B);
  color:#fff;
  font-size:13.5px;
  font-weight:750;
  box-shadow:0 16px 26px -19px rgba(24,60,53,.70);
  transition:.18s ease;
}
.mb-auth-primary-btn:hover{transform:translateY(-1px);box-shadow:0 18px 30px -19px rgba(24,60,53,.60)}
.mb-auth-primary-btn:active{transform:scale(.99)}
.mb-auth-primary-btn:disabled{opacity:.68;cursor:wait}
.mb-auth-primary-btn .material-symbols-outlined{font-size:17px}
.mb-auth-spin{animation:mbAuthSpin .9s linear infinite}
@keyframes mbAuthSpin{to{transform:rotate(360deg)}}
.mb-auth-helper{
  margin-top:13px;
  display:flex;align-items:flex-start;gap:7px;
  color:#7A8782;
  font-size:10.5px;line-height:1.45;
}
.mb-auth-helper .material-symbols-outlined{font-size:15px;color:#769A8E;margin-top:1px}
.mb-auth-secondary-btn{
  width:100%;
  margin-top:18px;
  padding:9px;
  color:#6D7974;
  background:transparent;
  border:0;
  font-size:11.5px;
  font-weight:600;
}
.mb-auth-secondary-btn:hover{color:#183C35}
.mb-auth-error{
  margin:11px 0 0;
  padding:10px 12px;
  border:1px solid rgba(185,59,70,.14);
  border-radius:12px;
  background:#FFF0F1;
  color:#A33943;
  font-size:11px;
  line-height:1.45;
}
.mb-auth-sent-state{text-align:left}
.mb-auth-sent-icon{
  width:54px;height:54px;
  margin-bottom:20px;
  display:grid;place-items:center;
  border-radius:17px;
  background:#E6F2ED;
  color:#183C35;
  box-shadow:inset 0 0 0 1px rgba(24,60,53,.06);
}
.mb-auth-sent-icon .material-symbols-outlined{font-size:27px}
.mb-auth-sent-state>p{margin-top:12px}
.mb-auth-email-tip{
  display:flex;align-items:flex-start;gap:8px;
  padding:12px;
  margin:0 0 7px;
  border-radius:13px;
  background:#F7F4E8;
  color:#776B49;
  font-size:10.5px;
  line-height:1.45;
}
.mb-auth-email-tip .material-symbols-outlined{font-size:16px;color:#C09B40}

@media(max-width:760px){
  .mb-auth-modal-shell{padding:10px!important;align-items:flex-end!important}
  .mb-auth-card-premium{
    width:100%;
    max-height:calc(100vh - 10px);
    grid-template-columns:1fr;
    border-radius:26px 26px 18px 18px;
    overflow:auto;
  }
  .mb-auth-brand-panel{display:none}
  .mb-auth-form-panel{
    min-height:0;
    padding:30px 22px 24px;
    background:
      radial-gradient(circle at 80% -10%,rgba(232,241,238,.78),transparent 15rem),
      #FFFDF9;
  }
  .mb-auth-mobile-logo{
    width:46px;height:46px;display:block;flex:0 0 auto;
    overflow:hidden;border-radius:14px;
    box-shadow:0 9px 20px -16px rgba(24,60,53,.4);
  }
  .mb-auth-mobile-logo img{width:100%;height:100%;object-fit:cover}
  .mb-auth-form-heading{padding-right:35px}
  .mb-auth-form-heading h3,.mb-auth-sent-state h3{font-size:25px}
  .mb-auth-intro,.mb-auth-sent-state>p{font-size:13px;margin-bottom:20px}
  .mb-auth-close{top:17px;right:17px}
}
@media(max-width:390px){
  .mb-auth-form-panel{padding:27px 18px 20px}
  .mb-auth-form-heading h3,.mb-auth-sent-state h3{font-size:23px}
}