/* [project]/apps/web/src/app/globals.css [app-client] (css) */
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, 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;
    --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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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:where(:not(iframe)) {
    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 {
  .visible {
    visibility: visible;
  }

  .block {
    display: block;
  }
}

:root {
  --ink: #17352d;
  --muted: #71827c;
  --paper: #f7f4ec;
  --card: #ffffffd1;
  --line: #17352d1a;
  --green: #2f705b;
  --green-deep: #214f42;
  --mint: #dcece2;
  --surface: #fffdf8;
  --surface-solid: #fff;
  --surface-soft: #ffffffc7;
  --field: #fff;
  --form-bg: #f7f4ec99;
  --insight-bg: #e8efdc;
  --primary-bg: #214f42;
  --primary-hover: #173d33;
  --on-primary: #fff;
  --danger-soft: #f8e9e5;
  --readonly: #f0eee7;
  --body-glow: #ddeee4e6;
  --featured-from: #2b6352;
  --featured-to: #1f493e;
  --shadow: 0 18px 50px #23392f14;
}

html[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ink: #edf5f0;
  --muted: #a5b7af;
  --paper: #101713;
  --card: #1b2822e6;
  --line: #ddf0e61f;
  --green: #79c5a6;
  --green-deep: #99d8bd;
  --mint: #233c31;
  --surface: #18241f;
  --surface-solid: #1c2a24;
  --surface-soft: #1c2a24d1;
  --field: #14201b;
  --form-bg: #18241fc7;
  --insight-bg: #26372d;
  --primary-bg: #326e5a;
  --primary-hover: #3b8068;
  --on-primary: #f5fff9;
  --danger-soft: #442b29;
  --readonly: #202d27;
  --body-glow: #365e4b52;
  --featured-from: #326e5a;
  --featured-to: #214d40;
  --shadow: 0 18px 50px #0000004d;
}

html[data-palette="ocean"] {
  --ink: #17333e;
  --muted: #6c8089;
  --paper: #f1f7f9;
  --card: #fafdffd6;
  --line: #1e4e621f;
  --green: #39738d;
  --green-deep: #28566d;
  --mint: #dbeaf0;
  --surface: #f8fcfd;
  --surface-solid: #fff;
  --surface-soft: #f8fcfdd1;
  --field: #fbfeff;
  --form-bg: #ebf5f8b3;
  --readonly: #e7f0f3;
  --primary-bg: #28566d;
  --primary-hover: #1d4356;
  --insight-bg: #e2edf1;
  --body-glow: #b5deefbf;
  --featured-from: #39738d;
  --featured-to: #244d62;
  --shadow: 0 18px 50px #1f42511a;
}

html[data-palette="plum"] {
  --ink: #3a2938;
  --muted: #857382;
  --paper: #f8f2f7;
  --card: #fffbfed6;
  --line: #5b38571f;
  --green: #835d80;
  --green-deep: #64445f;
  --mint: #ede1ec;
  --surface: #fff9fe;
  --surface-solid: #fff;
  --surface-soft: #fffafed1;
  --field: #fffafd;
  --form-bg: #f4e9f2b3;
  --readonly: #f0e7ef;
  --primary-bg: #64445f;
  --primary-hover: #4e354b;
  --insight-bg: #eee5ec;
  --body-glow: #e1beddb3;
  --featured-from: #835d80;
  --featured-to: #5c4059;
  --shadow: 0 18px 50px #4a2d461a;
}

html[data-palette="amber"] {
  --ink: #3b2c1d;
  --muted: #877967;
  --paper: #faf5eb;
  --card: #fffcf6db;
  --line: #69461f1f;
  --green: #a1682b;
  --green-deep: #7c4d1f;
  --mint: #f3e5d0;
  --surface: #fffaf2;
  --surface-solid: #fff;
  --surface-soft: #fffbf4d4;
  --field: #fffcf7;
  --form-bg: #f7ecd7b3;
  --readonly: #f3eadc;
  --primary-bg: #875524;
  --primary-hover: #693f19;
  --insight-bg: #f0e6d4;
  --body-glow: #ecc88ead;
  --featured-from: #a86f31;
  --featured-to: #71451d;
  --shadow: 0 18px 50px #52391c1a;
}

html[data-palette="aurora"] {
  --ink: #203634;
  --muted: #70817f;
  --paper: #f0f7f6;
  --card: #f9fefdd6;
  --line: #2d5d581f;
  --green: #447d75;
  --green-deep: #315f59;
  --mint: #d9ebe8;
  --surface: #f8fcfb;
  --surface-solid: #fff;
  --surface-soft: #f8fdfcd1;
  --field: #fbfefd;
  --form-bg: #e7f3f0b3;
  --readonly: #e6f0ee;
  --primary-bg: #315f59;
  --primary-hover: #244b46;
  --insight-bg: #dfece8;
  --body-glow: #b8dcd7bf;
  --featured-from: #477e76;
  --featured-to: #5b496f;
  --shadow: 0 18px 50px #2348441a;
}

html[data-theme="dark"][data-palette="ocean"] {
  --ink: #edf6fa;
  --muted: #a4b8c1;
  --paper: #0d181e;
  --card: #16262feb;
  --line: #c6e4f121;
  --green: #84c5df;
  --green-deep: #acdcef;
  --mint: #253e49;
  --surface: #16262f;
  --surface-solid: #1a2d37;
  --surface-soft: #182b34d6;
  --field: #111f27;
  --form-bg: #12222acc;
  --readonly: #1d3038;
  --primary-bg: #376f88;
  --primary-hover: #4385a1;
  --insight-bg: #263943;
  --body-glow: #2a6c8a61;
  --featured-from: #376f88;
  --featured-to: #244d62;
}

html[data-theme="dark"][data-palette="plum"] {
  --ink: #f7eef6;
  --muted: #c0acbd;
  --paper: #181218;
  --card: #2a1e29eb;
  --line: #efd2eb21;
  --green: #d3a5cf;
  --green-deep: #e2bfe0;
  --mint: #443345;
  --surface: #2a1f29;
  --surface-solid: #322630;
  --surface-soft: #2f232ed6;
  --field: #211820;
  --form-bg: #251b24cc;
  --readonly: #392c38;
  --primary-bg: #765472;
  --primary-hover: #8c6388;
  --insight-bg: #3b303b;
  --body-glow: #7c437561;
  --featured-from: #825d7e;
  --featured-to: #543b51;
}

html[data-theme="dark"][data-palette="amber"] {
  --ink: #faf3e8;
  --muted: #c4b5a0;
  --paper: #19150f;
  --card: #2c2418eb;
  --line: #f0d7b221;
  --green: #e1b275;
  --green-deep: #efc995;
  --mint: #463824;
  --surface: #2b2419;
  --surface-solid: #342b1e;
  --surface-soft: #31281bd6;
  --field: #211b13;
  --form-bg: #272016cc;
  --readonly: #3a3022;
  --primary-bg: #8a5b28;
  --primary-hover: #a26d31;
  --insight-bg: #3c3427;
  --body-glow: #915b1f66;
  --featured-from: #9c672d;
  --featured-to: #68421c;
}

html[data-theme="dark"][data-palette="aurora"] {
  --ink: #eef7f6;
  --muted: #a8bcba;
  --paper: #10171a;
  --card: #19272aeb;
  --line: #cceae721;
  --green: #8ed1c6;
  --green-deep: #b2e4dc;
  --mint: #253f3b;
  --surface: #19292b;
  --surface-solid: #1e3033;
  --surface-soft: #1c2d2fd6;
  --field: #142124;
  --form-bg: #162426cc;
  --readonly: #233638;
  --primary-bg: #3d736b;
  --primary-hover: #4a887f;
  --insight-bg: #293b38;
  --body-glow: #5b45786b;
  --featured-from: #41776f;
  --featured-to: #665075;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

body {
  color: var(--ink);
  background: radial-gradient(circle at 75% 0%, var(--body-glow), transparent 28rem),
    var(--paper);
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 75% 0%, var(--body-glow), transparent 28rem),
    var(--paper);
}

button, input, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

input, select {
  color: var(--ink);
}

.shell {
  min-height: 100vh;
  padding-bottom: 5rem;
}

.topbar {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1180px;
  height: 78px;
  margin: auto;
  padding: 0 24px;
  display: grid;
}

.brand {
  color: var(--ink);
  letter-spacing: -.03em;
  align-items: center;
  gap: 11px;
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
  display: flex;
}

.brand-mark {
  background: var(--ink);
  color: #fff8dc;
  border-radius: 12px 12px 9px 9px;
  place-items: center;
  width: 35px;
  height: 35px;
  font-family: Georgia, serif;
  display: grid;
}

.topbar nav {
  align-items: center;
  gap: 30px;
  height: 100%;
  display: flex;
}

.topbar nav a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  position: relative;
}

.topbar nav a.active {
  color: var(--ink);
}

.topbar nav a.active:after {
  content: "";
  background: var(--green);
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: -29px;
  left: 0;
  right: 0;
}

.topbar-account {
  justify-self: end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.profile-switcher {
  position: relative;
}

.account-chip {
  border-left: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  display: flex;
}

.account-chip > span {
  max-width: 110px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 700;
  overflow: hidden;
}

.account-chip button, .account-chip a {
  color: var(--green);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: .7rem;
  font-weight: 800;
  text-decoration: none;
}

.account-chip button:hover, .account-chip a:hover {
  background: var(--surface-soft);
}

.profile {
  background: var(--surface-soft);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 4px 10px 4px 5px;
  display: flex;
}

.profile:hover, .profile[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--surface-solid);
}

.profile > span, .profile-menu button > span {
  background: #efe2b8;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 850;
  display: grid;
}

.profile b {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  font-size: .76rem;
  overflow: hidden;
}

.profile i {
  color: var(--muted);
  font-style: normal;
}

.profile-menu {
  z-index: 8;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 17px;
  width: 265px;
  padding: 9px;
  position: absolute;
  top: 49px;
  right: 0;
  box-shadow: 0 22px 55px #00000038;
}

.profile-menu > p {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 5px 8px 8px;
  font-size: .65rem;
  font-weight: 850;
}

.profile-menu-row {
  align-items: center;
  gap: 3px;
  display: flex;
}

.profile-menu button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  display: flex;
}

.profile-menu button:hover, .profile-menu button.selected {
  background: var(--paper);
}

.profile-menu .profile-choice {
  min-width: 0;
}

.profile-menu .delete-profile {
  color: #b43a34;
  text-align: center;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 900;
  display: grid;
}

.profile-menu .delete-profile:hover {
  background: var(--danger-soft);
  color: #d96f67;
}

.profile-menu .delete-profile:disabled {
  opacity: .45;
  cursor: wait;
}

.profile-menu button > span {
  background: var(--mint);
  width: 30px;
  height: 30px;
  color: var(--green-deep);
  border-radius: 9px;
}

.profile-menu button > b {
  flex: 1;
  font-size: .78rem;
}

.profile-menu button > i {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.profile-menu .new-profile {
  border-top: 1px solid var(--line);
  color: var(--green);
  border-radius: 0 0 11px 11px;
  margin-top: 6px;
  padding-top: 12px;
}

.profile-menu .new-profile > span {
  border: 1px dashed var(--green);
  background: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .profile-menu .new-profile > span {
    border: 1px dashed color-mix(in srgb, var(--green) 35%, transparent);
  }
}

.auth-shell {
  place-items: center;
  min-height: 100vh;
  padding: 28px 18px;
  display: grid;
}

.auth-card {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 28px;
  width: min(100%, 440px);
  padding: 34px;
  position: relative;
  box-shadow: 0 30px 80px #0000002e;
}

.auth-brand {
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
  display: flex;
}

.auth-brand > div {
  gap: 2px;
  display: grid;
}

.auth-brand strong {
  letter-spacing: -.02em;
}

.auth-brand small {
  color: var(--muted);
  font-size: .68rem;
}

.invite-badge {
  background: var(--mint);
  color: var(--green-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 99px;
  padding: 6px 9px;
  font-size: .6rem;
  font-weight: 850;
  position: absolute;
  top: 35px;
  right: 34px;
}

.auth-card h1 {
  margin-bottom: 12px;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
}

.auth-intro {
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.55;
}

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

.auth-card form label {
  color: var(--ink);
  gap: 7px;
  font-size: .75rem;
  font-weight: 750;
  display: grid;
}

.auth-card form label small {
  color: var(--muted);
  font-weight: 550;
}

.auth-card form input {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  border-radius: 12px;
  outline: none;
  padding: 13px 14px;
}

.auth-card form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .auth-card form input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 11%, transparent);
  }
}

.auth-card form input[readonly] {
  background: var(--readonly);
  color: var(--muted);
}

.auth-link {
  color: var(--green);
  cursor: pointer;
  background: none;
  border: 0;
  margin: 16px 14px 0 0;
  padding: 0;
  font-size: .75rem;
  font-weight: 750;
  display: inline-block;
}

.auth-warning, .auth-message {
  border-radius: 11px;
  margin: 17px 0 0;
  padding: 11px 13px;
  font-size: .74rem;
  line-height: 1.45;
}

.auth-warning {
  color: #78521e;
  background: #fff0da;
}

.auth-message {
  background: var(--mint);
  color: var(--green-deep);
}

.appearance-controls {
  align-items: center;
  gap: 7px;
  display: flex;
}

.auth-appearance-controls {
  z-index: 9;
  position: fixed;
  top: 20px;
  right: 20px;
}

.palette-picker {
  position: relative;
}

.palette-picker summary {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 5px 16px var(--ink);
  border-radius: 99px;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  font-size: .68rem;
  font-weight: 800;
  list-style: none;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .palette-picker summary {
    box-shadow: 0 5px 16px color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

.palette-picker summary::-webkit-details-marker {
  display: none;
}

.palette-picker summary:hover, .palette-picker[open] summary {
  border-color: var(--green);
}

.palette-picker summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.palette-picker summary > i {
  font-style: normal;
  transition: transform .15s;
}

.palette-picker[open] summary > i {
  transform: rotate(180deg);
}

.palette-swatch {
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 1px var(--line);
  border: 2px solid #ffffffb8;
  border-radius: 50%;
  flex: none;
  display: block;
}

.palette-swatch.forest {
  background: linear-gradient(135deg, #73b79c 50%, #285b4c 50%);
}

.palette-swatch.ocean {
  background: linear-gradient(135deg, #76bad8 50%, #28566d 50%);
}

.palette-swatch.plum {
  background: linear-gradient(135deg, #c798c3 50%, #64445f 50%);
}

.palette-swatch.amber {
  background: linear-gradient(135deg, #e0aa65 50%, #7c4d1f 50%);
}

.palette-swatch.aurora {
  background: linear-gradient(135deg, #79cabe 45%, #71577f 55%);
}

.palette-menu {
  z-index: 12;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  width: 205px;
  padding: 7px;
  position: absolute;
  top: 39px;
  right: 0;
  box-shadow: 0 18px 45px #0003;
}

.palette-menu button {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  display: flex;
}

.palette-menu button:hover, .palette-menu button.selected {
  background: var(--paper);
}

.palette-menu button b {
  flex: 1;
  font-size: .72rem;
}

.palette-menu button > i {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  width: 62px;
  height: 32px;
  color: var(--muted);
  box-shadow: 0 5px 16px var(--ink);
  border-radius: 99px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3px 7px;
  display: grid;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .theme-toggle {
    box-shadow: 0 5px 16px color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

.theme-toggle {
  cursor: pointer;
}

.theme-toggle span {
  z-index: 1;
  text-align: center;
  font-size: .72rem;
  line-height: 1;
  position: relative;
}

.theme-toggle i {
  z-index: 0;
  background: var(--surface-solid);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: transform .2s, background .2s;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 7px #1126203d;
}

.theme-toggle.dark i {
  background: var(--primary-bg);
  transform: translateX(30px);
}

.theme-toggle:hover {
  border-color: var(--green);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.loading-card {
  justify-content: center;
  align-items: center;
  gap: 13px;
  padding: 28px;
  display: flex;
}

.loading-card p {
  color: var(--muted);
  margin: 0;
  font-weight: 700;
}

.hero, .summary-grid, .income-section, .savings-section, .pockets-section, .history-section, .insight {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.hero {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 76px 24px 38px;
  display: flex;
}

.month-wheel {
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.month-wheel .eyebrow {
  text-align: center;
  min-width: 112px;
  margin: 0;
}

.month-wheel button {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  width: 29px;
  height: 29px;
  color: var(--green);
  cursor: pointer;
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.month-wheel button:disabled {
  opacity: .3;
  cursor: default;
}

.month-wheel > span {
  background: var(--readonly);
  color: var(--muted);
  border-radius: 99px;
  padding: 5px 9px;
  font-size: .64rem;
  font-weight: 750;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--green);
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 800;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  letter-spacing: -.055em;
  margin-bottom: 12px;
  font-family: Georgia, Times New Roman, serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: .98;
}

.lede {
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.primary {
  background: var(--primary-bg);
  color: var(--on-primary);
  box-shadow: 0 10px 25px var(--primary-bg);
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-weight: 750;
}

@supports (color: color-mix(in lab, red, red)) {
  .primary {
    box-shadow: 0 10px 25px color-mix(in srgb, var(--primary-bg) 30%, transparent);
  }
}

.primary {
  cursor: pointer;
  transition: transform .15s, background .15s;
}

.primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

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

.hero-actions button:disabled, .summary-action:disabled, .text-button:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

.secondary {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--green-deep);
  cursor: pointer;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 750;
}

.secondary:hover {
  background: var(--surface-solid);
  border-color: var(--green);
}

.undo-period {
  color: #9a4a43;
  border-color: #9a4a4347;
}

.undo-period:hover {
  color: #843d37;
  border-color: #9a4a43;
}

html[data-theme="dark"] .undo-period {
  color: #df958e;
}

html[data-theme="dark"] .undo-period:hover {
  color: #f1aaa3;
  border-color: #df958e;
}

.summary-grid {
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 14px;
  padding: 0 24px;
  display: grid;
}

.summary-card {
  border: 1px solid var(--line);
  background: var(--card);
  min-height: 154px;
  box-shadow: var(--shadow);
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  padding: 23px;
  display: flex;
}

.summary-card.featured {
  color: #fff;
  background: linear-gradient(135deg, var(--featured-from), var(--featured-to));
  border: 0;
}

.summary-card p {
  color: currentColor;
  opacity: .74;
  margin-bottom: 12px;
  font-size: .82rem;
  font-weight: 700;
}

.summary-card strong {
  letter-spacing: -.03em;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  display: block;
}

.summary-card > span {
  opacity: .66;
  margin-top: 8px;
  font-size: .78rem;
}

.summary-action {
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.summary-action:hover {
  border-color: var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .summary-action:hover {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
  }
}

.summary-action:hover {
  transform: translateY(-1px);
}

.meter {
  background: var(--ink);
  border-radius: 10px;
  height: 7px;
}

@supports (color: color-mix(in lab, red, red)) {
  .meter {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
  }
}

.meter {
  margin-top: 17px;
  overflow: hidden;
}

.meter span {
  border-radius: inherit;
  background: var(--green);
  height: 100%;
  display: block;
}

.income-section {
  padding: 70px 24px 0;
}

.income-card {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: var(--shadow);
  border-radius: 20px;
  overflow: hidden;
}

.income-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 15px 19px;
  display: grid;
}

.income-row:last-child {
  border-bottom: 0;
}

.income-icon {
  background: var(--mint);
  width: 34px;
  height: 34px;
  color: var(--green);
  border-radius: 11px;
  place-items: center;
  font-weight: 900;
  display: grid;
}

.income-row > div {
  gap: 3px;
  display: grid;
}

.income-row > div strong {
  font-size: .84rem;
}

.income-row small {
  color: var(--muted);
  text-transform: capitalize;
  font-size: .7rem;
}

.income-amount {
  color: var(--green-deep);
  font-family: Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
}

.empty-income {
  align-items: center;
  gap: 14px;
  padding: 24px;
  display: flex;
}

.empty-income > span {
  background: var(--mint);
  width: 40px;
  height: 40px;
  color: var(--green);
  border-radius: 13px;
  place-items: center;
  font-size: 1.2rem;
  display: grid;
}

.empty-income div {
  gap: 4px;
  display: grid;
}

.empty-income strong {
  font-size: .85rem;
}

.empty-income p {
  color: var(--muted);
  margin: 0;
  font-size: .76rem;
}

.savings-section {
  padding: 70px 24px 0;
}

.savings-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  display: grid;
}

.savings-card {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  width: 100%;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  border-radius: 20px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.savings-card:hover {
  border-color: var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .savings-card:hover {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
  }
}

.savings-card:disabled {
  opacity: .75;
  cursor: default;
}

.savings-status {
  color: #89702b;
  background: #f2e9c9;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 900;
  display: grid;
}

.savings-card.monthly-complete .savings-status {
  background: var(--mint);
  color: var(--green);
}

.savings-card.goal-complete {
  border-color: var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .savings-card.goal-complete {
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
  }
}

.savings-card.goal-complete .savings-status {
  background: var(--green);
  color: var(--on-primary);
  box-shadow: 0 0 0 5px var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .savings-card.goal-complete .savings-status {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 13%, transparent);
  }
}

.savings-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.savings-card small, .savings-card em {
  color: var(--muted);
  font-size: .68rem;
  font-style: normal;
}

.savings-copy > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
  overflow: hidden;
}

.savings-copy em {
  margin-top: 2px;
}

.savings-numbers {
  text-align: right;
  gap: 3px;
  min-width: 170px;
  display: grid;
}

.savings-numbers strong {
  white-space: nowrap;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.savings-numbers strong i, .savings-month strong i {
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .66rem;
  font-style: normal;
  font-weight: 650;
}

.savings-meter {
  background: var(--readonly);
  border-radius: 99px;
  grid-column: 2 / -1;
  height: 5px;
  overflow: hidden;
}

.savings-meter i {
  border-radius: inherit;
  background: var(--green);
  height: 100%;
  display: block;
}

.savings-month {
  border-top: 1px solid var(--line);
  grid-column: 2 / -1;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
  padding-top: 9px;
  display: grid;
}

.savings-month strong {
  font-size: .72rem;
}

.savings-month > b {
  background: var(--readonly);
  min-width: 29px;
  color: var(--muted);
  text-align: center;
  border-radius: 99px;
  padding: 3px 6px;
  font-size: .62rem;
}

.savings-month.complete > b {
  background: var(--mint);
  color: var(--green-deep);
}

.pockets-section {
  padding: 70px 24px 0;
}

.section-heading {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 22px;
  display: flex;
}

.section-actions {
  align-items: center;
  gap: 22px;
  display: flex;
}

.section-heading h2, .insight h2, .expense-dialog h2 {
  letter-spacing: -.035em;
  margin-bottom: 0;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
}

.text-button {
  color: var(--green);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px 0;
  font-weight: 750;
}

.pocket-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  display: grid;
}

.pocket-card {
  --tone: #dcece2;
  --tone-deep: #2f705b;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 22px;
}

.tone-blue {
  --tone: #dce8ee;
  --tone-deep: #416c7d;
}

.tone-plum {
  --tone: #ebe1eb;
  --tone-deep: #765771;
}

.tone-amber {
  --tone: #f0e6c9;
  --tone-deep: #8a6a29;
}

.pocket-title {
  align-items: center;
  gap: 13px;
  display: flex;
}

.pocket-title h3 {
  margin: 0 0 3px;
  font-size: 1rem;
}

.pocket-title p {
  color: var(--muted);
  margin: 0;
  font-size: .74rem;
}

.menu-wrap {
  margin-left: auto;
  position: relative;
}

.pocket-title .menu-trigger {
  color: var(--muted);
  cursor: pointer;
  letter-spacing: .08em;
  background: none;
  border: 0;
  padding: 8px;
}

.pocket-menu {
  z-index: 4;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  width: 210px;
  padding: 7px;
  position: absolute;
  top: 36px;
  right: 0;
  box-shadow: 0 18px 45px #0003;
}

.pocket-menu button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  width: 100%;
  margin: 0;
  padding: 10px;
  font-size: .8rem;
  display: block;
}

.pocket-menu button:hover {
  background: var(--paper);
  color: var(--green);
}

.pocket-menu .danger-item {
  border-top: 1px solid var(--line);
  color: #9a4a43;
  border-radius: 0 0 9px 9px;
  margin-top: 5px;
}

.pocket-icon {
  background: var(--tone);
  width: 42px;
  height: 42px;
  color: var(--tone-deep);
  border-radius: 14px;
  place-items: center;
  font-weight: 900;
  display: grid;
}

.pocket-balance {
  grid-template-columns: 1fr auto;
  align-items: baseline;
  margin-top: 26px;
  display: grid;
}

.pocket-balance > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
}

.pocket-balance strong {
  grid-column: 1;
  font-family: Georgia, serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.pocket-balance small {
  color: var(--muted);
  grid-area: 2 / 2;
}

.pocket-card .meter span {
  background: var(--tone-deep);
}

.child-list {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 9px;
}

.child-list button {
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  font-size: .79rem;
  display: flex;
}

.child-list button:hover span {
  color: var(--green);
}

.child-list span {
  color: var(--muted);
}

.child-list strong {
  font-weight: 700;
}

.history-section {
  padding: 76px 24px 0;
  scroll-margin-top: 20px;
}

.filter-label {
  color: var(--muted);
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 750;
  display: flex;
}

.filter-label select, .move-label select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
}

.history-card {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: var(--shadow);
  border-radius: 22px;
  overflow: hidden;
}

.transaction-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 86px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  display: grid;
}

.transaction-row:last-child {
  border-bottom: 0;
}

.transaction-date, .transaction-detail {
  gap: 3px;
  display: grid;
}

.transaction-date strong {
  text-transform: capitalize;
  font-size: .8rem;
}

.transaction-date span, .transaction-detail span {
  color: var(--muted);
  font-size: .7rem;
}

.transaction-detail strong, .transaction-amount {
  font-size: .9rem;
}

.transaction-amount {
  white-space: nowrap;
}

.transaction-lines {
  gap: 6px;
  margin-top: 8px;
  display: grid;
}

.transaction-line {
  background: var(--paper);
  border-radius: 11px;
  grid-template-columns: minmax(120px, 1fr) auto 190px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .transaction-line {
    background: color-mix(in srgb, var(--paper) 68%, transparent);
  }
}

.transaction-line > span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  overflow: hidden;
}

.transaction-line > strong {
  white-space: nowrap;
  font-size: .72rem;
}

.move-label {
  color: var(--muted);
  gap: 4px;
  font-size: .64rem;
  font-weight: 750;
  display: grid;
}

.move-label select {
  width: 100%;
  padding: 7px 8px;
  font-size: .72rem;
}

.transaction-delete {
  width: 32px;
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 50%;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
}

.transaction-delete:hover {
  background: var(--danger-soft);
  color: #c8665e;
  border-color: #9a4a4347;
}

.transaction-delete:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #9a4a43;
}

.transaction-delete:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-state > span {
  background: var(--mint);
  width: 42px;
  height: 42px;
  color: var(--green);
  border-radius: 50%;
  place-items: center;
  margin: 0 auto 14px;
  font-weight: 900;
  display: grid;
}

.empty-state h3 {
  margin-bottom: 6px;
}

.empty-state p {
  color: var(--muted);
  margin: 0;
  font-size: .83rem;
}

.insight {
  background: var(--insight-bg);
  border-radius: 24px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 70px;
  padding: 30px 34px;
  display: grid;
}

.insight-icon {
  background: var(--surface-solid);
  color: #7b873e;
  border-radius: 18px;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.4rem;
  display: grid;
}

.insight h2 {
  margin-bottom: 6px;
  font-size: 1.35rem;
}

.insight p:last-child {
  color: var(--muted);
  margin: 0;
  font-size: .86rem;
}

.dialog-backdrop {
  z-index: 10;
  background: var(--paper);
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .dialog-backdrop {
    background: color-mix(in srgb, var(--paper) 55%, transparent);
  }
}

.dialog-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.expense-dialog {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 25px;
  width: min(100%, 440px);
  padding: 31px;
  position: relative;
  box-shadow: 0 35px 90px #00000047;
}

.allocation-dialog {
  width: min(100%, 680px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.receipt-dialog {
  width: min(100%, 620px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.profile-dialog {
  width: min(100%, 460px);
}

.pocket-dialog {
  width: min(100%, 680px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.dialog-intro {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.5;
}

.dialog-close {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 1.7rem;
  position: absolute;
  top: 15px;
  right: 19px;
}

.expense-dialog form {
  gap: 17px;
  margin-top: 26px;
  display: grid;
}

.expense-dialog label {
  gap: 7px;
  font-size: .78rem;
  font-weight: 750;
  display: grid;
}

.expense-dialog input, .expense-dialog select {
  border: 1px solid var(--line);
  background: var(--field);
  width: 100%;
  color: var(--ink);
  border-radius: 12px;
  outline: 0;
  padding: 12px 13px;
}

.expense-dialog input:focus, .expense-dialog select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .expense-dialog input:focus, .expense-dialog select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
  }
}

.amount-field {
  position: relative;
}

.amount-field input {
  padding-right: 42px;
  font-size: 1.4rem;
  font-weight: 750;
}

.amount-field b {
  color: var(--muted);
  position: absolute;
  top: 14px;
  right: 14px;
}

.receipt-form > label > small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 550;
}

.receipt-split-heading {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 3px;
  display: flex;
}

.receipt-split-heading > div {
  gap: 3px;
  display: grid;
}

.receipt-split-heading strong {
  font-size: .8rem;
}

.receipt-split-heading small {
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.4;
}

.receipt-split-heading button {
  border: 1px solid var(--green);
  flex: none;
  align-items: center;
  gap: 5px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .receipt-split-heading button {
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  }
}

.receipt-split-heading button {
  background: var(--mint);
  color: var(--green-deep);
  cursor: pointer;
  border-radius: 11px;
  padding: 9px 11px;
  font-size: .7rem;
  font-weight: 800;
}

.receipt-split-heading button:hover:not(:disabled) {
  border-color: var(--green);
}

.receipt-split-heading button:disabled {
  opacity: .4;
  cursor: default;
}

.receipt-splits {
  gap: 9px;
  display: grid;
}

.receipt-split-row {
  border: 1px solid var(--line);
  background: var(--form-bg);
  border-radius: 14px;
  grid-template-columns: minmax(160px, 1fr) minmax(145px, .7fr) auto;
  align-items: end;
  gap: 8px;
  padding: 11px;
  display: grid;
}

.receipt-split-row label {
  gap: 4px;
}

.receipt-split-row label > small {
  color: var(--muted);
  font-size: .58rem;
}

.receipt-split-row input, .receipt-split-row select {
  padding: 9px 10px;
  font-size: .75rem;
}

.receipt-split-row .amount-field input {
  padding-right: 31px;
  font-size: .82rem;
}

.receipt-split-row .amount-field b {
  font-size: .68rem;
  top: 10px;
  right: 10px;
}

.remove-split {
  width: 32px;
  height: 37px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  place-items: center;
  font-size: 1.25rem;
  display: grid;
}

.remove-split:hover {
  background: var(--danger-soft);
  color: #c8665e;
}

.split-result {
  color: var(--green);
  text-align: right;
  grid-column: 2;
  font-size: .62rem;
  font-weight: 750;
}

.split-result.invalid {
  color: #c8665e;
}

.receipt-balance {
  border: 1px solid var(--line);
  background: var(--readonly);
  border-radius: 14px;
  gap: 4px;
  padding: 13px 15px;
  display: grid;
}

.receipt-balance strong {
  font-size: .8rem;
}

.receipt-balance small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}

.receipt-balance.ready {
  border-color: var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .receipt-balance.ready {
    border-color: color-mix(in srgb, var(--green) 34%, transparent);
  }
}

.receipt-balance.ready {
  background: var(--mint);
}

.receipt-balance.ready strong {
  color: var(--green-deep);
}

.form-message {
  background: var(--danger-soft);
  color: #a64f48;
  border-radius: 11px;
  margin: -5px 0 0;
  padding: 10px 12px;
  font-size: .72rem;
}

.allocation-list {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}

.new-pocket-form {
  border: 1px solid var(--line);
  background: var(--form-bg);
  border-radius: 16px;
  padding: 17px;
}

.new-pocket-form .pocket-style-fields {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.manage-pocket-list {
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.manage-pocket-list > section {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: 14px;
  overflow: hidden;
}

.manage-parent, .manage-child {
  grid-template-columns: auto auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  display: grid;
}

.manage-parent {
  background: var(--mint);
}

@supports (color: color-mix(in lab, red, red)) {
  .manage-parent {
    background: color-mix(in srgb, var(--mint) 42%, transparent);
  }
}

.manage-child {
  border-top: 1px solid var(--line);
  color: var(--muted);
  grid-template-columns: auto minmax(90px, 1fr) auto;
  margin-left: 28px;
  font-size: .78rem;
}

.drag-handle {
  color: #9aa8a3;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  font-size: 1.05rem;
}

[draggable="true"]:active .drag-handle {
  cursor: grabbing;
}

.manage-icon {
  background: var(--surface-solid);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
}

.manage-icon:hover, .manage-icon[aria-expanded="true"] {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green);
}

@supports (color: color-mix(in lab, red, red)) {
  .manage-icon:hover, .manage-icon[aria-expanded="true"] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent);
  }
}

.manage-icon:disabled {
  opacity: .5;
  cursor: wait;
}

.icon-picker {
  border-top: 1px solid var(--line);
  background: var(--surface);
  gap: 13px;
  padding: 12px;
  display: grid;
}

.icon-picker-group {
  gap: 6px;
  display: grid;
}

.icon-picker-group > strong {
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .62rem;
}

.icon-picker-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.icon-picker button {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  min-width: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  display: flex;
}

.icon-picker button:hover, .icon-picker button.selected {
  border-color: var(--green);
  background: var(--mint);
}

.icon-picker button > span {
  flex: none;
  font-size: 1rem;
}

.icon-picker button > small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .62rem;
  font-weight: 700;
  overflow: hidden;
}

.manage-parent input, .manage-child input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  padding: 7px 8px;
  font-weight: 750;
}

.manage-child input {
  color: var(--muted);
  font-weight: 600;
}

.manage-parent input:hover, .manage-child input:hover {
  border-color: var(--line);
  background: var(--surface-solid);
}

.manage-parent input:focus, .manage-child input:focus {
  border-color: var(--green);
  background: var(--surface-solid);
  box-shadow: 0 0 0 3px var(--green);
  outline: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .manage-parent input:focus, .manage-child input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent);
  }
}

.row-actions {
  align-items: center;
  gap: 2px;
  display: flex;
}

.row-actions button {
  min-width: 27px;
  height: 27px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 0 6px;
  font-size: .72rem;
  font-weight: 750;
}

.row-actions button:hover:not(:disabled) {
  background: var(--surface-solid);
  color: var(--green);
}

.row-actions button:disabled {
  opacity: .28;
  cursor: default;
}

.row-actions .archive-action {
  color: #9a4a43;
  width: auto;
  margin-left: 3px;
}

.row-actions .savings-action {
  color: #89702b;
  width: auto;
  padding: 0 7px;
}

.row-actions .savings-action.active {
  background: #f6edcf;
}

.row-actions .parent-select {
  width: 112px;
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 22px 5px 7px;
  font-size: .68rem;
  font-weight: 650;
}

.allocation-list fieldset {
  border: 1px solid var(--line);
  border-radius: 14px;
  gap: 8px;
  margin: 0;
  padding: 15px;
  display: grid;
}

.allocation-list legend {
  padding: 0 6px;
  font-size: .82rem;
  font-weight: 800;
}

.allocation-row {
  grid-template-columns: minmax(100px, 1fr) 132px;
  align-items: end;
  gap: 9px;
  display: grid;
}

.allocation-row.has-goal {
  grid-template-columns: minmax(100px, 1fr) 132px 132px;
}

.allocation-name {
  align-self: center;
  font-size: .78rem;
  font-weight: 750;
}

.goal-hint {
  color: #89702b;
  margin-top: 3px;
  font-size: .64rem;
  font-weight: 650;
  display: block;
}

.carryover-hint {
  color: var(--green);
  margin-top: 3px;
  font-size: .64rem;
  font-weight: 650;
  display: block;
}

.expense-dialog .check-label {
  border: 1px solid var(--line);
  background: var(--mint);
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  padding: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .expense-dialog .check-label {
    background: color-mix(in srgb, var(--mint) 35%, transparent);
  }
}

.expense-dialog .check-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  margin: 0;
}

.compact-amount {
  gap: 4px;
  display: grid;
  position: relative;
}

.compact-amount > small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 650;
}

.compact-amount input {
  text-align: right;
  padding: 8px 31px 8px 9px;
}

.compact-amount b {
  color: var(--muted);
  font-size: .7rem;
  position: absolute;
  bottom: 9px;
  right: 9px;
}

.full {
  width: 100%;
  margin-top: 4px;
}

.month-dialog {
  width: min(100%, 590px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.carryover-list {
  gap: 8px;
  display: grid;
}

.carryover-select-all {
  border: 1px solid var(--green);
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  margin: 18px 0 10px;
  padding: 12px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .carryover-select-all {
    border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
  }
}

.carryover-select-all {
  background: var(--mint);
  cursor: pointer;
  border-radius: 13px;
}

.carryover-select-all input {
  width: 19px;
  height: 19px;
  accent-color: var(--green);
  margin: 0;
}

.carryover-select-all span {
  gap: 3px;
  display: grid;
}

.carryover-select-all strong {
  color: var(--green-deep);
  font-size: .78rem;
}

.carryover-select-all small {
  color: var(--muted);
  font-size: .64rem;
}

.carryover-list > p {
  background: var(--paper);
  color: var(--muted);
  text-align: center;
  border-radius: 13px;
  margin: 0;
  padding: 18px;
  font-size: .8rem;
}

.carryover-list label {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: 13px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: grid;
}

.carryover-list input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  margin: 0;
}

.carryover-list span {
  gap: 3px;
  display: grid;
}

.carryover-list strong {
  font-size: .78rem;
}

.carryover-list small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 500;
}

.carryover-list b {
  white-space: nowrap;
  font-family: Georgia, serif;
  font-size: .95rem;
  font-weight: 500;
}

.toast {
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 13px 18px;
  font-size: .85rem;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

html[data-theme="dark"] .brand-mark {
  color: #14251e;
  background: #d8eee4;
}

html[data-theme="dark"] .profile > span {
  color: #f6e8b7;
  background: #4a432c;
}

html[data-theme="dark"] .auth-warning {
  color: #efd39a;
  background: #4a3922;
}

html[data-theme="dark"] .savings-status {
  color: #e1c572;
  background: #443c25;
}

html[data-theme="dark"] .savings-card.monthly-complete .savings-status {
  background: var(--mint);
  color: var(--green);
}

html[data-theme="dark"] .savings-card.goal-complete .savings-status {
  background: var(--green);
  color: #14251e;
}

html[data-theme="dark"] .pocket-card {
  --tone: #29473a;
  --tone-deep: #9ad6bd;
}

html[data-theme="dark"] .tone-blue {
  --tone: #273f49;
  --tone-deep: #9ac7d8;
}

html[data-theme="dark"] .tone-plum {
  --tone: #443446;
  --tone-deep: #d5acd0;
}

html[data-theme="dark"] .tone-amber {
  --tone: #493d24;
  --tone-deep: #e7c475;
}

html[data-theme="dark"] .insight-icon {
  color: #becd76;
}

html[data-theme="dark"] .manage-parent {
  background: var(--mint);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .manage-parent {
    background: color-mix(in srgb, var(--mint) 42%, transparent);
  }
}

html[data-theme="dark"] .row-actions .savings-action.active {
  color: #e1c572;
  background: #443c25;
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .topbar nav {
    display: none;
  }

  .topbar-account, .appearance-controls {
    gap: 4px;
  }

  .palette-label {
    display: none;
  }

  .palette-picker summary {
    padding-left: 7px;
    padding-right: 7px;
  }

  .account-chip {
    border-left: 0;
    padding-left: 3px;
  }

  .account-chip > span {
    display: none;
  }

  .account-chip button, .account-chip a {
    padding: 7px 5px;
  }

  .profile b, .profile i {
    display: none;
  }

  .profile {
    border-radius: 12px;
    padding-right: 5px;
  }

  .hero {
    flex-direction: column;
    align-items: start;
    padding-top: 52px;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions button {
    flex: 1;
  }

  .summary-grid, .savings-grid, .pocket-grid {
    grid-template-columns: 1fr;
  }

  .summary-card {
    min-height: 132px;
  }

  .insight {
    grid-template-columns: auto 1fr;
    margin-left: 16px;
    margin-right: 16px;
    padding: 23px;
  }

  .insight .text-button {
    grid-column: 2;
    justify-self: start;
  }

  .transaction-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 16px;
  }

  .transaction-detail {
    grid-row: 1 / 3;
  }

  .transaction-amount {
    grid-area: 1 / 3;
  }

  .transaction-delete {
    grid-area: 2 / 3;
    justify-self: end;
  }

  .transaction-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .transaction-line .move-label {
    grid-column: 1 / -1;
  }

  .allocation-list {
    grid-template-columns: 1fr;
  }

  .allocation-row.has-goal {
    grid-template-columns: 1fr 1fr;
  }

  .allocation-row.has-goal .allocation-name {
    grid-column: 1 / -1;
  }

  .history-section .section-heading {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }

  .section-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  .new-pocket-form .pocket-style-fields {
    grid-template-columns: 1fr;
  }

  .icon-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .manage-parent {
    grid-template-columns: auto auto minmax(90px, 1fr);
  }

  .manage-child {
    grid-template-columns: auto minmax(90px, 1fr);
    margin-left: 12px;
  }

  .manage-parent .row-actions, .manage-child .row-actions {
    flex-wrap: wrap;
    grid-column: 2 / -1;
    justify-content: flex-end;
  }

  .row-actions .parent-select {
    width: min(145px, 100%);
  }

  .auth-card {
    border-radius: 22px;
    padding: 28px 22px;
  }

  .auth-brand {
    margin-bottom: 34px;
  }

  .invite-badge {
    top: 29px;
    right: 22px;
  }
}

@media (max-width: 520px) {
  .savings-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .savings-numbers {
    text-align: left;
    grid-column: 2;
    min-width: 0;
  }

  .savings-meter, .savings-month {
    grid-column: 1 / -1;
  }

  .receipt-dialog {
    padding: 27px 18px;
  }

  .receipt-split-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .receipt-split-heading button {
    justify-content: center;
  }

  .receipt-split-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .receipt-split-row label {
    grid-column: 1;
  }

  .receipt-split-row .remove-split {
    grid-area: 1 / 2;
  }

  .receipt-split-row .split-result {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/*# sourceMappingURL=apps_web_src_app_globals_1wvyn-hyvojof.css.map*/