:root {
        --ink: #14211d;
        --muted: #5f6b66;
        --bg: #f4f3ed;
        --card: #fff;
        --forest: #173c31;
        --mint: #bce8d1;
        --lime: #dffe8d;
        --amber: #f5b85c;
        --red: #a9403c;
        --line: #e3e5df;
        --shadow: 0 12px 35px rgba(18, 40, 32, 0.08);
        --radius-small: 8px;
        --radius-control: 12px;
        --radius-card: 16px;
        --radius-panel: 22px;
        --radius-pill: 999px;
        --motion-fast: 160ms;
        --motion-standard: 220ms;
        --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font:
          15px/1.45 Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
      }
      button {
        cursor: pointer;
        min-height: 44px;
        transition:
          transform var(--motion-fast) var(--motion-ease),
          background-color var(--motion-fast) var(--motion-ease),
          border-color var(--motion-fast) var(--motion-ease),
          color var(--motion-fast) var(--motion-ease),
          opacity var(--motion-fast) var(--motion-ease);
      }
      button:active:not(:disabled) {
        transform: translateY(1px) scale(0.99);
      }
      input,
      select,
      textarea {
        min-height: 44px;
        font-size: 16px;
      }
      :focus-visible {
        outline: 3px solid #1f765a;
        outline-offset: 3px;
      }
      .side :focus-visible,
      .balance :focus-visible,
      .app-lock-card :focus-visible,
      .assistant-head :focus-visible {
        outline-color: var(--lime);
      }
      .skip-link {
        position: fixed;
        left: 16px;
        top: 12px;
        z-index: 12000;
        padding: 11px 15px;
        border-radius: var(--radius-control);
        background: #fff;
        color: var(--forest);
        font-weight: 800;
        box-shadow: var(--shadow);
        transform: translateY(-160%);
        transition: transform var(--motion-fast) var(--motion-ease);
      }
      .skip-link:focus {
        transform: translateY(0);
      }
      .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      .icon-sprite {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      }
      .ui-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        display: inline-block;
        vertical-align: -0.2em;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .goal .emoji .ui-icon, .event .eventemoji .ui-icon {
        width: 32px;
        height: 32px;
      }
      .custom-symbol, input[name="emoji"] {
        font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
      }
      .ui-icon.fill-icon {
        fill: currentColor;
        stroke: none;
      }
      .button-with-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      .app {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 248px 1fr;
      }
      .side {
        background: var(--forest);
        color: #fff;
        padding: calc(28px + env(safe-area-inset-top, 0px)) 18px;
        position: sticky;
        top: 0;
        height: 100vh;
      }
      .brand {
        display: flex;
        gap: 11px;
        align-items: center;
        padding: 0 10px 26px;
        font-weight: 800;
        font-size: 20px;
      }
      .brandmark {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-control);
        background: var(--lime);
        color: var(--forest);
        display: grid;
        place-items: center;
      }
      .brandmark .ui-icon {
        width: 23px;
        height: 23px;
      }
      .house {
        margin: 0 6px 24px;
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-card);
        padding: 13px;
        width: calc(100% - 12px);
        color: inherit;
        text-align: left;
      }
      .house small {
        opacity: 0.65;
      }
      .house b {
        display: block;
        margin-top: 3px;
      }
      .nav {
        display: grid;
        gap: 4px;
      }
      .nav button {
        border: 0;
        background: transparent;
        color: #c9d5d0;
        text-align: left;
        padding: 11px 13px;
        border-radius: var(--radius-control);
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .nav button:hover,
      .nav button.active {
        background: #fff;
        color: var(--forest);
        font-weight: 700;
      }
      .nav .ui-icon {
        width: 22px;
        height: 22px;
      }
      .pro {
        position: absolute;
        bottom: 22px;
        left: 18px;
        right: 18px;
        padding: 14px;
        border-radius: var(--radius-card);
        background: var(--lime);
        color: var(--forest);
      }
      .pro b {
        display: block;
      }
      .pro small {
        display: block;
        margin: 3px 0 9px;
      }
      .pro button {
        border: 0;
        border-radius: var(--radius-small);
        padding: 7px 10px;
        background: var(--forest);
        color: white;
      }
      .main {
        min-width: 0;
      }
      .top {
        height: calc(82px + env(safe-area-inset-top, 0px));
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: env(safe-area-inset-top, 0px) 38px 0;
        border-bottom: 1px solid var(--line);
        background: rgba(244, 243, 237, 0.92);
        position: sticky;
        top: 0;
        z-index: 5;
        backdrop-filter: blur(10px);
      }
      .top h1 {
        font-size: 22px;
        margin: 0;
      }
      .top p {
        margin: 2px 0 0;
        color: var(--muted);
        font-size: 13px;
      }
      .topright {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      #cloudStatus.is-online {
        color: var(--forest);
        border-color: #b8cfc3;
        background: #f3f8f4;
      }
      .avatar {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: #d9c4f0;
        color: var(--ink);
        display: grid;
        place-items: center;
        font-weight: 800;
        padding: 0;
        box-shadow: 0 0 0 2px #fff;
      }
      .avatar:hover,
      .avatar:focus-visible {
        outline: 3px solid rgba(23, 60, 49, 0.22);
      }
      .primary,
      .ghost {
        border: 0;
        border-radius: var(--radius-control);
        padding: 10px 15px;
        font-weight: 700;
      }
      .primary {
        background: var(--forest);
        color: #fff;
      }
      .ghost {
        background: #fff;
        color: var(--ink);
        border: 1px solid var(--line);
      }
      .content {
        padding: 30px 38px 80px;
        max-width: 1500px;
        margin: auto;
      }
      .page {
        display: none;
      }
      .page.active {
        display: block;
      }
      .hero {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 18px;
        margin-bottom: 18px;
      }
      .balance {
        background: var(--forest);
        color: #fff;
        border-radius: var(--radius-panel);
        padding: 27px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow);
      }
      .balance:after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(223, 254, 141, 0.12);
        right: -55px;
        top: -90px;
      }
      .eyebrow {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        opacity: 0.7;
      }
      .big {
        font-size: 44px;
        font-weight: 800;
        letter-spacing: -0.04em;
        margin: 7px 0;
      }
      .balance-row {
        display: flex;
        gap: 28px;
        margin-top: 24px;
      }
      .balance-row b {
        display: block;
        font-size: 17px;
      }
      .balance-row small {
        opacity: 0.65;
      }
      .allocation {
        background: var(--card);
        border-radius: var(--radius-panel);
        padding: 24px;
        box-shadow: var(--shadow);
      }
      .ringrow {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      .ring {
        width: 112px;
        height: 112px;
        border-radius: 50%;
        background: conic-gradient(
          var(--forest) 0 61%,
          var(--amber) 61% 77%,
          var(--mint) 77% 92%,
          #e6e7e3 92%
        );
        display: grid;
        place-items: center;
      }
      .ring:before {
        content: "";
        width: 76px;
        height: 76px;
        background: white;
        border-radius: 50%;
      }
      .ringtext {
        position: absolute;
        text-align: center;
        font-weight: 800;
      }
      .ringtext small {
        display: block;
        color: var(--muted);
        font-size: 10px;
      }
      .legend {
        display: grid;
        gap: 9px;
        flex: 1;
      }
      .legend div {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 7px;
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 18px;
      }
      .stat,
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 19px;
        box-shadow: 0 4px 16px rgba(30, 50, 42, 0.035);
      }
      .stat small {
        color: var(--muted);
      }
      .stat b {
        font-size: 23px;
        display: block;
        margin: 5px 0;
      }
      .trend {
        font-size: 12px;
        color: #2f815d;
      }
      .grid2 {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 18px;
      }
      .card h2 {
        font-size: 17px;
        margin: 0;
      }
      .cardhead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17px;
      }
      .cardhead button {
        border: 0;
        background: transparent;
        color: #2c6c57;
        font-weight: 700;
      }
      .tx {
        display: grid;
        grid-template-columns: 42px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
      }
      .tx:last-child {
        border: 0;
      }
      .txicon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-control);
        background: #eef4ef;
        display: grid;
        place-items: center;
      }
      .tx p {
        margin: 0;
        font-weight: 650;
      }
      .tx small {
        color: var(--muted);
      }
      .amount {
        text-align: right;
        font-weight: 750;
      }
      .amount.in {
        color: #2e845f;
      }
      .upcoming {
        display: grid;
        gap: 10px;
      }
      .upitem {
        background: #f6f7f3;
        padding: 12px;
        border-radius: var(--radius-control);
        display: grid;
        grid-template-columns: 46px 1fr auto;
        align-items: center;
        gap: 10px;
      }
      .datebox {
        text-align: center;
        background: white;
        border-radius: var(--radius-small);
        padding: 5px;
      }
      .datebox b {
        display: block;
      }
      .datebox small {
        font-size: 9px;
        color: var(--muted);
      }
      .section-title {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 22px;
      }
      .section-title h2 {
        font-size: 27px;
        margin: 0;
      }
      .section-title p {
        color: var(--muted);
        margin: 3px 0 0;
      }
      .filters {
        display: flex;
        gap: 8px;
      }
      .transaction-export-status {
        margin: -10px 0 18px;
        color: #26734d;
        font-size: 13px;
        font-weight: 650;
      }
      .transaction-export-status.error {
        color: var(--red);
      }
      .transaction-export-status[hidden] {
        display: none;
      }
      .transaction-period {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 16px;
        padding: 14px 16px;
      }
      .transaction-period small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .transaction-period b {
        display: block;
        margin-top: 3px;
        color: var(--forest);
        font-size: 17px;
      }
      .filters select,
      .form input,
      .form select {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: var(--radius-control);
        padding: 10px;
      }
      .budget-table {
        width: 100%;
        border-collapse: collapse;
      }
      .budget-table th {
        text-align: left;
        color: var(--muted);
        font-size: 12px;
        padding: 11px 8px;
      }
      .budget-table td {
        padding: 13px 8px;
        border-top: 1px solid var(--line);
      }
      .budget-table input {
        width: 100px;
        border: 1px solid var(--line);
        border-radius: var(--radius-small);
        padding: 7px;
        text-align: right;
      }
      .bar {
        height: 7px;
        background: #e9ebe6;
        border-radius: var(--radius-small);
        overflow: hidden;
        margin-top: 5px;
      }
      .bar i {
        display: block;
        height: 100%;
        background: var(--forest);
        border-radius: var(--radius-small);
      }
      .negative {
        color: var(--red) !important;
      }
      .goalgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .goal {
        padding: 21px;
      }
      .goal .emoji {
        font-size: 28px;
      }
      .goal h3 {
        margin: 12px 0 3px;
      }
      .goal .progress {
        height: 9px;
        background: #e9ebe5;
        border-radius: var(--radius-control);
        overflow: hidden;
        margin: 15px 0 7px;
      }
      .goal .progress i {
        height: 100%;
        display: block;
        background: var(--forest);
      }
      .split {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 12px;
      }
      .snow {
        display: grid;
        gap: 11px;
      }
      .debt {
        display: grid;
        grid-template-columns: 38px 1fr 160px auto;
        align-items: center;
        gap: 14px;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
      }
      .rank {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--forest);
        color: white;
        display: grid;
        place-items: center;
        font-weight: 800;
      }
      .debt h3 {
        margin: 0;
        font-size: 15px;
      }
      .debt p {
        margin: 2px 0;
        color: var(--muted);
        font-size: 12px;
      }
      .eventgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .event {
        min-height: 180px;
        position: relative;
        overflow: hidden;
      }
      .event .days {
        font-size: 34px;
        font-weight: 850;
      }
      .event .days small {
        font-size: 12px;
        color: var(--muted);
      }
      .event .eventemoji {
        position: absolute;
        right: 16px;
        top: 15px;
        font-size: 42px;
        opacity: 0.8;
      }
      .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        overflow: hidden;
        background: white;
      }
      .calhead {
        padding: 9px;
        text-align: center;
        background: #f1f3ee;
        color: var(--muted);
        font-size: 12px;
      }
      .day {
        min-height: 104px;
        border-top: 1px solid var(--line);
        border-right: 1px solid var(--line);
        padding: 8px;
      }
      .day:nth-child(7n) {
        border-right: 0;
      }
      .day.muted {
        color: var(--muted);
        background: #fafaf8;
      }
      .pill {
        font-size: 10px;
        padding: 4px 5px;
        border-radius: var(--radius-small);
        background: #e3f2e9;
        margin-top: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .pill.out {
        background: #fff0dc;
      }
      .modal {
        position: fixed;
        inset: 0;
        background: rgba(8, 20, 16, 0.55);
        display: none;
        place-items: center;
        z-index: 20;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
      }
      .modal.open {
        display: grid;
      }
      .modal.open .dialog {
        animation: fp-dialog-in var(--motion-standard) var(--motion-ease) both;
      }
      .modal[aria-hidden="true"] {
        display: none;
      }
      .dialog {
        background: white;
        border-radius: var(--radius-panel);
        width: min(520px, 100%);
        padding: 24px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
      }
      .dialog h2 {
        margin-top: 0;
      }
      .form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
      }
      .form label {
        font-size: 12px;
        color: var(--muted);
        display: grid;
        gap: 5px;
      }
      .form .wide {
        grid-column: 1/-1;
      }
      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 18px;
      }
      .mobilebar {
        display: none;
      }
      .empty {
        color: var(--muted);
        text-align: center;
        padding: 25px;
      }
      .empty-state {
        width: 100%;
        min-height: 190px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 7px;
        padding: 26px 18px;
        color: var(--muted);
        text-align: center;
        border: 1px dashed #cbd7d0;
        border-radius: var(--radius-card);
        background: linear-gradient(145deg, #fbfcfa, #f4f7f3);
      }
      .empty-state.compact {
        min-height: 145px;
        border: 0;
        background: transparent;
      }
      .empty-state-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        margin-bottom: 3px;
        border-radius: var(--radius-card);
        background: #e6f2e9;
        color: var(--forest);
      }
      .empty-state-icon .ui-icon {
        width: 23px;
        height: 23px;
      }
      .empty-state h3 {
        margin: 0;
        color: var(--ink);
        font-size: 16px;
      }
      .empty-state p {
        max-width: 420px;
        margin: 0 0 7px;
        font-size: 13px;
      }
      .goalgrid > .empty-state,
      .eventgrid > .empty-state,
      .snow > .empty-state,
      .quick-spend-grid > .empty-state {
        grid-column: 1 / -1;
      }
      .notice {
        padding: 12px 14px;
        border-radius: var(--radius-control);
        background: #fff2df;
        color: #77501b;
        margin-bottom: 15px;
        font-size: 13px;
      }
      .upitem {
        grid-template-columns: 46px minmax(0, 1fr) auto;
      }
      .upitem-main {
        min-width: 0;
      }
      .upitem-main b {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .upitem-main small {
        color: var(--muted);
      }
      .upitem-action {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .upitem-action button {
        border: 1px solid #b8cfc3;
        background: #fff;
        color: var(--forest);
        border-radius: var(--radius-small);
        padding: 5px 7px;
        font-size: 11px;
        font-weight: 750;
        white-space: nowrap;
      }
      .upcoming-confirm {
        display: none;
        background: #e7f4eb;
        color: #26734d;
        border-radius: var(--radius-control);
        padding: 9px 11px;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 700;
      }
      .upcoming-confirm.show {
        display: block;
      }
      .upcoming-confirm button {
        border: 0;
        background: transparent;
        color: var(--forest);
        font-weight: 850;
        text-decoration: underline;
      }
      .weekly-card {
        margin-bottom: 18px;
        background: linear-gradient(135deg, #fff 0%, #f3f8f4 100%);
      }
      .weekly-grid {
        display: grid;
        grid-template-columns: 1.25fr repeat(3, 1fr);
        gap: 14px;
        align-items: stretch;
      }
      .weekly-main {
        background: var(--forest);
        color: #fff;
        border-radius: var(--radius-card);
        padding: 18px;
      }
      .weekly-main small {
        opacity: 0.72;
      }
      .weekly-main b {
        display: block;
        font-size: 30px;
        margin: 4px 0;
      }
      .weekly-stat {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 16px;
      }
      .weekly-stat small {
        color: var(--muted);
      }
      .weekly-stat b {
        display: block;
        font-size: 21px;
        margin: 5px 0;
      }
      .info-button {
        width: 22px;
        height: 22px;
        min-height: 22px;
        padding: 0;
        margin-left: 5px;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        font-size: 12px;
        font-weight: 850;
        line-height: 20px;
        vertical-align: middle;
        position: relative;
      }
      .info-button::after {
        content: "";
        position: absolute;
        inset: -11px;
      }
      .weekly-main .info-button { opacity: 0.9; }
      .weekly-stat .info-button,
      .weekly-pace .info-button { color: var(--muted); }
      .info-explanation {
        padding: 14px;
        border-radius: var(--radius-control);
        background: #f6f7f3;
        color: var(--ink);
        line-height: 1.55;
      }
      .weekly-pace {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        align-items: center;
        margin-top: 14px;
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: #fff;
      }
      .weekly-pace-badge {
        padding: 6px 10px;
        border-radius: var(--radius-pill);
        background: #e7f4eb;
        color: #26734d;
        font-weight: 800;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
      }
      .weekly-pace-badge.over {
        background: #fff0e7;
        color: #9a4b20;
      }
      .weekly-pace p {
        margin: 0;
        font-weight: 750;
      }
      .weekly-pace small {
        color: var(--muted);
      }
      .weekly-pace-guide {
        text-align: right;
      }
      .weekly-pace-guide b {
        display: block;
        font-size: 18px;
      }
      .weekly-category-picker {
        display: grid;
        gap: 14px;
      }
      .weekly-plan-grid {
        display: grid;
        gap: 9px;
      }
      .weekly-category-row {
        display: grid;
        grid-template-columns: 44px minmax(170px, 1fr) 145px 44px;
        gap: 11px;
        align-items: end;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: #fbfcfa;
      }
      .weekly-category-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        align-self: end;
        border-radius: var(--radius-control);
        background: #e7f2e9;
        font-size: 20px;
      }
      .weekly-category-row label {
        min-width: 0;
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 12px;
      }
      .weekly-category-row input,
      .weekly-custom-row input {
        width: 100%;
        min-width: 0;
        border: 1px solid #ccd5cf;
        background: #fff;
        border-radius: var(--radius-control);
        padding: 10px;
        color: var(--ink);
      }
      .weekly-category-remove {
        width: 44px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        color: var(--muted);
      }
      .weekly-category-remove:hover {
        border-color: #e0aaa6;
        color: var(--red);
      }
      .protected-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin-top: 4px;
        padding: 3px 7px;
        border-radius: var(--radius-pill);
        background: #edf1dc;
        color: #536028;
        font-size: 10px;
        font-weight: 800;
      }
      .weekly-category-library {
        border: 1px solid #c9d8cf;
        border-radius: var(--radius-card);
        background: #f7faf7;
        overflow: hidden;
      }
      .weekly-category-library summary {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        color: var(--forest);
        font-weight: 800;
        cursor: pointer;
        list-style: none;
      }
      .weekly-category-library summary::-webkit-details-marker {
        display: none;
      }
      .weekly-category-library summary::after {
        content: "+";
        margin-left: auto;
        font-size: 20px;
        font-weight: 500;
      }
      .weekly-category-library[open] summary::after {
        content: "−";
      }
      .weekly-category-library-content {
        padding: 0 14px 14px;
      }
      .weekly-category-library-content > p {
        margin: 0 0 10px;
        color: var(--muted);
        font-size: 13px;
      }
      .weekly-preset-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .weekly-preset-button {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        color: var(--ink);
        text-align: left;
      }
      .weekly-preset-button:hover {
        border-color: #91b7a4;
        background: #eef7f1;
      }
      .weekly-preset-button span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .weekly-custom-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-top: 12px;
      }
      .weekly-category-status {
        min-height: 18px;
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12px;
      }
      .weekly-plan-total {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--line);
      }
      .action-confirmation {
        min-height: 20px;
        margin: 8px 0 0;
        color: #26734d;
        font-size: 13px;
        font-weight: 700;
      }
      .action-confirmation.is-visible {
        animation: fp-confirm-in var(--motion-standard) var(--motion-ease) both;
      }
      .quick-spend {
        margin-bottom: 18px;
      }
      .quick-spend-entry {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
      }
      .quick-spend-amount {
        display: flex;
        align-items: center;
        gap: 7px;
        border: 2px solid #b8cfc3;
        background: #fff;
        border-radius: var(--radius-card);
        padding: 8px 12px;
        width: min(240px, 100%);
      }
      .quick-spend-amount span {
        font-size: 20px;
        font-weight: 800;
      }
      .quick-spend-amount input {
        min-width: 0;
        width: 100%;
        border: 0;
        outline: 0;
        font-size: 22px;
        font-weight: 800;
        color: var(--ink);
      }
      .quick-spend-amount input::placeholder {
        color: var(--muted);
      }
      .quick-spend-hint {
        color: var(--muted);
        font-size: 13px;
      }
      .quick-spend-confirm {
        min-height: 20px;
        margin: 0 0 10px;
        color: #2f815d;
        font-weight: 700;
        font-size: 13px;
      }
      .quick-spend-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
      }
      .quick-spend-button {
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: #f8faf7;
        padding: 13px;
        text-align: left;
        color: var(--ink);
      }
      .quick-spend-button:hover {
        border-color: #9fc6b3;
        background: #eef7f1;
      }
      .quick-spend-button span {
        display: block;
        font-size: 21px;
      }
      .quick-spend-button b {
        display: block;
        margin: 5px 0 2px;
      }
      .quick-spend-button small {
        color: var(--muted);
      }
      .quick-spend-button small.negative {
        font-weight: 700;
      }
      .quick-spend-summary {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-items: center;
        margin-top: 14px;
        color: var(--muted);
        font-size: 12px;
      }
      .weekly-activity {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--line);
      }
      .weekly-activity-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
      }
      .weekly-activity-head b {
        font-size: 14px;
      }
      .weekly-purchase {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto auto;
        gap: 10px;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--line);
      }
      .weekly-purchase:last-child {
        border: 0;
      }
      .weekly-purchase-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-control);
        background: #eef4ef;
        display: grid;
        place-items: center;
      }
      .weekly-purchase p {
        margin: 0;
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .weekly-purchase small {
        color: var(--muted);
      }
      .weekly-purchase-actions {
        display: flex;
        gap: 5px;
      }
      .weekly-purchase-actions button {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: var(--radius-small);
        padding: 5px 7px;
        font-size: 11px;
      }
      .weekly-purchase-actions .delete {
        color: var(--red);
      }
      .last-week-card {
        margin-bottom: 18px;
      }
      .last-week-summary {
        display: grid;
        grid-template-columns: 1.2fr repeat(3, 1fr);
        gap: 12px;
      }
      .last-week-result,
      .last-week-stat {
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 15px;
        background: #fff;
      }
      .last-week-result {
        background: #eef7f1;
        border-color: #cce2d5;
      }
      .last-week-result.over {
        background: #fff2eb;
        border-color: #f0cdbc;
      }
      .last-week-result small,
      .last-week-stat small {
        color: var(--muted);
      }
      .last-week-result b,
      .last-week-stat b {
        display: block;
        font-size: 21px;
        margin: 5px 0;
      }
      .last-week-categories {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-top: 12px;
      }
      .last-week-category {
        border-radius: var(--radius-control);
        background: #f7f9f7;
        padding: 10px;
      }
      .last-week-category span,
      .last-week-category b {
        display: block;
      }
      .last-week-category span {
        font-size: 12px;
        color: var(--muted);
      }
      .last-week-category b {
        margin-top: 4px;
      }
      .last-week-category.over b {
        color: var(--red);
      }
      .month-close-card {
        margin-bottom: 18px;
        background: linear-gradient(135deg, #fff 0%, #f3f8f4 100%);
      }
      .month-close-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .month-close-stat {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: var(--radius-control);
        padding: 13px;
      }
      .month-close-stat small {
        display: block;
        color: var(--muted);
      }
      .month-close-stat b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }
      .month-close-options {
        display: grid;
        gap: 10px;
        margin-top: 15px;
      }
      .month-close-options label {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 12px;
      }
      .month-close-options input {
        margin-top: 3px;
      }
      .month-close-options span {
        display: block;
      }
      .month-close-options small {
        display: block;
        color: var(--muted);
        margin-top: 2px;
      }
      .monthly-insights {
        margin-top: 18px;
      }
      .insight-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 16px;
      }
      .insight-stat {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 13px;
        background: #f8faf7;
      }
      .insight-stat small {
        display: block;
        color: var(--muted);
      }
      .insight-stat b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }
      .insight-row {
        display: grid;
        grid-template-columns: minmax(130px, 1.2fr) 1.5fr auto;
        gap: 12px;
        align-items: center;
        padding: 10px 0;
        border-top: 1px solid var(--line);
      }
      .insight-row:first-child {
        border-top: 0;
      }
      .insight-label b,
      .insight-label small {
        display: block;
      }
      .insight-label small {
        color: var(--muted);
      }
      .insight-amount {
        text-align: right;
      }
      .insight-amount b,
      .insight-amount small {
        display: block;
      }
      .insight-amount small {
        color: var(--muted);
      }
      @media (max-width: 650px) {
        .month-close-grid,
        .insight-summary {
          grid-template-columns: 1fr 1fr;
        }
        .month-close-stat,
        .insight-stat {
          padding: 11px;
        }
        .month-close-stat b,
        .insight-stat b {
          font-size: 17px;
        }
        .insight-row {
          grid-template-columns: minmax(100px, 1fr) 1fr auto;
          gap: 8px;
        }
      }
      .subscription-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 18px;
      }
      .subscription-stat {
        background: #f6f7f3;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 14px;
      }
      .subscription-stat small {
        display: block;
        color: var(--muted);
      }
      .subscription-stat b {
        display: block;
        font-size: 22px;
        margin-top: 3px;
      }
      .subscription-review {
        display: grid;
        gap: 9px;
      }
      .subscription-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 11px 0;
        border-top: 1px solid var(--line);
      }
      .subscription-row small {
        display: block;
        color: var(--muted);
      }
      .review-badge {
        display: inline-block;
        margin-left: 6px;
        padding: 2px 6px;
        border-radius: var(--radius-pill);
        background: #fff0dc;
        color: #77501b;
        font-size: 10px;
        font-weight: 800;
      }
      @media (max-width: 650px) {
        .subscription-summary {
          grid-template-columns: 1fr 1fr;
        }
        .subscription-stat:last-child {
          grid-column: 1/-1;
        }
      }
      /* Subtle topographic contours represent each household's financial journey. */
      .main {
        background-color: #f4f3ed;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='280' viewBox='0 0 440 280'%3E%3Cg fill='none' stroke='%23173c31' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M-35 62C32 10 101 20 137 60s18 81 62 104 114-7 148 28 17 72 99 91'/%3E%3Cpath d='M-42 84C25 33 87 38 116 72s15 73 61 103 119 1 149 34 20 58 107 82'/%3E%3Cpath d='M-48 108C12 58 69 55 96 84s18 65 59 99 117 18 148 46 28 43 117 70'/%3E%3Cpath d='M42-18C72 19 109 27 150 11s78-7 96 22-5 59 28 82 84 9 110 38 20 67 79 77'/%3E%3Cpath d='M65-24C91 7 120 12 157 1s70-2 82 25-11 54 18 80 77 18 98 45 17 57 70 70'/%3E%3Cpath d='M278-28C254 5 266 40 309 55s73 6 91 35 3 61 49 83'/%3E%3Cpath d='M294-17C275 9 286 30 319 42s67 7 82 31 3 50 45 69'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 440px 280px;
        background-attachment: fixed;
      }
      .item-actions {
        display: flex;
        gap: 6px;
        margin-top: 14px;
      }
      .item-actions .ghost {
        padding: 6px 9px;
        font-size: 12px;
      }
      .item-actions .delete {
        color: var(--red);
      }
      .notify-button {
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        position: relative;
        padding: 0;
      }
      .notify-button .ui-icon {
        width: 19px;
        height: 19px;
      }
      .notify-count {
        position: absolute;
        right: -4px;
        top: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: var(--radius-small);
        background: var(--red);
        color: #fff;
        font-size: 10px;
        display: none;
        place-items: center;
        font-weight: 800;
      }
      .notify-count.show {
        display: grid;
      }
      .notification-list {
        display: grid;
        gap: 9px;
        max-height: 360px;
        overflow: auto;
      }
      .notification-item {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 12px;
        display: grid;
        grid-template-columns: 32px 1fr auto;
        gap: 10px;
        align-items: start;
      }
      .notification-item.unread {
        background: #f0f8f3;
        border-color: #b9d9c8;
      }
      .notification-item b {
        display: block;
      }
      .notification-item small {
        color: var(--muted);
      }
      .notification-item button {
        padding: 4px 7px;
        font-size: 11px;
      }
      .preference-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .preference-grid label {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 13px;
      }
      .preference-grid input[type="checkbox"] {
        width: auto;
      }
      .setup-checklist {
        margin-bottom: 18px;
        border: 1px solid #b9d9c8;
        background: #f0f8f3;
        border-radius: var(--radius-card);
        padding: 17px;
      }
      .setup-checklist h2 {
        margin: 0;
        font-size: 17px;
      }
      .setup-checklist p {
        margin: 4px 0 12px;
        color: var(--muted);
      }
      .checklist-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .check-chip {
        border: 1px solid #cbded3;
        background: #fff;
        border-radius: var(--radius-control);
        padding: 7px 10px;
        font-size: 12px;
      }
      .check-chip.done {
        color: #2f815d;
        background: #e3f3e9;
      }
      .wizard-progress {
        height: 7px;
        background: #e8ece7;
        border-radius: var(--radius-small);
        overflow: hidden;
        margin: 10px 0 22px;
      }
      .wizard-progress i {
        display: block;
        height: 100%;
        background: var(--forest);
      }
      .wizard-kicker {
        font-size: 12px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .wizard-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .wizard-summary div {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 12px;
      }
      .wizard-summary b {
        display: block;
        font-size: 20px;
      }
      .privacy-note {
        background: #eef4ef;
        border-radius: var(--radius-control);
        padding: 11px;
        color: #456057;
        font-size: 12px;
        margin-top: 14px;
      }
      .assistant-launch {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 14;
        width: 54px;
        height: 54px;
        border: 0;
        border-radius: var(--radius-card);
        background: var(--forest);
        color: #fff;
        box-shadow: 0 15px 40px rgba(17, 37, 31, 0.28);
      }
      .assistant-launch .ui-icon {
        width: 24px;
        height: 24px;
      }
      .assistant-panel {
        position: fixed;
        right: 24px;
        bottom: 88px;
        z-index: 18;
        width: min(430px, calc(100vw - 28px));
        height: min(640px, calc(100vh - 120px));
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        box-shadow: 0 30px 80px rgba(12, 30, 24, 0.24);
        display: none;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        overflow: hidden;
      }
      .assistant-panel.open {
        display: grid;
        animation: fp-panel-in var(--motion-standard) var(--motion-ease) both;
      }
      .assistant-panel[aria-hidden="true"] {
        display: none;
      }
      .assistant-head {
        background: var(--forest);
        color: #fff;
        padding: 16px 18px;
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .assistant-head h2 {
        margin: 0;
        font-size: 16px;
      }
      .assistant-head small {
        opacity: 0.72;
      }
      .assistant-head button {
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 22px;
        width: 44px;
        height: 44px;
      }
      .assistant-quick {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
      }
      .assistant-quick button {
        white-space: nowrap;
        border: 1px solid var(--line);
        background: #f6f8f5;
        border-radius: var(--radius-small);
        padding: 6px 9px;
        font-size: 11px;
      }
      .assistant-messages {
        min-width: 0;
        padding: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        display: grid;
        align-content: start;
        gap: 10px;
        background: #fafbf8;
      }
      .assistant-message {
        max-width: 88%;
        overflow-wrap: anywhere;
        padding: 10px 12px;
        border-radius: var(--radius-control);
        background: #fff;
        border: 1px solid var(--line);
        white-space: pre-line;
        animation: fp-message-in var(--motion-standard) var(--motion-ease) both;
      }
      .assistant-message.user {
        margin-left: auto;
        background: var(--forest);
        color: #fff;
        border-color: var(--forest);
      }
      .assistant-message small {
        display: block;
        color: var(--muted);
        margin-top: 5px;
      }
      .assistant-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 12px;
        border-top: 1px solid var(--line);
      }
      .assistant-form input {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 10px;
      }
      .assistant-form button {
        border: 0;
        border-radius: var(--radius-control);
        background: var(--forest);
        color: #fff;
        padding: 0 14px;
        font-weight: 800;
      }
      @media (max-width: 1000px) {
        .app {
          grid-template-columns: 86px 1fr;
        }
        .side {
          padding: calc(22px + env(safe-area-inset-top, 0px)) 10px;
        }
        .brand {
          justify-content: center;
        }
        .brand > span:last-child,
        .house,
        .nav button strong,
        .pro {
          display: none;
        }
        .nav button {
          justify-content: center;
        }
        .hero,
        .grid2 {
          grid-template-columns: 1fr;
        }
        .stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .goalgrid,
        .eventgrid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .mobile-more {
        display: none;
      }
      .mobile-more[aria-hidden="true"] {
        display: none;
      }
      .mobile-more.open {
        display: grid;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--mobile-nav-height, 76px) + 12px);
        max-height: calc(100dvh - var(--mobile-nav-height, 76px) - env(safe-area-inset-top, 0px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding: 9px;
        z-index: 19;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 9px;
        box-shadow: 0 24px 65px rgba(12, 30, 24, 0.24);
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        transform-origin: bottom center;
        animation: fp-panel-in var(--motion-standard) var(--motion-ease) both;
      }
      .mobile-more button {
        border: 0;
        border-radius: var(--radius-control);
        background: #f4f7f3;
        color: var(--ink);
        padding: 13px;
        text-align: left;
        font-weight: 750;
      }
      .mobile-more button .ui-icon {
        display: block;
        width: 21px;
        height: 21px;
        margin-bottom: 3px;
      }
      .mobile-more button.more-account {
        grid-column: 1 / -1;
        background: var(--lime);
        color: var(--forest);
        border: 1px solid #b3ce71;
      }
      .more-account small { display: block; font-weight: 500; margin-top: 3px; }
      #accountSignOutButton {
        background: var(--forest);
        color: white;
        border: 2px solid var(--forest);
        font-weight: 800;
        min-height: 48px;
      }
      #accountSignOutButton:hover { background: #245b49; }
      .mobile-more button.active {
        background: var(--forest);
        color: #fff;
      }
      .mobile-more-backdrop {
        display: none;
      }
      .mobile-more-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 18;
        background: rgba(8, 20, 16, 0.32);
      }
      .mobile-calendar {
        display: none;
        touch-action: pan-y;
      }
      .mobile-calendar-nav {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
      }
      .mobile-calendar-nav button {
        min-height: 44px;
      }
      .calendar-jump {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        font-weight: 800;
      }
      .calendar-jump input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
      .calendar-zoom-bar {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
      }
      .calendar-zoom-bar button {
        min-height: 42px;
        padding: 8px;
      }
      .calendar-zoom-level {
        text-align: center;
      }
      .calendar-zoom-level b,
      .calendar-zoom-level small {
        display: block;
      }
      .calendar-zoom-level small {
        font-size: 10px;
        color: var(--muted);
      }
      .mobile-month-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        margin-bottom: 12px;
      }
      .mobile-month-grid .weekday {
        text-align: center;
        font-size: 10px;
        color: var(--muted);
        padding: 3px 0;
      }
      .mobile-month-day {
        min-width: 0;
        min-height: 58px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        padding: 6px 3px;
        text-align: center;
        color: var(--ink);
      }
      .mobile-month-day.muted {
        visibility: hidden;
      }
      .mobile-month-day b,
      .mobile-month-day small {
        display: block;
      }
      .mobile-month-day b {
        font-size: 14px;
      }
      .mobile-month-day small {
        font-size: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--muted);
      }
      .mobile-month-day.has-items {
        background: #fff9ec;
      }
      .mobile-month-day.selected {
        background: var(--forest);
        border-color: var(--forest);
        color: #fff;
      }
      .mobile-month-day.selected small {
        color: #d8e5df;
      }
      .mobile-month-day.today {
        box-shadow: inset 0 0 0 2px var(--lime);
      }
      .mobile-week {
        display: grid;
        gap: 8px;
        margin-bottom: 12px;
      }
      .mobile-week-day {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        min-height: 64px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        padding: 9px;
        text-align: left;
      }
      .mobile-week-day.selected {
        border: 2px solid var(--forest);
      }
      .mobile-week-date {
        text-align: center;
      }
      .mobile-week-date b,
      .mobile-week-date small {
        display: block;
      }
      .mobile-week-date b {
        font-size: 20px;
      }
      .mobile-week-date small {
        font-size: 10px;
        color: var(--muted);
      }
      .mobile-week-summary {
        font-size: 11px;
        color: var(--muted);
        overflow: hidden;
      }
      .mobile-week-total {
        font-size: 11px;
        text-align: right;
      }
      .mobile-week-total .in {
        color: #2e845f;
      }
      .mobile-agenda {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 16px;
      }
      .mobile-agenda-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }
      .mobile-agenda-head h3 {
        margin: 0;
        font-size: 17px;
      }
      .mobile-agenda-head button {
        padding: 8px 10px;
      }
      .day-stepper {
        display: grid;
        grid-template-columns: 42px 1fr 42px;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
      }
      .day-stepper button {
        min-height: 42px;
      }
      .day-stepper h3 {
        margin: 0;
        font-size: 16px;
        text-align: center;
      }
      .agenda-item {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid var(--line);
      }
      .agenda-item:first-of-type {
        border-top: 0;
      }
      .agenda-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-control);
        background: #eef4ef;
        display: grid;
        place-items: center;
      }
      .agenda-item b,
      .agenda-item small {
        display: block;
      }
      .agenda-item small {
        color: var(--muted);
      }
      .agenda-amount {
        font-weight: 800;
        text-align: right;
      }
      .agenda-event {
        color: var(--forest);
      }
      @media (max-width: 650px) {
        .app {
          display: block;
        }
        .side {
          display: none;
        }
        .top {
          height: calc(70px + env(safe-area-inset-top, 0px));
          padding: env(safe-area-inset-top, 0px) 16px 0;
        }
        .top p {
          display: none;
        }
        .content {
          padding: 18px 14px 90px;
        }
        .topright .ghost {
          display: none;
        }
        .topright {
          gap: 7px;
        }
        .topright .primary {
          padding: 9px 10px;
          font-size: 12px;
        }
        .hero {
          display: block;
        }
        .allocation {
          margin-top: 13px;
        }
        .big {
          font-size: 37px;
        }
        .stats {
          grid-template-columns: 1fr 1fr;
          gap: 9px;
        }
        .stat {
          padding: 14px;
        }
        .stat b {
          font-size: 19px;
        }
        .goalgrid,
        .eventgrid {
          grid-template-columns: 1fr;
        }
        .section-title {
          align-items: start;
          gap: 10px;
          flex-wrap: wrap;
        }
        .section-title h2 {
          font-size: 23px;
        }
        .section-title .filters {
          max-width: none;
          flex-wrap: wrap;
          justify-content: flex-start;
        }
        .transaction-period {
          align-items: flex-start;
          flex-direction: column;
        }
        .transaction-period .filters {
          flex-wrap: wrap;
        }
        .debt {
          grid-template-columns: 35px 1fr auto;
        }
        .debt > .bar {
          grid-column: 2/-1;
          width: 100%;
        }
        .calendar-wrap,
        .calendar-page-filters {
          display: none;
        }
        .mobile-calendar {
          display: block;
        }
        .mobilebar {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background: white;
          border-top: 1px solid var(--line);
          z-index: 20;
          padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
        }
        .mobilebar button {
          border: 0;
          background: none;
          font-size: 10px;
          color: var(--muted);
        }
        .mobilebar button .ui-icon {
          display: block;
          width: 20px;
          height: 20px;
          margin: 0 auto 2px;
        }
        .mobilebar button.active {
          color: var(--forest);
          font-weight: 800;
        }
        .form {
          grid-template-columns: 1fr;
        }
        .form .wide {
          grid-column: auto;
        }
        .budget-table {
          min-width: 620px;
        }
        .table-wrap {
          overflow: auto;
        }
        .upitem {
          grid-template-columns: 42px minmax(0, 1fr);
        }
        .upitem-action {
          grid-column: 2;
          justify-content: space-between;
        }
        .assistant-launch {
          right: 14px;
          bottom: 78px;
        }
        .assistant-panel {
          right: 14px;
          bottom: 140px;
          height: calc(100vh - 160px);
        }
      }
      .quick-spend-confirm button {
        margin-left: 8px;
        border: 1px solid #9fc6b3;
        background: #fff;
        color: var(--forest);
        border-radius: var(--radius-small);
        padding: 4px 9px;
        font-weight: 800;
      }
      .quick-spend-confirm.warning {
        padding: 11px 12px;
        border-radius: var(--radius-control);
        background: #fff2df;
        color: #77501b;
      }
      .quick-spend-confirm.warning button {
        border-color: #ddb46e;
      }
      .quick-spend-confirm.warning .cancel-spend {
        color: #77501b;
        background: transparent;
      }
      @media (max-width: 1000px) {
        .weekly-grid,
        .last-week-summary {
          grid-template-columns: 1fr 1fr;
        }
        .weekly-main,
        .last-week-result {
          grid-column: 1/-1;
        }
        .weekly-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .quick-spend-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .last-week-categories {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 650px) {
        .weekly-grid,
        .last-week-summary {
          grid-template-columns: 1fr 1fr;
        }
        .weekly-category-row {
          grid-template-columns: 40px minmax(0, 1fr) 44px;
          align-items: start;
          padding: 11px;
        }
        .weekly-category-icon {
          width: 40px;
          height: 40px;
          align-self: start;
        }
        .weekly-category-row .weekly-category-amount-label {
          grid-column: 2 / -1;
        }
        .weekly-category-remove {
          grid-column: 3;
          grid-row: 1;
        }
        .weekly-preset-grid { grid-template-columns: 1fr; }
        .weekly-custom-row { grid-template-columns: 1fr; }
        .weekly-pace {
          grid-template-columns: auto 1fr;
        }
        .weekly-pace-guide {
          grid-column: 1/-1;
          text-align: left;
          padding-top: 9px;
          border-top: 1px solid var(--line);
        }
        .weekly-plan-total,
        .quick-spend-summary,
        .quick-spend-entry {
          align-items: flex-start;
          flex-direction: column;
        }
        .quick-spend-amount {
          width: 100%;
        }
        .quick-spend-grid,
        .last-week-categories {
          grid-template-columns: 1fr 1fr;
        }
        .quick-spend-button {
          padding: 11px;
        }
        .weekly-purchase {
          grid-template-columns: 32px minmax(0, 1fr) auto;
        }
        .weekly-purchase-actions {
          grid-column: 2/-1;
        }
        .topright #cloudStatus {
          display: inline-grid;
          width: 38px;
          height: 38px;
          padding: 0;
          border-radius: 50%;
        }
        .topright #cloudStatus .button-label {
          display: none;
        }
        .topright #cloudStatus .ui-icon {
          width: 18px;
          height: 18px;
        }
        .topright #cloudStatus.is-online { color: var(--forest); }
      }
      .debt-plan {
        margin-bottom: 16px;
      }
      .debt-plan-form {
        display: flex;
        align-items: end;
        gap: 12px;
        flex-wrap: wrap;
      }
      .debt-plan-form label {
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 12px;
      }
      .debt-plan-form input {
        width: 150px;
        border: 1px solid var(--line);
        border-radius: var(--radius-small);
        padding: 9px;
      }
      .debt-plan-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 16px;
      }
      .debt-plan-stat {
        background: #f6f7f3;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 12px;
      }
      .debt-plan-stat small {
        display: block;
        color: var(--muted);
      }
      .debt-plan-stat b {
        display: block;
        margin-top: 3px;
        font-size: 18px;
      }
      .debt-plan-note {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 12px;
      }
      @media (max-width: 650px) {
        .debt-plan-summary {
          grid-template-columns: 1fr 1fr;
        }
        .debt-plan-form label,
        .debt-plan-form input {
          width: 100%;
        }
      }
      .item-actions {
        flex-wrap: wrap;
      }
      .goal-status {
        display: inline-block;
        margin-top: 10px;
        padding: 5px 8px;
        border-radius: var(--radius-small);
        background: #e3f3e9;
        color: #276146;
        font-size: 11px;
        font-weight: 800;
      }
      .goal-status.behind {
        background: #fff2df;
        color: #77501b;
      }
      .goal-history {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
        display: grid;
        gap: 5px;
      }
      .goal-history div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-size: 11px;
        color: var(--muted);
      }
      .goal-history b {
        color: var(--ink);
      }
      .event-costs {
        margin-top: 13px;
        padding-top: 11px;
        border-top: 1px solid var(--line);
        display: grid;
        gap: 7px;
      }
      .event-cost {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
        font-size: 12px;
      }
      .event-cost span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .event-cost small {
        color: var(--muted);
      }
      .event-cost button {
        border: 0;
        background: transparent;
        color: #2c6c57;
        padding: 2px;
        font-weight: 700;
      }
      .event-totals {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        margin-top: 12px;
      }
      .event-totals div {
        background: #f6f7f3;
        border-radius: var(--radius-small);
        padding: 8px;
      }
      .event-totals small {
        display: block;
        color: var(--muted);
        font-size: 10px;
      }
      .event-totals b {
        font-size: 13px;
      }
      .balance-check-card {
        margin-bottom: 18px;
        background: linear-gradient(135deg, #fff 0%, #f6faf7 100%);
      }
      .balance-check-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 10px;
      }
      .balance-check-grid div {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: var(--radius-control);
        padding: 12px;
      }
      .balance-check-grid small {
        display: block;
        color: var(--muted);
      }
      .balance-check-grid b {
        display: block;
        font-size: 19px;
        margin-top: 4px;
      }
      @media (max-width: 650px) {
        .balance-check-grid {
          grid-template-columns: 1fr;
        }
        .balance-check-card .cardhead {
          align-items: flex-start;
          gap: 10px;
        }
      }
      .backup-list {
        display: grid;
        gap: 9px;
        max-height: 360px;
        overflow: auto;
      }
      .backup-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        padding: 12px;
      }
      .backup-item b,
      .backup-item small {
        display: block;
      }
      .backup-item small {
        color: var(--muted);
        margin-top: 2px;
      }
      .backup-actions {
        display: flex;
        gap: 6px;
      }
      .backup-actions button {
        padding: 6px 9px;
        font-size: 12px;
      }
      @media (max-width: 650px) {
        .backup-item {
          grid-template-columns: 1fr;
        }
        .backup-actions {
          justify-content: flex-start;
        }
      }
      .cash-flow-card {
        margin-bottom: 18px;
        background: linear-gradient(135deg, #173c31 0%, #245847 100%);
        color: #fff;
        border: 0;
      }
      .cash-flow-card .cardhead button {
        color: var(--lime);
      }
      .cash-flow-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .cash-flow-stat {
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-control);
        padding: 13px;
      }
      .cash-flow-stat small {
        display: block;
        color: rgba(255, 255, 255, 0.68);
      }
      .cash-flow-stat b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }
      .cash-flow-message {
        margin: 13px 0 0;
        padding: 11px 13px;
        border-radius: var(--radius-control);
        background: rgba(223, 254, 141, 0.13);
        color: #f3f8e7;
      }
      .cash-flow-message.risk {
        background: rgba(216, 95, 88, 0.2);
        color: #fff;
      }
      .cash-flow-card .empty {
        color: rgba(255, 255, 255, 0.72);
      }
      @media (max-width: 750px) {
        .cash-flow-grid {
          grid-template-columns: 1fr 1fr;
        }
        .cash-flow-stat b {
          font-size: 17px;
        }
      }
      .dialog {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .account-section {
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        padding: 14px;
        margin: 14px 0;
      }
      .account-section h3 {
        font-size: 14px;
        margin: 0 0 4px;
      }
      .account-section p {
        color: var(--muted);
        font-size: 12px;
        margin: 0 0 12px;
      }
      .account-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .account-action-grid button {
        width: 100%;
      }
      @media (max-width: 480px) {
        .dialog {
          padding: 18px;
        }
        .account-action-grid {
          grid-template-columns: 1fr;
        }
      }
      #appLockScreen,
      #privacyShield { display: none; }
      html.app-locked #appLockScreen {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
        background: linear-gradient(145deg, #11251f, #245847);
        color: #fff;
      }
      html.app-private #privacyShield {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        background: #173c31;
        color: #fff;
        font-size: 20px;
        font-weight: 850;
      }
      .app-lock-card {
        width: min(390px, 100%);
        text-align: center;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: var(--radius-panel);
        padding: 28px;
        background: rgba(255,255,255,.09);
        box-shadow: 0 22px 60px rgba(0,0,0,.24);
      }
      .app-lock-mark {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        margin: 0 auto 14px;
        border-radius: var(--radius-card);
        background: var(--lime);
        color: var(--forest);
        font-size: 27px;
      }
      .app-lock-card h1 { margin: 0 0 6px; font-size: 25px; }
      .app-lock-card > p { margin: 0 0 20px; color: rgba(255,255,255,.75); }
      .app-lock-pin { display: flex; gap: 9px; }
      .app-lock-pin input {
        min-width: 0;
        flex: 1;
        padding: 13px;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: var(--radius-control);
        background: #fff;
        color: var(--ink);
        text-align: center;
        letter-spacing: .22em;
        font-size: 18px;
      }
      .app-lock-pin button,
      #appLockBiometric {
        border: 0;
        border-radius: var(--radius-control);
        padding: 12px 16px;
        background: var(--lime);
        color: var(--forest);
        font-weight: 850;
      }
      #appLockBiometric { width: 100%; margin-top: 11px; }
      #appLockMessage { min-height: 22px; margin: 13px 0 0; color: #ffe0a7; font-size: 13px; }
      .app-lock-reset { border: 0; background: transparent; color: rgba(255,255,255,.74); text-decoration: underline; font-size: 12px; }
      .security-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
      .security-check input { width: auto; }
      .security-message { min-height: 20px; color: #26734d; }
      .release-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 8px;
      }
      .release-badge {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 10px;
        border-radius: var(--radius-pill);
        background: #e3f3e9;
        color: #276146;
        font-size: 12px;
        font-weight: 850;
        white-space: nowrap;
      }
      .release-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 18px 0;
      }
      .release-item {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: #fafbf8;
      }
      .release-item b { display: block; margin-bottom: 5px; color: var(--forest); }
      .release-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
      @keyframes fp-dialog-in {
        from { opacity: 0; transform: translateY(8px) scale(0.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes fp-panel-in {
        from { opacity: 0; transform: translateY(10px) scale(0.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes fp-message-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes fp-confirm-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @media (max-width: 560px) {
        .release-heading { align-items: flex-start; flex-direction: column-reverse; }
        .release-list { grid-template-columns: 1fr; }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }
      .storage-problem{position:relative;z-index:30000;background:#fff2d7;border:2px solid #995400;padding:16px;color:#4b3200}.storage-problem p{margin:0 0 8px}.storage-problem button{margin-right:8px}
      #cashFlowCard{border:1px solid #94b89e}#cashFlowCard details{font-size:14px;line-height:1.6}.budget-table input[readonly]{background:#edf3ed;color:#315240}

.cash-flow-card .forecast-start-note{color:#e1eee5;line-height:1.55;margin:0 0 16px;max-width:620px}.cash-flow-card .empty-state,.cash-flow-card .empty-state h3{color:#edf7ef}.cash-flow-card details summary{cursor:pointer;padding:10px 0}.cash-flow-card details li{margin-bottom:8px}