/* [next]/internal/font/google/manrope_5e31c5ce.module.css [app-client] (css) */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/a342834df7752944-s.10ev4cu2inrn-.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/d3fe2f289711ac3f-s.0i6ci0u~g4zml.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/58c4895d0a0ef7cc-s.0x1a9yg0jkq20.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/bfc7db5c00d21bc5-s.0dyk20wuvya7a.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/6ab0db14f70d8ed6-s.0ctuso5mgh_i..woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/a343f882a40d2cc9-s.p.0kho-wj7-y-w1.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope Fallback;
  src: local(Arial);
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0.0%;
  size-adjust: 103.19%;
}

.manrope_5e31c5ce-module__xyu9-q__className {
  font-family: Manrope, Manrope Fallback;
  font-style: normal;
}

.manrope_5e31c5ce-module__xyu9-q__variable {
  --font-display: "Manrope", "Manrope Fallback";
}

/* [next]/internal/font/google/dm_sans_b0be4939.module.css [app-client] (css) */
@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.163v2i5cux7-c.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.0yo6-5yoeeudq.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans Fallback;
  src: local(Arial);
  ascent-override: 94.9%;
  descent-override: 29.66%;
  line-gap-override: 0.0%;
  size-adjust: 104.53%;
}

.dm_sans_b0be4939-module__VEr6JG__className {
  font-family: DM Sans, DM Sans Fallback;
  font-style: normal;
}

.dm_sans_b0be4939-module__VEr6JG__variable {
  --font-body: "DM Sans", "DM Sans Fallback";
}

/* [next]/internal/font/google/outfit_ca35ecd4.module.css [app-client] (css) */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/b2ea385cb5ae8625-s.0kjod.kaq1k69.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/1b99372b3eaef0c8-s.p.0gx2haw2tmll8.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Outfit Fallback;
  src: local(Arial);
  ascent-override: 100.18%;
  descent-override: 26.05%;
  line-gap-override: 0.0%;
  size-adjust: 99.82%;
}

.outfit_ca35ecd4-module__VNkuCW__className {
  font-family: Outfit, Outfit Fallback;
  font-style: normal;
}

.outfit_ca35ecd4-module__VNkuCW__variable {
  --font-outfit: "Outfit", "Outfit Fallback";
}

/* [next]/internal/font/google/nunito_sans_f9894646.module.css [app-client] (css) */
@font-face {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/f813d0b748b050e0-s.0bue79j92ry8p.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/dcd150d580a10316-s.00vt6ovfanaoz.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/d261779aa92de579-s.08vb0en80h4ak.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/24ce79ed121239f3-s.0e7.nfwufgbbc.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/f141b5b7abe57afc-s.p.0-k1k9nod8chc.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Nunito Sans Fallback;
  src: local(Arial);
  ascent-override: 99.71%;
  descent-override: 34.82%;
  line-gap-override: 0.0%;
  size-adjust: 101.39%;
}

.nunito_sans_f9894646-module__7_w0yW__className {
  font-family: Nunito Sans, Nunito Sans Fallback;
  font-style: normal;
}

.nunito_sans_f9894646-module__7_w0yW__variable {
  --font-lender-face: "Nunito Sans", "Nunito Sans Fallback";
}

/* [next]/internal/font/google/nunito_790d427e.module.css [app-client] (css) */
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/224e262ef877bfa4-s.0mo8vqgr8yagc.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7f11d98043fdedc9-s.0r4w1y.tjq0ay.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/e6d00ff86ef9e699-s.0lcb62h0-.jh3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/d8cb5ab3660140cd-s.0ri_id_kcagyz.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/07454f8ad8aaac57-s.p.0tqkxa-w3pk~c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/224e262ef877bfa4-s.0mo8vqgr8yagc.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/7f11d98043fdedc9-s.0r4w1y.tjq0ay.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/e6d00ff86ef9e699-s.0lcb62h0-.jh3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/d8cb5ab3660140cd-s.0ri_id_kcagyz.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/07454f8ad8aaac57-s.p.0tqkxa-w3pk~c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/224e262ef877bfa4-s.0mo8vqgr8yagc.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/7f11d98043fdedc9-s.0r4w1y.tjq0ay.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/e6d00ff86ef9e699-s.0lcb62h0-.jh3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/d8cb5ab3660140cd-s.0ri_id_kcagyz.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/07454f8ad8aaac57-s.p.0tqkxa-w3pk~c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/224e262ef877bfa4-s.0mo8vqgr8yagc.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/7f11d98043fdedc9-s.0r4w1y.tjq0ay.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/e6d00ff86ef9e699-s.0lcb62h0-.jh3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/d8cb5ab3660140cd-s.0ri_id_kcagyz.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/07454f8ad8aaac57-s.p.0tqkxa-w3pk~c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Nunito Fallback;
  src: local(Arial);
  ascent-override: 99.71%;
  descent-override: 34.82%;
  line-gap-override: 0.0%;
  size-adjust: 101.39%;
}

.nunito_790d427e-module__Rkk8Ca__className {
  font-family: Nunito, Nunito Fallback;
  font-style: normal;
}

.nunito_790d427e-module__Rkk8Ca__variable {
  --font-home: "Nunito", "Nunito Fallback";
}

/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-3 {
    margin: calc(var(--spacing) * 3);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-5\! {
    height: calc(var(--spacing) * 5) !important;
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-92 {
    height: calc(var(--spacing) * 92);
  }

  .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-9 {
    padding: calc(var(--spacing) * 9);
  }

  .p-17 {
    padding: calc(var(--spacing) * 17);
  }

  .p-83 {
    padding: calc(var(--spacing) * 83);
  }

  .p-302 {
    padding: calc(var(--spacing) * 302);
  }

  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

:root {
  --ink: #222039;
  --muted: #858198;
  --line: #e9e7ef;
  --violet: #6557d9;
  --violet-soft: #efedff;
  --green: #27a57a;
  --orange: #f5a04a;
  --cream: #faf9f6;
}

* {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: radial-gradient(circle at 18% 0, #eee9ff 0%, #f3f1ec 42% 100%);
}

button, a, input, select, textarea {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  .mobile-nav button {
    flex: 1;
    min-width: 0 !important;
    font-size: 9px !important;
  }

  .mobile-nav span {
    font-size: 18px !important;
  }
}

body {
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  background: none;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  color: inherit;
}

:where(button:not(:disabled)) {
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, filter .12s, box-shadow .12s;
  position: relative;
  overflow: hidden;
}

button:not(:disabled):active {
  filter: brightness(.96);
  transform: scale(.96);
}

.ripple-dot {
  opacity: .28;
  pointer-events: none;
  background: currentColor;
  border-radius: 50%;
  animation: .5s ease-out rippleSpread;
  position: absolute;
  transform: scale(0);
}

@keyframes rippleSpread {
  to {
    opacity: 0;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled) {
    transition: none;
  }

  button:not(:disabled):active {
    filter: none;
    transform: none;
  }

  .ripple-dot {
    display: none;
  }
}

@keyframes springTap {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(.9);
  }

  65% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

button.spring-tap:not(:disabled) {
  animation: .4s cubic-bezier(.34, 1.56, .64, 1) springTap;
}

@media (prefers-reduced-motion: reduce) {
  button.spring-tap {
    animation: none;
  }
}

.money-figure, .net-value, .monthly-summary-block > strong, .progress-amount strong, .donut strong, .allocation-list strong, .goal-row > b, .transaction-list header strong, .bank-interest-preview > strong, .family-visual-grid strong, .compact-records strong, .profile-details b {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1,"lnum" 1;
  letter-spacing: -.025em;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;
}

.app-shell {
  background: radial-gradient(circle at 15% 0%,#f0ecff 0%,var(--cream) 45%,var(--cream) 100%);
  grid-template-columns: 230px 1fr;
  width: min(1500px, 100%);
  min-height: 100dvh;
  margin: auto;
  display: grid;
  position: relative;
  overflow: clip;
}

.app-shell:before, .app-shell:after {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, #ded2ff 0%, #0000 72%);
  border-radius: 50%;
  position: absolute;
}

.app-shell:before {
  opacity: .55;
  width: 440px;
  height: 440px;
  animation: 24s ease-in-out infinite alternate shellDrift1;
  top: -140px;
  left: -110px;
}

.app-shell:after {
  opacity: .4;
  width: 380px;
  height: 380px;
  animation: 28s ease-in-out infinite alternate shellDrift2;
  bottom: -150px;
  right: -100px;
}

@keyframes shellDrift1 {
  from {
    transform: translate(0);
  }

  to {
    transform: translate(26px, 18px);
  }
}

@keyframes shellDrift2 {
  from {
    transform: translate(0);
  }

  to {
    transform: translate(-22px, -14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell:before, .app-shell:after {
    animation: none;
  }
}

.app-shell > * {
  z-index: 1;
  position: relative;
}

.app-shell:has(.modal-backdrop) .mobile-nav {
  z-index: 0;
}

.sidebar {
  border-right: 1px solid var(--line);
  z-index: 5;
  background: #fff;
  flex-direction: column;
  height: 100dvh;
  padding: 30px 20px 24px;
  display: flex;
  position: sticky;
  top: 0;
}

.brand {
  font: 800 21px var(--font-display);
  letter-spacing: -.6px;
  align-items: center;
  gap: 10px;
  padding: 0 10px 38px;
  display: flex;
}

.brand > span:last-child {
  color: #29233f;
  text-shadow: 0 1px #fff, 0 3px 7px #4d427a35;
  transform: translateY(-1px);
}

.auth-brand > span:last-child {
  color: #fff;
  text-shadow: 0 1px #fff5, 0 4px 10px #12102280;
}

.brand-mark {
  background: var(--violet) url("/goalbay-app-icon-v2.png") center/cover no-repeat;
  color: #0000;
  letter-spacing: 0;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 0;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 18px #6557d93d;
}

.loading-brand-icon {
  object-fit: cover;
  border-radius: 17px;
  width: 64px;
  height: 64px;
  animation: 1.2s ease-in-out infinite authPulse;
  display: block;
  box-shadow: 0 12px 30px #6557d93d;
}

.sidebar nav {
  gap: 7px;
  display: grid;
}

.nav-item {
  color: #777387;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  font-weight: 650;
  transition: all .2s;
  display: flex;
}

.nav-item > span:first-child {
  text-align: center;
  width: 20px;
  font-size: 18px;
}

.nav-label {
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.nav-label small {
  letter-spacing: .7px;
  color: #a29cad;
  background: #efedf7;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 8px;
}

.nav-item.active .nav-label small {
  color: #7568c9;
  background: #ddd8ff;
}

.nav-item:hover, .nav-item.active {
  background: var(--violet-soft);
  color: var(--violet);
}

.sidebar-note {
  background: linear-gradient(145deg, #f1efff, #f9f8ff);
  border: 1px solid #e6e1ff;
  border-radius: 17px;
  margin-top: auto;
  padding: 17px;
}

.mini-orbit {
  width: 31px;
  height: 31px;
  color: var(--violet);
  background: #fff;
  border-radius: 10px;
  place-items: center;
  margin-bottom: 11px;
  display: grid;
}

.sidebar-note strong {
  font: 750 13px var(--font-display);
}

.sidebar-note p {
  color: #817c91;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.profile-chip {
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 18px 4px 0;
  display: flex;
}

.avatar {
  color: #fff;
  background: #29263f;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 11px;
  display: grid;
}

.profile-chip > span:nth-child(2) {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.profile-chip strong {
  font-size: 11px;
}

.profile-chip small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 11px;
}

.content {
  align-self: start;
  width: 100%;
  max-width: 1270px;
  margin-inline: auto;
  padding: 31px clamp(25px, 4vw, 65px) 70px;
}

.pull-refresh-indicator {
  justify-content: center;
  align-items: center;
  height: 0;
  transition: height .18s, opacity .18s;
  display: flex;
  overflow: hidden;
}

.pull-refresh-spinner {
  border: 2.5px solid #ded8ea;
  border-top-color: var(--violet);
  border-radius: 50%;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.pull-refresh-spinner.spinning {
  animation: .7s linear infinite pullRefreshSpin;
}

@keyframes pullRefreshSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pull-refresh-spinner.spinning {
    animation: none;
  }
}

.topbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  display: flex;
}

.compact-topbar {
  justify-content: flex-end;
  min-height: 40px;
  margin-bottom: 12px;
}

.eyebrow, .soft-label {
  color: #9c98aa;
  letter-spacing: 1.4px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
}

.topbar h1 {
  font: 750 25px var(--font-display);
  letter-spacing: -.9px;
  margin: 0;
}

.topbar h1 span {
  color: #f0a35a;
  font-size: 17px;
}

.topbar h1 .welcome-prefix, .topbar h1 .welcome-name {
  color: inherit;
  font-size: inherit;
}

.topbar h1 .welcome-name {
  margin-left: .22em;
}

.topbar h1 .welcome-name i {
  color: #f0a35a;
  font-size: 17px;
  font-style: normal;
}

.top-actions {
  gap: 10px;
  display: flex;
}

.icon-button, .add-button, .mobile-profile-button, .mobile-toolbox-button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  height: 40px;
}

.mobile-profile-button {
  color: #fff;
  letter-spacing: .2px;
  background: linear-gradient(145deg, #302a55, #6557d9);
  border-color: #5549bb;
  border-radius: 50%;
  width: 40px;
  font-size: 10px;
  font-weight: 850;
  display: none;
  box-shadow: 0 6px 16px #4037782c;
}

.mobile-toolbox-button {
  color: #6b5bd5;
  width: 40px;
  font-size: 17px;
  display: none;
  box-shadow: 0 5px 14px #40377814;
}

.mobile-toolbox-button.active {
  color: #fff;
  background: var(--violet);
  border-color: var(--violet);
}

.icon-button {
  width: 40px;
  font-size: 19px;
  position: relative;
}

.icon-button i {
  background: #f47464;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.app-mark-corner {
  display: none;
}

.add-button {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  padding: 0 18px;
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 6px 18px #22203920;
}

.hero-grid {
  grid-template-columns: 1.35fr .8fr;
  gap: 17px;
  display: grid;
}

.net-card, .monthly-card, .planner-card, .goals-card, .insight-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
}

.net-card {
  padding: 24px 26px 15px;
  position: relative;
  overflow: hidden;
}

.card-top {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.card-top button {
  cursor: pointer;
  color: #aaa6b7;
  background: none;
  border: 0;
}

.net-value {
  font: 750 31px var(--font-display);
  letter-spacing: -1.6px;
  margin-top: 5px;
}

.gain {
  color: #9a96a6;
  margin-top: 6px;
  font-size: 10px;
}

.gain span {
  color: var(--green);
  background: #e9f7f1;
  border-radius: 6px;
  margin-right: 6px;
  padding: 3px 6px;
  font-weight: 800;
}

.savings-journey {
  background: linear-gradient(145deg, #fbfaff, #f6f3ff);
  border: 1px solid #e8e3f3;
  border-radius: 14px;
  margin-top: 14px;
  padding: 12px 13px 9px;
}

.journey-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.journey-heading > span {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.journey-heading b {
  font-size: 11px;
}

.journey-heading small {
  color: #8d879a;
  font-size: 9px;
  line-height: 1.35;
}

.journey-heading > strong {
  color: var(--violet);
  font: 760 10px var(--font-display);
  flex: none;
}

.journey-chart {
  width: 100%;
  height: 74px;
  margin-top: 5px;
  display: block;
  position: relative;
  overflow: visible;
}

.journey-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.journey-axis {
  stroke: #dcd6ec;
  stroke-width: .7px;
}

.journey-line {
  fill: none;
  stroke: #6557d9;
  stroke-width: 2.3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.journey-point, .journey-point-pulse {
  aspect-ratio: 1;
  box-sizing: border-box;
  background: #fff;
  border: 1.3px solid #6557d9;
  border-radius: 50%;
  width: 8px;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
}

.journey-point.current {
  background: #6557d9;
  border: 1.5px solid #fff;
  width: 9px;
}

.journey-labels {
  color: #8c8698;
  justify-content: space-between;
  margin-top: -3px;
  font-size: 9px;
  font-weight: 750;
  display: flex;
}

.net-details-link {
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 10px;
  padding: 3px 0;
  font-size: 11px;
  font-weight: 800;
}

.net-details-link span {
  margin-left: 7px;
}

.monthly-card {
  padding: 24px;
}

.monthly-card h2 {
  font: 700 15px var(--font-display);
  margin: 3px 0 0;
}

.status-pill {
  color: var(--green);
  background: #e9f7f1;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.monthly-summary-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
  display: grid;
}

.monthly-summary-block {
  background: linear-gradient(145deg, #fff, #faf9ff);
  border: 1px solid #ebe7f2;
  border-radius: 14px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  display: flex;
}

.monthly-summary-block > span {
  color: #9691a2;
  letter-spacing: .8px;
  font-size: 9px;
  font-weight: 850;
}

.monthly-summary-block > strong {
  font: 750 21px var(--font-display);
  letter-spacing: -.7px;
  margin-top: 9px;
}

.monthly-summary-block > small {
  color: #8f8a9b;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
}

.retirement-summary {
  background: linear-gradient(145deg, #fffaf3, #fff);
  border-color: #f2e5d5;
}

.retirement-summary p {
  color: #6f6978;
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.45;
}

.retirement-summary button {
  color: #d57827;
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: auto;
  padding: 7px 0 0;
  font-size: 10px;
  font-weight: 850;
}

.progress-amount {
  align-items: baseline;
  gap: 6px;
  margin-top: 24px;
  display: flex;
}

.progress-amount strong {
  font: 750 22px var(--font-display);
}

.progress-amount span {
  color: var(--muted);
  font-size: 11px;
}

.progress-track, .mini-progress {
  background: #efedf2;
  border-radius: 10px;
  height: 7px;
  overflow: hidden;
}

.progress-track {
  margin: 9px 0 14px;
}

.progress-track span {
  background: linear-gradient(90deg,var(--violet),#8a7ee8);
  border-radius: 10px;
  height: 100%;
  display: block;
}

.monthly-meta {
  color: #898596;
  gap: 16px;
  font-size: 10px;
  display: flex;
}

.monthly-meta span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.monthly-meta b {
  color: var(--ink);
  margin-left: 3px;
}

.dot {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.violet {
  background: var(--violet) !important;
}

.orange {
  background: var(--orange) !important;
}

.green {
  background: var(--green) !important;
}

.text-link {
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 18px;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

.text-link span {
  margin-left: 8px;
}

.planner-card {
  grid-template-columns: .95fr 1.1fr;
  margin-top: 17px;
  display: grid;
  overflow: hidden;
}

.planner-copy {
  background: linear-gradient(145deg, #f9f8ff, #f1effc);
  padding: 31px 33px;
}

.section-tag {
  color: var(--violet);
  letter-spacing: 1px;
  background: #e9e5ff;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 850;
  display: inline-block;
}

.planner-copy h2 {
  font: 750 24px/1.15 var(--font-display);
  letter-spacing: -1px;
  max-width: 330px;
  margin: 14px 0 8px;
}

.planner-copy > p {
  color: #817d90;
  max-width: 350px;
  font-size: 10px;
  line-height: 1.55;
}

.planner-copy label {
  color: #777283;
  margin: 19px 0 6px;
  font-size: 10px;
  font-weight: 750;
  display: block;
}

.salary-input {
  background: #fff;
  border: 1px solid #dbd7e9;
  border-radius: 10px;
  align-items: center;
  width: 230px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  box-shadow: 0 4px 10px #3e376509;
}

.salary-input span {
  color: #817b99;
  font-weight: 750;
}

.salary-input input {
  width: 100%;
  color: var(--ink);
  font: 750 15px var(--font-display);
  background: none;
  border: 0;
  outline: 0;
  padding-left: 7px;
}

.method-tabs {
  grid-template-columns: repeat(3, minmax(0, 93px));
  gap: 7px;
  margin-top: 12px;
  display: grid;
}

.method-tabs button {
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  background: #ffffff80;
  border: 1px solid #dfdbe9;
  border-radius: 9px;
  outline: none;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  display: flex;
}

.method-tabs button.selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet),0 4px 13px #6557d919;
  background: #fff;
}

.method-tabs button:focus-visible {
  box-shadow: 0 0 0 3px #6557d929;
}

.method-tabs button.selected:focus-visible {
  box-shadow: 0 0 0 3px #6557d929, 0 4px 13px #6557d919;
}

.method-tabs b {
  font-size: 11px;
}

.method-tabs small {
  color: #777184;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
}

.plan-result {
  padding: 30px 32px;
}

.result-head {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.result-head span {
  color: #9995a6;
  letter-spacing: 1.1px;
  font-size: 10px;
  font-weight: 800;
}

.result-head h3 {
  font: 750 17px var(--font-display);
  margin: 4px 0 0;
}

.result-head button {
  border: 1px solid var(--line);
  color: #938ea3;
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.allocation-wrap {
  align-items: center;
  gap: 29px;
  margin: 16px 0;
  display: flex;
}

.donut {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 132px;
  padding: 18px;
  transform: rotate(-25deg);
}

.donut > div {
  text-align: center;
  background: #fff;
  border-radius: 50%;
  place-content: center;
  width: 100%;
  height: 100%;
  display: grid;
  transform: rotate(25deg);
}

.donut strong {
  font: 750 14px var(--font-display);
}

.donut small {
  color: #9a96a6;
  margin-top: 1px;
  font-size: 9px;
}

.allocation-list {
  flex: 1;
  gap: 12px;
  display: grid;
}

.allocation-list > div {
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.allocation-list i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.allocation-list span {
  flex-direction: column;
  display: flex;
}

.allocation-list b {
  font-size: 11px;
}

.allocation-list small {
  color: #aaa6b5;
  margin-top: 2px;
  font-size: 9px;
}

.allocation-list strong {
  font: 750 10px var(--font-display);
}

.primary-button {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  width: 100%;
  height: 39px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 7px 17px #6557d93d;
}

.primary-button span {
  float: right;
  margin-right: 4px;
}

.lower-grid {
  grid-template-columns: .8fr 1.35fr;
  align-items: stretch;
  gap: 17px;
  margin-top: 17px;
  display: grid;
}

.lower-grid.empty-goals {
  grid-template-columns: minmax(300px, 480px);
  justify-content: start;
}

.goals-card {
  padding: 20px 23px;
}

.section-head {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.section-head h2 {
  font: 700 15px var(--font-display);
  margin: 3px 0 0;
}

.section-head button {
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 11px;
  font-weight: 800;
}

.goal-list {
  gap: 12px;
  margin-top: 13px;
  display: grid;
}

.goal-row {
  grid-template-columns: 34px 1fr 35px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.goal-icon {
  color: #fff;
  background: var(--violet);
  border-radius: 10px;
  place-items: center;
  width: 33px;
  height: 33px;
  font-size: 14px;
  display: grid;
}

.goal-icon.orange {
  background: var(--orange) !important;
}

.goal-icon.green {
  background: var(--green) !important;
}

.goal-main > div:first-child {
  justify-content: space-between;
  display: flex;
}

.goal-main strong {
  font-size: 11px;
}

.goal-main span {
  color: #aaa6b5;
  font-size: 9px;
}

.mini-progress {
  height: 5px;
  margin: 5px 0 3px;
}

.mini-progress span {
  border-radius: 10px;
  height: 100%;
  display: block;
}

.goal-main small {
  color: #9995a5;
  font-size: 9px;
}

.goal-row > b {
  text-align: right;
  font: 750 10px var(--font-display);
}

.goal-button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  width: 100%;
  padding: 0;
  transition: all .2s;
}

.goal-button:hover {
  transform: translateX(3px);
}

.goal-button .goal-main {
  display: block;
}

.goal-button .goal-main > span:first-child {
  justify-content: space-between;
  display: flex;
}

.goal-button .goal-main > span:first-child > span {
  color: #aaa6b5;
  font-size: 9px;
}

.insight-card {
  background: linear-gradient(150deg, #fff6e8, #fffdf9);
  min-height: 178px;
  padding: 20px 23px;
  position: relative;
  overflow: hidden;
}

.section-tag.warm {
  color: #c87828;
  background: #fff0db;
}

.bulb {
  color: #ed983e;
  background: #ffe9c8;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  display: grid;
  position: absolute;
  top: 19px;
  right: 21px;
  transform: rotate(5deg);
}

.insight-card h2 {
  font: 750 16px/1.2 var(--font-display);
  letter-spacing: -.4px;
  max-width: 250px;
  margin: 25px 0 7px;
}

.insight-card p {
  color: #8b8490;
  max-width: 300px;
  font-size: 11px;
  line-height: 1.5;
}

.insight-card p strong {
  color: #5e586b;
}

.insight-card button {
  color: #cd7a2f;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 850;
}

.insight-card button span {
  margin-left: 7px;
}

.next-step-actions {
  min-width: 0;
}

.next-step-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  display: grid;
}

.compact-step-card {
  min-width: 0;
  min-height: 128px;
  padding: 15px 18px;
}

.compact-step-card .bulb {
  border-radius: 10px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  top: 13px;
  right: 16px;
}

.compact-step-card .bulb .app-icon {
  width: 16px;
  height: 16px;
}

.compact-step-card p {
  min-height: 34px;
  margin: 24px 0 3px;
  font-size: 10px;
}

.saving-step-card {
  background: linear-gradient(145deg, #eaf9f2 0%, #f5fdf9 58%, #fff 100%);
  border-color: #c8eadc;
  box-shadow: 0 6px 16px #2fa47818;
}

.saving-step-card .saving-tag {
  color: #278b67;
  background: #d9f4e8;
}

.saving-step-card .bulb {
  color: #27956c;
  background: #d9f4e8;
}

.saving-step-card button {
  color: #278b67;
}

.mobile-nav {
  display: none;
}

.workspace-view {
  gap: 18px;
  display: grid;
}

.workspace-hero {
  background: linear-gradient(135deg, #f0edff, #fbfaff);
  border: 1px solid #e4e0f3;
  border-radius: 20px;
  min-height: 130px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}

.workspace-hero:after {
  content: "";
  opacity: .6;
  border: 30px solid #dcd6ff;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: -70px;
  right: -45px;
}

.workspace-hero h2 {
  z-index: 1;
  font: 750 20px/1.2 var(--font-display);
  letter-spacing: -.7px;
  margin: 8px 0 5px;
  position: relative;
}

.workspace-hero p {
  z-index: 1;
  color: #7f7a8d;
  max-width: 500px;
  font-size: 10.5px;
  line-height: 1.5;
  position: relative;
}

.workspace-hero > button {
  z-index: 1;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  margin-top: 9px;
  padding: 10px 15px;
  font-size: 10.5px;
  font-weight: 800;
  position: relative;
  box-shadow: 0 8px 18px #6557d936;
}

.protect-paid-this-month {
  z-index: 1;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 640px;
  margin-top: 16px;
  display: grid;
  position: relative;
}

.protect-paid-this-month > div {
  background: #fff;
  border: 1px solid #e4e0f3;
  border-radius: 13px;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 2px 9px;
  padding: 10px 12px;
  display: grid;
  box-shadow: 0 6px 16px #3a34520a;
}

.protect-paid-this-month > div > i {
  background: var(--violet-soft);
  width: 30px;
  height: 30px;
  color: var(--violet);
  border-radius: 10px;
  grid-row: 1 / 3;
  place-items: center;
  font-style: normal;
  display: grid;
}

.protect-paid-this-month .app-icon {
  width: 15px;
  height: 15px;
}

.protect-paid-this-month > div > span {
  color: #8d8999;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: normal;
  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.3;
}

.protect-paid-this-month strong {
  font: 750 14px var(--font-display);
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .protect-paid-this-month {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: 12px;
  }
}

.workspace-cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

.workspace-cards button {
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 17px;
  flex-direction: column;
  padding: 21px;
  transition: all .2s;
  display: flex;
}

.workspace-cards button:hover {
  border-color: #dcd7ef;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px #3a34520d;
}

.workspace-cards button > span {
  background: var(--violet-soft);
  width: 34px;
  height: 34px;
  color: var(--violet);
  border-radius: 10px;
  place-items: center;
  margin-bottom: 22px;
  font-size: 15px;
  display: grid;
}

.workspace-cards small {
  color: #8d8999;
  font-size: 10px;
}

.workspace-cards strong {
  font: 750 15px var(--font-display);
  margin: 5px 0;
}

.workspace-cards em {
  color: var(--green);
  font-size: 9px;
  font-style: normal;
}

.modal-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 50;
  background: #17142978;
  place-items: center;
  padding: 20px;
  animation: .18s fade;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal {
  background: #fff;
  border-radius: 22px;
  width: min(460px, 100%);
  max-height: 88vh;
  padding: 30px;
  animation: .22s rise;
  position: relative;
  overflow: auto;
  box-shadow: 0 30px 80px #15122948;
}

.modal-close {
  color: #c23b30;
  cursor: pointer;
  background: #fdeceb;
  border: 0;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 18px;
}

.modal-close:hover {
  color: #a52e25;
  background: #fadedc;
}

.modal h2 {
  font: 750 22px/1.2 var(--font-display);
  letter-spacing: -.7px;
  margin: 16px 35px 8px 0;
}

.modal > p {
  color: #858092;
  margin: 0 0 20px;
  font-size: 10px;
  line-height: 1.6;
}

.modal-form {
  gap: 13px;
  margin-top: 20px;
  display: grid;
}

.modal-form label {
  color: #716c7e;
  gap: 6px;
  font-size: 13px;
  font-weight: 750;
  display: grid;
}

.modal-form input, .modal-form select {
  width: 100%;
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  outline: 0;
  padding: 0 12px;
  font-size: 11px;
}

.modal-form select, .type-fields select, .dob-selects select, .home-inline-form select, .assignment-goal select, .spend-filter-popover select {
  font-size: 13px !important;
}

.modal-form input:focus, .modal-form select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #6557d914;
}

.money-field {
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  align-items: center;
  padding-left: 12px;
  display: flex;
}

.money-field input {
  border: 0;
}

.modal-primary {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 18px #6557d930;
}

.notice-list, .tracker-list {
  gap: 10px;
  margin: 20px 0;
  display: grid;
}

.notice-list > div {
  background: #f8f7fc;
  border-radius: 12px;
  gap: 11px;
  padding: 13px;
  display: flex;
}

.notice-list i {
  background: var(--violet-soft);
  width: 28px;
  height: 28px;
  color: var(--violet);
  border-radius: 9px;
  place-items: center;
  font-style: normal;
  display: grid;
}

.notice-list span {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.notice-list b {
  font-size: 11px;
}

.notice-list small {
  color: #9691a2;
  font-size: 10px;
}

.tracker-list > div, .plan-breakdown > div, .profile-details > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 11px;
  display: flex;
}

.tracker-list i {
  color: var(--green);
  background: #e8f7f1;
  border-radius: 5px;
  margin-left: 7px;
  padding: 3px 5px;
  font-size: 9px;
  font-style: normal;
}

.tracker-list i.due {
  color: #c97b2d;
  background: #fff0dc;
}

.plan-breakdown, .profile-details {
  margin: 10px 0;
}

.plan-breakdown span, .profile-details span {
  color: #858091;
}

.recommend-box {
  background: #fff8ed;
  border: 1px solid #f7e5ca;
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  display: flex;
}

.recommend-box b {
  font-size: 11px;
}

.recommend-box span {
  color: #8e806f;
  font-size: 10px;
  line-height: 1.5;
}

.disclaimer {
  text-align: center;
  color: #a6a1ad;
  margin-top: 10px;
  font-size: 9px;
  display: block;
}

.goal-options {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
  display: grid;
}

.goal-options button {
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: #faf9fd;
  border-radius: 11px;
  padding: 15px;
  font-size: 11px;
  font-weight: 750;
}

.goal-options span {
  float: right;
  color: var(--violet);
}

.toast {
  z-index: 70;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 750;
  animation: .2s toastRise;
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 12px 30px #18152840;
}

@keyframes toastRise {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }

  to {
    opacity: 1;
    transform: translate(-50%);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notice-list > button {
  text-align: left;
  cursor: pointer;
  background: #f8f7fc;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px;
  display: flex;
}

.notice-list > button > strong {
  color: var(--violet);
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
}

.notice-list > button > i {
  flex: 0 0 28px;
}

.notice-list > button > span {
  min-width: 0;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 78px 1fr;
  }

  .sidebar {
    padding: 25px 12px;
  }

  .brand {
    padding: 0 8px 30px;
  }

  .brand > span:last-child, .nav-label {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 12px;
  }

  .sidebar-note, .profile-chip > span:nth-child(2), .profile-chip b {
    display: none;
  }

  .profile-chip {
    justify-content: center;
  }

  .hero-grid, .lower-grid, .planner-card {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 28px 25px 70px;
  }

  .workspace-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .content {
    padding: 22px 16px 92px;
  }

  .topbar {
    margin-bottom: 14px;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .eyebrow {
    font-size: 9px;
  }

  .add-button {
    display: none;
  }

  .hero-grid {
    gap: 12px;
  }

  .net-card, .monthly-card, .planner-card, .goals-card, .insight-card {
    border-radius: 17px;
  }

  .planner-card {
    margin-top: 12px;
  }

  .planner-copy, .plan-result {
    padding: 25px 22px;
  }

  .planner-copy h2 {
    font-size: 22px;
  }

  .salary-input {
    width: 100%;
  }

  .method-tabs button {
    flex: 1;
  }

  .allocation-wrap {
    gap: 18px;
  }

  .donut {
    width: 115px;
  }

  .lower-grid {
    gap: 12px;
    margin-top: 12px;
  }

  .desktop-step-card {
    display: none;
  }

  .next-step-pair {
    gap: 9px;
    display: grid;
  }

  .compact-step-card {
    min-height: 122px;
    padding: 13px 14px;
  }

  .compact-step-card .bulb {
    width: 28px;
    height: 28px;
    top: 11px;
    right: 12px;
  }

  .compact-step-card p {
    min-height: 33px;
    margin-top: 22px;
  }

  .mobile-nav {
    bottom: calc(10px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    z-index: 10;
    background: #fffffff2;
    border: 1px solid #e7e2ef;
    border-radius: 20px;
    justify-content: space-around;
    height: 58px;
    padding: 6px 6px 7px;
    display: flex;
    position: fixed;
    left: 8px;
    right: 8px;
    box-shadow: 0 14px 30px #382b6624, 0 2px 8px #382b660f;
  }

  .mobile-nav button {
    color: #9b97a7;
    background: none;
    border: 0;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    font-size: 9px;
    transition: color .2s, background .2s, box-shadow .2s, transform .2s;
    display: flex;
    position: relative;
  }

  .mobile-nav button:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
  }

  .mobile-nav span {
    font-size: 17px;
  }

  .mobile-nav button.active {
    color: var(--violet);
    background: #f0edff;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px #6755dc2e, 0 0 16px #8b76ff2e;
  }

  .workspace-hero {
    min-height: 140px;
    padding: 17px 18px;
  }

  .workspace-hero h2 {
    max-width: 270px;
    font-size: 18px;
  }

  .workspace-hero p {
    font-size: 10px;
  }

  .workspace-hero:after {
    width: 120px;
    height: 120px;
    right: -90px;
  }

  .workspace-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .workspace-cards button {
    padding: 15px;
  }

  .workspace-cards button > span {
    margin-bottom: 15px;
  }

  .modal {
    border-radius: 19px;
    padding: 26px 21px;
  }

  .toast {
    text-align: center;
    width: max-content;
    max-width: 90%;
    bottom: 82px;
  }

  .app-shell:after {
    width: 220px;
    height: 220px;
    bottom: -80px;
    right: 0;
  }
}

@media (max-width: 390px) {
  .allocation-wrap {
    align-items: flex-start;
  }

  .donut {
    width: 100px;
  }

  .allocation-list {
    gap: 9px;
  }

  .net-value {
    font-size: 28px;
  }

  .goal-row {
    grid-template-columns: 34px 1fr 28px;
  }

  .monthly-meta {
    gap: 7px;
  }
}

@media (max-width: 620px) {
  .method-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .method-tabs button {
    width: 100%;
    min-height: 57px;
    padding: 10px 9px;
  }

  .method-tabs button:not(.selected) {
    box-shadow: none;
    background: #ffffff80;
    border-color: #dfdbe9;
  }

  .mobile-toolbox-button {
    flex: 0 0 40px;
    place-items: center;
    display: grid;
  }

  .top-actions {
    gap: 7px;
  }

  .topbar h1 {
    white-space: nowrap;
  }

  .icon-button {
    flex: 0 0 40px;
  }
}

.empty-workspace {
  text-align: center;
  background: #fff;
  border: 1px dashed #d9d4e5;
  border-radius: 18px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(190px, 40vh, 420px);
  padding: 28px;
  display: flex;
}

.empty-workspace > span {
  background: var(--violet-soft);
  width: 38px;
  height: 38px;
  color: var(--violet);
  border-radius: 12px;
  place-items: center;
  font-size: 19px;
  display: grid;
}

.empty-workspace h3 {
  font: 750 14px var(--font-display);
  margin: 12px 0 4px;
}

.empty-workspace p {
  color: #9691a1;
  margin: 0;
  font-size: 11px;
}

.auth-loading {
  background: #f4f2ed;
  place-items: center;
  min-height: 100dvh;
  display: grid;
}

.auth-loading .brand-mark {
  animation: 1.2s ease-in-out infinite authPulse;
}

.auth-page {
  background: linear-gradient(160deg, #241f3d 0%, #2f2a52 46%, #423a75 100%);
  flex-direction: column;
  min-height: 100dvh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.auth-page:after {
  content: "";
  opacity: .16;
  pointer-events: none;
  border: 90px solid #7569cf;
  border-radius: 50%;
  width: 520px;
  height: 520px;
  position: absolute;
  top: -230px;
  right: -260px;
}

.auth-page:before {
  content: "";
  opacity: .35;
  pointer-events: none;
  background: radial-gradient(circle, #7f6fe0 0%, #0000 72%);
  border-radius: 50%;
  width: 440px;
  height: 440px;
  position: absolute;
  bottom: -190px;
  left: -200px;
}

.auth-hero {
  z-index: 1;
  flex: none;
  padding: clamp(26px, 6vh, 48px) clamp(24px, 6vw, 56px) clamp(20px, 3.5vh, 30px);
  animation: .5s cubic-bezier(.2, .8, .2, 1) both authRise;
  position: relative;
}

.auth-brand {
  color: #fff;
  padding: 0;
}

.auth-hero h1 {
  color: #fff;
  font: 780 clamp(27px,7vw,42px)/1.06 var(--font-display);
  letter-spacing: -1.5px;
  margin: 16px 0 0;
}

.auth-tags {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.auth-tags span {
  color: #ece9fb;
  letter-spacing: .2px;
  background: #ffffff14;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 750;
}

.auth-hero-extra {
  display: none;
}

.auth-hero-copy {
  color: #d9d3f0;
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: clamp(13px, 2.6vw, 15px);
  line-height: 1.5;
}

.auth-highlights {
  flex-direction: column;
  gap: 10px;
  max-width: 42ch;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.auth-highlights li {
  color: #c8c0e8;
  padding-left: 20px;
  font-size: clamp(12.5px, 2.5vw, 14px);
  line-height: 1.45;
  position: relative;
}

.auth-highlights li:before {
  content: "";
  background: #8f81ef;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: .5em;
  left: 0;
}

.auth-card {
  z-index: 1;
  padding: clamp(18px,4vh,28px) clamp(22px,6vw,50px) calc(22px + env(safe-area-inset-bottom));
  background: none;
  flex: auto;
  animation: .5s cubic-bezier(.2, .8, .2, 1) 80ms both authRise;
  display: flex;
  position: relative;
}

.auth-form-wrap {
  width: min(410px, 100%);
  margin: 0 auto;
}

.auth-page .eyebrow {
  color: #bcb2f0;
}

.auth-page .auth-form-wrap h2 {
  color: #fff;
  font: 760 23px/1.2 var(--font-display);
  letter-spacing: -1px;
  margin: 6px 0 16px;
}

.auth-page .auth-desc {
  color: #fff;
  margin: 6px 0 16px;
}

.auth-page .auth-tabs {
  background: #ffffff12;
  border: 1px solid #ffffff1e;
  border-radius: 11px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  padding: 4px;
  display: grid;
}

.auth-page .auth-tabs button {
  color: #cfc8ec;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  height: 37px;
  font-size: 11px;
  font-weight: 800;
}

.auth-page .auth-tabs button.active {
  color: var(--violet);
  background: #fff;
  box-shadow: 0 4px 12px #2420390c;
}

.auth-page .auth-form label {
  color: #d9d3f0;
}

.auth-page .auth-form input {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff28;
}

.auth-page .auth-form input::placeholder {
  color: #a89fca;
}

.auth-page .auth-form input:focus {
  border-color: #a99aef;
  box-shadow: 0 0 0 3px #a99aef2e;
}

.auth-page .password-toggle {
  color: #cfc8ec;
}

.auth-page .password-toggle:hover, .auth-page .password-toggle:focus-visible {
  color: #fff;
  background: #ffffff1e;
}

.auth-page .auth-error {
  color: #ffc0c0;
  background: #ff6f6f1f;
  border: 1px solid #ff6f6f3a;
}

.auth-page .auth-notice {
  color: #bdf3d2;
  background: #4ade8020;
  border: 1px solid #4ade8038;
}

.auth-page .auth-legal-consent {
  color: #b7aede;
}

.auth-page .auth-legal-consent a, .auth-page .forgot-link, .auth-page .back-to-signin {
  color: #cabdff;
}

.auth-page .auth-submit {
  background: linear-gradient(120deg, #6557d9, #8f81ef, #6557d9) 0 0 / 220% 100%;
  animation: 3.2s ease-in-out infinite authGradientShift;
  box-shadow: 0 10px 26px #6557d950;
}

.auth-page .auth-submit:hover {
  animation-play-state: paused;
  box-shadow: 0 14px 34px #6557d970;
}

@keyframes authGradientShift {
  0%, 100% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }
}

@keyframes authRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-hero, .auth-card, .auth-page .auth-submit {
    animation: none;
  }
}

.auth-form {
  gap: 12px;
  display: grid;
}

.auth-form label {
  color: #656071;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.auth-form input {
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dedbe5;
  border-radius: 10px;
  outline: 0;
  padding: 0 13px;
  font-size: 11px;
}

.password-field {
  display: block;
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 40px;
}

.password-toggle {
  color: #8f89a0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 36px;
  display: grid;
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
}

.password-toggle:hover, .password-toggle:focus-visible {
  color: var(--violet);
  background: #6557d914;
}

.password-toggle .app-icon {
  width: 17px;
  height: 17px;
}

.auth-form input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #6557d914;
}

.auth-submit {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  height: 44px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 9px 22px #6557d938;
}

.auth-submit:disabled {
  opacity: .65;
  cursor: wait;
}

.auth-error {
  color: #bc4e43;
  background: #fff0ee;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
}

.auth-legal-consent {
  color: #a29cad;
  text-align: center;
  margin-top: 14px;
  font-size: 9px;
  line-height: 1.5;
}

.auth-legal-consent a {
  color: var(--violet);
  font-weight: 750;
}

.auth-note {
  color: #a09ba8;
  text-align: center;
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.55;
  display: block;
}

.signout-button {
  color: #a5524c;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e3dfe8;
  border-radius: 10px;
  width: 100%;
  height: 40px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
}

@media (min-width: 760px) {
  .auth-page {
    flex-direction: row;
  }

  .auth-hero {
    flex-direction: column;
    flex: 46%;
    justify-content: center;
    display: flex;
  }

  .auth-card {
    flex: 54%;
    justify-content: center;
    align-items: center;
  }

  .auth-hero h1 {
    font-size: clamp(38px, 4.6vw, 58px);
  }

  .auth-hero-extra {
    display: block;
  }
}

.profile-social-links {
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  display: flex;
}

.profile-social-links a {
  border: 1px solid var(--line);
  color: #6b6577;
  cursor: pointer;
  background: #faf9fd;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  display: grid;
}

.profile-social-links a:hover {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

.profile-social-links .app-icon {
  width: 17px;
  height: 17px;
}

@keyframes authPulse {
  50% {
    opacity: .75;
    transform: scale(1.08);
  }
}

.salary-action {
  cursor: pointer;
  border: 0;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.salary-action:hover {
  background: #dff5eb;
  transform: translateY(-2px);
  box-shadow: 0 7px 16px #27a57a24;
}

.deposit-fields {
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  display: grid;
}

.deposit-fields label:first-child {
  grid-column: 1 / -1;
}

.edit-profile-button {
  width: 100%;
  height: 40px;
  color: var(--violet);
  cursor: pointer;
  background: #f8f7fc;
  border: 1px solid #dcd7e9;
  border-radius: 10px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
}

.tracker-list > div > span:first-child {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.tracker-list > div > span:first-child small {
  color: #9994a5;
  font-size: 9px;
}

.welcome-night {
  z-index: 100;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #34305c, #17162c 68%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: 2s both welcomeScene;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.welcome-night:before, .welcome-night:after {
  content: "";
  border: 1px solid #8a80dc44;
  border-radius: 50%;
  width: 360px;
  height: 360px;
  position: absolute;
}

.welcome-night:before {
  transform: scale(1.4);
}

.welcome-night:after {
  transform: scale(.75);
}

.welcome-night .stars {
  color: #e7dba0;
  letter-spacing: 18px;
  font-size: 18px;
  animation: 1s ease-in-out infinite alternate twinkle;
  position: absolute;
  top: 13%;
}

.welcome-night .moon {
  color: #5d5596;
  z-index: 1;
  background: #fff7d6;
  border-radius: 50%;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 26px;
  font-size: 58px;
  display: grid;
  position: relative;
  box-shadow: 0 0 45px #fff1a75c;
}

.welcome-night p {
  color: #c9c5df;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  position: relative;
}

.welcome-night h2 {
  font: 780 39px var(--font-display);
  letter-spacing: -1.5px;
  z-index: 1;
  margin: 5px 0;
  position: relative;
}

.welcome-night small {
  color: #9993bc;
  z-index: 1;
  font-size: 11px;
  position: relative;
}

button {
  transition: transform .18s, box-shadow .18s, background-color .18s, border-color .18s, color .18s;
}

button:not(:disabled):active {
  transform: translateY(0)scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    transform: translateY(-2px);
  }

  .nav-item:hover, .method-tabs button:hover, .goal-options button:hover, .edit-profile-button:hover, .signout-button:hover {
    box-shadow: 0 8px 20px #3c365615;
  }

  .method-tabs button.selected:hover {
    box-shadow: 0 0 0 1px var(--violet),0 8px 20px #3c365615;
  }

  .primary-button:hover, .modal-primary:hover, .auth-submit:hover, .add-button:hover {
    filter: saturate(1.08);
    box-shadow: 0 12px 26px #6557d94a;
  }
}

@keyframes welcomeScene {
  0% {
    opacity: 0;
  }

  12%, 78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes twinkle {
  from {
    opacity: .45;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (max-width: 520px) {
  .deposit-fields {
    grid-template-columns: 1fr;
  }

  .deposit-fields label:first-child {
    grid-column: auto;
  }

  .welcome-night h2 {
    font-size: 32px;
  }
}

.field-help {
  color: #9a94a4;
  margin-top: -5px;
  font-size: 10px;
  line-height: 1.45;
}

.goal-create {
  background: #d88735;
  box-shadow: 0 8px 18px #d8873530;
}

.goal-detail-list {
  gap: 8px;
  margin: 18px 0;
  display: grid;
}

.goal-detail-list > div {
  background: #fffaf2;
  border: 1px solid #eee7dc;
  border-radius: 11px;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 13px;
  display: flex;
}

.goal-detail-list span, .goal-detail-list strong {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.goal-detail-list b {
  font-size: 11px;
}

.goal-detail-list small {
  color: #96909e;
  font-size: 9px;
  font-weight: 500;
}

.goal-detail-list strong {
  text-align: right;
  color: var(--violet);
  font: 750 11px var(--font-display);
}

.goal-detail-list strong small {
  white-space: nowrap;
}

.tracker-list small {
  line-height: 1.4;
}

@media (max-width: 900px) {
  .lower-grid.empty-goals {
    grid-template-columns: 1fr;
  }
}

.goals-at-top {
  margin-top: 0;
  margin-bottom: 17px;
}

.salary-locked {
  cursor: not-allowed;
  background: #f5f3f8;
  border-color: #e1ddea;
}

.salary-locked input {
  cursor: not-allowed;
}

.salary-locked > b {
  color: #9a94a6;
  letter-spacing: .7px;
  background: #e9e6ef;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 8px;
}

.welcome-night {
  animation-duration: 3s;
}

.delete-account-button, .delete-primary, .cancel-button {
  cursor: pointer;
  border-radius: 10px;
  width: 100%;
  min-height: 40px;
  font-size: 11px;
  font-weight: 800;
}

.delete-account-button {
  color: #b64d44;
  background: #fff8f7;
  border: 1px solid #f0cbc7;
  margin-top: 8px;
}

.delete-primary {
  color: #fff;
  background: #b94b42;
  border: 0;
  margin-top: 18px;
  box-shadow: 0 8px 18px #b94b4230;
}

.delete-primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.cancel-button {
  color: #6f697a;
  background: #fff;
  border: 1px solid #ddd9e6;
  margin-top: 8px;
}

.danger-tag {
  color: #ad423a;
  background: #ffebe9;
}

.danger-notice {
  background: #fff6f5;
  border: 1px solid #f1cfcb;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  display: flex;
}

.danger-notice b {
  color: #a8443d;
  font-size: 11px;
}

.danger-notice span {
  color: #8b7472;
  font-size: 10px;
  line-height: 1.45;
}

.security-sentence {
  color: #fff;
  font: 750 13px var(--font-display);
  letter-spacing: .2px;
  -webkit-user-select: all;
  user-select: all;
  background: #2d293b;
  border-radius: 10px;
  margin: 16px 0;
  padding: 13px 15px;
}

.security-input {
  color: #716c7e;
  gap: 6px;
  font-size: 10px;
  font-weight: 750;
  display: grid;
}

.security-input input {
  width: 100%;
  height: 42px;
  color: var(--ink);
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  outline: 0;
  padding: 0 12px;
}

.security-input input:focus {
  border-color: #b94b42;
  box-shadow: 0 0 0 3px #b94b4215;
}

.mobile-nav button {
  position: relative;
}

.mobile-nav button > small {
  letter-spacing: .4px;
  color: #8c84a0;
  background: #efedf7;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 7px;
  position: absolute;
  top: 1px;
  right: 0;
}

.percentage-field {
  align-items: center;
  display: flex;
  position: relative;
}

.percentage-field input {
  padding-right: 34px;
}

.percentage-field span {
  color: #777184;
  pointer-events: none;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  right: 12px;
}

.workspace-hero {
  box-sizing: border-box;
  width: 100%;
  height: 130px;
  min-height: 0;
}

.auth-note {
  margin-top: 7px;
}

@media (max-width: 620px) {
  .workspace-hero {
    height: 140px;
    min-height: 0;
  }
}

.welcome-night.early-morning {
  background: radial-gradient(circle at 50% 25%, #ffe8c7, #a785b8 48%, #51466f 100%);
}

.welcome-night.afternoon {
  background: radial-gradient(circle at 50% 24%, #fff2ae, #75b8db 48%, #4d72a4 100%);
}

.welcome-night.evening {
  background: radial-gradient(circle at 50% 26%, #ffc27d, #9a557b 50%, #30294d 100%);
}

.welcome-night.night {
  background: radial-gradient(circle at 50% 30%, #34305c, #17162c 68%);
}

.welcome-night.early-morning:before, .welcome-night.early-morning:after {
  border-color: #fff4d05c;
}

.welcome-night.afternoon:before, .welcome-night.afternoon:after {
  border-color: #fff7c166;
}

.welcome-night.evening:before, .welcome-night.evening:after {
  border-color: #ffd2a352;
}

.welcome-night.early-morning .moon {
  color: #d57b48;
  background: #fff5d9;
  box-shadow: 0 0 52px #ffd3948c;
}

.welcome-night.afternoon .moon {
  color: #dc9030;
  background: #fff8be;
  box-shadow: 0 0 58px #fff1a6a3;
}

.welcome-night.evening .moon {
  color: #70436c;
  background: #ffd2a7;
  box-shadow: 0 0 52px #ffb36a75;
}

.welcome-night.early-morning p, .welcome-night.early-morning small, .welcome-night.afternoon p, .welcome-night.afternoon small {
  color: #fffdf4;
}

.welcome-night.evening p, .welcome-night.evening small {
  color: #f8dce6;
}

.type-fields {
  background: #faf9fd;
  border: 1px solid #e7e2ef;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  padding: 14px;
  display: grid;
}

.type-fields label:first-child {
  grid-column: 1 / -1;
}

.type-note {
  color: #8f8999;
  grid-column: 1 / -1;
  font-size: 9px;
  line-height: 1.45;
}

.saving-picker {
  gap: 8px;
  max-height: 300px;
  margin: 18px 0;
  display: grid;
  overflow: auto;
}

.saving-picker label {
  cursor: pointer;
  border: 1px solid #e3dfea;
  border-radius: 11px;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.saving-picker label.selected {
  border-color: var(--violet);
  background: #f5f2ff;
}

.saving-picker input {
  accent-color: var(--violet);
}

.saving-picker span {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.saving-picker b, .saving-picker strong {
  font-size: 11px;
}

.saving-picker small {
  color: #918b9b;
  font-size: 9px;
}

.empty-picker {
  text-align: center;
  background: #faf9fd;
  border: 1px dashed #dcd7e7;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  margin: 18px 0;
  padding: 20px;
  display: flex;
}

.empty-picker b {
  font-size: 10px;
}

.empty-picker span {
  color: #918b9b;
  font-size: 10px;
}

.transaction-list {
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.transaction-list article {
  background: #fff;
  border: 1px solid #e4dfeb;
  border-radius: 14px;
  padding: 15px;
}

.transaction-list header {
  border-bottom: 1px solid #eeeaf2;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  display: flex;
}

.transaction-list header span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.transaction-list header b {
  font-size: 11px;
}

.transaction-list header small {
  color: #8f8998;
  font-size: 9px;
}

.transaction-list header strong {
  font: 750 13px var(--font-display);
}

.transaction-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding-top: 12px;
  display: grid;
}

.transaction-grid > div {
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.transaction-grid span {
  color: #8e8898;
}

.transaction-grid b {
  text-align: right;
  color: #4e4959;
}

.bank-interest-preview {
  color: #4b6558;
  background: linear-gradient(145deg, #f1fbf6, #fbfffd);
  border: 1px solid #d8eadf;
  border-radius: 12px;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.bank-interest-preview > span {
  color: #25835c;
  letter-spacing: .7px;
  font-size: 8px;
  font-weight: 850;
}

.bank-interest-preview > strong {
  color: #176b4a;
  font: 750 17px var(--font-display);
}

.bank-interest-preview p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.bank-interest-preview small {
  color: #788a80;
  font-size: 8px;
  line-height: 1.45;
}

.tenure-field {
  gap: 6px;
  display: grid;
}

.tenure-input {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  display: grid;
  position: relative;
}

.tenure-input > input {
  grid-column: 1 / -1;
  padding-right: 128px;
}

.tenure-unit-toggle {
  background: #f1eef6;
  border-radius: 7px;
  padding: 2px;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.tenure-unit-toggle button {
  color: #8a8494;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  height: 28px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 800;
}

.tenure-unit-toggle button.active {
  color: var(--violet);
  background: #fff;
  box-shadow: 0 2px 7px #3b31531a;
}

.tenure-input > small {
  color: #9892a1;
  grid-column: 1 / -1;
  font-size: 8px;
  font-weight: 500;
}

.tenure-input > input[type="number"] {
  appearance: textfield;
}

.tenure-input > input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.tenure-input > input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

@media (max-width: 520px) {
  .type-fields, .transaction-grid {
    grid-template-columns: 1fr;
  }

  .type-fields label:first-child {
    grid-column: auto;
  }
}

.optional-label {
  color: #9a94a6;
  margin-left: 5px;
  font-size: 9px;
  font-weight: 600;
  display: inline;
}

.profile-help {
  color: #9892a1;
  margin-top: -1px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;
}

.contact-us-button {
  width: 100%;
  height: 40px;
  color: var(--violet);
  background: #fff;
  border: 1px solid #dcd7e9;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  display: flex;
}

.contact-us-button:hover {
  background: #faf9ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px #6755dc18;
}

.modal-form, .modal-form label, .type-fields, .type-fields label, .money-field, .percentage-field {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.modal-form input, .modal-form select, .type-fields input, .type-fields select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.modal-form input[type="date"], .type-fields input[type="date"] {
  appearance: none;
  display: block;
}

.active-plan-summary {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
  display: grid;
}

.active-plan-summary > div {
  background: #faf9fd;
  border: 1px solid #e5e0ef;
  border-radius: 11px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

.active-plan-summary span {
  color: #8c8696;
  font-size: 9px;
}

.active-plan-summary b {
  font-size: 10px;
}

.plan-health {
  background: #f1faf6;
  border: 1px solid #cde9dc;
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
  padding: 14px;
  display: flex;
}

.plan-health b {
  color: #28745b;
  font-size: 11px;
}

.plan-health span {
  color: #70847c;
  font-size: 10px;
  line-height: 1.5;
}

.plan-health.attention {
  background: #fff8ee;
  border-color: #f0d4ad;
}

.plan-health.attention b {
  color: #a86622;
}

.plan-health.attention span {
  color: #8d765e;
}

@media (max-width: 520px) {
  .active-plan-summary {
    grid-template-columns: 1fr 1fr;
  }

  .modal-form input[type="date"], .type-fields input[type="date"] {
    font-size: 16px;
  }
}

.notification-button {
  position: relative;
}

.notification-dot {
  background: #ef6f5e;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 1.65s ease-in-out infinite notificationGlow;
  position: absolute;
  top: 5px;
  right: 5px;
  box-shadow: 0 0 0 2px #ef6f5e36;
}

.modal-back {
  width: 31px;
  height: 31px;
  color: var(--violet);
  cursor: pointer;
  z-index: 2;
  background: #fff;
  border: 1px solid #e4dfeb;
  border-radius: 50%;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 16px;
  left: 18px;
}

.modal:has(.modal-back) > .section-tag {
  margin-left: 40px;
}

.modal:has(.modal-back) > h2 {
  margin-left: 40px;
}

.goal-edit-action {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  margin-top: 18px;
  box-shadow: 0 8px 18px #6557d930;
}

@keyframes notificationGlow {
  0%, 100% {
    opacity: .62;
    transform: scale(.9);
    box-shadow: 0 0 0 2px #ef6f5e24, 0 0 4px #ef6f5e28;
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px #ef6f5e22, 0 0 12px 3px #ef6f5e72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification-dot {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.goal-activity-list + .modal-primary, .empty-picker.compact + .modal-primary {
  display: block;
}

.goal-activity-list > button {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e7e2ec;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  display: flex;
}

.goal-activity-list > button span, .goal-activity-list > button strong {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.goal-activity-list > button strong {
  color: var(--violet);
  text-align: right;
}

.empty-link {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
}

.dialog-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.dialog-actions .modal-primary, .dialog-actions .edit-profile-button {
  margin-top: 0;
}

.assignment-goal {
  color: #656071;
  gap: 6px;
  margin: 15px 0;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.assignment-goal select {
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dedbe5;
  border-radius: 10px;
  padding: 0 12px;
}

.monthly-insights {
  gap: 10px;
  margin: 18px 0;
  display: grid;
}

.monthly-insights article {
  background: #fff;
  border: 1px solid #e5e0eb;
  border-radius: 13px;
  padding: 14px;
}

.monthly-insights header {
  border-bottom: 1px solid #eeeaf2;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  display: flex;
}

.monthly-insights header span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.monthly-insights header b {
  font-size: 10px;
}

.monthly-insights header small {
  color: #938d9d;
  font-size: 9px;
}

.monthly-insights header strong {
  font: 750 13px var(--font-display);
}

.monthly-insights article > div {
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 11px;
  display: grid;
}

.monthly-insights article > div span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.monthly-insights article > div small {
  color: #938d9d;
  font-size: 9px;
}

.monthly-insights article > div b {
  font-size: 10px;
}

.plan-coach {
  z-index: 120;
  background: linear-gradient(145deg, #fff, #f3efff);
  border: 1px solid #d9d1ff;
  border-radius: 20px;
  width: min(360px, 100vw - 32px);
  padding: 24px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 25px 70px #211d3d35;
}

.plan-coach h2 {
  font: 780 21px/1.15 var(--font-display);
  margin: 12px 0 8px;
}

.plan-coach p {
  color: #777185;
  font-size: 11px;
  line-height: 1.6;
}

.plan-coach button {
  float: right;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 800;
}

.app-shell:has(.plan-coach) #savings-plan {
  z-index: 111;
  position: relative;
  box-shadow: 0 0 0 5px #7765ee35, 0 24px 60px #4c3fb22d;
}

.app-shell:has(.plan-coach) .method-tabs button {
  animation: 1.2s ease-in-out infinite alternate coachPulse;
}

@keyframes coachPulse {
  from {
    box-shadow: 0 0 #6856dc12;
  }

  to {
    box-shadow: 0 0 0 4px #6856dc28;
  }
}

@media (max-width: 620px) {
  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .monthly-insights article > div {
    grid-template-columns: 1fr 1fr;
  }

  .plan-coach {
    bottom: 84px;
    right: 16px;
  }
}

.forgot-link {
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  align-self: flex-end;
  padding: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
}

.forgot-link:hover {
  text-decoration: underline;
}

.back-to-signin {
  color: #777185;
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 750;
}

.password-reset-page {
  background: radial-gradient(circle at 20% 20%, #f0ecff, #faf9fc 58%);
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
}

.password-reset-card {
  background: #fff;
  border: 1px solid #e4dfed;
  border-radius: 24px;
  width: min(430px, 100%);
  padding: 38px;
  box-shadow: 0 28px 80px #25203d1a;
}

.password-reset-card > .brand-mark {
  margin-bottom: 24px;
}

.password-reset-card h1 {
  font: 780 29px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 9px 0 8px;
}

.password-reset-card > p:not(.eyebrow) {
  color: #817b8b;
  margin-bottom: 24px;
  font-size: 11px;
  line-height: 1.65;
}

.password-reset-card .auth-submit {
  width: 100%;
}

.account-sync-page {
  background: radial-gradient(circle at 20% 15%, #eeeaff 0, #f8f7f4 45%, #f3f1ec 100%);
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
}

.account-sync-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e2deeb;
  border-radius: 24px;
  width: min(430px, 100%);
  padding: 38px;
  box-shadow: 0 28px 80px #25203d1a;
}

.account-sync-card .loading-brand-icon {
  border-radius: 15px;
  margin: 0 auto 22px;
  display: block;
  box-shadow: 0 10px 25px #6557d94a;
}

.account-sync-card h1 {
  font: 780 29px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 9px 0;
}

.account-sync-card > p:not(.eyebrow) {
  color: #817b8b;
  max-width: 340px;
  margin: 0 auto 22px;
  font-size: 10px;
  line-height: 1.65;
}

.account-sync-card .auth-submit, .account-sync-card .back-to-signin {
  width: 100%;
}

.account-sync-card .back-to-signin {
  min-height: 40px;
  margin-top: 8px;
}

.account-sync-progress {
  background: #efedf5;
  border-radius: 99px;
  height: 5px;
  margin-top: 24px;
  overflow: hidden;
}

.account-sync-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg,#8c7cf3,var(--violet));
  width: 42%;
  height: 100%;
  animation: 1.15s ease-in-out infinite alternate accountSync;
  display: block;
}

@keyframes accountSync {
  from {
    transform: translateX(-30%);
  }

  to {
    transform: translateX(170%);
  }
}

.welcome-root {
  width: 100%;
  min-height: 100dvh;
  font-family: var(--font-body),sans-serif;
  background: #1a0533;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.welcome-bg {
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0, #6b21d9 0%, #3b0f8c 40%, #1a0533 100%);
  position: absolute;
  inset: 0;
}

.welcome-orb {
  filter: blur(80px);
  pointer-events: none;
  opacity: .35;
  border-radius: 50%;
  position: absolute;
}

.orb-1 {
  background: #8b5cf6;
  width: 460px;
  height: 460px;
  top: -120px;
  right: -100px;
}

.orb-2 {
  background: #a855f7;
  width: 320px;
  height: 320px;
  bottom: -80px;
  left: -60px;
}

.welcome-content {
  z-index: 1;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  min-height: 100dvh;
  padding: 2rem 1.75rem;
  display: flex;
  position: relative;
}

.top-section {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-top: 3rem;
  display: flex;
}

.bottom-section {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 2.5rem;
  display: flex;
}

.icon-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.welcome-root .app-icon {
  object-fit: contain;
  z-index: 1;
  border-radius: 24px;
  width: 108px;
  height: 108px;
  position: relative;
  box-shadow: 0 0 0 1px #ffffff14, 0 8px 32px #6b21d999, 0 2px 8px #0006;
}

.icon-glow {
  z-index: 0;
  background: radial-gradient(circle, #8b5cf68c 0%, #0000 70%);
  border-radius: 50%;
  animation: 3s ease-in-out infinite welcomePulseGlow;
  position: absolute;
  inset: -12px;
}

@keyframes welcomePulseGlow {
  0%, 100% {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.text-block {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.greeting-label {
  font-family: var(--font-body),sans-serif;
  letter-spacing: .18em;
  color: #d8b4feb3;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 600;
}

.greeting-name {
  font-family: var(--font-outfit),sans-serif;
  color: #fff;
  margin: 0;
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.username {
  background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 50%, #a855f7 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.tagline {
  font-family: var(--font-body),sans-serif;
  color: #d8b4fea6;
  max-width: 300px;
  font-size: .95rem;
  line-height: 1.6;
}

.orbit-scene {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  display: flex;
  position: relative;
}

.ring {
  border: 1.5px solid #0000;
  border-radius: 50%;
  position: absolute;
}

.ring-outer {
  background: radial-gradient(circle, #0000 70%, #a855f70a 100%);
  border-color: #a855f72e;
  width: 190px;
  height: 190px;
  animation: 18s linear infinite welcomeSpin;
}

.ring-mid {
  border-color: #c084fc40;
  width: 138px;
  height: 138px;
  animation: 12s linear infinite reverse welcomeSpin;
}

.ring-inner {
  border-color: #e879f94d;
  width: 88px;
  height: 88px;
  animation: 8s linear infinite welcomeSpin;
}

@keyframes welcomeSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes welcomeCounterSpin {
  to {
    transform: rotate(-360deg);
  }
}

.orbit-center {
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  display: flex;
  position: absolute;
}

.center-pulse {
  background: #a855f74d;
  border-radius: 50%;
  animation: 2.4s ease-out infinite welcomePulseRing;
  position: absolute;
  inset: 0;
}

.pulse-2 {
  background: #a855f733;
  animation-delay: 1.2s;
}

@keyframes welcomePulseRing {
  0% {
    opacity: .8;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

.center-icon {
  z-index: 1;
  color: #fff;
  text-shadow: 0 0 20px #c084fccc;
  font-family: Arial, Roboto, Noto Sans, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
}

.label-track {
  border-radius: 50%;
  justify-content: center;
  align-items: flex-start;
  width: 236px;
  height: 236px;
  margin: auto;
  animation: 24s linear infinite welcomeSpin;
  display: flex;
  position: absolute;
  inset: 0;
}

.orbit-label {
  font-family: var(--font-outfit),sans-serif;
  letter-spacing: .05em;
  color: #d8b4fe73;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: -7px;
  font-size: .65rem;
  font-weight: 600;
  animation: 24s linear infinite welcomeCounterSpin;
}

.orbit-label.expense {
  color: #f9a8d480;
}

.continue-btn {
  cursor: pointer;
  width: 100%;
  font-family: var(--font-outfit),sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 60%, #a855f7 100%);
  border: none;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  box-shadow: 0 4px 24px #7c3aed80, 0 1px 3px #0000004d, inset 0 1px #ffffff1f;
}

@media (prefers-reduced-motion: reduce) {
  .ring, .label-track, .orbit-label, .center-pulse, .icon-glow {
    animation: none;
  }
}

.onboarding-who-page {
  background: radial-gradient(circle at 20% 15%, #eeeaff 0, #f8f7f4 45%, #f3f1ec 100%);
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 20px 16px;
  display: flex;
  overflow-y: auto;
}

.onboarding-who-card {
  background: #fff;
  border: 1px solid #e4dfed;
  border-radius: 20px;
  gap: 10px;
  width: min(430px, 100%);
  margin: auto 0;
  padding: 22px 20px 18px;
  display: grid;
  box-shadow: 0 28px 80px #25203d1a;
}

.onboarding-who-card h1 {
  font: 780 20px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 2px 0 4px;
}

.onboarding-who-card .dob-selects {
  background: #faf9fd;
  border: 1px solid #ece7f5;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 6px #25203d0f;
}

.who-avatar-hero {
  background: var(--violet-soft);
  border-radius: 50%;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 2px auto;
  display: grid;
  overflow: hidden;
}

.who-avatar-hero img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.who-avatar-placeholder {
  background: #d9d3f7;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.who-gender-row {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  display: grid;
}

.who-gender-row button {
  color: #70667d;
  cursor: pointer;
  background: #faf8ff;
  border: 1px solid #e3ddef;
  border-radius: 12px;
  min-height: 36px;
  font-size: 9px;
  font-weight: 800;
}

.who-gender-row button.selected {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

.onboarding-who-card .auth-submit {
  width: 100%;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .who-gender-row {
    grid-template-columns: 1fr 1fr;
  }

  .who-gender-row button:last-child {
    grid-column: span 2;
  }
}

.onboarding-money-page {
  background: radial-gradient(circle at 20% 15%, #eeeaff 0, #f8f7f4 45%, #f3f1ec 100%);
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 20px 16px;
  display: flex;
  overflow-y: auto;
}

.onboarding-money-card {
  background: #fff;
  border: 1px solid #e4dfed;
  border-radius: 20px;
  gap: 10px;
  width: min(430px, 100%);
  margin: auto 0;
  padding: 22px 20px 18px;
  display: grid;
  box-shadow: 0 28px 80px #25203d1a;
}

.onboarding-money-card h1 {
  font: 780 20px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 2px 0 4px;
}

.onboarding-money-card label {
  color: #656071;
  gap: 5px;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.onboarding-money-card .money-field {
  background: #fff;
  border: 1px solid #dedbe5;
  border-radius: 10px;
  align-items: center;
  height: 40px;
  padding-left: 13px;
  display: flex;
}

.onboarding-money-card .money-field span {
  color: #817b99;
  font-size: 10px;
  font-weight: 750;
}

.onboarding-money-card .money-field input {
  height: 100%;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  padding-left: 7px;
  font-size: 9px;
}

.onboarding-money-card .auth-submit {
  width: 100%;
  margin-top: 6px;
}

.money-left-preview {
  gap: 6px;
  display: grid;
}

.money-left-track {
  background: #efebf7;
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}

.money-left-track span {
  background: var(--violet);
  border-radius: 6px;
  height: 100%;
  transition: width .2s;
  display: block;
}

.money-left-preview small {
  color: #9a94a6;
  font-size: 10px;
  font-weight: 700;
}

.onboarding-priority-page {
  background: radial-gradient(circle at 20% 15%, #eeeaff 0, #f8f7f4 45%, #f3f1ec 100%);
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 20px 16px;
  display: flex;
  overflow-y: auto;
}

.onboarding-priority-card {
  background: #fff;
  border: 1px solid #e4dfed;
  border-radius: 20px;
  gap: 10px;
  width: min(430px, 100%);
  margin: auto 0;
  padding: 22px 20px 18px;
  display: grid;
  box-shadow: 0 28px 80px #25203d1a;
}

.onboarding-priority-card h1 {
  font: 780 20px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 2px 0 4px;
}

.onboarding-priority-card label {
  color: #656071;
  gap: 6px;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.onboarding-priority-card .smart-plan-methods {
  grid-template-columns: repeat(3, 1fr);
}

.onboarding-priority-card .smart-plan-methods button {
  gap: 3px;
  padding: 8px 6px;
}

.onboarding-priority-card .smart-plan-methods strong {
  font-size: 10px;
}

.plan-tip {
  color: #9a94a6;
  margin-top: -2px;
  font-size: 7px;
  font-weight: 600;
  line-height: 1.5;
  display: block;
}

.onboarding-priority-card .auth-submit {
  width: 100%;
  margin-top: 4px;
}

.onboarding-success-overlay {
  z-index: 200;
  text-align: center;
  background: radial-gradient(circle at 20% 15%, #eeeaff 0, #f8f7f4 45%, #f3f1ec 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.onboarding-success-anim {
  aspect-ratio: 1;
  pointer-events: none;
  width: min(320px, 80vw);
}

.onboarding-success-overlay h1 {
  font: 780 25px/1.15 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 6px 0 8px;
}

.onboarding-success-overlay p {
  color: #817d90;
  margin: 0;
  font-size: 10px;
}

@media (max-width: 600px) {
  .account-sync-page {
    padding: 18px;
  }

  .account-sync-card {
    border-radius: 22px;
    padding: 32px 22px;
  }

  .account-sync-card h1 {
    font-size: 26px;
  }
}

@media (max-width: 900px) {
  .auth-brand > span:last-child {
    font: 750 18px var(--font-display);
    letter-spacing: -.5px;
    display: inline;
  }
}

.tour-backdrop {
  z-index: 110;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #17142978;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

.tour-card {
  background: linear-gradient(145deg, #fff, #f7f4ff);
  border: 1px solid #e5e0f2;
  border-radius: 22px;
  width: min(390px, 100vw - 32px);
  padding: 30px;
  animation: .38s cubic-bezier(.2, .8, .2, 1) both tourArrival;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 80px #11102745;
}

.tour-card.step-1 {
  margin-left: max(0px, 10vw);
}

.tour-card.step-2 {
  margin-left: auto;
  margin-right: max(0px, 10vw);
}

.tour-card:before {
  content: "";
  border: 1px solid #6856dc1c;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  position: absolute;
  top: -90px;
  right: -85px;
  box-shadow: 0 0 0 28px #6856dc0b;
}

.tour-orbit {
  color: #6755dc;
  width: 50px;
  height: 50px;
  font: 800 21px var(--font-display);
  background: #ebe7ff;
  border-radius: 15px;
  place-items: center;
  margin-bottom: 22px;
  display: grid;
  box-shadow: 0 9px 22px #6856dc1d;
}

.tour-card h2 {
  font: 780 25px/1.12 var(--font-display);
  letter-spacing: -.7px;
  color: var(--ink);
  margin: 14px 0 10px;
  position: relative;
}

.tour-card p {
  color: #777185;
  margin: 0 0 24px;
  font-size: 10px;
  line-height: 1.75;
}

.tour-card button {
  float: right;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  height: 42px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 9px 22px #6755dc35;
}

.tour-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 26px #6755dc48;
}

.tour-card button span {
  margin-left: 10px;
}

.tour-dots {
  float: left;
  gap: 6px;
  margin-top: 18px;
  display: flex;
}

.tour-dots i {
  background: #d9d4e8;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.tour-dots i.active {
  background: var(--violet);
  border-radius: 8px;
  width: 18px;
}

.auth-notice {
  color: #27745a;
  background: #effaf5;
  border: 1px solid #bfe4d4;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 10px;
  line-height: 1.5;
}

@keyframes tourArrival {
  from {
    opacity: 0;
    transform: translateY(16px)scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .tour-backdrop {
    align-items: flex-end;
    padding: 16px;
  }

  .tour-card.step-1, .tour-card.step-2 {
    margin: 0;
  }

  .tour-card {
    border-radius: 20px;
    padding: 25px;
  }

  .tour-card h2 {
    font-size: 23px;
  }
}

.goal-activity-head {
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 9px;
  display: flex;
}

.goal-activity-head b {
  font-size: 11px;
}

.goal-activity-head small {
  color: #9993a3;
  font-size: 9px;
}

.goal-activity-list {
  gap: 8px;
  display: grid;
}

.goal-activity-list > div {
  background: #fff;
  border: 1px solid #e7e2ec;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.goal-activity-list span, .goal-activity-list strong {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.goal-activity-list b {
  font-size: 11px;
}

.goal-activity-list small {
  color: #938d9d;
  font-size: 9px;
  font-weight: 500;
}

.goal-activity-list strong {
  color: var(--violet);
  font: 750 10px var(--font-display);
  text-align: right;
}

.empty-picker.compact {
  margin: 8px 0 0;
  padding: 14px;
}

.plan-guide {
  background: #ffffffa8;
  border: 1px solid #ddd6ff;
  border-radius: 11px;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 14px;
  padding: 9px;
  display: grid;
  box-shadow: 0 8px 20px #6557d90a;
}

.plan-guide span {
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 7px;
  display: grid;
}

.plan-guide b {
  background: var(--violet);
  color: #fff;
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  display: grid;
}

.plan-guide small {
  color: #645e72;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
}

.plan-empty {
  text-align: center;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  display: flex;
}

.plan-empty > span {
  background: var(--violet-soft);
  width: 48px;
  height: 48px;
  color: var(--violet);
  border-radius: 15px;
  place-items: center;
  margin-bottom: 14px;
  font-size: 21px;
  display: grid;
}

.plan-empty h3 {
  font: 750 17px var(--font-display);
  margin: 0;
}

.plan-empty p {
  color: #8a8596;
  max-width: 330px;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.plan-empty p b {
  color: #5d566d;
}

@media (max-width: 520px) {
  .plan-guide {
    grid-template-columns: 1fr;
  }

  .plan-empty {
    min-height: 220px;
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .savings-journey {
    padding: 11px 10px 8px;
  }

  .journey-heading {
    gap: 8px;
  }

  .journey-heading small {
    max-width: 180px;
  }

  .journey-chart {
    height: 68px;
  }

  .net-details-link {
    text-align: left;
    min-height: 38px;
  }
}

.modal-dismiss-layer {
  cursor: default;
  background: none;
  border: 0;
  padding: 0;
  transition: none;
  position: absolute;
  inset: 0;
}

.modal-dismiss-layer:not(:disabled):hover, .modal-dismiss-layer:not(:disabled):active {
  box-shadow: none;
  transform: none;
}

.modal-backdrop > .modal {
  z-index: 1;
}

.modal-close, .modal-back {
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
}

.account-badges {
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 5px;
  display: flex;
}

.account-access-badge {
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #706a7d;
  background: #f0edf4;
  border: 1px solid #e1dce8;
  border-radius: 999px;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.account-access-badge.internal {
  color: #4d37b5;
  background: #eee9ff;
  border-color: #d9cffc;
}

.reminder-action-button {
  color: #5840c7;
  cursor: pointer;
  text-align: left;
  background: #f5f2ff;
  border: 1px solid #ddd5fc;
  border-radius: 11px;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 0 14px;
  display: grid;
}

.reminder-action-button > span {
  background: #e7e0ff;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
  display: grid;
}

.reminder-action-button b {
  font-size: 11px;
}

.reminder-action-button small {
  color: #8d82b6;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 9px;
  font-weight: 800;
}

.reminder-lock {
  background: #f7f4ff;
  border: 1px solid #ddd5fc;
  border-radius: 13px;
  gap: 7px;
  margin: 18px 0;
  padding: 16px;
  display: grid;
}

.reminder-lock b {
  font-size: 10px;
}

.reminder-lock span {
  color: #817a91;
  font-size: 10px;
  line-height: 1.55;
}

.reminder-lock button {
  color: #fff;
  background: var(--violet);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  width: max-content;
  min-height: 34px;
  margin-top: 3px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 800;
}

.reminder-loading {
  text-align: center;
  color: #8d8798;
  background: #faf9fc;
  border-radius: 11px;
  margin: 18px 0;
  padding: 18px;
  font-size: 10px;
}

.reminder-list {
  gap: 9px;
  margin: 18px 0;
  display: grid;
}

.reminder-list article {
  background: #fff;
  border: 1px solid #e5e0ed;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px;
  display: flex;
}

.reminder-list article.paused {
  opacity: .68;
  background: #faf9fb;
}

.reminder-list article > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.reminder-list b {
  font-size: 11px;
}

.reminder-list small {
  color: #8e8899;
  font-size: 9px;
  line-height: 1.45;
}

.reminder-list article > div > span {
  color: #278667;
  text-transform: uppercase;
  background: #e8f7f1;
  border-radius: 999px;
  width: max-content;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 800;
}

.reminder-list nav {
  flex: none;
  gap: 5px;
  display: flex;
}

.reminder-list nav button {
  color: #5d45c5;
  cursor: pointer;
  background: #f2effd;
  border: 1px solid #e0daf5;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 800;
}

.reminder-list nav button.danger {
  color: #a84b53;
  background: #fff4f4;
  border-color: #f0d2d5;
}

.reminder-form {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 17px;
}

.reminder-form h3 {
  color: #403a50;
  font: 750 13px var(--font-display);
  margin: 0;
}

.reminder-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  display: grid;
}

.reminder-enabled {
  cursor: pointer;
  background: #faf9fc;
  border: 1px solid #e4e0ec;
  border-radius: 12px;
  align-items: center;
  padding: 10px 12px;
  transition: border-color .18s, background .18s, box-shadow .18s;
  grid-template-columns: 38px 1fr !important;
  gap: 10px !important;
  display: grid !important;
}

.reminder-enabled.active {
  background: #f5f2ff;
  border-color: #cfc5ff;
  box-shadow: 0 7px 18px #6854e01a;
}

.reminder-enabled input {
  opacity: 0;
  pointer-events: none;
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
}

.reminder-switch {
  background: #c9c4d1;
  border-radius: 999px;
  width: 36px;
  height: 21px;
  transition: background .18s;
  position: relative;
  box-shadow: inset 0 1px 2px #221d3029;
}

.reminder-switch i {
  background: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  transition: transform .18s;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 5px #251e4138;
}

.reminder-enabled.active .reminder-switch {
  background: linear-gradient(135deg, #7b68ee, #604be0);
}

.reminder-enabled.active .reminder-switch i {
  transform: translateX(15px);
}

.reminder-enabled-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.reminder-enabled-copy b {
  color: #2b2740;
  font: 750 11px var(--font-display);
}

.reminder-enabled-copy small {
  color: #8a8496;
  font-size: 9px;
  line-height: 1.35;
}

.reminder-error {
  color: #a3434b;
  background: #fff0f0;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.45;
}

.reminder-delivery-note {
  color: #9993a2;
  text-align: center;
  margin-top: 14px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}

.upgrade-modal {
  background: linear-gradient(155deg, #fff 0%, #faf8ff 72%, #f2edff 100%);
  width: min(520px, 100%);
}

.upgrade-content {
  position: relative;
  overflow: hidden;
}

.upgrade-orbit {
  color: #fff;
  background: linear-gradient(145deg, #9f65ff, #5940d9);
  border-radius: 17px;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 18px 0 5px;
  font-size: 22px;
  display: grid;
  box-shadow: 0 13px 28px #6249d43d, inset 0 1px #ffffff80;
}

.upgrade-content h2 {
  max-width: 410px;
  font-size: 25px;
}

.upgrade-content > p {
  color: #7d7789;
  font-size: 10px;
  line-height: 1.65;
}

.upgrade-pricing {
  background: #fff;
  border: 1px solid #e4def4;
  border-radius: 15px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  display: grid;
}

.upgrade-pricing span {
  gap: 6px;
  display: grid;
}

.upgrade-pricing span:last-child {
  text-align: right;
}

.upgrade-pricing small {
  color: #948da1;
  letter-spacing: .8px;
  font-size: 9px;
  font-weight: 850;
}

.upgrade-pricing strong {
  font: 800 21px/1 var(--font-display);
}

.upgrade-pricing em {
  color: #817b8c;
  font: 600 10px var(--font-body);
}

.upgrade-pricing i {
  color: #a19bac;
  font-size: 10px;
  font-style: normal;
}

.upgrade-content ul {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.upgrade-content li {
  color: #4e485c;
  padding-left: 17px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  position: relative;
}

.upgrade-content li:before {
  content: "✓";
  color: #2fa67f;
  font-weight: 900;
  position: absolute;
  left: 0;
}

.compact-plus-benefits {
  background: #fff;
  border: 1px solid #dcd5fa;
  border-radius: 14px;
  gap: 8px;
  padding: 13px 14px;
  display: grid;
  box-shadow: 0 8px 22px #6557d914;
}

.compact-plus-benefits > b {
  font-size: 11px;
}

.compact-plus-benefits ul {
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.compact-plus-benefits small {
  color: #8b8496;
  font-size: 9px;
  line-height: 1.4;
}

.data-promise {
  color: #5641b8;
  background: #eee9ff;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  padding: 14px;
  display: flex;
}

.data-promise b {
  font-size: 11px;
}

.data-promise span {
  font-size: 10px;
  line-height: 1.45;
}

.subscription-manager {
  background: #fff;
  border: 1px solid #e6e1ec;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0 0 !important;
  font-size: 10px !important;
}

.upgrade-note {
  color: #9a94a3;
  text-align: center;
  margin-top: 10px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}

.play-purchase-actions {
  gap: 9px;
  margin-top: 18px;
  display: grid;
}

.play-purchase-actions .modal-primary {
  min-height: 46px;
  margin-top: 0;
}

.play-purchase-actions .modal-primary.secondary {
  color: var(--violet);
  box-shadow: none;
  background: #fff;
  border: 1px solid #d9d1f4;
}

.restore-purchase {
  min-height: 38px;
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 10px;
  font-weight: 800;
}

.play-purchase-actions button:disabled {
  opacity: .58;
  cursor: wait;
}

.auth-legal-consent {
  text-align: center;
  color: #777185 !important;
  margin: 13px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.auth-legal-consent a, .legal-inline-links a, .toolbox-legal-links a {
  color: var(--violet);
  text-underline-offset: 2px;
  font-weight: 800;
}

.renewal-disclosure {
  background: #fff;
  border: 1px solid #e5e0ef;
  border-radius: 10px;
  padding: 11px 12px;
  display: block;
  color: #777185 !important;
  margin: 13px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}

.renewal-disclosure a {
  color: var(--violet);
  font-weight: 800;
}

.legal-inline-links {
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 10px;
  display: flex;
}

.toolbox-legal-links {
  border-top: 1px solid #e5e0eb;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  padding: 15px;
  font-size: 11px;
  display: flex;
}

.legal-page {
  min-height: 100dvh;
  color: var(--ink);
  background: radial-gradient(circle at 12% 2%, #eeeaff 0, #faf9f6 35%, #f5f3ef 100%);
  padding: 28px 20px 54px;
}

.legal-header, .legal-document, .legal-footer {
  width: min(920px, 100%);
  margin-inline: auto;
}

.legal-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  display: flex;
}

.legal-brand {
  color: var(--ink);
  align-items: center;
  gap: 11px;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.legal-brand img {
  border-radius: 12px;
  box-shadow: 0 8px 20px #6048d43a;
}

.legal-brand strong {
  font: 800 21px var(--font-display);
  letter-spacing: -.5px;
  text-shadow: 0 2px 8px #6557d924;
}

.legal-header nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px 18px;
  display: flex;
}

.legal-header nav a {
  color: #6f687c;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.legal-header nav a:hover {
  color: var(--violet);
}

.legal-document {
  background: #fff;
  border: 1px solid #e1dce9;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 70px #2b244418;
}

.legal-intro {
  background: linear-gradient(145deg, #f5f1ff, #fff);
  border-bottom: 1px solid #e9e4ef;
  padding: 54px clamp(25px, 6vw, 70px) 44px;
}

.legal-intro > span {
  color: var(--violet);
  letter-spacing: 1.3px;
  font-size: 11px;
  font-weight: 900;
}

.legal-intro h1 {
  max-width: 720px;
  font: 800 clamp(34px,5vw,56px)/1.04 var(--font-display);
  letter-spacing: -2px;
  margin: 15px 0 13px;
}

.legal-intro > p {
  color: #736d7e;
  max-width: 720px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

.legal-intro > small {
  color: #928c9b;
  margin-top: 20px;
  font-size: 12px;
  display: block;
}

.legal-content {
  padding: 42px clamp(25px, 6vw, 70px) 58px;
}

.legal-content section + section {
  border-top: 1px solid #eeeaf2;
  margin-top: 34px;
  padding-top: 31px;
}

.legal-content h2 {
  font: 780 23px/1.25 var(--font-display);
  letter-spacing: -.4px;
  margin: 0 0 12px;
}

.legal-content p, .legal-content li {
  color: #5f5969;
  font-size: 15px;
  line-height: 1.75;
}

.legal-content p {
  margin: 10px 0;
}

.legal-content ul, .legal-content ol {
  gap: 8px;
  padding-left: 23px;
  display: grid;
}

.legal-content a {
  color: var(--violet);
  text-underline-offset: 3px;
  font-weight: 750;
}

.legal-callout {
  background: #f7f4ff;
  border-radius: 16px;
  border: 1px solid #d9d1ff !important;
  padding: 24px !important;
}

.legal-footer {
  color: #827c8b;
  justify-content: space-between;
  gap: 18px;
  margin-top: 21px;
  font-size: 12px;
  display: flex;
}

.legal-footer a {
  color: var(--violet);
  font-weight: 750;
}

.legal-content h3 {
  font: 760 17px/1.3 var(--font-display);
  color: #3e384c;
  margin: 20px 0 7px;
}

.legal-signoff {
  text-align: center;
}

.legal-signoff p {
  margin: 4px 0;
}

.legal-signoff b {
  color: var(--ink);
  font: 800 18px var(--font-display);
}

.legal-signoff i {
  color: var(--violet);
}

@media (max-width: 620px) {
  .upgrade-pricing {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .upgrade-pricing span:last-child {
    text-align: left;
  }

  .upgrade-pricing i {
    display: none;
  }

  .upgrade-content ul {
    grid-template-columns: 1fr;
  }
}

.tour-launch-button {
  color: var(--violet);
  padding-left: 2px;
  font-size: 14px;
  line-height: 1;
}

.tour-backdrop.tour-centered {
  justify-content: center;
}

.tour-backdrop.tour-guided {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  background: none;
  justify-content: center;
  align-items: flex-end;
}

.tour-guided .tour-card {
  z-index: 112;
  pointer-events: auto;
  margin: 0;
  position: fixed;
}

.tour-spotlight {
  z-index: 111;
  pointer-events: none;
  border: 3px solid #8a78ff;
  border-radius: 16px;
  transition: all .24s;
  position: fixed;
  box-shadow: 0 0 0 9999px #17162ca8, 0 0 0 7px #8a78ff30;
}

.tour-card {
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.tour-card .section-tag {
  position: relative;
}

.tour-card h2 {
  font-size: 24px;
}

.tour-card p {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.6;
}

.tour-benefits {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
  display: grid;
}

.tour-benefits p {
  color: #5f596c;
  background: #f2efff;
  border-radius: 11px;
  margin: 0;
  padding: 10px;
}

.tour-benefits b {
  white-space: nowrap;
  margin-bottom: 2px;
  display: block;
}

.tour-disclaimer {
  color: #817a8e;
  margin: 4px 0 18px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}

.tour-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.tour-actions button {
  float: none;
}

.tour-actions .tour-secondary, .tour-actions .tour-end {
  color: #625b70;
  box-shadow: none;
  background: #fff;
  border: 1px solid #ddd7e7;
}

.tour-actions .tour-end {
  color: #9c4960;
  margin-right: auto;
}

@media (max-width: 700px) {
  .tour-guided .tour-card {
    margin: 0;
  }

  .tour-benefits {
    grid-template-columns: 1fr;
  }

  .tour-card {
    max-height: min(78vh, 680px);
  }

  .tour-actions {
    flex-wrap: wrap;
  }

  .tour-actions button {
    padding: 0 13px;
  }
}

.modal-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 78px;
  color: var(--ink);
  resize: vertical;
  background: #fff;
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  outline: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
}

.modal-form textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #6557d914;
}

.record-notes {
  background: #faf9fd;
  border: 1px solid #e5e0ee;
  border-radius: 12px;
  margin: 12px 0;
  padding: 12px 14px;
}

.record-notes span {
  color: #938ca0;
  letter-spacing: .8px;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 850;
  display: block;
}

.record-notes p {
  color: #5e586b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.goal-completion-plan, .goal-completion-insight {
  background: linear-gradient(145deg, #faf8ff, #fff);
  border: 1px solid #e4def2;
  border-radius: 13px;
  gap: 8px;
  margin: 16px 0;
  padding: 14px;
  display: grid;
}

.goal-completion-plan > div, .goal-completion-insight > div {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.goal-completion-plan span, .goal-completion-insight small {
  color: #7e778a;
  font-size: 10px;
  font-weight: 650;
}

.goal-completion-plan b, .goal-completion-insight b {
  color: var(--violet);
  font: 800 12px var(--font-display);
}

.goal-completion-plan .other-funds {
  border-top: 1px solid #e8e3f0;
  padding-top: 8px;
}

.goal-completion-insight > span {
  color: #8c8498;
  letter-spacing: .8px;
  font-size: 9px;
  font-weight: 900;
}

.goal-completion-insight p {
  border-top: 1px solid #e8e3f0;
  padding-top: 8px;
  color: #716a7c !important;
  margin: 3px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

.goal-completion-question {
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 9px;
  display: flex;
}

.goal-completion-question b {
  font-size: 11px;
}

.goal-completion-question small {
  color: #8d8697;
  font-size: 9px;
  line-height: 1.45;
}

.goal-completion-options {
  gap: 8px;
  margin-bottom: 15px;
  display: grid;
}

.goal-completion-options label {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2ddea;
  border-radius: 11px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 12px;
  display: grid;
}

.goal-completion-options label.selected {
  border-color: var(--violet);
  background: #f7f5ff;
  box-shadow: 0 0 0 2px #6557d914;
}

.goal-completion-options input {
  accent-color: var(--violet);
  margin-top: 2px;
}

.goal-completion-options span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.goal-completion-options b {
  color: #403a4d;
  font-size: 10px;
}

.goal-completion-options small {
  color: #817a8c;
  font-size: 9px;
  line-height: 1.45;
}

.home-dashboard {
  display: contents;
}

.native-plan-tool {
  display: none !important;
}

.bug-glyph {
  width: 19px;
  height: 20px;
  display: block;
  position: relative;
}

.bug-glyph i {
  background: none;
  border: 2px solid;
  border-radius: 7px;
  width: 9px;
  height: 13px;
  position: absolute;
  top: 4px;
  left: 5px;
}

.bug-glyph:before {
  content: "";
  border: 2px solid;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  width: 4px;
  height: 5px;
  position: absolute;
  top: 1px;
  left: 8px;
}

.bug-glyph:after {
  content: "";
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 65%, 100% 65%, 100% 100%, 65% 100%, 65% 0, 100% 0, 100% 35%, 0 35%);
  background: currentColor;
  width: 17px;
  height: 2px;
  position: absolute;
  top: 7px;
  left: 1px;
  box-shadow: 0 5px;
}

.dialog-bug-report {
  width: min(500px, 100%);
}

.bug-report-form {
  gap: 14px;
}

.bug-character-count {
  color: #9a94a6;
  justify-self: end;
  margin-top: -3px;
  font-size: 9px;
  font-weight: 600;
}

.bug-photo-picker > input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px !important;
  height: 1px !important;
}

.bug-photo-picker > span {
  min-height: 48px;
  color: var(--violet);
  cursor: pointer;
  background: #faf8ff;
  border: 1px dashed #cfc6e6;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  display: flex;
}

.bug-photo-picker > span b {
  font-size: 11px;
}

.bug-photo-picker > span small {
  color: #8c8498;
  font-size: 9px;
  font-weight: 600;
}

.bug-photo-list {
  background: #fbfaff;
  border: 1px solid #e5e0ee;
  border-radius: 12px;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.bug-photo-list > span {
  color: #5e586b;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: 10px;
  display: flex;
}

.bug-photo-list > span small {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8d8699;
  max-width: 68%;
  overflow: hidden;
}

.bug-photo-list button {
  color: #9a4961;
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: end;
  font-size: 9px;
  font-weight: 800;
}

.bug-privacy-note {
  color: #817a8e;
  font-size: 9px;
  line-height: 1.5;
}

.bug-report-error {
  color: #8b3650;
  background: #fff6f8;
  border: 1px solid #efc7d0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.45;
}

.bug-report-form .modal-primary {
  margin-top: 2px;
}

.bug-report-form button:disabled {
  opacity: .58;
  cursor: wait;
}

@media (max-width: 620px) {
  .bug-photo-picker > span {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
  }

  .dialog-bug-report {
    max-height: 92vh;
  }
}

.diagnostics-summary, .diagnostics-exclusions {
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  margin: 14px 0;
  padding: 14px;
  font-size: 10px;
  line-height: 1.55;
  display: flex;
}

.diagnostics-summary {
  color: #4e4770;
  background: #f3f0ff;
  border: 1px solid #e1dafc;
}

.diagnostics-exclusions {
  color: #4a685f;
  background: #eef8f4;
  border: 1px solid #d6eee5;
}

.diagnostics-summary b, .diagnostics-exclusions b {
  font-size: 11px;
}

.diagnostics-control {
  border: 1px solid #e3deeb;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 15px;
  display: flex;
}

.diagnostics-control > span {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.diagnostics-control b {
  font-size: 12px;
}

.diagnostics-control small {
  color: #8d8796;
  font-size: 9px;
}

.diagnostics-control > button {
  cursor: pointer;
  background: #d9d5df;
  border: 0;
  border-radius: 999px;
  width: 48px;
  height: 28px;
  padding: 3px;
  transition: all .18s;
}

.diagnostics-control > button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.diagnostics-control > button i {
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  transition: all .18s;
  display: block;
  box-shadow: 0 2px 6px #312a4333;
}

.diagnostics-control > button.enabled {
  background: #6557d9;
}

.diagnostics-control > button.enabled i {
  transform: translateX(20px);
}

.diagnostics-footnote {
  color: #8d8796;
  text-align: center;
  margin-top: 12px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}

.site-crash-recovery {
  color: #1e1938;
  min-height: 100dvh;
  font-family: var(--font-body),sans-serif;
  background: linear-gradient(145deg, #f5f2ff, #fffaf0);
  place-items: center;
  padding: 24px;
  display: grid;
}

.site-crash-recovery section {
  text-align: center;
  background: #fff;
  border: 1px solid #e3dff0;
  border-radius: 28px;
  width: min(100%, 520px);
  padding: clamp(30px, 7vw, 58px);
  box-shadow: 0 28px 80px #2f24511f;
}

.site-crash-recovery span {
  color: #6b54db;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
}

.site-crash-recovery h1 {
  font: 700 clamp(27px,6vw,42px)/1.12 var(--font-display),sans-serif;
  margin: 14px 0 10px;
}

.site-crash-recovery p {
  color: #746e81;
  margin: 0;
  line-height: 1.6;
}

.site-crash-recovery button {
  color: #fff;
  cursor: pointer;
  background: #6553d9;
  border: 0;
  border-radius: 14px;
  min-height: 50px;
  margin-top: 22px;
  padding: 0 24px;
  font-weight: 800;
}

.goal-carousel {
  will-change: transform,opacity;
  animation: .7s cubic-bezier(.22, .72, .25, 1) both goal-pair-slide;
}

@keyframes goal-pair-slide {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journey-point-pulse {
  transform-origin: center;
  background: none;
  border: 1.4px solid #6755dc;
  width: 10px;
  animation: 1.65s ease-out infinite journey-point-blink;
}

@keyframes journey-point-blink {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%)scale(.7);
  }

  72%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(2.5);
  }
}

.planner-card.plan-locked .method-tabs button:not(.selected) {
  opacity: .34;
  filter: grayscale(.55);
  background: #f5f3f8;
}

.planner-card.plan-locked .method-tabs button.selected {
  opacity: 1;
  cursor: default;
}

.planner-card.plan-locked .method-tabs button:disabled {
  cursor: default;
}

.plan-setup-preview {
  background: #faf9fd;
  border: 1px solid #e5e0ef;
  border-radius: 12px;
  gap: 8px;
  margin-top: 16px;
  padding: 13px;
  display: grid;
}

.plan-setup-preview > div {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  display: grid;
}

.plan-setup-preview i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.plan-setup-preview span {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.plan-setup-preview b, .plan-setup-preview strong {
  font-size: 11px;
}

.plan-setup-preview small, .plan-setup-warning {
  color: #8e8898;
  font-size: 9px;
}

.plan-selection-prompt {
  color: #28243e;
  background: #faf9fd;
  border: 1px dashed #d9d1ee;
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding: 14px;
  display: flex;
}

.plan-selection-prompt b {
  font-size: 11px;
}

.plan-selection-prompt span {
  color: #817b8c;
  font-size: 10px;
  line-height: 1.45;
}

.plan-setup-warning {
  color: #a86622;
  margin-top: 10px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .goal-carousel {
    animation: none;
  }

  .journey-point-pulse {
    opacity: .4;
    animation: none;
  }
}

@media (max-width: 620px) {
  .auth-legal-consent {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  .toolbox-legal-links {
    padding: 16px 8px;
    font-size: 11px;
  }

  .legal-page {
    padding: 15px 12px 36px;
  }

  .legal-header {
    flex-direction: column;
    align-items: flex-start;
    margin: 5px 5px 18px;
  }

  .legal-header nav {
    justify-content: flex-start;
  }

  .legal-document {
    border-radius: 20px;
  }

  .legal-intro {
    padding: 34px 22px 30px;
  }

  .legal-intro h1 {
    letter-spacing: -1.3px;
    font-size: 36px;
  }

  .legal-intro > p {
    font-size: 15px;
  }

  .legal-content {
    padding: 30px 22px 40px;
  }

  .legal-content h2 {
    font-size: 21px;
  }

  .legal-content p, .legal-content li {
    font-size: 14px;
  }

  .legal-footer {
    flex-direction: column;
    padding: 0 5px;
  }

  .native-plan-tool {
    display: flex !important;
  }

  .home-dashboard .planner-card.inactive-plan {
    display: none !important;
  }

  .home-dashboard .planner-card.active-plan {
    display: block !important;
  }

  .home-dashboard .planner-card .planner-copy {
    display: none !important;
  }

  .home-dashboard .plan-result {
    padding: 13px 15px !important;
  }

  .home-dashboard .result-head h3 {
    font-size: 15px;
  }

  .home-dashboard .allocation-wrap {
    gap: 13px;
    margin: 10px 0;
  }

  .home-dashboard .active-plan-result .allocation-wrap {
    margin-bottom: 0;
  }

  .home-dashboard .donut {
    width: 82px;
    padding: 10px;
  }

  .home-dashboard .donut strong {
    font-size: 13px;
  }

  .home-dashboard .allocation-list {
    gap: 6px;
  }

  .home-dashboard .allocation-list > div {
    grid-template-columns: 7px 1fr auto;
    gap: 7px;
  }

  .home-dashboard .allocation-list b, .home-dashboard .allocation-list strong {
    font-size: 9px;
  }

  .home-dashboard .allocation-list small {
    font-size: 8px;
  }

  .home-dashboard .primary-button {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .reminder-form-grid {
    grid-template-columns: 1fr;
  }

  .reminder-list article {
    flex-direction: column;
    align-items: stretch;
  }

  .reminder-list nav {
    width: 100%;
  }

  .reminder-list nav button {
    flex: 1;
    min-height: 40px;
  }

  .reminder-action-button {
    min-height: 52px;
  }

  .reminder-lock button {
    min-height: 42px;
  }
}

.app-icon {
  filter: drop-shadow(0 0 5px #8e7cff70);
  background: currentColor;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bulb .app-icon, .goal-icon .app-icon, .record-card-icon .app-icon {
  flex-basis: 19px;
  width: 19px;
  height: 19px;
}

.goal-icon .app-icon {
  color: #fff;
}

.goal-icon.completed {
  background: var(--green) !important;
}

.record-management {
  border-top: 1px solid var(--line);
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
}

.record-management > span {
  color: #9993a8;
  letter-spacing: 1.2px;
  font-size: 10px;
  font-weight: 850;
}

.record-management button {
  min-height: 44px;
  color: var(--violet);
  cursor: pointer;
  background: #fff;
  border: 1px solid #ded9ec;
  border-radius: 12px;
  font-weight: 800;
}

.record-management button.primary {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  box-shadow: 0 8px 20px #6557d932;
}

.record-management button.danger {
  color: #b9504a;
  background: #fff9f8;
  border-color: #f0c8c4;
}

.trash-plan-compare, .plan-feature-compare {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  display: grid;
}

.trash-plan-compare > div, .plan-feature-compare > section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  gap: 7px;
  padding: 16px;
  display: grid;
}

.trash-plan-compare .plus, .plan-feature-compare .plus {
  background: linear-gradient(145deg, #f4f1ff, #fff);
  border-color: #bfb5ff;
  box-shadow: 0 10px 28px #6557d92b;
}

@keyframes plus-card-glow {
  50% {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px #6557d947;
  }
}

.plan-feature-compare ul {
  gap: 6px;
  margin: 4px 0 0;
  padding-left: 17px;
  display: grid;
}

.plan-feature-compare li {
  font-size: 11px;
  line-height: 1.35;
}

.app-crew-note {
  background: #fff7e8;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  color: #7d633d !important;
  display: flex !important;
}

.trash-list, .installment-list, .claim-history {
  gap: 9px;
  margin: 14px 0;
  display: grid;
}

.trash-list article, .installment-list article, .claim-history article {
  border: 1px solid var(--line);
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.trash-list article span, .installment-list article span, .claim-history article span {
  gap: 3px;
  display: grid;
}

.trash-list article small, .installment-list article small, .claim-history article small {
  color: #8f8999;
  font-size: 10px;
}

.claim-history > span {
  color: #514963;
  font: 800 11px var(--font-display);
  letter-spacing: .4px;
}

.trash-list article button {
  background: var(--violet-soft);
  color: var(--violet);
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 800;
}

.trash-days-left {
  white-space: nowrap;
  color: #b34b62;
  background: #fff0f3;
  border: 1px solid #ffd6df;
  border-radius: 999px;
  margin-left: auto;
  padding: 6px 9px;
  font-size: 12px;
}

.trash-heading-row {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  display: flex;
}

.trash-heading-row h2 {
  margin: 0;
}

.trash-clean-button {
  white-space: nowrap;
  width: 100%;
  margin: 14px 0 0;
}

.installment-list article > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  display: flex;
}

.installment-list button {
  border: 1px solid var(--line);
  text-transform: capitalize;
  background: #fff;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 10px;
}

.installment-list button.active {
  color: #fff;
  background: var(--violet);
  border-color: var(--violet);
}

.installment-list article.locked {
  background: #faf9fc;
}

.installment-list article span em {
  color: #8d8798;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.installment-list button:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.autosave-note {
  color: #8d8798;
  text-align: center;
  margin-top: 8px;
  font-size: 9px;
  display: block;
}

.installment-review-button {
  width: 100%;
  color: var(--violet);
  background: #f4f1ff;
  border: 1px solid #dcd5ff;
  border-radius: 11px;
  margin: 12px 0 2px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 800;
}

.modal-primary, .edit-profile-button, .replay-tour-button, .contact-us-button, .signout-button, .delete-account-button, .delete-primary, .cancel-button, .record-management button {
  border-radius: 9px;
  height: auto;
  padding: 9px 14px;
  font-size: 10px;
  line-height: 1.2;
  min-height: 44px !important;
}

.record-management {
  gap: 7px;
}

.insight-card > button, .text-link, .net-details-link, .workspace-hero > button {
  border-radius: 9px;
  min-height: 44px;
  padding: 8px 12px;
}

.dialog-saving-detail {
  width: min(520px, 100%);
  max-height: calc(100dvh - 24px);
  padding: 24px;
  overflow: hidden;
}

.dialog-saving-detail h2 {
  margin-top: 12px;
}

.dialog-saving-detail > p {
  margin-bottom: 12px;
  line-height: 1.45;
}

.dialog-saving-detail .transaction-list {
  margin-top: 12px;
}

.dialog-saving-detail .transaction-list article {
  padding: 12px;
}

.dialog-saving-detail .transaction-list header {
  padding-bottom: 9px;
}

.dialog-saving-detail .transaction-grid {
  gap: 6px 13px;
  padding-top: 9px;
}

.dialog-saving-detail .reminder-action-button {
  vertical-align: top;
  border-radius: 9px;
  grid-template-columns: 22px 1fr auto;
  gap: 6px;
  width: calc(50% - 5px);
  min-height: 38px;
  margin: 10px 6px 0 0;
  padding: 5px 9px;
  display: inline-grid;
}

.dialog-saving-detail .reminder-action-button > span {
  border-radius: 7px;
  width: 22px;
  height: 22px;
}

.dialog-saving-detail .reminder-action-button small {
  font-size: 8px;
}

.dialog-saving-detail .record-management {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  display: flex;
}

.dialog-saving-detail .record-management > span {
  flex: 0 0 100%;
}

.dialog-saving-detail .record-management button {
  flex: auto;
  width: auto;
  padding: 7px 11px;
  min-height: 32px !important;
}

@media (max-width: 520px) {
  .dialog-saving-detail {
    max-height: calc(100dvh - 12px);
    padding: 20px;
  }

  .dialog-saving-detail .transaction-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dialog-saving-detail .reminder-action-button {
    width: calc(50% - 4px);
    margin-right: 4px;
  }

  .dialog-saving-detail .record-management button {
    flex: calc(50% - 4px);
  }
}

.paid-summary {
  color: var(--green);
  background: #eaf8f3;
  border-radius: 12px;
  justify-content: space-between;
  padding: 13px;
  display: flex;
}

@media (max-width: 620px) {
  .trash-plan-compare, .plan-feature-compare {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .trash-plan-compare > div, .plan-feature-compare > section {
    padding: 12px;
  }

  .installment-list article {
    flex-direction: column;
    align-items: flex-start;
  }

  .installment-list article > div {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .trash-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .trash-list article {
    flex-wrap: wrap;
  }

  .trash-list article > span {
    flex: 100%;
  }

  .trash-days-left {
    margin-left: 0;
  }
}

@media (display-mode: standalone) and (max-width: 620px) {
  .next-step-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .compact-step-card {
    min-height: 122px;
    padding: 13px 14px;
  }

  .compact-step-card .section-tag, .compact-step-card .bulb, .compact-step-card p, .compact-step-card button {
    display: flex;
  }

  .compact-step-card p {
    min-height: 33px;
    margin: 22px 0 3px;
    font-size: 10px;
  }

  .compact-step-card button {
    align-items: center;
    gap: 4px;
  }
}

.nav-item > .app-icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
}

.mobile-nav .app-icon {
  flex-basis: 19px;
  width: 19px;
  height: 19px;
}

.mobile-nav button.nav-profile-button {
  justify-content: center;
}

.nav-profile-avatar {
  object-fit: cover;
  border-radius: 30%;
  width: 32px;
  height: 32px;
  display: block;
}

.mobile-nav button.active .nav-profile-avatar {
  box-shadow: 0 0 0 2px var(--violet);
}

.nav-icon-badge-wrap {
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

.nav-icon-badge {
  white-space: nowrap;
  letter-spacing: .3px;
  color: #7568c9;
  pointer-events: none;
  background: #e8e3ff;
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 6px;
  font-weight: 800;
  line-height: 1.3;
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-icon-badge-wrap .nav-icon-badge + .nav-icon-badge {
  top: auto;
  bottom: -9px;
}

.mobile-nav .nav-icon-badge {
  font-size: 6px;
  top: -8px;
}

.mobile-nav .nav-icon-badge-wrap .nav-icon-badge + .nav-icon-badge {
  bottom: -8px;
}

.icon-button .app-icon, .mobile-toolbox-button .app-icon {
  width: 19px;
  height: 19px;
}

.workspace-hero {
  height: auto;
  min-height: 130px;
}

@media (max-width: 620px) {
  .workspace-hero {
    height: auto;
    min-height: 140px;
  }
}

.startup-welcome {
  animation: .45s both startupEnter;
}

.startup-sky {
  z-index: 1;
  width: min(320px, 72vw);
  height: 42px;
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
}

.startup-sky i {
  background: #fff5bf;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 1.4s ease-in-out infinite alternate twinkle;
  position: absolute;
  box-shadow: 0 0 12px #fff0a9;
}

.startup-sky i:first-child {
  top: 22px;
  left: 4%;
}

.startup-sky i:nth-child(2) {
  animation-delay: .25s;
  top: 4px;
  left: 25%;
}

.startup-sky i:nth-child(3) {
  animation-delay: .5s;
  top: 28px;
  left: 50%;
}

.startup-sky i:nth-child(4) {
  animation-delay: .75s;
  top: 7px;
  left: 74%;
}

.startup-sky i:nth-child(5) {
  animation-delay: 1s;
  top: 23px;
  right: 3%;
}

.startup-celestial {
  z-index: 1;
  background: #fff4c9;
  border-radius: 50%;
  width: 84px;
  height: 84px;
  margin-bottom: 26px;
  position: relative;
  box-shadow: 0 0 46px #ffeaa766;
}

.startup-celestial:before, .startup-celestial:after, .startup-celestial i:before, .startup-celestial i:after {
  content: "";
  opacity: .8;
  background: #fff4c9;
  border-radius: 999px;
  width: 112px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.startup-celestial:after {
  transform: translate(-50%, -50%)rotate(45deg);
}

.startup-celestial i:before {
  transform: translate(-50%, -50%)rotate(90deg);
}

.startup-celestial i:after {
  transform: translate(-50%, -50%)rotate(135deg);
}

.evening .startup-celestial, .night .startup-celestial {
  background: #f7f1d3;
  overflow: hidden;
  box-shadow: 0 0 46px #d8d0ff66;
}

.evening .startup-celestial:before, .evening .startup-celestial:after, .evening .startup-celestial i:before, .evening .startup-celestial i:after, .night .startup-celestial:before, .night .startup-celestial:after, .night .startup-celestial i:before, .night .startup-celestial i:after {
  display: none;
}

.evening .startup-celestial i, .night .startup-celestial i {
  background: #29264d;
  border-radius: 50%;
  width: 78px;
  height: 78px;
  position: absolute;
  top: -9px;
  left: 28px;
}

.early-morning {
  background: radial-gradient(circle at 50% 31%, #9480b8, #3c3768 68%);
}

.afternoon {
  background: radial-gradient(circle at 50% 31%, #6d89b5, #302e63 70%);
}

.evening {
  background: radial-gradient(circle at 50% 31%, #80658e, #292442 70%);
}

.startup-progress {
  z-index: 2;
  left: clamp(24px, 8vw, 110px);
  right: clamp(24px, 8vw, 110px);
  bottom: max(34px,env(safe-area-inset-bottom));
  background: #ffffff2c;
  border-radius: 999px;
  height: 5px;
  position: absolute;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #17132b40;
}

.startup-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #fff8c9, #fff, #d9d2ff);
  width: 38%;
  height: 100%;
  animation: 1.2s ease-in-out infinite startupLoading;
  display: block;
  box-shadow: 0 0 16px #fff9;
}

.startup-actions {
  z-index: 2;
  gap: 9px;
  margin-top: 24px;
  display: flex;
  position: relative;
}

.startup-actions button {
  color: #fff;
  min-width: 105px;
  min-height: 42px;
  font: 800 10px var(--font-body);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff20;
  border: 1px solid #ffffff4d;
  border-radius: 12px;
  padding: 0 16px;
}

.startup-actions button:first-child {
  color: #4e4290;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 9px 24px #17132b30;
}

@keyframes startupEnter {
  from {
    opacity: 0;
    transform: scale(1.015);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes startupLoading {
  0% {
    transform: translateX(-115%);
  }

  55% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(285%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .startup-welcome {
    animation: none;
  }

  .startup-progress i {
    animation-duration: 2.4s;
  }
}

.quick-paid-button {
  color: #23795f;
  cursor: pointer;
  background: #eaf8f3;
  border: 1px solid #bfe5d7;
  border-radius: 9px;
  width: 100%;
  min-height: 34px;
  margin-top: 11px;
  font-size: 10px;
  font-weight: 850;
  transition: transform .18s, box-shadow .18s;
}

.quick-paid-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px #2fa67f20;
}

.quick-reminder-panel {
  background: linear-gradient(145deg, #f7f4ff, #fff);
  border: 1px solid #ddd6ff;
  border-radius: 13px;
  gap: 11px;
  margin: 16px 0;
  padding: 14px;
  display: grid;
}

.quick-reminder-panel > div {
  gap: 4px;
  display: grid;
}

.quick-reminder-panel b {
  font-size: 11px;
}

.quick-reminder-panel small {
  color: #817a91;
  font-size: 9px;
  line-height: 1.45;
}

.quick-reminder-panel nav {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid;
}

.quick-reminder-panel button {
  min-height: 34px;
  color: var(--violet);
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcd5fa;
  border-radius: 9px;
  padding: 7px;
  font-size: 9px;
  font-weight: 850;
}

.quick-reminder-panel button.active {
  color: #267c61;
  background: #eaf8f3;
  border-color: #bfe5d7;
}

.quick-reminder-panel button:disabled {
  opacity: .65;
  cursor: default;
}

@media (max-width: 520px) {
  .quick-reminder-panel nav {
    grid-template-columns: 1fr;
  }

  .quick-reminder-panel button {
    min-height: 40px;
  }
}

.release-highlight-list {
  gap: 13px;
  display: grid;
}

.release-highlight-list article {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  display: grid;
}

.release-highlight-icon {
  width: 42px;
  height: 42px;
  color: var(--violet);
  background: linear-gradient(145deg, #f0edff, #faf9ff);
  border: 1px solid #e8e3fa;
  border-radius: 13px;
  place-items: center;
  display: grid;
  box-shadow: 0 7px 18px #6557d917;
}

.release-icon {
  filter: drop-shadow(0 0 5px #806ef36e);
  background: currentColor;
  width: 21px;
  height: 21px;
  display: block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.release-app-icon {
  object-fit: cover;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: block;
  box-shadow: 0 5px 12px #6557d940;
}

.release-highlight-list h3 {
  font: 790 13px/1.25 var(--font-display);
  letter-spacing: -.2px;
  margin: 1px 0 3px;
}

.release-highlight-list p {
  color: #7e7889 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.release-timeline {
  gap: 21px;
  display: grid;
}

.release-entry {
  background: linear-gradient(145deg, #fff, #fbfaff);
  border-radius: 18px;
  box-shadow: 0 13px 36px #332d4a0c;
  border: 1px solid #e5e0ef !important;
  margin: 0 !important;
  padding: 25px !important;
}

.release-entry > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.release-entry > header > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.release-entry > header h2 {
  margin: 3px 0 0 !important;
  font-size: 22px !important;
}

.release-entry time {
  color: #8f8999;
  flex: none;
  font-size: 11px;
  font-weight: 750;
}

.release-latest {
  letter-spacing: .7px;
  color: #267c61;
  background: #e6f7f0;
  border-radius: 999px;
  align-items: center;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
}

.release-summary {
  color: #5f5969 !important;
  margin: 11px 0 7px !important;
  font-size: 13px !important;
}

.release-metadata {
  color: #938d9e;
  flex-wrap: wrap;
  gap: 7px 15px;
  margin-bottom: 19px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.release-timeline.compact {
  overscroll-behavior: contain;
  max-height: min(62dvh, 610px);
  padding-right: 4px;
  overflow: auto;
}

.release-entry > header + .release-highlight-list {
  margin-top: 18px;
}

.release-timeline.compact .release-entry {
  padding: 18px !important;
}

.release-timeline.compact .release-entry > header h2 {
  font-size: 18px !important;
}

.release-public-link {
  color: var(--violet);
  text-align: center;
  text-underline-offset: 3px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 850;
  display: block;
}

.toolbox-legal-links button {
  color: var(--violet);
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 800;
}

.dialog-release-notes {
  width: min(720px, 100%);
}

@media (max-width: 620px) {
  .release-highlight-list {
    gap: 11px;
  }

  .release-highlight-list article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
  }

  .release-highlight-icon {
    border-radius: 12px;
    width: 38px;
    height: 38px;
  }

  .release-entry {
    padding: 20px 17px !important;
  }

  .release-entry > header {
    flex-direction: column;
    gap: 8px;
  }

  .release-entry > header h2 {
    font-size: 19px !important;
  }

  .release-summary {
    font-size: 12px !important;
  }
}

.account-celebration {
  --celebration-accent: #9a7cff;
  z-index: 180;
  padding: max(24px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));
  color: #fff;
  opacity: 1;
  isolation: isolate;
  background: radial-gradient(circle at 50% 40%, #6a4ccc 0, #35236d 42%, #17122d 100%);
  place-items: center;
  transition: opacity .9s;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.account-celebration.plus-celebration {
  --celebration-accent: #ffd36e;
  background: radial-gradient(circle at 50% 40%, #76572c 0, #322815 43%, #151109 100%);
}

.account-celebration.leaving {
  opacity: 0;
  pointer-events: none;
}

.celebration-content {
  z-index: 4;
  text-align: center;
  justify-items: center;
  width: min(520px, 100%);
  animation: .8s cubic-bezier(.2, .85, .25, 1) both celebrationRise;
  display: grid;
  position: relative;
}

.celebration-eyebrow {
  color: #eee9ff;
  letter-spacing: 1.7px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff10;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  margin-bottom: 18px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 900;
}

.plus-celebration .celebration-eyebrow {
  color: #ffe6a9;
  background: #ffd36e12;
  border-color: #ffd36e55;
}

.celebration-icon-wrap {
  width: 112px;
  height: 112px;
  box-shadow: 0 22px 55px #09061478,0 0 48px var(--celebration-accent);
  border-radius: 31px;
  margin-bottom: 22px;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .celebration-icon-wrap {
    box-shadow: 0 22px 55px #09061478,0 0 48px color-mix(in srgb,var(--celebration-accent) 48%,transparent);
  }
}

.celebration-icon-wrap {
  animation: 2.4s ease-in-out infinite celebrationFloat;
}

.celebration-icon-wrap:before, .celebration-icon-wrap:after {
  content: "";
  border: 1px solid var(--celebration-accent);
  position: absolute;
  inset: -16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .celebration-icon-wrap:before, .celebration-icon-wrap:after {
    border: 1px solid color-mix(in srgb,var(--celebration-accent) 45%,transparent);
  }
}

.celebration-icon-wrap:before, .celebration-icon-wrap:after {
  border-radius: 42px;
  animation: 2.2s ease-out infinite celebrationRing;
}

.celebration-icon-wrap:after {
  animation-delay: .65s;
  inset: -32px;
}

.celebration-app-icon {
  background: url("/goalbay-app-icon-v2.png") center / cover no-repeat;
  border-radius: 31px;
  width: 100%;
  height: 100%;
  display: block;
}

.celebration-icon-wrap span {
  color: #2b2152;
  letter-spacing: 1.3px;
  background: #fff;
  border-radius: 999px;
  min-width: 66px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 950;
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px #100b2566;
}

.plus-celebration .celebration-icon-wrap span {
  color: #47330a;
  background: #ffd978;
}

.celebration-content h1 {
  font: 850 clamp(32px,7vw,54px)/1 var(--font-display);
  letter-spacing: -1.8px;
  text-shadow: 0 8px 28px #0b071d75;
  margin: 0;
}

.celebration-content h2 {
  color: #ddd4ff;
  font: 750 clamp(20px,4.5vw,30px)/1.15 var(--font-display);
  letter-spacing: -.6px;
  margin: 10px 0 13px;
}

.plus-celebration .celebration-content h2 {
  color: #ffe2a0;
}

.celebration-content p {
  color: #d4cce7;
  max-width: 420px;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.plus-celebration .celebration-content p {
  color: #e6d9bd;
}

.celebration-orbit {
  z-index: 1;
  border: 1px solid #ffffff17;
  border-radius: 50%;
  animation: 13s linear infinite celebrationSpin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.celebration-orbit:after {
  content: "";
  background: var(--celebration-accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 18px var(--celebration-accent);
  border-radius: 50%;
  position: absolute;
  top: 14%;
  left: 9%;
}

.orbit-one {
  aspect-ratio: 1;
  width: min(78vw, 700px);
}

.orbit-two {
  aspect-ratio: 1;
  width: min(105vw, 940px);
  animation-duration: 19s;
  animation-direction: reverse;
}

.celebration-sparkles {
  z-index: 2;
  position: absolute;
  inset: 0;
}

.celebration-sparkles i {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 16px var(--celebration-accent);
  background: #e6dcff;
  border-radius: 50%;
  animation: 1.5s ease-in-out infinite alternate celebrationTwinkle;
  position: absolute;
}

.plus-celebration .celebration-sparkles i {
  background: #ffe5a5;
}

.celebration-sparkles i:first-child {
  top: 18%;
  left: 9%;
}

.celebration-sparkles i:nth-child(2) {
  animation-delay: .2s;
  top: 72%;
  left: 23%;
}

.celebration-sparkles i:nth-child(3) {
  animation-delay: .5s;
  top: 13%;
  left: 38%;
}

.celebration-sparkles i:nth-child(4) {
  animation-delay: .8s;
  top: 19%;
  left: 67%;
}

.celebration-sparkles i:nth-child(5) {
  animation-delay: .3s;
  top: 34%;
  left: 84%;
}

.celebration-sparkles i:nth-child(6) {
  animation-delay: .6s;
  top: 76%;
  left: 91%;
}

.celebration-sparkles i:nth-child(7) {
  animation-delay: 1s;
  top: 86%;
  left: 73%;
}

.celebration-sparkles i:nth-child(8) {
  animation-delay: .9s;
  top: 49%;
  left: 13%;
}

.celebration-sparkles i:nth-child(9) {
  animation-delay: .15s;
  top: 91%;
  left: 52%;
}

.celebration-sparkles i:nth-child(10) {
  animation-delay: .7s;
  top: 7%;
  left: 58%;
}

.celebration-sparkles i:nth-child(11) {
  animation-delay: .4s;
  top: 89%;
  left: 31%;
}

.celebration-sparkles i:nth-child(12) {
  animation-delay: 1.1s;
  top: 57%;
  left: 79%;
}

.celebration-progress {
  z-index: 5;
  left: max(28px, 7vw);
  right: max(28px, 7vw);
  bottom: max(28px,env(safe-area-inset-bottom));
  background: #ffffff1c;
  border-radius: 999px;
  height: 4px;
  position: absolute;
  overflow: hidden;
}

.celebration-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg,#fff,var(--celebration-accent));
  transform-origin: 0;
  width: 100%;
  height: 100%;
  animation: 6s linear both celebrationProgress;
  display: block;
}

@keyframes celebrationRise {
  from {
    opacity: 0;
    transform: translateY(24px)scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes celebrationFloat {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes celebrationRing {
  0% {
    opacity: .8;
    transform: scale(.78);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes celebrationSpin {
  to {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

@keyframes celebrationTwinkle {
  from {
    opacity: .22;
    transform: scale(.65);
  }

  to {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes celebrationProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (max-width: 620px) {
  .celebration-icon-wrap {
    border-radius: 27px;
    width: 94px;
    height: 94px;
  }

  .celebration-app-icon {
    border-radius: 27px;
  }

  .celebration-content p {
    max-width: 330px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-content, .celebration-icon-wrap, .celebration-icon-wrap:before, .celebration-icon-wrap:after, .celebration-orbit, .celebration-sparkles i {
    animation: none !important;
  }

  .celebration-progress i {
    animation-duration: 2.6s;
  }

  .account-celebration {
    transition-duration: .35s;
  }
}

.space-modules {
  justify-content: center;
  gap: 5px;
  margin: 8px auto 14px;
  padding: 0 12px;
  display: flex;
}

.space-modules button {
  color: #8a8393;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  min-width: 76px;
  min-height: 32px;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 850;
}

.space-modules button.active {
  color: #5b49c8;
  background: #fff;
  border-color: #dfd8f0;
  box-shadow: 0 5px 16px #30264d0d;
}

.inner-navigation {
  scrollbar-width: none;
  background: #f7f5fbcc;
  border: 1px solid #ece7f3;
  border-radius: 14px;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  box-shadow: 0 9px 25px #3427530b;
}

.inner-navigation::-webkit-scrollbar {
  display: none;
}

.space-modules.icon-tabs button {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 9px;
  display: flex;
}

.space-modules.icon-tabs .app-icon {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
}

.profile-chip .avatar {
  overflow: hidden;
}

.profile-chip .avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-avatar-stack {
  justify-content: center;
  align-items: end;
  height: 92px;
  margin: 4px 0 16px;
  display: flex;
}

.home-avatar-stack img {
  object-fit: contain;
  filter: drop-shadow(0 12px 18px #46356a24);
  width: 78px;
  height: 78px;
  margin: 0 -13px;
}

.home-upgrade-content .home-avatar-stack + h2 {
  margin-top: 0;
}

.pricing-avatar-stack img {
  width: 66px;
  height: 66px;
  margin: 0 -12px;
}

.pricing-avatar-stack img:nth-child(n+5) {
  display: block;
}

.profile-identity-summary {
  align-items: center;
  gap: 13px;
  margin: 10px 82px 15px 0;
  display: flex;
}

.profile-identity-summary h2 {
  margin: 0 0 4px;
}

.profile-identity-summary p {
  color: #898293;
  margin: 0;
  font-size: 10px;
}

.profile-top-avatar {
  object-fit: contain;
  background: linear-gradient(145deg, #faf8ff, #f0ecfa);
  border: 1px solid #e4dff0;
  border-radius: 20px;
  width: 68px;
  height: 68px;
  position: absolute;
  top: 56px;
  right: 24px;
  box-shadow: 0 12px 28px #35294e18;
}

.home-access-verified {
  color: #276e57;
  background: #effaf5;
  border: 1px solid #bfe5d5;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 4px;
  padding: 13px 14px;
  display: flex;
}

.home-access-verified b {
  font-size: 10px;
}

.home-access-verified span {
  font-size: 9px;
  line-height: 1.45;
}

.family-workspace {
  padding: 18px 0 100px;
}

.family-heading {
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 22px;
  display: flex;
}

.family-heading h2 {
  font: 800 32px/1 var(--font-display);
  margin: 6px 0 0;
}

.family-member-stack {
  display: flex;
}

.family-member-stack img {
  object-fit: cover;
  background: #eee9ff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  margin-left: -9px;
  box-shadow: 0 6px 14px #30264d20;
}

.family-readonly {
  color: #704e16;
  background: #fff8e9;
  border: 1px solid #f0d2a4;
  border-radius: 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 14px;
  margin-bottom: 16px;
  padding: 13px 15px;
  display: grid;
}

.family-readonly b {
  font-size: 12px;
}

.family-readonly span {
  font-size: 10px;
}

.family-readonly button {
  color: #fff;
  background: #805f25;
  border: 0;
  border-radius: 9px;
  grid-area: 1 / 2 / 3;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 850;
}

.family-visual-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.family-visual-grid article {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, #ffffffd9, #f5f1ffb8);
  border: 1px solid #ffffffb8;
  border-radius: 25px;
  min-height: 280px;
  padding: 22px;
  box-shadow: 0 20px 55px #3b2e6812;
}

.family-visual-grid article > .app-icon {
  color: #6955da;
  width: 27px;
  height: 27px;
}

.family-visual-grid small {
  color: #8d859d;
  letter-spacing: 1px;
  margin-top: 22px;
  font-size: 9px;
  font-weight: 900;
  display: block;
}

.family-visual-grid strong {
  font: 850 31px var(--font-display);
  margin: 8px 0 14px;
  display: block;
}

.family-visual-grid svg {
  width: 100%;
  height: 80px;
  overflow: visible;
}

.family-visual-grid svg path {
  fill: none;
  stroke: #6955da;
  stroke-width: 4px;
  stroke-linecap: round;
}

.family-visual-grid article > button, .family-empty > button {
  color: #fff;
  background: #6557d9;
  border: 0;
  border-radius: 11px;
  margin-top: 18px;
  padding: 11px 15px;
  font-size: 10px;
  font-weight: 850;
}

.family-visual-grid button:disabled {
  opacity: .45;
}

.empty-chart {
  align-items: end;
  gap: 8px;
  height: 78px;
  display: flex;
}

.empty-chart i {
  background: linear-gradient(#8e7cf0, #d6cff9);
  border-radius: 8px 8px 3px 3px;
  flex: 1;
}

.empty-chart i:first-child {
  height: 32%;
}

.empty-chart i:nth-child(2) {
  height: 58%;
}

.empty-chart i:nth-child(3) {
  height: 44%;
}

.empty-chart i:nth-child(4) {
  height: 76%;
}

.family-visual-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.family-visual-grid.single article {
  min-height: 230px;
}

.workspace-callout {
  background: linear-gradient(135deg, #fff, #f5f1ff);
  border: 1px solid #e6e0f0;
  border-radius: 18px;
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.workspace-callout > .app-icon {
  color: #6655d9;
  width: 28px;
  height: 28px;
}

.workspace-callout > span {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.workspace-callout b {
  font-size: 12px;
}

.workspace-callout small {
  color: #81798e;
  font-size: 10px;
}

.workspace-callout button {
  color: #fff;
  background: #6557d9;
  border: 0;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 10px;
  font-weight: 850;
}

.workspace-callout button:disabled {
  opacity: .45;
}

.family-locked-preview {
  background: linear-gradient(145deg, #fffd, #f3efffdd);
  border: 1px solid #e7e0f3;
  border-radius: 28px;
  box-shadow: 0 24px 70px #37286013;
}

.family-guidance {
  margin-top: 0;
}

.family-empty {
  text-align: center;
  place-content: center;
  justify-items: center;
  min-height: 430px;
  display: grid;
}

.family-empty h2, .family-empty h3 {
  font: 800 28px var(--font-display);
  margin: 9px 0;
}

.family-empty p {
  color: #7e778a;
  max-width: 360px;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.family-empty.compact {
  min-height: 320px;
}

.family-empty.compact > .app-icon {
  color: #6b58da;
  width: 38px;
  height: 38px;
}

.compact-records {
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.compact-records article {
  background: #ffffffcf;
  border: 1px solid #e7e1ee;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  display: flex;
  box-shadow: 0 7px 18px #30264d09;
}

.compact-records span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.compact-records b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.compact-records small {
  color: #8a8393;
  font-size: 9px;
}

.compact-records strong {
  flex: none;
  font-size: 11px;
}

.finance-composer {
  z-index: 151;
}

.finance-composer .check {
  align-items: center;
  gap: 8px;
  display: flex;
}

.finance-composer .check input {
  width: 18px;
  height: 18px;
}

.personal-spend {
  padding-top: 0;
}

.family-tool-sections, .tool-section {
  gap: 14px;
  display: grid;
}

.tool-section h3 {
  color: #514963;
  font: 800 13px var(--font-display);
  letter-spacing: -.1px;
  margin: 22px 0 10px;
}

.tool-section > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.tool-section button {
  color: #332d42;
  text-align: left;
  background: #fff;
  border: 1px solid #e5e0ef;
  border-radius: 16px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 104px;
  padding: 14px;
  display: grid;
}

.tool-section button > span {
  color: #6557d9;
  background: #f0ecff;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.tool-section button .app-icon {
  width: 19px;
  height: 19px;
}

.tool-section button i {
  color: #7869d9;
  font-style: normal;
}

.profile-identity-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.profile-avatar-picker {
  border: 0;
  margin: 0;
  padding: 0;
}

.profile-avatar-picker legend {
  color: #50485e;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 800;
}

.profile-avatar-picker > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.profile-avatar-picker button {
  color: #716a7b;
  background: #fff;
  border: 1px solid #e0daeb;
  border-radius: 13px;
  padding: 7px;
}

.profile-avatar-picker button.active {
  border-color: #6557d9;
  box-shadow: 0 0 0 2px #6557d91f;
}

.profile-avatar-picker img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  display: block;
}

.profile-avatar-picker span {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8px;
  font-weight: 800;
  display: block;
  overflow: hidden;
}

.dob-selects {
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 7px;
  display: grid;
}

.dob-selects select:disabled {
  opacity: .55;
}

.dob-selects + .field-help {
  color: #8c8497;
  letter-spacing: .6px;
  margin-top: 1px;
  font-size: 8px;
}

.home-member-list {
  gap: 8px;
  margin: 18px 0;
  display: grid;
}

.home-member-list article {
  background: #fff;
  border: 1px solid #e5dfed;
  border-radius: 14px;
  align-items: center;
  gap: 11px;
  padding: 10px;
  display: flex;
}

.home-member-list img {
  object-fit: cover;
  background: #f1edff;
  border-radius: 13px;
  width: 48px;
  height: 48px;
}

.home-member-list span {
  display: grid;
}

.home-member-list b {
  text-transform: capitalize;
}

.home-member-list small {
  color: #898291;
  text-transform: capitalize;
  margin-top: 3px;
}

.home-member-actions {
  grid-template-columns: 1fr;
  gap: 8px;
  display: grid;
}

.home-member-actions button, .home-inline-form > button {
  color: #fff;
  background: #6557d9;
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 850;
}

.home-inline-form {
  background: #faf8ff;
  border: 1px solid #e5dff0;
  border-radius: 16px;
  gap: 10px;
  margin-top: 16px;
  padding: 15px;
  display: grid;
}

.home-inline-form label {
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.home-inline-form input, .home-inline-form select {
  background: #fff;
  border: 1px solid #dcd5e7;
  border-radius: 9px;
  min-height: 44px;
  padding: 0 11px;
  font-size: 11px;
}

.home-invite-link {
  background: #fff;
  border: 1px solid #ded7ec;
  border-radius: 14px;
  justify-items: center;
  gap: 8px;
  padding: 13px;
  display: grid;
}

.home-invite-link input {
  width: 100%;
  font-size: 9px;
}

.home-invite-link small {
  color: #857d90;
  text-align: center;
}

.home-invite-code-row {
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  width: 100%;
  display: grid;
}

.home-invite-code {
  font: 800 26px/1 var(--font-display);
  letter-spacing: 7px;
  color: #332d55;
  grid-column: 2;
  justify-self: center;
  padding: 4px 0;
}

.copy-code-button {
  color: #5e4fd4;
  cursor: pointer;
  background: #eeeaff;
  border: 0;
  border-radius: 9px;
  grid-column: 3;
  justify-self: end;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.copy-glyph {
  width: 13px;
  height: 13px;
  display: block;
  position: relative;
}

.copy-glyph:before, .copy-glyph:after {
  content: "";
  border: 1.6px solid;
  border-radius: 3px;
  width: 9px;
  height: 9px;
  position: absolute;
}

.copy-glyph:before {
  background: #fff;
  top: 4px;
  left: 0;
}

.copy-glyph:after {
  background: none;
  top: 0;
  right: 0;
}

.code-input {
  font: 800 18px/1 var(--font-display);
  letter-spacing: 6px;
  text-align: center;
}

.mini-avatar-picker {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.mini-avatar-picker button {
  background: #fff;
  border: 1px solid #ded7e8;
  border-radius: 12px;
  width: 66px;
  padding: 4px;
}

.mini-avatar-picker button.active {
  border-color: #6557d9;
}

.mini-avatar-picker img {
  width: 100%;
  display: block;
}

.compact-member-list {
  gap: 6px;
  margin: 12px 0;
}

.compact-member-list article {
  gap: 9px;
  padding: 8px;
}

.compact-member-list img {
  border-radius: 10px;
  width: 36px;
  height: 36px;
}

.compact-member-list b {
  font-size: 11px;
}

.compact-member-list small {
  margin-top: 1px;
  font-size: 9px;
}

.compact-inline-form {
  border-radius: 13px;
  gap: 7px;
  margin-top: 12px;
  padding: 11px;
}

.compact-inline-form label {
  font-size: 9px;
}

.compact-inline-form > button {
  min-height: 44px;
  font-size: 10.5px;
}

.compact-invite-link {
  border-radius: 12px;
  gap: 5px;
  padding: 9px;
}

.compact-invite-link .home-invite-code {
  letter-spacing: 5px;
  font-size: 22px;
}

.compact-invite-link .home-invite-code-row {
  grid-template-columns: 32px 1fr 32px;
}

.compact-invite-link .copy-code-button {
  width: 32px;
  height: 32px;
}

.danger-button, .home-member-list article > button, .reserve-extra-list button, .bug-photo-list button, .category-edit-list button, .ledger-manage-list button.danger, .transaction-delete, .record-management button.danger, .reminder-list nav button.danger, .delete-primary, .trash-clean-button {
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(145deg, #dc5c70, #b83f55);
  border: 1px solid #b83f55;
  border-radius: 10px;
  min-height: 34px;
  padding: 7px 13px;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.15;
  transition: transform .16s, box-shadow .16s, filter .16s;
  box-shadow: 0 7px 16px #b83f5530;
}

.home-member-list article > button {
  flex: none;
  margin-left: auto;
}

.danger-button:hover, .home-member-list article > button:hover, .reserve-extra-list button:hover, .bug-photo-list button:hover, .category-edit-list button:hover, .ledger-manage-list button.danger:hover, .transaction-delete:hover, .record-management button.danger:hover, .reminder-list nav button.danger:hover, .delete-primary:hover, .trash-clean-button:hover {
  filter: saturate(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px #b83f5540;
}

.danger-button:focus-visible, .home-member-list article > button:focus-visible, .reserve-extra-list button:focus-visible, .bug-photo-list button:focus-visible, .category-edit-list button:focus-visible, .ledger-manage-list button.danger:focus-visible, .transaction-delete:focus-visible, .record-management button.danger:focus-visible, .reminder-list nav button.danger:focus-visible, .delete-primary:focus-visible, .trash-clean-button:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #f7c7d0;
}

.danger-button:disabled, .home-member-list article > button:disabled, .reserve-extra-list button:disabled, .bug-photo-list button:disabled, .category-edit-list button:disabled, .ledger-manage-list button.danger:disabled, .transaction-delete:disabled, .record-management button.danger:disabled, .reminder-list nav button.danger:disabled, .delete-primary:disabled, .trash-clean-button:disabled {
  opacity: .42;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 620px) {
  .inner-navigation {
    justify-content: center;
    max-width: 100%;
    margin: 8px 0 12px;
  }

  .inner-navigation button {
    min-width: max-content;
    padding-inline: 13px;
  }

  .family-workspace {
    padding: 6px 14px 98px;
  }

  .family-heading h2 {
    font-size: 26px;
  }

  .family-visual-grid {
    grid-template-columns: 1fr;
  }

  .family-visual-grid article {
    min-height: 220px;
  }

  .tool-section > div {
    grid-template-columns: 1fr;
  }

  .tool-section button {
    min-height: 70px;
  }

  .profile-identity-grid {
    grid-template-columns: 1fr;
  }

  .profile-avatar-picker > div {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-avatar-stack img {
    width: 66px;
    height: 66px;
    margin: 0 -12px;
  }

  .workspace-callout {
    padding: 14px;
  }

  .workspace-callout small {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.security-gate {
  background: radial-gradient(circle at 15% 10%, #ece7ff 0, #0000 34%), linear-gradient(145deg, #f9f7ff, #f1f4fb);
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
}

.security-gate-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e3def2;
  border-radius: 28px;
  width: min(100%, 480px);
  padding: 42px;
  box-shadow: 0 24px 80px #261f4b24;
}

.security-gate-card .brand-mark {
  margin: 0 auto 20px;
  display: grid;
}

.security-gate-card h1 {
  color: #211c3a;
  margin: 8px 0 12px;
  font-size: clamp(30px, 6vw, 42px);
}

.security-gate-card > p {
  color: #676078;
  line-height: 1.6;
}

.security-gate-card > small {
  color: #817a90;
  margin-top: 20px;
  line-height: 1.5;
  display: block;
}

.security-code-form {
  text-align: left;
  gap: 14px;
  margin-top: 24px;
  display: grid;
}

.security-code-form label {
  color: #494158;
  gap: 8px;
  font-weight: 700;
  display: grid;
}

.security-code-form input {
  color: #211c3a;
  letter-spacing: .24em;
  text-align: center;
  background: #fff;
  border: 1px solid #d8d2e5;
  border-radius: 14px;
  width: 100%;
  padding: 15px 16px;
  font: 700 22px / 1 inherit;
}

.security-code-form input:focus {
  border-color: #705be0;
  outline: 3px solid #705be02b;
}

.totp-enrollment {
  background: #faf9ff;
  border: 1px solid #e4dff0;
  border-radius: 20px;
  justify-items: center;
  gap: 16px;
  margin: 22px 0;
  padding: 20px;
  display: grid;
}

.totp-enrollment img {
  border: 10px solid #fff;
  border-radius: 12px;
  width: min(220px, 100%);
  height: auto;
}

.totp-enrollment div {
  text-align: center;
  gap: 8px;
  width: 100%;
  display: grid;
}

.totp-enrollment code {
  color: #3f337c;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  background: #eeeafd;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
}

.security-status-card {
  background: #faf9ff;
  border: 1px solid #e1dced;
  border-radius: 18px;
  gap: 11px;
  margin: 22px 0;
  padding: 20px;
  display: grid;
}

.security-status-card > span {
  letter-spacing: .1em;
  border-radius: 999px;
  justify-self: start;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
}

.security-status-card > span.protected {
  color: #17724b;
  background: #dff7ec;
}

.security-status-card > span.recommended {
  color: #925817;
  background: #fff0d8;
}

.security-status-card strong {
  color: #28213f;
  font-size: 20px;
}

.security-status-card p {
  color: #696276;
  margin: 0;
  line-height: 1.5;
}

.security-status-card small {
  color: #817a90;
}

.security-actions {
  gap: 10px;
  margin: 20px 0;
  display: grid;
}

.security-actions button {
  color: #29233d;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ded8e8;
  border-radius: 14px;
  gap: 4px;
  padding: 15px 16px;
  display: grid;
}

.security-actions button:hover {
  background: #faf9ff;
  border-color: #8b7ae8;
}

.security-actions button:disabled {
  opacity: .6;
  cursor: wait;
}

.security-actions button b {
  font-size: 14px;
}

.security-actions button span {
  color: #746d80;
  font-size: 12px;
  line-height: 1.45;
}

.security-actions button.danger {
  color: #8f3046;
  background: #fffafb;
  border-color: #f0cbd4;
}

.security-warning {
  color: #7d7489;
  margin-top: 16px;
  line-height: 1.5;
  display: block;
}

@media (max-width: 620px) {
  .security-gate {
    padding: 14px;
  }

  .security-gate-card {
    border-radius: 22px;
    padding: 30px 20px;
  }

  .totp-enrollment {
    padding: 14px;
  }
}

.profile-details .profile-currency-row {
  min-height: 52px;
}

.currency-value-button {
  cursor: pointer;
  color: var(--ink);
  background: none;
  border: 0;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  display: flex;
}

.currency-value-button b {
  font-size: 11px;
  font-weight: 750;
}

.currency-value-button i {
  color: var(--violet);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.currency-value-button:hover b {
  color: var(--violet);
}

.currency-picker {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 20px 0;
  display: grid;
}

.currency-picker button {
  min-width: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e1dcea;
  border-radius: 13px;
  grid-template-rows: auto auto;
  grid-template-columns: 42px 1fr;
  column-gap: 10px;
  padding: 12px;
  display: grid;
  position: relative;
}

.currency-picker button > span {
  width: 42px;
  height: 42px;
  color: var(--violet);
  background: #f3f0ff;
  border-radius: 11px;
  grid-row: 1 / 3;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  display: grid;
}

.currency-picker button > b {
  align-self: end;
  font-size: 11px;
}

.currency-picker button > small {
  color: #8a8494;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: start;
  font-size: 9px;
  overflow: hidden;
}

.currency-picker button > i {
  color: var(--violet);
  font-size: 10px;
  font-style: normal;
  position: absolute;
  top: 8px;
  right: 9px;
}

.currency-picker button.selected {
  border-color: var(--violet);
  background: #faf8ff;
  box-shadow: 0 0 0 2px #6557d918;
}

.dialog-currency-picker {
  width: min(520px, 100%);
}

@media (max-width: 420px) {
  .currency-picker {
    grid-template-columns: 1fr;
  }
}

.pulse-home {
  gap: 15px;
  display: grid;
}

.home-kicker {
  color: #928ba5;
  letter-spacing: 1.15px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 900;
}

.money-pulse-card, .metric-card, .home-visual-grid > article {
  -webkit-backdrop-filter: blur(16px);
  background: #ffffffc9;
  border: 1px solid #e5e0ec;
  box-shadow: 0 14px 38px #31274e0c;
}

.money-pulse-card {
  color: #fff;
  font-family: var(--font-home);
  background: radial-gradient(circle at 86% 18%, #8d79f12e, #0000 29%), linear-gradient(135deg, #282442 0%, #3b315f 53%, #6755d9 100%);
  border-radius: 24px;
  padding: 25px 27px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 21px 45px #34285840, 0 0 32px #6557d93a;
}

.pulse-heading {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
  position: relative;
}

.pulse-heading .home-kicker {
  color: #c9c1f4;
}

.pulse-heading h2 {
  font: 760 19px var(--font-display);
  letter-spacing: -.55px;
  white-space: nowrap;
  margin: 4px 0 0;
}

.pulse-heading button {
  color: #fff;
  font-family: var(--font-home);
  cursor: pointer;
  white-space: nowrap;
  background: #ffffff26;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.pulse-balance {
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 18px;
  display: flex;
  position: relative;
}

.pulse-balance > span {
  color: #c8c2db;
  font-size: 11px;
  font-weight: 700;
}

.pulse-balance > strong {
  white-space: nowrap;
  margin-top: 3px;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
}

.pulse-balance > small {
  color: #c8c2da;
  white-space: nowrap;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
}

.money-flow {
  z-index: 1;
  background: none;
  border: 0;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  display: grid;
  position: relative;
}

.money-flow > div, .money-flow > button {
  grid-template-rows: auto auto;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  display: grid;
}

.money-flow > button {
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  transition: opacity .15s;
}

.money-flow > button:hover, .money-flow > button:focus-visible {
  opacity: .78;
}

.money-flow > button .ripple-dot {
  display: none;
}

.money-flow > button.spring-tap {
  animation: none;
}

.money-flow > div > i, .money-flow > button > i {
  border-radius: 10px;
  grid-row: 1 / 3;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.money-flow .income {
  color: #72e1ba;
  background: #2aaa7c2b;
}

.money-flow .spending {
  color: #ffd08c;
  background: #f0a04b2b;
}

.money-flow .saving {
  color: #d8d0ff;
  background: #9d8cff30;
}

.money-flow .app-icon {
  width: 17px;
  height: 17px;
}

.money-flow span {
  color: #bdb7cf;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 750;
}

.money-flow strong {
  text-overflow: ellipsis;
  color: #fff;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.money-flow > b {
  color: #928aa9;
  font-size: 13px;
}

.money-flow:has(.family) {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}

.money-flow .family {
  color: #b8d8ff;
  background: #5f9ce12b;
}

.money-flow .lended {
  color: #e2bfff;
  background: #d9a8ff2b;
}

.pulse-heading .month-switch-header h2 {
  text-align: center;
  min-width: 9ch;
  margin: 0;
}

.home-header {
  font-family: var(--font-home);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.home-header .home-welcome {
  color: var(--ink);
  margin: 0;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 800;
}

.home-profile-button {
  cursor: pointer;
  background: linear-gradient(145deg, #302a55, #6557d9);
  border: none;
  border-radius: 14px;
  flex: 0 0 44px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
  position: relative;
}

.home-profile-button .app-icon {
  color: #fff;
  width: 22px;
  height: 22px;
}

.home-profile-button .nav-profile-avatar {
  border-radius: 14px;
  width: 100%;
  height: 100%;
}

.home-toggle-row {
  font-family: var(--font-home);
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  display: flex;
}

.home-space-pill {
  background: #ece9fb;
  border-radius: 999px;
  gap: 2px;
  padding: 4px;
  display: flex;
}

.home-space-pill button {
  color: #777387;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.home-space-pill button.active {
  background: var(--violet);
  color: #fff;
}

.home-space-pill .app-icon {
  width: 14px;
  height: 14px;
}

.home-space-pill i {
  letter-spacing: .3px;
  opacity: .75;
  margin-left: 4px;
  font-size: 8px;
  font-style: normal;
}

.home-notify-button {
  cursor: pointer;
  background: #ece9fb;
  border: none;
  border-radius: 50%;
  flex: 0 0 36px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.home-notify-button .app-icon {
  width: 16px;
  height: 16px;
  color: var(--violet);
}

.home-comparison-card {
  font-family: var(--font-home);
  background: #efedff;
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 16px 34px #382b6626, 0 0 26px #6557d92e;
}

.home-comparison-legend {
  color: #777387;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px;
  display: flex;
}

.home-comparison-legend i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  font-style: normal;
  display: inline-block;
}

.home-comparison-legend i.last {
  opacity: .5;
  background: #a8a2ba;
}

.home-comparison-legend i.this {
  background: var(--violet);
  margin-left: 10px;
}

.home-comparison-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 10px);
  display: grid;
}

.home-comparison-tile {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  min-width: 0;
  padding: clamp(7px, 2.4vw, 12px) clamp(4px, 1.6vw, 8px);
  box-shadow: 0 8px 18px #382b6624, 0 0 14px #6557d926;
}

.home-comparison-tile .app-icon {
  color: var(--violet);
  width: 18px;
  height: 18px;
  margin-bottom: 5px;
}

.home-comparison-bars {
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin: 4px 0 6px;
  display: flex;
}

.home-comparison-bars b {
  background: var(--violet);
  border-radius: 3px;
  width: clamp(7px, 2.2vw, 12px);
  display: block;
}

.home-comparison-bars span {
  color: #a29cad;
  align-self: center;
  font-size: 10px;
  font-style: normal;
}

.home-comparison-tile strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(11px, 3.2vw, 15px);
  font-weight: 800;
  display: block;
  overflow: hidden;
}

.pulse-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.metric-card {
  text-align: left;
  cursor: pointer;
  border-radius: 19px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 130px;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.metric-card > span {
  color: #817b8e;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 850;
  display: flex;
}

.metric-card > span .app-icon {
  width: 16px;
  height: 16px;
}

.metric-card > strong {
  white-space: nowrap;
  margin-top: 12px;
  font-size: 21px;
}

.metric-card > small {
  color: #9993a3;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 8px;
}

.savings-metric > span {
  color: #5c4ed0;
}

.savings-metric svg {
  width: 43%;
  height: 45px;
  position: absolute;
  bottom: 7px;
  right: 10px;
  overflow: visible;
}

.savings-metric svg polygon {
  fill: #6b59e817;
}

.savings-metric svg polyline {
  fill: none;
  stroke: #6b59e8;
  stroke-width: 2.3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.savings-metric svg circle {
  fill: #fff;
  stroke: #6b59e8;
  stroke-width: 1.6px;
}

.due-metric > span {
  color: #c97c2f;
}

.metric-ring {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 7px;
  position: absolute;
  bottom: 15px;
  right: 16px;
}

.metric-ring i {
  background: #fff;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.spend-metric > span {
  color: #b24f67;
}

.metric-bars {
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  display: flex;
  position: absolute;
  bottom: 15px;
  right: 16px;
}

.metric-bars i {
  background: linear-gradient(#e87691, #f2b0bf);
  border-radius: 4px;
  width: 5px;
}

.metric-bars i:first-child {
  height: 18px;
}

.metric-bars i:nth-child(2) {
  height: 32px;
}

.metric-bars i:nth-child(3) {
  height: 25px;
}

.metric-bars i:nth-child(4) {
  height: 43px;
}

.metric-bars i:nth-child(5) {
  height: 35px;
}

.home-visual-grid {
  grid-template-columns: 1.25fr 1fr .85fr;
  gap: 12px;
  display: grid;
}

.home-visual-grid > article {
  border-radius: 20px;
  flex-direction: column;
  min-width: 0;
  min-height: 238px;
  padding: 18px;
  display: flex;
}

.home-visual-grid header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.home-visual-grid h3 {
  font: 750 14px var(--font-display);
  letter-spacing: -.25px;
  white-space: nowrap;
  margin: 4px 0 0;
}

.home-goal-board header > button {
  width: 44px;
  height: 44px;
  color: var(--violet);
  cursor: pointer;
  background: #f0edff;
  border: 0;
  border-radius: 12px;
  font-size: 17px;
}

.goal-orbits {
  justify-content: space-around;
  gap: 10px;
  margin: auto 0;
  padding: 16px 0 9px;
  display: flex;
}

.goal-orbits > button, .goal-orbits > div {
  background: none;
  border: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.goal-orbits > button {
  cursor: pointer;
}

.goal-orbit {
  border-radius: 50%;
  width: 54px;
  height: 54px;
  padding: 6px;
  display: block;
}

.goal-orbit > i {
  color: #6b59e8;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.goal-orbit .app-icon {
  width: 19px;
  height: 19px;
}

.goal-orbits b {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 76px;
  font-size: 9px;
  overflow: hidden;
}

.goal-orbits small {
  color: #908a9b;
  font-size: 8px;
}

.home-empty-graphic {
  background: #faf9fd;
  border: 1px dashed #ded8e9;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  margin: auto;
  padding: 17px;
  display: flex;
}

.home-empty-graphic > span {
  width: 34px;
  height: 34px;
  color: var(--violet);
  background: #efecff;
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.home-empty-graphic .app-icon {
  width: 18px;
  height: 18px;
}

.home-empty-graphic > b {
  white-space: nowrap;
  font-size: 9px;
}

.home-empty-graphic button {
  background: var(--violet);
  color: #fff;
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 8px;
  font-weight: 800;
}

.home-card-link {
  color: var(--violet);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-top: 1px solid #eeeaf2;
  margin-top: auto;
  padding: 8px 0 0;
  font-size: 9px;
  font-weight: 850;
}

.home-card-link span {
  float: right;
}

.home-plan-visual header > span, .home-schedule-card header > span {
  color: #90899b;
  letter-spacing: .5px;
  white-space: nowrap;
  background: #f0edf5;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 7px;
  font-weight: 900;
}

.home-plan-visual header > span.active {
  color: #278763;
  background: #e7f6ef;
}

.plan-graphic {
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 13px;
  margin: auto 0;
  display: grid;
}

.plan-wheel {
  border-radius: 50%;
  width: 82px;
  height: 82px;
  padding: 12px;
}

.plan-wheel > i {
  background: #fff;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-style: normal;
  display: flex;
}

.plan-wheel strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55px;
  font-size: 9px;
  overflow: hidden;
}

.plan-wheel small {
  color: #9992a4;
  white-space: nowrap;
  font-size: 6px;
}

.plan-graphic > div:last-child {
  gap: 8px;
  display: grid;
}

.plan-graphic > div:last-child > span {
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 6px;
  display: grid;
}

.plan-graphic > div:last-child i {
  background: #d9d4e2;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.plan-graphic b, .plan-graphic strong {
  white-space: nowrap;
  font-size: 8px;
}

.schedule-graphic {
  align-items: center;
  gap: 13px;
  margin: auto 0;
  display: flex;
}

.schedule-graphic > span {
  color: #8c849b;
  background: #f0edf7;
  border-radius: 14px;
  place-items: center;
  width: 47px;
  height: 47px;
  display: grid;
}

.schedule-graphic > span.has-due {
  color: #d58034;
  background: #fff0e4;
}

.schedule-graphic .app-icon {
  width: 22px;
  height: 22px;
}

.schedule-graphic > div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.schedule-graphic strong {
  white-space: nowrap;
  font-size: 18px;
}

.schedule-graphic small {
  color: #9791a0;
  white-space: nowrap;
  font-size: 8px;
}

.schedule-track {
  background: #efecf3;
  border-radius: 10px;
  height: 6px;
  margin-bottom: 18px;
  overflow: hidden;
}

.schedule-track i {
  background: linear-gradient(90deg, #f0a04b, #ec7d5f);
  border-radius: 10px;
  height: 100%;
  display: block;
}

.family-pulse-home .metric-card {
  cursor: default;
}

.family-pulse-home .family-member-stack {
  padding-right: 7px;
}

.family-category-bars {
  gap: 13px;
  margin: auto 0;
  display: grid;
}

.family-category-bars > div {
  gap: 6px;
  display: grid;
}

.family-category-bars span {
  justify-content: space-between;
  gap: 10px;
  font-size: 8px;
  display: flex;
}

.family-category-bars span strong {
  font-size: 8px;
}

.family-category-bars > div > i {
  background: #efecf3;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.family-category-bars em {
  border-radius: 999px;
  height: 100%;
  display: block;
}

.family-recent-list {
  gap: 8px;
  margin: auto 0;
  display: grid;
}

.family-recent-list > div {
  border-bottom: 1px solid #eeeaf2;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  display: flex;
}

.family-recent-list span {
  gap: 2px;
  display: grid;
}

.family-recent-list b, .family-recent-list strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.family-recent-list small {
  color: #938c9e;
  font-size: 7px;
}

.home-spending-insight .schedule-graphic > span {
  color: #c95370;
  background: #fff0f3;
}

.home-spending-insight .schedule-track i {
  background: linear-gradient(90deg, #e75f80, #f2a2b5);
}

.family-reserve-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}

.family-reserve-buttons {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.family-reserve-actions button {
  color: #fff;
  cursor: pointer;
  background: #ffffff12;
  border: 1px solid #ffffff2b;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 8px;
  font-weight: 850;
}

.family-reserve-actions button:disabled {
  opacity: .5;
}

.family-reserve-manager {
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
}

.family-reserve-manager > p {
  color: #817a8e;
  font-size: 10px;
  line-height: 1.55;
}

.reserve-member-breakdown {
  gap: 7px;
  margin: 16px 0;
  display: grid;
}

.reserve-member-breakdown article {
  background: #fbfaff;
  border: 1px solid #e5e0ed;
  border-radius: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  display: grid;
}

.reserve-member-breakdown img {
  object-fit: cover;
  background: #eee9ff;
  border-radius: 12px;
  width: 42px;
  height: 42px;
}

.reserve-member-breakdown span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.reserve-member-breakdown b, .reserve-member-breakdown strong {
  font-size: 10px;
}

.reserve-member-breakdown small {
  text-overflow: ellipsis;
  color: #8b8495;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.reserve-contribution-form {
  background: #fff;
  border: 1px solid #e4deed;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: end;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.reserve-contribution-form.extra {
  grid-template-columns: 1fr 1fr 170px;
  margin-top: 9px;
}

.reserve-contribution-form label {
  color: #625c70;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.reserve-contribution-form label > small {
  color: #9992a3;
  font-size: 7px;
}

.reserve-contribution-form input {
  height: 44px;
  font: inherit;
  border: 1px solid #ddd8e6;
  border-radius: 9px;
  padding: 0 11px;
}

.reserve-contribution-form .modal-primary {
  margin: 0;
}

.reserve-extra-list {
  background: #f7f4ff;
  border-radius: 12px;
  gap: 7px;
  margin-top: 13px;
  padding: 13px;
  display: grid;
}

.reserve-extra-list > b {
  font-size: 9px;
}

.reserve-extra-list > span {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  display: grid;
}

.reserve-extra-list i {
  text-overflow: ellipsis;
  color: #777082;
  white-space: nowrap;
  font-size: 8px;
  font-style: normal;
  overflow: hidden;
}

.reserve-extra-list strong {
  font-size: 9px;
}

.reserve-extra-list button {
  color: #a34e63;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 8px;
  font-weight: 800;
}

.reserve-choice-modal {
  width: min(420px, 100%);
}

.reserve-choice-options {
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.reserve-choice-options button {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e3deeb;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.reserve-choice-options button:hover {
  border-color: var(--violet);
  box-shadow: 0 6px 16px #30284b0f;
}

.reserve-choice-options b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  display: block;
}

.reserve-choice-options small {
  color: #918b9c;
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.reserve-choice-icon {
  background: var(--violet-soft);
  width: 38px;
  height: 38px;
  color: var(--violet);
  border-radius: 11px;
  flex: none;
  place-items: center;
  display: grid;
}

@media (max-width: 980px) {
  .home-visual-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-schedule-card {
    grid-column: 1 / -1;
    min-height: 185px;
  }

  .schedule-graphic {
    margin: 23px 0;
  }

  .pulse-balance > small {
    white-space: normal;
  }
}

@media (max-width: 620px) {
  .pulse-home {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .money-pulse-card {
    border-radius: 20px;
    padding: 19px 17px;
  }

  .pulse-heading h2 {
    font-size: 16px;
  }

  .pulse-heading button {
    padding: 7px 9px;
  }

  .pulse-balance {
    margin-top: 19px;
  }

  .pulse-balance > strong {
    font-size: 31px;
  }

  .money-flow {
    gap: 7px;
    margin-top: 18px;
    padding: 10px;
  }

  .money-flow > div, .money-flow > button {
    grid-template-columns: 25px 1fr;
    gap: 1px 6px;
  }

  .money-flow > div > i, .money-flow > button > i {
    border-radius: 8px;
    width: 25px;
    height: 25px;
  }

  .money-flow .app-icon {
    width: 14px;
    height: 14px;
  }

  .money-flow strong, .money-flow > b {
    font-size: 9px;
  }

  .pulse-metrics {
    gap: 7px;
  }

  .metric-card {
    border-radius: 16px;
    min-height: 112px;
    padding: 12px;
  }

  .metric-card > span {
    gap: 4px;
    font-size: 7px;
  }

  .metric-card > span .app-icon {
    width: 13px;
    height: 13px;
  }

  .metric-card > strong {
    margin-top: 10px;
    font-size: clamp(13px, 4vw, 18px);
  }

  .metric-card > small {
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 7px;
    overflow: hidden;
  }

  .savings-metric svg {
    display: none;
  }

  .metric-ring {
    width: 31px;
    height: 31px;
    padding: 5px;
    bottom: 10px;
    right: 9px;
  }

  .metric-bars {
    gap: 2px;
    height: 31px;
    bottom: 10px;
    right: 10px;
  }

  .metric-bars i {
    width: 3px;
  }

  .metric-bars i:first-child {
    height: 11px;
  }

  .metric-bars i:nth-child(2) {
    height: 20px;
  }

  .metric-bars i:nth-child(3) {
    height: 16px;
  }

  .metric-bars i:nth-child(4) {
    height: 27px;
  }

  .metric-bars i:nth-child(5) {
    height: 21px;
  }

  .home-visual-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-visual-grid > article {
    border-radius: 18px;
    min-height: 214px;
  }

  .home-schedule-card {
    grid-column: auto;
    min-height: 184px;
  }

  .goal-orbit {
    width: 50px;
    height: 50px;
  }

  .plan-graphic {
    grid-template-columns: 78px 1fr;
  }

  .plan-wheel {
    width: 78px;
    height: 78px;
  }

  .topbar {
    margin-bottom: 16px;
  }

  .money-flow:has(.family) {
    grid-template-columns: 1fr auto 1fr;
    overflow-x: auto;
  }

  .family-reserve-actions {
    gap: 6px;
  }

  .family-reserve-actions .family-member-stack {
    display: none;
  }

  .family-reserve-actions button {
    white-space: nowrap;
  }

  .family-reserve-manager {
    max-height: 92vh;
  }

  .reserve-contribution-form, .reserve-contribution-form.extra {
    grid-template-columns: 1fr;
  }

  .pricing-avatar-stack img {
    width: 53px;
    height: 53px;
    margin: 0 -10px;
  }
}

.spend-workspace {
  gap: 14px;
  padding: 2px 0 105px;
  display: grid;
}

.spend-header {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.spend-header h2 {
  font: 800 30px/1 var(--font-display);
  white-space: nowrap;
  margin: 5px 0 0;
}

.spend-header-actions {
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.month-switcher {
  background: #ffffffc9;
  border: 1px solid #e0daea;
  border-radius: 14px;
  grid-template-columns: 34px minmax(145px, 1fr) 34px;
  align-items: center;
  display: grid;
  overflow: hidden;
  box-shadow: 0 10px 28px #30254e0b;
}

.month-switcher button {
  color: #6557d9;
  cursor: pointer;
  background: none;
  border: 0;
  height: 38px;
  font-size: 22px;
}

.month-switcher button:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.month-switcher strong {
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
}

.spend-filter-toggle {
  color: #6b6478;
  cursor: pointer;
  background: #ffffffc9;
  border: 1px solid #e0daea;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: relative;
}

.spend-filter-toggle.active {
  border-color: var(--violet);
  color: var(--violet);
  background: var(--violet-soft);
}

.spend-filter-dot {
  background: var(--violet);
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.filter-glyph {
  flex-direction: column;
  align-items: center;
  gap: 3px;
  display: flex;
}

.filter-glyph i {
  background: currentColor;
  border-radius: 2px;
  height: 1.6px;
  display: block;
}

.filter-glyph i:first-child {
  width: 14px;
}

.filter-glyph i:nth-child(2) {
  width: 10px;
}

.filter-glyph i:nth-child(3) {
  width: 6px;
}

.spend-filter-popover {
  z-index: 22;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  gap: 10px;
  width: min(260px, 82vw);
  padding: 14px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 18px 40px #2c234d1f;
}

.spend-filter-popover label {
  background: #faf9fd;
  border: 1px solid #e0dae9;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  display: flex;
}

.spend-filter-popover .app-icon {
  color: #8b829b;
  width: 16px;
  height: 16px;
}

.spend-filter-popover input {
  width: 100%;
  font: 700 10px var(--font-body);
  background: none;
  border: 0;
  outline: 0;
}

.spend-filter-popover select {
  color: #554e61;
  background: #fff;
  border: 1px solid #e0dae9;
  border-radius: 12px;
  height: 42px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 750;
}

.spend-filter-clear {
  color: var(--violet);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 10px;
  font-weight: 800;
}

.spend-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.spend-summary-grid article {
  background: linear-gradient(145deg, #ffffffdf, #f7f4ffcc);
  border: 1px solid #e6e0ed;
  border-radius: 18px;
  min-width: 0;
  padding: 17px;
  position: relative;
  box-shadow: 0 13px 32px #30254e0b;
}

.spend-summary-grid .app-icon {
  color: #6557d9;
  width: 19px;
  height: 19px;
}

.spend-summary-grid small {
  color: #8c8597;
  letter-spacing: .7px;
  white-space: nowrap;
  margin-top: 16px;
  font-size: 7px;
  font-weight: 900;
  display: block;
}

.spend-summary-grid strong {
  font: 850 21px var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  display: block;
  overflow: hidden;
}

.spend-summary-grid span {
  color: #938d9d;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 8px;
  display: block;
  overflow: hidden;
}

.spend-summary-grid article.positive {
  background: linear-gradient(145deg, #f9fffc, #edf9f3);
}

.spend-summary-grid article.positive .app-icon {
  color: #278766;
}

.spend-summary-grid article.negative {
  background: linear-gradient(145deg, snow, #fff0f3);
  border-color: #f1ccd5;
}

.spend-summary-grid article.negative .app-icon, .spend-summary-grid article.negative strong {
  color: #a63d56;
}

.spend-summary-grid article.spent-summary {
  background: linear-gradient(145deg, #fffdfd, #fff3f6);
  border-color: #f1d8df;
}

.spend-summary-grid article.spent-summary .app-icon, .spend-summary-grid article.spent-summary > small, .spend-summary-grid article.spent-summary > strong {
  color: #b24c65;
}

.transaction-heading, .category-chart-header {
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  margin-top: 4px;
  display: flex;
}

.transaction-heading h3, .category-chart-header h3 {
  font: 780 15px var(--font-display);
  white-space: nowrap;
  margin: 0;
}

.transaction-heading small {
  color: #928b9b;
  font-size: 8px;
}

.transaction-heading button, .category-chart-header button {
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: #6557d9;
  border: 0;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 9px;
  font-weight: 850;
}

.transaction-heading button.secondary {
  color: #6557d9;
  background: #fff;
  border: 1px solid #dcd5eb;
}

.transaction-heading button:disabled, .category-chart-header button:disabled {
  opacity: .4;
}

.transaction-heading nav, .category-chart-header nav {
  gap: 7px;
  display: flex;
}

.transaction-rows {
  gap: 7px;
  display: grid;
}

.transaction-rows > button, .transaction-rows > div > button, .transaction-rows .swipe-row-surface > button, .transaction-rows > .log-row {
  text-align: left;
  cursor: pointer;
  background: #ffffffd8;
  border: 1px solid #e5dfeb;
  border-radius: 14px;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  display: grid;
  box-shadow: 0 7px 18px #33275007;
}

.transaction-rows > .log-row {
  cursor: default;
}

.transaction-kind {
  border-radius: 11px;
  place-items: center;
  width: 35px;
  height: 35px;
  display: grid;
  position: relative;
}

.transaction-kind.income {
  color: #248765;
  background: #e8f7f1;
}

.transaction-kind.expense {
  color: #b24c65;
  background: #fff0f3;
}

.transaction-kind.saving {
  color: #5c4ed0;
  background: #efe9ff;
}

.transaction-kind .app-icon {
  width: 17px;
  height: 17px;
}

.transaction-avatar {
  object-fit: cover;
  background: #f3efff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: -4px;
  right: -5px;
  box-shadow: 0 2px 6px #342a5330;
}

.transaction-avatar-neutral {
  color: #777182;
  place-items: center;
  display: grid;
}

.transaction-avatar-neutral .app-icon {
  width: 8px;
  height: 8px;
}

.transaction-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.transaction-copy b, .transaction-copy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.transaction-copy b {
  font-size: 12px;
}

.transaction-copy small {
  color: #8d8696;
  font-size: 10px;
}

.transaction-value {
  text-align: right;
  gap: 3px;
  display: grid;
}

.transaction-value b {
  white-space: nowrap;
  font-size: 12px;
}

.transaction-value small {
  color: #9892a1;
  white-space: nowrap;
  font-size: 9px;
}

.spend-empty {
  text-align: center;
  background: #faf9fd;
  border: 1px dashed #ddd6e7;
  border-radius: 18px;
  align-content: center;
  justify-items: center;
  min-height: clamp(190px, 36vh, 380px);
  padding: 30px 18px;
  display: grid;
}

.spend-empty > .app-icon {
  color: #887bdd;
  width: 27px;
  height: 27px;
}

.spend-empty h3 {
  margin: 10px 0 4px;
  font-size: 12px;
}

.spend-empty p {
  color: #8d8697;
  margin: 0;
  font-size: 9px;
}

.transaction-rows > button.family-member-entry {
  border-left: 4px solid var(--member-accent);
  background: #fff;
  background: linear-gradient(90deg,var(--member-accent-soft),#ffffffd8 24%);
}

.family-member-entry .transaction-avatar {
  border-color: var(--member-accent);
}

.category-bars {
  gap: 10px;
  display: grid;
}

.category-bars > article {
  background: #ffffffcf;
  border: 1px solid #e5dfec;
  border-radius: 15px;
  padding: 13px 15px;
}

.category-bars header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.category-bars header > span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.category-bars header i {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.category-bars b, .category-bars strong {
  white-space: nowrap;
  font-size: 9px;
}

.category-bars article > div {
  background: #efecf3;
  border-radius: 999px;
  height: 7px;
  margin: 9px 0 7px;
  overflow: hidden;
}

.category-bars article > div > i {
  border-radius: 999px;
  height: 100%;
  display: block;
}

.category-bars small {
  color: #8d8697;
  font-size: 8px;
}

.transaction-editor {
  width: min(660px, 100%);
}

.transaction-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  display: grid;
}

.transaction-form-grid label {
  margin: 0;
}

.transaction-form-grid .wide {
  grid-column: 1 / -1;
}

.transaction-form-grid textarea {
  resize: vertical;
  min-height: 80px;
}

.transaction-money-field {
  margin-top: 8px;
}

.transaction-money-field input {
  margin-top: 0 !important;
}

.transaction-delete {
  color: #9b3951;
  cursor: pointer;
  background: #fff8fa;
  border: 1px solid #efc6d0;
  border-radius: 11px;
  width: 100%;
  height: 40px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 850;
}

.spend-undo {
  z-index: 220;
  color: #fff;
  background: #292441;
  border-radius: 13px;
  align-items: center;
  gap: 18px;
  padding: 12px 15px;
  font-size: 10px;
  display: flex;
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 15px 40px #201a3938;
}

.spend-undo button {
  color: #c8bdff;
  cursor: pointer;
  background: none;
  border: 0;
  font-weight: 900;
}

.category-manager {
  width: min(620px, 100%);
  max-height: min(780px, 90vh);
  overflow: auto;
}

.category-manager-copy {
  color: #8b8495;
  margin: 5px 0 15px;
  font-size: 10px;
}

.category-kind-switch {
  background: #f1eef7;
  border-radius: 13px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  display: grid;
}

.category-kind-switch button {
  color: #888195;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  height: 36px;
  font-size: 9px;
  font-weight: 850;
}

.category-kind-switch button.active {
  color: #5f50d5;
  background: #fff;
  box-shadow: 0 5px 15px #3b305417;
}

.category-create {
  grid-template-columns: minmax(0, 1fr) 70px auto;
  align-items: end;
  gap: 9px;
  margin: 15px 0;
  display: grid;
}

.category-create label {
  color: #7e778a;
  margin: 0;
  font-size: 8px;
  font-weight: 800;
}

.category-create label > span {
  margin: 0 0 6px;
  display: block;
}

.category-create input {
  background: #fff;
  border: 1px solid #ddd7e8;
  border-radius: 10px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
}

.category-create input[type="color"] {
  cursor: pointer;
  padding: 5px;
}

.category-create button {
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: #6557d9;
  border: 0;
  border-radius: 10px;
  height: 40px;
  padding: 0 15px;
  font-size: 9px;
  font-weight: 850;
}

.category-edit-list {
  gap: 7px;
  display: grid;
}

.category-edit-list article {
  background: #ffffffb8;
  border: 1px solid #e6e0ed;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  display: grid;
}

.category-edit-list input {
  background: none;
  border: 0;
  border-radius: 8px;
  outline: 0;
  min-width: 0;
  height: 33px;
  font-weight: 750;
}

.category-edit-list input:focus {
  background: #f6f3fc;
  padding-inline: 8px;
}

.category-edit-list .category-row-color {
  cursor: pointer;
  border: 1px solid #e5dfeb;
  width: 34px;
  padding: 4px;
}

.category-edit-list small {
  color: #938d9e;
  font-size: 8px;
}

.category-edit-list button {
  color: #a0445a;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 8px;
  font-weight: 800;
}

.category-edit-list button:disabled {
  opacity: .25;
}

.category-lock {
  color: #b8b1c2;
  text-align: center;
  width: 26px;
}

.family-readonly.floating {
  z-index: 30;
  width: min(360px, 100% - 36px);
  position: fixed;
  bottom: 84px;
  right: 18px;
}

.category-error {
  color: #a0445a;
  margin: -8px 0 12px;
  font-size: 9px;
  font-weight: 750;
}

.ledger-summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 4px 0 14px;
  display: grid;
}

.ledger-summary article {
  background: #ffffffd9;
  border: 1px solid #e4deeb;
  border-radius: 14px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 12px 13px;
  display: flex;
}

.ledger-summary small {
  color: #938b9d;
  letter-spacing: .6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 850;
  overflow: hidden;
}

.ledger-summary strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.ledger-summary .credit strong, .ledger-table .credit {
  color: #218266;
}

.ledger-summary .debit strong, .ledger-table .debit {
  color: #b2465d;
}

.ledger-table {
  background: #ffffffd9;
  border: 1px solid #e3ddea;
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 12px 34px #31274e0b;
}

.ledger-table table {
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
  min-width: 660px;
}

.ledger-table th, .ledger-table td {
  text-align: right;
  border-bottom: 1px solid #eeeaf2;
  padding: 11px 13px;
  font-size: 9px;
}

.ledger-table th {
  color: #918a9a;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: #f8f6fc;
  font-size: 7px;
}

.ledger-table th:nth-child(-n+3), .ledger-table td:nth-child(-n+3) {
  text-align: left;
}

.ledger-table tbody tr:last-child td {
  border-bottom: 0;
}

.ledger-table td b {
  text-overflow: ellipsis;
  max-width: 180px;
  display: block;
  overflow: hidden;
}

.ledger-table td small {
  color: #9992a2;
  text-overflow: ellipsis;
  max-width: 180px;
  margin-top: 3px;
  font-size: 7px;
  display: block;
  overflow: hidden;
}

.ledger-action-row {
  background: linear-gradient(145deg, #ffffffea, #f8f5ffdc);
  border: 1px solid #e5dfed;
  border-radius: 19px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 18px;
  display: flex;
  box-shadow: 0 13px 34px #31264e0a;
}

.ledger-action-row h3 {
  font: 780 16px var(--font-display);
  white-space: nowrap;
  margin: 5px 0 3px;
}

.ledger-action-row p {
  color: #8c8596;
  margin: 0;
  font-size: 9px;
}

.ledger-action-row nav, .event-ledger-detail > header nav {
  gap: 7px;
  display: flex;
}

.ledger-action-row button, .event-ledger-detail > header button {
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: #6557d9;
  border: 0;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 9px;
  font-weight: 850;
}

.ledger-action-row button.secondary, .event-ledger-detail > header button.secondary, .event-ledger-detail > header .ledger-back {
  color: #6557d9;
  background: #fff;
  border: 1px solid #ddd6eb;
}

.ledger-action-row button:disabled, .event-ledger-detail > header button:disabled {
  opacity: .4;
}

.event-ledger-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.event-ledger-grid > button {
  text-align: left;
  cursor: pointer;
  background: #ffffffd9;
  border: 1px solid #e5dfed;
  border-radius: 18px;
  min-width: 0;
  padding: 16px;
  box-shadow: 0 10px 28px #32264e09;
}

.event-ledger-icon {
  color: #6557d9;
  background: #efecff;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.event-ledger-icon .app-icon {
  width: 19px;
  height: 19px;
}

.event-ledger-grid small {
  color: #8c8497;
  letter-spacing: .6px;
  margin-top: 13px;
  font-size: 7px;
  font-weight: 900;
  display: block;
}

.event-ledger-grid h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0 11px;
  font-size: 12px;
  overflow: hidden;
}

.event-ledger-grid strong {
  font: 850 18px var(--font-display);
  white-space: nowrap;
}

.event-ledger-grid p {
  color: #918a9a;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 3px 0 10px;
  font-size: 8px;
  overflow: hidden;
}

.event-ledger-grid i {
  color: #6557d9;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  display: block;
  overflow: hidden;
}

.event-ledger-detail {
  gap: 12px;
  display: grid;
}

.event-ledger-detail > header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.event-ledger-summary {
  background: #ffffffd9;
  border: 1px solid #e3ddea;
  border-radius: 19px;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 18px;
  display: grid;
}

.event-ledger-summary > div small {
  color: #8f879a;
  letter-spacing: .6px;
  font-size: 7px;
  font-weight: 900;
}

.event-ledger-summary h3 {
  font: 800 17px var(--font-display);
  white-space: nowrap;
  margin: 4px 0 0;
}

.event-ledger-summary p {
  color: #8b8494;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0 0;
  font-size: 9px;
  overflow: hidden;
}

.event-ledger-summary > strong {
  font: 850 20px var(--font-display);
  text-align: right;
  white-space: nowrap;
}

.event-ledger-summary > strong small {
  color: #938c9b;
  font: 750 8px var(--font-body);
  margin-top: 4px;
  display: block;
}

.event-ledger-budget {
  background: #fff;
  border: 1px solid #e4deec;
  border-radius: 14px;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  display: grid;
}

.event-ledger-budget span, .event-ledger-budget small {
  white-space: nowrap;
  font-size: 8px;
}

.event-ledger-budget > i {
  background: #efecf4;
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

.event-ledger-budget > i > b {
  background: linear-gradient(90deg, #6557d9, #9c83f0);
  border-radius: 99px;
  height: 100%;
  display: block;
}

.ledger-income-rule {
  color: #267a60;
  background: #f2faf7;
  border: 1px solid #cfe7dd;
  border-radius: 14px;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  display: flex;
}

.ledger-income-rule.excluded {
  color: #736b80;
  background: #f8f6fc;
  border-color: #e2dced;
}

.ledger-income-rule > .app-icon {
  width: 19px;
  height: 19px;
}

.ledger-income-rule span {
  gap: 2px;
  display: grid;
}

.ledger-income-rule b {
  font-size: 9px;
}

.ledger-income-rule small {
  font-size: 8px;
  line-height: 1.4;
}

.ledger-editor {
  width: min(530px, 100%);
}

.ledger-editor textarea {
  resize: vertical;
  min-height: 76px;
}

.ledger-income-checkbox {
  background: #faf8fd;
  border: 1px solid #ded8e8;
  border-radius: 13px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex !important;
}

.ledger-income-checkbox > input {
  accent-color: #6557d9;
  width: 17px !important;
  height: 17px !important;
  margin: 1px 0 0 !important;
}

.ledger-income-checkbox span {
  gap: 3px;
  display: grid;
}

.ledger-income-checkbox b {
  font-size: 9px;
}

.ledger-income-checkbox small {
  color: #8d8697;
  font-size: 8px;
  line-height: 1.4;
}

.ledger-manager {
  width: min(720px, 100%);
  max-height: 88vh;
  overflow: auto;
}

.ledger-manage-list {
  gap: 8px;
  margin-top: 15px;
  display: grid;
}

.ledger-manage-list article {
  background: #fff;
  border: 1px solid #e5dfec;
  border-radius: 14px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  display: grid;
}

.ledger-manage-list article > div {
  gap: 3px;
  display: grid;
}

.ledger-manage-list article > div > b {
  font-size: 10px;
}

.ledger-manage-list article > div > small {
  color: #8d8696;
  font-size: 8px;
}

.ledger-manage-list nav, .ledger-remove-confirm {
  gap: 4px;
  display: flex !important;
}

.ledger-manage-list button {
  color: #6557d9;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd7e8;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 7px;
  font-weight: 850;
}

.ledger-manage-list button.danger {
  color: #a64359;
  border-color: #efcbd4;
}

.ledger-manage-list button:disabled {
  opacity: .35;
}

@media (max-width: 620px) {
  .spend-workspace {
    gap: 10px;
    padding: 3px 14px 102px;
  }

  .spend-header h2 {
    font-size: 24px;
  }

  .month-switcher {
    grid-template-columns: 30px minmax(116px, 1fr) 30px;
  }

  .month-switcher strong {
    font-size: 9px;
  }

  .spend-toolbar {
    grid-template-columns: 1fr 128px;
  }

  .spend-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .spend-summary-grid article:nth-child(3) {
    grid-column: 1 / -1;
  }

  .spend-summary-grid article {
    padding: 14px;
  }

  .transaction-heading, .category-chart-header {
    align-items: flex-end;
  }

  .category-chart-header nav {
    overflow-x: auto;
  }

  .transaction-form-grid {
    grid-template-columns: 1fr;
  }

  .transaction-form-grid .wide {
    grid-column: auto;
  }

  .category-manager {
    width: calc(100% - 20px);
    max-height: 88vh;
    padding: 25px 18px 20px;
  }

  .category-create {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .category-create button {
    grid-column: 1 / -1;
    height: 40px;
  }

  .category-edit-list article {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .category-edit-list article > small {
    display: none;
  }

  .category-edit-list .category-lock {
    display: block;
  }

  .transaction-editor {
    max-height: 92vh;
    overflow: auto;
  }

  .spend-undo, .family-readonly.floating {
    bottom: 82px;
  }

  .ledger-summary {
    grid-template-columns: 1fr 1fr;
  }

  .ledger-summary article {
    padding: 10px 11px;
  }

  .ledger-table {
    margin-inline: -4px;
  }

  .profile-details > div {
    gap: 16px;
  }

  .profile-details b {
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 58%;
    overflow: hidden;
  }

  .profile-top-avatar {
    border-radius: 18px;
    width: 60px;
    height: 60px;
    top: 54px;
    right: 20px;
  }

  .account-badges {
    margin-right: 66px;
  }

  .profile-identity-summary {
    margin-right: 68px;
  }

  .ledger-action-row {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .ledger-action-row nav {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .ledger-action-row button {
    padding: 10px 8px;
  }

  .event-ledger-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .event-ledger-grid > button {
    padding: 13px;
  }

  .event-ledger-detail > header {
    flex-direction: column;
    align-items: stretch;
  }

  .event-ledger-detail > header nav {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .event-ledger-summary {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px;
  }

  .event-ledger-summary > strong {
    text-align: left;
    grid-column: 2;
  }

  .event-ledger-budget {
    grid-template-columns: 1fr auto;
  }

  .event-ledger-budget > i {
    grid-area: 2 / 1 / auto / -1;
  }

  .ledger-manage-list article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ledger-manage-list nav, .ledger-remove-confirm {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    display: grid !important;
  }

  .ledger-manage-list button {
    padding: 8px 5px;
  }
}

.nav-item.frozen, .mobile-nav button.frozen {
  opacity: .62;
}

.mobile-nav button.frozen > small {
  color: #7568c9;
  background: #e8e3ff;
  top: -2px;
  right: 1px;
}

.tour-picker > p {
  margin-bottom: 18px;
}

.tour-picker > div {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.tour-picker > div > button {
  color: #302a42;
  text-align: left;
  background: linear-gradient(145deg, #fff, #f7f4ff);
  border: 1px solid #e2dced;
  border-radius: 16px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 110px;
  padding: 16px;
  display: grid;
}

.tour-picker > div > button > .app-icon {
  color: #6557d9;
  width: 27px;
  height: 27px;
}

.tour-picker > div > button span {
  gap: 5px;
  display: grid;
}

.tour-picker > div > button b {
  font: 800 14px var(--font-display);
}

.tour-picker > div > button small {
  color: #81798d;
  font-size: 9px;
  line-height: 1.4;
}

.tour-picker > div > button i {
  color: #6557d9;
  font-style: normal;
}

.tour-picker > div > button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.carryover-backdrop {
  z-index: 125;
}

.carryover-modal {
  text-align: center;
  width: min(470px, 100vw - 28px);
}

.carryover-symbol {
  border-radius: 17px;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  display: grid;
}

.carryover-symbol .app-icon {
  width: 25px;
  height: 25px;
}

.carryover-symbol.available {
  color: #188968;
  background: #e8f8f2;
}

.carryover-symbol.overdraft {
  color: #b8435d;
  background: #fff0f3;
}

.carryover-modal h2 {
  margin-top: 11px;
}

.carryover-modal p {
  max-width: 390px;
  margin: 0 auto 18px;
}

.carryover-modal p strong {
  white-space: nowrap;
  color: #31294a;
}

.carryover-choice {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid;
}

.carryover-choice button {
  color: #fff;
  background: #6557d9;
  border: 0;
  border-radius: 12px;
  min-height: 43px;
  font-weight: 850;
}

.carryover-choice button.secondary {
  color: #655d72;
  background: #fff;
  border: 1px solid #ded8e8;
}

.carryover-modal > small {
  color: #8a8295;
  margin-top: 14px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}

.money-flow i.carryover {
  color: #6657d9;
  background: #eeeaff;
}

@media (max-width: 620px) {
  .tour-picker > div {
    grid-template-columns: 1fr;
  }

  .carryover-modal {
    padding: 25px 20px;
  }

  .carryover-choice {
    grid-template-columns: 1fr;
  }
}

.upgrade-modal {
  width: min(720px, 100%);
  max-height: min(860px, 92vh);
  overflow: auto;
}

.subscription-overview > h2 {
  margin-top: 12px;
}

.current-plan-card {
  background: linear-gradient(145deg, #fff, #f5f2ff);
  border: 1px solid #dcd5eb;
  border-radius: 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 14px;
  margin: 15px 0;
  padding: 13px 15px;
  display: grid;
}

.current-plan-card > span {
  gap: 3px;
  display: grid;
}

.current-plan-card > span small {
  color: #8e8799;
  letter-spacing: .7px;
  font-size: 7px;
  font-weight: 900;
}

.current-plan-card > span strong {
  font: 850 17px var(--font-display);
}

.current-plan-card > b {
  color: #217b5e;
  white-space: nowrap;
  background: #e8f7f0;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 8px;
}

.current-plan-card > small {
  color: #8b8495;
  grid-column: 1 / -1;
  font-size: 8px;
}

.subscription-plan-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.subscription-plan-grid article {
  background: #fff;
  border: 1px solid #e3ddea;
  border-radius: 15px;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  display: flex;
}

.subscription-plan-grid article.current {
  border-color: #6557d9;
  box-shadow: 0 0 0 2px #6557d914;
}

.subscription-plan-grid article.home {
  background: linear-gradient(145deg, #fff, #f6f3ff);
}

.subscription-plan-grid header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.subscription-plan-grid header > span {
  gap: 3px;
  display: grid;
}

.subscription-plan-grid header small {
  color: #918a9b;
  letter-spacing: .7px;
  font-size: 7px;
  font-weight: 900;
}

.subscription-plan-grid header strong {
  font: 850 15px var(--font-display);
}

.subscription-plan-grid header > b {
  color: #267c61;
  background: #e9f7f1;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 7px;
}

.subscription-plan-grid article > p {
  color: #817a8b;
  min-height: 45px;
  margin: 0;
  font-size: 8px;
  line-height: 1.55;
}

.subscription-plan-grid article > em {
  color: #6557d9;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.plan-price {
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 3px;
  display: grid;
}

.plan-price strong {
  font: 850 17px var(--font-display);
}

.plan-price small {
  color: #8c8596;
  font-size: 7px;
}

.plan-price i {
  color: #716a7e;
  grid-column: 1 / -1;
  font-size: 8px;
  font-style: normal;
}

.subscription-plan-actions {
  gap: 5px;
  margin-top: auto;
  display: grid;
}

.subscription-plan-actions button {
  color: #fff;
  cursor: pointer;
  background: #6557d9;
  border: 0;
  border-radius: 8px;
  min-height: 31px;
  padding: 6px 8px;
  font-size: 7px;
  font-weight: 850;
}

.subscription-plan-actions button.secondary {
  color: #6557d9;
  background: #fff;
  border: 1px solid #d9d2e9;
}

.play-purchase-actions.compact {
  margin-top: 9px;
}

.dialog-family-report {
  width: min(700px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
}

.family-report > p {
  color: #817a8b;
  font-size: 9px;
}

.family-report-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 15px 0;
  display: grid;
}

.family-report-metrics article {
  background: #fff;
  border: 1px solid #e3ddea;
  border-radius: 14px;
  gap: 5px;
  padding: 13px;
  display: grid;
}

.family-report-metrics small {
  color: #918a9b;
  letter-spacing: .5px;
  font-size: 7px;
  font-weight: 900;
}

.family-report-metrics strong {
  font: 850 17px var(--font-display);
  white-space: nowrap;
}

.family-report-metrics span {
  color: #918a9b;
  font-size: 7px;
  line-height: 1.35;
}

.family-report-metrics article.negative strong {
  color: #b5435c;
}

.family-report-flow {
  background: #faf8fd;
  border: 1px solid #e4deec;
  border-radius: 14px;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  display: grid;
}

.family-report-flow span {
  gap: 3px;
  display: grid;
}

.family-report-flow b {
  white-space: nowrap;
  font-size: 10px;
}

.family-report-flow small {
  color: #918a9b;
  font-size: 7px;
}

.family-report-flow > i {
  background: #cfc8db;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.family-report-categories {
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.family-report-categories header {
  justify-content: space-between;
  display: flex;
}

.family-report-categories header b {
  font-size: 10px;
}

.family-report-categories header small, .family-report-categories > p {
  color: #918a9b;
  font-size: 8px;
}

.family-report-categories > div {
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  display: grid;
}

.family-report-categories span, .family-report-categories strong {
  font-size: 8px;
}

.family-report-categories > div > i {
  background: #efecf4;
  border-radius: 99px;
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
}

.family-report-categories > div > i > b {
  background: linear-gradient(90deg, #6657d9, #9b83f0);
  border-radius: 99px;
  height: 100%;
  display: block;
}

.family-report-note {
  color: #9891a0;
  margin-top: 13px;
  font-size: 7px;
  display: block;
}

@media (max-width: 620px) {
  .upgrade-modal {
    width: calc(100% - 20px);
    padding: 24px 18px;
  }

  .subscription-plan-grid {
    grid-template-columns: 1fr;
  }

  .subscription-plan-grid article > p {
    min-height: 0;
  }

  .current-plan-card {
    grid-template-columns: 1fr;
  }

  .current-plan-card > b {
    justify-self: start;
  }

  .family-report-metrics, .family-report-flow {
    grid-template-columns: 1fr 1fr;
  }

  .family-report-flow > i {
    display: none;
  }

  .dialog-family-report {
    width: calc(100% - 20px);
    padding: 24px 18px;
  }
}

.smart-plan-workspace {
  gap: 14px;
  display: grid;
}

.smart-plan-intro {
  background: linear-gradient(145deg, #fff, #f6f2ff);
  border: 1px solid #e3ddef;
  border-radius: 20px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  display: flex;
}

.smart-plan-intro h3 {
  font: 800 20px var(--font-display);
  margin: 7px 0 5px;
}

.smart-plan-intro p {
  color: #817a8c;
  max-width: 560px;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.plan-health {
  color: #a84159;
  letter-spacing: .5px;
  white-space: nowrap;
  background: #fff0f3;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 8px;
  font-weight: 900;
}

.plan-health.on-track {
  color: #227b5f;
  background: #e7f7f0;
}

.smart-plan-methods {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid;
}

.smart-plan-methods button {
  color: #312b40;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e1dbea;
  border-radius: 15px;
  gap: 6px;
  padding: 13px;
  display: grid;
}

.smart-plan-methods button.active {
  border-color: #6557d9;
  box-shadow: 0 0 0 2px #6557d91b;
}

.smart-plan-methods strong {
  font: 850 14px var(--font-display);
}

.smart-plan-methods small {
  color: #8b8496;
  font-size: 8px;
}

.smart-plan-methods i {
  border-radius: 99px;
  height: 5px;
  display: flex;
  overflow: hidden;
}

.smart-plan-methods i b {
  height: 100%;
}

.activate-smart-plan {
  color: #fff;
  background: #6557d9;
  border: 0;
  border-radius: 11px;
  justify-self: end;
  min-height: 39px;
  padding: 0 16px;
  font-size: 9px;
  font-weight: 900;
}

.activate-smart-plan:disabled {
  opacity: .45;
}

.plan-comparison-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.plan-comparison-grid article {
  background: #fff;
  border: 1px solid #e4deec;
  border-radius: 17px;
  padding: 17px;
}

.plan-comparison-grid header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.plan-comparison-grid header > span {
  align-items: center;
  gap: 7px;
  display: flex;
}

.plan-comparison-grid .app-icon {
  color: #6557d9;
  width: 17px;
  height: 17px;
}

.plan-comparison-grid header b {
  font-size: 10px;
}

.plan-comparison-grid header strong {
  font: 850 17px var(--font-display);
}

.plan-comparison-grid article > div {
  background: #efecf3;
  border-radius: 99px;
  height: 8px;
  margin: 14px 0 8px;
  overflow: hidden;
}

.plan-comparison-grid article > div i {
  background: #2aa67b;
  border-radius: 99px;
  height: 100%;
  display: block;
}

.plan-comparison-grid article.over-plan > div i, .plan-comparison-grid article.under-plan > div i {
  background: #eb657f;
}

.plan-comparison-grid p {
  color: #5f586d;
  margin: 0 0 4px;
  font-size: 9px;
}

.plan-comparison-grid small {
  color: #8d8697;
  font-size: 8px;
}

.plan-allocation-strip {
  background: #ffffffcf;
  border: 1px solid #e4deec;
  border-radius: 16px;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  display: grid;
}

.plan-allocation-strip header {
  gap: 3px;
  display: grid;
}

.plan-allocation-strip header span {
  color: #8c8496;
  font-size: 8px;
}

.plan-allocation-strip header strong {
  font: 850 16px var(--font-display);
}

.plan-allocation-strip > div {
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 7px;
  display: grid;
}

.plan-allocation-strip > div > i {
  border-radius: 9px;
  width: 7px;
  height: 28px;
}

.plan-allocation-strip > div span {
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.plan-allocation-strip > div small {
  color: #938c9d;
  font-size: 7px;
}

.plan-allocation-strip > div strong {
  white-space: nowrap;
  font-size: 9px;
}

.smart-plan-note {
  color: #91899a;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .smart-plan-intro {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .plan-health {
    align-self: flex-start;
  }

  .smart-plan-methods, .plan-comparison-grid, .plan-allocation-strip {
    grid-template-columns: 1fr;
  }

  .plan-allocation-strip > div {
    grid-template-columns: 7px 1fr auto;
  }

  .activate-smart-plan {
    justify-self: stretch;
  }

  .smart-plan-workspace {
    padding-bottom: 92px;
  }
}

.home-member-list article > button, .reserve-extra-list button, .bug-photo-list button, .category-edit-list button, .ledger-manage-list button.danger, .transaction-delete, .record-management button.danger, .reminder-list nav button.danger, .delete-primary, .trash-clean-button {
  color: #fff !important;
  background: linear-gradient(145deg, #dc5c70, #b83f55) !important;
  border: 1px solid #b83f55 !important;
  box-shadow: 0 7px 16px #b83f5530 !important;
}

.home-member-list article > button {
  margin-left: auto;
}

@media (max-width: 620px) {
  .home-member-list article > button, .reserve-extra-list button, .category-edit-list button, .ledger-manage-list button.danger, .reminder-list nav button.danger {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 9px;
  }
}

.expense-details {
  overflow: auto;
}

.expense-details h2 {
  overflow-wrap: anywhere;
}

.expense-detail-card > header strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #bb3e57;
}

.expense-detail-card dl {
  margin: 0;
}

.expense-detail-card dl > div {
  align-items: baseline;
  min-width: 0;
}

.expense-detail-card dt {
  color: #8e8898;
}

.expense-detail-card dd {
  text-align: right;
  color: #4e4959;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  font-weight: 700;
}

.expense-details > .expense-detail-rule {
  margin: 12px 0;
  font-size: 10px;
  line-height: 1.45;
}

.expense-detail-tags {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}

.expense-detail-tags span {
  color: #6856d9;
  overflow-wrap: anywhere;
  background: #f2efff;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 9px;
}

.transaction-owner {
  background: linear-gradient(145deg, #fff, #f7f4ff);
  border: 1px solid #e7e1ee;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  margin: 10px 0 13px;
  padding: 8px 10px;
  display: flex;
}

.transaction-owner > img, .transaction-owner > span {
  object-fit: contain;
  background: #eeeaff;
  border-radius: 11px;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.transaction-owner > div {
  gap: 2px;
  display: grid;
}

.transaction-owner small {
  color: #938c9d;
  letter-spacing: .8px;
  font-size: 7px;
  font-weight: 900;
}

.transaction-owner b {
  font-size: 11px;
}

.dialog-savings-plan {
  width: min(960px, 94vw);
  max-width: 960px;
}

.dialog-savings-plan .spend-header {
  padding-right: 35px;
}

@media (max-width: 520px) {
  .expense-details .transaction-grid {
    grid-template-columns: 1fr;
  }

  .expense-detail-card > header {
    flex-wrap: wrap;
  }

  .dialog-savings-plan .spend-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.content, .workspace-view, .pulse-home, .spend-workspace, .family-workspace {
  min-width: 0;
}

.family-workspace.family-home-workspace {
  padding-top: 0;
  padding-inline: 0;
}

.family-home-workspace .family-pulse-home {
  margin-top: 0;
}

.pulse-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.375em), 1fr));
}

.home-visual-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5em), 1fr));
}

.home-visual-grid > .home-schedule-card {
  grid-column: auto;
}

.workspace-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.spend-summary-grid, .event-ledger-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.spend-summary-grid article:nth-child(3) {
  grid-column: auto;
}

.pulse-home .money-flow {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.8em), 1fr));
  gap: clamp(6px, 2vw, 10px);
  overflow: visible;
}

.money-flow > b {
  display: none;
}

.money-flow > div, .money-flow > button {
  -webkit-backdrop-filter: blur(10px);
  background: #ffffff14;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  grid-template-columns: 26px minmax(0, 1fr);
  padding: clamp(8px, 2.6vw, 11px) clamp(8px, 2.6vw, 12px);
  box-shadow: inset 0 1px #ffffff14, 0 6px 16px #2a204a33;
}

.money-flow > div > i, .money-flow > button > i {
  width: 26px;
  height: 26px;
}

.money-flow span {
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .1px;
  font-size: clamp(7px, 2.4vw, 9px);
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.money-flow strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: clamp(11px, 3.2vw, 15px);
  overflow: hidden;
}

.pulse-heading {
  flex-wrap: wrap;
  gap: 12px;
}

.pulse-heading > div {
  min-width: 0;
}

.pulse-heading h2 {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(18px, 3.8vw, 24px);
  line-height: 1.25;
}

.pulse-heading button {
  min-height: 40px;
  font-size: 12px;
}

.pulse-balance > strong {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: clamp(28px, 6vw, 43px);
}

.pulse-balance > span, .pulse-balance > small {
  white-space: normal;
  font-size: 12px;
  line-height: 1.5;
}

.metric-card {
  gap: 4px;
  min-width: 0;
  min-height: 166px;
  padding: 16px;
}

.metric-card > span {
  white-space: normal;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
}

.metric-card > span .app-icon {
  flex-shrink: 0;
}

.metric-card > strong {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: clamp(20px, 3.6vw, 28px);
  line-height: 1.2;
}

.metric-card > small {
  white-space: normal;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.4;
  overflow: visible;
}

.savings-metric svg, .metric-ring, .metric-bars {
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: auto;
  position: static;
}

.savings-metric svg {
  width: 90px;
  max-width: 100%;
  height: 36px;
  display: block;
}

.metric-ring {
  width: 36px;
  height: 36px;
  padding: 6px;
}

.metric-bars {
  height: 36px;
}

.home-visual-grid > article {
  gap: 14px;
  padding: 18px;
}

.home-visual-grid header {
  flex-wrap: wrap;
}

.home-visual-grid header > div {
  flex: 180px;
  min-width: 0;
}

.home-visual-grid h3 {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(16px, 2.5vw, 19px);
  line-height: 1.35;
}

.goal-orbits {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 76px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  display: grid;
}

.goal-orbits b {
  text-align: center;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
}

.goal-orbits small {
  font-size: 11px;
}

.home-card-link {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
}

.home-card-link span {
  float: none;
  flex-shrink: 0;
}

.plan-graphic {
  grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
  gap: 16px;
  margin: 0;
}

.plan-wheel {
  aspect-ratio: 1;
  width: 100%;
  max-width: 100px;
  height: auto;
}

.plan-wheel strong {
  max-width: 100%;
  font-size: 11px;
}

.plan-wheel small {
  font-size: 8px;
}

.plan-graphic > div:last-child > span {
  grid-template-columns: 7px minmax(0, 1fr) auto;
}

.plan-graphic b, .plan-graphic strong {
  font-size: 12px;
}

.schedule-graphic {
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.schedule-graphic > span {
  flex-shrink: 0;
}

.schedule-graphic > div {
  flex: 150px;
}

.schedule-graphic strong {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(19px, 3vw, 24px);
}

.schedule-graphic small {
  white-space: normal;
  font-size: 12px;
  line-height: 1.45;
}

.family-recent-list span {
  min-width: 0;
}

.family-category-bars span {
  flex-wrap: wrap;
}

.family-category-bars span, .family-category-bars span strong, .family-recent-list b, .family-recent-list strong {
  font-size: 12px;
}

.family-recent-list small {
  font-size: 11px;
}

.spend-header, .transaction-heading, .category-chart-header {
  flex-wrap: wrap;
}

.month-switcher {
  max-width: 100%;
}

.transaction-value, .type-fields > *, .transaction-grid > * {
  min-width: 0;
}

.dialog-saving-detail {
  overflow-y: auto;
}

.transaction-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.transaction-grid > div {
  flex-wrap: wrap;
}

.transaction-grid b, .expense-detail-card dd {
  overflow-wrap: anywhere;
}

.home-member-list article {
  flex-wrap: wrap;
  min-width: 0;
}

.home-member-list article > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.modal input, .modal select, .modal textarea {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 620px) {
  .content {
    padding-top: max(8px,env(safe-area-inset-top));
    position: relative;
  }

  .space-modules {
    gap: 2px;
    margin: 4px auto 7px;
    padding: 0;
  }

  .space-modules button {
    min-height: 29px;
    padding: 5px 9px;
    font-size: 9px;
  }

  .space-modules.icon-tabs button {
    gap: 3px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 8px;
  }

  .space-modules.icon-tabs .app-icon {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
  }

  .compact-topbar {
    height: 0;
    min-height: 0;
    margin: 0;
    position: static;
  }

  .compact-topbar .top-actions, .compact-topbar.with-inner-navigation .top-actions {
    right: 10px;
    top: max(8px,env(safe-area-inset-top));
    z-index: 25;
    width: 31px;
    height: 31px;
    position: fixed;
  }

  .compact-topbar .icon-button {
    border-radius: 10px;
    width: 31px;
    height: 31px;
  }

  .app-mark-corner {
    left: 14px;
    top: max(8px,env(safe-area-inset-top));
    z-index: 25;
    border-radius: 9px;
    width: 30px;
    height: 30px;
    display: block;
    position: fixed;
    box-shadow: 0 4px 12px #4037781f;
  }

  .lender-view {
    margin-top: calc(max(8px,env(safe-area-inset-top)) + 40px);
  }

  .lender-connect-form {
    flex-direction: column;
  }

  .lender-connect-form input, .lender-connect-form button {
    width: 100%;
    min-height: 44px;
  }

  .spend-workspace {
    gap: 8px;
    padding-top: 3px;
  }

  .spend-header {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    align-items: end;
    gap: 8px;
    display: grid;
  }

  .spend-header h2 {
    font-size: 22px;
  }

  .spend-header .section-tag {
    padding: 4px 7px;
    font-size: 7px;
  }

  .month-switcher {
    border-radius: 11px;
    grid-template-columns: 25px minmax(92px, 1fr) 25px;
  }

  .month-switcher button {
    height: 33px;
    font-size: 18px;
  }

  .spend-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .spend-summary-grid article {
    border-radius: 14px;
    min-height: 108px;
    padding: 10px;
  }

  .spend-summary-grid article:nth-child(3) {
    grid-column: auto;
  }

  .spend-summary-grid .app-icon {
    width: 15px;
    height: 15px;
  }

  .spend-summary-grid small {
    letter-spacing: .35px;
    margin-top: 10px;
    font-size: 6px;
  }

  .spend-summary-grid strong {
    font-size: clamp(15px, 4.4vw, 19px);
  }

  .spend-summary-grid span {
    white-space: normal;
    font-size: 6.5px;
    line-height: 1.25;
  }

  .transaction-heading {
    gap: 7px;
  }

  .transaction-heading h3 {
    font-size: 18px;
  }

  .transaction-heading nav button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 8px;
  }

  .transaction-editor {
    width: calc(100% - 18px);
    max-height: calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));
    padding: 20px 17px 17px;
  }

  .transaction-editor > h2 {
    margin: 11px 0 5px;
  }

  .transaction-editor .modal-form {
    gap: 8px;
  }

  .transaction-editor .modal-form label {
    font-size: 12px;
  }

  .transaction-editor .modal-form input, .transaction-editor .modal-form select {
    height: 44px;
    margin-top: 5px;
    font-size: 12px;
  }

  .transaction-editor .modal-primary, .transaction-editor .transaction-delete {
    height: 44px;
    margin-top: 5px;
  }

  .expense-details {
    width: calc(100% - 18px);
    max-height: calc(100dvh - 24px);
    padding: 20px 17px;
  }

  .expense-details > h2 {
    margin: 11px 38px 0 0;
  }

  .transaction-owner {
    margin: 8px 0 10px;
  }

  .money-pulse-card {
    padding: 18px;
  }

  .pulse-home .money-flow {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr));
  }

  .money-flow > div > i {
    grid-row: auto;
  }

  .money-flow strong {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .pulse-metrics, .home-visual-grid {
    gap: 12px;
  }

  .family-reserve-actions {
    flex-wrap: wrap;
  }

  .spend-workspace, .family-workspace {
    padding-inline: 0;
  }

  .dialog-saving-detail .transaction-grid, .expense-details .transaction-grid {
    grid-template-columns: 1fr;
  }

  .record-management button {
    flex: 150px;
    min-height: 44px !important;
  }

  .dialog-saving-detail .reminder-action-button {
    width: 100%;
    margin-right: 0;
  }

  .modal h2 {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 5.4vw, 28px);
    line-height: 1.25;
  }

  .transaction-value b {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .transaction-rows > button {
    grid-template-columns: 35px minmax(0, 1fr) minmax(0, 35%);
  }

  .workspace-cards strong {
    overflow-wrap: anywhere;
  }

  .category-chart-header nav {
    flex-wrap: wrap;
    display: flex;
    overflow: visible;
  }

  .home-member-actions {
    flex-wrap: wrap;
  }

  .home-member-actions > button {
    flex: 140px;
    min-height: 44px;
  }

  .reserve-member-breakdown article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .reserve-member-breakdown article > strong {
    overflow-wrap: anywhere;
    grid-column: 2;
  }
}

.subscription-plan-grid .pricing-avatar-stack {
  justify-content: flex-start;
  height: 48px;
  margin: 8px 0 12px;
  padding: 0 6px;
}

.subscription-plan-grid .pricing-avatar-stack img {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin: 0 -5px;
}

.current-plan-card strong:has(.subscription-profile-avatar) {
  align-items: center;
  gap: 8px;
  display: flex;
}

.subscription-profile-avatar {
  object-fit: contain;
  background: #efedff;
  border-radius: 10px;
  flex-shrink: 0;
}

.account-trial-used {
  color: #837c8d;
  background: #f7f5f8;
  border: 1px solid #e3dfe8;
  border-radius: 11px;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 8px;
  line-height: 1.5;
}

.account-trial-offer {
  background: linear-gradient(145deg, #faf8ff, #f1edff);
  border: 1px solid #d6cef5;
  border-radius: 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 0;
  padding: 12px;
  display: grid;
}

.account-trial-offer > span {
  gap: 3px;
  display: grid;
}

.account-trial-offer b {
  font: 850 15px var(--font-display);
  color: #5042bc;
}

.account-trial-offer small {
  color: #827a91;
  font-size: 8px;
}

.account-trial-offer button {
  min-width: 130px;
}

.account-trial-offer em {
  color: #8a8395;
  grid-column: 1 / -1;
  font-size: 7px;
  font-style: normal;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .account-trial-offer {
    grid-template-columns: 1fr;
  }

  .account-trial-offer button {
    width: 100%;
  }
}

.avatar-choice-picker {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.avatar-choice-picker legend {
  color: #61596f;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
}

.avatar-category-buttons {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  display: flex;
}

.avatar-category-buttons button {
  color: #70667d;
  white-space: nowrap;
  background: #faf8ff;
  border: 1px solid #e3ddef;
  border-radius: 20px;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}

.avatar-category-buttons button[aria-pressed="true"] {
  color: #fff;
  background: #6557d9;
  border-color: #6557d9;
}

.avatar-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
  display: grid;
}

.avatar-choice-grid button {
  color: #70667d;
  background: linear-gradient(145deg, #fff, #f4f0ff);
  border: 1px solid #e3ddef;
  border-radius: 16px;
  min-width: 0;
  padding: 6px;
  position: relative;
}

.avatar-choice-grid button[aria-pressed="true"] {
  border-color: #6557d9;
  box-shadow: 0 0 0 2px #6557d926;
}

.avatar-choice-grid img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 100px;
  display: block;
}

.avatar-choice-grid span {
  white-space: nowrap;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.avatar-choice-grid i {
  color: #fff;
  background: #6557d9;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-style: normal;
  display: grid;
  position: absolute;
  top: 4px;
  right: 4px;
}

.avatar-choice-picker button:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #9d8afa;
}

.avatar-picker-trigger {
  color: #29213e;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(120deg, #fff, #f7f4ff);
  border: 1px solid #e1daed;
  border-radius: 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  display: flex;
}

.avatar-picker-trigger > .avatar-preview {
  background: #eee9fb;
  border: 1px dashed #cdc3e9;
  border-radius: 50%;
  flex: 0 0 64px;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  overflow: hidden;
}

.avatar-preview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.avatar-preview .app-icon {
  color: #9a8fba;
  width: 28px;
  height: 28px;
}

.avatar-picker-trigger > span:nth-child(2) {
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.avatar-picker-trigger b {
  font-size: 14px;
}

.avatar-picker-trigger small {
  color: #81788e;
  font-size: 12px;
}

.avatar-picker-trigger > span:last-child {
  color: #7868c3;
  font-size: 24px;
}

.avatar-dialog {
  width: min(540px, 100% - 24px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  color: #28213e;
  overscroll-behavior: contain;
  background: #fcfbff;
  border: 1px solid #e5def1;
  border-radius: 24px;
  margin: auto;
  padding: 22px;
  position: fixed;
  inset: 0;
  overflow: auto;
  box-shadow: 0 24px 80px #21133c40;
}

.avatar-dialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #17142978;
}

.avatar-dialog > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.avatar-dialog h2 {
  font: 750 24px/1.2 var(--font-display);
  margin: 10px 0 0;
}

.avatar-dialog-close {
  color: #7a708f;
  cursor: pointer;
  background: #eee9f7;
  border: 0;
  border-radius: 50%;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  display: grid;
}

.avatar-dialog .avatar-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 10px;
}

.avatar-dialog .avatar-category-buttons button {
  min-height: 44px;
}

.avatar-dialog button:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #a28bed;
}

.pulse-metrics.compact-overview {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.compact-overview .metric-card {
  cursor: pointer;
  background: linear-gradient(145deg, #ffffffed, #faf8ffe6);
  border-radius: 20px;
  gap: 4px;
  min-height: 142px;
  padding: 16px;
}

.compact-overview .metric-card > span {
  white-space: nowrap;
  gap: 8px;
  width: 100%;
  font-size: 12px;
  line-height: 1.3;
}

.compact-overview .metric-card > span > b {
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 750;
  overflow: hidden;
}

.compact-overview .metric-card > span .app-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.compact-overview .metric-card > strong {
  white-space: nowrap;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  margin-top: 8px;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.2;
  overflow: hidden;
}

.compact-overview .metric-card > small {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}

.compact-overview .savings-metric svg {
  width: 82px;
  height: 30px;
  margin-top: auto;
  overflow: hidden;
}

.due-payment-dots {
  align-self: flex-end;
  align-items: center;
  gap: 4px;
  height: 30px;
  margin-top: auto;
  display: flex;
}

.due-payment-dots i {
  background: #eca254;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px #eca25418;
}

.real-spend-bars {
  border-bottom: 1px solid #f3dbe3;
  align-self: flex-end;
  align-items: flex-end;
  gap: 5px;
  min-width: 61px;
  height: 30px;
  margin-top: auto;
  display: flex;
}

.real-spend-bars i {
  background: linear-gradient(#e87194, #f0aec0);
  border-radius: 3px 3px 0 0;
  width: 6px;
}

.home-visual-grid.compact-overview {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.home-visual-grid.compact-overview > article {
  background: linear-gradient(145deg, #fffffff2, #fcfaffdf);
  border-radius: 20px;
  grid-column: auto;
  gap: 16px;
  min-height: 248px;
  padding: 18px;
}

.compact-overview header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.compact-overview header > div {
  flex: auto;
  min-width: 0;
}

.compact-overview h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
}

.compact-overview .home-kicker {
  letter-spacing: 1px;
  font-size: 10px;
}

.compact-overview .home-goal-board header > button {
  border-radius: 13px;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  font-size: 24px;
}

.home-card-tabs {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  display: grid;
}

.home-card-tabs button {
  color: #6b6577;
  height: 44px;
  font: 800 9px var(--font-body);
  cursor: pointer;
  background: #fff;
  border: 1px solid #e6e0ed;
  border-radius: 10px;
}

.home-card-tabs button.active {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  box-shadow: 0 6px 14px #6557d938;
}

.home-visual-grid.tabbed {
  grid-template-columns: 1fr;
}

.home-visual-grid.tabbed > article {
  min-height: 0;
}

.home-goal-progress {
  gap: 12px;
  display: grid;
}

.home-goal-progress > button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0;
  display: grid;
}

.goal-progress-icon {
  color: #7964da;
  background: #eee9fc;
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.goal-progress-icon .app-icon {
  width: 16px;
  height: 16px;
}

.home-goal-progress > button > span:nth-child(2) {
  gap: 7px;
  min-width: 0;
  display: grid;
}

.home-goal-progress b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.home-goal-progress strong {
  text-align: right;
  color: #847994;
  font-size: 12px;
}

.home-goal-progress i, .home-category-progress > div > i {
  background: #ede9f3;
  border-radius: 5px;
  height: 5px;
  display: block;
  overflow: hidden;
}

.home-goal-progress em, .home-category-progress em {
  border-radius: 5px;
  height: 100%;
  display: block;
}

.home-plan-stack {
  background: #eeebf4;
  border-radius: 8px;
  gap: 3px;
  height: 16px;
  display: flex;
  overflow: hidden;
}

.home-plan-stack i {
  height: 100%;
  display: block;
}

.home-plan-key {
  gap: 9px;
  display: grid;
}

.home-plan-key > span {
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: grid;
}

.home-plan-key i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.home-plan-key b {
  color: #716780;
  font-weight: 600;
}

.home-saving-target {
  color: #8a8098;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.home-saving-target strong {
  color: #5642ae;
  white-space: nowrap;
  font-size: 14px;
}

.spend-share {
  color: #c2597a;
  white-space: nowrap;
  background: #fff0f5;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 750;
}

.home-category-progress {
  gap: 16px;
  display: grid;
}

.home-category-progress > div > span {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 12px;
  display: flex;
}

.home-category-progress b {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.home-category-progress strong {
  white-space: nowrap;
  flex-shrink: 0;
}

.home-category-progress em {
  background: linear-gradient(90deg, #dc5d86, #eea0b9);
}

.compact-overview .home-card-link {
  min-height: 40px;
  padding-top: 12px;
  font-size: 12px;
}

.compact-overview .home-empty-graphic {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 12px;
}

.compact-overview .home-empty-graphic b {
  font-size: 12px;
}

.compact-overview .home-empty-graphic button {
  min-height: 36px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .pulse-metrics.compact-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .compact-overview .metric-card {
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: auto;
    padding: 10px;
    display: flex;
  }

  .compact-overview .metric-card > span {
    white-space: normal;
    gap: 4px;
    font-size: 7px;
    line-height: 1.25;
  }

  .compact-overview .metric-card > span .app-icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
  }

  .compact-overview .metric-card > strong {
    margin-top: 7px;
    font-size: clamp(11px, 3.6vw, 14px);
  }

  .compact-overview .metric-card > small {
    margin-top: 1px;
    font-size: 6.5px;
  }

  .compact-overview .metric-card > svg, .compact-overview .metric-card > .due-payment-dots, .compact-overview .metric-card > .real-spend-bars {
    display: none;
  }

  .avatar-dialog {
    padding: 18px;
  }

  .avatar-dialog .avatar-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.available-accounts-editor {
  border: 1px solid var(--line, #ded9eb);
  background: #f8f6ffb3;
  border-radius: 16px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.available-accounts-editor > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  list-style: none;
  display: flex;
}

.available-accounts-editor > summary::-webkit-details-marker {
  display: none;
}

.available-accounts-editor > summary span {
  gap: 2px;
  display: grid;
}

.available-accounts-editor > summary b {
  font-size: 11px;
}

.available-accounts-editor > summary small, .available-accounts-editor > summary i {
  color: #8c8697;
  font-size: 9px;
  font-style: normal;
}

.available-accounts-editor[open] > summary {
  border-bottom: 1px solid #e5e0ef;
  padding-bottom: 10px;
}

.available-account-entry {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  display: grid;
}

.available-account-entry input {
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  font-size: 7px;
}

.available-accounts-editor .profile-help {
  font-size: 5px;
}

.available-account-entry button {
  background: var(--violet);
  color: #fff;
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 800;
}

.available-account-entry button.secondary {
  color: #514968;
  background: #eeebfa;
}

.available-account-list {
  gap: 6px;
  display: grid;
}

.available-account-list > div {
  background: #fff;
  border: 1px solid #e5e0ef;
  border-radius: 12px;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  display: grid;
}

.available-account-list > div > b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
}

.available-account-icon {
  width: 28px;
  height: 28px;
  color: var(--violet);
  background: #eeeaff;
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.available-account-icon .app-icon {
  width: 14px;
  height: 14px;
}

.available-account-list button {
  color: #5f5570;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  min-height: auto;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 800;
}

.available-account-list button:hover {
  background: #f3f0fb;
}

.available-account-list button.danger {
  color: #b8344f;
}

.available-account-list button.danger:hover {
  background: #fff0f2;
}

.available-account-error {
  color: #b8344f;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .available-account-entry {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .available-account-entry button.secondary {
    grid-column: 1 / -1;
  }
}

.entry-sheet, .transaction-editor, .ledger-editor, .budget-editor, .finance-composer {
  scroll-padding-bottom: 16px;
}

.workspace-cards button {
  position: relative;
}

.workspace-cards button > .workspace-creator {
  color: #706a7e;
  background: #ffffffeb;
  border: 1px solid #e6e1f1;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 24px;
  margin: 0;
  padding: 2px 7px 2px 2px;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.workspace-creator img {
  object-fit: cover;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

.workspace-creator > .app-icon {
  width: 15px;
  height: 15px;
}

.workspace-creator i {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 92px;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
}

.family-record-creator {
  background: #faf9ff;
  border: 1px solid #e7e2f2;
  border-radius: 11px;
  grid-template-columns: 28px auto 1fr;
  align-items: center;
  gap: 2px 8px;
  margin: 8px 0 12px;
  padding: 7px 9px;
  display: grid;
}

.family-record-creator img, .family-record-creator > span {
  object-fit: cover;
  background: #efecfb;
  border-radius: 50%;
  grid-row: 1 / 3;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.family-record-creator small {
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #9993a8;
  font-size: 7px;
  font-weight: 850;
}

.family-record-creator b {
  color: #2c2742;
  font-size: 10px;
}

@media (max-width: 620px) {
  .entry-sheet, .transaction-editor, .ledger-editor, .budget-editor, .finance-composer {
    border-radius: 18px;
    flex-direction: column;
    width: calc(100% - 12px);
    max-height: calc(100dvh - 16px);
    padding: 16px 14px 12px;
    display: flex;
    overflow: hidden;
  }

  .entry-sheet > .section-tag, .transaction-editor > .section-tag, .ledger-editor > .section-tag, .budget-editor > .section-tag, .finance-composer > .section-tag {
    flex: none;
    align-self: flex-start;
    padding: 4px 7px;
    font-size: 7px;
  }

  .entry-sheet > h2, .transaction-editor > h2, .ledger-editor > h2, .budget-editor > h2, .finance-composer > h2, .entry-sheet-title-row > h2 {
    flex: none;
    margin: 8px 0 3px;
    font-size: 19px;
    line-height: 1.18;
  }

  .entry-sheet-title-row {
    flex: none;
  }

  .entry-sheet > p, .ledger-editor > p {
    flex: none;
    margin: 0 38px 7px 0;
    font-size: 8px;
    line-height: 1.35;
  }

  .entry-sheet > .modal-form, .transaction-editor > .modal-form, .ledger-editor > .modal-form, .budget-editor > .modal-form, .finance-composer > .modal-form {
    min-height: 0;
    padding: 1px 2px calc(8px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-top: 7px;
    overflow: hidden auto;
  }

  .entry-sheet .modal-form label, .transaction-editor .modal-form label, .ledger-editor .modal-form label, .budget-editor .modal-form label, .finance-composer .modal-form label {
    gap: 4px;
    font-size: 11px;
  }

  .entry-sheet .modal-form input, .entry-sheet .modal-form select, .transaction-editor .modal-form input, .transaction-editor .modal-form select, .ledger-editor .modal-form input, .ledger-editor .modal-form select, .budget-editor .modal-form input, .budget-editor .modal-form select, .finance-composer .modal-form input, .finance-composer .modal-form select {
    border-radius: 9px;
    height: 44px;
    margin-top: 0;
    padding-inline: 10px;
    font-size: 11px;
  }

  .entry-sheet .modal-form textarea, .transaction-editor .modal-form textarea, .ledger-editor .modal-form textarea, .finance-composer .modal-form textarea {
    min-height: 54px;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.35;
  }

  .entry-sheet .modal-primary, .transaction-editor .modal-primary, .ledger-editor .modal-primary, .budget-editor .modal-primary, .finance-composer .modal-primary {
    flex: none;
    margin-top: 4px;
    min-height: 44px !important;
  }

  .transaction-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 8px;
  }

  .transaction-editor > .modal-form {
    overflow: hidden;
  }

  .transaction-editor .transaction-form-grid {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 1px 2px 4px;
    overflow: hidden auto;
  }

  .transaction-form-grid .wide {
    grid-column: 1 / -1;
  }

  .transaction-form-grid .profile-help {
    margin-top: 1px;
    font-size: 7px;
    line-height: 1.25;
  }

  .transaction-money-field {
    margin-top: 0;
  }

  .transaction-delete {
    height: auto;
    min-height: 40px;
    margin-top: 4px;
  }

  .workspace-cards button > .workspace-creator {
    padding-right: 4px;
    top: 9px;
    right: 9px;
  }

  .workspace-creator i {
    display: none;
  }
}

@media (max-width: 350px) {
  .transaction-form-grid {
    grid-template-columns: 1fr;
  }

  .transaction-form-grid .wide {
    grid-column: auto;
  }
}

.quick-add-fab {
  z-index: 45;
  width: 56px;
  height: 56px;
  position: fixed;
  bottom: 22px;
  right: max(18px, 50vw - 732px);
}

@media (max-width: 620px) {
  .quick-add-fab {
    bottom: calc(78px + 12px + env(safe-area-inset-bottom));
    right: 14px;
  }
}

.quick-add-fab-main {
  z-index: 2;
  cursor: pointer;
  background: linear-gradient(145deg, #8d74f2, #5b46d5);
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  display: grid;
  position: relative;
  box-shadow: 0 10px 26px #5e4bd158, 0 0 20px #6557d94d, inset 0 1px #ffffff40;
}

.quick-add-fab-plus {
  width: 20px;
  height: 20px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  display: block;
  position: relative;
}

.quick-add-fab-plus:before, .quick-add-fab-plus:after {
  content: "";
  background: #fff;
  border-radius: 2px;
  position: absolute;
}

.quick-add-fab-plus:before {
  width: 100%;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.quick-add-fab-plus:after {
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.quick-add-fab.expanded .quick-add-fab-plus {
  transform: rotate(45deg);
}

.quick-add-fab-options {
  z-index: 1;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
}

.quick-add-fab-option {
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
  display: grid;
  position: absolute;
  top: 4px;
  left: 4px;
  transform: scale(.4)rotate(-120deg);
}

.quick-add-fab.expanded .quick-add-fab-option {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(var(--quick-add-offset, 0)) scale(1) rotate(0deg);
}

.quick-add-fab-options > button:first-child {
  transition-delay: 0s;
}

.quick-add-fab-options > button:nth-child(2) {
  transition-delay: 45ms;
}

.quick-add-fab-options > button:nth-child(3) {
  transition-delay: 90ms;
}

.quick-add-fab.expand-up .quick-add-fab-options > button:first-child {
  --quick-add-offset: -70px;
}

.quick-add-fab.expand-up .quick-add-fab-options > button:nth-child(2) {
  --quick-add-offset: -136px;
}

.quick-add-fab.expand-up .quick-add-fab-options > button:nth-child(3) {
  --quick-add-offset: -202px;
}

.quick-add-fab.expand-down .quick-add-fab-options > button:first-child {
  --quick-add-offset: 70px;
}

.quick-add-fab.expand-down .quick-add-fab-options > button:nth-child(2) {
  --quick-add-offset: 136px;
}

.quick-add-fab.expand-down .quick-add-fab-options > button:nth-child(3) {
  --quick-add-offset: 202px;
}

.quick-add-fab-icon {
  background-color: currentColor;
  width: 20px;
  height: 20px;
  display: inline-block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.quick-add-fab-option.goal {
  color: var(--violet);
  box-shadow: 0 6px 16px #6557d92e, 0 0 14px #6557d94a;
}

.quick-add-fab-option.saving {
  color: var(--green);
  box-shadow: 0 6px 16px #27a57a2e, 0 0 14px #27a57a4a;
}

.quick-add-fab-option.expense {
  color: #b24c65;
  box-shadow: 0 6px 16px #b24c652e, 0 0 14px #b24c654a;
}

@media (prefers-reduced-motion: reduce) {
  .quick-add-fab-plus, .quick-add-fab-option {
    transition: opacity .12s;
  }
}

.pf-round-btn {
  border: 1px solid var(--line);
  width: 34px;
  height: 34px;
  color: var(--ink);
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid;
  box-shadow: 0 5px 14px #40377814;
}

.pf-round-btn svg {
  width: 15px;
  height: 15px;
}

.pf-more-wrap {
  position: relative;
}

.pf-more-wrap .pf-round-btn {
  background: var(--violet-soft);
  color: var(--violet);
  border-color: #ded7fb;
}

.pf-more-menu {
  z-index: 6;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  width: 198px;
  padding: 8px;
  animation: .14s cubic-bezier(.2, .8, .2, 1) both pfMenuIn;
  display: flex;
  position: absolute;
  top: 42px;
  right: 0;
  box-shadow: 0 20px 46px #25203d29;
}

@keyframes pfMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px)scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pf-more-menu i {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #fff;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  right: 12px;
  transform: rotate(45deg);
}

.pf-more-menu button {
  font: 600 12.5px var(--font-body),sans-serif;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  display: flex;
}

.pf-more-menu button:active {
  background: var(--violet-soft);
}

.pf-more-menu button svg {
  width: 15px;
  height: 15px;
  color: var(--violet);
  flex: none;
}

.pf-more-menu button.pf-danger, .pf-more-menu button.pf-danger svg {
  color: #b34e48;
}

.pf-more-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 6px;
}

.pf-id-block {
  z-index: 2;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5cqh, 16px);
  padding: 1.25cqh 22px .5cqh;
  display: flex;
  position: relative;
}

.pf-avatar-wrap {
  width: clamp(64px, 9.25cqh, 88px);
  height: clamp(64px, 9.25cqh, 88px);
  margin-top: 1.75cqh;
  position: relative;
}

.pf-avatar-glow {
  filter: blur(2px);
  background: radial-gradient(circle, #6557d94d 0%, #0000 70%);
  border-radius: 50%;
  position: absolute;
  inset: clamp(-20px, -1.75cqh, -12px);
}

.pf-avatar {
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0 10px 30px #6557d947;
}

.pf-avatar-fallback {
  background: var(--violet-soft);
  color: var(--violet);
  place-items: center;
  display: grid;
}

.pf-avatar-fallback .app-icon {
  width: 40%;
  height: 40%;
}

.pf-orbit-ring {
  animation: 34s linear infinite pfOrbitSpin;
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pf-orbit-ring {
    animation: none;
  }

  .pf-orbit-icon {
    animation: none !important;
  }
}

.pf-orbit-icon {
  border: 1px solid var(--line);
  width: clamp(22px, 3.3cqh, 34px);
  height: clamp(22px, 3.3cqh, 34px);
  color: var(--violet);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  animation: 34s linear infinite pfOrbitCounter;
  display: grid;
  position: absolute;
  box-shadow: 0 8px 18px #40377824;
}

.pf-orbit-icon .app-icon {
  width: 48%;
  height: 48%;
}

.pf-orbit-ring:has(.pf-orbit-icon:hover) {
  animation-play-state: paused;
}

.pf-orbit-icon:hover, .pf-orbit-icon:active {
  background: var(--violet-soft);
  animation-play-state: paused;
  transform: scale(1.1);
}

.pf-orbit-instagram {
  top: -15%;
  left: 75.5%;
}

.pf-orbit-youtube {
  top: 75.5%;
  left: 75.5%;
}

.pf-orbit-website {
  top: 75.5%;
  left: -15%;
}

.pf-orbit-mail {
  top: -15%;
  left: -15%;
}

@keyframes pfOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pfOrbitCounter {
  to {
    transform: rotate(-360deg);
  }
}

.pf-name {
  font: 700 clamp(15px,2.1cqh,20px)/1.1 var(--font-outfit),sans-serif;
  letter-spacing: -.3px;
  color: var(--ink);
  margin: .75cqh 0 0;
}

.pf-email {
  font: 500 clamp(9.5px,1.3cqh,12.5px)/1 var(--font-body),sans-serif;
  color: var(--muted);
  margin: 0;
}

.pf-badge-row {
  gap: .75cqh;
  margin-top: .25cqh;
  display: flex;
}

.pf-badge {
  font: 700 clamp(8px,1.06cqh,9.5px)/1 var(--font-body),sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: .7cqh 10px;
  display: flex;
}

.pf-badge-plus {
  color: #4a2400;
  background: linear-gradient(135deg, #ffcf8a, #ff9f5a);
  box-shadow: 0 6px 16px #ff9f5a4d;
}

.pf-badge-home {
  background: var(--violet-soft);
  color: var(--violet);
  border: 1px solid #ded7fb;
}

.pf-badge-internal {
  color: #241455;
  background: linear-gradient(135deg, #c9b6ff, #8d6bff);
  box-shadow: 0 6px 16px #6557d94d;
}

.pf-body {
  z-index: 2;
  padding: 0 20px max(16px,env(safe-area-inset-bottom));
  scrollbar-width: none;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
  gap: clamp(10px, 2.5cqh, 30px);
  margin-top: 1cqh;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

.pf-body::-webkit-scrollbar {
  display: none;
}

.pf-group {
  flex-direction: column;
  gap: clamp(6px, 1.2cqh, 14px);
  display: flex;
}

.pf-section-label {
  font: 700 clamp(8.5px,1.19cqh,11.5px)/1 var(--font-body),sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 2px;
}

.pf-tile-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1cqh, 12px);
  display: grid;
}

.pf-tile {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: clamp(12px, 1.9cqh, 20px);
  flex-direction: column;
  gap: clamp(5px, .85cqh, 10px);
  padding: clamp(8px, 1.4cqh, 16px) 11px;
  display: flex;
  box-shadow: 0 8px 20px #30284b0d;
}

.pf-tile-icon {
  background: var(--violet-soft);
  width: clamp(22px, 3.3cqh, 34px);
  height: clamp(22px, 3.3cqh, 34px);
  color: var(--violet);
  border-radius: clamp(7px, 1.1cqh, 11px);
  place-items: center;
  display: grid;
}

.pf-tile-income .pf-tile-icon {
  color: #168466;
  background: #e5f7f1;
}

.pf-tile-expense .pf-tile-icon {
  color: #b34e48;
  background: #fff0ee;
}

.pf-tile-goals .pf-tile-icon {
  color: #c97a1f;
  background: #fff4e8;
}

.pf-tile-savings .pf-tile-icon {
  background: var(--violet-soft);
  color: var(--violet);
}

.pf-tile-icon .app-icon {
  width: 52%;
  height: 52%;
}

.pf-tile span {
  font: 600 clamp(8px,1.06cqh,9.5px)/1 var(--font-body),sans-serif;
  letter-spacing: .3px;
  color: var(--muted);
  text-transform: uppercase;
}

.pf-tile b {
  font: 700 clamp(12.5px,1.9cqh,18px)/1.15 var(--font-outfit),sans-serif;
  letter-spacing: -.2px;
  color: var(--ink);
}

.pf-row {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: clamp(12px, 1.9cqh, 20px);
  justify-content: space-between;
  align-items: center;
  padding: clamp(8px, 1.6cqh, 18px) 13px;
  display: flex;
  box-shadow: 0 8px 20px #30284b0d;
}

button.pf-row-button {
  width: 100%;
  color: inherit;
  cursor: pointer;
}

.pf-row-left {
  text-align: left;
  align-items: center;
  gap: clamp(7px, 1.1cqh, 13px);
  display: flex;
}

.pf-row-left i {
  background: var(--violet-soft);
  width: clamp(22px, 3.3cqh, 34px);
  height: clamp(22px, 3.3cqh, 34px);
  color: var(--violet);
  border-radius: clamp(7px, 1.1cqh, 11px);
  place-items: center;
  font-style: normal;
  display: grid;
}

.pf-row-left i svg, .pf-row-left i .app-icon {
  width: 50%;
  height: 50%;
}

.pf-row-left b {
  font: 600 clamp(10.5px,1.5cqh,14px) var(--font-body),sans-serif;
  color: var(--ink);
  display: block;
}

.pf-row-left small {
  color: var(--muted);
  margin-top: 1px;
  font-size: clamp(8.5px, 1.19cqh, 11px);
  display: block;
}

.pf-row-value {
  font: 700 clamp(11px,1.6cqh,15px) var(--font-outfit),sans-serif;
  color: var(--ink);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.pf-row-value svg {
  width: clamp(10px, 1.4cqh, 14px);
  height: clamp(10px, 1.4cqh, 14px);
  color: var(--violet);
}

.pf-home-indicator {
  bottom: max(8px,env(safe-area-inset-bottom));
  pointer-events: none;
  background: #22203929;
  border-radius: 3px;
  width: 120px;
  height: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 640px) {
  .pf-home-indicator {
    display: none;
  }
}

.pf-currency-intro {
  font: 500 clamp(10px,1.4cqh,13px)/1.55 var(--font-body),sans-serif;
  color: var(--muted);
  margin: 0 2px clamp(10px, 2cqh, 20px);
}

.pf-currency-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  justify-content: start;
  gap: 8px;
  display: grid;
}

.pf-currency-card {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  max-width: 84px;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px #30284b0d;
}

.pf-currency-symbol {
  font: 700 13px/1 var(--font-outfit),sans-serif;
  font-style: normal;
}

.pf-currency-card b {
  font: 700 10px/1 var(--font-outfit),sans-serif;
  margin-top: 1px;
}

.pf-currency-card small {
  font: 500 7px/1.2 var(--font-body),sans-serif;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
  overflow: hidden;
}

.pf-currency-selected {
  border-color: var(--violet);
  background: var(--violet-soft);
}

.pf-currency-check {
  background: var(--violet);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 13px;
  height: 13px;
  display: grid;
  position: absolute;
  top: 3px;
  right: 3px;
}

.pf-currency-check svg {
  width: 60%;
  height: 60%;
}

:root {
  --font-lender: var(--font-lender-face),sans-serif;
}

.lender-view, .modal.dialog-lender-connect, .lender-request-overlay {
  font-family: var(--font-lender);
}

.lender-view .money-field span, .lender-entry-modal .money-field span, .lender-request-overlay .money-field span {
  font-family: var(--font-body);
  color: var(--violet);
  font-weight: 800;
}

.lender-summary {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  display: grid;
}

.lender-summary-tile {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  display: flex;
}

.lender-summary-tile small {
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.lender-summary-tile b {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-lender);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lender-summary-tile.owed b {
  color: #168466;
}

.lender-summary-tile.owing b {
  color: #b34e48;
}

.lender-amount-chip {
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-lender);
  font-variant-numeric: tabular-nums;
  color: #7a70a8;
  background: #f1eefe;
  border-radius: 999px;
  flex: none;
  padding: 6px 10px;
}

.lender-amount-chip.positive {
  color: #168466;
  background: #e5f7f1;
}

.lender-amount-chip.negative {
  color: #b34e48;
  background: #fff0ee;
}

.lender-topbar {
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}

.lender-topbar h2 {
  margin: 0;
  font-size: 16px;
}

.lender-chevron-back {
  width: 31px;
  height: 31px;
  color: var(--violet);
  cursor: pointer;
  background: #fff;
  border: 1px solid #e4dfeb;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  display: grid;
}

.lender-balance-card {
  border-bottom: 1px solid var(--line);
  background: none;
  margin-bottom: 14px;
  padding: 0 0 12px;
}

.lender-balance-line {
  color: var(--ink);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  display: flex;
}

.lender-balance-line b {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-lender);
  font-variant-numeric: tabular-nums;
}

.lender-balance-line b.positive {
  color: #168466;
}

.lender-balance-line b.negative {
  color: #b34e48;
}

.lender-settle-pill {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  flex-shrink: 0;
  justify-self: start;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 16px;
  padding: 11px 18px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  box-shadow: 0 8px 18px #6557d930;
}

.lender-settle-pill .app-icon {
  background: #fff;
  width: 14px;
  height: 14px;
}

.lender-settle-pill.secondary {
  color: var(--violet);
  border: 1px solid var(--violet);
  box-shadow: none;
  background: #fff;
}

.lender-settle-pill.secondary .app-icon {
  background: var(--violet);
}

.lender-settle-pill.compact {
  flex-shrink: 0;
  margin: 0;
  padding: 9px 15px;
  font-size: 10.5px;
}

.lender-settle-pill.compact .app-icon {
  width: 12px;
  height: 12px;
}

.lender-connect-form {
  z-index: 1;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  display: flex;
  position: relative;
}

.lender-connect-form input {
  min-width: 220px;
  height: 44px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-lender);
  background: #fff;
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  outline: 0;
  flex: 1;
  padding: 0 13px;
}

.lender-connect-form input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #6557d914;
}

.lender-connect-form button {
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
}

.lender-message {
  z-index: 1;
  color: #5a5468;
  background: #f4f2fa;
  border-radius: 10px;
  margin: 10px 2px 0;
  padding: 9px 12px;
  font-size: 11px;
  display: inline-block;
  position: relative;
}

.lender-section {
  margin-top: 6px;
}

.lender-list {
  gap: 9px;
  margin-top: 10px;
  display: grid;
}

.lender-row {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  display: flex;
}

.lender-row-icon {
  background: var(--violet-soft);
  width: 34px;
  height: 34px;
  color: var(--violet);
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.lender-row-icon .app-icon {
  width: 16px;
  height: 16px;
}

.lender-row-copy {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.lender-row-copy b {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.lender-row-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.lender-row-copy small span.positive {
  color: #168466;
  font-weight: 700;
}

.lender-row-copy small span.negative {
  color: #b34e48;
  font-weight: 700;
}

.lender-row-actions {
  flex: none;
  gap: 7px;
  display: flex;
}

.lender-row-actions button {
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  background: #fff;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 800;
}

.lender-row-actions button.primary {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}

.lender-status-chip {
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #7a70a8;
  background: #f1eefe;
  border-radius: 999px;
  flex: none;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 800;
}

.lender-status-chip.declined {
  color: #b34e48;
  background: #fff0ee;
}

.lender-status-chip.accepted, .lender-status-chip.confirmed {
  color: #168466;
  background: #e5f7f1;
}

.lender-row-button {
  text-align: left;
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.lender-hint {
  color: var(--muted);
  margin-top: 8px;
  font-size: 10.5px;
}

.lender-compact-list {
  border-top: 1px solid var(--line);
  min-width: 0;
  margin-top: 8px;
  display: grid;
}

.lender-compact-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  text-align: left;
  width: 100%;
  max-width: 100%;
  font: inherit;
  cursor: default;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 9px;
  padding: 11px 2px;
  display: flex;
  overflow: hidden;
}

.lender-compact-row-button {
  cursor: pointer;
}

.lender-compact-date {
  color: var(--muted);
  font-family: var(--font-lender);
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  flex: 0 0 30px;
  align-items: center;
  display: flex;
}

.lender-compact-date b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.lender-compact-date small {
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 8px;
}

.lender-compact-icon {
  background: var(--violet-soft);
  width: 34px;
  height: 34px;
  color: var(--violet);
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.lender-compact-icon .app-icon {
  width: 15px;
  height: 15px;
}

.lender-compact-icon.positive {
  color: #168466;
  background: #e5f7f1;
}

.lender-compact-icon.negative {
  color: #b34e48;
  background: #fff0ee;
}

.lender-compact-icon.neutral {
  background: var(--violet-soft);
  color: var(--violet);
}

.lender-compact-copy {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.lender-compact-title {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
}

.lender-compact-copy small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  overflow: hidden;
}

.lender-compact-amount {
  font-family: var(--font-lender);
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 1px;
  display: flex;
}

.lender-compact-amount small {
  letter-spacing: .2px;
  text-transform: uppercase;
  font-size: 8.5px;
  font-weight: 800;
}

.lender-compact-amount small.positive, .lender-compact-amount b.positive {
  color: #168466;
}

.lender-compact-amount small.negative, .lender-compact-amount b.negative {
  color: #b34e48;
}

.lender-compact-amount small.neutral, .lender-compact-amount b.neutral {
  color: var(--muted);
}

.lender-compact-amount small.pending {
  color: #7a70a8;
}

.lender-compact-amount b {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.lender-fab {
  z-index: 20;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  position: fixed;
  bottom: 22px;
  right: max(18px, 50vw - 732px);
  box-shadow: 0 10px 24px #6557d94a;
}

.lender-ledger-view {
  padding-bottom: 76px;
}

.lender-fab b {
  font-size: 15px;
  line-height: 1;
}

.lender-entry-modal .money-field {
  border-radius: 10px;
  height: 44px;
  margin-top: 0;
}

.lender-entry-modal .money-field input {
  height: 100%;
  font-size: 12px;
  font-family: var(--font-lender);
  padding-left: 8px;
}

.lender-entry-modal.slim {
  padding: 22px 20px;
}

.lender-entry-modal h2 {
  font-family: var(--font-lender);
}

.lender-entry-modal.slim h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.lender-slim-form {
  gap: 10px;
  display: grid;
}

.lender-direction-toggle {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.lender-direction-toggle.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.lender-direction-toggle button {
  border: 1.5px solid var(--line);
  height: 42px;
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
}

.lender-direction-toggle button .app-icon {
  background: currentColor;
  width: 14px;
  height: 14px;
}

.lender-direction-toggle button.positive.active {
  color: #168466;
  background: #e5f7f1;
  border-color: #168466;
}

.lender-direction-toggle button.negative.active {
  color: #b34e48;
  background: #fff0ee;
  border-color: #b34e48;
}

.lender-direction-toggle button.split.active {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

.lender-paidby-toggle {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.lender-paidby-toggle button {
  border: 1.5px solid var(--line);
  min-height: 44px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-lender);
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  display: flex;
}

.lender-paidby-toggle button b {
  color: inherit;
  font-weight: 800;
}

.lender-paidby-toggle button.active {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

.lender-paidby-share {
  font-size: 12px;
  color: #168466 !important;
}

.lender-split-method {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  display: grid;
}

.lender-split-method button {
  border: 1.5px solid var(--line);
  height: 44px;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-lender);
  background: #fff;
  border-radius: 10px;
}

.lender-split-method button.active {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

.lender-split-shares {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.lender-split-shares label {
  color: var(--muted);
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.lender-split-shares label b {
  color: var(--ink);
}

.lender-share-field {
  box-sizing: border-box;
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  display: flex;
}

.lender-share-field input {
  width: 100%;
  font-size: 12px;
  font-family: var(--font-lender);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  padding: 0;
}

.lender-share-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lender-split-preview {
  background: #f8f7fc;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
}

.lender-split-preview.positive {
  color: #168466;
  background: #e5f7f1;
}

.lender-split-preview.negative {
  color: #b34e48;
  background: #fff0ee;
}

.lender-split-preview b {
  font-weight: 800;
}

.lender-slim-input {
  width: 100%;
  height: 44px;
  color: var(--ink);
  border: 1px solid #ddd9e6;
  border-radius: 10px;
  outline: 0;
  padding: 0 13px;
  font-size: 12px;
}

.lender-slim-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #6557d914;
}

.lender-delete-entry {
  color: #9b3951;
  cursor: pointer;
  background: #fff8fa;
  border: 1px solid #efc6d0;
  border-radius: 11px;
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-size: 10.5px;
  font-weight: 800;
}

.lender-delete-entry:disabled {
  opacity: .55;
  cursor: default;
}

.lender-settle-picker-list {
  gap: 7px;
  max-height: 280px;
  display: grid;
  overflow-y: auto;
}

.lender-settle-picker-row {
  border: 1.5px solid var(--line);
  cursor: pointer;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.lender-settle-picker-row.checked {
  border-color: var(--violet);
  background: var(--violet-soft);
}

.lender-settle-picker-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--violet);
  flex: none;
}

.lender-settle-picker-copy {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.lender-settle-picker-copy b {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  overflow: hidden;
}

.lender-settle-picker-copy small {
  color: var(--muted);
  font-size: 9.5px;
}

.money-field.compact {
  flex: none;
  width: 82px;
  height: 32px;
  margin: 0;
  padding-left: 8px;
}

.money-field.compact span {
  font-size: 9px;
}

.money-field.compact input {
  width: auto;
  min-width: 0;
  height: 100%;
  font-size: 10.5px;
  font-family: var(--font-lender);
  flex: auto;
  padding-left: 4px;
}

.modal-primary.slim {
  margin-top: 2px;
}

.lender-request-overlay {
  z-index: 200;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #17142978;
  place-items: center;
  padding: 22px;
  display: grid;
  position: fixed;
  inset: 0;
}

.lender-request-card {
  text-align: center;
  background: #fff;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  padding: 28px 24px 24px;
  display: flex;
  box-shadow: 0 24px 60px #00000038;
}

.lender-request-icon.lender-request-icon {
  border-radius: 14px;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  font-size: 16px;
}

.lender-request-icon .app-icon {
  width: 22px;
  height: 22px;
}

.lender-request-card h2 {
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  font-family: var(--font-lender);
  margin: 8px 0 4px;
}

.lender-request-card p {
  color: #7f7a8d;
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
}

.lender-request-actions {
  gap: 10px;
  width: 100%;
  display: flex;
}

.lender-request-actions button {
  cursor: pointer;
  border-radius: 12px;
  flex: 1;
  min-height: 46px;
  font-size: 12px;
  font-weight: 800;
}

.lender-request-actions button:first-child {
  color: #6f697a;
  background: #fff;
  border: 1px solid #ddd9e6;
}

.lender-request-actions button.modal-primary {
  margin-top: 0;
}

@media (max-width: 620px) {
  .lender-row {
    flex-wrap: wrap;
  }

  .lender-row-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .lender-fab {
    bottom: calc(78px + 12px + env(safe-area-inset-bottom));
  }
}

.lender-row-icon.positive {
  color: #168466;
  background: #e5f7f1;
}

.lender-row-icon.negative {
  color: #b34e48;
  background: #fff0ee;
}

.lender-section-header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.lender-add-link {
  color: var(--violet);
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: start;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

.lender-invite-list, .lender-paidby-list {
  gap: 8px;
  display: grid;
}

.lender-paidby-list button {
  border: 1.5px solid var(--line);
  min-height: 44px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-lender);
  background: #fff;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}

.lender-paidby-list button.active {
  border-color: var(--violet);
  background: var(--violet-soft);
  color: var(--violet);
}

.lender-group-shares {
  gap: 8px;
  display: grid;
}

.lender-group-shares label {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.lender-group-shares label .lender-share-field {
  flex: 0 0 130px;
}

.lender-row-settle {
  border: 1px solid var(--violet);
  color: var(--violet);
  cursor: pointer;
  background: #fff;
  border-radius: 9px;
  flex: none;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 800;
}

.lender-pill-button {
  border: 1px solid var(--violet);
  color: var(--violet);
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
}

.lender-pill-button b {
  font-size: 13px;
  line-height: 1;
}

.lender-avatar {
  color: #fff;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-lender);
  letter-spacing: .2px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.lender-avatar.sm {
  border-radius: 7px;
  width: 22px;
  height: 22px;
  font-size: 9px;
}

.lender-avatar-stack {
  flex: none;
  display: flex;
}

.lender-avatar-stack .lender-avatar {
  border: 2px solid #fff;
  margin-left: -10px;
  box-shadow: 0 0 0 1px #fff;
}

.lender-avatar-stack .lender-avatar:first-child {
  margin-left: 0;
}

.lender-avatar-more {
  font-size: 10px;
  color: var(--violet) !important;
  background: #efeaff !important;
}

.lender-topbar .lender-avatar-stack {
  margin-left: 2px;
}

.lender-selected-people {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.lender-selected-chip {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #faf9fd;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.lender-selected-chip button {
  color: #a0445a;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.lender-name-search {
  gap: 6px;
  display: grid;
}

.lender-name-search-results {
  border: 1px solid var(--line);
  background: #faf9fd;
  border-radius: 12px;
  gap: 2px;
  max-height: 220px;
  padding: 6px;
  display: grid;
  overflow: auto;
}

.lender-name-search-results button {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  display: flex;
}

.lender-name-search-results button:hover {
  background: #f4f2fa;
}

.lender-name-search-copy {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.lender-name-search-copy b {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  overflow: hidden;
}

.lender-name-search-copy small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  overflow: hidden;
}

.lender-group-row {
  gap: 12px;
}

.lender-invite-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.lender-invite-row .lender-slim-input {
  flex: 1;
}

.lender-invite-remove {
  border: 1px solid var(--line);
  color: #a0445a;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  display: grid;
}

.lender-paidby-who {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.lender-modal-title-with-avatar {
  align-items: center;
  gap: 10px;
  display: flex;
}

.lender-tab-switch {
  border: 1px solid var(--line);
  background: #f1eef7;
  border-radius: 15px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  display: grid;
  position: relative;
}

.lender-tab-switch button {
  z-index: 1;
  color: #827b8d;
  cursor: pointer;
  min-height: 40px;
  font-size: 12px;
  font-weight: 850;
  font-family: var(--font-lender);
  background: none;
  border: 0;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: flex;
  position: relative;
}

.lender-tab-switch button.active {
  color: var(--violet);
}

.lender-tab-switch .app-icon {
  background: currentColor;
  width: 15px;
  height: 15px;
}

.lender-tab-switch button.frozen {
  opacity: .62;
}

.lender-tab-switch button.frozen small {
  letter-spacing: .3px;
  color: #7568c9;
  background: #e8e3ff;
  border-radius: 5px;
  margin-left: 1px;
  padding: 2px 4px;
  font-size: 7.5px;
  font-weight: 800;
}

.lender-section-header-end {
  justify-content: flex-end;
}

.pill-indicator {
  z-index: 0;
  background: #fff;
  border-radius: 13px;
  transition: transform .32s cubic-bezier(.22, .9, .32, 1), width .32s cubic-bezier(.22, .9, .32, 1);
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  box-shadow: 0 6px 18px #382a6619;
}

@media (prefers-reduced-motion: reduce) {
  .pill-indicator {
    transition: none;
  }
}

.progress-ring {
  flex: none;
}

.undo-toast {
  z-index: 75;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  animation: .2s rise;
  display: flex;
  position: fixed;
  bottom: 92px;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 12px 30px #18152840;
}

.undo-toast button {
  color: #b6a9ff;
  font: 800 11px var(--font-display),sans-serif;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
}

.undo-bar {
  background: var(--violet);
  transform-origin: 0;
  width: 100%;
  height: 2.5px;
  animation: 4s linear forwards undoShrink;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes undoShrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .undo-bar {
    width: 0;
    animation: none;
  }
}

@media (max-width: 620px) {
  .undo-toast {
    bottom: 88px;
  }
}

.confetti-anchor {
  display: inline-flex;
  position: relative;
}

.confetti-anchor-fixed {
  z-index: 65;
  pointer-events: none;
  width: 0;
  height: 0;
  position: fixed;
  top: 30%;
  left: 50%;
}

.confetti-piece {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: 2px;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.fade-in-stagger {
  opacity: 0;
  animation: .4s cubic-bezier(.22, .9, .32, 1) forwards fadeInStagger;
  transform: translateY(10px);
}

@keyframes fadeInStagger {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-stagger {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.fade-in-stagger.spring-tap {
  opacity: 1;
  transform: none;
}

.swipe-row-wrap {
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.swipe-row-actions {
  z-index: 0;
  justify-content: flex-end;
  display: flex;
  position: absolute;
  inset: 0;
}

.swipe-row-action {
  color: #fff;
  font: 700 11px var(--font-display),sans-serif;
  cursor: pointer;
  border: 0;
  place-items: center;
  width: 64px;
  display: grid;
}

.swipe-row-action.edit {
  background: var(--orange);
}

.swipe-row-action.delete {
  background: #e2534f;
}

.swipe-row-surface {
  z-index: 1;
  background: var(--cream);
  touch-action: pan-y;
  transition: transform .3s cubic-bezier(.22, .9, .32, 1);
  position: relative;
  transform: translateX(0);
}

.record-card-wrap {
  display: flex;
  position: relative;
}

.record-card-wrap > button {
  flex: 1;
  width: 100%;
}

.month-switch-header {
  align-items: center;
  gap: 10px;
  display: flex;
}

.month-switch-header .month-switch-arrow {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.month-switch-header .month-switch-arrow:disabled {
  opacity: .35;
  cursor: default;
}

.month-switch-viewport {
  touch-action: pan-y;
  overflow: hidden;
}

.month-switch-track {
  transition: transform .32s cubic-bezier(.22, .9, .32, 1);
  display: inline-flex;
}

.mini-bar-chart {
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 96px;
  margin-top: 10px;
  display: flex;
}

.mini-bar-chart .bar {
  border-radius: 5px 5px 2px 2px;
  flex: 1;
  max-width: 14px;
  min-height: 2px;
  margin: 0 auto;
  transition: height .5s cubic-bezier(.22, .9, .32, 1);
}

.mini-bar-chart-labels {
  gap: 6px;
  margin-top: 6px;
  display: flex;
}

.mini-bar-chart-labels span {
  text-align: center;
  min-width: 0;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 8px;
  font-weight: 700;
  overflow: hidden;
}

.month-comparison-chart {
  margin-top: 14px;
}

.month-comparison-chart .lender-tab-switch {
  margin-bottom: 12px;
}

.entry-sheet-title-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.entry-sheet-submit {
  display: none;
}

@media (max-width: 620px) {
  :is(.modal-backdrop:has( > .entry-sheet), .modal-backdrop:has( > .transaction-editor), .modal-backdrop:has( > .ledger-editor)) {
    align-items: flex-end;
    padding: 0;
  }

  .entry-sheet, .transaction-editor, .ledger-editor {
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 92dvh;
    animation: .26s cubic-bezier(.22, .9, .32, 1) sheetRise;
  }

  .entry-sheet-submit {
    background: var(--violet);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    flex: none;
    align-items: center;
    min-height: 34px;
    margin-top: 8px;
    padding: 0 14px;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    box-shadow: 0 8px 18px #6557d930;
  }

  :is(.entry-sheet:has(.entry-sheet-submit) .modal-form > .modal-primary, .transaction-editor:has(.entry-sheet-submit) .modal-form > .modal-primary, .ledger-editor:has(.entry-sheet-submit) .modal-form > .modal-primary), .entry-sheet > .modal-close, .transaction-editor > .modal-close, .ledger-editor > .modal-close {
    display: none;
  }
}

@keyframes sheetRise {
  from {
    opacity: .6;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-sheet, .transaction-editor, .ledger-editor {
    animation: none;
  }
}

.skeleton-rows {
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
  display: flex;
}

.skeleton-row {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.skeleton-icon {
  border-radius: 10px;
  flex: none;
  width: 36px;
  height: 36px;
}

.skeleton-lines {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  display: flex;
}

.skeleton-line {
  border-radius: 5px;
  height: 9px;
}

.skeleton-icon, .skeleton-line {
  background: linear-gradient(100deg,var(--line) 30%,#fff 50%,var(--line) 70%);
  background-size: 200% 100%;
  animation: 1.3s ease-in-out infinite shimmer;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-icon, .skeleton-line {
    animation: none;
  }
}

.bento-grid {
  grid-template-rows: repeat(2, auto);
  grid-template-columns: 1.3fr 1fr;
}

.bento-grid .savings-metric {
  grid-row: span 2;
  min-height: 0;
}

@media (max-width: 620px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-grid .savings-metric {
    grid-column: span 2;
    min-height: 158px;
    padding-bottom: 74px;
  }

  .bento-grid .savings-metric > svg {
    width: auto;
    height: 56px;
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: block !important;
  }
}

.track-home {
  font-family: var(--font-home);
  flex-direction: column;
  min-height: calc(100dvh - 114px);
  display: flex;
}

.track-header {
  gap: 12px;
  margin-bottom: clamp(10px, 2vw, 14px);
}

.track-home .home-toggle-row {
  margin-bottom: clamp(10px, 2vw, 14px);
}

.track-cards {
  flex: 1;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2dvh, 16px);
  min-height: clamp(420px, 58dvh, 880px);
  display: grid;
}

.track-card {
  border-radius: 22px;
  grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(6px, 1.4dvh, 10px);
  min-height: 0;
  padding: clamp(10px, 3vw, 16px);
  display: grid;
}

.track-pulse {
  flex-direction: column;
  gap: clamp(4px, 1dvh, 8px);
  min-height: 0;
  display: flex;
}

.track-heading > h2 {
  font-family: var(--font-home);
  letter-spacing: .16em;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: clamp(15px, 4.4vw, 19px);
  font-weight: 800;
  display: flex;
}

.track-heading em {
  letter-spacing: 0;
  color: #6b6890;
  text-shadow: none;
  font-size: clamp(10px, 3vw, 12px);
  font-style: normal;
  font-weight: 700;
}

.track-pulse-body {
  flex: 1;
  align-items: center;
  gap: clamp(10px, 3.4vw, 18px);
  min-height: 0;
  display: flex;
}

.track-ring {
  aspect-ratio: 1;
  flex: none;
  width: clamp(64px, 23vw, 104px);
  position: relative;
}

.track-ring svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.track-ring b {
  color: var(--ink);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(14px, 4.6vw, 19px);
  font-weight: 800;
  line-height: 1.05;
  display: flex;
  position: absolute;
  inset: 0;
}

.track-ring b small {
  color: #6b6890;
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 700;
}

.track-stats {
  flex-direction: column;
  flex: 1;
  gap: clamp(5px, 1.2dvh, 9px);
  min-width: 0;
  display: flex;
}

.track-amount {
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(16px, 5vw, 21px);
  font-weight: 800;
  overflow: hidden;
}

.track-amount small {
  color: #6b6890;
  margin-left: 6px;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.track-bar {
  color: #5d5a7c;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  display: flex;
}

.track-bar span {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 0 0 clamp(52px, 17vw, 72px);
  overflow: hidden;
}

.track-bar div {
  background: #ffffffb8;
  border-radius: 9px;
  flex: 1;
  height: clamp(6px, 1.6vw, 9px);
  overflow: hidden;
}

.track-bar s {
  transform-origin: 0;
  border-radius: 9px;
  height: 100%;
  animation: .7s ease-out both trackBarGrow;
  display: block;
}

.track-card.save .track-bar s {
  background: linear-gradient(90deg, #2fb463, #7be0a1);
}

.track-card.spend .track-bar s {
  background: linear-gradient(90deg, #e2574c, #f5a19a);
}

.track-empty {
  color: #6b6890;
  font-size: clamp(11px, 3.2vw, 13px);
}

@keyframes trackBarGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.track-options {
  gap: clamp(5px, 1.6vw, 8px);
  min-height: 0;
  display: grid;
}

.track-options button {
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  cursor: pointer;
  background: #ffffffc7;
  border: none;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  font-family: inherit;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  display: flex;
  box-shadow: 0 5px 12px #2220391a;
}

.track-options button span {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.track-options .app-icon {
  width: clamp(17px, 5.4vw, 23px);
  height: clamp(17px, 5.4vw, 23px);
  margin: 0;
}

.track-card.save .track-options .app-icon {
  color: #1b8a4a;
}

.track-card.spend .track-options .app-icon {
  color: #c2352d;
}

@media (prefers-reduced-motion: reduce) {
  .track-bar s {
    animation: none;
  }
}

.modal.track-popup {
  width: min(100%, 600px);
  max-height: calc(100dvh - 2*clamp(10px,3vw,18px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 28px;
  padding: clamp(14px, 4vw, 22px);
  box-shadow: 0 30px 80px #1f1a4a66, 0 0 0 1px #e4dfff;
}

.track-popup-body {
  min-width: 0;
}

.track-popup .modal-backdrop {
  z-index: 60;
  align-items: center !important;
  padding: clamp(26px, 8vw, 44px) !important;
}

.modal-backdrop:has( > .nested-popup) {
  z-index: 60;
  align-items: center !important;
  padding: clamp(26px, 8vw, 44px) !important;
}

.modal.nested-popup, .track-popup .modal-backdrop > .modal {
  background: #f8f6ff !important;
  border-radius: 24px !important;
  width: min(100%, 520px) !important;
  max-height: calc(100dvh - 2 * clamp(26px, 8vw, 44px)) !important;
  animation: .22s trackPopupIn !important;
  box-shadow: 0 26px 60px #221e4d66, 0 0 0 1px #ddd6ff !important;
}

@keyframes trackPopupIn {
  from {
    opacity: 0;
    scale: .95;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.track-popup, .track-popup button, .track-popup input, .track-popup select, .track-popup textarea, .nested-popup, .nested-popup button, .nested-popup input, .nested-popup select, .nested-popup textarea {
  font-family: var(--font-home);
}

.track-popup h1, .track-popup h2, .track-popup h3, .nested-popup h2, .nested-popup h3 {
  font-family: var(--font-home);
  letter-spacing: -.02em;
  color: var(--ink);
  font-weight: 800;
}

.track-popup .workspace-hero, .track-popup .workspace-cards button, .track-popup .spend-summary-grid article {
  border: 1px solid #e9e5ff;
  border-radius: 18px;
  box-shadow: 0 14px 30px #382b6624, 0 0 22px #6557d926;
}

.track-popup .workspace-hero {
  background: linear-gradient(150deg, #f3f0ff, #fff 75%);
}

.track-popup .add-button, .track-popup .modal-primary, .nested-popup .modal-primary, .nested-popup .add-button {
  background: linear-gradient(145deg, #5545c9, #7a6cf0);
  box-shadow: 0 10px 22px #6557d955;
}

.track-popup .app-icon {
  filter: drop-shadow(0 0 5px #8e7cff55);
}

:is(.modal .modal-backdrop:has( > .nested-popup), .track-popup .modal-backdrop) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #17142933 !important;
}

.modal.track-popup {
  box-shadow: 0 30px 80px #1f1a4a80, 0 0 0 4px #fff5, 0 0 0 5px #d9d2ff;
}

.modal.nested-popup, .track-popup .modal-backdrop > .modal {
  box-shadow: 0 26px 60px #221e4d80, 0 0 0 4px #fff6, 0 0 0 5px #cfc6ff !important;
}

.modal.nested-popup .modal.nested-popup, .track-popup .modal-backdrop .modal-backdrop > .modal {
  background: #ebe6ff !important;
}

.track-popup .swipe-row-surface > button, .track-popup .transaction-rows > .log-row {
  background: #fff;
  border-color: #e4dfff;
}

.track-popup .ledger-action-row, .track-popup .event-ledger-grid > button {
  border: 1px solid #e9e5ff;
  border-radius: 18px;
  box-shadow: 0 14px 30px #382b6624, 0 0 22px #6557d926;
}

.modal-backdrop.track-popup-backdrop {
  padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) !important;
}

.modal.track-popup {
  width: min(100%, 640px) !important;
  height: 100% !important;
  max-height: none !important;
}

.track-popup .modal-backdrop {
  padding: clamp(28px, 3.4dvh, 36px) clamp(24px, 7vw, 30px) !important;
}

.modal-backdrop:has( > .nested-popup) {
  padding: clamp(28px, 3.4dvh, 36px) clamp(24px, 7vw, 30px) !important;
}

.modal.nested-popup, .track-popup .modal-backdrop > .modal {
  max-width: 560px;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

.modal.nested-popup .modal-close, .track-popup .modal-backdrop > .modal .modal-close {
  z-index: 3;
  place-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid !important;
}

.modal.nested-popup, .modal.nested-popup *, .track-popup .modal-backdrop > .modal, .track-popup .modal-backdrop > .modal * {
  scrollbar-width: none;
}

.modal.nested-popup ::-webkit-scrollbar {
  display: none;
}

.track-popup .modal-backdrop > .modal ::-webkit-scrollbar {
  display: none;
}

.track-options button, .track-home .home-notify-button, .track-home .home-profile-button, .track-popup .workspace-cards button, .track-popup .add-button, .track-popup .modal-primary, .track-popup button.secondary, .track-popup .event-ledger-grid > button, .nested-popup .modal-primary, .nested-popup .add-button, .track-popup .swipe-row-surface > button, .track-popup .transaction-rows > .log-row {
  transition: box-shadow .22s, border-color .22s;
}

.track-options button:hover, .track-home .home-notify-button:hover, .track-home .home-profile-button:hover, .track-popup .workspace-cards button:hover, .track-popup .add-button:hover, .track-popup .modal-primary:hover, .track-popup button.secondary:hover, .track-popup .event-ledger-grid > button:hover, .nested-popup .modal-primary:hover, .nested-popup .add-button:hover {
  border-color: #c9bfff;
  transform: none;
  box-shadow: 0 18px 34px #382b6636, 0 0 26px #6557d977;
}

.track-card.save .track-options button:hover {
  border-color: #9fe0b6;
  box-shadow: 0 16px 30px #2fb46340, 0 0 24px #43d17a80;
}

.track-card.spend .track-options button:hover {
  box-shadow: 0 16px 30px #e2574c40, 0 0 24px #ff6b6180;
}

.track-popup .swipe-row-surface > button:hover, .track-popup .transaction-rows > .log-row:hover {
  border-color: #b9adff;
  box-shadow: inset 0 0 0 1px #b9adff, inset 0 0 22px #6557d92e;
}

.track-options button:active, .track-popup .workspace-cards button:active, .track-popup .add-button:active, .track-popup .modal-primary:active, .track-popup button.secondary:active, .track-popup .event-ledger-grid > button:active {
  transform: none;
  box-shadow: 0 12px 24px #382b6630, 0 0 22px #6557d966;
}

.track-popup .swipe-row-surface > button:active, .track-popup .transaction-rows > .log-row:active {
  box-shadow: inset 0 0 0 1px #b9adff, inset 0 0 22px #6557d92e;
}

@media (prefers-reduced-motion: reduce) {
  .track-options button:hover, .track-popup .workspace-cards button:hover, .track-popup .add-button:hover, .track-popup .modal-primary:hover {
    transform: none;
  }
}

:root {
  --hover-glow: 0 14px 28px #382b6626,0 0 22px #6557d966;
}

button:not(:disabled):hover, .goal-button:hover, .workspace-cards button:hover, .salary-action:hover, .contact-us-button:hover, .tour-card button:hover, .quick-paid-button:hover, .trash-clean-button:hover, .pf-orbit-icon:hover {
  transform: none;
}

button:where(:not(:disabled, .modal-dismiss-layer, .swipe-row-action, .nav-item)):hover, .contact-us-button:hover, .profile-social-links a:hover {
  box-shadow: var(--hover-glow);
  transition: box-shadow .22s, border-color .22s, background-color .22s;
}

.swipe-row-surface > button:hover, .transaction-rows > .log-row:hover {
  box-shadow: inset 0 0 0 1px #b9adff, inset 0 0 22px #6557d92e;
}

.modal-dismiss-layer:hover {
  box-shadow: none;
}

.modal-backdrop, .modal-backdrop *, .modal, .modal * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-backdrop ::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal ::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal-backdrop::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal-backdrop.track-popup-backdrop, .track-popup .modal-backdrop {
  align-items: center !important;
}

.modal-backdrop:has( > .nested-popup) {
  align-items: center !important;
}

.modal.track-popup, .modal.nested-popup, .track-popup .modal-backdrop > .modal {
  height: auto !important;
  max-height: 100% !important;
}

.modal.track-popup {
  padding: 14px clamp(14px, 4vw, 20px) !important;
}

.track-popup-body {
  padding-top: 0 !important;
}

.track-popup-body > * {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.modal.track-popup > .modal-close {
  width: 28px;
  height: 28px;
  top: 8px;
  right: 8px;
}

.track-popup [class*="empty"] {
  min-height: 0 !important;
}

.modal.track-popup, .modal.nested-popup, .track-popup .modal-backdrop > .modal {
  transition: height .3s cubic-bezier(.22, .9, .32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .modal.track-popup, .modal.nested-popup, .track-popup .modal-backdrop > .modal {
    transition: none;
  }
}

.modal.has-inline-submit > .modal-close {
  display: none !important;
}

.modal:has(.entry-sheet-submit):not(:has(.modal .entry-sheet-submit)) > .modal-close {
  display: none !important;
}

.modal .inline-submit {
  z-index: 3;
  background: var(--violet);
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: auto;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  box-shadow: 0 8px 18px #6557d930;
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
}

.app-shell[data-page="Home"] .modal-backdrop {
  padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) !important;
  align-items: center !important;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal {
  transition: height .3s cubic-bezier(.22, .9, .32, 1);
  background: #fff !important;
  border-radius: 28px !important;
  width: min(100%, 640px) !important;
  height: auto !important;
  max-height: 100% !important;
  padding: 14px clamp(14px, 4vw, 20px) !important;
  box-shadow: 0 30px 80px #1f1a4a80, 0 0 0 4px #fff5, 0 0 0 5px #d9d2ff !important;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal > .modal-close {
  width: 28px;
  height: 28px;
  top: 8px;
  right: 8px;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal, .app-shell[data-page="Home"] .modal-backdrop > .modal button, .app-shell[data-page="Home"] .modal-backdrop > .modal input, .app-shell[data-page="Home"] .modal-backdrop > .modal select, .app-shell[data-page="Home"] .modal-backdrop > .modal textarea {
  font-family: var(--font-home);
}

.app-shell[data-page="Home"] .modal-backdrop > .modal h2, .app-shell[data-page="Home"] .modal-backdrop > .modal h3 {
  font-family: var(--font-home);
  letter-spacing: -.02em;
  color: var(--ink);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Home"] .modal-backdrop > .modal {
    transition: none;
  }
}

.app-shell[data-page="Home"] .modal-backdrop > .modal > h2 {
  margin-top: 6px;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal > :last-child {
  margin-bottom: 0 !important;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal > .tracker-list {
  margin-top: 12px;
}

.track-heading {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.track-heading .month-switch-arrow {
  color: var(--ink);
}

.track-heading .month-switch-header h2 {
  text-align: center;
  min-width: 9ch;
  font: 800 clamp(15px,4.6vw,19px) var(--font-home);
  letter-spacing: -.3px;
  color: var(--ink);
  text-shadow: none;
  white-space: nowrap;
  margin: 0;
}

.family-pulse-heading {
  align-items: flex-start;
}

.family-pulse-heading .month-switch-header {
  margin-top: 9px;
}

.family-pulse-actions {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.family-workspace.family-home-workspace {
  padding-bottom: 0;
}

html:has(.app-shell[data-page="Home"]) {
  scrollbar-width: none;
}

html:has(.app-shell[data-page="Home"])::-webkit-scrollbar {
  width: 0;
  display: none;
}

.pulse-home {
  padding-bottom: 0;
}

.pulse-home > :not(.modal-backdrop):not(.page-chrome), .track-home > :not(.modal-backdrop):not(.page-chrome) {
  zoom: var(--home-fit, 1);
}

.app-shell[data-page="Home"] .content, .app-shell[data-page="Track"] .content {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.track-home {
  min-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
}

.app-shell[data-page="Home"] .content, .app-shell[data-page="Track"] .content, .app-shell[data-page="Toolbox"] .content {
  padding-top: 0;
}

.page-chrome {
  z-index: 15;
  padding: max(8px,env(safe-area-inset-top)) 0 8px;
  clip-path: inset(0 -100vmax);
  background: #f3f0ff;
  position: sticky;
  top: 0;
  box-shadow: 0 0 0 100vmax #f3f0ff;
}

:root[data-platform="android"] .page-chrome {
  padding-top: 8px;
}

.page-chrome .home-header {
  align-items: center;
  height: 52px;
  margin: 0 0 10px;
}

.page-chrome .home-toggle-row {
  height: 44px;
  margin: 0;
}

.page-chrome .app-shell[data-page="Home"] .pull-refresh-indicator, .app-shell[data-page="Track"] .pull-refresh-indicator, .app-shell[data-page="Toolbox"] .pull-refresh-indicator {
  left: 0;
  right: 0;
  top: calc(122px + env(safe-area-inset-top));
  z-index: 14;
  position: absolute;
}

.page-chrome .modal-backdrop:has(.profile-popup) {
  padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) !important;
  align-items: center !important;
}

.modal.profile-popup {
  font-family: var(--font-home);
  transition: height .3s cubic-bezier(.22, .9, .32, 1);
  background: #fff !important;
  border-radius: 28px !important;
  width: min(100%, 640px) !important;
  height: auto !important;
  max-height: 100% !important;
  padding: 14px clamp(14px, 4vw, 20px) !important;
  box-shadow: 0 30px 80px #1f1a4a80, 0 0 0 4px #fff5, 0 0 0 5px #d9d2ff !important;
}

.modal.profile-popup > .modal-close {
  width: 28px;
  height: 28px;
  top: 8px;
  right: 8px;
}

.profile-popup .profile-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-right: 38px;
  display: flex;
}

.profile-popup .profile-head h2 {
  font: 800 clamp(18px,5vw,22px) var(--font-home);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.profile-popup .pf-id-block {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  display: flex;
  position: relative;
}

.profile-popup .pf-avatar-glow {
  inset: -14px;
}

.profile-popup .pf-name {
  font: 800 clamp(18px,5vw,21px)/1.1 var(--font-home);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 8px 0 0;
}

.profile-popup .pf-email {
  font: 600 12.5px/1.2 var(--font-home);
  color: var(--muted);
  margin: 0;
}

.profile-popup .pf-badge-row {
  gap: 6px;
  margin-top: 2px;
  display: flex;
}

.profile-popup .pf-badge {
  font: 800 9.5px/1 var(--font-home);
  padding: 6px 10px;
}

.profile-popup .pf-body {
  flex: none;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 10px;
  padding: 0;
  overflow: visible;
}

.profile-popup .pf-section-label {
  font: 800 10.5px/1 var(--font-home);
  letter-spacing: 1.2px;
}

.profile-popup .pf-tile-grid {
  gap: 10px;
}

.profile-popup .pf-tile, .profile-popup .pf-row {
  border: 1px solid #e9e5ff;
  border-radius: 18px;
  box-shadow: 0 14px 30px #382b6624, 0 0 22px #6557d926;
}

.profile-popup .pf-tile-icon, .profile-popup .pf-row-left i {
  border-radius: 10px;
  width: 30px;
  height: 30px;
}

.profile-popup .pf-tile span {
  font: 800 9.5px/1 var(--font-home);
}

.profile-popup .pf-tile b {
  font: 800 clamp(15px,4.4vw,18px)/1.15 var(--font-home);
  letter-spacing: -.02em;
}

.profile-popup .pf-row-left {
  gap: 10px;
}

.profile-popup .pf-row-left b {
  font: 800 13px var(--font-home);
}

.profile-popup .pf-row-left small {
  font-size: 11px;
}

.profile-popup .pf-row-value {
  font: 800 14px var(--font-home);
}

.profile-popup .pf-row-value svg {
  width: 13px;
  height: 13px;
}

.profile-popup .pf-more-menu {
  font-family: var(--font-home);
  top: 40px;
}

.modal.pf-currency-popup .pf-currency-intro {
  font: 600 12.5px/1.5 var(--font-home);
  color: var(--muted);
  margin: 2px 0 12px;
}

.modal.pf-currency-popup .pf-currency-grid {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  display: grid;
}

.modal.pf-currency-popup .pf-currency-card {
  border: 1px solid #e9e5ff;
  border-radius: 16px;
  box-shadow: 0 10px 22px #382b6622, 0 0 18px #6557d922;
}

.modal.pf-currency-popup .pf-currency-symbol {
  font: 800 15px/1 var(--font-home);
}

.modal.pf-currency-popup .pf-currency-card b {
  font: 800 11px/1 var(--font-home);
}

.modal.pf-currency-popup .pf-currency-card small {
  font: 600 8.5px/1.2 var(--font-home);
}

@media (prefers-reduced-motion: reduce) {
  .modal.profile-popup {
    transition: none;
  }
}

.profile-popup .pf-avatar-wrap {
  width: clamp(44px, 8.6dvh, 80px);
  height: clamp(44px, 8.6dvh, 80px);
  margin-top: clamp(6px, 1.3dvh, 12px);
}

.profile-popup .pf-id-block {
  gap: clamp(3px, .7dvh, 6px);
  padding: clamp(4px, 1.1dvh, 10px) 0 2px;
}

.profile-popup .pf-name {
  margin-top: clamp(3px, .9dvh, 8px);
  font-size: clamp(16px, 2.3dvh, 21px);
}

.profile-popup .pf-badge {
  padding: clamp(4px, .7dvh, 6px) 10px;
}

.profile-popup .pf-body {
  gap: clamp(7px, 1.5dvh, 14px);
  margin-top: clamp(4px, 1.1dvh, 10px);
}

.profile-popup .pf-group, .profile-popup .pf-tile-grid {
  gap: clamp(6px, 1.1dvh, 10px);
}

.profile-popup .pf-tile {
  gap: clamp(4px, .9dvh, 8px);
  padding: clamp(7px, 1.3dvh, 12px) 12px;
}

.profile-popup .pf-row {
  padding: clamp(7px, 1.3dvh, 12px) 14px;
}

.profile-popup .pf-tile-icon, .profile-popup .pf-row-left i {
  width: clamp(24px, 3.3dvh, 30px);
  height: clamp(24px, 3.3dvh, 30px);
}

.modal-close, .avatar-dialog-close {
  padding: 0;
  line-height: 0;
  font-size: 0 !important;
}

.avatar-dialog-close {
  position: relative;
}

.modal-close:before, .avatar-dialog-close:before {
  content: "";
  background: currentColor;
  width: 46%;
  max-width: 15px;
  height: 46%;
  max-height: 15px;
  margin: auto;
  position: absolute;
  inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.profile-popup .profile-head {
  padding-right: 0;
}

.profile-popup .profile-head-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.modal.profile-popup .profile-head .modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  position: relative;
  top: auto;
  right: auto;
}

.app-shell[data-page="Home"] .modal-backdrop:has( > .modal.nested-popup) {
  padding: clamp(28px, 3.4dvh, 36px) clamp(24px, 7vw, 30px) !important;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal.nested-popup {
  max-width: 560px;
  background: #f8f6ff !important;
  border-radius: 24px !important;
  width: 100% !important;
  box-shadow: 0 26px 60px #221e4d80, 0 0 0 4px #fff6, 0 0 0 5px #cfc6ff !important;
}

.modal.pf-currency-popup .pf-currency-grid {
  padding: 0;
  overflow: visible;
}

.profile-popup .pf-row-left i.pf-currency-glyph {
  font: 800 16px/1 var(--font-home);
  color: var(--violet);
}

.profile-popup .pf-row-left i.pf-currency-glyph[data-symbol-length="2"] {
  font-size: 13px;
}

.profile-popup .pf-row-left i.pf-currency-glyph[data-symbol-length="3"] {
  font-size: 11px;
}

@keyframes popupOut {
  from {
    opacity: 1;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: .94;
  }
}

@keyframes backdropOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.modal-backdrop.is-closing {
  pointer-events: none;
  animation: .24s forwards backdropOut !important;
}

.modal.pf-currency-popup.is-closing {
  animation: .24s cubic-bezier(.4, 0, 1, 1) forwards popupOut !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.is-closing, .modal.pf-currency-popup.is-closing {
    animation-duration: 10ms !important;
  }
}

.pulse-home > .home-comparison-card {
  margin: 16px 0 0;
}

.home-comparison-legend {
  color: #2b2360;
  font-weight: 700;
}

.home-comparison-legend i.last {
  opacity: 1;
  background: #d6d0f3;
  box-shadow: 0 0 0 1.5px #2b236066;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
  display: none;
}

input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
  display: none;
}

.family-pulse-left {
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  min-width: 0;
  display: flex;
}

.family-pulse-left .month-switch-header {
  margin-top: 9px;
}

.family-pulse-status {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
  display: flex;
}

.family-pulse-status > span {
  color: #c8c2db;
  font-size: 11px;
  font-weight: 700;
}

.family-pulse-status > strong {
  white-space: nowrap;
  margin-top: 3px;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
}

.family-pulse-heading + .pulse-balance {
  margin-top: 10px;
}

.track-home > .track-cards {
  margin-top: 12px;
}

.modal-backdrop .modal.has-inline-submit > .modal-close, .track-popup .modal-backdrop > .modal.has-inline-submit > .modal-close, .modal-backdrop .modal.nested-popup.has-inline-submit > .modal-close {
  display: none !important;
}

.modal-backdrop .modal:has(.entry-sheet-submit):not(:has(.modal .entry-sheet-submit)) > .modal-close {
  display: none !important;
}

.track-popup .modal-backdrop > .modal:has(.entry-sheet-submit):not(:has(.modal .entry-sheet-submit)) > .modal-close {
  display: none !important;
}

.modal-backdrop .modal.nested-popup:has(.entry-sheet-submit) > .modal-close {
  display: none !important;
}

.entry-sheet-title-row > h2 {
  overflow-wrap: anywhere;
  flex: 1 1 0;
  min-width: 0;
}

.entry-sheet-title-row > .entry-sheet-submit {
  flex: none;
}

.modal .inline-submit {
  white-space: normal;
  text-align: center;
  max-width: 34%;
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.15;
}

.modal > .modal-close {
  float: none;
  flex: none;
  width: 30px;
  height: 30px;
  margin: -10px -6px -30px auto;
  display: grid !important;
  position: sticky !important;
  top: 8px !important;
  right: auto !important;
}

.modal.has-inline-submit > .modal-close, .modal-backdrop .modal.has-inline-submit > .modal-close, .track-popup .modal-backdrop > .modal.has-inline-submit > .modal-close {
  display: none !important;
}

.modal .record-management {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  display: flex;
}

.modal .record-management > span {
  flex: 0 0 100%;
}

.modal .record-management button {
  flex: auto;
  width: auto;
  padding: 7px 11px;
  min-height: 32px !important;
}

.track-popup .spend-header {
  padding-right: 34px;
}

.track-popup .spend-header .month-switcher {
  grid-template-columns: 26px minmax(82px, 1fr) 26px;
}

.track-popup .spend-header-actions {
  gap: 6px;
}

.track-popup .spend-header {
  grid-template-columns: auto minmax(0, 1fr);
}

.track-popup .spend-header-actions {
  justify-content: flex-end;
  min-width: 0;
}

.track-popup .spend-header .month-switcher {
  grid-template-columns: 24px minmax(64px, 1fr) 24px;
  min-width: 0;
}

@media (max-width: 359px) {
  .track-popup .spend-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .track-popup .spend-header-actions {
    justify-content: space-between;
  }

  .track-popup .spend-header .month-switcher {
    flex: 1;
  }
}

.modal.track-popup:has(.spend-header) > .modal-close {
  top: 9.5px !important;
}

.page-chrome .home-toggle-row.bell-only {
  justify-content: flex-end;
}

.quick-add-fab-main .quick-add-fab-icon {
  color: #fff;
  width: 24px;
  height: 24px;
}

.lend-card {
  text-align: left;
  width: 100%;
  font-family: var(--font-home);
  cursor: pointer;
  color: #fff;
  background: radial-gradient(circle at 86% 16%, #ffffff5c, #0000 34%), radial-gradient(circle at 8% 100%, #c4b5fd55, #0000 42%), linear-gradient(135deg, #7f70ee 0%, #a294f8 52%, #d3caff 100%);
  border: 0;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 21px 45px #8b7cf055, 0 0 32px #a99bff55;
}

.lend-card-art {
  object-fit: contain;
  opacity: .85;
  pointer-events: none;
  width: auto;
  max-width: 70%;
  height: 96%;
  position: absolute;
  bottom: -4%;
  right: -6%;
}

.lend-card-body {
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(6px, 1.4dvh, 12px);
  height: 100%;
  display: flex;
  position: relative;
}

.lend-card-title {
  letter-spacing: .16em;
  color: #fff;
  text-shadow: 0 0 14px #fffc;
  font-size: clamp(15px, 4.4vw, 19px);
  font-weight: 800;
}

.lend-figures {
  flex-direction: column;
  gap: clamp(6px, 1.6dvh, 12px);
  display: flex;
}

.lend-figure {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.lend-figure small {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffffd9;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.lend-figure .lend-amount {
  color: #fff;
  font-size: clamp(20px, 6.4vw, 28px);
  font-weight: 800;
  line-height: 1.1;
}

.lend-detail {
  color: #ffffffe6;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.lend-card:active {
  transform: none;
}

.home-header-actions {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}

.lend-figure small {
  font-size: clamp(11px, 3.2vw, 13px);
}

.lend-detail {
  font-size: clamp(11px, 3.2vw, 13px);
}

.lend-figures {
  gap: clamp(10px, 2.4dvh, 18px);
}

.lend-card {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell[data-page="Guidance"] .content {
  padding-top: 0;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.app-shell[data-page="Guidance"] .pull-refresh-indicator {
  left: 0;
  right: 0;
  top: calc(122px + env(safe-area-inset-bottom));
  position: absolute;
}

.nested-popup .lender-view {
  margin-top: 0;
  padding-bottom: 0;
}

.nested-popup .lender-fab {
  z-index: 3;
  width: fit-content;
  margin: 12px 0 0 auto;
  position: sticky;
  bottom: 0;
  right: auto;
}

.lender-action-pair {
  align-items: center;
  gap: 10px;
  display: flex;
}

.lender-action-pair .lender-settle-pill {
  flex: 1 1 0;
  justify-content: center;
  justify-self: auto;
  margin: 0;
}

.nested-popup .lender-topbar {
  z-index: 6;
  background: #f8f6ff;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  position: sticky;
  top: 0;
  box-shadow: -21px 0 #f8f6ff, 21px 0 #f8f6ff, 0 -26px #f8f6ff;
}

.modal.track-popup.lend-groups-popup > .modal-close {
  display: none !important;
}

.lender-title-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.lender-title-row h2 {
  margin: 6px 0 0;
}

.lender-title-row .lender-pill-button {
  flex: none;
  margin-top: 2px;
}

.lender-action-pair .lender-pill-button {
  flex: 1 1 0;
  justify-content: center;
  padding: 11px 14px;
  font-size: 11.5px;
}

.lender-settle-pill:disabled {
  opacity: .45;
  cursor: default;
}

.lender-popup-title {
  align-items: center;
  margin-bottom: 12px;
}

.lender-popup-title h2 {
  margin: 0;
}

.lender-popup-title .modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  position: relative;
  top: auto;
  right: auto;
}

.modal .lender-popup-title h2 {
  margin: 0 !important;
}

.modal .lender-popup-title .modal-close {
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
}

.lender-section > .section-tag + .lender-action-pair {
  margin-top: 12px;
}

.modal.dialog-lender-connect .section-tag {
  font-size: 10px;
  font-family: var(--font-home);
  padding: 5px 9px;
}

.modal.dialog-lender-connect .lender-hint {
  font-size: 11px;
  font-family: var(--font-home);
  margin: 2px 0 4px;
}

.modal.dialog-lender-connect .inline-submit {
  white-space: nowrap;
  max-width: none;
}

.modal.dialog-lender-connect .lender-row-button:hover {
  box-shadow: 0 12px 24px #382b6626, 0 0 22px #6557d94d;
}

.swipe-send {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  height: 56px;
  font-family: var(--font-home);
  background: #ece9fb;
  border-radius: 28px;
  margin: 10px 0 6px;
  position: relative;
  overflow: hidden;
}

.swipe-send-fill {
  background: #c9c1f7;
  border-radius: 28px;
  transition: width .25s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.swipe-send-label {
  letter-spacing: .04em;
  color: #6557d9;
  opacity: calc(.5 * (1 - var(--swipe-progress, 0) * .9));
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding-left: 44px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  position: absolute;
  inset: 0;
}

.swipe-send-hint {
  letter-spacing: -.1em;
  color: #6557d9;
  opacity: calc(.5 * (1 - var(--swipe-progress, 0)));
  pointer-events: none;
  align-items: center;
  font-size: 20px;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
}

.swipe-send-knob {
  color: #fff;
  cursor: grab;
  background: #6557d9;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transition: transform .25s;
  display: grid;
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow: 0 6px 14px #6557d955, 0 0 16px #6557d966;
}

.swipe-send-knob:disabled {
  cursor: default;
}

.swipe-send-arrow {
  font-size: 22px;
  line-height: 1;
}

.swipe-send.done .swipe-send-fill {
  background: #bfe6cf;
}

.swipe-send.done .swipe-send-knob {
  background: #2f9d63;
  box-shadow: 0 6px 14px #2f9d6355;
}

.swipe-send.done .swipe-send-label {
  opacity: 1;
  color: #1f6b42;
  padding-left: 0;
}

.swipe-send.disabled {
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .swipe-send-knob, .swipe-send-fill {
    transition: none;
  }
}

.lender-message {
  transition: opacity .6s;
}

.lender-message.fading {
  opacity: 0;
}

.app-shell[data-page="Toolbox"] .content {
  padding-top: 0;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.toolbox-card {
  text-align: left;
  width: 100%;
  font-family: var(--font-home);
  cursor: pointer;
  color: #fff;
  border: 0;
  grid-template-rows: minmax(0, 1fr);
  display: block;
  position: relative;
  overflow: hidden;
}

.tool-chip {
  color: #6557d9;
  background: #ffffffd9;
  border-radius: 14px;
  flex: none;
  place-items: center;
  width: clamp(36px, 11vw, 46px);
  height: clamp(36px, 11vw, 46px);
  display: grid;
  box-shadow: 0 6px 14px #2220391a;
}

.tool-chip .app-icon {
  color: #6557d9;
  width: 55%;
  height: 55%;
}

.tool-chip.danger, .tool-chip.danger .app-icon {
  color: #c2352d;
}

.tool-chip.danger {
  background: #fff0ef;
}

.tool-chip .bug-glyph {
  transform: scale(.9);
}

.toolbox-card:hover {
  box-shadow: 0 21px 45px #8b7cf066, 0 0 40px #b9adff99;
}

.toolbox-home .toolbox-legal-links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: clamp(6px, 1.2dvh, 10px) 0 0;
  font-size: 11px;
}

.toolbox-card .lend-card-title {
  text-transform: uppercase;
}

.modal.dialog-security .inline-submit {
  white-space: nowrap;
  max-width: none;
}

.toolbox-card {
  cursor: default;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.8dvh, 14px);
}

.tool-grid {
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(6px, 1.8vw, 10px);
  min-height: 0;
  display: grid;
}

.tool-tile {
  min-width: 0;
  min-height: 0;
  color: var(--ink);
  font-family: var(--font-home);
  cursor: pointer;
  background: #ffffffc7;
  border: 0;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1dvh, 8px);
  padding: 6px 4px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 5px 12px #2220391a;
}

.tool-tile .tool-chip {
  width: clamp(34px, 10vw, 44px);
  height: clamp(34px, 10vw, 44px);
  box-shadow: none;
  background: #f0eaff;
}

.tool-tile .tool-chip.danger {
  background: #fff0ef;
}

.tool-label {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
}

.tool-tile.danger .tool-label {
  color: #b9504a;
}

.tool-tile:disabled {
  opacity: .55;
  cursor: default;
}

.tool-tile:active {
  transform: none;
}

.toolbox-card .tool-grid {
  align-content: stretch;
  align-self: stretch;
  height: 100%;
}

.toolbox-card .track-heading {
  align-self: start;
}

.toolbox-card .tool-grid {
  grid-auto-rows: minmax(0, clamp(72px, 14dvh, 112px));
  align-content: center;
  align-self: center;
  height: auto;
  margin-top: clamp(8px, 1.6dvh, 14px);
}

.toolbox-card {
  padding-bottom: clamp(12px, 3.4vw, 18px);
}

.toolbox-home .track-cards {
  flex: none;
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  min-height: 0;
}

.toolbox-card {
  grid-template-rows: auto auto;
}

.toolbox-card .tool-grid {
  grid-auto-rows: clamp(72px, 14dvh, 104px);
  align-self: start;
}

.lend-home, .lend-home *, .toolbox-home, .toolbox-home *, .app-shell[data-page="Guidance"] .modal, .app-shell[data-page="Guidance"] .modal *, .app-shell[data-page="Toolbox"] .modal, .app-shell[data-page="Toolbox"] .modal * {
  font-family: var(--font-home);
}

.home-comparison-card {
  color: #fff;
  background: radial-gradient(circle at 86% 18%, #8d79f12e, #0000 29%), linear-gradient(135deg, #282442 0%, #3b315f 53%, #6755d9 100%);
  box-shadow: 0 21px 45px #34285840, 0 0 32px #6557d93a;
}

.family-pulse-actions {
  align-items: stretch;
}

.family-pulse-actions > button {
  text-align: center;
  justify-content: center;
}

.tool-tile {
  position: relative;
}

.tool-badge {
  color: #fff;
  font: 800 8px/1.2 var(--font-home);
  letter-spacing: .08em;
  background: #6557d9;
  border-radius: 999px;
  padding: 2px 6px;
  font-style: normal;
  position: absolute;
  top: 6px;
  right: 6px;
}

.toolbox-card .tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.welcome-banner {
  background: #3a3157;
  border-radius: 16px;
  flex: 0 auto;
  width: clamp(190px, 64vw, 250px);
  height: 52px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 26px #382b6633, 0 0 22px #6557d933;
}

.welcome-banner img {
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.home-header .welcome-banner .home-welcome {
  max-width: 66%;
  font-family: var(--font-home);
  color: #fff;
  text-shadow: 0 1px 6px #0009, 0 0 2px #0006;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: clamp(13px, 4.2vw, 16px);
  font-weight: 800;
  position: absolute;
  top: 50%;
  left: 14px;
  overflow: hidden;
  transform: translateY(-50%);
}

.home-header .welcome-banner .home-welcome[data-long="1"] {
  font-size: 14px;
}

.home-header .welcome-banner .home-welcome[data-long="2"] {
  font-size: 12.5px;
}

.page-banner .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.track-ring-seg {
  animation: .9s ease-out both trackRingIn;
}

@keyframes trackRingIn {
  from {
    stroke-dasharray: 0 var(--ring-c);
  }
}

.track-ring b small {
  display: block;
}

.track-change {
  margin-top: 2px;
  font-size: clamp(11px, 3.3vw, 13px);
  font-weight: 800;
}

.track-change.good {
  color: #1b8a4a;
}

.track-change.bad {
  color: #c2352d;
}

.track-change.flat {
  color: #6b6890;
  font-weight: 700;
}

.track-strip {
  align-items: flex-end;
  gap: clamp(2px, .8vw, 5px);
  height: clamp(26px, 5dvh, 44px);
  margin-top: clamp(2px, .8dvh, 8px);
  display: flex;
}

.track-strip-bar {
  cursor: pointer;
  transform-origin: bottom;
  border: 0;
  border-radius: 3px;
  flex: 1;
  min-width: 0;
  padding: 0;
  animation: .6s ease-out both trackBarUp;
}

@keyframes trackBarUp {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.track-strip-labels {
  color: #6b6890;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(10px, 2.9vw, 11px);
  font-weight: 700;
  display: flex;
}

.track-strip-labels em {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-style: normal;
  overflow: hidden;
}

@media (max-height: 640px) {
  .track-strip, .track-strip-labels {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .track-ring-seg, .track-strip-bar {
    animation: none;
  }
}

.track-strip {
  justify-content: space-between;
}

.track-strip-bar {
  max-width: 34px;
}

.lend-card-art {
  opacity: .32;
  z-index: 0;
}

.lend-card-body {
  gap: clamp(6px, 1.4dvh, 12px);
}

.lend-card-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.lend-card-top .lend-detail {
  text-align: right;
  font-size: clamp(10px, 3vw, 12px);
}

.lend-figures {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.lend-figure.owing {
  text-align: right;
  align-items: flex-end;
}

.lend-figure .lend-amount {
  font-size: clamp(22px, 7vw, 30px);
}

.lend-bar {
  background: #ffffff40;
  border-radius: 999px;
  height: 14px;
  display: flex;
  overflow: hidden;
}

.lend-bar i {
  transform-origin: 0;
  height: 100%;
  animation: .8s ease-out both lendBarIn;
  display: block;
}

.lend-bar i.owed {
  background: #63d68d;
}

.lend-bar i.owing {
  background: #ff8f86;
  animation-delay: .1s;
}

@keyframes lendBarIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.lend-bar-labels {
  color: #ffffffe6;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(10px, 2.9vw, 11px);
  font-weight: 700;
  display: flex;
}

.lend-bar-labels b {
  color: #fff;
  font-weight: 800;
}

.lend-chips {
  flex-wrap: nowrap;
  gap: 8px;
  display: flex;
  overflow: hidden;
}

.lend-chip {
  color: #fff;
  background: #ffffff38;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 10px 4px 4px;
  font-size: clamp(11px, 3.2vw, 12px);
  font-weight: 700;
  display: flex;
}

.lend-chip-badge {
  color: #6557d9;
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 0 0 2px #63d68d;
}

.lend-chip-badge.owing {
  box-shadow: 0 0 0 2px #ff8f86;
}

.lend-chip-badge .lender-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.lend-chip-initials {
  font-size: 11px;
  font-weight: 800;
}

.lend-chip-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.lend-chip b {
  flex: none;
  font-weight: 800;
}

.lend-chip b.owed {
  color: #d9ffe6;
}

.lend-chip b.owing {
  color: #ffe2df;
}

@media (max-height: 700px) {
  .lend-chips {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lend-bar i {
    animation: none;
  }
}

.lend-chips {
  min-height: 32px;
}

.lend-bar-group {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.lend-card {
  background: radial-gradient(circle at 86% 16%, #7bbde838, #0000 36%), radial-gradient(circle at 10% 100%, #4e8ea240, #0000 44%), linear-gradient(135deg, #001d39 0%, #0a4174 48%, #49769f 100%);
  box-shadow: 0 21px 45px #001d3966, 0 0 32px #4e8ea24d;
}

.lend-card-art {
  opacity: .22;
}

.lend-home .modal.nested-popup, .modal.dialog-lender-connect.nested-popup {
  background: #f3f8fc !important;
  box-shadow: 0 26px 60px #001d3980, 0 0 0 4px #fff6, 0 0 0 5px #9cc4dc !important;
}

.lend-home .modal .section-tag, .modal.dialog-lender-connect .section-tag {
  color: #0a4174;
  background: #e3eef7;
}

.lend-home .modal .lender-settle-pill.secondary, .modal.dialog-lender-connect .lender-settle-pill.secondary, .lend-home .modal .lender-pill-button, .modal.dialog-lender-connect .lender-pill-button {
  color: #0a4174;
  border-color: #0a4174;
}

.lend-home .modal .lender-chevron-back, .modal.dialog-lender-connect .lender-chevron-back {
  color: #0a4174;
}

.lend-home .modal:not(.track-popup), .modal.dialog-lender-connect {
  background: #f3f8fc !important;
  box-shadow: 0 26px 60px #001d3980, 0 0 0 4px #fff6, 0 0 0 5px #9cc4dc !important;
}

.lend-home .modal .lender-slim-input, .modal.dialog-lender-connect .lender-slim-input, .lend-home .modal .lender-connect-form input, .modal.dialog-lender-connect .lender-connect-form input {
  background: #fff;
}

.lend-home .modal .lender-status-chip, .modal.dialog-lender-connect .lender-status-chip {
  color: #49769f;
  background: #e3eef7;
}

.track-card.save {
  background: radial-gradient(circle at 88% 14%, #3f9a5c40, #0000 40%), radial-gradient(circle at 6% 100%, #28623a55, #0000 46%), linear-gradient(135deg, #0f2027 0%, #173a34 50%, #28623a 100%);
  box-shadow: 0 18px 40px #0f202766, 0 0 28px #28623a66, 0 0 0 1px #ffffff26;
}

.track-card.save .track-heading > h2 {
  color: #8ff0b4;
  text-shadow: 0 0 14px #3fd07a99;
}

.track-card.save .track-heading .month-switch-arrow, .track-card.save .track-heading .month-switch-header h2 {
  color: #fff;
}

.track-card.save .track-ring svg circle:first-child {
  stroke: #ffffff26;
}

.track-card.save .track-ring-seg {
  stroke: #7be0a1;
}

.track-card.save .track-ring b {
  color: #fff;
}

.track-card.save .track-ring b small {
  color: #c7e8d3;
}

.track-card.save .track-amount {
  color: #fff;
}

.track-card.save .track-amount small {
  color: #c7e8d3;
}

.track-card.save .track-change.good {
  color: #8ff0b4;
}

.track-card.save .track-change.bad {
  color: #ff9d94;
}

.track-card.save .track-change.flat {
  color: #c7e8d3;
}

.track-card.save .track-strip-bar {
  background: #fff3;
}

.track-card.save .track-strip-bar.hot {
  background: #7be0a1;
}

.track-card.save .track-strip-labels {
  color: #c7e8d3;
}

.track-card.spend {
  background: radial-gradient(circle at 88% 14%, #a03a4240, #0000 40%), radial-gradient(circle at 6% 100%, #6b1e2355, #0000 46%), linear-gradient(135deg, #2c0f12 0%, #4a1a1f 50%, #6b1e23 100%);
  box-shadow: 0 18px 40px #2c0f1266, 0 0 28px #6b1e2366, 0 0 0 1px #ffffff26;
}

.track-card.spend .track-heading > h2 {
  color: #ffb3ab;
  text-shadow: 0 0 14px #ff6b6199;
}

.track-card.spend .track-heading .month-switch-arrow, .track-card.spend .track-heading .month-switch-header h2 {
  color: #fff;
}

.track-card.spend .track-ring svg circle:first-child {
  stroke: #ffffff26;
}

.track-card.spend .track-ring-seg {
  stroke: #ff8f86;
}

.track-card.spend .track-ring b {
  color: #fff;
}

.track-card.spend .track-ring b small {
  color: #f0cfcb;
}

.track-card.spend .track-amount {
  color: #fff;
}

.track-card.spend .track-amount small {
  color: #f0cfcb;
}

.track-card.spend .track-change.good {
  color: #8ff0b4;
}

.track-card.spend .track-change.bad {
  color: #ffb3ab;
}

.track-card.spend .track-change.flat {
  color: #f0cfcb;
}

.track-card.spend .track-strip-bar {
  background: #fff3;
}

.track-card.spend .track-strip-bar.hot {
  background: #ff8f86;
}

.track-card.spend .track-strip-labels {
  color: #f0cfcb;
}

.app-shell[data-tone="save"] {
  --violet: #28623a;
  --violet-soft: #e7f3ea;
  --hover-glow: 0 14px 28px #28623a26,0 0 22px #3f9a5c66;
}

.app-shell[data-tone="spend"] {
  --violet: #6b1e23;
  --violet-soft: #f8e9ea;
  --hover-glow: 0 14px 28px #6b1e2326,0 0 22px #a03a4266;
}

.app-shell[data-tone="save"] .modal.track-popup {
  box-shadow: 0 30px 80px #0f202780, 0 0 0 4px #fff5, 0 0 0 5px #a9d6b6;
}

.app-shell[data-tone="spend"] .modal.track-popup {
  box-shadow: 0 30px 80px #2c0f1280, 0 0 0 4px #fff5, 0 0 0 5px #e0aeb0;
}

.app-shell[data-tone="save"] .modal:not(.track-popup) {
  background: #f2f8f4 !important;
  box-shadow: 0 26px 60px #0f202780, 0 0 0 4px #fff6, 0 0 0 5px #8fc8a2 !important;
}

.app-shell[data-tone="spend"] .modal:not(.track-popup) {
  background: #fbf4f4 !important;
  box-shadow: 0 26px 60px #2c0f1280, 0 0 0 4px #fff6, 0 0 0 5px #d99a9d !important;
}

.app-shell[data-tone="save"] .modal .section-tag {
  color: #1d5030;
  background: #e2f1e7;
}

.app-shell[data-tone="spend"] .modal .section-tag {
  color: #6b1e23;
  background: #f6e2e3;
}

.app-shell[data-tone="save"] .modal .modal-primary, .app-shell[data-tone="save"] .modal .inline-submit, .app-shell[data-tone="save"] .modal button.primary, .app-shell[data-tone="save"] .track-popup .add-button {
  color: #fff;
  background: linear-gradient(135deg, #0f2027, #28623a);
  border-color: #28623a;
}

.app-shell[data-tone="spend"] .modal .modal-primary, .app-shell[data-tone="spend"] .modal .inline-submit, .app-shell[data-tone="spend"] .modal button.primary, .app-shell[data-tone="spend"] .track-popup .add-button {
  color: #fff;
  background: linear-gradient(135deg, #2c0f12, #6b1e23);
  border-color: #6b1e23;
}

.app-shell[data-tone="save"] .modal button.secondary, .app-shell[data-tone="save"] .modal .lender-pill-button {
  color: #28623a;
  border-color: #28623a;
}

.app-shell[data-tone="spend"] .modal button.secondary, .app-shell[data-tone="spend"] .modal .lender-pill-button {
  color: #6b1e23;
  border-color: #6b1e23;
}

.app-shell[data-tone="save"] .modal .workspace-hero {
  background: linear-gradient(135deg, #e8f4ec, #fafdfb);
  border-color: #cfe6d8;
}

.app-shell[data-tone="spend"] .modal .workspace-hero {
  background: linear-gradient(135deg, #faeaea, snow);
  border-color: #ecd0d1;
}

.app-shell[data-tone="save"] .modal .workspace-hero:after {
  background: #e0f0e6;
}

.app-shell[data-tone="spend"] .modal .workspace-hero:after {
  background: #f6dfe0;
}

.app-shell[data-tone="save"] .modal .transaction-heading nav button:not(.secondary), .app-shell[data-tone="save"] .modal .ledger-action-row nav button:not(.secondary), .app-shell[data-tone="save"] .modal .category-chart-header nav button:not(.secondary) {
  color: #fff;
  background: linear-gradient(135deg, #0f2027, #28623a);
  border-color: #28623a;
}

.app-shell[data-tone="spend"] .modal .transaction-heading nav button:not(.secondary), .app-shell[data-tone="spend"] .modal .ledger-action-row nav button:not(.secondary), .app-shell[data-tone="spend"] .modal .category-chart-header nav button:not(.secondary) {
  color: #fff;
  background: linear-gradient(135deg, #2c0f12, #6b1e23);
  border-color: #6b1e23;
}

.app-shell[data-tone="save"] .modal .month-switcher button, .app-shell[data-tone="save"] .modal .spend-filter-toggle {
  color: #28623a;
}

.app-shell[data-tone="spend"] .modal .month-switcher button, .app-shell[data-tone="spend"] .modal .spend-filter-toggle {
  color: #6b1e23;
}

.app-shell[data-tone="save"] .modal .metric-card .app-icon, .app-shell[data-tone="save"] .modal .spend-summary .app-icon, .app-shell[data-tone="save"] .modal article > .app-icon {
  color: #28623a;
}

.app-shell[data-tone="spend"] .modal .metric-card .app-icon, .app-shell[data-tone="spend"] .modal .spend-summary .app-icon, .app-shell[data-tone="spend"] .modal article > .app-icon {
  color: #6b1e23;
}

.spend-summary-grid article[role="button"] {
  cursor: pointer;
  transition: box-shadow .22s, border-color .22s;
}

.spend-summary-grid article[role="button"]:hover {
  box-shadow: var(--hover-glow);
}

.spend-summary-grid article[role="button"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.spend-tile-popup .tile-heading {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b6890;
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 800;
}

.spend-tile-popup .tile-heading:first-of-type {
  margin-top: 0;
}

.tile-calc {
  gap: 6px;
  margin: 0;
  display: grid;
}

.tile-calc > div {
  background: #fff;
  border: 1px solid #e4dfeb;
  border-radius: 12px;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
}

.tile-calc dt {
  color: #6b6890;
}

.tile-calc dd {
  color: var(--ink);
  margin: 0;
  font-weight: 800;
}

.tile-calc .tile-result.bad dd, .tile-calc .tile-result.bad dt {
  color: #c2352d;
  font-weight: 800;
}

.tile-calc .tile-result.good dd, .tile-calc .tile-result.good dt {
  color: #1b8a4a;
  font-weight: 800;
}

.tile-budgets {
  gap: 8px;
  display: grid;
}

.tile-budget {
  background: #fff;
  border: 1px solid #e4dfeb;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.tile-budget > div {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.tile-budget b {
  font-size: 14px;
}

.tile-budget span {
  color: #6b6890;
  font-size: 11.5px;
}

.tile-budget strong {
  color: #1b8a4a;
  flex: none;
  font-size: 13px;
}

.tile-budget.over {
  background: #fff9f8;
  border-color: #f0c8c4;
}

.tile-budget.over strong {
  color: #c2352d;
}

.tile-budget i {
  background: #ece9f5;
  border-radius: 6px;
  height: 6px;
  display: block;
  overflow: hidden;
}

.tile-budget i s {
  background: #28a86b;
  border-radius: 6px;
  height: 100%;
  display: block;
}

.tile-budget.over i s {
  background: #e2574c;
}

.tile-empty, .tile-note {
  color: #6b6890;
  margin: 0;
  font-size: 12.5px;
}

.tile-note {
  margin-top: 10px;
}

.modal .lender-popup-title {
  z-index: 6;
  background: inherit;
  margin-top: -32px;
  padding: 32px 0 8px;
  position: sticky;
  top: -26px;
}

.spend-tile-popup > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.spend-tile-popup .tracker-list {
  margin: 10px 0 0;
  padding-bottom: 0;
}

.transaction-heading {
  justify-content: flex-end;
}

.home-comparison-legend i.last {
  background: #c2e8ff;
  box-shadow: 0 0 0 1.5px #fff6;
}

.home-comparison-legend i.this {
  background: #5482b4;
  box-shadow: 0 0 0 1.5px #fff6;
}

.home-comparison-bars b {
  background: #052659;
}

.home-space-pill button.active {
  color: #fff;
  background: linear-gradient(145deg, #520380, #3a025b);
  box-shadow: 0 0 18px #52038099, inset 0 0 0 1px #ffffff26;
}

.quick-add-fab-main {
  background: linear-gradient(145deg, #520380, #220135);
  animation: 3.4s ease-in-out infinite fabGlow;
  box-shadow: 0 12px 28px #11001c99, 0 0 24px #52038099, inset 0 1px #fff3;
}

@keyframes fabGlow {
  0%, 100% {
    box-shadow: 0 12px 28px #1f1f6680, 0 0 20px #5b6fe080, inset 0 1px #ffffff50;
  }

  50% {
    box-shadow: 0 12px 28px #1f1f6680, 0 0 36px #a9b8ffb3, inset 0 1px #ffffff50;
  }
}

.lend-fab .quick-add-fab-main {
  animation: none;
}

.mobile-nav.v2-mobile-nav button {
  transition: box-shadow .22s, background-color .22s;
}

.mobile-nav.v2-mobile-nav button {
  z-index: 1;
  position: relative;
}

.mobile-nav.v2-mobile-nav button.active {
  transition: color .3s;
  color: #fff !important;
  box-shadow: none !important;
  background: none !important;
}

.mobile-nav.v2-mobile-nav .nav-pill {
  left: 0;
  top: var(--nav-pill-top, 6px);
  bottom: var(--nav-pill-top, 6px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(145deg, #520380, #3a025b);
  border-radius: 18px;
  transition: transform .5s cubic-bezier(.22, .9, .32, 1), width .5s cubic-bezier(.22, .9, .32, 1);
  position: absolute;
  box-shadow: 0 0 20px #52038099, inset 0 0 0 1px #ffffff26;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.v2-mobile-nav .nav-pill {
    transition: none;
  }
}

.mobile-nav.v2-mobile-nav .app-icon {
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .quick-add-fab-main {
    animation: none;
  }
}

.lend-graphic {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.lend-settle-row {
  align-items: center;
  gap: clamp(10px, 3vw, 14px);
  display: flex;
}

.lend-ring {
  aspect-ratio: 1;
  flex: none;
  width: clamp(64px, 20vw, 84px);
  position: relative;
}

.lend-ring svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.lend-ring b {
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(14px, 4.4vw, 18px);
  font-weight: 800;
  line-height: 1.05;
  display: flex;
  position: absolute;
  inset: 0;
}

.lend-ring b small {
  color: #d6e8f7;
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 700;
}

.lend-ring-arc {
  animation: .9s ease-out both trackRingIn;
}

.lend-settle-copy {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.lend-settle-copy small {
  letter-spacing: .08em;
  color: #d6e8f7;
  font-size: clamp(9px, 2.8vw, 11px);
  font-weight: 800;
}

.lend-settle-copy > b {
  color: #fff;
  font-size: clamp(18px, 5.6vw, 22px);
  font-weight: 800;
}

.lend-settle-copy > b em {
  color: #d6e8f7;
  font-size: clamp(10px, 3vw, 12px);
  font-style: normal;
  font-weight: 700;
}

.lend-settle-copy > span {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.lend-settle-copy > span.owing {
  color: #ffd2cc;
}

.lend-settle-copy > span.owed {
  color: #c9f5d8;
}

.lend-ages {
  gap: 4px;
  height: 8px;
  display: flex;
}

.lend-ages i {
  transform-origin: 0;
  border-radius: 4px;
  flex: 1;
  max-width: 28px;
  animation: .6s ease-out both lendBarIn;
}

.lend-ages i.settled {
  background: #63d68d;
}

.lend-ages i.part {
  background: #c9e6a0;
}

.lend-ages i.fresh {
  background: #ffd28a;
}

.lend-ages i.late {
  background: #ff8f86;
}

.lend-bubbles svg {
  width: 100%;
  height: auto;
  max-height: clamp(84px, 17dvh, 124px);
}

.lend-bubble-core {
  fill: #fff2;
  stroke: #fff6;
  stroke-width: 1.5px;
}

.lend-bubble-net {
  font: 800 16px var(--font-home);
  fill: #fff;
}

.lend-bubble-caption {
  font: 700 10px var(--font-home);
  fill: #d6e8f7;
}

.lend-bubble circle.owed {
  fill: #63d68d;
  fill-opacity: .9;
}

.lend-bubble circle.owing {
  fill: #ff8f86;
  fill-opacity: .92;
}

.lend-bubble text {
  font: 800 10px var(--font-home);
  fill: #0b2440;
}

.lend-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: .55s cubic-bezier(.22, .9, .32, 1) both lendPop;
}

@keyframes lendPop {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-height: 700px) {
  .lend-ages, .lend-graphic > .lend-bar-labels {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lend-ring-arc, .lend-ages i, .lend-bubble {
    animation: none;
  }
}

.lend-bubble-net.calm {
  font-size: 12px;
}

.lend-card {
  color: #0e2a47;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: radial-gradient(circle at 12% 0, #fffc, #0000 46%), radial-gradient(circle at 90% 100%, #8fc0ea66, #0000 50%), linear-gradient(150deg, #f6faff 0%, #dbe9f6 52%, #bfd8ee 100%);
  box-shadow: 0 18px 40px #4a80b433, 0 0 0 1px #ffffffb3, inset 0 1px #fffc;
}

.lend-card .lend-card-title {
  color: #0f5fae;
  text-shadow: 0 0 14px #fffc;
}

.lend-card .lend-detail, .lend-card .lend-figure small, .lend-card .lend-bar-labels, .lend-card .lend-bar-labels span {
  color: #4f6f8f;
}

.lend-card .lend-bar-labels b, .lend-card .lend-figure .lend-amount {
  color: #0e2a47;
}

.lend-card-art {
  opacity: .16;
  mix-blend-mode: multiply;
}

.lend-card .lend-ring svg circle:first-child {
  stroke: #1e78d02e;
}

.lend-card .lend-ring-arc {
  stroke: #2fa863;
}

.lend-card .lend-ring b {
  color: #0e2a47;
}

.lend-card .lend-ring b small, .lend-card .lend-settle-copy small {
  color: #4f6f8f;
}

.lend-card .lend-settle-copy > b {
  color: #0e2a47;
}

.lend-card .lend-settle-copy > b em {
  color: #4f6f8f;
}

.lend-card .lend-settle-copy > span.owing {
  color: #c2352d;
}

.lend-card .lend-settle-copy > span.owed {
  color: #1b8a4a;
}

.lend-card .lend-ages i.settled {
  background: #43b87a;
}

.lend-card .lend-ages i.part {
  background: #a8d67c;
}

.lend-card .lend-ages i.fresh {
  background: #f2b955;
}

.lend-card .lend-ages i.late {
  background: #e8675e;
}

.lend-card .lend-bubble-core {
  fill: #ffffffb3;
  stroke: #1e78d055;
}

.lend-card .lend-bubble-net {
  fill: #0e2a47;
}

.lend-card .lend-bubble-caption {
  fill: #4f6f8f;
}

.lend-card .lend-bubble circle.owed {
  fill: #43b87a;
}

.lend-card .lend-bubble circle.owing {
  fill: #e8675e;
}

.lend-card .lend-bubble text {
  fill: #fff;
}

.lend-card .lend-chip {
  color: #0e2a47;
  background: #ffffffb8;
  box-shadow: 0 4px 12px #4a80b422, inset 0 0 0 1px #fffc;
}

.lend-card .lend-chip b.owed {
  color: #1b8a4a;
}

.lend-card .lend-chip b.owing {
  color: #c2352d;
}

.lend-card .lend-chip-badge {
  color: #0f5fae;
  background: #fff;
}

.lend-card:hover {
  box-shadow: 0 22px 46px #4a80b444, 0 0 34px #1e78d033, 0 0 0 1px #fffc;
}

.lend-card.solo .lend-detail, .lend-card.solo .lend-figure small, .lend-card.solo .lend-bar-labels, .lend-card.solo .lend-bar-labels span, .lend-card.solo .lend-settle-copy small, .lend-card.solo .lend-ring b small, .lend-card.solo .lend-settle-copy > b em {
  color: #9ba8ab;
}

.lend-card.solo .lend-figure .lend-amount, .lend-card.solo .lend-settle-copy > b, .lend-card.solo .lend-ring b, .lend-card.solo .lend-bar-labels b {
  color: #fff;
}

.lend-card.solo .lend-card-art {
  opacity: .16;
  mix-blend-mode: screen;
}

.lend-card.solo .lend-ring svg circle:first-child {
  stroke: #ffffff26;
}

.lend-card.solo .lend-ring-arc {
  stroke: #63d68d;
}

.lend-card.solo .lend-settle-copy > span.owing {
  color: #ffb3ab;
}

.lend-card.solo .lend-settle-copy > span.owed {
  color: #9fe8bc;
}

.lend-card.solo .lend-ages i.settled {
  background: #63d68d;
}

.lend-card.solo .lend-ages i.part {
  background: #c9e6a0;
}

.lend-card.solo .lend-ages i.fresh {
  background: #ffd28a;
}

.lend-card.solo .lend-ages i.late {
  background: #ff8f86;
}

.lend-card.solo .lend-chip {
  color: #ccd0cf;
  background: #ffffff1f;
  box-shadow: inset 0 0 0 1px #ffffff26;
}

.lend-card.solo .lend-chip b.owed {
  color: #9fe8bc;
}

.lend-card.solo .lend-chip b.owing {
  color: #ffb3ab;
}

.lend-card.groups {
  color: #e6f0f6;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: radial-gradient(circle at 88% 12%, #a0bacc40, #0000 42%), radial-gradient(circle at 8% 100%, #08546c66, #0000 50%), linear-gradient(140deg, #022534 0%, #053a50 34%, #08546c 66%, #7fa3b9 100%);
  box-shadow: 0 20px 44px #02253473, 0 0 30px #08546c66, 0 0 0 1px #ffffff1f, inset 0 1px #ffffff26;
}

.lend-card.groups .lend-detail, .lend-card.groups .lend-figure small, .lend-card.groups .lend-bar-labels, .lend-card.groups .lend-bar-labels span, .lend-card.groups .lend-bubble-caption {
  color: #c3d6e2;
  fill: #c3d6e2;
}

.lend-card.groups .lend-figure .lend-amount, .lend-card.groups .lend-bar-labels b {
  color: #fff;
}

.lend-card.groups .lend-card-art {
  opacity: .2;
  mix-blend-mode: screen;
}

.lend-card.groups .lend-bubble-core {
  fill: #ffffff24;
  stroke: #fff6;
}

.lend-card.groups .lend-bubble-net {
  fill: #fff;
}

.lend-card.groups .lend-bubble circle.owed {
  fill: #63d68d;
}

.lend-card.groups .lend-bubble circle.owing {
  fill: #ff8f86;
}

.lend-card.groups .lend-bubble text {
  fill: #06202c;
}

.lend-card.groups .lend-chip {
  color: #e6f0f6;
  background: #ffffff26;
  box-shadow: inset 0 0 0 1px #ffffff2e;
}

.lend-card.groups .lend-chip b.owed {
  color: #9fe8bc;
}

.lend-card.groups .lend-chip b.owing {
  color: #ffb3ab;
}

.home-space-pill button.active {
  background: var(--mix-glow);
  color: #fff;
  box-shadow: 0 0 18px #7f3aa199, 0 0 24px #5416b566, inset 0 0 0 1px #ffffff2e;
}

.home-space-pill {
  position: relative;
}

.home-space-pill button {
  z-index: 1;
  transition: color .3s;
  position: relative;
}

.home-space-pill button.active {
  box-shadow: none;
  background: none;
}

.home-space-pill .space-pill {
  background: var(--mix-glow);
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  transition: transform .45s cubic-bezier(.22, .9, .32, 1), width .45s cubic-bezier(.22, .9, .32, 1);
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  box-shadow: 0 0 18px #7f3aa199, 0 0 24px #5416b566, inset 0 0 0 1px #ffffff2e;
}

@media (prefers-reduced-motion: reduce) {
  .home-space-pill .space-pill, .home-space-pill button {
    transition: none;
  }
}

.page-out-copy * {
  transition: none !important;
  animation: none !important;
}

.page-out-copy .fade-in-stagger {
  opacity: 1 !important;
  transform: none !important;
}

.home-comparison-legend i.last {
  background: #a9cbe8;
}

.home-comparison-legend i.this, .home-comparison-bars b {
  background: #5482b4;
}

.home-comparison-bars b.last {
  background: #a9cbe8;
}

.home-space-pill button.active {
  color: #fff;
}

.home-space-pill .space-pill {
  background: var(--mix-glow);
  box-shadow: 0 0 18px #2078cf99, 0 0 24px #0e4eb266, inset 0 0 0 1px #ffffff40;
}

.quick-add-fab-main {
  background: var(--mix-glow);
  box-shadow: 0 12px 28px #011f6580, 0 0 26px #2078cf99, inset 0 1px #ffffff50;
}

.mobile-nav.v2-mobile-nav .nav-pill {
  background: var(--mix-glow);
  box-shadow: 0 0 20px #2078cf99, 0 0 26px #0e4eb266, inset 0 0 0 1px #ffffff40;
}

.home-notify-button {
  color: #fff;
  box-shadow: 0 8px 18px var(--bell-glow, #0e4eb255),0 0 16px var(--bell-glow, #2078cf55),inset 0 1px 0 #ffffff40;
  border: 0;
  transition: box-shadow .22s;
  position: relative;
}

.home-notify-button .app-icon {
  color: #fff;
}

.app-shell[data-page="Track"] {
  --bell-fill: radial-gradient(circle at 80% 15%,#a294f8aa,transparent 60%),linear-gradient(145deg,#7f70ee 0%,#2c2650 100%);
  --bell-glow: #7f70ee88;
}

.page-chrome .home-notify-button {
  background: var(--bell-fill, linear-gradient(145deg,#2078cf,#011f65));
}

.page-chrome .home-notify-button:hover {
  box-shadow: 0 8px 18px var(--bell-glow, #0e4eb255),0 0 26px var(--bell-glow, #2078cf88),inset 0 1px 0 #ffffff40;
}

.mobile-nav.v2-mobile-nav {
  align-items: stretch;
}

.mobile-nav.v2-mobile-nav button {
  justify-content: center;
  align-self: stretch;
  height: auto;
}

.mobile-nav.v2-mobile-nav .nav-pill {
  top: 6px;
  bottom: 6px;
}

.lend-slip-foot {
  color: #d6e8f7;
  margin-top: 6px;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.lend-tickets {
  align-items: center;
}

.lend-ticket-fan {
  width: 100%;
  height: clamp(118px, 22dvh, 150px);
  display: block;
  position: relative;
}

.lend-ticket {
  color: #dbe6ee;
  width: min(58%, 190px);
  font-family: var(--font-home);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff1f;
  border: 1px solid #ffffff38;
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  animation: .6s cubic-bezier(.22, .9, .32, 1) both lendTicketIn;
  display: flex;
  position: absolute;
}

.lend-ticket small {
  color: #c3d6e2;
  font-size: clamp(11px, 3.2vw, 12.5px);
  font-weight: 700;
}

.lend-ticket b {
  font-size: clamp(17px, 5.4vw, 22px);
  font-weight: 800;
}

.lend-ticket em {
  opacity: .85;
  font-size: 11px;
  font-style: normal;
}

.lend-ticket.owed b {
  color: #9fe8bc;
}

.lend-ticket.owing b {
  color: #ffb3ab;
}

.lend-ticket.clear b {
  color: #e6f0f6;
}

.lend-ticket.t2 {
  opacity: .75;
  animation-delay: .14s;
  top: 20%;
  left: 4%;
  transform: rotate(-9deg);
}

.lend-ticket.t1 {
  background: #ffffff2b;
  animation-delay: 70ms;
  top: 11%;
  left: 20%;
  transform: rotate(-2deg);
}

.lend-ticket.t0 {
  color: #fff;
  background: linear-gradient(145deg, #fff4, #ffffff1f);
  border-color: #ffffff59;
  width: min(60%, 200px);
  padding: 12px 14px;
  top: 4%;
  left: 38%;
  transform: rotate(6deg);
  box-shadow: 0 12px 26px #06141b80;
}

@keyframes lendTicketIn {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lend-ticket, .lend-portrait-arc {
    animation: none;
  }
}

.lend-portrait {
  gap: 8px;
}

.lend-portrait-row {
  align-items: center;
  gap: clamp(12px, 4vw, 18px);
  display: flex;
}

.lend-portrait-frame {
  aspect-ratio: 1;
  flex: none;
  width: clamp(92px, 28vw, 116px);
  position: relative;
}

.lend-portrait-frame svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.lend-portrait-arc {
  animation: .9s ease-out both trackRingIn;
}

.lend-portrait.owing .lend-portrait-arc {
  stroke: #ff8f86;
}

.lend-portrait.owed .lend-portrait-arc {
  stroke: #63d68d;
}

.lend-portrait.clear .lend-portrait-arc {
  stroke: #e6f0f6;
}

.lend-portrait-face {
  background: #e6f0f6;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 10%;
  overflow: hidden;
}

.lend-portrait-face .lender-avatar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: clamp(20px, 6vw, 28px);
}

.lend-portrait-empty {
  color: #08546c;
  font-size: 28px;
  font-weight: 800;
}

.lend-portrait-tag {
  color: #0e2a47;
  background: #e6f0f6;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  position: absolute;
  bottom: 2px;
  right: -6px;
  box-shadow: 0 4px 12px #02253466;
}

.lend-portrait.owing .lend-portrait-tag {
  color: #4a1410;
  background: #ff8f86;
}

.lend-portrait.owed .lend-portrait-tag {
  color: #052b16;
  background: #63d68d;
}

.lend-portrait-copy {
  min-width: 0;
  font-family: var(--font-home);
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.lend-portrait-copy b {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(17px, 5.4vw, 21px);
  font-weight: 800;
  overflow: hidden;
}

.lend-portrait-copy span {
  color: #e6f0f6;
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 700;
}

.lend-portrait-copy small {
  color: #c3d6e2;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
}

.lend-card-body {
  justify-content: flex-start;
}

.lend-card-body > .lend-graphic {
  margin-block: auto;
}

.onb-shell {
  min-height: 100dvh;
  padding: max(24px,env(safe-area-inset-top)) 16px 28px;
  font-family: var(--font-home);
  color: #fff;
  background: radial-gradient(circle at 10% 0, #7f3aa166, #0000 46%), radial-gradient(circle at 100% 100%, #5416b599, #0000 52%), radial-gradient(circle at 100% 0, #0f083bcc, #0000 50%), linear-gradient(160deg, #0c0516 0%, #1a0129 55%, #220135 100%);
  flex-direction: column;
  align-items: center;
  gap: 22px;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

.onb-glow {
  filter: blur(28px);
  pointer-events: none;
  background: conic-gradient(from 200deg at 20% 0, #0000, #9d5dc140, #0000 30%, #5416b533, #0000 60%);
  height: 60%;
  animation: 9s ease-in-out infinite alternate onbGlow;
  position: absolute;
  inset: -20% -10% auto;
}

@keyframes onbGlow {
  from {
    opacity: .55;
    transform: translateX(-2%);
  }

  to {
    opacity: 1;
    transform: translateX(3%);
  }
}

.onb-stepper {
  z-index: 1;
  grid-template-columns: repeat(4, 1fr);
  width: min(460px, 100%);
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}

.onb-line {
  background: #ffffff2e;
  border-radius: 4px;
  height: 4px;
  position: absolute;
  top: 21px;
  left: 12.5%;
  right: 12.5%;
}

.onb-line i {
  height: 100%;
  width: var(--onb-fill, 0%);
  background: linear-gradient(90deg, #b26ad9, #7f3aa1, #5416b5);
  border-radius: 4px;
  transition: width .6s cubic-bezier(.22, .9, .32, 1);
  display: block;
  box-shadow: 0 0 14px #9d5dc1;
}

.onb-step {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
  position: relative;
}

.onb-dot {
  color: #ffffffb3;
  background: #ffffff1f;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  font-weight: 800;
  transition: background .4s, box-shadow .4s, transform .4s;
  display: grid;
  box-shadow: inset 0 0 0 2px #fff3;
}

.onb-step small {
  color: #ffffff80;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.onb-step b {
  color: #fff9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.onb-step.done .onb-dot {
  color: #fff;
  background: linear-gradient(145deg, #9d5dc1, #5416b5);
  box-shadow: 0 0 18px #9d5dc1, inset 0 0 0 2px #fff5;
}

.onb-step.done b, .onb-step.done small {
  color: #fff;
}

.onb-step.current .onb-dot {
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #c58bf0, #7f3aa1 45%, #5416b5);
  width: 50px;
  height: 50px;
  margin-top: -3px;
  animation: 2.4s ease-in-out infinite onbPulse;
  box-shadow: 0 0 0 4px #0c0516, 0 0 0 6px #b26ad9, 0 0 26px #9d5dc1;
}

.onb-step.current b, .onb-step.current small {
  color: #fff;
}

@keyframes onbPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px #0c0516, 0 0 0 6px #b26ad9, 0 0 22px #9d5dc1;
  }

  50% {
    box-shadow: 0 0 0 4px #0c0516, 0 0 0 6px #d9a6f5, 0 0 36px #b26ad9;
  }
}

.onb-body {
  z-index: 1;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  gap: 10px;
  width: min(460px, 100%);
  display: flex;
  position: relative;
}

.onb-back {
  color: #e9dcf7;
  font: 800 13px var(--font-home);
  cursor: pointer;
  background: #ffffff1a;
  border: 0;
  border-radius: 999px;
  align-self: flex-start;
  padding: 7px 14px;
  transition: box-shadow .22s;
  box-shadow: inset 0 0 0 1px #ffffff26;
}

.onb-back:hover {
  box-shadow: inset 0 0 0 1px #ffffff40, 0 0 18px #9d5dc166;
}

.onb-card {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(145deg, #ffffff26, #ffffff0d);
  border: 1px solid #fff3;
  border-radius: 26px;
  width: 100%;
  padding: 20px 18px 18px;
  animation: .5s cubic-bezier(.22, .9, .32, 1) both onbCardIn;
  position: relative;
  box-shadow: 0 26px 60px #0c051699, inset 0 1px #fff3;
}

@keyframes onbCardIn {
  from {
    opacity: 0;
    translate: calc(var(--onb-dir, 1) * 34px) 0;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

.onb-form {
  gap: 12px;
  display: grid;
}

.onb-card h1 {
  font: 800 22px/1.2 var(--font-home);
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 2px;
}

.onb-card label {
  color: #e3d3f4;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  display: grid;
}

.onb-card small, .onb-card .plan-tip {
  color: #cbb6e6;
}

.onb-card input, .onb-card select {
  color: #fff;
  height: 46px;
  font: 700 15px var(--font-home);
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
}

.onb-card input::placeholder {
  color: #ffffff73;
}

.onb-card select option {
  color: #1a0129;
}

.onb-card .money-field {
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
  align-items: center;
  height: 46px;
  padding-left: 13px;
  display: flex;
}

.onb-card .money-field span {
  color: #d9c4ef;
  font-size: 14px;
  font-weight: 800;
}

.onb-card .money-field input {
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  height: 100%;
  padding-left: 8px;
}

.onb-card .money-left-preview small {
  color: #e3d3f4;
}

.onb-card .money-left-track {
  background: #ffffff26;
}

.onb-card .money-left-track span {
  background: linear-gradient(90deg, #b26ad9, #5416b5);
}

.onb-card .dob-selects {
  box-shadow: none;
  background: #ffffff10;
  border: 1px solid #ffffff26;
  border-radius: 14px;
}

.onb-card .who-avatar-hero {
  background: #ffffff1f;
}

.onb-card .who-gender-row button {
  color: #e3d3f4;
  min-height: 42px;
  font: 800 13px var(--font-home);
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
}

.onb-card .who-gender-row button.selected {
  color: #fff;
  background: linear-gradient(145deg, #9d5dc1, #5416b5);
  border-color: #b26ad9;
  box-shadow: 0 0 16px #9d5dc188;
}

.onb-card .auth-error {
  color: #ffb3ab;
  background: #ff8f8622;
  border: 1px solid #ff8f8655;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
}

.onb-card .auth-submit {
  color: #fff;
  width: 100%;
  height: 50px;
  font: 800 16px var(--font-home);
  cursor: pointer;
  background: linear-gradient(145deg, #9d5dc1 0%, #7f3aa1 40%, #5416b5 100%);
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  transition: box-shadow .22s;
  animation: none;
  display: flex;
  box-shadow: 0 12px 26px #5416b588, 0 0 22px #9d5dc155, inset 0 1px #ffffff40;
}

.onb-card .auth-submit:hover {
  box-shadow: 0 12px 26px #5416b588, 0 0 34px #b26ad9aa, inset 0 1px #ffffff40;
}

.onb-card .smart-plan-methods {
  grid-template-columns: repeat(3, 1fr);
}

.onb-card .smart-plan-methods button {
  color: #fff;
  background: #ffffff12;
  border: 1px solid #ffffff2e;
  border-radius: 14px;
  gap: 4px;
  padding: 10px 6px;
}

.onb-card .smart-plan-methods button.active {
  background: #9d5dc133;
  border-color: #b26ad9;
  box-shadow: 0 0 18px #9d5dc188;
}

.onb-card .smart-plan-methods strong {
  color: #fff;
  font-size: 14px;
}

.onb-card .smart-plan-methods small {
  color: #d9c4ef;
  font-size: 10.5px;
}

.onb-success {
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  display: flex;
}

.onb-success h1 {
  margin: 4px 0 6px;
}

.onb-success p {
  color: #e3d3f4;
  margin: 0;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .onb-glow, .onb-step.current .onb-dot, .onb-card {
    animation: none;
  }

  .onb-line i {
    transition: none;
  }
}

.onb-card .available-accounts-editor {
  background: #ffffff12;
  border: 1px solid #ffffff2e;
}

.onb-card .available-accounts-editor > summary b {
  color: #fff;
  font-size: 14px;
}

.onb-card .available-accounts-editor > summary small, .onb-card .available-accounts-editor > summary i {
  color: #cbb6e6;
  font-size: 11.5px;
}

.onb-card .available-accounts-editor[open] > summary {
  border-bottom-color: #ffffff26;
}

.onb-card .available-account-entry input {
  color: #fff;
  background: #ffffff14;
  border-color: #ffffff2e;
  font-size: 14px;
}

.onb-card .available-account-entry button {
  background: linear-gradient(145deg, #9d5dc1, #5416b5);
  font-size: 13px;
}

.onb-card .available-account-entry button.secondary {
  color: #e9dcf7;
  background: #ffffff1f;
}

.onb-card .available-account-list > div {
  background: #ffffff12;
  border-color: #ffffff26;
}

.onb-card .available-account-list > div > b {
  color: #fff;
  font-size: 13px;
}

.onb-card .available-account-icon {
  color: #e9dcf7;
  background: #ffffff1f;
}

.onb-card .available-account-list button {
  color: #d9c4ef;
  font-size: 11px;
}

.onb-card .available-account-list button:hover {
  background: #ffffff1a;
}

.onb-card .available-account-list button.danger {
  color: #ffb3ab;
}

.onb-card .available-accounts-editor .profile-help {
  color: #cbb6e6;
  font-size: 11px;
}

.onb-card .who-gender-row {
  grid-template-columns: repeat(3, 1fr);
}

.onb-card .who-gender-row button:last-child {
  grid-column: auto;
}

.onb-card .who-avatar-placeholder {
  background: #ffffff40;
}

.onb-card .plan-tip {
  font-size: 12px;
}

.money-pulse-card {
  background: radial-gradient(circle at 88% 14%, #d0b0f052, #0000 40%), radial-gradient(circle at 6% 100%, #b070d040, #0000 48%), linear-gradient(135deg, #2b1640 0%, #503070 42%, #703090 74%, #b070d0 100%);
  box-shadow: 0 21px 45px #2b164066, 0 0 32px #b070d066, 0 0 0 1px #ffffff1f;
}

:root {
  --mix-glow: radial-gradient(circle at 100% 0%,#a9b8ff99,transparent 58%),linear-gradient(145deg,#5b6fe0 0%,#703090 100%);
}

.home-space-pill {
  background: radial-gradient(circle at 100% 100%, #5b6fe055, #0000 60%), linear-gradient(135deg, #1f1f66 0%, #503070 100%);
  box-shadow: 0 10px 24px #1f1f6666, 0 0 22px #5b6fe044, inset 0 0 0 1px #ffffff26;
}

.home-space-pill button {
  color: #d9cdf5;
}

.home-space-pill .space-pill {
  box-shadow: 0 0 18px #5b6fe099, 0 0 24px #70309077, inset 0 0 0 1px #ffffff40;
}

.quick-add-fab-main {
  box-shadow: 0 12px 28px #1f1f6680, 0 0 26px #5b6fe099, inset 0 1px #ffffff50;
}

.lend-fab .quick-add-fab-main {
  background: var(--mix-glow);
  box-shadow: 0 12px 28px #1f1f6680, 0 0 26px #5b6fe099, inset 0 1px #ffffff50;
}

.mobile-nav.v2-mobile-nav .nav-pill {
  box-shadow: 0 0 20px #5b6fe099, 0 0 26px #70309077, inset 0 0 0 1px #ffffff40;
}

.mobile-nav.v2-mobile-nav button:hover:not(.active) {
  box-shadow: 0 0 18px #5b6fe066, inset 0 0 0 1px #70309040;
}

.app-shell[data-page="Home"] {
  --bell-fill: radial-gradient(circle at 80% 15%,#a9b8ff99,transparent 60%),linear-gradient(145deg,#5b6fe0 0%,#503070 100%);
  --bell-glow: #5b6fe088;
}

.app-shell[data-page="Guidance"] {
  --bell-fill: radial-gradient(circle at 80% 15%,#a9b8ff99,transparent 60%),linear-gradient(145deg,#5b6fe0 0%,#1f1f66 100%);
  --bell-glow: #5b6fe088;
}

.app-shell[data-page="Toolbox"] {
  --bell-fill: radial-gradient(circle at 80% 15%,#a9b8ff88,transparent 60%),linear-gradient(145deg,#703090 0%,#1f1f66 100%);
  --bell-glow: #70309088;
}

.home-comparison-card {
  background: radial-gradient(circle at 88% 16%, #a9b8ff40, #0000 38%), radial-gradient(circle at 6% 100%, #5b6fe038, #0000 46%), linear-gradient(135deg, #1f1f66 0%, #503070 50%, #703090 100%);
  box-shadow: 0 21px 45px #1f1f6666, 0 0 32px #5b6fe04d;
}

.home-comparison-legend {
  color: #ece8ff;
}

.home-comparison-legend i.last, .home-comparison-bars b.last {
  background: #a9b8ff;
}

.home-comparison-legend i.this, .home-comparison-bars b {
  background: #5b6fe0;
}

.home-comparison-tile .app-icon {
  color: #503070;
}

.toolbox-card.common {
  background: radial-gradient(circle at 88% 14%, #a9b8ff40, #0000 40%), radial-gradient(circle at 6% 100%, #5b6fe038, #0000 48%), linear-gradient(135deg, #1f1f66 0%, #503070 50%, #703090 100%);
  box-shadow: 0 21px 45px #1f1f6666, 0 0 32px #5b6fe04d, 0 0 0 1px #ffffff1f;
}

.toolbox-card.space {
  background: radial-gradient(circle at 88% 14%, #a9b8ff4d, #0000 40%), radial-gradient(circle at 6% 100%, #5b6fe044, #0000 48%), linear-gradient(135deg, #1f1f66 0%, #503070 40%, #703090 74%, #5b6fe0 100%);
  box-shadow: 0 21px 45px #1f1f6666, 0 0 32px #5b6fe04d, 0 0 0 1px #ffffff1f;
}

.toolbox-card .lend-card-title {
  color: #f1ecff;
  text-shadow: 0 0 14px #a9b8ffb3;
}

.tool-tile .tool-chip {
  background: #efe8fb;
}

.tool-chip, .tool-chip .app-icon {
  color: #703090;
}

.tool-tile:hover:not(:disabled) {
  box-shadow: 0 12px 24px #1f1f6640, 0 0 22px #5b6fe080;
}

.tool-badge {
  background: #703090;
}

.lend-card.solo {
  color: #f1ecff;
  background: radial-gradient(circle at 88% 12%, #a9b8ff40, #0000 42%), radial-gradient(circle at 8% 100%, #5b6fe038, #0000 50%), linear-gradient(140deg, #1f1f66 0%, #503070 45%, #703090 100%);
  box-shadow: 0 20px 44px #1f1f6673, 0 0 30px #5b6fe04d, 0 0 0 1px #ffffff1f, inset 0 1px #ffffff26;
}

.lend-card.solo .lend-card-title {
  color: #f1ecff;
  text-shadow: 0 0 14px #a9b8ffcc;
}

.lend-card.solo .lend-chip-badge {
  color: #503070;
  background: #f1ecff;
}

.lend-card.solo:hover {
  box-shadow: 0 22px 48px #1f1f6680, 0 0 36px #a9b8ff55, 0 0 0 1px #ffffff2e;
}

.lend-card.groups {
  color: #eef1ff;
  background: radial-gradient(circle at 88% 12%, #a9b8ff40, #0000 40%), radial-gradient(circle at 8% 100%, #5b6fe044, #0000 48%), linear-gradient(140deg, #503070 0%, #703090 52%, #5b6fe0 100%);
  box-shadow: 0 20px 44px #50307073, 0 0 30px #5b6fe04d, 0 0 0 1px #ffffff1f, inset 0 1px #ffffff26;
}

.lend-card.groups .lend-card-title {
  color: #eef1ff;
  text-shadow: 0 0 14px #a9b8ffcc;
}

.lend-card.groups .lend-chip-badge {
  color: #703090;
  background: #eef1ff;
}

.lend-card.groups:hover {
  box-shadow: 0 22px 48px #50307080, 0 0 36px #a9b8ff55, 0 0 0 1px #ffffff2e;
}

.lend-home, .modal.dialog-lender-connect {
  --violet: #503070;
  --violet-soft: #efe8fb;
  --hover-glow: 0 14px 28px #50307026,0 0 22px #5b6fe055;
}

.lend-home .modal.track-popup {
  box-shadow: 0 30px 80px #1f1f6680, 0 0 0 4px #fff5, 0 0 0 5px #c9b8f0;
}

.lend-home .modal.nested-popup, .modal.dialog-lender-connect.nested-popup, .lend-home .modal:not(.track-popup), .modal.dialog-lender-connect {
  background: #f8f4fd !important;
  box-shadow: 0 26px 60px #1f1f6680, 0 0 0 4px #fff6, 0 0 0 5px #c9b8f0 !important;
}

.lend-home .modal .section-tag, .modal.dialog-lender-connect .section-tag, .lend-home .modal .lender-status-chip, .modal.dialog-lender-connect .lender-status-chip {
  color: #503070;
  background: #efe8fb;
}

.lend-home .modal .modal-primary, .modal.dialog-lender-connect .modal-primary, .lend-home .modal .inline-submit, .modal.dialog-lender-connect .inline-submit, .lend-home .modal button.primary, .modal.dialog-lender-connect button.primary {
  color: #fff;
  background: linear-gradient(135deg, #503070, #5b6fe0);
  border-color: #503070;
}

.lend-home .modal .lender-settle-pill.secondary, .modal.dialog-lender-connect .lender-settle-pill.secondary, .lend-home .modal .lender-pill-button, .modal.dialog-lender-connect .lender-pill-button, .lend-home .modal .lender-chevron-back, .modal.dialog-lender-connect .lender-chevron-back {
  color: #503070;
  border-color: #503070;
}

.lend-home .modal .lender-topbar, .modal.dialog-lender-connect .lender-topbar, .lend-home .nested-popup .lender-topbar {
  background: #f8f4fd;
  box-shadow: -21px 0 #f8f4fd, 21px 0 #f8f4fd, 0 -26px #f8f4fd;
}

.smart-plan-workspace {
  gap: 8px;
}

.smart-plan-workspace .smart-plan-intro {
  box-shadow: none;
  background: none;
  border: 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.smart-plan-workspace .plan-base {
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  display: flex;
}

.smart-plan-workspace .plan-base small {
  color: #8a8393;
  font-size: 10px;
  font-weight: 700;
}

.smart-plan-workspace .plan-base strong {
  font-size: 15px;
  font-weight: 800;
}

.smart-plan-workspace .smart-plan-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.smart-plan-workspace .smart-plan-methods button {
  text-align: center;
  border-radius: 12px;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
}

.smart-plan-workspace .smart-plan-methods strong {
  font-size: 13px;
}

.smart-plan-workspace .smart-plan-methods small {
  font-size: 9.5px;
  line-height: 1.1;
}

.smart-plan-workspace .activate-smart-plan {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

.smart-plan-workspace .plan-comparison-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

.smart-plan-workspace .plan-comparison-grid article {
  border-radius: 14px;
  gap: 5px;
  padding: 9px 12px;
  display: grid;
}

.smart-plan-workspace .plan-comparison-grid header {
  margin: 0;
}

.smart-plan-workspace .plan-comparison-grid header b {
  font-size: 12px;
}

.smart-plan-workspace .plan-comparison-grid header strong {
  font-size: 15px;
}

.smart-plan-workspace .plan-comparison-grid article > div {
  height: 6px;
}

.smart-plan-workspace .plan-comparison-grid small {
  font-size: 10.5px;
  line-height: 1.2;
}

.smart-plan-workspace .plan-allocation-strip {
  box-shadow: none;
  background: none;
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  display: grid;
}

.smart-plan-workspace .plan-allocation-strip > div {
  background: #fff;
  border: 1px solid #e3ddef;
  border-radius: 12px;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 8px 10px;
  display: grid;
}

.smart-plan-workspace .plan-allocation-strip > div > i {
  border-radius: 50%;
  grid-row: span 2;
  width: 8px;
  height: 8px;
}

.smart-plan-workspace .plan-allocation-strip > div > span {
  font-size: 10.5px;
  font-weight: 700;
}

.smart-plan-workspace .plan-allocation-strip > div > span small {
  color: #8a8393;
  margin-left: 3px;
  font-size: 9.5px;
}

.smart-plan-workspace .plan-allocation-strip > div > strong {
  grid-column: 2;
  font-size: 12px;
}

.smart-plan-workspace .smart-plan-note {
  color: #8a8393;
  font-size: 9.5px;
  line-height: 1.3;
}

.dialog-savings-plan .spend-workspace, .dialog-savings-plan .smart-plan-workspace {
  padding-bottom: 0;
}

.subscription-overview {
  gap: 8px;
  display: grid;
}

.subscription-overview > h2 {
  margin: 0;
  font-size: 20px;
}

.subscription-overview .subscription-reason {
  color: #817a8b;
  margin: 0;
  font-size: 11px;
}

.subscription-overview .current-plan-card {
  border-radius: 14px;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin: 0;
  padding: 9px 12px;
}

.subscription-overview .current-plan-card > span small {
  font-size: 9px;
}

.subscription-overview .current-plan-card > span strong {
  font-size: 15px;
}

.subscription-overview .current-plan-card > b {
  padding: 4px 8px;
  font-size: 10px;
}

.subscription-overview .current-plan-card > small {
  font-size: 10px;
}

.subscription-overview .account-trial-offer, .subscription-overview .account-trial-used {
  margin: 0;
  padding: 9px 12px;
  font-size: 11px;
  line-height: 1.35;
}

.subscription-overview .account-trial-offer small {
  font-size: 10px;
}

.subscription-overview .data-promise {
  gap: 2px;
  margin: 0;
  padding: 9px 12px;
  font-size: 11px;
  line-height: 1.35;
}

.subscription-overview .data-promise span {
  font-size: 10.5px;
}

.subscription-overview .play-purchase-actions.compact {
  margin: 0;
}

.subscription-overview .renewal-disclosure, .subscription-overview .upgrade-note {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
}

.subscription-overview .legal-inline-links {
  margin: 0;
  font-size: 11px;
}

.subscription-plan-tabs {
  background: #ece9fb;
  border-radius: 999px;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  display: grid;
}

.subscription-plan-tabs button {
  color: #6b6485;
  min-height: 34px;
  font: 800 13px var(--font-home, inherit);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background .25s, color .25s, box-shadow .25s;
  display: flex;
  position: relative;
}

.subscription-plan-tabs button.active {
  color: #503070;
  background: #fff;
  box-shadow: 0 4px 12px #1f1f6626;
}

.subscription-plan-tabs button i {
  background: #2bb673;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px #2bb67399;
}

.subscription-plan-card {
  background: #fff;
  border: 1px solid #e3ddef;
  border-radius: 18px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.subscription-plan-card.current {
  border-color: #703090;
  box-shadow: 0 0 0 2px #7030901a;
}

.subscription-plan-card > header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.subscription-plan-card > header > span {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.subscription-plan-card > header small {
  letter-spacing: .8px;
  color: #8a8393;
  font-size: 10px;
  font-weight: 900;
}

.subscription-plan-card > header strong {
  font: 850 20px var(--font-display);
}

.subscription-plan-card > header > b {
  color: #217b5e;
  background: #e8f7f0;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
}

.subscription-plan-card > header > b.offer {
  color: #503070;
  background: #efe8fb;
}

.subscription-period {
  background: #f3f0fa;
  border-radius: 999px;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  display: grid;
}

.subscription-period button {
  color: #6b6485;
  min-height: 30px;
  font: 800 12px var(--font-home, inherit);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background .25s, color .25s;
  display: flex;
}

.subscription-period button.active {
  color: #fff;
  background: #503070;
}

.subscription-period button em {
  color: #fff;
  background: #5b6fe0;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-style: normal;
}

.subscription-plan-card .plan-price {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  display: flex;
}

.subscription-plan-card .plan-price strong {
  font: 850 30px var(--font-display);
  line-height: 1;
}

.subscription-plan-card .plan-price small {
  color: #6b6485;
  font-size: 12px;
}

.subscription-plan-card .plan-price i {
  color: #8a8393;
  flex-basis: 100%;
  font-size: 11px;
  font-style: normal;
}

.plan-checks {
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.plan-checks li {
  color: #2f2a45;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.3;
  position: relative;
}

.plan-checks li:before {
  content: "";
  background: #efe8fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%23503070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 1px;
  left: 0;
}

.plan-cta {
  color: #fff;
  min-height: 42px;
  font: 800 14px var(--font-home, inherit);
  cursor: pointer;
  background: linear-gradient(135deg, #503070, #5b6fe0);
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 8px 20px #1f1f6640;
}

.plan-cta:disabled {
  opacity: .6;
  cursor: default;
}

.subscription-plan-card .pricing-avatar-stack {
  justify-content: flex-start;
  height: 40px;
  margin: 0;
  padding: 0 6px;
}

.subscription-plan-card .pricing-avatar-stack img {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: 0 -5px;
}

.plan-note {
  color: #2f2a6b;
  background: #eceefe;
  border-radius: 12px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.35;
  display: flex;
}

.plan-note b {
  color: #fff;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: #5b6fe0;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 7px;
  font-size: 9.5px;
}

.modal.dialog-plus-upgrade > .modal-close {
  margin: -30px -6px -10px auto;
  top: -12px !important;
}

.plan-note ul {
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.plan-note ul.bulleted {
  padding-left: 16px;
  list-style: outside;
}

.plan-note ul.bulleted li::marker {
  color: #5b6fe0;
}

.plan-note ul li {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  display: list-item;
}

.plan-note ul li:before, .plan-note ul li:after {
  display: none;
  content: none !important;
}

.modal.dialog-security h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-security .security-status-card {
  border-radius: 16px;
  gap: 6px;
  margin: 10px 0;
  padding: 12px 14px;
}

.modal.dialog-security .security-status-card strong {
  font-size: 16px;
}

.modal.dialog-security .security-status-card p {
  font-size: 12px;
  line-height: 1.35;
}

.modal.dialog-security .security-email {
  color: #8a8393;
  word-break: break-all;
  font-size: 11px;
}

.modal.dialog-security .security-actions {
  gap: 6px;
  margin: 0;
}

.modal.dialog-security .security-actions button {
  border-radius: 12px;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 9px 12px;
}

.modal.dialog-security .security-actions button b {
  font-size: 13px;
}

.modal.dialog-security .security-actions button span {
  font-size: 11px;
}

.modal.dialog-security .security-hint, .modal.dialog-security .security-warning {
  color: #7d7489;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  display: block;
}

.modal.dialog-security .security-code-form {
  gap: 10px;
  margin-top: 10px;
}

.modal.dialog-security .security-code-form input {
  padding: 11px 12px;
  font-size: 18px;
}

.modal.dialog-security .totp-enrollment {
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
}

.modal.dialog-security .totp-enrollment img {
  width: 150px;
  height: 150px;
}

.modal.dialog-security .totp-enrollment small {
  font-size: 11px;
}

.modal.dialog-security .security-actions + .security-warning {
  margin-top: 8px;
}

.modal.dialog-security .cancel-button {
  border-radius: 999px;
  justify-self: start;
  width: auto;
  min-height: 32px;
  padding: 0 14px;
  font-size: 11px;
}

.modal.dialog-security .security-status-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.modal.dialog-security .security-setup {
  color: #fff;
  min-height: 32px;
  font: 800 12px var(--font-home, inherit);
  cursor: pointer;
  background: linear-gradient(135deg, #503070, #5b6fe0);
  border: 0;
  border-radius: 999px;
  flex: none;
  padding: 0 16px;
  box-shadow: 0 6px 16px #1f1f6640;
}

.modal.dialog-security .security-setup:disabled {
  opacity: .6;
  cursor: default;
}

.modal.dialog-security > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.dialog-privacy-diagnostics h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-privacy-diagnostics .diagnostics-control {
  border-radius: 14px;
  margin: 10px 0;
  padding: 10px 12px;
}

.modal.dialog-privacy-diagnostics .diagnostics-control b {
  font-size: 14px;
}

.modal.dialog-privacy-diagnostics .diagnostics-control small {
  font-size: 11px;
}

.modal.dialog-privacy-diagnostics .diagnostics-exclusions {
  gap: 2px;
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.4;
}

.modal.dialog-privacy-diagnostics .diagnostics-exclusions b {
  font-size: 12.5px;
}

.modal.dialog-privacy-diagnostics .edit-profile-button {
  min-height: 32px;
  margin: 0 0 10px;
  padding: 0 14px;
  font-size: 12px;
}

.modal.dialog-privacy-diagnostics .diagnostics-foot {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.modal.dialog-privacy-diagnostics .diagnostics-foot a {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.modal.dialog-privacy-diagnostics .diagnostics-foot small {
  color: #8a8393;
  margin: 0;
  font-size: 11px;
}

.modal.dialog-privacy-diagnostics > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.dialog-bug-report h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-bug-report .bug-report-form {
  gap: 8px;
  margin-top: 10px;
}

.modal.dialog-bug-report .bug-report-form textarea {
  min-height: 0;
}

.modal.dialog-bug-report .bug-photo-picker > span {
  min-height: 38px;
}

.modal.dialog-bug-report .bug-privacy-note {
  font-size: 11px;
  line-height: 1.35;
}

.modal.dialog-bug-report .bug-report-error {
  font-size: 11px;
}

.modal.dialog-bug-report .bug-photo-picker .optional-label {
  margin-left: 6px;
  display: inline;
}

.modal.dialog-bug-report .bug-photo-picker > span {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.modal.dialog-bug-report .plan-note.bug-privacy-note {
  color: #2f2a6b;
  font-size: 12px;
  line-height: 1.35;
}

.modal.dialog-trash h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-trash .trash-heading-row {
  margin: 0;
}

.modal.dialog-trash .trash-plan-compare {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.modal.dialog-trash .trash-plan-compare > div {
  border-radius: 12px;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  display: flex;
}

.modal.dialog-trash .trash-plan-compare b {
  font-size: 12px;
}

.modal.dialog-trash .trash-plan-compare strong {
  font-size: 15px;
}

.modal.dialog-trash .trash-list {
  gap: 6px;
  margin: 0 0 10px;
}

.modal.dialog-trash .trash-list article {
  border-radius: 12px;
  gap: 8px;
  padding: 8px 10px;
}

.modal.dialog-trash .trash-list article b {
  font-size: 13px;
}

.modal.dialog-trash .trash-list article small {
  font-size: 11px;
}

.modal.dialog-trash .trash-days-left {
  padding: 4px 8px;
  font-size: 11px;
}

.modal.dialog-trash .trash-list article button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.modal.dialog-trash .empty-picker {
  gap: 2px;
  margin: 0 0 10px;
  padding: 12px;
}

.modal.dialog-trash .empty-picker b {
  font-size: 13px;
}

.modal.dialog-trash .empty-picker span {
  font-size: 11.5px;
}

.modal.dialog-trash > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.dialog-trash .trash-note {
  margin: 0 0 10px;
}

.modal.dialog-trash .trash-list article {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  display: grid;
}

.modal.dialog-trash .trash-days-left {
  margin-left: 0;
}

.modal.dialog-delete-confirm h2, .modal.dialog-delete-account h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-delete-confirm .plan-note.danger-note, .modal.dialog-delete-account .plan-note.danger-note {
  color: #7a2438;
  background: #fff1f3;
  margin: 10px 0;
}

.modal .plan-note.danger-note > b {
  background: #b34b62;
}

.modal.dialog-delete-confirm .plan-note.danger-note li::marker {
  color: #b34b62;
}

.modal.dialog-delete-confirm .cancel-button, .modal.dialog-delete-account .cancel-button {
  border-radius: 999px;
  justify-self: start;
  width: auto;
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.modal.dialog-delete-account form {
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.modal.dialog-delete-account .security-hint {
  color: #7d7489;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  display: block;
}

.modal.dialog-delete-account .security-sentence {
  border-radius: 12px;
  margin: 0;
  padding: 9px 12px;
  font-size: 13px;
}

.modal.dialog-delete-account .security-input {
  gap: 4px;
  font-size: 12px;
}

.modal.dialog-delete-account .security-input input {
  padding: 10px 12px;
  font-size: 13px;
}

.modal .plan-note.danger-note {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.modal .plan-note.danger-note > b {
  align-self: center;
}

.modal .plan-note.danger-note ul {
  text-align: left;
  width: 100%;
  margin: 0;
  padding-left: 14px;
}

.modal .delete-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.modal .delete-actions button {
  color: #fff;
  min-height: 36px;
  font: 800 13px var(--font-home, inherit);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  flex: 1 1 0;
  width: auto;
  padding: 0 14px;
}

.modal .delete-actions .keep-action {
  background: linear-gradient(135deg, #1f8f5f, #2bb673);
  box-shadow: 0 6px 16px #1f8f5f40;
}

.modal .delete-actions .danger-action {
  background: linear-gradient(135deg, #8f2f45, #b34b62);
  box-shadow: 0 6px 16px #b34b6240;
}

.modal .delete-actions .danger-action:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.modal.dialog-delete-confirm > .modal-close, .modal.dialog-delete-account > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.dialog-delete-account h2 {
  margin-top: 1px;
}

.modal.dialog-delete-account > .modal-close {
  top: -12px !important;
}

.modal .delete-actions button {
  white-space: nowrap;
  flex: auto;
  padding: 0 12px;
  font-size: 12.5px;
}

.modal.dialog-delete-confirm > .modal-close, .modal.dialog-delete-account > .modal-close {
  display: none !important;
}

.modal-backdrop.is-closing > .modal {
  animation: .24s cubic-bezier(.4, 0, 1, 1) forwards popupOut !important;
}

.modal.track-popup.lend-solo-popup .lender-section > h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.modal.track-popup.lend-solo-popup .lender-list {
  gap: 6px;
}

.modal.track-popup.lend-solo-popup .lender-row {
  border-radius: 14px;
  padding: 8px 10px;
}

.modal.track-popup.lend-solo-popup > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.track-popup.lend-solo-popup {
  width: calc(100% - 28px) !important;
  max-width: 560px !important;
}

.modal.dialog-family-trash h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-family-trash .trash-heading-row {
  margin: 0;
}

.modal.dialog-family-trash .trash-plan-compare {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.modal.dialog-family-trash .trash-plan-compare > div {
  border-radius: 12px;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  display: flex;
}

.modal.dialog-family-trash .trash-plan-compare b {
  font-size: 12px;
}

.modal.dialog-family-trash .trash-plan-compare strong {
  font-size: 15px;
}

.modal.dialog-family-trash .trash-list {
  gap: 6px;
  margin: 0 0 10px;
}

.modal.dialog-family-trash .trash-list article {
  border-radius: 12px;
  gap: 8px;
  padding: 8px 10px;
}

.modal.dialog-family-trash .trash-list article b {
  font-size: 13px;
}

.modal.dialog-family-trash .trash-list article small {
  font-size: 11px;
}

.modal.dialog-family-trash .trash-days-left {
  padding: 4px 8px;
  font-size: 11px;
}

.modal.dialog-family-trash .trash-list article button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.modal.dialog-family-trash .empty-picker {
  gap: 2px;
  margin: 0 0 10px;
  padding: 12px;
}

.modal.dialog-family-trash .empty-picker b {
  font-size: 13px;
}

.modal.dialog-family-trash .empty-picker span {
  font-size: 11.5px;
}

.modal.dialog-family-trash > .modal-close {
  margin: -30px -6px -10px auto;
  top: -8px !important;
}

.modal.dialog-family-trash .trash-note {
  margin: 0 0 10px;
}

.modal.dialog-family-trash .trash-list article {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  display: grid;
}

.modal.dialog-family-trash .trash-days-left {
  margin-left: 0;
}

.modal.dialog-family-trash .trash-plan-compare {
  grid-template-columns: 1fr;
}

.modal.dialog-trash > .modal-close, .modal.dialog-family-trash > .modal-close {
  top: -13px !important;
}

.modal.dialog-home-members h2 {
  margin: 0;
  font-size: 20px;
}

.modal.dialog-home-members > .modal-close {
  margin: -30px -6px -10px auto;
  top: -13px !important;
}

.modal.dialog-home-members .home-member-list {
  gap: 6px;
  margin: 10px 0;
}

.modal.dialog-home-members .home-member-list article {
  border-radius: 14px;
  gap: 10px;
  padding: 8px 10px;
}

.modal.dialog-home-members .home-member-list article img {
  width: 34px;
  height: 34px;
}

.modal.dialog-home-members .home-member-list article b {
  font-size: 13px;
}

.modal.dialog-home-members .home-member-list article small {
  font-size: 11px;
}

.modal.dialog-home-members .home-member-list article > button {
  border-radius: 999px;
  width: auto;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.modal.dialog-home-members .compact-inline-form {
  gap: 6px;
  margin-top: 0;
}

.modal.dialog-home-members .compact-inline-form input {
  padding: 10px 12px;
  font-size: 13px;
}

.modal.dialog-home-members .compact-inline-form > button {
  justify-self: start;
  width: auto;
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.modal.dialog-home-members .member-actions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.modal.dialog-home-members .member-action {
  color: #fff;
  min-height: 32px;
  font: 800 12px var(--font-home, inherit);
  cursor: pointer;
  background: linear-gradient(135deg, #503070, #5b6fe0);
  border: 0;
  border-radius: 999px;
  width: auto;
  padding: 0 16px;
  box-shadow: 0 6px 16px #1f1f6640;
}

.modal.dialog-home-members .member-action.danger {
  background: linear-gradient(135deg, #8f2f45, #b34b62);
  box-shadow: 0 6px 16px #b34b6240;
}

.modal.dialog-home-members .member-action:disabled {
  opacity: .55;
  cursor: default;
}

.modal.dialog-home-members .member-actions {
  margin-top: 8px;
}

.modal.dialog-home-members > .modal-close {
  display: none !important;
}

.modal.dialog-home-members .home-manager-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.modal.dialog-home-members .home-manager-head h2 {
  min-width: 0;
}

.modal.dialog-member-confirm h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.modal.dialog-member-confirm > .modal-close {
  display: none !important;
}

.modal.dialog-member-confirm .plan-note li b {
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border-radius: 0;
  padding: 0;
  font-weight: 800;
  display: inline;
}

.home-header .welcome-banner .home-welcome {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.modal.dialog-home-members .member-action.ghost {
  color: #503070;
  box-shadow: none;
  background: #efe8fb;
}

.modal.dialog-home-members .home-manager-head {
  justify-content: flex-start;
}

.modal.dialog-home-members .home-manager-head h2 {
  flex: 0 auto;
}

.modal.dialog-home-members .home-manager-head > .member-action {
  margin-left: auto;
}

.modal.dialog-home-members .home-rename-pen {
  color: #503070;
  cursor: pointer;
  background: #efe8fb;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: box-shadow .22s;
  display: grid;
}

.modal.dialog-home-members .home-rename-pen[aria-expanded="true"] {
  color: #fff;
  background: #503070;
}

.modal.dialog-home-members .home-manager-rest {
  transition: filter .25s, opacity .25s;
}

.modal.dialog-home-members .home-manager-rest.is-dimmed, .modal.dialog-home-members .home-manager-head.renaming > .member-action {
  filter: blur(3px);
  opacity: .45;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.modal.dialog-home-members .rename-panel {
  margin: 10px 0;
}

.modal .delete-actions .save-action {
  background: linear-gradient(135deg, #1f8f5f, #2bb673);
  box-shadow: 0 6px 16px #1f8f5f40;
}

.modal .delete-actions .save-action:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.modal.dialog-home-members .home-manager-head h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.modal.dialog-home-members .home-manager-head > .member-action, .modal.dialog-home-members .home-rename-pen {
  white-space: nowrap;
  flex: none;
}

.home-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.home-name-title {
  align-items: baseline;
  gap: .28em;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.home-name-title > span:not(.home-name) {
  white-space: nowrap;
  flex: none;
}

.home-name-title > .home-name {
  flex: 0 auto;
}

.home-name-title > .tail-mark {
  margin-left: -.28em;
}

.section-tag.home-name {
  vertical-align: bottom;
  max-width: 100%;
  display: inline-block;
}

.dialog-member-confirm .home-name-title, .lender-request-card .home-name-title {
  justify-content: flex-start;
}

.dialog-mine-report {
  width: min(700px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
}

@media (max-width: 620px) {
  .dialog-mine-report {
    width: calc(100% - 20px);
    padding: 24px 18px;
  }
}

.monthly-report {
  gap: 10px;
  display: grid;
}

.monthly-report .report-title h2 {
  margin: 0;
  font-size: 20px;
}

.monthly-report .report-controls {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.monthly-report .report-month {
  background: #efe8fb;
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 2px;
  display: flex;
}

.monthly-report .report-month button {
  color: #503070;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.monthly-report .report-month button:disabled {
  opacity: .3;
  cursor: default;
}

.monthly-report .report-month span {
  text-align: center;
  color: #503070;
  min-width: 104px;
  font-size: 12px;
  font-weight: 800;
}

.monthly-report .report-message {
  color: #503070;
  font-size: 11.5px;
  font-weight: 700;
}

.monthly-report .report-sheet {
  gap: 10px;
  display: grid;
}

.monthly-report .report-brand {
  display: none;
}

.monthly-report .report-sheet.exporting {
  background: #fff;
  padding: 16px;
}

.monthly-report .report-sheet.exporting .report-brand {
  color: #503070;
  border-bottom: 2px solid #503070;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  display: flex;
}

.monthly-report .report-brand b {
  font-size: 18px;
}

.monthly-report .report-brand span {
  font-size: 12px;
  font-weight: 700;
}

.monthly-report .report-block {
  background: #fff;
  border: 1px solid #e3ddef;
  border-radius: 14px;
  gap: 8px;
  padding: 10px 12px;
  display: grid;
}

.monthly-report .report-block > header {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.monthly-report .report-block > header b {
  font-size: 13px;
}

.monthly-report .report-block > header small {
  color: #8a8393;
  font-size: 11px;
}

.monthly-report .report-delta {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.monthly-report .report-delta.good {
  color: #1f8f5f;
}

.monthly-report .report-delta.watch {
  color: #b34b62;
}

.monthly-report .report-delta.flat {
  color: #8a8393;
  font-weight: 600;
}

.monthly-report .report-flowbar {
  background: #ece9fb;
  border-radius: 999px;
  height: 12px;
  display: flex;
  overflow: hidden;
}

.monthly-report .report-flowbar i.spent, .monthly-report .report-legend i.spent {
  background: #503070;
}

.monthly-report .report-flowbar i.saved, .monthly-report .report-legend i.saved {
  background: #5b6fe0;
}

.monthly-report .report-legend {
  color: #5a5470;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  display: flex;
}

.monthly-report .report-legend span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.monthly-report .report-legend i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.monthly-report .report-legend i.left {
  background: #ece9fb;
  box-shadow: inset 0 0 0 1px #cfc6e6;
}

.monthly-report .report-insights {
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.monthly-report .report-insights li {
  color: #2f2a45;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.35;
  position: relative;
}

.monthly-report .report-insights li:before {
  content: "";
  background: #5b6fe0;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 5px;
  left: 0;
}

.monthly-report .report-insights li.good:before {
  background: #2bb673;
}

.monthly-report .report-insights li.watch:before {
  background: #d8555f;
}

.monthly-report .report-daily {
  align-items: flex-end;
  gap: 2px;
  height: 70px;
  display: flex;
}

.monthly-report .report-daily > span {
  flex: 1;
  align-items: flex-end;
  height: 100%;
  display: flex;
}

.monthly-report .report-daily i {
  background: linear-gradient(#5b6fe0, #503070);
  border-radius: 2px 2px 0 0;
  width: 100%;
  display: block;
}

.monthly-report .report-axis {
  color: #8a8393;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.monthly-report .report-cat {
  position: relative;
}

.monthly-report .report-cat > span em {
  color: #b34b62;
  background: #ffe3e6;
  border-radius: 999px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
}

.monthly-report .report-cat > i {
  position: relative;
}

.monthly-report .report-cat > i b.over {
  background: #d8555f;
}

.monthly-report .report-cat > i u {
  background: #1f1f66;
  width: 2px;
  text-decoration: none;
  position: absolute;
  top: -2px;
  bottom: -2px;
}

.monthly-report .report-list {
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.monthly-report .report-list li {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.monthly-report .report-list li > span {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.monthly-report .report-list li b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  overflow: hidden;
}

.monthly-report .report-list li small {
  color: #8a8393;
  font-size: 11px;
}

.monthly-report .report-list li strong {
  flex: none;
  font-size: 12.5px;
}

.monthly-report .report-list li strong.paid {
  color: #1f8f5f;
}

.monthly-report .report-list li strong.late {
  color: #b34b62;
}

.monthly-report .report-list.goals li > span {
  flex: 1;
  gap: 3px;
}

.monthly-report .report-progress {
  background: #ece9fb;
  border-radius: 999px;
  height: 6px;
  display: block;
  overflow: hidden;
}

.monthly-report .report-progress i {
  background: linear-gradient(90deg, #5b6fe0, #503070);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.monthly-report .report-note-line {
  color: #6b6485;
  margin: 0;
  font-size: 11.5px;
}

.modal.dialog-mine-report > .modal-close, .modal.dialog-family-report > .modal-close {
  margin: -30px -6px -10px auto;
  top: -12px !important;
}

.monthly-report .family-report-categories.report-block {
  margin: 0;
}

.monthly-report .report-export {
  position: relative;
}

.monthly-report .report-export-button {
  color: #fff;
  min-height: 32px;
  font: 800 12px var(--font-home, inherit);
  cursor: pointer;
  background: linear-gradient(135deg, #1f8f5f, #2bb673);
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  display: inline-flex;
  box-shadow: 0 6px 16px #1f8f5f40;
}

.monthly-report .report-export-button:disabled {
  opacity: .6;
  cursor: default;
}

.monthly-report .report-export-button i {
  letter-spacing: .5px;
  background: #ffffff40;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8.5px;
  font-style: normal;
}

.monthly-report .report-export-menu {
  z-index: 5;
  background: #fff;
  border: 1px solid #d9d2e9;
  border-radius: 14px;
  gap: 2px;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  box-shadow: 0 14px 30px #1f1f6633;
}

.monthly-report .report-export-menu button {
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: var(--font-home, inherit);
  background: none;
  border: 0;
  border-radius: 10px;
  gap: 1px;
  padding: 8px 10px;
  display: grid;
}

.monthly-report .report-export-menu button:hover {
  background: #efe8fb;
}

.monthly-report .report-export-menu b {
  color: #2f2a45;
  font-size: 13px;
}

.monthly-report .report-export-menu small {
  color: #8a8393;
  font-size: 10.5px;
}

.monthly-report .report-list.goals li > strong {
  text-align: right;
  min-width: 68px;
}

.modal.track-popup, .modal.nested-popup, .track-popup .modal-backdrop > .modal, .modal.profile-popup {
  transition: height .3s cubic-bezier(.22, .9, .32, 1), min-height .3s cubic-bezier(.22, .9, .32, 1);
}

.lend-people {
  gap: 6px;
}

.lend-people-grid {
  grid-template-columns: repeat(var(--chip-cols, 2),minmax(0,1fr));
  align-items: start;
  gap: clamp(8px, 1.6dvh, 14px) clamp(6px, 2vw, 12px);
  display: grid;
}

.lend-person {
  min-width: 0;
  font-family: var(--font-home);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  display: flex;
}

.lend-person-ring {
  width: var(--chip-ring);
  aspect-ratio: 1;
  flex: none;
  position: relative;
}

.lend-person-ring svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.lend-person-face {
  background: #e6f0f6;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 10%;
  overflow: hidden;
}

.lend-person-face .lender-avatar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: clamp(11px, 3.4vw, 20px);
}

.lend-person b {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  max-width: 100%;
  font-weight: 800;
  font-size: var(--chip-name);
  overflow: hidden;
}

.lend-person em {
  font-style: normal;
  font-weight: 800;
  font-size: var(--chip-amount);
  color: #e6f0f6;
}

.lend-person.owed .lend-portrait-arc {
  stroke: #63d68d;
}

.lend-person.owing .lend-portrait-arc {
  stroke: #ff8f86;
}

.lend-person.clear .lend-portrait-arc {
  stroke: #e6f0f6;
}

.lend-person.owed em {
  color: #9fe8bc;
}

.lend-person.owing em {
  color: #ffb3ab;
}

.lend-people.lg {
  --chip-ring: clamp(72px,11dvh,96px);
  --chip-name: clamp(14px,4.2vw,17px);
  --chip-amount: clamp(13px,3.8vw,15px);
}

.lend-people.md {
  --chip-ring: clamp(52px,8.4dvh,68px);
  --chip-name: clamp(11px,3.3vw,13px);
  --chip-amount: clamp(11px,3.3vw,13px);
}

.lend-people.sm {
  --chip-ring: clamp(40px,6.2dvh,52px);
  --chip-name: clamp(10px,3vw,12px);
  --chip-amount: clamp(10px,3vw,12px);
}

.lend-people.sm .lend-person {
  gap: 2px;
}

.lender-request-card h2.lender-request-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.lend-home .modal.lend-solo-popup .lender-view {
  margin-top: 0;
  padding-bottom: 0;
}

.lend-home .modal.lend-solo-popup .lender-topbar {
  z-index: 6;
  box-shadow: none;
  background: #fff;
  margin: 0 0 12px;
  padding: 2px 30px 10px 0;
  position: sticky;
  top: 0;
}

.lend-home .modal.lend-solo-popup .lender-topbar h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.lend-home .modal.lend-solo-popup .lender-fab {
  z-index: 3;
  width: fit-content;
  margin: 12px 0 0 auto;
  position: sticky;
  bottom: 0;
  right: auto;
}

.lend-home .modal.lend-solo-popup > .modal-close {
  z-index: 8;
}

.lend-home .modal.lend-solo-popup .lender-view {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}

.lend-home .modal.lend-solo-popup .lender-view > * {
  min-width: 0;
  max-width: 100%;
}

.lend-home .modal.lend-solo-popup .modal-backdrop {
  padding-left: calc(clamp(24px, 7vw, 30px) + 14px) !important;
  padding-right: calc(clamp(24px, 7vw, 30px) + 14px) !important;
}

.lend-home .modal.lend-groups-popup .lender-view {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  padding-bottom: 0;
}

.lend-home .modal.lend-groups-popup .lender-view > * {
  min-width: 0;
  max-width: 100%;
}

.lend-home .modal.lend-groups-popup .lender-topbar {
  z-index: 6;
  box-shadow: none;
  background: #fff;
  margin: 0 0 12px;
  padding: 2px 30px 10px 0;
  position: sticky;
  top: 0;
}

.lend-home .modal.lend-groups-popup .lender-topbar h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.lend-home .modal.lend-groups-popup .lender-fab {
  z-index: 3;
  width: fit-content;
  margin: 12px 0 0 auto;
  position: sticky;
  bottom: 0;
  right: auto;
}

.modal.track-popup.lend-groups-popup.lend-group-open > .modal-close {
  z-index: 8;
  place-items: center;
  display: grid !important;
}

:root .modal-backdrop.modal-backdrop.modal-backdrop:not(.modal .modal-backdrop) {
  padding: max(12px,env(safe-area-inset-top)) clamp(24px,7vw,30px) max(12px,env(safe-area-inset-bottom)) !important;
  align-items: center !important;
}

:root .modal-backdrop.modal-backdrop.modal-backdrop:not(.modal .modal-backdrop) > .modal.modal {
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  max-height: 86dvh !important;
}

.lend-home .modal.lend-groups-popup .modal-backdrop {
  padding-left: calc(clamp(24px, 7vw, 30px) + 14px) !important;
  padding-right: calc(clamp(24px, 7vw, 30px) + 14px) !important;
}

.password-field.has-match input {
  padding-right: 72px;
}

.password-field.matched input {
  border-color: #3cc477;
  box-shadow: 0 0 0 3px #3cc47726;
}

.password-match-check {
  color: #1f9d55;
  place-items: center;
  width: 28px;
  animation: .22s ease-out both passwordMatchIn;
  display: grid;
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 40px;
}

@keyframes passwordMatchIn {
  from {
    opacity: 0;
    transform: scale(.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.password-hint {
  color: #0000;
  min-height: 14px;
  font-size: 10px;
  font-weight: 800;
}

.password-hint.good {
  color: #1f9d55;
}

.password-hint.bad {
  color: #c2352d;
}

@media (prefers-reduced-motion: reduce) {
  .password-match-check {
    animation: none;
  }
}

.modal-backdrop.whats-new-popup-backdrop {
  z-index: 120;
}

.dialog-whats-new .whats-new-title-row {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
}

.dialog-whats-new .whats-new-title-row h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.dialog-whats-new .whats-new-app-icon {
  border-radius: 11px;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  box-shadow: 0 6px 14px #6557d93d;
}

.dialog-whats-new .whats-new-continue {
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.dialog-whats-new .release-highlight-list.titles-only {
  gap: 10px;
  margin-top: 4px;
}

.dialog-whats-new .release-highlight-list.titles-only article {
  align-items: center;
}

.dialog-whats-new .release-highlight-list.titles-only h3 {
  margin: 0;
}

.dialog-whats-new .whats-new-links {
  border-top: 1px solid #e9e4fb;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
}

.dialog-whats-new .whats-new-links a {
  color: #756e83;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.auth-page .password-hint.good {
  color: #63d68d;
}

.auth-page .password-hint.bad {
  color: #ff9d94;
}

.auth-page .password-match-check {
  color: #63d68d;
}

.auth-page .password-field.matched input {
  border-color: #63d68d;
  box-shadow: 0 0 0 3px #63d68d2e;
}

.lender-member-row {
  align-items: center;
}

.lender-remove-member {
  color: #b0352d;
  cursor: pointer;
  background: #fdeceb;
  border: 1.5px solid #efc4c0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
}

.lender-remove-member:disabled {
  opacity: .45;
  cursor: default;
}

.lender-danger-zone {
  justify-items: center;
  gap: 8px;
  margin-top: 6px;
  display: grid;
}

.lender-delete-group {
  color: #b0352d;
  min-height: 38px;
  font: 800 12px var(--font-home, inherit);
  cursor: pointer;
  background: #fff;
  border: 1px solid #efc4c0;
  border-radius: 999px;
  padding: 0 20px;
}

.lender-delete-group:disabled {
  opacity: .5;
  cursor: default;
}

.lender-danger-zone small {
  color: #8b8497;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.lender-member-row {
  align-items: center;
  gap: 12px;
  display: flex;
}

.lender-member-row .lender-row-copy {
  flex: 1 1 0;
  min-width: 0;
}

.lender-member-row .lender-row-copy b, .lender-member-row .lender-row-copy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.track-popup .modal-backdrop.lender-confirm-backdrop {
  z-index: 75 !important;
}

.money-figure-skeleton {
  background: linear-gradient(100deg, #ffffff26 30%, #fff5 50%, #ffffff26 70%) 0 0 / 200% 100%;
  border-radius: 6px;
  width: 56px;
  height: 1em;
  animation: 1.3s ease-in-out infinite shimmer;
  display: block;
}

.money-flow > button:disabled {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .money-figure-skeleton {
    animation: none;
  }
}

@media (max-width: 620px) {
  .upgrade-modal {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .upgrade-modal .upgrade-content, .upgrade-modal .subscription-plan-card {
    gap: 6px;
  }
}

.mobile-nav {
  padding: 6px;
}

.auth-pending {
  visibility: hidden;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

/* [project]/app/website.css [app-client] (css) */
@media (min-width: 621px) {
  .app-shell[data-page] .content {
    padding-bottom: 40px;
  }

  .pulse-home, .track-home {
    max-width: 1120px;
    min-height: 0;
    margin-inline: auto;
  }

  .track-cards {
    flex: none;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 20px;
    min-height: 0;
    display: grid;
  }

  .track-card {
    min-height: 340px;
  }

  .lend-card {
    min-height: 320px;
  }

  .toolbox-home .track-cards {
    align-items: start;
  }

  .track-strip-bar {
    max-width: 56px;
  }

  .modal.track-popup {
    width: min(720px, 90vw);
  }
}

/* [project]/app/final-ui.css [app-client] (css) */
:root {
  --fu-ink: #141b2b;
  --fu-sub: #5b6b82;
  --fu-line: #dce8f4;
  --fu-royal: #2f4fc0;
  --fu-teal: #1f7a78;
  --fu-crim: #be3552;
  --fu-ocean: #2a74bd;
  --fu-glow: 1,65,99;
  --fu-nav-left: 12px;
  --fu-nav-right: 12px;
  --fu-nav-right-with-fab: 86px;
  --fu-fab-left: auto;
  --fu-fab-right: 12px;
  --fu-pill: linear-gradient(180deg,#465174 0%,#1b2440 50%,#0f1626 100%);
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) {
  background: linear-gradient(#d6eafb 0%, #e9f3fc 38%, #f5fafe 100%);
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]):before, .app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]):after {
  display: none;
}

.app-shell > .final-aurora {
  pointer-events: none;
  z-index: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.final-aurora i {
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.final-aurora i:first-child {
  background: radial-gradient(circle, #3d53a78c 0%, #3d53a72e 38%, #0000 68%);
  width: 90vmax;
  height: 90vmax;
  animation: 22s ease-in-out infinite alternate fu-drift-a;
  top: -48vmax;
  left: -45vmax;
}

.final-aurora i:nth-child(2) {
  background: radial-gradient(circle, #61bbb88c 0%, #61bbb82e 38%, #0000 68%);
  width: 80vmax;
  height: 80vmax;
  animation: 26s ease-in-out infinite alternate fu-drift-b;
  top: 16dvh;
  right: -46vmax;
}

.final-aurora i:nth-child(3) {
  background: radial-gradient(circle, #6db1e899 0%, #6db1e833 38%, #0000 68%);
  width: 85vmax;
  height: 85vmax;
  animation: 30s ease-in-out infinite alternate fu-drift-c;
  bottom: -52vmax;
  left: -30vmax;
}

@keyframes fu-drift-a {
  from {
    transform: translate3d(0, 0, 0)scale(1);
  }

  to {
    transform: translate3d(14vmax, 10vmax, 0)scale(1.15);
  }
}

@keyframes fu-drift-b {
  from {
    transform: translate3d(0, 0, 0)scale(1.05);
  }

  to {
    transform: translate3d(-16vmax, -8vmax, 0)scale(.92);
  }
}

@keyframes fu-drift-c {
  from {
    transform: translate3d(0, 0, 0)scale(1);
  }

  to {
    transform: translate3d(18vmax, -12vmax, 0)scale(1.18);
  }
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .page-chrome {
  background: #dcecfb;
  box-shadow: 0 0 0 100vmax #dcecfb;
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .welcome-banner {
  box-shadow: 0 12px 26px #0f2b6a47, 0 0 22px #2f4fc047;
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-notify-button {
  width: 44px;
  height: 44px;
  color: var(--fu-ink);
  box-shadow: 0 10px 22px -10px rgba(var(--fu-glow),.55),inset 0 1px 0 #fff;
  transform-origin: 50% 12%;
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #fffffff2;
  flex: 0 0 44px;
  transition: box-shadow .25s;
  animation: .9s .9s both fu-ring;
  position: relative;
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-notify-button .app-icon {
  width: 20px;
  height: 20px;
  color: var(--fu-ink);
}

@media (hover: hover) and (pointer: fine) {
  .app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-notify-button:hover {
    box-shadow: 0 14px 26px -10px rgba(var(--fu-glow),.6),0 0 0 5px #2f4fc01f,inset 0 1px 0 #fff;
    transform: none;
  }
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-profile-button {
  background: linear-gradient(145deg, #5b78e6, #2f4fc0 55%, #1b2e8a);
  box-shadow: 0 10px 22px -8px #2f4fc0b3, inset 0 1px #ffffff59;
}

@keyframes fu-ring {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-16deg);
  }

  40% {
    transform: rotate(14deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  80% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0);
  }
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-space-pill {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 24px -16px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  background: #ffffffb8;
  border: 1px solid #fffffff2;
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .space-pill {
  background: var(--fu-pill);
  box-shadow: 0 8px 16px -6px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff40;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1);
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-space-pill button {
  color: var(--fu-sub);
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-space-pill button.active {
  color: #fff;
}

.app-shell[data-page="Home"] .money-pulse-card {
  background: radial-gradient(circle at 88% 14%, #61bbb857, #0000 40%), radial-gradient(circle at 6% 100%, #6d91e752, #0000 48%), linear-gradient(135deg, #050f33 0%, #0f2b6a 46%, #1e4fb8 100%);
  border-color: #ffffff24;
  box-shadow: 0 21px 45px #050f3366, 0 0 32px #2f4fc052;
}

.app-shell[data-page="Home"] .money-pulse-card:before {
  content: "";
  border-radius: inherit;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: .8;
  background: linear-gradient(115deg, #61bbb8, #6d91e7, #a9b8ff, #61bbb8) 0 0 / 300% 100%;
  padding: 1.5px;
  animation: 9s linear infinite fu-edge;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@keyframes fu-edge {
  to {
    background-position: 300% 0;
  }
}

.app-shell[data-page="Home"] .pulse-balance > span, .app-shell[data-page="Home"] .pulse-balance small {
  color: #c9d6f7;
}

.app-shell[data-page="Home"] .pulse-balance .money-figure {
  background: linear-gradient(105deg, #0000 42%, #fffffff2 50%, #0000 58%) 160% 0 / 250% 100% no-repeat, linear-gradient(100deg, #fff 0%, #d6e4ff 55%, #a6ede7 100%);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 1.8s cubic-bezier(.3, .7, .2, 1) .6s both fu-sheen;
}

@keyframes fu-sheen {
  to {
    background-position: -60% 0, 0 0;
  }
}

.app-shell[data-page="Home"] .pulse-heading {
  flex-wrap: nowrap;
}

.app-shell[data-page="Home"] .pulse-heading > button {
  text-align: center;
  white-space: nowrap;
  color: #0f2b6a;
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #fffffff2;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 40px;
  padding: 0 16px;
  font-weight: 800;
  transition: box-shadow .25s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 22px -10px #00000080, inset 0 1px #fff;
}

.app-shell[data-page="Home"] .pulse-heading > button:before {
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(105deg, #0000, #2f4fc038, #0000);
  width: 45%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  transform: skewX(-18deg);
}

@media (hover: hover) and (pointer: fine) {
  .app-shell[data-page="Home"] .pulse-heading > button:hover {
    transform: none;
    box-shadow: 0 16px 28px -10px #0000008c, 0 0 0 5px #ffffff29, inset 0 1px #fff;
  }

  .app-shell[data-page="Home"] .pulse-heading > button:hover:before {
    opacity: 1;
    animation: .9s ease-out fu-sweep;
  }
}

@keyframes fu-sweep {
  from {
    left: -60%;
  }

  to {
    left: 130%;
  }
}

.app-shell[data-page="Home"] .money-flow > button {
  background: #ffffff17;
  border-color: #ffffff29;
  transition: box-shadow .25s;
  box-shadow: inset 0 1px #ffffff24, 0 8px 18px -10px #050f3399;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell[data-page="Home"] .money-flow > button:hover:not(:disabled) {
    background: #ffffff24;
    transform: none;
    box-shadow: inset 0 1px #fff3, 0 0 0 1px #ffffff47, 0 14px 26px -12px #6db1e8b3;
  }
}

.app-shell[data-page="Home"] .money-flow i.income {
  color: #cdd9ff;
  background: #6d91e74d;
}

.app-shell[data-page="Home"] .money-flow i.spending {
  color: #ffb8c6;
  background: #e0607a47;
}

.app-shell[data-page="Home"] .money-flow i.saving {
  color: #a3f1eb;
  background: #48c0ba47;
}

.app-shell[data-page="Home"] .money-flow i.family {
  color: #c5e3fa;
  background: #6db1e84d;
}

.app-shell[data-page="Home"] .money-flow i.carryover {
  color: #e6ecfa;
  background: #ffffff29;
}

.app-shell[data-page="Home"] .money-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 0;
}

.app-shell[data-page="Home"] .money-flow > button, .app-shell[data-page="Home"] .money-flow > div {
  grid-template-columns: 26px minmax(0, 1fr);
  align-content: center;
  gap: 3px 8px;
  min-height: 0;
  padding: 9px 10px;
}

.app-shell[data-page="Home"] .money-flow span {
  letter-spacing: 0;
  font-size: 11px;
}

.app-shell[data-page="Home"] .money-flow .money-figure, .app-shell[data-page="Home"] .money-flow strong {
  font-size: 15px;
  line-height: 1.15;
}

.app-shell[data-page="Home"] .money-pulse-card {
  padding: 14px 16px;
}

.app-shell[data-page="Home"] .pulse-balance {
  margin-top: 10px;
}

.app-shell[data-page="Home"] .money-flow {
  margin-top: 12px;
}

.app-shell[data-page="Home"] .money-flow > button, .app-shell[data-page="Home"] .money-flow > div {
  padding: 7px 10px;
}

.app-shell[data-page="Home"] .home-comparison-card {
  padding: 12px 14px;
}

.app-shell[data-page="Home"] .home-comparison-tile {
  padding-top: 8px;
  padding-bottom: 6px;
}

.app-shell[data-page="Home"] .home-comparison-bars {
  margin: 2px 0 4px;
}

.app-shell[data-page="Home"] .home-comparison-card {
  background: radial-gradient(circle at 88% 16%, #61bbb847, #0000 38%), radial-gradient(circle at 6% 100%, #6d91e74d, #0000 46%), linear-gradient(135deg, #050f33 0%, #0f2b6a 55%, #1e4fb8 100%);
  box-shadow: 0 21px 45px #050f3366, 0 0 32px #2f4fc04d;
}

.app-shell[data-page="Home"] .home-comparison-legend {
  color: #dce6fb;
}

.app-shell[data-page="Home"] .home-comparison-legend i.last {
  background: #c5d3e6;
}

.app-shell[data-page="Home"] .home-comparison-legend i.this {
  background: #6f8bf0;
}

.app-shell[data-page="Home"] .home-comparison-tile {
  background: linear-gradient(#fff, #eef4fb);
  box-shadow: 0 10px 22px -12px #050f33b3, inset 0 1px #fff;
}

.app-shell[data-page="Home"] .home-comparison-tile .app-icon {
  color: var(--fu-sub);
}

.app-shell[data-page="Home"] .home-comparison-bars b {
  transform-origin: bottom;
  animation: .9s cubic-bezier(.2, .9, .25, 1.1) both fu-grow;
}

.app-shell[data-page="Home"] .home-comparison-bars b.last {
  background: #c5d3e6;
}

.app-shell[data-page="Home"] .home-comparison-bars b:not(.last) {
  background: linear-gradient(#6f8bf0, #2f4fc0);
  box-shadow: 0 8px 14px -6px #2f4fc0b3;
}

.app-shell[data-page="Home"] .home-comparison-tile:nth-child(2) .home-comparison-bars b:not(.last) {
  background: linear-gradient(#e8708a, #be3552);
  box-shadow: 0 8px 14px -6px #be3552b3;
}

.app-shell[data-page="Home"] .home-comparison-tile:nth-child(3) .home-comparison-bars b:not(.last) {
  background: linear-gradient(#48c0ba, #1f7a78);
  box-shadow: 0 8px 14px -6px #1f7a78b3;
}

@keyframes fu-grow {
  0% {
    transform: scaleY(0);
  }

  55% {
    transform: scaleY(1.14);
  }

  78% {
    transform: scaleY(.95);
  }

  100% {
    transform: scaleY(1);
  }
}

.app-shell[data-page="Home"] .page-chrome .home-header {
  animation: .5s cubic-bezier(.2, .9, .25, 1.08) both fu-drop;
}

.app-shell[data-page="Home"] .pulse-home > .money-pulse-card {
  animation: .6s cubic-bezier(.2, .9, .25, 1.08) 80ms both fu-rise;
}

.app-shell[data-page="Home"] .pulse-home > .home-comparison-card {
  animation: .6s cubic-bezier(.2, .9, .25, 1.08) .2s both fu-rise;
}

.app-shell[data-page="Home"] .money-flow > button, .app-shell[data-page="Home"] .money-flow > div, .app-shell[data-page="Home"] .home-comparison-tile {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) both fu-pop;
}

.app-shell[data-page="Home"] .money-flow > :first-child {
  animation-delay: .22s;
}

.app-shell[data-page="Home"] .money-flow > :nth-child(3) {
  animation-delay: .3s;
}

.app-shell[data-page="Home"] .money-flow > :nth-child(5) {
  animation-delay: .38s;
}

.app-shell[data-page="Home"] .money-flow > :nth-child(7) {
  animation-delay: .46s;
}

.app-shell[data-page="Home"] .money-flow > :nth-child(9) {
  animation-delay: .54s;
}

.app-shell[data-page="Home"] .home-comparison-tile:first-child {
  animation-delay: .34s;
}

.app-shell[data-page="Home"] .home-comparison-tile:nth-child(2) {
  animation-delay: .42s;
}

.app-shell[data-page="Home"] .home-comparison-tile:nth-child(3) {
  animation-delay: .5s;
}

@keyframes fu-rise {
  from {
    opacity: 0;
    transform: translateY(22px)scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fu-pop {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fu-drop {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.app-shell[data-page="Home"] .home-insights {
  color: var(--fu-ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff,0 26px 44px -28px rgba(var(--fu-glow),.5),0 2px 6px -2px rgba(var(--fu-glow),.1);
  background: linear-gradient(160deg, #ffffffe0 0%, #ffffff94 100%);
  border: 1px solid #ffffffe6;
  border-radius: 20px;
  padding: 10px 14px;
  animation: .6s cubic-bezier(.2, .9, .25, 1.08) .32s both fu-rise;
  position: relative;
}

.home-insights-title {
  color: var(--fu-sub);
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.home-insights-title b {
  color: var(--fu-ink);
  letter-spacing: -.02em;
  font-size: 15px;
}

.home-insights-bar {
  gap: 3px;
  height: 8px;
  margin: 6px 0 5px;
  display: flex;
}

.home-insights-bar i {
  transform-origin: 0;
  border-radius: 5px;
  min-width: 6px;
  height: 100%;
  animation: .8s cubic-bezier(.2, .9, .25, 1.1) both fu-slide;
  display: block;
}

@keyframes fu-slide {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.home-insights-legend {
  color: var(--fu-sub);
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.home-insights-legend span {
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.home-insights-legend i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.home-insights .c0 {
  background: linear-gradient(#6f8bf0, #2f4fc0);
}

.home-insights .c1 {
  background: linear-gradient(#e8708a, #be3552);
}

.home-insights .c2 {
  background: linear-gradient(#48c0ba, #1f7a78);
}

.home-insights .c3 {
  background: linear-gradient(#c5d3e6, #8fa3c0);
}

.home-insights-stats {
  border-top: 1px solid #141b2b14;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  padding-top: 8px;
  display: grid;
}

.home-insights-stats > div {
  border-left: 1px solid #141b2b14;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0 8px;
  display: flex;
}

.home-insights-stats > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.home-insights-stats small {
  color: var(--fu-sub);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.home-insights-stats b {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
}

.home-insights-stats .up b {
  color: #a32c46;
}

.home-insights-stats .down b {
  color: #17635f;
}

.home-insights-empty {
  color: var(--fu-sub);
  text-align: center;
  margin: 0;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 700;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal {
  box-shadow: 0 30px 80px #0f2b6a80, 0 0 0 4px #ffffff59, 0 0 0 5px #6db1e8a6 !important;
}

.app-shell[data-page="Home"] .modal-backdrop > .modal.nested-popup {
  background: #f3f7fe !important;
  box-shadow: 0 26px 60px #0f2b6a80, 0 0 0 4px #fff6, 0 0 0 5px #6db1e899 !important;
}

.profile-popup .pf-round-btn {
  color: var(--fu-ink);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #fffffff2;
  transition: box-shadow .25s;
}

.profile-popup .pf-more-wrap .pf-round-btn {
  color: var(--fu-royal);
  background: linear-gradient(#eef3ff, #dce6fb);
}

@media (hover: hover) and (pointer: fine) {
  .profile-popup .pf-round-btn:hover {
    box-shadow: 0 12px 20px -8px rgba(var(--fu-glow),.55),0 0 0 4px #2f4fc01f,inset 0 1px 0 #fff;
    transform: none;
  }
}

.profile-popup .pf-avatar-glow {
  background: radial-gradient(circle, #61bbb873 0%, #6d91e73d 45%, #0000 72%);
}

.profile-popup .pf-avatar {
  animation: .6s cubic-bezier(.34, 1.56, .64, 1) both fu-pop;
  box-shadow: 0 12px 30px #2f4fc057;
}

.profile-popup .pf-avatar-fallback {
  color: var(--fu-royal);
  background: #e5ecfb;
}

.profile-popup .pf-orbit-icon {
  color: var(--fu-royal);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.5);
}

.profile-popup .pf-orbit-icon:active {
  background: #e5ecfb;
}

@media (hover: hover) and (pointer: fine) {
  .profile-popup .pf-orbit-icon:hover {
    background: #e5ecfb;
  }
}

.profile-popup .pf-name {
  color: var(--fu-ink);
}

.profile-popup .pf-badge {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) .2s both fu-pop;
}

.profile-popup .pf-badge-plus {
  color: #fff;
  background: linear-gradient(#6f8bf0, #2f4fc0);
  box-shadow: 0 8px 16px -6px #2f4fc0a6, inset 0 1px #ffffff59;
}

.profile-popup .pf-badge-home {
  color: #fff;
  background: linear-gradient(#48c0ba, #1f7a78);
  border: 0;
  box-shadow: 0 8px 16px -6px #1f7a7899, inset 0 1px #ffffff59;
}

.profile-popup .pf-badge-internal {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff40;
}

.profile-popup .pf-section-label {
  color: var(--fu-sub);
}

.profile-popup .pf-tile, .profile-popup .pf-row {
  background: linear-gradient(145deg,var(--pf-tint, #2f4fc01a) 0%,#fffffff5 72%);
  box-shadow: inset 0 1px 0 #fff,0 14px 26px -18px rgba(var(--fu-glow),.5);
  border: 1px solid #fffffff2;
  transition: box-shadow .25s;
}

@media (hover: hover) and (pointer: fine) {
  .profile-popup .pf-tile:hover, .profile-popup .pf-row-button:hover {
    transform: none;
    box-shadow: inset 0 1px #fff, 0 0 0 1px #2f4fc047, 0 16px 28px -16px #2f4fc080;
  }
}

.profile-popup .pf-tile-income {
  --pf-tint: #2f4fc021;
}

.profile-popup .pf-tile-expense {
  --pf-tint: #be35521f;
}

.profile-popup .pf-tile-goals {
  --pf-tint: #2a74bd21;
}

.profile-popup .pf-tile-savings {
  --pf-tint: #1f7a7824;
}

.profile-popup .pf-tile-icon {
  color: var(--fu-royal);
  background: #e5ecfb;
}

.profile-popup .pf-tile-income .pf-tile-icon {
  color: var(--fu-royal);
  background: #2f4fc024;
}

.profile-popup .pf-tile-expense .pf-tile-icon {
  color: var(--fu-crim);
  background: #be355224;
}

.profile-popup .pf-tile-goals .pf-tile-icon {
  color: var(--fu-ocean);
  background: #2a74bd29;
}

.profile-popup .pf-tile-savings .pf-tile-icon {
  color: var(--fu-teal);
  background: #1f7a7829;
}

.profile-popup .pf-tile span, .profile-popup .pf-row-left small {
  color: var(--fu-sub);
}

.profile-popup .pf-tile {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) both fu-pop;
}

.profile-popup .pf-tile:first-child {
  animation-delay: .12s;
}

.profile-popup .pf-tile:nth-child(2) {
  animation-delay: .2s;
}

.profile-popup .pf-tile:nth-child(3) {
  animation-delay: .28s;
}

.profile-popup .pf-tile:nth-child(4) {
  animation-delay: .36s;
}

.profile-popup .pf-row {
  animation: .55s cubic-bezier(.2, .9, .25, 1.08) both fu-rise;
}

.profile-popup .pf-row:nth-child(2) {
  animation-delay: .3s;
}

.profile-popup .pf-row:nth-child(3) {
  animation-delay: .38s;
}

.profile-popup .pf-row:nth-child(4) {
  animation-delay: .46s;
}

.profile-popup .pf-row-left i {
  color: var(--fu-royal);
  background: #2f4fc01f;
}

.profile-popup .pf-row-value svg {
  color: var(--fu-royal);
}

.pf-currency-card {
  box-shadow: inset 0 1px 0 #fff,0 12px 22px -16px rgba(var(--fu-glow),.5);
  background: linear-gradient(145deg, #2f4fc00f, #fffffff5 72%);
  border: 1px solid #fffffff2;
  transition: box-shadow .25s;
}

@media (hover: hover) and (pointer: fine) {
  .pf-currency-card:hover {
    transform: none;
    box-shadow: inset 0 1px #fff, 0 0 0 1px #2f4fc047, 0 14px 24px -14px #2f4fc080;
  }
}

.pf-currency-card.pf-currency-selected {
  background: linear-gradient(145deg, #2f4fc029, #fffffff0 80%);
  border-color: #2f4fc059;
  box-shadow: inset 0 1px #fff, 0 0 0 2px #2f4fc038, 0 14px 26px -14px #2f4fc08c;
}

.pf-currency-check {
  box-shadow: 0 6px 12px -4px #2f4fc0b3;
  background: linear-gradient(#6f8bf0, #2f4fc0) !important;
}

.pf-currency-glyph, .pf-currency-symbol {
  color: var(--fu-ink);
}

.pf-more-menu button svg {
  color: var(--fu-royal);
}

.pf-more-menu button:active {
  background: #2f4fc01a;
}

.pf-more-menu button.pf-danger, .pf-more-menu button.pf-danger svg {
  color: var(--fu-crim);
}

@media (prefers-reduced-motion: reduce) {
  .profile-popup .pf-avatar, .profile-popup .pf-badge, .profile-popup .pf-tile, .profile-popup .pf-row {
    animation: none;
  }
}

@media (max-width: 620px) {
  .app-shell {
    --fu-nav-right: var(--fu-nav-right-with-fab);
  }

  .app-shell .mobile-nav.v2-mobile-nav {
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    z-index: 50;
    justify-content: stretch;
    gap: 4px;
    left: calc(var(--fu-nav-left) + env(safe-area-inset-left)) !important;
    right: calc(var(--fu-nav-right) + env(safe-area-inset-right)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    height: 64px !important;
    box-shadow: 0 22px 40px -18px rgba(var(--fu-glow),.55),inset 0 1px 0 #fff !important;
    background: linear-gradient(160deg, #ffffffe6, #ffffff9e) !important;
    border: 1px solid #fffffff2 !important;
    border-radius: 999px !important;
    align-items: stretch !important;
    padding: 6px !important;
    display: flex !important;
    position: fixed !important;
  }

  .app-shell .mobile-nav.v2-mobile-nav button {
    min-height: 52px;
    color: var(--fu-sub);
    border-radius: 999px;
    flex: 1;
    justify-content: center;
    gap: 2px;
    font-weight: 800;
    transform: none;
  }

  .app-shell .mobile-nav.v2-mobile-nav button.active {
    transform: none;
    color: #fff !important;
    box-shadow: none !important;
    background: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .app-shell .mobile-nav.v2-mobile-nav button:hover:not(.active) {
      transform: none;
      box-shadow: 0 0 0 4px #2f4fc01a;
    }
  }

  .app-shell .mobile-nav.v2-mobile-nav .nav-pill {
    background: var(--fu-pill);
    box-shadow: 0 10px 18px -6px rgba(var(--fu-glow),.65),inset 0 1px 0 #ffffff40;
    border-radius: 999px;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1);
    top: 6px;
    bottom: 6px;
  }

  .app-shell .quick-add-fab {
    left: var(--fu-fab-left);
    right: calc(var(--fu-fab-right) + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 55;
    place-items: center;
    width: 64px;
    height: 64px;
    display: grid;
    position: fixed;
  }
}

@media (hover: none) {
  .app-shell .mobile-nav.v2-mobile-nav button:hover:not(.active) {
    box-shadow: none;
  }
}

.app-shell .quick-add-fab .quick-add-fab-main {
  background: var(--fu-pill);
  width: 60px;
  height: 60px;
  box-shadow: 0 14px 26px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff47,inset 0 -2px 0 #00000040;
  transition: box-shadow .25s;
  animation: none;
  position: relative;
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell .quick-add-fab .quick-add-fab-main:hover {
    box-shadow: 0 18px 34px -8px rgba(var(--fu-glow),.75),0 0 0 5px #2f4fc029,inset 0 1px 0 #ffffff47,inset 0 -2px 0 #00000040;
    transform: none;
  }
}

.app-shell .quick-add-fab .quick-add-fab-main:after {
  content: "";
  pointer-events: none;
  border-radius: 50%;
  animation: 3s ease-out infinite fu-pulse;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 #2f4fc066;
}

.app-shell .quick-add-fab.expanded .quick-add-fab-main:after {
  animation: none;
}

@keyframes fu-pulse {
  0% {
    box-shadow: 0 0 #2f4fc06b;
  }

  70%, 100% {
    box-shadow: 0 0 0 16px #2f4fc000;
  }
}

.app-shell .lend-fab .quick-add-fab-main {
  background: linear-gradient(#4a97e0 0%, #1e5a96 50%, #123c66 100%);
}

.app-shell .quick-add-fab .quick-add-fab-options {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: auto;
  height: auto;
  display: flex;
  position: absolute;
  inset: auto 0 calc(100% + 10px) auto;
}

.app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option {
  white-space: nowrap;
  width: auto;
  height: 44px;
  font: 800 14px var(--font-home),system-ui,sans-serif;
  color: var(--fu-ink);
  box-shadow: 0 12px 22px -12px rgba(var(--fu-glow),.45),inset 0 1px 0 #fff;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(#fff, #eef4fb);
  border: 1px solid #fffffff2;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), opacity .2s, box-shadow .25s;
  display: inline-flex;
  position: static;
  transform: translateY(14px)scale(.6);
}

.app-shell .quick-add-fab.expanded .quick-add-fab-options > button.quick-add-fab-option {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.app-shell .quick-add-fab .quick-add-fab-options > button:nth-child(4) {
  transition-delay: 0s;
}

.app-shell .quick-add-fab .quick-add-fab-options > button:nth-child(3) {
  transition-delay: 50ms;
}

.app-shell .quick-add-fab .quick-add-fab-options > button:nth-child(2) {
  transition-delay: .1s;
}

.app-shell .quick-add-fab .quick-add-fab-options > button:first-child {
  transition-delay: .15s;
}

.app-shell .quick-add-fab .quick-add-fab-option.link .quick-add-fab-icon {
  color: var(--fu-ocean);
}

@media (hover: hover) and (pointer: fine) {
  .app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option:hover {
    box-shadow: 0 16px 28px -10px rgba(var(--fu-glow),.55),0 0 0 5px #2f4fc01f,inset 0 1px 0 #fff;
    transform: none;
  }
}

.app-shell .quick-add-fab .quick-add-fab-option .quick-add-fab-icon {
  width: 20px;
  height: 20px;
}

.app-shell .quick-add-fab .quick-add-fab-option.goal .quick-add-fab-icon {
  color: var(--fu-royal);
}

.app-shell .quick-add-fab .quick-add-fab-option.saving .quick-add-fab-icon {
  color: var(--fu-teal);
}

.app-shell .quick-add-fab .quick-add-fab-option.expense .quick-add-fab-icon {
  color: var(--fu-crim);
}

.toast {
  background: var(--fu-pill);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 34px -12px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px 10px 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}

.toast .toast-tick {
  background: linear-gradient(145deg, #5be08c, #1f9d57);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  animation: .45s cubic-bezier(.34, 1.56, .64, 1) both fu-tick-pop, 1s ease-out .35s fu-tick-ring;
  display: grid;
  box-shadow: 0 6px 14px -4px #1f9d57b3, inset 0 1px #ffffff80;
}

.toast .toast-tick.warn {
  background: linear-gradient(145deg, #ffcb63, #d98a0b);
  animation-name: fu-tick-pop;
  box-shadow: 0 6px 14px -4px #d98a0bb3, inset 0 1px #ffffff80;
}

.toast .toast-tick svg {
  fill: none;
  stroke: #fff;
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 15px;
  height: 15px;
}

.toast .toast-tick path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24px;
  animation: .4s .2s forwards fu-tick-draw;
}

@keyframes fu-tick-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes fu-tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fu-tick-ring {
  0% {
    box-shadow: 0 6px 14px -4px #1f9d57b3, 0 0 #5be08c8c;
  }

  100% {
    box-shadow: 0 6px 14px -4px #1f9d57b3, 0 0 0 12px #5be08c00;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast .toast-tick, .toast .toast-tick path {
    animation: none;
  }

  .toast .toast-tick path {
    stroke-dashoffset: 0;
  }
}

.quick-add-scrim {
  z-index: 53;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  background: #0a18384d;
  transition: opacity .28s;
  position: fixed;
  inset: 0;
}

.quick-add-scrim.show {
  opacity: 1;
  pointer-events: auto;
}

.app-shell .quick-add-fab {
  z-index: 55;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .quick-add-scrim {
    background: #0a183880;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-add-scrim {
    transition: none;
  }

  .final-aurora i, .app-shell[data-page="Home"] .money-pulse-card:before, .app-shell[data-page="Home"] .pulse-balance .money-figure, .app-shell[data-page="Home"] .home-notify-button, .app-shell[data-page="Home"] .page-chrome .home-header, .app-shell[data-page="Home"] .pulse-home > .money-pulse-card, .app-shell[data-page="Home"] .pulse-home > .home-comparison-card, .app-shell[data-page="Home"] .home-insights, .home-insights-bar i, .app-shell[data-page="Home"] .money-flow > button, .app-shell[data-page="Home"] .money-flow > div, .app-shell[data-page="Home"] .home-comparison-tile, .app-shell[data-page="Home"] .home-comparison-bars b, .app-shell .quick-add-fab .quick-add-fab-main:after {
    animation: none;
  }

  .app-shell[data-page="Home"] .pulse-balance .money-figure {
    background-position: -60% 0, 0 0;
  }

  .app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option, .app-shell .mobile-nav.v2-mobile-nav .nav-pill, .app-shell[data-page="Home"] .space-pill {
    transition: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-shell .mobile-nav.v2-mobile-nav, .app-shell[data-page="Home"] .home-space-pill {
    background: #fffffff0 !important;
  }
}

.app-shell[data-page="Track"] .track-card {
  color: #fff;
  border: 0;
  animation: .6s cubic-bezier(.34, 1.3, .64, 1) both fu-rise;
  position: relative;
  overflow: hidden;
}

.app-shell[data-page="Track"] .track-card.save {
  background: radial-gradient(circle at 90% 10%, #48c0ba80, #0000 55%), linear-gradient(155deg, #0e3a3e, #0b2a36 60%, #0a2030);
  box-shadow: 0 18px 34px -14px #0f3c40a6, 0 0 0 1px #78dcd240;
}

.app-shell[data-page="Track"] .track-card.spend {
  background: radial-gradient(circle at 90% 10%, #e0607a80, #0000 55%), linear-gradient(155deg, #5a1630, #3f1024 60%, #2a0c1e);
  box-shadow: 0 18px 34px -14px #781937a6, 0 0 0 1px #ff96aa40;
}

.app-shell[data-page="Track"] .track-card:before {
  content: "";
  border-radius: inherit;
  background: conic-gradient(from var(--fu-angle, 0deg),transparent 0 60%,#ffffffb3 80%,transparent 100%);
  -webkit-mask-composite: xor;
  pointer-events: none;
  padding: 1.5px;
  animation: 6s linear infinite fu-spin;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.app-shell[data-page="Track"] .track-card > * {
  position: relative;
}

.app-shell[data-page="Track"] .track-card.save .track-heading > h2 {
  color: #a3f1eb;
  text-shadow: 0 0 16px #48c0bab3;
}

.app-shell[data-page="Track"] .track-card.spend .track-heading > h2 {
  color: #ffb8c6;
  text-shadow: 0 0 16px #e0607ab3;
}

.app-shell[data-page="Track"] .track-card .month-switch-header, .app-shell[data-page="Track"] .track-card .month-switch-header * {
  color: #e6ecfa;
}

.app-shell[data-page="Track"] .track-ring b, .app-shell[data-page="Track"] .track-amount {
  color: #fff;
}

.app-shell[data-page="Track"] .track-ring b small, .app-shell[data-page="Track"] .track-amount small, .app-shell[data-page="Track"] .track-strip-labels, .app-shell[data-page="Track"] .track-change.flat {
  color: #c3d0ea;
}

.app-shell[data-page="Track"] .track-ring svg circle:first-child {
  stroke: #ffffff24;
}

.app-shell[data-page="Track"] .track-card.save .track-strip-bar {
  background: #78dcd259;
}

.app-shell[data-page="Track"] .track-card.save .track-strip-bar.hot {
  background: linear-gradient(#8ff0e6, #2fb0a8);
  box-shadow: 0 0 12px #48c0ba99;
}

.app-shell[data-page="Track"] .track-card.spend .track-strip-bar {
  background: #ff96aa59;
}

.app-shell[data-page="Track"] .track-card.spend .track-strip-bar.hot {
  background: linear-gradient(#ff9db0, #d6415f);
  box-shadow: 0 0 12px #e0607a99;
}

.app-shell[data-page="Track"] .track-options button {
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff1f;
  border: 1px solid #fff3;
  transition: box-shadow .25s, background .25s, transform .18s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: inset 0 1px #ffffff40, 0 8px 16px -10px #0009;
}

.app-shell[data-page="Track"] .track-card.save .track-options .app-icon {
  color: #a3f1eb;
}

.app-shell[data-page="Track"] .track-card.spend .track-options .app-icon {
  color: #ffb8c6;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell[data-page="Track"] .track-options button:hover {
    box-shadow: inset 0 1px 0 #ffffff59,0 0 0 4px #ffffff1f,0 12px 22px -8px rgba(var(--fu-glow),.7);
    background: #fff3;
    transform: none;
  }
}

.app-shell[data-page="Track"] .track-options button:active {
  transform: scale(.95);
}

@property --fu-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes fu-spin {
  to {
    --fu-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Track"] .track-card, .app-shell[data-page="Track"] .track-card:before {
    animation: none;
  }
}

.app-shell[data-page="Track"] .track-gauge {
  aspect-ratio: 120 / 68;
  flex: none;
  width: clamp(124px, 42vw, 176px);
  position: relative;
}

.app-shell[data-page="Track"] .track-gauge svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.app-shell[data-page="Track"] .track-gauge-rail {
  stroke: #ffffff21;
}

.app-shell[data-page="Track"] .track-gauge-tick {
  stroke: #ffffff59;
  stroke-width: 1px;
  stroke-linecap: round;
}

.app-shell[data-page="Track"] .track-card .track-ring-seg {
  filter: drop-shadow(0 0 5px #ffffff59);
}

.app-shell[data-page="Track"] .track-gauge-dot {
  fill: #fff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffffffb3);
  animation: .5s .9s both fu-pop, 2.4s ease-in-out 1.4s infinite fu-dot;
}

@keyframes fu-dot {
  50% {
    opacity: .55;
  }
}

.app-shell[data-page="Track"] .track-gauge b {
  letter-spacing: -.02em;
  background: linear-gradient(#fff, #c9d8f5);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  justify-content: flex-end;
  font-size: clamp(20px, 6.4vw, 26px);
  inset: auto 0 0;
}

.app-shell[data-page="Track"] .track-gauge b small {
  -webkit-text-fill-color: #c3d0ea;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(9px, 2.6vw, 10.5px);
}

.app-shell[data-page="Track"] .track-amount {
  background: linear-gradient(105deg, #fff 40%, #b8c9f2 60%, #fff) 0 0 / 220% 100%;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(17px, 5.4vw, 22px);
  animation: 3.2s ease-in-out 1s fu-shine;
}

.app-shell[data-page="Track"] .track-amount small {
  -webkit-text-fill-color: #c3d0ea;
}

@keyframes fu-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.app-shell[data-page="Track"] .track-chips {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.app-shell[data-page="Track"] .track-chips span {
  color: #e6ecfa;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #ffffff1f;
  border: 1px solid #ffffff29;
  border-radius: 99px;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 8px;
  font-size: clamp(10px, 2.9vw, 11px);
  font-weight: 700;
  display: inline-flex;
  overflow: hidden;
}

.app-shell[data-page="Track"] .track-chips i {
  background: #5ee0d6;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 6px;
}

.app-shell[data-page="Track"] .track-chips span:nth-child(2) i {
  background: #9fb4ff;
}

.app-shell[data-page="Track"] .track-pulse-body {
  gap: clamp(10px, 3vw, 16px);
}

.app-shell[data-page="Track"] .track-gauge b {
  flex-direction: column;
  align-items: center;
  line-height: 1;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.app-shell[data-page="Track"] .track-card.save, .app-shell[data-page="Track"] .track-card.spend {
  background: radial-gradient(circle at 88% 14%, #61bbb857, #0000 40%), radial-gradient(circle at 6% 100%, #6d91e752, #0000 48%), linear-gradient(135deg, #050f33 0%, #0f2b6a 46%, #1e4fb8 100%);
  box-shadow: 0 21px 45px #050f3366, 0 0 32px #2f4fc052, 0 0 0 1px #ffffff24;
}

.app-shell[data-page="Track"] .track-heading > h2 {
  color: #fff;
  text-shadow: none;
  letter-spacing: .14em;
  border-radius: 8px;
  align-items: center;
  padding: 4px 12px;
  font-size: clamp(13px, 3.8vw, 15px);
  display: inline-flex;
}

.app-shell[data-page="Track"] .track-card.save .track-heading > h2 {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(145deg, #2fa39f, #1f7a78);
  box-shadow: 0 6px 14px -6px #1f7a78e6, inset 0 1px #ffffff4d;
}

.app-shell[data-page="Track"] .track-card.spend .track-heading > h2 {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(145deg, #d9506c, #be3552);
  box-shadow: 0 6px 14px -6px #be3552e6, inset 0 1px #ffffff4d;
}

.app-shell[data-page="Track"] .track-heading {
  align-items: center;
}

.app-shell[data-page="Track"] .track-options {
  gap: clamp(7px, 2.2vw, 10px);
}

.app-shell[data-page="Track"] .track-options button {
  border-radius: 18px;
  gap: 6px;
  min-height: 64px;
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 800;
}

.app-shell[data-page="Track"] .track-options .app-icon {
  width: clamp(26px, 8vw, 32px);
  height: clamp(26px, 8vw, 32px);
}

.app-shell[data-page="Track"] .track-card {
  grid-template-rows: minmax(0, 1fr) auto;
}

.app-shell[data-page="Track"] .track-card .track-options .app-icon {
  flex: none;
  width: clamp(30px, 9vw, 36px) !important;
  height: clamp(30px, 9vw, 36px) !important;
}

.app-shell[data-page="Track"] .track-amount {
  font-size: clamp(22px, 7.2vw, 30px);
  line-height: 1.05;
  overflow: visible;
}

.app-shell[data-page="Track"] .track-amount small {
  margin: 3px 0 0;
  font-size: clamp(11px, 3.3vw, 13px);
  display: block;
}

.app-shell[data-page="Track"] .track-change {
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 800;
}

.app-shell[data-page="Track"] .track-strip {
  flex: 1;
  gap: clamp(6px, 2vw, 10px);
  height: auto;
  min-height: 44px;
  max-height: 120px;
  margin-top: 6px;
}

.app-shell[data-page="Track"] .track-strip-bar {
  border-radius: 8px 8px 4px 4px;
  max-width: 44px;
}

.app-shell[data-page="Track"] .track-pulse-body {
  position: relative;
}

.app-shell[data-page="Track"] .track-seal {
  --seal: #5ee0d6;
  aspect-ratio: 1;
  width: clamp(58px, 17vw, 68px);
  color: var(--seal);
  border: 2px solid var(--seal);
  box-shadow: 0 0 0 3px #ffffff0f,inset 0 0 0 3px #050f3380,inset 0 0 0 4px var(--seal),0 0 18px -2px var(--seal);
  pointer-events: none;
  background: radial-gradient(circle, #ffffff1a, #ffffff05);
  border-radius: 50%;
  place-items: center;
  animation: .7s cubic-bezier(.3, 1.5, .5, 1) .9s both fu-stamp, 2.8s ease-in-out 1.8s infinite fu-seal-glow;
  display: grid;
  position: absolute;
  top: 2px;
  right: 2px;
  transform: rotate(-12deg);
}

.app-shell[data-page="Track"] .track-seal.warn {
  --seal: #ffc46b;
}

.app-shell[data-page="Track"] .track-seal.bad {
  --seal: #ff7f9c;
}

.app-shell[data-page="Track"] .track-seal:before {
  content: "";
  border: 1px dashed var(--seal);
  opacity: .6;
  border-radius: 50%;
  position: absolute;
  inset: 6px;
}

.app-shell[data-page="Track"] .track-seal span {
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--seal);
  font-size: clamp(8px, 2.4vw, 9.5px);
  font-weight: 900;
  line-height: 1.15;
  display: grid;
}

.app-shell[data-page="Track"] .track-seal em {
  font-style: normal;
}

@keyframes fu-stamp {
  0% {
    opacity: 0;
    transform: rotate(8deg)scale(2.4);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotate(-12deg)scale(1);
  }
}

@keyframes fu-seal-glow {
  50% {
    box-shadow: 0 0 0 3px #ffffff0f,inset 0 0 0 3px #050f3380,inset 0 0 0 4px var(--seal),0 0 28px 2px var(--seal);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Track"] .track-seal {
    animation: none;
  }
}

.app-shell[data-page="Track"] .track-seal span {
  text-shadow: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  letter-spacing: .05em;
  font-size: clamp(10px, 3vw, 12px);
}

.app-shell[data-page="Track"] .track-seal {
  width: clamp(84px, 25vw, 98px);
  top: -4px;
  right: -4px;
}

.app-shell[data-page="Track"] .track-seal:before {
  inset: 8px;
}

.app-shell[data-page="Track"] .track-heading .month-switch-header {
  gap: 8px;
}

.app-shell[data-page="Track"] .track-heading .month-switch-header h2 {
  color: #fff;
  font-size: clamp(18px, 5.4vw, 22px);
}

.app-shell[data-page="Track"] .track-heading .month-switch-arrow {
  color: #fff;
  background: #ffffff24;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 24px;
  display: grid;
}

.app-shell[data-page="Track"] .track-heading .month-switch-arrow:disabled {
  opacity: .3;
}

.app-shell[data-page="Track"] .track-seal {
  top: 16px;
}

.app-shell[data-page="Track"][data-tone="save"] {
  --pt: #1f7a78;
  --pt-soft: #2fa39f;
  --pt-glow: 31,122,120;
}

.app-shell[data-page="Track"][data-tone="spend"] {
  --pt: #be3552;
  --pt-soft: #d9506c;
  --pt-glow: 190,53,82;
}

.app-shell[data-page="Track"][data-tone="lend"] {
  --pt: #2a74bd;
  --pt-soft: #4c93d6;
  --pt-glow: 42,116,189;
  --violet: #1f5fa6;
  --violet-soft: #e3eefb;
  --hover-glow: 0 14px 28px #2a74bd38,0 0 22px #2a74bd66;
}

.app-shell[data-page="Guidance"] {
  --pt: #2a74bd;
  --pt-soft: #4c93d6;
  --pt-glow: 42,116,189;
}

.app-shell[data-page="Toolbox"] {
  --pt: #2f4fc0;
  --pt-soft: #5b78e6;
  --pt-glow: 47,79,192;
  --violet: #2f4fc0;
  --violet-soft: #e7eefc;
  --hover-glow: 0 14px 28px #2f4fc038,0 0 22px #2f4fc066;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal.track-popup {
  box-shadow: 0 30px 70px -10px #050f338c,0 0 0 4px #ffffffbf,0 0 0 6px var(--pt),0 0 34px rgba(var(--pt-glow),.45) !important;
  background: linear-gradient(#dcebfa 0%, #edf4fc 45%, #f6fafe 100%) !important;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal:not(.track-popup) {
  box-shadow: 0 26px 60px -8px #050f3380,0 0 0 4px #fffc,0 0 0 6px var(--pt),0 0 28px rgba(var(--pt-glow),.4) !important;
  background: linear-gradient(#edf4fc, #f8fbff) !important;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .modal-close {
  color: var(--fu-ink);
  box-shadow: 0 6px 14px -6px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  background: #ffffffd9;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .section-tag {
  background: linear-gradient(145deg,var(--pt-soft),var(--pt));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(var(--pt-glow),.9),inset 0 1px 0 #ffffff4d;
  border-radius: 8px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero {
  background: radial-gradient(circle at 90% 8%,rgba(var(--pt-glow),.55),transparent 55%),linear-gradient(135deg,#050f33 0%,#0f2b6a 55%,#1e4fb8 100%);
  color: #fff;
  border: 1px solid #ffffff24;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 30px -14px #050f3399;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero:after {
  background: #ffffff14;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero h2, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero strong {
  color: #fff;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero p, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero small {
  color: #c3d0ea;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .modal-primary, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .inline-submit, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal button.primary, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup .add-button, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .transaction-heading nav button:not(.secondary), :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .ledger-action-row nav button:not(.secondary), :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .category-chart-header nav button:not(.secondary) {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
  border-radius: 999px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal button.secondary, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .lender-pill-button {
  color: var(--fu-ink);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.4),inset 0 1px 0 #fff;
  background: linear-gradient(#fff, #eef3fb);
  border: 1px solid #2f4fc02e;
  border-radius: 999px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-cards button, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .spend-summary-grid article, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .swipe-row-surface > button, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .transaction-rows > .log-row, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .ledger-action-row, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .event-ledger-grid > button, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .metric-card {
  box-shadow: inset 0 1px 0 #fff,0 14px 24px -18px rgba(var(--fu-glow),.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border: 1px solid #2f4fc024;
}

@media (hover: hover) and (pointer: fine) {
  :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-cards button:hover, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .swipe-row-surface > button:hover, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .transaction-rows > .log-row:hover, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .event-ledger-grid > button:hover {
    border-color: rgba(var(--pt-glow),.55);
    box-shadow: inset 0 1px 0 #fff,0 0 0 4px rgba(var(--pt-glow),.14),0 16px 28px -12px rgba(var(--pt-glow),.55);
    transform: none;
  }
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .goal-icon, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .record-card-icon {
  background: rgba(var(--pt-glow),.14);
  color: var(--pt);
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .app-icon, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .metric-card .app-icon, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal article > .app-icon {
  color: var(--pt);
  filter: none;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero .app-icon, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .modal-primary .app-icon, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .add-button .app-icon {
  color: #fff;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .month-switcher button, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .spend-filter-toggle {
  color: var(--pt);
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal-backdrop {
  animation: none;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero:after {
  display: none;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero button {
  color: var(--fu-ink);
  background: linear-gradient(#fff, #e8effb);
  border: 1px solid #fff9;
  border-radius: 999px;
  box-shadow: 0 10px 20px -8px #00000080, inset 0 1px #fff;
}

@media (hover: hover) and (pointer: fine) {
  :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .workspace-hero button:hover {
    transform: none;
    box-shadow: 0 0 0 5px #ffffff2e, 0 12px 24px -8px #0000008c;
  }
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .entry-sheet-submit {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(input, select, textarea) {
  background: #fff;
  border-color: #2f4fc033;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(input, select, textarea):focus {
  border-color: var(--pt);
  box-shadow: 0 0 0 3px rgba(var(--pt-glow),.2);
  outline: 0;
}

:is(.modal .modal-backdrop:has( > .nested-popup), .track-popup .modal-backdrop) {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  background: #17142947 !important;
}

.modal > .popup-back {
  z-index: 5;
  width: 34px;
  height: 34px;
  color: var(--fu-ink);
  font: 800 24px/1 var(--font-home);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  cursor: pointer;
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #2f4fc029;
  border-radius: 50%;
  place-items: center;
  padding: 0 0 3px;
  display: grid;
  position: absolute;
  top: 12px;
  left: 12px;
}

.modal > .popup-back:active {
  transform: scale(.92);
}

.money-field {
  background: #fff;
  border-color: #2f4fc033;
}

.money-field input, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal .money-field input {
  border-radius: 0;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

.money-field:focus-within {
  border-color: var(--pt, var(--fu-royal));
  box-shadow: 0 0 0 3px rgba(var(--pt-glow, 47,79,192),.2);
}

.percentage-field {
  background: #fff;
}

.percentage-field input {
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero {
  box-shadow: none;
  color: var(--fu-ink);
  background: none;
  border: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tag tag"
                       "title action";
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 0 0 4px;
  display: grid;
  overflow: visible;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero .section-tag {
  grid-area: tag;
  justify-self: start;
  margin: 0;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero h2 {
  color: var(--fu-ink);
  grid-area: title;
  margin: 0 34px 0 0;
  font-size: clamp(20px, 6vw, 24px);
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero > p {
  display: none;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero > button {
  white-space: nowrap;
  background: var(--fu-pill);
  color: #fff;
  min-height: 34px;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  grid-area: action;
  justify-self: end;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero > :not(.section-tag):not(h2):not(p):not(button) {
  grid-column: 1 / -1;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month > div {
  color: var(--fu-ink);
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border: 1px solid #2f4fc024;
  border-radius: 14px;
  padding: 8px 10px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards {
  grid-template-columns: 1fr;
  gap: 8px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button {
  text-align: left;
  border-radius: 18px;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon small"
                       "icon name"
                       "icon detail";
  align-items: center;
  gap: 0 12px;
  height: auto;
  min-height: 64px;
  padding: 10px 14px;
  display: grid;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  border-radius: 14px;
  grid-area: icon;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  display: grid;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > small {
  color: var(--fu-sub);
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-area: small;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > strong {
  color: var(--fu-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-area: name;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > em {
  color: var(--pt);
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-area: detail;
  margin: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  overflow: hidden;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-view {
  gap: 10px;
  min-height: 0;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero {
  height: auto;
  min-height: 0;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero h2 {
  align-self: start;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero {
  grid-template-areas: "tag action"
                       "title title";
  row-gap: 8px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero > button {
  align-self: center;
  margin-top: 0;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 40px 0 0;
  font-size: clamp(19px, 5.6vw, 22px);
  line-height: 1.2;
  overflow: hidden;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > em {
  white-space: normal;
  text-overflow: clip;
  line-height: 1.25;
  overflow: visible;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month, :is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month > div {
  opacity: 1;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month :is(span, small, strong, b, em) {
  color: var(--fu-ink);
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .protect-paid-this-month .app-icon {
  color: var(--pt);
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tag"
                       "title"
                       "action";
  row-gap: 8px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero > button {
  place-self: start;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero .section-tag {
  align-items: center;
  min-height: 28px;
  display: inline-flex;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-hero h2 {
  margin: 0;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup .track-popup-body:has(.workspace-hero) {
  padding-top: 8px !important;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button {
  border-radius: 20px;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon small"
                       "name name"
                       "detail detail";
  align-items: center;
  gap: 2px 10px;
  min-height: 0;
  padding: 10px 14px 11px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  border-radius: 11px;
  width: 34px;
  height: 34px;
  margin: 0 0 2px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon .app-icon {
  width: 18px;
  height: 18px;
}

:is(.app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .track-popup-body .workspace-cards .record-card-wrap > button > strong {
  font-size: 17px;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card {
  color: #fff;
  background: radial-gradient(circle at 88% 12%, #61bbb852, #0000 44%), radial-gradient(circle at 6% 100%, #6db1e866, #0000 50%), linear-gradient(135deg, #061634 0%, #123e7a 48%, #2a74bd 100%);
  border: 0;
  animation: .6s cubic-bezier(.34, 1.3, .64, 1) both fu-rise;
  position: relative;
  overflow: hidden;
  box-shadow: 0 21px 45px -10px #06163480, 0 0 30px #2a74bd59, 0 0 0 1px #ffffff24;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card.groups {
  animation-delay: 90ms;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card:before {
  content: "";
  border-radius: inherit;
  background: conic-gradient(from var(--fu-angle, 0deg),transparent 0 60%,#ffffffb3 80%,transparent 100%);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 2;
  padding: 1.5px;
  animation: 6s linear infinite fu-spin;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card:before {
    animation: none;
  }
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card .lend-card-title {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(145deg, #4c93d6, #2a74bd);
  border-radius: 8px;
  align-items: center;
  padding: 4px 12px;
  font-size: clamp(13px, 3.8vw, 15px);
  display: inline-flex;
  box-shadow: 0 6px 14px -6px #2a74bde6, inset 0 1px #ffffff4d;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card .lend-detail {
  color: #c3d8f2;
  font-size: clamp(11px, 3.2vw, 13px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-portrait-frame {
  width: clamp(120px, 36vw, 156px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-portrait-copy b {
  font-size: clamp(22px, 6.6vw, 28px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-portrait-copy span {
  font-size: clamp(14px, 4vw, 16px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-portrait-copy small {
  font-size: clamp(12px, 3.4vw, 14px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-portrait-tag {
  padding: 3px 11px;
  font-size: clamp(13px, 3.6vw, 15px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket-fan {
  height: clamp(150px, 26dvh, 200px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket {
  width: min(62%, 230px);
  padding: 12px 14px;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket.t0 {
  width: min(64%, 240px);
  padding: 14px 16px;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket small {
  font-size: clamp(12px, 3.5vw, 14px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket b {
  font-size: clamp(22px, 6.4vw, 28px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-ticket em {
  font-size: clamp(12px, 3.3vw, 13px);
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-row, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-row-button {
  box-shadow: inset 0 1px 0 #fff,0 14px 24px -18px rgba(var(--fu-glow),.55);
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border: 1px solid #2f4fc024;
  border-radius: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-row-button:hover {
    border-color: rgba(var(--pt-glow),.55);
    box-shadow: inset 0 1px 0 #fff,0 0 0 4px rgba(var(--pt-glow),.14),0 16px 28px -12px rgba(var(--pt-glow),.55);
    transform: none;
  }
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal :is(.lender-title-row, .lender-popup-title) {
  background: none;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-topbar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
  background: #deecfae6;
  border-bottom: 0;
}

.lend-home, .lend-home .modal, .modal.dialog-lender-connect, .lender-request-overlay {
  --violet: #1f5fa6;
  --violet-soft: #e3eefb;
  --hover-glow: 0 14px 28px #2a74bd38,0 0 22px #2a74bd66;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-chevron-back {
  color: var(--fu-ink);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #2f4fc033;
}

.lender-slim-form > :not(.lender-direction-toggle):not(.modal-primary):not(.inline-submit) {
  animation: .28s ease-out both fu-fields;
}

@keyframes fu-fields {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lender-slim-form > * {
    animation: none !important;
  }
}

.modal.track-popup.lend-groups-popup > .modal-close {
  z-index: 8;
  place-items: center;
  display: grid !important;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-status-chip {
  color: #1f5fa6;
  background: #e3eefb;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-status-chip.positive, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-status-chip.owed {
  color: #1b7a4a;
  background: #ddf3e8;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-status-chip.negative, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-status-chip.owing {
  color: #be3552;
  background: #fbe3e8;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal > .modal-close {
  margin: var(--x-top, 10px) -6px calc(-40px - var(--x-top, 10px)) auto;
  top: var(--x-top, 10px) !important;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(h2, h3) {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal h2 b {
  white-space: nowrap;
  display: inline;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(.lender-row-copy, .lender-topbar, .entry-sheet-title-row, .lender-balance-card, .swipe-row-surface > button, .log-row, .record-card-wrap > button) > :is(b, strong, small, em, span, h2) {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(.lender-row-copy, .lender-row-button) {
  min-width: 0;
}

.lender-balance-line {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.lender-balance-line > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.lender-balance-line > span > b {
  white-space: nowrap;
  display: inline;
}

.lender-balance-line > b {
  flex: none;
}

.app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-title-row > :is(button, nav, a):not(.modal-close):not(.lender-chevron-back):not(.popup-back) {
  align-self: flex-end;
  margin-top: 36px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  border-radius: 18px;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon small"
                       "icon name"
                       "icon detail";
  align-items: center;
  gap: 1px 12px;
  min-height: 64px;
  padding: 10px 14px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > small {
  font-size: 11px;
  line-height: 1.2;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > em {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  text-align: left;
  border-radius: 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "icon"
                       "small"
                       "name"
                       "detail";
  place-items: start;
  gap: 1px 0;
  min-height: 0;
  padding: 12px 14px;
  display: grid;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  border-radius: 12px;
  width: 38px;
  height: 38px;
  margin: 0 0 6px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > small {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.2;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > strong {
  max-width: 100%;
  font-size: 17px;
  line-height: 1.25;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > em {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  align-content: start;
  height: auto;
  min-height: 0;
  padding: 10px 14px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  row-gap: 0;
  padding: 9px 13px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  border-radius: 10px;
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > em {
  font-size: 11px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon small"
                       "icon name"
                       "icon detail";
  align-content: center;
  place-items: center stretch;
  gap: 0 11px;
  padding: 8px 13px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon {
  border-radius: 11px;
  align-self: center;
  width: 34px;
  height: 34px;
  margin: 0;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > .record-card-icon .app-icon {
  width: 18px;
  height: 18px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards {
  gap: 10px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button {
  gap: 2px 13px;
  padding: 12px 15px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > small {
  font-size: 10.5px;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > strong {
  font-size: 14.5px;
  line-height: 1.3;
}

.app-shell[data-page="Track"][data-tone] .track-popup-body .workspace-cards .record-card-wrap > button > em {
  font-size: 11.5px;
  line-height: 1.3;
}

.app-shell[data-page="Toolbox"] .toolbox-card {
  color: #fff;
  border: 0;
  animation: .6s cubic-bezier(.34, 1.3, .64, 1) both fu-rise;
  box-shadow: 0 21px 45px -10px #050f3373, 0 0 32px #2f4fc04d, 0 0 0 1px #ffffff24;
}

.app-shell[data-page="Toolbox"] .toolbox-card.space {
  animation-delay: 90ms;
}

.app-shell[data-page="Toolbox"] .toolbox-card.common {
  background: radial-gradient(circle at 88% 14%, #61bbb857, #0000 40%), radial-gradient(circle at 6% 100%, #6d91e752, #0000 48%), linear-gradient(135deg, #050f33 0%, #0f2b6a 46%, #1e4fb8 100%);
}

.app-shell[data-page="Toolbox"] .toolbox-card.space {
  background: radial-gradient(circle at 88% 14%, #6db1e866, #0000 42%), radial-gradient(circle at 6% 100%, #61bbb84d, #0000 48%), linear-gradient(135deg, #061634 0%, #123e7a 48%, #2a74bd 100%);
}

.app-shell[data-page="Toolbox"] .toolbox-card:before {
  content: "";
  border-radius: inherit;
  background: conic-gradient(from var(--fu-angle, 0deg),transparent 0 60%,#ffffffb3 80%,transparent 100%);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 2;
  padding: 1.5px;
  animation: 6s linear infinite fu-spin;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.app-shell[data-page="Toolbox"] .toolbox-card .lend-card-title {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(145deg, #5b78e6, #2f4fc0);
  border-radius: 8px;
  align-items: center;
  padding: 4px 12px;
  font-size: clamp(13px, 3.8vw, 15px);
  display: inline-flex;
  box-shadow: 0 6px 14px -6px #2f4fc0e6, inset 0 1px #ffffff4d;
}

.app-shell[data-page="Toolbox"] .toolbox-card.space .lend-card-title {
  background: linear-gradient(145deg, #4c93d6, #2a74bd);
}

.app-shell[data-page="Toolbox"] .tool-tile {
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(160deg, #ffffff2e, #ffffff12);
  border: 1px solid #ffffff2e;
  transition: box-shadow .25s, background .25s, transform .18s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: inset 0 1px #ffffff40, 0 8px 16px -10px #0009;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip {
  color: #fff;
  background: #ffffff29;
  box-shadow: inset 0 1px #ffffff4d;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip .app-icon {
  color: #cdd9ff;
}

.app-shell[data-page="Toolbox"] .tool-label {
  color: #fff;
}

.app-shell[data-page="Toolbox"] .tool-tile.danger {
  background: linear-gradient(160deg, #e0607a4d, #e0607a1f);
  border-color: #ff96aa59;
}

.app-shell[data-page="Toolbox"] .tool-tile.danger .tool-label {
  color: #ffc2ce;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip.danger {
  background: #e0607a47;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip.danger .app-icon {
  color: #ffb8c6;
}

.app-shell[data-page="Toolbox"] .tool-tile:active:not(:disabled) {
  transform: scale(.95);
}

@media (hover: hover) and (pointer: fine) {
  .app-shell[data-page="Toolbox"] .tool-tile:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 #ffffff59,0 0 0 4px #ffffff1f,0 12px 22px -8px rgba(var(--fu-glow),.7);
    background: linear-gradient(160deg, #ffffff42, #ffffff1a);
    transform: none;
  }

  .app-shell[data-page="Toolbox"] .toolbox-card:hover {
    box-shadow: 0 21px 45px -10px #050f3373, 0 0 32px #2f4fc04d, 0 0 0 1px #ffffff24;
  }
}

.app-shell[data-page="Toolbox"] .toolbox-legal-links a, .app-shell[data-page="Toolbox"] .toolbox-legal-links button {
  color: #2f4fc0;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Toolbox"] .toolbox-card, .app-shell[data-page="Toolbox"] .toolbox-card:before {
    animation: none;
  }
}

.app-shell[data-page="Toolbox"] .toolbox-home .track-cards {
  flex: 1;
  grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
  min-height: 0;
}

.app-shell[data-page="Toolbox"] .toolbox-card {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.8dvh, 14px);
  padding: clamp(12px, 3.4vw, 16px);
}

.app-shell[data-page="Toolbox"] .toolbox-card .tool-grid {
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  align-self: stretch;
  gap: clamp(8px, 2.2vw, 11px);
  height: 100%;
  margin-top: 0;
}

.app-shell[data-page="Toolbox"] .tool-tile {
  border-radius: 18px;
  gap: clamp(6px, 1.2dvh, 10px);
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip {
  border-radius: 15px;
  width: clamp(40px, 12vw, 50px);
  height: clamp(40px, 12vw, 50px);
}

.app-shell[data-page="Toolbox"] .toolbox-card .tool-grid {
  height: auto;
  min-height: 0;
  max-height: 100%;
}

.app-shell[data-page="Toolbox"] .toolbox-card {
  min-height: 0;
}

.app-shell[data-page="Toolbox"] .toolbox-card .tool-grid {
  grid-auto-rows: clamp(78px, 33.3333dvh - 146.667px, 136px);
  align-self: center;
  height: auto;
  max-height: none;
}

.app-shell[data-page="Toolbox"] .toolbox-home .track-cards {
  grid-template-rows: auto auto;
  align-content: start;
  gap: 12px;
}

.app-shell[data-page="Toolbox"] .tool-tile {
  align-self: stretch;
  height: 100%;
  max-height: none;
}

.app-shell[data-page="Toolbox"] .toolbox-home {
  min-height: 0;
}

.app-shell[data-page="Toolbox"] .toolbox-home .track-cards {
  flex: none;
  min-height: 0;
}

.app-shell[data-page="Toolbox"] .tool-hint {
  color: #b5c4e6;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: -2px;
  font-size: clamp(9.5px, 2.7vw, 11px);
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
}

.app-shell[data-page="Toolbox"] .tool-tile.danger .tool-hint {
  color: #f2a9b9;
}

.app-shell[data-page="Toolbox"] .tool-tile {
  padding: 6px 5px;
}

.app-shell[data-page="Toolbox"] .tool-hint {
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.app-shell[data-page="Toolbox"] .tool-label {
  font-size: clamp(11.5px, 3.3vw, 13px);
}

.app-shell[data-page="Toolbox"] .toolbox-card .track-heading {
  margin-bottom: 12px;
}

.app-shell[data-page="Toolbox"] .toolbox-card .tool-grid {
  margin-top: 0;
}

.app-shell[data-page="Toolbox"] .modal :is(.member-action, .security-setup, .plan-cta) {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Toolbox"] .modal :is(.member-action.ghost, .home-rename-pen) {
  color: var(--fu-ink) !important;
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.4),inset 0 1px 0 #fff !important;
  background: linear-gradient(#fff, #eaf1fb) !important;
  border: 1px solid #2f4fc033 !important;
}

.app-shell[data-page="Toolbox"] .modal .home-rename-pen .app-icon {
  color: var(--fu-ink);
}

.app-shell[data-page="Toolbox"] .modal :is(.member-action.danger, .delete-primary, .danger-button) {
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(145deg, #d9506c, #be3552) !important;
  border: 1px solid #ffffff2e !important;
  box-shadow: 0 10px 20px -8px #be355299, inset 0 1px #ffffff38 !important;
}

.app-shell[data-page="Toolbox"] .modal article {
  box-shadow: inset 0 1px 0 #fff,0 14px 24px -18px rgba(var(--fu-glow),.55);
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border: 1px solid #2f4fc024;
}

.app-shell[data-page="Toolbox"] .modal.dialog-home-members > .modal-close {
  z-index: 5;
  place-items: center;
  display: grid !important;
}

.app-shell[data-page="Toolbox"] .modal.dialog-home-members {
  padding-top: 56px;
}

.app-shell[data-page="Toolbox"] .modal :is(.plus, .empty-picker) {
  border-color: #2f4fc040;
}

.app-shell[data-page="Toolbox"] .modal .report-month {
  background: #e3eefb;
  border: 1px solid #2f4fc029;
}

.app-shell[data-page="Toolbox"] .modal .report-month :is(button, span) {
  color: #1f4e8c;
}

.app-shell[data-page="Toolbox"] .modal .report-export-button {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Toolbox"] .modal .report-flowbar {
  background: #e3eaf6;
}

.app-shell[data-page="Toolbox"] .modal :is(.report-flowbar, .report-legend) i.spent {
  background: linear-gradient(90deg, #e0607a, #be3552);
}

.app-shell[data-page="Toolbox"] .modal :is(.report-flowbar, .report-legend) i.saved {
  background: linear-gradient(90deg, #2fa39f, #1f7a78);
}

.app-shell[data-page="Toolbox"] .modal .report-legend i.left {
  background: #e3eaf6;
}

.app-shell[data-page="Toolbox"] .modal .report-daily i {
  background: linear-gradient(#e0607a, #be3552);
}

.app-shell[data-page="Toolbox"] .modal .report-block {
  box-shadow: inset 0 1px 0 #fff,0 14px 24px -18px rgba(var(--fu-glow),.5);
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border-color: #2f4fc024;
}

.app-shell[data-page="Toolbox"] .modal .report-block li.info:before, .app-shell[data-page="Toolbox"] .modal .report-insights li:before {
  background: #2f4fc0;
}

.app-shell[data-page="Toolbox"] .modal .activate-smart-plan {
  border-radius: 999px;
  min-height: 38px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Toolbox"] .modal .dialog-savings-plan button.active, .app-shell[data-page="Toolbox"] .dialog-savings-plan button.active {
  box-shadow: 0 0 0 3px #2f4fc029;
  border-color: #2f4fc0 !important;
}

.app-shell[data-page="Toolbox"] .dialog-savings-plan :is(b, i)[style*="101"], .app-shell[data-page="Toolbox"] .dialog-savings-plan button b:first-child {
  background-color: #2f4fc0;
}

.app-shell[data-page="Toolbox"] .modal .section-tag {
  background: linear-gradient(145deg,var(--pt-soft, #5b78e6),var(--pt, #2f4fc0));
  color: #fff;
  border-radius: 8px;
}

.app-shell[data-page="Toolbox"] .subscription-plan-tabs {
  background: #e3eaf6;
}

.app-shell[data-page="Toolbox"] .subscription-plan-tabs button {
  color: #5b6b82;
}

.app-shell[data-page="Toolbox"] .subscription-plan-tabs button.active {
  color: #1f4e8c;
  box-shadow: 0 6px 14px -6px #2f4fc066;
}

.app-shell[data-page="Toolbox"] .subscription-period {
  background: #e8eef8;
}

.app-shell[data-page="Toolbox"] .subscription-period button {
  color: #5b6b82;
}

.app-shell[data-page="Toolbox"] .subscription-period button.active {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.6);
}

.app-shell[data-page="Toolbox"] .data-promise {
  color: #1f4e8c;
  background: #e3eefb;
}

.app-shell[data-page="Toolbox"] .plan-checks li:before {
  background-color: #e3eefb;
}

.app-shell[data-page="Toolbox"] .subscription-plan-card > header > b.offer {
  color: #1f4e8c;
  background: #e3eefb;
}

.app-shell[data-page="Toolbox"] .subscription-plan-card, .app-shell[data-page="Toolbox"] .subscription-overview > * {
  border-color: #2f4fc024;
}

.app-shell[data-page="Toolbox"] .dialog-tour-picker i {
  color: #2f4fc0;
}

.app-shell[data-page="Toolbox"] .trash-list > article > span:first-child {
  min-width: 0;
  overflow: hidden;
}

.app-shell[data-page="Toolbox"] .trash-list > article > span:first-child > b {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.app-shell[data-page="Toolbox"] .trash-list > article {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.app-shell[data-page="Toolbox"] .modal .keep-action {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Toolbox"] .modal .danger-action {
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(145deg, #d9506c, #be3552) !important;
  border: 1px solid #ffffff2e !important;
  box-shadow: 0 10px 20px -8px #be355299, inset 0 1px #ffffff38 !important;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes article {
  box-shadow: inset 0 1px 0 #fff,0 10px 18px -16px rgba(var(--fu-glow),.5);
  border-radius: 16px;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes :is(h2, h3, b, strong) {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes .release-highlight-list article h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  overflow: hidden;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes .release-highlight-list article {
  align-items: center;
  min-height: 0;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes .release-highlight-list article h3 {
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  display: -webkit-box;
}

.app-shell[data-page="Toolbox"] .dialog-release-notes .release-highlight-list article > div {
  align-self: center;
}

.auth-page {
  background: linear-gradient(#d6eafb 0%, #e9f3fc 42%, #f5fafe 100%);
}

.auth-page:before, .auth-page:after {
  display: none;
}

.auth-page .auth-hero {
  background: radial-gradient(circle at 88% 12%, #61bbb866, #0000 42%), radial-gradient(circle at 6% 100%, #6d91e766, #0000 50%), linear-gradient(135deg, #050f33 0%, #0f2b6a 48%, #1e4fb8 100%);
  border-radius: 0 0 34px 34px;
  margin: 0;
  padding: clamp(24px, 5.2vh, 44px) clamp(22px, 6vw, 52px) clamp(22px, 3.6vh, 32px);
  overflow: hidden;
  box-shadow: 0 22px 44px -20px #050f338c, 0 0 34px #2f4fc040;
}

.auth-page .auth-hero:before, .auth-page .auth-hero:after {
  content: "";
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.auth-page .auth-hero:before {
  background: radial-gradient(circle, #6db1e880, #0000 66%);
  width: 70vmax;
  height: 70vmax;
  animation: 14s ease-in-out infinite alternate fu-drift-a;
  top: -44vmax;
  left: -38vmax;
}

.auth-page .auth-hero:after {
  background: radial-gradient(circle, #61bbb86b, #0000 66%);
  width: 60vmax;
  height: 60vmax;
  animation: 17s ease-in-out infinite alternate fu-drift-b;
  bottom: -46vmax;
  right: -34vmax;
}

.auth-page .auth-hero > * {
  z-index: 1;
  position: relative;
}

.auth-page .auth-tags span {
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff24;
  border: 1px solid #ffffff3d;
  box-shadow: inset 0 1px #ffffff40;
}

.auth-page .eyebrow {
  color: #2f4fc0;
  letter-spacing: .16em;
}

.auth-page .auth-form-wrap h2 {
  color: var(--fu-ink);
}

.auth-page .auth-desc {
  color: var(--fu-sub);
}

.auth-page .auth-desc b {
  color: var(--fu-ink);
}

.auth-page .auth-tabs {
  box-shadow: inset 0 1px 0 #fff,0 10px 20px -16px rgba(var(--fu-glow),.5);
  background: #ffffffbf;
  border: 1px solid #2f4fc024;
  border-radius: 999px;
}

.auth-page .auth-tabs button {
  color: var(--fu-sub);
  border-radius: 999px;
  transition: background .25s, color .25s, box-shadow .25s;
}

.auth-page .auth-tabs button.active {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
}

.auth-page .auth-form label, .auth-page .otp-label {
  color: var(--fu-sub);
}

.auth-page .auth-form input {
  color: var(--fu-ink);
  background: #fff;
  border: 1px solid #2f4fc033;
  border-radius: 14px;
  box-shadow: inset 0 1px #fff;
}

.auth-page .auth-form input::placeholder {
  color: #8b98ae;
}

.auth-page .auth-form input:focus {
  border-color: #2f4fc0;
  box-shadow: 0 0 0 3px #2f4fc033;
}

.auth-page .password-toggle {
  color: var(--fu-sub);
}

.auth-page .password-toggle:hover, .auth-page .password-toggle:focus-visible {
  color: var(--fu-ink);
  background: #2f4fc01a;
}

.auth-page .auth-error {
  color: #a32a45;
  background: #fbe3e8;
  border: 1px solid #be355247;
}

.auth-page .auth-notice {
  color: #1b6b45;
  background: #ddf3e8;
  border: 1px solid #1f7a7847;
}

.auth-page .auth-legal-consent, .auth-page .auth-note {
  color: var(--fu-sub);
}

.auth-page .auth-legal-consent a, .auth-page .forgot-link, .auth-page .back-to-signin {
  color: #2f4fc0;
}

.auth-page .auth-submit {
  background: var(--fu-pill);
  color: #fff;
  min-height: 48px;
  box-shadow: 0 14px 26px -10px rgba(var(--fu-glow),.7),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .auth-page .auth-submit:hover:not(:disabled) {
    box-shadow: 0 0 0 5px #2f4fc024,0 16px 30px -10px rgba(var(--fu-glow),.75);
    transform: none;
  }
}

.auth-page .auth-submit:disabled {
  opacity: .55;
  box-shadow: none;
}

.otp-field {
  gap: 8px;
  display: grid;
}

.otp-label {
  font-size: 10px;
  font-weight: 800;
}

.otp-boxes {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 10px);
  display: grid;
}

.auth-page .auth-form .otp-boxes input {
  text-align: center;
  height: clamp(50px, 7.4dvh, 60px);
  font: 800 clamp(20px,6vw,26px) var(--font-home);
  caret-color: #2f4fc0;
  border-radius: 16px;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.auth-page .auth-form .otp-boxes input.filled {
  background: linear-gradient(#fff, #eef4fd);
  border-color: #2f4fc08c;
}

.auth-page .auth-form .otp-boxes input:focus {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .auth-page .auth-hero:before, .auth-page .auth-hero:after {
    animation: none;
  }
}

.auth-page .auth-desc {
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.5;
}

.auth-loading {
  color: var(--fu-ink);
  font-family: var(--font-home);
  background: linear-gradient(#d6eafb, #f5fafe);
}

.auth-loading .brand {
  color: var(--fu-ink);
}

.month-switch-arrow, .quick-add-fab-option, .toolbox-legal-links a, .toolbox-legal-links button, .track-strip-bar {
  position: relative;
}

.month-switch-arrow:after, .quick-add-fab-option:after, .toolbox-legal-links a:after, .toolbox-legal-links button:after {
  content: "";
  position: absolute;
  inset: -9px;
}

.toolbox-legal-links a:after, .toolbox-legal-links button:after {
  inset: -12px -4px;
}

.track-strip-bar:after {
  content: "";
  height: 52px;
  position: absolute;
  bottom: 0;
  left: -2px;
  right: -2px;
}

:is(.app-shell, .auth-page, .modal-backdrop) :is(button, a[href], [tabindex]):not(input, select, textarea):focus-visible {
  outline-offset: 2px;
  outline: 2px solid #2f4fc0 !important;
}

:is(.track-card, .toolbox-card, .lend-card, .money-pulse-card, .auth-hero, .mobile-nav.v2-mobile-nav .nav-pill) :is(button, a[href]):focus-visible {
  outline-color: #fff !important;
}

.quick-add-fab :focus-visible {
  outline-offset: 3px;
  outline-color: #fff !important;
}

.modal.dialog-diagnostics-consent {
  background: linear-gradient(#dcebfa 0%, #edf4fc 45%, #f6fafe 100%) !important;
  box-shadow: 0 30px 70px -10px #050f338c, 0 0 0 4px #ffffffbf, 0 0 0 6px #2f4fc0, 0 0 34px #2f4fc066 !important;
}

.modal.dialog-diagnostics-consent .section-tag {
  color: #fff;
  background: linear-gradient(145deg, #5b78e6, #2f4fc0);
  border-radius: 8px;
  box-shadow: 0 6px 14px -6px #2f4fc0e6, inset 0 1px #ffffff4d;
}

.modal.dialog-diagnostics-consent .modal-primary {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.modal.dialog-diagnostics-consent .cancel-button {
  color: var(--fu-ink);
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.4),inset 0 1px 0 #fff;
  background: linear-gradient(#fff, #eef3fb);
  border: 1px solid #2f4fc033;
  border-radius: 999px;
}

.modal.dialog-diagnostics-consent .diagnostics-summary {
  color: #1f4e8c;
  background: #e3eefb;
  border-color: #2f4fc029;
}

.modal.dialog-diagnostics-consent .diagnostics-summary b {
  color: var(--fu-ink);
}

.modal.dialog-diagnostics-consent .modal-close {
  color: var(--fu-ink);
  background: #ffffffd9;
}

.spend-undo {
  border: 1px solid #ffffff24;
  border-radius: 999px;
  box-shadow: 0 16px 30px -12px #050f3399, inset 0 1px #ffffff2e;
  color: #fff !important;
  background: linear-gradient(#1b2440, #0f1730) !important;
}

.spend-undo button {
  font-weight: 800;
  color: #8fb4ff !important;
}

.modal.profile-popup .profile-head .modal-close {
  color: var(--fu-ink) !important;
  box-shadow: 0 6px 14px -6px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff !important;
  background: #ffffffe6 !important;
  margin: -4px -6px 0 0 !important;
}

.modal:is(.delete-transaction-confirm, .signout-confirm) .delete-transaction-name {
  color: var(--fu-sub);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 2px 0 14px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}

.modal:is(.delete-transaction-confirm, .signout-confirm) .delete-actions {
  gap: 10px;
  display: flex;
}

.modal:is(.delete-transaction-confirm, .signout-confirm) .delete-actions button {
  min-height: 42px;
  font: 800 13px var(--font-home);
  cursor: pointer;
  border-radius: 999px;
  flex: 1 1 0;
}

.modal:is(.delete-transaction-confirm, .signout-confirm) .keep-action {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
}

.modal:is(.delete-transaction-confirm, .signout-confirm) .danger-action {
  color: #fff;
  background: linear-gradient(145deg, #d9506c, #be3552);
  border: 1px solid #ffffff2e;
  box-shadow: 0 10px 20px -8px #be355299, inset 0 1px #ffffff38;
}

.profile-popup .pf-brand-icon {
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #141b2b40);
  width: 58%;
  height: 58%;
  display: block;
}

.app-shell[data-page="Home"]:not([data-tone]), .app-shell[data-page="Home"]:not([data-tone]) .modal {
  --violet: #2f4fc0;
  --violet-soft: #e7eefc;
  --hover-glow: 0 14px 28px #2f4fc038,0 0 22px #2f4fc066;
  --pt: #2f4fc0;
  --pt-soft: #5b78e6;
  --pt-glow: 47,79,192;
}

.app-shell[data-page="Home"] .modal :is(.modal-primary, .inline-submit) {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Home"] .modal .section-tag {
  background: linear-gradient(145deg,var(--pt-soft, #5b78e6),var(--pt, #2f4fc0));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(var(--pt-glow, 47,79,192),.9),inset 0 1px 0 #ffffff4d;
  border-radius: 8px;
}

.app-shell[data-page="Home"] .modal :is(.avatar-picker-trigger, .available-accounts, .available-account-row) {
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border-color: #2f4fc029;
}

.app-shell[data-page="Home"] .modal .avatar-preview {
  background: #e3eefb;
  border-color: #2f4fc040;
}

.app-shell[data-page="Home"] .modal :is(select, input, textarea) {
  border-color: #2f4fc033;
}

.app-shell[data-page="Home"] .modal :is(select, input, textarea):focus {
  border-color: #2f4fc0;
  outline: 0;
  box-shadow: 0 0 0 3px #2f4fc033;
}

.app-shell[data-page="Home"] .modal .available-account-icon {
  color: #2f4fc0;
  background: #e3eefb;
}

.avatar-dialog {
  position: fixed;
  overflow: hidden auto;
  background: linear-gradient(#edf4fc, #f8fbff) !important;
  border: 0 !important;
  border-radius: 26px !important;
  width: min(100vw - 82px, 540px) !important;
  padding: 16px 16px 18px !important;
  box-shadow: 0 26px 60px -8px #050f3380, 0 0 0 4px #fffc, 0 0 0 6px #2f4fc0, 0 0 28px #2f4fc066 !important;
}

.avatar-dialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #17142957;
}

.avatar-dialog > header {
  margin-bottom: 12px;
  padding-right: 0;
  position: relative;
}

.avatar-dialog .section-tag {
  color: #fff;
  background: linear-gradient(145deg, #5b78e6, #2f4fc0);
  border-radius: 8px;
  box-shadow: 0 6px 14px -6px #2f4fc0e6, inset 0 1px #ffffff4d;
}

.avatar-dialog h2 {
  font-family: var(--font-home);
  color: var(--fu-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 8px 0 0;
  font-size: 20px;
  overflow: hidden;
}

.avatar-dialog-close {
  box-shadow: 0 6px 14px -6px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 34px !important;
  height: 34px !important;
  color: var(--fu-ink) !important;
  background: #ffffffe6 !important;
  flex-basis: 34px !important;
}

.avatar-category-buttons button {
  color: var(--fu-sub);
  background: #ffffffd9;
  border-color: #2f4fc029;
  border-radius: 999px;
}

.avatar-category-buttons button[aria-pressed="true"] {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.6);
  border-color: #ffffff24;
}

.avatar-choice-grid button {
  background: linear-gradient(160deg, #fff, #eaf1fb);
  border-color: #2f4fc024;
}

.avatar-choice-grid button[aria-pressed="true"] {
  border-color: #2f4fc0;
  box-shadow: 0 0 0 3px #2f4fc033;
}

.avatar-choice-grid button[aria-pressed="true"]:after {
  background-color: #2f4fc0;
}

.avatar-dialog button:focus-visible {
  outline: 2px solid #2f4fc0;
}

.avatar-choice-grid button[aria-pressed="true"]:after {
  background: #2f4fc0 !important;
}

.app-shell[data-page="Home"] .modal:not(.profile-popup) > .modal-close {
  margin: var(--x-top, 10px) -6px calc(-40px - var(--x-top, 10px)) auto;
  z-index: 5;
  top: var(--x-top, 10px) !important;
  color: var(--fu-ink) !important;
  box-shadow: 0 6px 14px -6px rgba(var(--fu-glow),.5),inset 0 1px 0 #fff !important;
  background: #ffffffe6 !important;
}

.app-shell[data-page="Home"] .modal:not(.profile-popup) :is(h2, h3) {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.app-shell[data-page="Home"] .modal.pf-currency-popup > .modal-close {
  position: sticky;
}

.app-shell[data-page="Home"] .modal :is(.member-action, .security-setup, .plan-cta) {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38 !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Home"] .modal :is(.member-action.ghost, .home-rename-pen) {
  color: var(--fu-ink) !important;
  background: linear-gradient(#fff, #eaf1fb) !important;
  border: 1px solid #2f4fc033 !important;
}

.app-shell[data-page="Home"] .modal :is(.security-status-card, .security-actions button, .security-list button) {
  border-color: #2f4fc024;
}

.app-shell[data-page="Home"] .modal .keep-action {
  border-radius: 999px;
  background: var(--fu-pill) !important;
  color: #fff !important;
  border: 1px solid #ffffff24 !important;
}

.app-shell[data-page="Home"] .modal .danger-action {
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(145deg, #d9506c, #be3552) !important;
  border: 1px solid #ffffff2e !important;
}

.available-accounts-editor .available-account-entry {
  gap: 8px;
  margin-bottom: 10px;
}

.available-accounts-editor .available-account-entry > button:not(.danger) {
  min-width: 64px;
  box-shadow: 0 8px 16px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  background: var(--fu-pill) !important;
  color: #fff !important;
  border: 1px solid #ffffff24 !important;
  border-radius: 999px !important;
}

.available-accounts-editor .available-account-list {
  gap: 8px;
  display: grid;
}

.available-accounts-editor .available-account-list > * {
  background: linear-gradient(160deg, #fffffff2, #ffffffb3);
  border: 1px solid #2f4fc024;
  border-radius: 14px;
  box-shadow: inset 0 1px #fff;
}

.available-accounts-editor .profile-help {
  margin-top: 10px;
}

.available-accounts-editor summary i {
  color: var(--fu-sub);
  font-style: normal;
}

.app-shell[data-page="Track"] .track-home {
  min-height: 0;
}

.app-shell[data-page="Track"] .track-cards {
  flex: none;
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 10px;
  min-height: 0;
}

.app-shell[data-page="Track"] .track-card {
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 10px 12px;
}

.app-shell[data-page="Track"] .track-pulse-body {
  flex: none;
  min-height: 0;
  padding: 2px 0;
}

.app-shell[data-page="Track"] .track-gauge b small {
  font-size: 8.5px;
}

.app-shell[data-page="Track"] .track-amount small {
  margin-top: 1px;
  font-size: 10.5px;
}

.app-shell[data-page="Track"] .track-change {
  font-size: 11.5px;
}

.app-shell[data-page="Track"] .track-chips span {
  padding: 2px 8px;
  font-size: 10.5px;
}

.app-shell[data-page="Track"] .track-card.lend {
  background: radial-gradient(circle at 88% 14%, #61bbb857, #0000 40%), radial-gradient(circle at 6% 100%, #6db1e86b, #0000 48%), linear-gradient(135deg, #061634 0%, #123e7a 48%, #2a74bd 100%);
  animation-delay: .18s;
  box-shadow: 0 21px 45px #06163466, 0 0 32px #2a74bd52, 0 0 0 1px #ffffff24;
}

.app-shell[data-page="Track"] .track-card.lend .track-heading > h2 {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(145deg, #4c93d6, #2a74bd);
  box-shadow: 0 6px 14px -6px #2a74bde6, inset 0 1px #ffffff4d;
}

.app-shell[data-page="Track"] .track-card.lend .track-options .app-icon {
  color: #bfe0ff;
}

.app-shell[data-page="Track"] .track-options button small {
  color: #c3d8f2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.app-shell[data-page="Track"] .lend-line {
  color: #c3d0ea;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
}

.app-shell[data-page="Track"] .lend-line i {
  background: #5ee0d6;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 6px #5ee0d6;
}

.app-shell[data-page="Track"] .lend-line.owe i {
  background: #ff8fa5;
  box-shadow: 0 0 6px #ff8fa5;
}

.app-shell[data-page="Track"] .lend-line b {
  color: #fff;
  justify-self: end;
  font-size: clamp(14px, 4.2vw, 17px);
  font-weight: 800;
}

.app-shell[data-page="Track"] .track-lend-slot {
  display: block;
}

.app-shell[data-page="Track"] .track-lend-slot.lend-blurred {
  filter: blur(5px) saturate(.85);
  opacity: .5;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-shell[data-page="Track"] .track-card {
  gap: 6px;
  padding: 8px 12px 10px;
}

.app-shell[data-page="Track"] .track-heading {
  min-height: 0;
}

.app-shell[data-page="Track"] .track-heading > h2 {
  padding: 2px 10px;
  font-size: clamp(12px, 3.5vw, 14px);
}

.app-shell[data-page="Track"] .track-heading .month-switch-header h2 {
  font-size: clamp(15px, 4.4vw, 17px);
}

.app-shell[data-page="Track"] .track-heading .month-switch-arrow {
  width: 26px;
  height: 26px;
  font-size: 18px;
}

.app-shell[data-page="Track"] .track-pulse-body {
  padding: 0;
}

.app-shell[data-page="Track"] .track-gauge {
  width: clamp(100px, 30vw, 118px);
}

.app-shell[data-page="Track"] .track-gauge b {
  font-size: clamp(15px, 4.6vw, 18px);
}

.app-shell[data-page="Track"] .track-stats {
  gap: 3px;
}

.app-shell[data-page="Track"] .track-amount {
  font-size: clamp(18px, 5.6vw, 22px);
}

.app-shell[data-page="Track"] .track-seal span {
  font-size: clamp(8.5px, 2.5vw, 10px);
}

.app-shell[data-page="Track"] .track-card .track-options button {
  border-radius: 14px;
  gap: 2px;
  min-height: clamp(48px, 6.4dvh, 54px);
}

.app-shell[data-page="Track"] .track-card.lend .track-stats {
  padding-right: clamp(64px, 19vw, 76px);
}

.swipe-send {
  background: #e3eaf6;
}

.swipe-send-fill {
  background: linear-gradient(90deg, #8fb4ff, #5b78e6);
}

.swipe-send-label, .swipe-send-hint {
  color: #1f4e8c;
}

.swipe-send-knob {
  background: var(--fu-pill);
  box-shadow: 0 8px 16px -6px rgba(var(--fu-glow),.65),0 0 0 3px #fff9;
}

.app-shell[data-page="Track"] .lend-icon {
  place-items: center;
  display: inline-grid;
  position: relative;
  overflow: visible;
}

.app-shell[data-page="Track"] .track-card .track-stats {
  padding-right: calc(clamp(58px, 17vw, 68px) + 8px);
}

.app-shell[data-page="Track"] .track-card .track-chips {
  gap: 4px;
}

.app-shell[data-page="Track"] .track-card .track-chips span {
  padding: 2px 7px;
  font-size: 10px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-pulse-body {
  grid-template-rows: auto auto auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 14px;
  display: grid;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-stats {
  display: contents;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-gauge {
  grid-area: 1 / 1 / span 2;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-amount {
  grid-area: 1 / 2;
  align-self: end;
  padding-right: calc(clamp(58px, 17vw, 68px) + 6px);
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-change {
  grid-area: 2 / 2;
  align-self: start;
  padding-right: calc(clamp(58px, 17vw, 68px) + 6px);
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-chips {
  flex-wrap: nowrap;
  grid-area: 3 / 1 / auto / -1;
  gap: 6px;
  margin-top: 6px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-chips span {
  flex: 0 auto;
  min-width: 0;
}

.app-shell[data-page="Track"] .track-seal {
  width: clamp(56px, 16.4vw, 64px);
  top: -2px;
}

.app-shell[data-page="Track"] .track-card.lend .track-pulse-body {
  padding-bottom: 4px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-amount, .app-shell[data-page="Track"] .track-card:not(.lend) .track-change, .app-shell[data-page="Track"] .track-card.lend .track-stats {
  padding-right: calc(clamp(56px, 16.4vw, 64px) + 8px);
}

.app-shell[data-page="Track"] .track-cards {
  gap: 9px;
}

.app-shell[data-page="Track"] .track-card {
  padding-bottom: 10px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-chips {
  margin-top: 6px;
}

.app-shell .page-chrome .home-header {
  animation: .5s cubic-bezier(.2, .9, .25, 1.08) both fu-drop;
}

.app-shell:is([data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .page-chrome .home-space-pill {
  animation: .5s cubic-bezier(.2, .9, .25, 1.08) 60ms both fu-drop;
}

.app-shell[data-page="Track"] .track-card:first-child, .app-shell[data-page="Toolbox"] .toolbox-card.common {
  animation-delay: 80ms;
}

.app-shell[data-page="Track"] .track-card.spend {
  animation-delay: .2s;
}

.app-shell[data-page="Track"] .track-lend-slot .track-card.lend {
  animation-delay: .32s;
}

.app-shell:is([data-page="Track"], [data-page="Toolbox"]) :is(.track-options button, .tool-tile, .track-chips span, .lend-line) {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) backwards fu-pop;
}

.app-shell[data-page="Track"] .track-card:first-child .track-options > :first-child {
  animation-delay: .3s;
}

.app-shell[data-page="Track"] .track-card:first-child .track-options > :nth-child(2) {
  animation-delay: .36s;
}

.app-shell[data-page="Track"] .track-card:first-child .track-options > :nth-child(3) {
  animation-delay: .42s;
}

.app-shell[data-page="Track"] .track-card:first-child .track-options > :nth-child(4) {
  animation-delay: .48s;
}

.app-shell[data-page="Track"] .track-card.spend .track-options > :first-child {
  animation-delay: .42s;
}

.app-shell[data-page="Track"] .track-card.spend .track-options > :nth-child(2) {
  animation-delay: .48s;
}

.app-shell[data-page="Track"] .track-card.spend .track-options > :nth-child(3), .app-shell[data-page="Track"] .track-card.lend .track-options > :first-child {
  animation-delay: .54s;
}

.app-shell[data-page="Track"] .track-card.lend .track-options > :nth-child(2) {
  animation-delay: .6s;
}

.app-shell[data-page="Track"] .track-chips span:first-child {
  animation-delay: .4s;
}

.app-shell[data-page="Track"] .track-chips span:nth-child(2) {
  animation-delay: .46s;
}

.app-shell[data-page="Track"] .lend-line:first-child {
  animation-delay: .5s;
}

.app-shell[data-page="Track"] .lend-line:nth-child(2) {
  animation-delay: .58s;
}

.app-shell[data-page="Toolbox"] .tool-tile:first-child {
  animation-delay: .2s;
}

.app-shell[data-page="Toolbox"] .tool-tile:nth-child(2) {
  animation-delay: .27s;
}

.app-shell[data-page="Toolbox"] .tool-tile:nth-child(3) {
  animation-delay: .34s;
}

.app-shell[data-page="Toolbox"] .tool-tile:nth-child(4) {
  animation-delay: .41s;
}

.app-shell[data-page="Toolbox"] .tool-tile:nth-child(5) {
  animation-delay: .48s;
}

.app-shell[data-page="Toolbox"] .tool-tile:nth-child(6) {
  animation-delay: .55s;
}

.app-shell[data-page="Toolbox"] .toolbox-card.space .tool-tile:first-child {
  animation-delay: .42s;
}

.app-shell[data-page="Toolbox"] .toolbox-card.space .tool-tile:nth-child(2) {
  animation-delay: .5s;
}

.app-shell[data-page="Toolbox"] .toolbox-card.space .tool-tile:nth-child(3) {
  animation-delay: .58s;
}

.app-shell[data-page="Track"] .track-amount, .app-shell[data-page="Track"] .track-gauge b {
  animation: 3.2s ease-in-out 1s fu-shine;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .page-chrome .home-header, .app-shell .page-chrome .home-space-pill, .app-shell :is(.track-options button, .tool-tile, .track-chips span, .lend-line) {
    animation: none !important;
  }
}

.app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option {
  position: relative;
}

.app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option:after {
  inset: -4px;
}

.transaction-editor :is(input[type="date"], select), .entry-sheet :is(input[type="date"], select) {
  text-overflow: ellipsis;
  padding-left: 10px;
  padding-right: 8px;
  font-size: 13.5px;
}

.transaction-editor input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  margin: 0 0 0 2px;
  padding: 0;
}

.entry-sheet input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  margin: 0 0 0 2px;
  padding: 0;
}

.transaction-editor select, .entry-sheet select {
  font-size: 12.5px;
}

.app-shell[data-tone="save"] {
  --pt: #1f7a78;
  --pt-soft: #2fa39f;
  --pt-glow: 31,122,120;
  --violet: #1f7a78;
  --violet-soft: #ddf3f1;
}

.app-shell[data-tone="spend"] {
  --pt: #be3552;
  --pt-soft: #d9506c;
  --pt-glow: 190,53,82;
  --violet: #be3552;
  --violet-soft: #fbe3e8;
}

.app-shell[data-tone="lend"] {
  --pt: #2a74bd;
  --pt-soft: #4c93d6;
  --pt-glow: 42,116,189;
  --violet: #1f5fa6;
  --violet-soft: #e3eefb;
}

.app-shell[data-tone] .modal-backdrop > .modal {
  box-shadow: 0 26px 60px -8px #050f3380,0 0 0 4px #fffc,0 0 0 6px var(--pt),0 0 28px rgba(var(--pt-glow),.4) !important;
}

.modal.entry-sheet {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 24px;
  overflow: hidden auto;
}

.modal.entry-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal.entry-sheet > form:last-child, .modal.entry-sheet .modal-form {
  padding-bottom: 6px;
}

.modal.entry-sheet .modal-form {
  scrollbar-width: none;
  gap: 9px;
  padding-bottom: 16px;
}

.modal.entry-sheet .modal-form::-webkit-scrollbar {
  width: 0;
  display: none;
}

.modal.entry-sheet .modal-form .field-help {
  margin-bottom: 2px;
}

.modal.entry-sheet .modal-form {
  padding-bottom: 8px;
}

.modal.entry-sheet textarea {
  resize: none;
  height: 60px;
  min-height: 58px !important;
}

.modal:is(.entry-sheet, .transaction-editor, .ledger-editor) {
  border-radius: 26px !important;
}

.transaction-form-grid > label {
  align-content: start;
  align-self: start;
}

.transaction-editor select, .entry-sheet select {
  letter-spacing: 0;
  letter-spacing: -.1px;
  letter-spacing: -.15px;
  background-position: right 8px center;
  font-weight: 700;
  text-overflow: clip !important;
  padding-left: 8px !important;
  padding-right: 18px !important;
  font-size: 11.5px !important;
}

.app-shell[data-tone="neutral"] {
  --pt: #2f4fc0;
  --pt-soft: #5b78e6;
  --pt-glow: 47,79,192;
  --violet: #2f4fc0;
  --violet-soft: #e7eefc;
}

.modal.dialog-security .delete-transaction-name {
  color: var(--fu-sub);
  margin: 2px 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.modal.dialog-security .delete-actions {
  gap: 10px;
  display: flex;
}

.modal.dialog-security .delete-actions button {
  min-height: 42px;
  font: 800 13px var(--font-home);
  cursor: pointer;
  border-radius: 999px;
  flex: 1 1 0;
}

.modal.dialog-security .keep-action {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
}

.modal.dialog-security .danger-action {
  color: #fff;
  background: linear-gradient(145deg, #d9506c, #be3552);
  border: 1px solid #ffffff2e;
  box-shadow: 0 10px 20px -8px #be355299, inset 0 1px #ffffff38;
}

.app-shell .modal-backdrop .modal.modal:is(.dialog-delete-confirm, .dialog-confirm-delete-saving, .dialog-confirm-delete-goal, .delete-transaction-confirm, .signout-confirm, .dialog-member-confirm) > .modal-close {
  display: none !important;
}

.app-shell .modal-backdrop .modal.modal:has( > .delete-actions) > .modal-close {
  display: none !important;
}

.app-shell .modal-backdrop .modal.modal:has( > form > .delete-actions) > .modal-close {
  display: none !important;
}

.modal:is(.dialog-delete-confirm, .dialog-confirm-delete-saving, .dialog-confirm-delete-goal, .delete-transaction-confirm, .signout-confirm, .dialog-member-confirm) {
  padding-top: 18px !important;
}

.modal:has( > .delete-actions) {
  padding-top: 18px !important;
}

.modal:is(.dialog-delete-confirm, .dialog-confirm-delete-saving, .dialog-confirm-delete-goal, .delete-transaction-confirm, .signout-confirm, .dialog-member-confirm) > :is(h2, .section-tag):first-of-type {
  margin-top: 0;
}

.modal:has( > .delete-actions) > h2:first-of-type {
  margin-top: 0;
}

.app-shell[data-page="Track"] .track-area {
  color: #5ee0d6;
  flex: none;
  width: clamp(128px, 40vw, 158px);
  position: relative;
}

.app-shell[data-page="Track"] .track-area.spend {
  color: #ff8fa5;
}

.app-shell[data-page="Track"] .track-area.lend {
  color: #7fb8ff;
}

.app-shell[data-page="Track"] .track-area svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.app-shell[data-page="Track"] .track-area-base {
  stroke: #ffffff29;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.app-shell[data-page="Track"] .track-area-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1px;
  filter: drop-shadow(0 0 5px);
  animation: 1.1s cubic-bezier(.3, .7, .2, 1) .35s forwards fu-line;
}

.app-shell[data-page="Track"] .track-area-fill {
  opacity: 0;
  animation: .8s .8s forwards fu-fade;
}

.app-shell[data-page="Track"] .track-area-dot {
  fill: #fff;
  opacity: 0;
  animation: .35s 1.15s forwards fu-fade;
}

.app-shell[data-page="Track"] .track-area-dot.current {
  fill: #fff;
  filter: drop-shadow(0 0 6px) drop-shadow(0 0 12px);
}

.app-shell[data-page="Track"] .track-area-labels {
  letter-spacing: .02em;
  color: #9fb0d3;
  justify-content: space-between;
  margin-top: 2px;
  padding: 0 1px;
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
}

.app-shell[data-page="Track"] .track-area-labels .now {
  color: #fff;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-area {
  grid-area: 1 / 1 / span 2;
}

@keyframes fu-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fu-fade {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Track"] .track-area-line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .app-shell[data-page="Track"] .track-area-fill, .app-shell[data-page="Track"] .track-area-dot {
    opacity: 1;
    animation: none;
  }
}

.app-shell[data-page="Track"] .track-area {
  width: clamp(108px, 33vw, 128px);
}

.app-shell[data-page="Track"] .track-card .track-change, .app-shell[data-page="Track"] .track-card .track-amount {
  white-space: nowrap;
}

.app-shell[data-page="Track"] .lend-line {
  white-space: nowrap;
  font-size: 11px;
}

.app-shell[data-page="Track"] .track-area-labels {
  font-size: 8px;
}

.app-shell[data-page="Track"] .track-card .track-options button {
  border-radius: 12px;
  gap: 1px;
  min-height: clamp(40px, 5.3dvh, 44px);
  padding: 3px 2px;
}

.app-shell[data-page="Track"] .track-card .track-options .app-icon {
  width: clamp(18px, 5.2vw, 21px) !important;
  height: clamp(18px, 5.2vw, 21px) !important;
}

.app-shell[data-page="Track"] .track-options button {
  font-size: clamp(10.5px, 3vw, 11.5px);
}

.app-shell[data-page="Track"] .track-card .track-options {
  gap: 6px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-change {
  font-size: 10.5px;
}

.app-shell[data-page="Track"] .track-home {
  flex-direction: column;
  min-height: calc(100dvh - 114px);
  display: flex;
}

.app-shell[data-page="Track"] .track-cards {
  flex: auto;
  grid-template-rows: repeat(3, minmax(min-content, 1fr));
  grid-auto-rows: auto;
  gap: clamp(6px, 1.2dvh, 12px);
  min-height: 0;
  display: grid;
}

.app-shell[data-page="Track"] .track-card {
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(4px, .9dvh, 10px);
  min-height: 0;
  display: flex;
}

.app-shell[data-page="Track"] .track-lend-slot {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.app-shell[data-page="Track"] .track-lend-slot > .track-card {
  flex: auto;
}

.app-shell[data-page="Track"] .track-pulse {
  flex: auto;
  justify-content: space-between;
}

.app-shell[data-page="Track"] .track-plot {
  height: clamp(38px, 6.8dvh, 80px);
  position: relative;
}

.app-shell[data-page="Track"] .track-plot svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.app-shell[data-page="Track"] .track-area-now {
  opacity: 0;
  background: #fff;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: .35s 1.15s forwards fu-fade;
  position: absolute;
  box-shadow: 0 0 6px, 0 0 14px;
}

.app-shell[data-page="Track"] .track-card:not(.lend) .track-amount {
  font-size: clamp(15px, 2.3dvh, 20px);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-page="Track"] .track-area-now {
    opacity: 1;
    animation: none;
  }
}

.app-shell[data-page="Track"] .track-plot {
  height: clamp(34px, 5.2dvh, 66px);
}

.app-shell[data-page="Track"] .track-card .track-options button {
  min-height: clamp(36px, 4.8dvh, 54px);
}

.app-shell[data-page="Track"] .track-card {
  padding-top: 8px;
  padding-bottom: 8px;
}

.app-shell[data-page="Track"] .track-pulse {
  gap: clamp(3px, .6dvh, 6px);
}

.app-shell[data-page="Track"] .track-title-group {
  align-items: center;
  gap: 8px;
  display: inline-flex;
  position: relative;
}

.app-shell[data-page="Track"] .track-info {
  color: #fff;
  width: 20px;
  height: 20px;
  font: italic 800 12px/1 var(--font-home);
  cursor: pointer;
  background: #ffffff24;
  border: 1px solid #ffffff59;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
  box-shadow: inset 0 1px #ffffff40;
}

.app-shell[data-page="Track"] .track-info:after {
  content: "";
  position: absolute;
  inset: -12px;
}

.app-shell[data-page="Track"] .track-info-tip {
  z-index: 6;
  color: #e6ecfa;
  width: max-content;
  max-width: min(230px, 66vw);
  font: 600 11.5px/1.35 var(--font-home);
  background: #091434f5;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
  padding: 8px 11px;
  animation: .25s cubic-bezier(.34, 1.56, .64, 1) both fu-pop;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  box-shadow: 0 14px 26px -10px #000000a6;
}

.app-shell[data-page="Track"] .track-info-tip:before {
  content: "";
  background: #091434f5;
  border-top: 1px solid #ffffff2e;
  border-left: 1px solid #ffffff2e;
  width: 9px;
  height: 9px;
  position: absolute;
  top: -5px;
  left: 34px;
  transform: rotate(45deg);
}

.app-shell[data-page="Track"] .track-card.lend .track-title-group > h2 {
  color: #fff;
  text-shadow: none;
  font-family: var(--font-home);
  letter-spacing: .14em;
  background: linear-gradient(145deg, #4c93d6, #2a74bd);
  border-radius: 8px;
  align-items: center;
  margin: 0;
  padding: 2px 10px;
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 800;
  display: inline-flex;
  box-shadow: 0 6px 14px -6px #2a74bde6, inset 0 1px #ffffff4d;
}

.app-shell[data-page="Track"] .track-info {
  width: 22px;
  height: 22px;
  font: inherit;
  background: linear-gradient(145deg, #ffffff4d, #ffffff1a);
  border: 1px solid #ffffff6b;
  transition: box-shadow .2s, background .2s;
  box-shadow: inset 0 1px #ffffff59, 0 0 10px #7fb8ff73;
}

.app-shell[data-page="Track"] .track-info svg {
  fill: #fff;
  filter: drop-shadow(0 0 2px #fff9);
  width: 12px;
  height: 12px;
}

.app-shell[data-page="Track"] .track-info[aria-expanded="true"] {
  background: linear-gradient(145deg, #ffffff80, #ffffff38);
  box-shadow: inset 0 1px #ffffff80, 0 0 14px #7fb8ffcc;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell[data-page="Track"] .track-info:hover {
    box-shadow: inset 0 1px #fff6, 0 0 0 4px #ffffff1f, 0 0 14px #7fb8ffb3;
  }
}

.app-shell[data-page="Track"] .track-info-tip:before {
  left: 75px;
}

.app-shell[data-page="Track"] .track-info-wrap {
  place-items: center;
  display: inline-grid;
  position: relative;
}

.app-shell[data-page="Track"] .track-info-wrap .track-info-tip {
  margin-left: -26px;
  top: calc(100% + 9px);
  left: 50%;
}

.app-shell[data-page="Track"] .track-info-wrap .track-info-tip:before {
  top: -5px;
  left: 21.5px;
}

.home-insights-stats > div {
  position: relative;
}

.home-info-wrap {
  vertical-align: middle;
  place-items: center;
  margin-left: 5px;
  display: inline-grid;
  position: relative;
}

.home-info {
  cursor: pointer;
  background: #2f4fc01a;
  border: 1px solid #2f4fc04d;
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  transition: background .2s, box-shadow .2s;
  display: grid;
  position: relative;
}

.home-info:after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

.home-info svg {
  fill: #2f4fc0;
  width: 9px;
  height: 9px;
}

.home-info[aria-expanded="true"] {
  background: #2f4fc038;
  box-shadow: 0 0 0 3px #2f4fc01f;
}

.home-info-tip {
  z-index: 8;
  color: #e6ecfa;
  width: max-content;
  max-width: min(190px, 52vw);
  font: 600 11px/1.35 var(--font-home);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  background: #091434f5;
  border: 1px solid #ffffff29;
  border-radius: 12px;
  padding: 8px 10px;
  animation: .25s cubic-bezier(.34, 1.56, .64, 1) both fu-pop;
  position: absolute;
  top: calc(100% + 8px);
  box-shadow: 0 14px 26px -10px #050f3399;
}

.home-info-tip.left {
  left: -30px;
}

.home-info-tip.right {
  right: -14px;
}

.home-info-tip:before {
  content: "";
  background: #091434f5;
  border-top: 1px solid #ffffff29;
  border-left: 1px solid #ffffff29;
  width: 9px;
  height: 9px;
  position: absolute;
  top: -5px;
  transform: rotate(45deg);
}

.home-info-tip.left:before {
  left: 33.5px;
}

.home-info-tip.right:before {
  right: 17.5px;
}

.home-info-tip {
  top: auto;
  bottom: calc(100% + 8px);
}

.home-info-tip:before {
  border: 1px solid #ffffff29;
  border-top: 0;
  border-left: 0;
  top: auto;
  bottom: -5px;
}

.app-shell .swipe-row-surface > button:hover, .app-shell .transaction-rows > .log-row:hover, .app-shell .modal .swipe-row-surface > button:hover, .app-shell .modal .transaction-rows > .log-row:hover, .app-shell.app-shell[data-tone] .modal .swipe-row-surface > button:hover, .app-shell.app-shell[data-tone] .modal .transaction-rows > .log-row:hover, .app-shell.app-shell[data-page="Guidance"] .modal .swipe-row-surface > button:hover, .app-shell.app-shell[data-page="Guidance"] .modal .transaction-rows > .log-row:hover, .app-shell.app-shell[data-page="Toolbox"] .modal .swipe-row-surface > button:hover, .app-shell.app-shell[data-page="Toolbox"] .modal .transaction-rows > .log-row:hover {
  border-color: #e5dfeb !important;
  transform: none !important;
  box-shadow: 0 7px 18px #33275007 !important;
}

:is(.app-shell, .auth-page, .modal-backdrop) :is(input, select, textarea):focus-visible {
  outline: 0 !important;
}

.app-shell .quick-add-fab .quick-add-fab-options, .app-shell .quick-add-fab .quick-add-fab-options > button.quick-add-fab-option {
  pointer-events: none;
}

.app-shell .quick-add-fab.expanded .quick-add-fab-options > button.quick-add-fab-option, .app-shell .quick-add-fab[data-open="true"] .quick-add-fab-options > button.quick-add-fab-option {
  pointer-events: auto;
}

.onb-shell {
  height: 100dvh;
  min-height: 0;
  padding: max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));
  scrollbar-width: none;
  background: radial-gradient(circle at 8% 0, #2f4fc08c, #0000 48%), radial-gradient(circle at 100% 100%, #2a74bd73, #0000 52%), radial-gradient(circle at 100% 0, #1f7a7847, #0000 46%), linear-gradient(165deg, #070f2b 0%, #0e1e55 55%, #122a73 100%);
  gap: 8px;
  overflow: hidden auto;
}

.onb-shell::-webkit-scrollbar {
  display: none;
}

.onb-shell .onb-glow {
  background: conic-gradient(from 200deg at 20% 0, #0000, #7896ff38, #0000 30%, #2a74bd33, #0000 60%);
}

.onb-shell .onb-stepper {
  margin: 0;
}

.onb-shell .onb-line {
  height: 3px;
  top: 14px;
}

.onb-shell .onb-line i {
  background: linear-gradient(90deg, #7c97ff, #2f4fc0);
  box-shadow: 0 0 12px #7c97ffcc;
}

.onb-shell .onb-step small {
  display: none;
}

.onb-shell .onb-step b {
  margin-top: 3px;
  font-size: 10.5px;
}

.onb-shell .onb-step.done .onb-dot {
  background: linear-gradient(145deg, #7c97ff, #2f4fc0);
  box-shadow: 0 0 14px #7c97ffb3, inset 0 0 0 2px #ffffff73;
}

.onb-shell .onb-step.current .onb-dot {
  background: radial-gradient(circle at 30% 25%, #a9bbff, #4a68db 45%, #2f4fc0);
  width: 33px;
  height: 33px;
  margin-top: -2px;
  animation: none;
  box-shadow: 0 0 0 3px #0a1440, 0 0 0 5px #7c97ff, 0 0 22px #7c97ffcc;
}

.onb-shell .onb-body {
  flex: auto;
  gap: 6px;
  min-height: 0;
}

.onb-shell .onb-back {
  background: #ffffff1f;
  padding: 5px 12px;
  font-size: 12px;
  box-shadow: inset 0 1px #ffffff40, inset 0 0 0 1px #ffffff24;
}

.onb-shell .onb-card {
  background: linear-gradient(160deg, #ffffff29, #ffffff0f);
  border-color: #ffffff38;
  border-radius: 24px;
  flex-direction: column;
  flex: auto;
  padding: 14px 14px 12px;
  display: flex;
  box-shadow: 0 26px 50px -20px #03081ecc, inset 0 1px #ffffff4d;
}

.onb-shell .onb-form {
  flex-direction: column;
  flex: auto;
  gap: 9px;
  display: flex;
}

.onb-shell .onb-card h1 {
  margin: 0;
  font-size: 20px;
}

.onb-shell .onb-card label {
  color: #dce6ff;
  gap: 4px;
  font-size: 12px;
}

.onb-shell .onb-card input, .onb-shell .onb-card select {
  background: #ffffff1a;
  border-color: #fff3;
  height: 40px;
  font-size: 14px;
}

.onb-shell .onb-card .money-field {
  background: #ffffff1a;
  border-color: #fff3;
  height: 40px;
}

.onb-shell .onb-card .who-avatar-hero {
  background: #ffffff24;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

.onb-shell .onb-card .who-gender-row button {
  color: #dce6ff;
  background: #ffffff1a;
  border-color: #fff3;
  min-height: 34px;
  font-size: 12.5px;
}

.onb-shell .onb-card .who-gender-row button.selected {
  background: linear-gradient(145deg, #5a78ee, #2f4fc0);
  border-color: #7c97ff;
  box-shadow: 0 0 16px #7c97ff8c;
}

.onb-shell .avatar-category-buttons {
  gap: 5px;
  margin: 0;
}

.onb-shell .avatar-category-buttons button {
  color: #dce6ff;
  background: #ffffff24;
  border-color: #fff3;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11.5px;
}

.onb-shell .avatar-category-buttons button[aria-pressed="true"] {
  color: var(--fu-ink);
  background: #fff;
  border-color: #fff;
}

.onb-shell .avatar-choice-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.onb-shell .avatar-choice-grid button {
  background: linear-gradient(160deg, #fff, #eaf1fb);
  border-color: #0000;
  border-radius: 14px;
  padding: 3px;
}

.onb-shell .avatar-choice-grid button[aria-pressed="true"] {
  border-color: #7c97ff;
  box-shadow: 0 0 0 3px #7c97ff73;
}

.onb-shell .avatar-choice-grid img {
  max-height: 64px;
  margin: 0 auto;
}

.onb-shell .avatar-choice-grid span {
  display: none;
}

.onb-shell .avatar-choice-grid i {
  background: #2f4fc0;
  width: 16px;
  height: 16px;
  font-size: 10px;
  top: 3px;
  right: 3px;
}

.onb-shell .onb-card .dob-selects {
  background: #ffffff14;
  border-color: #ffffff2e;
  gap: 5px;
  padding: 5px;
}

.onb-shell .onb-card .dob-selects select {
  height: 34px;
  font-size: 13px;
}

.onb-shell .onb-card .field-help {
  color: #b9c8f0;
  margin: 0;
  font-size: 9px;
}

.onb-shell .onb-card .money-left-track span {
  background: linear-gradient(90deg, #7c97ff, #2f4fc0);
}

.onb-shell .onb-card .smart-plan-methods button {
  background: #ffffff1a;
  border-color: #fff3;
}

.onb-shell .onb-card .smart-plan-methods button.active {
  background: #7c97ff38;
  border-color: #7c97ff;
  box-shadow: 0 0 18px #7c97ff8c;
}

.onb-shell .onb-card .auth-error {
  padding: 6px 10px;
  font-size: 12px;
}

.onb-shell .onb-card .auth-submit {
  z-index: 5;
  height: 46px;
  color: var(--fu-ink);
  background: linear-gradient(#fff, #dce6f8);
  border: 1px solid #fffffff2;
  margin-top: auto;
  font-size: 15px;
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 0 8px #09123a8c, 0 12px 24px -10px #7c97ffe6, inset 0 1px #fff;
}

@media (hover: hover) and (pointer: fine) {
  .onb-shell .onb-card .auth-submit:hover {
    box-shadow: 0 0 0 8px #09123a8c, 0 0 0 12px #7c97ff40, 0 14px 26px -10px #7c97ff, inset 0 1px #fff;
  }
}

@media (max-height: 720px) {
  .onb-shell .onb-card .who-avatar-hero {
    width: 44px;
    height: 44px;
  }

  .onb-shell .avatar-choice-grid img {
    max-height: 52px;
  }

  .onb-shell .onb-form {
    gap: 7px;
  }
}

.onb-shell {
  --onb-gap: clamp(7px,1.5dvh,14px);
  padding-top: max(clamp(8px,1.4dvh,16px),env(safe-area-inset-top));
  padding-bottom: max(clamp(8px,1.4dvh,16px),env(safe-area-inset-bottom));
}

.onb-shell .onb-body {
  gap: clamp(5px, .9dvh, 10px);
}

.onb-shell .onb-dot {
  width: clamp(26px, 3.8dvh, 34px);
  height: clamp(26px, 3.8dvh, 34px);
  font-size: clamp(12px, 1.8dvh, 15px);
}

.onb-shell .onb-step.current .onb-dot {
  width: clamp(30px, 4.4dvh, 38px);
  height: clamp(30px, 4.4dvh, 38px);
}

.onb-shell .onb-line {
  top: clamp(12px, 1.8dvh, 16px);
}

.onb-shell .onb-step b {
  font-size: clamp(10px, 1.5dvh, 12px);
}

.onb-shell .onb-back {
  padding: 4px 11px;
  font-size: 11.5px;
}

.onb-shell .onb-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(160deg, #ffffff1f, #ffffff0d);
  border: 1px solid #fff3;
  border-radius: 22px;
  padding: clamp(12px, 1.8dvh, 18px) clamp(12px, 3.6vw, 18px) clamp(10px, 1.5dvh, 16px);
  box-shadow: inset 0 1px #ffffff38;
}

.onb-shell .onb-form {
  gap: var(--onb-gap);
}

.onb-shell .onb-card h1 {
  letter-spacing: -.02em;
  font-size: clamp(18px, 2.8dvh, 23px);
}

.onb-shell .onb-card label {
  gap: clamp(3px, .6dvh, 6px);
  font-size: clamp(11.5px, 1.6dvh, 13.5px);
}

.onb-shell .onb-card input, .onb-shell .onb-card select, .onb-shell .onb-card .money-field {
  border: 1px solid #ffffff42;
  border-radius: 12px;
  height: clamp(38px, 5.2dvh, 46px);
  font-size: clamp(13.5px, 1.85dvh, 15.5px);
}

.onb-shell .onb-card .who-avatar-hero {
  width: clamp(44px, 7.4dvh, 68px);
  height: clamp(44px, 7.4dvh, 68px);
}

.onb-shell .onb-card .who-gender-row {
  gap: 6px;
}

.onb-shell .onb-card .who-gender-row button {
  border-radius: 12px;
  min-height: clamp(32px, 4.4dvh, 40px);
  font-size: clamp(12px, 1.75dvh, 14px);
}

.onb-shell .avatar-category-buttons button {
  min-height: clamp(26px, 3.5dvh, 32px);
  padding: 3px 10px;
  font-size: clamp(11px, 1.6dvh, 13px);
}

.onb-shell .avatar-choice-grid {
  gap: clamp(5px, .9dvh, 8px);
}

.onb-shell .avatar-choice-grid button {
  border-radius: 12px;
  padding: 2px;
}

.onb-shell .avatar-choice-grid img {
  max-height: clamp(46px, 8.6dvh, 72px);
}

.onb-shell .onb-card .dob-selects {
  gap: 4px;
  padding: 4px;
}

.onb-shell .onb-card .dob-selects select {
  height: clamp(32px, 4.6dvh, 40px);
}

.onb-shell .onb-card .auth-submit {
  height: clamp(44px, 5.8dvh, 52px);
  font-size: clamp(14.5px, 2dvh, 16.5px);
  box-shadow: 0 0 0 6px #09123a80, 0 8px 18px -8px #7c97ffcc, inset 0 1px #fff;
}

.onb-shell .onb-card .smart-plan-methods {
  gap: 6px;
}

.onb-shell .onb-card .smart-plan-methods button {
  border-radius: 14px;
  justify-content: center;
  min-height: clamp(74px, 12dvh, 110px);
}

.onb-shell .onb-card .smart-plan-methods strong {
  font-size: clamp(13.5px, 2dvh, 17px);
}

.onb-shell .onb-card .smart-plan-methods small {
  font-size: clamp(10px, 1.5dvh, 12px);
}

.onb-shell .onb-card .available-accounts-editor {
  border-radius: 14px;
  min-height: 0;
  padding: clamp(10px, 1.6dvh, 14px) 14px;
}

.onb-shell .onb-card .plan-tip {
  font-size: clamp(10.5px, 1.55dvh, 12.5px);
}

.onb-shell {
  --onb-gap: clamp(7px,1.8dvh,18px);
}

.onb-shell .onb-form:has(.who-avatar-hero) {
  justify-content: space-between;
}

.onb-shell .onb-form:has(.who-avatar-hero) > .auth-submit {
  margin-top: 0;
}

.onb-shell .onb-card .smart-plan-methods button {
  min-height: clamp(74px, 15dvh, 140px);
}

.onb-shell .onb-card .available-accounts-editor {
  align-items: center;
  min-height: clamp(64px, 10dvh, 110px);
  display: flex;
}

:root[data-perf] .final-aurora i, :root[data-perf] .app-shell:before, :root[data-perf] .app-shell:after, :root[data-perf] .auth-page .auth-hero:before, :root[data-perf] .auth-page .auth-hero:after, :root[data-perf] .onb-glow, :root[data-perf] .onb-step.current .onb-dot, :root[data-perf] .app-shell[data-page="Home"] .money-pulse-card:before, :root[data-perf] .app-shell[data-page="Track"] .track-card:before, :root[data-perf] .app-shell[data-page="Guidance"] .lend-card:before, :root[data-perf] .app-shell[data-tone="lend"] .lend-card:before, :root[data-perf] .app-shell[data-page="Toolbox"] .toolbox-card:before, :root[data-perf] .app-shell .quick-add-fab .quick-add-fab-main, :root[data-perf] .app-shell .quick-add-fab .quick-add-fab-main:after, :root[data-perf] .app-shell .quick-add-fab .quick-add-fab-main:before {
  animation: none !important;
}

:root[data-perf] .app-shell[data-page="Track"] .track-seal {
  animation: .7s cubic-bezier(.3, 1.5, .5, 1) .9s both fu-stamp !important;
}

:root[data-perf] :is(.money-pulse-card, .metric-card, .home-visual-grid > article, .family-visual-grid article, .money-flow > div, .money-flow > button, .lend-card, .lend-ticket, .onb-card, .auth-tags span, .app-shell[data-page="Home"] .home-insights, .app-shell[data-page="Track"] .track-options button, .app-shell[data-page="Toolbox"] .tool-tile, .app-shell:is([data-tone], [data-page="Guidance"], [data-page="Toolbox"]) .modal .metric-card, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .modal .lender-topbar), :root[data-perf="lite"] .app-shell .mobile-nav.v2-mobile-nav, :root[data-perf="lite"] .mobile-nav, :root[data-perf="lite"] .home-space-pill, :root[data-perf="lite"] .quick-add-scrim, :root[data-perf="lite"] .modal-backdrop, :root[data-perf="lite"] .track-popup .modal-backdrop, :root[data-perf="lite"] .tour-backdrop, :root[data-perf="lite"] .lender-request-overlay, :root[data-perf="lite"] .startup-actions button, :root[data-perf="lite"] .celebration-eyebrow {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root[data-perf="lite"] .modal .modal-backdrop:has( > .nested-popup) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root[data-perf="lite"] .avatar-dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-perf="lite"] .app-shell .mobile-nav.v2-mobile-nav {
  background: #fffffff0 !important;
}

:root[data-perf="lite"] .app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-space-pill {
  background: #ffffffeb;
}

:root[data-perf="lite"] .modal-backdrop {
  background-color: #0e14329e;
}

:root[data-perf="lite"] .quick-add-scrim {
  background: #0a18388c;
}

:root[data-perf="lite"] .app-shell[data-page="Track"] .track-lend-slot.lend-blurred {
  filter: none;
  opacity: .35;
}

:root[data-perf="lite"] .final-aurora i, :root[data-perf="lite"] .app-shell:before, :root[data-perf="lite"] .app-shell:after {
  opacity: .6;
}

:root[data-perf="lite"] *, :root[data-perf="lite"] :before, :root[data-perf="lite"] :after {
  will-change: auto !important;
}

:root[data-perf] .quick-add-scrim {
  visibility: hidden;
  transition: opacity .28s, visibility 0s .28s;
}

:root[data-perf] .quick-add-scrim.show {
  visibility: visible;
  transition-delay: 0s;
}

:root[data-fx="flat"] *, :root[data-fx="flat"] :before, :root[data-fx="flat"] :after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (max-width: 620px) {
  .app-shell {
    --fu-nav-right-with-fab: 74px;
  }

  .app-shell .mobile-nav.v2-mobile-nav {
    height: 52px !important;
    padding: 5px !important;
  }

  .app-shell .mobile-nav.v2-mobile-nav button {
    min-height: 42px;
  }

  .app-shell .mobile-nav.v2-mobile-nav .nav-pill {
    top: 5px;
    bottom: 5px;
  }

  .app-shell .quick-add-fab {
    width: 52px;
    height: 52px;
  }
}

.app-shell .quick-add-fab .quick-add-fab-main {
  width: 52px;
  height: 52px;
}

:is(.app-shell[data-page="Track"], .app-shell[data-tone], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .modal :is(.swipe-row-surface > button, .log-row) > span.transaction-kind {
  text-overflow: clip;
  overflow: visible;
}

.app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .content {
  padding-top: 0 !important;
}

:root[data-perf="lite"] :is(.app-shell .page-chrome .home-header, .app-shell:is([data-page="Guidance"], [data-tone="lend"]) .lend-card, .app-shell:is([data-page="Home"], [data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .home-notify-button, .app-shell:is([data-page="Track"], [data-page="Guidance"], [data-page="Toolbox"]) .page-chrome .home-space-pill, .app-shell:is([data-page="Track"], [data-page="Toolbox"]) :is(.track-options button, .tool-tile, .track-chips span, .lend-line), .app-shell[data-page="Home"] :is(.home-comparison-bars b, .home-insights, .money-flow > button, .money-flow > div, .home-comparison-tile, .pulse-balance .money-figure, .pulse-home > .home-comparison-card, .pulse-home > .money-pulse-card, .home-insights-bar i), .app-shell[data-page="Toolbox"] .toolbox-card, .app-shell[data-page="Track"] :is(.track-card, .track-area-dot, .track-area-fill, .track-area-now)) {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
}

:root[data-fx="flat"] :is(.app-shell[data-page="Home"], .app-shell[data-page="Track"], .app-shell[data-page="Guidance"], .app-shell[data-page="Toolbox"]) .page-chrome {
  box-shadow: 0 0 0 100vmax #dcecfb !important;
}

:root[data-fx="flat"] :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], button.selected, button.active):not(.mobile-nav button):not(.nav-item):not(.home-info):not(.home-space-pill button):not(.space-pill) {
  box-shadow: 0 0 0 3px #2f4fc066 !important;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-badge {
  padding: 1px 5px;
  font-size: 7.5px;
  line-height: 1.2;
  top: 3px;
  right: 3px;
}

.app-shell[data-page="Toolbox"] .tool-tile > .tool-chip, .app-shell[data-page="Toolbox"] .tool-tile > .tool-label, .app-shell[data-page="Toolbox"] .tool-tile > .tool-hint {
  flex: none;
}

.app-shell[data-page="Toolbox"] .tool-tile .tool-chip {
  width: clamp(34px, min(11vw, 6dvh), 46px);
  height: clamp(34px, min(11vw, 6dvh), 46px);
}

.app-shell[data-page="Toolbox"] .toolbox-card .tool-grid {
  grid-auto-rows: minmax(clamp(96px, 33.3333dvh - 160.667px, 132px), auto);
}

.coach-root {
  z-index: 120;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.coach-dim {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: auto;
  background: #101c464d;
  animation: .3s both coach-fade;
  position: fixed;
}

.coach-hole {
  pointer-events: auto;
  position: fixed;
}

.coach-ring {
  pointer-events: none;
  border: 2px solid #fffffff2;
  border-radius: 18px;
  outline: 5px solid #ffffff47;
  animation: .3s both coach-fade;
  position: fixed;
}

.coach-card {
  text-align: center;
  width: min(320px, 100vw - 32px);
  color: var(--fu-ink);
  pointer-events: auto;
  background: linear-gradient(#fffffffa, #f0f6fff5);
  border: 1px solid #fffffff2;
  border-radius: 24px;
  padding: 18px 18px 12px;
  animation: .32s cubic-bezier(.2, .9, .3, 1) both coach-rise;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 18px 40px -18px #09143c80;
}

.coach-count {
  font: 800 11px var(--font-home),system-ui,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fu-sub);
  margin: 0 0 6px;
}

.coach-card h2 {
  font: 800 20px/1.2 var(--font-home),system-ui,sans-serif;
  letter-spacing: -.01em;
  color: var(--fu-ink);
  margin: 0 0 6px;
}

.coach-card p:not(.coach-count) {
  font: 600 14px/1.45 var(--font-home),system-ui,sans-serif;
  color: var(--fu-sub);
  margin: 0;
}

.coach-chips {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.coach-chips li {
  color: var(--fu-royal);
  font: 800 12px var(--font-home),system-ui,sans-serif;
  background: #2f4fc01a;
  border-radius: 999px;
  padding: 5px 11px;
}

.coach-actions {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  display: flex;
}

.coach-next {
  background: var(--fu-pill);
  color: #fff;
  min-height: 44px;
  font: 800 14px var(--font-home),system-ui,sans-serif;
  cursor: pointer;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 0 24px;
}

.coach-back {
  min-height: 44px;
  color: var(--fu-sub);
  font: 800 13px var(--font-home),system-ui,sans-serif;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 14px;
}

.coach-skip {
  min-height: 36px;
  color: var(--fu-sub);
  font: 700 12px var(--font-home),system-ui,sans-serif;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 4px auto 0;
  padding: 0 12px;
  text-decoration: underline;
}

@keyframes coach-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes coach-rise {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

:root[data-perf] .coach-dim {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #101c4680;
}

:root[data-fx="flat"] .coach-card {
  border-color: #2f4fc02e;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .coach-dim, .coach-ring, .coach-card {
    animation: none;
  }
}

.income-nudge {
  position: relative;
}

.income-nudge:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid #ffffffe6;
  animation: 2.2s ease-out infinite coach-nudge;
  position: absolute;
  inset: -4px;
}

@keyframes coach-nudge {
  0% {
    opacity: .9;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

:root[data-perf] .income-nudge:after {
  opacity: .8;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .income-nudge:after {
    opacity: .8;
    animation: none;
  }
}

.lender-family-tag {
  color: #1f6f55;
  letter-spacing: .02em;
  vertical-align: 1px;
  background: #1f7a7824;
  border-radius: 999px;
  margin-right: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  display: inline-block;
}

.plan-subscribed {
  color: #1f6f55;
  min-height: 44px;
  font: 800 14px var(--font-home),system-ui,sans-serif;
  text-align: center;
  background: linear-gradient(#f1fbf6, #ddf3e8);
  border: 1px solid #1f7a7847;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.plan-subscribed > div {
  text-align: left;
  gap: 2px;
  display: grid;
}

.plan-subscribed b {
  font-weight: 800;
}

.plan-subscribed small {
  font: 600 12px/1.35 var(--font-home),system-ui,sans-serif;
  color: #2f6f5c;
}

.trash-confirm {
  gap: 10px;
  display: grid;
}

.trash-confirm h2 {
  margin: 0;
}

.trash-confirm p {
  font: 600 14px/1.45 var(--font-home),system-ui,sans-serif;
  color: var(--fu-sub);
  margin: 0 0 6px;
}

.trash-confirm .delete-actions {
  gap: 10px;
  display: flex;
}

.trash-confirm .delete-actions button {
  min-height: 44px;
  font: 800 14px var(--font-home),system-ui,sans-serif;
  cursor: pointer;
  border-radius: 999px;
  flex: 1 1 0;
}

.trash-confirm .keep-action {
  background: var(--fu-pill);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--fu-glow),.6),inset 0 1px 0 #ffffff38;
  border: 1px solid #ffffff24;
}

.trash-confirm .danger-action {
  color: #fff;
  background: linear-gradient(145deg, #d9506c, #be3552);
  border: 1px solid #ffffff2e;
  box-shadow: 0 10px 20px -8px #be355299, inset 0 1px #ffffff38;
}

.trash-confirm .cancel-action {
  color: var(--fu-ink);
  background: linear-gradient(#fff, #eaf1fb);
  border: 1px solid #2f4fc02e;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__03m2sf_._.css.map*/