/* The floating navigation sits above the iPhone home indicator. Opaque by default. */
.mobile-nav-indicator {display:none}
@media (max-width:760px) {
  .personal-shell .main-shell {
    padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px));
  }
  .personal-shell .mobile-nav {
    left:16px;
    right:16px;
    bottom:max(22px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    height:66px;
    padding:6px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:28px;
    background:#fcfaff;
    box-shadow:0 8px 30px #46296921,inset 0 1px 0 white,inset 0 -1px 1px #ffffff80;
    isolation:isolate;
  }
  .personal-shell .mobile-nav .mobile-nav-indicator {
    display:block;
    position:absolute;
    z-index:-1;
    pointer-events:none;
    top:6px;
    left:calc(6px + (100% - 12px) / 5 * var(--nav-index));
    width:calc((100% - 12px) / 5);
    height:52px;
    border-radius:22px;
    background:linear-gradient(145deg,#fffffff0,#d9c3fa6b);
    box-shadow:inset 0 1px 1px white,0 2px 8px #9b74c414;
  }
  .personal-shell .mobile-nav .mobile-nav-item {
    height:52px;
    min-height:48px;
    min-width:0;
    border-radius:22px;
    color:#796588;
    font-size:10px;
    font-weight:650;
    gap:3px;
    padding:5px 0;
    transition:color .2s,scale .15s;
  }
  .personal-shell .mobile-nav .mobile-nav-item.active {color:#7840cc}
  .personal-shell .mobile-nav .mobile-nav-item .icon {width:22px;height:22px}
  .personal-shell .mobile-nav .nav-add-slot {display:grid;place-items:center;min-width:0}
  .personal-shell .mobile-nav .nav-add {
    width:44px;
    height:44px;
    border-radius:17px;
    background:linear-gradient(140deg,#aa7bef,#8150d7);
    border:1px solid #b799ed;
    box-shadow:inset 0 1px 1px #e3c7ff,0 5px 14px #7945c64a;
    translate:none;
    transform:none;
    transition:scale .15s,box-shadow .15s;
  }
  .personal-shell .mobile-nav .nav-add:active,
  .personal-shell .mobile-nav .mobile-nav-item:active {scale:.94;transform:none}
  .personal-shell .mobile-nav button:focus-visible {outline:2px solid #7840cc;outline-offset:2px}
  .personal-app #toast {bottom:calc(110px + env(safe-area-inset-bottom, 0px))}

  .personal-app .quick-add-modal {background:#fffffff2}
  .personal-app .quick-add-modal .quick-action {background:#f5f0fc;border-color:#eee5f7;border-radius:15px}
  .personal-app .quick-add-modal .quick-action strong {color:#2d203e;font-weight:750}
  .personal-app .quick-add-modal .quick-action small {color:#81718f}
  .personal-app .quick-add-modal .quick-actions .quick-action:first-child {background:var(--purple);border-color:var(--purple)}
  .personal-app .quick-add-modal .quick-actions .quick-action:first-child strong,
  .personal-app .quick-add-modal .quick-actions .quick-action:first-child small,
  .personal-app .quick-add-modal .quick-actions .quick-action:first-child>.icon {color:white}
  .personal-app .quick-add-modal .quick-actions .quick-action:first-child .quick-action-icon {background:#ffffff21;color:white}
  .personal-app .quick-add-modal .quick-new-group {margin-top:14px}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  @media (max-width:760px) {
    .personal-shell .mobile-nav {
      background:rgba(255,255,255,.57);
      backdrop-filter:blur(18px) saturate(155%);
      -webkit-backdrop-filter:blur(18px) saturate(155%);
    }
  }
}
@media (prefers-reduced-transparency:reduce) {
  .personal-shell .mobile-nav {background:#fcfaff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce) {
  .personal-shell .mobile-nav button {transition:none}
  .personal-shell .mobile-nav button:active {scale:1}
}