:root {
    --color-primary: #5A189A;
    --color-primary-dark: #3C096C;
    --color-accent: #0A9396;
    --color-page: #F7F4FB;
    --color-surface: #FFFFFF;
    --color-text: #221C2B;
    --color-muted: #665C70;
    --color-border: #D9CFE6;
    --color-filled-input: #EEF3F7;
    --shadow-panel: 0 14px 40px rgba(60, 9, 108, 0.16);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-page);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

button,
input,
select {
    font: inherit;
}

input::placeholder {
    color: #777777;
    opacity: 1;
}

a {
    color: var(--color-primary);
}

:focus-visible {
    outline: 3px solid rgba(10, 147, 150, 0.72);
    outline-offset: 3px;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.module-cash-flow,
.module-income,
.module-expenses,
.module-budget,
.module-savings,
.module-balances,
.module-assets,
.module-credit,
.module-snapshots {
    overflow: hidden;
}

.module-cash-flow .app-shell,
.module-income .app-shell,
.module-expenses .app-shell,
.module-budget .app-shell,
.module-savings .app-shell,
.module-balances .app-shell,
.module-assets .app-shell,
.module-credit .app-shell,
.module-snapshots .app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.app-header {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 8px 12px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.account-header-slot {
    position: absolute;
    top: 50%;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: calc(50vw - 120px);
    transform: translateY(-50%);
    z-index: 2;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    pointer-events: none;
}

.brand-home-form {
    margin: 0;
}

.brand-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.brand-title {
    display: block;
    width: min(210px, calc(100vw - 136px));
    max-height: 44px;
    object-fit: contain;
}

.icon-menu-button {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.35rem;
    font-weight: 700;
}

.main-menu-button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.account-menu-button {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.account-menu-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    object-fit: contain;
}

.menu {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 5;
    width: min(280px, calc(100vw - 24px));
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-panel);
}

.account-menu {
    left: 12px;
    width: min(380px, calc(100vw - 24px));
}

.main-menu {
    right: 12px;
}

.menu a,
.menu button,
.menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible,
.menu button:not(:disabled):hover,
.menu button:not(:disabled):focus-visible {
    background: rgba(90, 24, 154, 0.12);
    color: var(--color-primary);
    cursor: pointer;
}

.menu button:disabled,
.module-grid button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.menu button.account-menu-user:disabled,
.menu button.account-menu-user:disabled:hover {
    width: calc(100% + 16px);
    margin: -8px -8px 0;
    border-radius: 8px 8px 0 0;
    background: var(--color-primary);
    color: #FFFFFF;
    cursor: default;
    font-weight: 700;
    opacity: 1;
}

.menu hr {
    height: 1px;
    margin: 8px 4px;
    border: 0;
    background: var(--color-border);
}

.passkey-label-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.passkey-label-row input {
    min-height: 38px;
    padding: 4px;
}

.app-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
}

.auth-view,
.home-view {
    width: min(100%, 920px);
}

.auth-panel {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-panel);
}

.login-panel {
    position: relative;
    width: min(100%, 830px);
    padding-top: 58px;
}

.titled-panel {
    position: relative;
    padding-top: 58px;
}

.manage-passkeys-panel {
    width: min(100%, 680px);
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.75fr) minmax(320px, 1.25fr);
    align-items: center;
    gap: 22px;
}

.login-brand-column,
.login-form-column {
    min-width: 0;
}

.login-brand-column {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: center;
    justify-items: center;
    gap: 14px;
    max-width: 260px;
}

.auth-logo {
    display: block;
    width: min(110px, 70vw);
    height: auto;
    margin: -8px auto 22px;
    object-fit: contain;
}

.auth-logo-link {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 6px;
}

.auth-logo-link .auth-logo {
    margin-right: auto;
    margin-left: auto;
}

.login-logo {
    width: min(170px, 100%);
    margin: 0 auto;
}

.create-account-button {
    width: min(220px, 100%);
}

.create-account-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 2px;
    width: max-content;
    max-width: 100%;
}

.create-account-mobile-text {
    display: none;
}

.create-account-prompt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
}

h1 {
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: 1.65rem;
    line-height: 1.2;
}

h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1.2;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}

.section-title-row h1,
.panel-title-badge {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 10px 20px 11px;
    border-radius: 8px 0 8px 0;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 1.25rem;
    margin-bottom: 0;
}

form {
    display: grid;
    gap: 8px;
}

label {
    color: var(--color-text);
    font-weight: 700;
}

input,
textarea {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--color-text);
}

select {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--color-text);
}

.date-input-control {
    position: relative;
    display: block;
    width: 100%;
}

.date-input-control input[data-date-input] {
    padding-right: 48px;
}

.date-picker-button,
.numeric-keypad-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42px;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0 6px 6px 0;
    background: #F6F0FB;
    color: var(--color-primary);
    cursor: pointer;
}

.date-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.date-picker-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.date-picker-button:hover,
.date-picker-button:focus-visible {
    background: rgba(90, 24, 154, 0.18);
}

.date-picker-native {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    min-width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.numeric-input-control {
    position: relative;
    display: block;
    min-width: 0;
    width: min(100%, 18ch);
}

.numeric-input-control input,
.money-input.has-numeric-keypad input,
.suffix-input.has-numeric-keypad input {
    padding-right: 48px;
}

.suffix-input.has-numeric-keypad input {
    padding-right: 72px;
}

.suffix-input.has-numeric-keypad .input-suffix {
    right: 50px;
}

.numeric-keypad-button {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    place-content: center;
    gap: 3px;
    pointer-events: none;
}

.numeric-keypad-button span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.numeric-keypad-button:hover,
.numeric-keypad-button:focus-visible {
    background: rgba(90, 24, 154, 0.18);
}

.suffix-input {
    position: relative;
    display: block;
    min-width: 0;
    width: min(100%, 11ch);
}

.suffix-input input {
    width: 100%;
    padding-right: 34px;
}

.input-suffix {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    color: var(--color-muted);
    font-weight: 700;
    transform: translateY(-50%);
    pointer-events: none;
}

.suffix-input.has-numeric-keypad input {
    padding-right: 72px;
}

.suffix-input.has-numeric-keypad .input-suffix {
    right: 50px;
}

input:focus,
select:focus {
    background: #FCFAFF;
    border-color: var(--color-accent);
}

input.has-value:not([type="checkbox"]):not([type="radio"]):not(:focus) {
    background-color: var(--color-filled-input);
    box-shadow: inset 0 0 0 1000px var(--color-filled-input) !important;
}

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #FFFFFF;
}

input.has-value:-webkit-autofill:not(:focus) {
    -webkit-box-shadow: inset 0 0 0 1000px var(--color-filled-input) !important;
}

.primary-button,
.secondary-button,
.passkey-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #FFFFFF;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.secondary-button {
    border: 1px solid var(--color-border);
    background: #FFFFFF;
    color: var(--color-primary);
}

.compact-button {
    min-height: 40px;
    margin-top: 0;
    padding-right: 18px;
    padding-left: 18px;
    white-space: nowrap;
}

.passkey-button {
    width: 100%;
    margin: 0 0 6px;
    background: var(--color-primary-dark);
}

.compact-passkey-button {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding-right: 18px;
    padding-left: 18px;
    white-space: nowrap;
}

.login-choice-divider {
    margin: -14px 0 12px;
    color: var(--color-muted);
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
}

.password-login-button {
    background: #FFFFFF;
    color: var(--color-primary);
}

.password-login-button:focus {
    background: var(--color-primary);
    color: #FFFFFF;
}

.is-login-screen .login-form-column .compact-passkey-button {
    width: 100%;
    background: var(--color-primary);
}

.passkey-button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.helper-text,
.status-message,
.offline-note,
.form-message {
    margin: 0 0 12px;
    color: var(--color-muted);
}

.form-message.is-error {
    color: #A11B1B;
    font-weight: 700;
}

.form-message.is-success {
    color: #126C38;
    font-weight: 700;
}

.account-create-panel {
    width: min(100%, 620px);
}

.compact-form {
    gap: 10px;
}

.field-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.field-row label {
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.field-row input {
    min-width: 0;
}

.field-row input:not([type="checkbox"]):not([type="radio"]),
.field-row select,
.field-row textarea,
.field-row .date-input-control,
.field-row .numeric-input-control,
.field-row .money-input,
.field-row .suffix-input,
.field-row .loan-term-controls {
    width: fit-content;
    max-width: 100%;
}

.field-row input:not([type="checkbox"]):not([type="radio"]) {
    width: min(100%, 24ch);
}

.field-row select {
    width: max-content;
    max-width: 100%;
}

.field-row textarea {
    width: min(100%, 54ch);
}

.field-row input[name="name"],
.field-row input[name="lender"],
.field-row input[name="financial_institution"],
.field-row input[name="account_number"],
.field-row input[name="user_id"],
.field-row input[name="display_name"],
.field-row input[name="email_address"] {
    width: min(100%, 24ch);
}

.account-form .field-row {
    grid-template-columns: 172px minmax(0, 1fr);
}

.account-form .checkbox-row {
    display: grid;
    margin: 0;
}

.account-form input[type="checkbox"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #FFFFFF;
}

.account-form input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    background: var(--color-primary);
    clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 18%, 84% 5%, 37% 69%);
}

.account-form input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.account-form input[name="name"],
.account-form input[name="financial_institution"],
.account-form input[name="website_url"],
.account-form input[name="account_number"] {
    width: min(100%, 36ch);
}

.account-form select[name="account_type"] {
    width: min(100%, 70ch);
}

.account-form .money-input input {
    text-align: right;
}

.account-form .form-actions {
    padding-left: 182px;
}

.bug-report-panel {
    width: min(100%, 720px);
}

.bug-report-form .field-row {
    grid-template-columns: 142px minmax(0, 1fr);
}

.bug-report-screenshot-row {
    align-items: start;
}

.bug-report-description-row {
    align-items: start;
}

.bug-report-form textarea {
    width: 100%;
    resize: vertical;
}

.bug-report-screenshot-box {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FFFFFF;
}

.bug-report-screenshot-controls {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: start;
    justify-items: start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.bug-report-file-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.bug-report-screenshot-controls .secondary-button {
    margin-top: 0;
}

.bug-report-file-note {
    margin: 0;
}

.bug-report-file-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    color: var(--color-muted);
}

.bug-report-form .form-actions {
    padding-left: 152px;
}

.bug-report-form.is-dragging-image .bug-report-screenshot-box {
    border-color: var(--color-accent);
    background: #FCFAFF;
}

.report-url-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.field-row input[name="points"],
.field-row input[name="term"],
.field-row input[name$="_day"],
.field-row input[name$="_month"],
.field-row input[name$="_month_1"],
.field-row input[name$="_month_2"],
.field-row input[name$="_month_3"],
.field-row input[name$="_month_4"] {
    width: min(100%, 8ch);
}

.field-row input[type="url"] {
    width: 100%;
}

.field-row input[data-date-input],
.field-row .date-input-control,
.field-row .numeric-input-control {
    width: min(100%, 18ch);
}

.field-row .numeric-input-control input {
    width: 100%;
}

.money-input {
    position: relative;
    display: block;
    min-width: 0;
    width: min(100%, 18ch);
}

.money-input input {
    width: 100%;
    padding-left: 30px;
}

.money-input.has-numeric-keypad {
    width: min(100%, 22ch);
}

.money-prefix {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--color-muted);
    font-weight: 700;
    transform: translateY(-50%);
    pointer-events: none;
}

.input-short {
    max-width: 24ch;
}

.input-phone {
    max-width: 16ch;
}

.password-control {
    position: relative;
    display: block;
    max-width: 34ch;
}

.password-control input {
    padding-right: 46px;
}

.password-control input.has-value:not(:focus) {
    background-color: var(--color-filled-input) !important;
    box-shadow: inset 0 0 0 1000px var(--color-filled-input) !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-manager-username {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.form-actions {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px;
    justify-content: end;
    justify-items: end;
    margin-top: 4px;
    padding-left: 138px;
}

.home-view {
    align-self: flex-start;
    padding: 12px 0;
}

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    align-items: stretch;
    gap: 12px;
    margin: 0 0 16px;
}

.dashboard-cash-flow-widget,
.dashboard-net-worth {
    min-width: 0;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-panel);
}

.dashboard-cash-flow-widget {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(150px, max-content);
    grid-template-rows: auto 1fr;
    align-items: center;
    align-content: start;
    justify-content: center;
    gap: 8px 18px;
}

.dashboard-cash-flow-widget h2 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-primary);
    font-size: 1.18rem;
    text-align: center;
}

.dashboard-summary-values {
    display: grid;
    gap: 8px;
    justify-content: start;
}

.dashboard-summary-values p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12ch;
    gap: 8px;
    align-items: baseline;
}

.dashboard-summary p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.dashboard-summary span {
    color: var(--color-primary);
}

.dashboard-summary-values span {
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dashboard-summary .is-income span,
.dashboard-summary .is-surplus span {
    color: #1f8f3a;
}

.dashboard-summary .is-expenses span,
.dashboard-summary .is-deficit span {
    color: #A11B1B;
}

.dashboard-gauge {
    width: min(100%, 220px);
}

.dashboard-gauge svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dashboard-gauge-track,
.dashboard-gauge-deficit-range,
.dashboard-gauge-surplus-range {
    fill: none;
}

.dashboard-gauge-track {
    stroke: #E8E0F1;
    stroke-linecap: round;
    stroke-width: 20;
}

.dashboard-gauge-deficit-range,
.dashboard-gauge-surplus-range {
    stroke-linecap: butt;
    stroke-width: 12;
}

.dashboard-gauge-deficit-range {
    stroke: #C53A3A;
}

.dashboard-gauge-surplus-range {
    stroke: #238A45;
}

.dashboard-gauge-tick {
    stroke: #665C70;
    stroke-linecap: round;
    stroke-width: 3;
}

.dashboard-gauge-needle {
    stroke: #238A45;
    stroke-linecap: round;
    stroke-width: 5;
    transition: transform 180ms ease, stroke 180ms ease;
}

.dashboard-gauge.is-deficit .dashboard-gauge-needle {
    stroke: #C53A3A;
}

.dashboard-gauge-hub {
    fill: var(--color-primary);
    stroke: #FFFFFF;
    stroke-width: 3;
}

.dashboard-gauge-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: -8px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.dashboard-gauge-labels span:nth-child(2) {
    text-align: center;
}

.dashboard-gauge-labels span:nth-child(3) {
    text-align: right;
}

.dashboard-gauge-value {
    margin: 2px 0 0;
    color: #238A45;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.dashboard-gauge.is-deficit .dashboard-gauge-value {
    color: #C53A3A;
}

.dashboard-net-worth {
    display: grid;
    gap: 10px;
    align-content: start;
}

.dashboard-net-worth-header {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.dashboard-net-worth h2,
.dashboard-net-worth p {
    margin: 0;
}

.dashboard-net-worth h2 {
    color: var(--color-primary);
    font-size: 1.35rem;
    text-align: center;
}

.dashboard-net-worth-ring {
    width: min(100%, 156px);
    height: auto;
    justify-self: center;
    overflow: visible;
}

.net-worth-ring-track,
.net-worth-ring-cash,
.net-worth-ring-retirement,
.net-worth-ring-assets,
.net-worth-ring-credit {
    fill: none;
    stroke-width: 16;
}

.net-worth-ring-track {
    stroke: #F0E8F6;
}

.net-worth-ring-cash,
.net-worth-ring-retirement,
.net-worth-ring-assets,
.net-worth-ring-credit {
    stroke-linecap: butt;
    transform: rotate(-90deg);
    transform-origin: 70px 70px;
}

.net-worth-ring-cash,
.legend-swatch.is-cash {
    stroke: #238A45;
    background: #238A45;
}

.net-worth-ring-retirement,
.legend-swatch.is-retirement {
    stroke: #F2C94C;
    background: #F2C94C;
}

.net-worth-ring-assets,
.legend-swatch.is-assets {
    stroke: #0000ff;
    background: #0000ff;
}

.net-worth-ring-credit,
.legend-swatch.is-credit {
    stroke: #C53A3A;
    background: #C53A3A;
}

.net-worth-ring-label,
.net-worth-ring-value {
    fill: var(--color-text);
    font-weight: 800;
    text-anchor: middle;
}

.net-worth-ring-label {
    fill: var(--color-muted);
    font-size: 0.72rem;
}

.net-worth-ring-value {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
}

.dashboard-net-worth-legend {
    display: grid;
    gap: 8px;
}

.dashboard-net-worth-legend p {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 12ch;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.legend-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-net-worth-legend strong {
    color: var(--color-text);
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    justify-self: end;
    min-width: 0;
    text-align: right;
}

.dashboard-net-worth-legend [data-dashboard-cash-total],
.dashboard-net-worth-legend [data-dashboard-retirement-total],
.dashboard-net-worth-legend [data-dashboard-asset-total] {
    color: #238A45;
}

.dashboard-net-worth-legend [data-dashboard-credit-total] {
    color: #C53A3A;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-heading-row form {
    margin: 0;
}

.income-list-panel > .section-heading-row,
.expense-list-panel > .section-heading-row,
.account-list-panel > .section-heading-row,
.asset-list-panel > .section-heading-row {
    justify-content: flex-end;
}

.passkey-manager {
    margin-bottom: 18px;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.titled-panel .passkey-manager {
    margin-bottom: 0;
    padding: 0;
    border: 0;
}

.passkey-add-section {
    margin-bottom: 14px;
}

.subsection-title {
    margin: 14px 0 8px;
}

.passkey-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.passkey-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FFFFFF;
}

.passkey-row-details {
    min-width: 0;
}

.passkey-meta {
    display: block;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.icon-action-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--color-primary);
    cursor: pointer;
}

.icon-action-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.danger-icon-button {
    color: #A11B1B;
}

.url-icon-button {
    color: #147DCC;
}

.danger-action-button {
    color: #A11B1B;
}

.account-menu-user {
    font-weight: 700;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(34, 28, 43, 0.42);
}

.app-modal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    width: min(100%, 640px);
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.app-modal-logo {
    display: none;
    width: 100%;
    max-width: 85px;
    height: auto;
    justify-self: center;
}

.app-modal-content h2 {
    margin-bottom: 8px;
}

.app-modal-content p {
    margin: 0;
    color: var(--color-text);
}

.app-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.app-message-box {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: min(100%, 420px);
}

.app-message-box .app-modal-content {
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
    min-height: 100%;
}

.app-message-box .app-modal-content h2 {
    color: #A11B1B;
}

.app-message-box.is-message-info,
.app-message-box.is-message-question,
.app-message-box.is-message-warning,
.app-message-box.is-message-error {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 50px auto auto;
    padding: 0;
    border: 2px solid var(--color-primary);
}

.app-message-box.is-message-info .app-modal-content,
.app-message-box.is-message-question .app-modal-content,
.app-message-box.is-message-warning .app-modal-content,
.app-message-box.is-message-error .app-modal-content {
    display: contents;
}

.app-message-box .app-message-box-caption {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    place-items: center;
    align-self: start;
    justify-self: stretch;
    min-height: 50px;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-weight: 800;
    text-align: center;
}

.app-message-box.is-message-info .app-message-box-caption {
    background: var(--color-primary);
}

.app-message-box.is-message-question .app-message-box-caption {
    background: #238A45;
}

.app-message-box.is-message-warning .app-message-box-caption {
    background: #D8A800;
}

.app-message-box.is-message-error .app-message-box-caption {
    background: #A11B1B;
}

.app-message-box .app-modal-content .app-message-box-caption {
    color: #FFFFFF;
}

.app-message-box.is-message-info [data-app-message-box-text],
.app-message-box.is-message-question [data-app-message-box-text],
.app-message-box.is-message-warning [data-app-message-box-text],
.app-message-box.is-message-error [data-app-message-box-text] {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    padding: 12px 24px;
}

.app-message-box .app-modal-actions {
    grid-template-columns: repeat(2, max-content);
    justify-self: stretch;
    justify-content: end;
    align-self: end;
}

.app-message-box.is-message-info .app-modal-actions,
.app-message-box.is-message-question .app-modal-actions,
.app-message-box.is-message-warning .app-modal-actions,
.app-message-box.is-message-error .app-modal-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 0 24px 16px;
}

.app-review-modal {
    max-height: calc(100dvh - 32px);
}

.app-review-modal .app-modal-content {
    min-width: 0;
}

.app-review-modal .balance-scan-review {
    max-height: min(52dvh, 520px);
    overflow-y: auto;
    padding-right: 2px;
}

.app-review-modal .balance-scan-row label {
    overflow-wrap: anywhere;
}

.app-footer {
    padding: 12px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: center;
}

.app-footer a {
    color: var(--color-primary);
}

.legal-main {
    align-items: stretch;
    padding: 18px 12px;
}

.legal-document {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.legal-document h1 {
    margin-bottom: 14px;
    color: var(--color-primary);
    font-size: 1.7rem;
}

.legal-document h2 {
    margin: 22px 0 8px;
    color: var(--color-primary);
    font-size: 1.15rem;
}

.legal-document p {
    margin: 0 0 12px;
    line-height: 1.55;
}

.terms-checkbox-row {
    align-items: flex-start;
    font-weight: 600;
    line-height: 1.35;
}

.terms-accept-panel {
    display: grid;
    gap: 12px;
    width: min(100%, 520px);
}

.terms-accept-panel .auth-logo {
    justify-self: center;
}

.terms-accept-panel > form:last-child {
    justify-self: center;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.module-grid.has-medium-icons {
    grid-template-columns: repeat(auto-fit, minmax(101px, 1fr));
    gap: 10px;
}

.module-grid.has-small-icons {
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 4px;
}

.module-grid form {
    margin: 0;
}

.module-grid.is-dashboard-reordering {
    user-select: none;
}

.module-grid form.is-dashboard-dragging {
    opacity: 0.55;
}

.module-grid a,
.module-grid button {
    display: grid;
    grid-template-rows: 59px auto;
    align-items: center;
    justify-items: center;
    gap: 10px;
    min-height: 128px;
    padding: 14px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.module-grid.has-medium-icons a,
.module-grid.has-medium-icons button {
    grid-template-rows: 40px auto;
    gap: 7px;
    min-height: 86px;
    padding: 10px 8px;
}

.module-grid.has-small-icons a,
.module-grid.has-small-icons button {
    grid-template-rows: 15px auto;
    gap: 3px;
    min-height: 32px;
    padding: 4px 3px;
}

.module-grid img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.module-grid.has-medium-icons img {
    width: 39px;
    height: 39px;
}

.module-grid.has-small-icons img {
    width: 15px;
    height: 15px;
}

.module-grid span {
    display: block;
    line-height: 1.2;
}

.module-grid.has-medium-icons span {
    font-size: 0.9rem;
}

.module-grid.has-small-icons span {
    font-size: 0.65rem;
}

.module-placeholder {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(100%, 520px);
    padding: 24px 16px;
    text-align: center;
}

.module-placeholder img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.module-placeholder p {
    margin: 0;
    color: var(--color-muted);
}

.snapshot-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
    width: min(100%, 1180px);
}

.snapshot-title-row {
    grid-template-columns: 72px minmax(0, 1fr) max-content;
}

.snapshot-title-row [data-snapshot-create] {
    width: max-content;
    min-width: max-content;
}

.snapshot-desktop-create-button {
    grid-column: 3;
    justify-self: end;
    gap: 8px;
}

.snapshot-desktop-create-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.snapshot-mobile-title-row {
    display: block;
}

.snapshot-mobile-actions,
.snapshot-mobile-menu,
.snapshot-mobile-camera-button {
    display: none;
}

.snapshot-mobile-camera-button svg,
.snapshot-mobile-delete-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.snapshot-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.snapshot-list-panel,
.snapshot-detail-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    overflow: hidden;
}

.snapshot-detail-panel {
    padding-left: 32px;
}

.snapshot-list-scroll,
.snapshot-detail-scroll {
    display: grid;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    border: 1px solid #C8CDD5;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 8px;
    background: #FFFFFF;
}

.snapshot-list-panel h2,
.snapshot-detail-heading,
.snapshot-section h3 {
    margin: 0;
}

.snapshot-list-panel h2,
.snapshot-detail-heading {
    padding: 4px 7px;
    border-radius: 6px 6px 0 0;
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 800;
}

.snapshot-section h3,
.snapshot-raw-data summary {
    padding: 4px 7px;
    border-radius: 6px 6px 0 0;
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 800;
}

.snapshot-section h3 {
    margin: -14px 0 0;
}

.snapshot-raw-data summary {
    margin: -14px -14px 0;
}

.snapshot-list {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.snapshot-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: start;
}

.snapshot-select-button {
    display: grid;
    align-self: start;
    align-content: start;
    gap: 0;
    min-width: 0;
    height: max-content;
    padding: 16px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.snapshot-list-item.is-selected .snapshot-select-button,
.snapshot-select-button:hover,
.snapshot-select-button:focus-visible {
    border-color: var(--color-primary);
}

.snapshot-select-button strong,
.snapshot-select-button span,
.snapshot-select-button small {
    display: block;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.snapshot-select-button small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 16px;
    color: var(--color-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.snapshot-select-button span {
    margin-top: 16px;
}

.snapshot-checkpoint-header,
.snapshot-section,
.snapshot-raw-data {
    padding: 14px 14px 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.snapshot-section {
    padding-right: 0;
    padding-left: 0;
}

.snapshot-checkpoint-header {
    display: grid;
    gap: 0;
    padding: 16px;
}

.snapshot-checkpoint-header p,
.snapshot-checkpoint-header h2,
.snapshot-note {
    margin: 0;
}

.snapshot-checkpoint-header h2 {
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.snapshot-note {
    margin-top: 16px;
    padding: 0;
    line-height: 1.25;
}

.snapshot-checkpoint-header h2 + .snapshot-note {
    margin-top: 16px;
}

.snapshot-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.snapshot-summary-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.snapshot-summary-grid span,
.snapshot-trend-list dt {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.snapshot-summary-grid span {
    font-weight: 800;
}

.snapshot-summary-grid strong {
    overflow-wrap: anywhere;
    font-size: 1.15rem;
    text-align: center;
}

.snapshot-summary-grid strong.is-positive {
    color: #238A45;
}

.snapshot-summary-grid strong.is-zero {
    color: var(--color-text);
}

.snapshot-summary-grid strong.is-negative {
    color: #A11B1B;
}

.snapshot-trend-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 8px 0 0;
}

.snapshot-trend-list div {
    display: grid;
    grid-template-rows: 2.4em auto;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    border-left: 1px solid var(--color-border);
}

.snapshot-trend-list div:first-child {
    border-left: 0;
}

.snapshot-trend-list dt {
    align-self: center;
    color: var(--color-text);
    font-weight: 800;
    text-align: center;
}

.snapshot-trend-list dd {
    margin: 0;
    color: #238A45;
    font-weight: 700;
    text-align: center;
}

.snapshot-record-list {
    display: grid;
    gap: 0;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.snapshot-record-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 12px;
    padding: 3px 4px 3px 8px;
    border-bottom: 1px solid var(--color-border);
}

.snapshot-record-list li:last-child {
    border-bottom: 0;
}

.snapshot-record-list li:nth-child(odd) {
    background: #FFFFFF;
}

.snapshot-record-list li:nth-child(even) {
    background: #F3F4F6;
}

.snapshot-record-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.snapshot-raw-data pre {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
}

.snapshot-raw-data summary {
    cursor: pointer;
}

.snapshot-form-modal .form-grid {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.snapshot-form-modal input,
.snapshot-form-modal textarea {
    font-size: 16px;
    line-height: 1.35;
}

.module-main {
    align-items: flex-start;
    justify-content: center;
}

.module-cash-flow .module-main,
.module-income .module-main,
.module-expenses .module-main,
.module-budget .module-main,
.module-savings .module-main,
.module-balances .module-main,
.module-assets .module-main,
.module-credit .module-main,
.module-snapshots .module-main {
    min-height: 0;
    padding-bottom: 16px;
    overflow: hidden;
}

.income-view,
.expense-view,
.account-view,
.balances-view,
.asset-view,
.credit-view,
.loan-calculator-view,
.cash-flow-view,
.bug-report-view {
    width: min(100%, 980px);
    min-width: 0;
    padding: 10px 0;
}

.cash-flow-view {
    display: flex;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
    flex-direction: column;
    overflow: hidden;
}

.income-view,
.expense-view,
.account-view,
.balances-view,
.asset-view,
.credit-view {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: visible;
}

.module-title-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.module-title-row img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.dashboard-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 6px;
}

.dashboard-icon-form {
    margin: 0;
}

button.dashboard-icon-link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.dashboard-icon-link img {
    display: block;
}

.module-title-row h1 {
    margin-bottom: 4px;
}

.income-summary-title-row,
.expense-summary-title-row,
.account-summary-title-row,
.asset-summary-title-row,
.cash-flow-title-row {
    grid-template-columns: 72px minmax(0, 1fr) max-content;
}

.income-monthly-total,
.expense-monthly-total,
.account-total,
.asset-total {
    margin: 0;
    align-self: center;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}

.expense-monthly-total {
    display: grid;
    gap: 3px;
    min-width: 260px;
    font-size: 0.98rem;
}

.expense-monthly-total div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12ch;
    gap: 14px;
    align-items: baseline;
}

.expense-monthly-total dt,
.expense-monthly-total dd {
    margin: 0;
}

.expense-monthly-total dd {
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.income-monthly-total span,
.expense-monthly-total dd,
.account-total span,
.asset-total span {
    color: #1f8f3a;
}

.asset-total span {
    color: #147D8F;
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.account-balance-summary {
    display: grid;
    gap: 3px;
    min-width: 260px;
    margin: 0;
    align-self: center;
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.account-balance-summary div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12ch;
    gap: 14px;
    align-items: baseline;
}

.account-balance-summary dt,
.account-balance-summary dd {
    margin: 0;
}

.account-balance-summary dd {
    color: #1f8f3a;
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.credit-balance-summary dd {
    color: #147D8F;
}

.account-balance-total {
    margin-top: 3px;
    padding-top: 5px;
    border-top: 2px solid var(--color-border);
}

.income-layout,
.expense-layout,
.account-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.income-list-panel,
.expense-list-panel,
.account-list-panel,
.asset-list-panel,
.income-form-panel,
.expense-form-panel,
.account-form-panel,
.asset-form-panel,
.bug-report-panel,
.cash-flow-panel,
.loan-calculator-panel,
.loan-results {
    min-width: 0;
    max-width: 100%;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-panel);
}

.income-list-panel,
.expense-list-panel,
.account-list-panel,
.asset-list-panel,
.balances-form-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.expense-list-panel,
.account-list-panel,
.asset-list-panel,
.balances-form-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

.income-list-panel > .section-heading-row,
.expense-list-panel > .section-heading-row,
.account-list-panel > .section-heading-row,
.asset-list-panel > .section-heading-row,
.balances-form-panel > h2,
.balances-form-panel > .balances-scan-actions,
.income-list-panel > .checkbox-row,
.expense-list-panel > .checkbox-row,
.account-list-panel > .checkbox-row,
.asset-list-panel > .checkbox-row,
.income-list-panel > .helper-text,
.expense-list-panel > .helper-text,
.account-list-panel > .helper-text,
.asset-list-panel > .helper-text,
.balances-form-panel .form-actions,
.balances-form-panel > .balances-form > .helper-text {
    margin-right: 10px;
    margin-left: 10px;
}

.income-list-panel > .section-heading-row,
.expense-list-panel > .section-heading-row,
.account-list-panel > .section-heading-row,
.asset-list-panel > .section-heading-row,
.balances-form-panel > .balances-scan-actions {
    margin-top: 10px;
}

.cash-flow-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.loan-calculator-panel {
    margin-bottom: 16px;
}

.balances-form-panel {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: var(--shadow-panel);
    overflow: visible;
}

.balances-form-panel h2 {
    margin-top: 0;
    color: var(--color-primary);
}

.balances-form {
    display: grid;
    flex: 1 1 auto;
    gap: 14px;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 0;
}

.balances-scan-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    margin: 10px 10px 12px;
}

.balances-scan-actions .helper-text {
    flex: 1 1 260px;
    margin: 0;
}

.balances-scan-menu-wrap {
    position: relative;
}

.balances-scan-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.balances-scan-menu button {
    min-height: 38px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.balances-scan-menu button:hover,
.balances-scan-menu button:focus-visible {
    background: #F6F0FB;
    color: var(--color-primary);
}

.balances-form-panel .form-actions {
    display: flex;
    justify-content: flex-end;
    padding-left: 0;
}

.balance-scan-review {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.balance-scan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18ch;
    gap: 10px;
    align-items: center;
}

.balance-scan-row label {
    font-weight: 700;
}

.balance-scan-row input {
    width: 100%;
}

.cash-flow-summary {
    display: grid;
    gap: 3px;
    min-width: 270px;
    margin: 0;
    align-self: center;
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.cash-flow-summary div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12ch;
    gap: 14px;
    align-items: baseline;
}

.cash-flow-summary dt,
.cash-flow-summary dd {
    margin: 0;
}

.cash-flow-summary dd {
    color: #1f8f3a;
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cash-flow-summary dd.is-negative,
.cash-flow-table .is-negative {
    color: #b3261e;
}

.cash-flow-range {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

[data-cash-flow-account] {
    margin-bottom: 0;
    font-weight: 700;
}

.cash-flow-list {
    display: grid;
    flex: 1 1 auto;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.cash-flow-month.is-month-white .cash-flow-table td {
    background: #FFFFFF;
}

.cash-flow-month.is-month-green .cash-flow-table td {
    background: #EFF8EE;
}

.cash-flow-month .cash-flow-table .cash-flow-date-row td {
    padding: 4px 8px;
    background: #6F2DA8;
    color: #FFFFFF;
    font-weight: 700;
}

.cash-flow-table-wrap {
    max-width: 100%;
}

.cash-flow-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.cash-flow-table th,
.cash-flow-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.cash-flow-table th {
    color: var(--color-muted);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cash-flow-table th:nth-child(2) {
    text-align: right;
}

.cash-flow-table .amount-cell {
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
}

.cash-flow-income-row .amount-cell {
    color: #1f8f3a;
    font-weight: 800;
}

.cash-flow-expense-row .amount-cell,
.cash-flow-table .is-negative {
    color: #b3261e;
    font-weight: 800;
}

.cash-flow-balance-row td {
    border-top: 2px solid var(--color-border);
}

.cash-flow-balance-row td:first-child {
    font-style: italic;
    font-weight: 500;
}

.cash-flow-balance-row .amount-cell {
    color: var(--color-text);
    font-style: italic;
    font-weight: 500;
}

.balances-list {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 4px;
    border-top: 1px solid var(--color-border);
    scrollbar-gutter: stable;
}

.balances-group-heading {
    margin: 0;
    padding: 4px;
    background: #6F2DA8;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
}

.balances-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 18ch);
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 4px;
    border: solid var(--color-border);
    border-width: 1px 0;
    border-radius: 0;
    background: #FFFFFF;
}

.balances-row.has-url {
    grid-template-columns: minmax(0, 1fr) auto minmax(150px, 18ch);
}

.balances-row + .balances-row {
    margin-top: -1px;
}

.balances-row label {
    min-width: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.balances-name-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
}

.balances-name-line span:not(.account-retirement-icon):not(.account-dollar-icon) {
    min-width: 0;
    color: inherit;
    font-size: inherit;
    overflow-wrap: anywhere;
    white-space: normal;
}

.balances-name-line .account-retirement-icon,
.balances-name-line .account-dollar-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: #238A45;
}

.balances-money-input {
    width: min(100%, 18ch);
}

.balances-money-input input {
    font-family: Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.loan-calculator-form {
    gap: 14px;
    font-size: 0.92rem;
}

.loan-calculator-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, max-content));
    gap: 12px 14px;
    align-items: start;
}

.loan-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.loan-money-input,
.loan-rate-input,
.loan-term-controls {
    width: fit-content;
    max-width: 100%;
}

.loan-principal-input {
    max-width: 18ch;
}

.loan-rate-input {
    max-width: 18ch;
}

.loan-escrow-input {
    max-width: 14ch;
}

.loan-term-controls {
    display: grid;
    grid-template-columns: minmax(12ch, 14ch) max-content;
    gap: 8px;
    max-width: 100%;
}

.loan-term-controls .numeric-input-control {
    width: 100%;
}

.loan-calculator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loan-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}

.loan-summary-grid div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #FCFAFF;
}

.loan-summary-grid dt {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.loan-summary-grid dd {
    margin: 2px 0 0;
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 800;
}

.loan-table-wrap {
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, 620px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.loan-schedule-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    background: #FFFFFF;
    font-size: 0.8rem;
}

.loan-schedule-table caption {
    position: sticky;
    left: 0;
    z-index: 3;
    padding: 10px 12px;
    background: #FFFFFF;
    color: var(--color-primary);
    font-weight: 800;
    text-align: left;
}

.loan-schedule-table th,
.loan-schedule-table td {
    padding: 6px 7px;
    border-top: 1px solid var(--color-border);
    text-align: right;
    white-space: nowrap;
}

.loan-schedule-table th:first-child,
.loan-schedule-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    text-align: center;
}

.loan-schedule-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 800;
    line-height: 1.15;
}

.loan-schedule-table th:first-child {
    z-index: 4;
    background: var(--color-primary);
}

.loan-schedule-table tbody tr:nth-child(even) td:first-child {
    background: #FCFAFF;
}

.loan-schedule-table tbody tr:nth-child(even) {
    background: #FCFAFF;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-weight: 700;
}

.checkbox-row input {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
}

.credit-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #FFFFFF;
    background-color: #FFFFFF;
    box-shadow: none;
}

.credit-form input[type="checkbox"]:not(:checked) {
    background: #FFFFFF;
    background-color: #FFFFFF;
    box-shadow: none;
}

.credit-form input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    background: var(--color-primary);
    clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 18%, 84% 5%, 37% 69%);
}

.credit-form input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.credit-form input[type="checkbox"]:indeterminate::before {
    transform: scale(0);
}

.radio-choice-group {
    display: grid;
    gap: 10px;
}

.radio-choice-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.radio-choice-group input {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
}

.checkbox-row-offset {
    margin-left: 138px;
}

.income-list,
.expense-list,
.account-list,
.asset-list {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 4px;
    border-top: 1px solid var(--color-border);
    list-style: none;
    scrollbar-gutter: stable;
}

.income-list-heading,
.expense-list-heading,
.account-list-heading {
    padding: 4px;
    background: #6F2DA8;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
}

.income-list-item,
.expense-list-item,
.account-list-item,
.asset-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 0;
    padding: 4px;
    border: solid var(--color-border);
    border-width: 1px 0;
    border-radius: 0;
    background: #FFFFFF;
}

.income-list-item + .income-list-item,
.expense-list-item + .expense-list-item,
.account-list-item + .account-list-item,
.asset-list-item + .asset-list-item {
    margin-top: -1px;
}

.income-list-item.is-selected,
.expense-list-item.is-selected,
.account-list-item.is-selected {
    border-color: var(--color-primary);
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.income-list-item.is-hidden-income,
.expense-list-item.is-hidden-expense,
.account-list-item.is-hidden-account {
    background: #F6F1FA;
}

.income-list-item:hover,
.expense-list-item:hover,
.account-list-item:hover,
.asset-list-item:hover,
.income-list-item:focus-within,
.expense-list-item:focus-within,
.account-list-item:focus-within,
.asset-list-item:focus-within {
    background: #F7F4FB;
}

.income-select-button,
.expense-select-button,
.account-select-button,
.asset-select-button {
    display: block;
    align-self: center;
    min-width: 0;
    width: 100%;
    height: max-content;
    min-height: 0;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    overflow: visible;
    white-space: normal;
}

.income-select-button:hover,
.expense-select-button:hover,
.account-select-button:hover,
.asset-select-button:hover,
.income-select-button:focus-visible,
.expense-select-button:focus-visible,
.account-select-button:focus-visible,
.asset-select-button:focus-visible {
    background: transparent;
}

.income-select-button strong,
.expense-select-button strong,
.account-select-button strong,
.asset-select-button strong,
.income-select-button span,
.expense-select-button span,
.account-select-button span,
.asset-select-button span {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

.income-select-button span,
.expense-select-button span,
.account-select-button span,
.asset-select-button span {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.account-select-button .account-name-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
}

.account-name-line span:not(.account-retirement-icon):not(.account-dollar-icon) {
    min-width: 0;
    color: inherit;
    font-size: inherit;
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-name-line .account-retirement-icon,
.account-name-line .account-dollar-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: #238A45;
}

.account-dollar-icon svg,
.account-retirement-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.income-row-actions,
.expense-row-actions {
    display: flex;
    align-self: center;
    gap: 4px;
    margin-right: 0;
}

.account-row-actions {
    display: flex;
    align-self: center;
    gap: 4px;
    margin-right: 0;
}

.asset-row-actions {
    display: flex;
    align-self: center;
    gap: 4px;
}

[data-credit-list] .asset-row-actions {
    margin-right: 0;
}

.income-row-actions .danger-icon-button,
.expense-row-actions .danger-icon-button,
.account-row-actions .danger-icon-button,
.asset-row-actions .danger-icon-button {
    margin-right: 6px;
}

.income-form,
.expense-form,
.account-form,
.asset-form {
    margin-top: 12px;
}

.monthly-schedule-panel {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.preferences-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: calc(100dvh - 168px);
    margin-top: 12px;
    min-height: 0;
}

.preferences-scroll {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.preferences-icon-size-row {
    grid-template-columns: max-content max-content;
    justify-content: start;
}

.preferences-icon-size-row label {
    text-align: left;
}

.preferences-category-header {
    margin: 2px 0 0;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
}

.preferences-icon-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.preferences-icon-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.preferences-icon-item.is-dragging {
    opacity: 0.55;
}

.preferences-drag-handle {
    justify-self: end;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #F7F4FB;
    color: var(--color-primary);
    cursor: grab;
    font-size: 1.1rem;
    line-height: 1;
}

.preferences-icon-item .checkbox-row {
    align-items: center;
    margin: 0;
}

.preferences-drag-handle:active {
    cursor: grabbing;
}

.monthly-schedule-panel legend {
    padding: 0 6px;
    color: var(--color-primary);
    font-weight: 700;
}

.inline-control-row {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px;
    max-width: 100%;
}

.inline-control-row select {
    max-width: min(42vw, 18ch);
}

.income-edit-view,
.expense-edit-view,
.asset-edit-view {
    width: min(100%, 720px);
}

.account-edit-view {
    width: min(100%, 900px);
}

.module-budget {
    background: #E8EDF4;
}

.module-budget .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
}

.module-budget .account-header-slot {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    transform: none;
    max-width: none;
}

.module-budget .brand {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: center;
    justify-content: flex-start;
    padding-left: 58px;
}

.module-budget .brand-title {
    width: min(300px, calc(100vw - 230px));
}

.module-budget .main-menu-button {
    position: static;
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    transform: none;
}

.budget-view {
    display: flex;
    flex-direction: column;
    width: min(100%, 1220px);
    height: calc(100% - 16px);
    min-height: 0;
    margin: 0 auto 16px;
    padding: 14px 18px 22px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #9BAFC8;
    border-radius: 8px;
    color: #071F4A;
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.budget-date-control {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 40px;
    color: #071F4A;
    font-size: 1rem;
}

.budget-calendar-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #071F4A;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.budget-calendar-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid #071F4A;
    border-radius: 3px;
}

.budget-calendar-icon::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -2px;
    right: -2px;
    border-top: 2px solid #071F4A;
}

.budget-calendar-icon::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 4px;
    width: 10px;
    height: 6px;
    border-right: 2px solid #071F4A;
    border-left: 2px solid #071F4A;
}

.budget-date-input {
    position: absolute;
    inset: 0 auto auto 0;
    width: 30px;
    height: 30px;
    opacity: 0;
    pointer-events: none;
}

.budget-top-summary,
.budget-section,
.budget-monthly-summary {
    border: 1px solid #C8CDD5;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 10px rgba(7, 31, 74, 0.05);
}

.budget-top-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1.35fr) 42px minmax(0, 1.35fr) 42px minmax(0, 1fr);
    flex: 0 0 auto;
    margin: 0 0 14px;
    padding: 14px 0;
}

.budget-top-summary-cell {
    display: grid;
    grid-template-rows: minmax(32px, auto) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 16px;
    text-align: center;
}

.budget-top-summary-operator {
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 0;
    color: #111111;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(20px);
}

.budget-top-summary dt {
    align-self: end;
    color: #071F4A;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.budget-top-summary dd {
    align-self: center;
    margin: 0;
    color: #13711F;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.45rem;
}

.budget-top-summary dd[data-budget-top-surplus],
.budget-surplus-box strong {
    color: #13711F;
    font-weight: 800;
}

.budget-top-summary dd.is-deficit,
.budget-surplus-box strong.is-deficit {
    color: #A51D2D;
}

.budget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 14px 8px;
}

.budget-workarea {
    min-height: 0;
    overflow: auto;
}

.budget-section {
    min-height: 0;
    padding: 8px 12px 10px;
}

.budget-section h2,
.budget-monthly-summary h2 {
    margin: -8px -12px 6px;
    padding: 4px 12px;
    border-radius: 8px 8px 0 0;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.budget-column-head,
.budget-item-row,
.budget-section-total {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 108px;
    align-items: center;
    column-gap: 4px;
}

.budget-column-head {
    padding: 3px 0 6px;
    border-top: 1px solid #D6DAE0;
    border-bottom: 1px solid #C8CDD5;
    font-size: 0.86rem;
    font-weight: 800;
}

.budget-column-head span:first-child,
.budget-section-total span:first-child {
    grid-column: 1 / 3;
}

.budget-column-head span:last-child,
.budget-section-total span:last-child {
    text-align: right;
}

.budget-item-row {
    min-height: 24px;
    background: #FFFFFF;
    color: #111111;
    cursor: grab;
}

.budget-item-row:focus-within {
    background: #F0F0F0;
}

.budget-item-row.is-dragging,
.budget-item-row.is-touch-dragging {
    opacity: 0.55;
}

.budget-item-row.is-placeholder {
    color: #8A8F97;
    cursor: text;
    font-style: italic;
    font-weight: 700;
}

.budget-item-row.is-editing-placeholder {
    color: #111111;
    font-style: normal;
    font-weight: 400;
}

.budget-row-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8A1F2D;
    cursor: pointer;
    font-family: "Segoe UI", Inter, Arial, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    appearance: none;
}

.budget-item-row.is-placeholder .budget-row-marker {
    color: #8A1F2D;
    font-style: normal;
    font-weight: 800;
}

.budget-plus,
.budget-delete-button {
    color: #8A1F2D;
}

.budget-item-description,
.budget-item-amount {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 0;
    outline-offset: 0;
    background: transparent;
    color: inherit;
    box-shadow: none !important;
    line-height: 24px;
}

.budget-delete-button {
    color: #8A1F2D;
}

.budget-plus:hover,
.budget-plus:focus-visible,
.budget-delete-button:hover,
.budget-delete-button:focus-visible {
    background: transparent;
}

.budget-item-description.has-value:not(:focus),
.budget-item-amount.has-value:not(:focus),
.budget-item-description:-webkit-autofill,
.budget-item-amount:-webkit-autofill {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.budget-item-row:focus-within .budget-item-description,
.budget-item-row:focus-within .budget-item-amount {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

input.budget-item-description.has-value:not([type="checkbox"]):not([type="radio"]):not(:focus),
input.budget-item-amount.has-value:not([type="checkbox"]):not([type="radio"]):not(:focus) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.budget-item-description {
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.budget-item-amount {
    font-family: Consolas, "Courier New", monospace;
    text-align: right;
}

.budget-item-description:focus,
.budget-item-amount:focus {
    outline: 1px dotted #9BAFC8;
}

.budget-item-row.is-placeholder input::placeholder {
    color: #8A8F97;
    font-style: italic;
    opacity: 1;
}

.budget-section-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #C8CDD5;
    font-weight: 800;
}

.budget-section-total + .budget-section-total {
    margin-top: 0;
    padding-top: 3px;
    border-top: 0;
}

.budget-section-total span:last-child {
    font-family: Consolas, "Courier New", monospace;
}

.budget-monthly-summary {
    margin-top: 14px;
    padding: 12px 14px;
}

.budget-monthly-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 28px;
}

.budget-monthly-summary dl {
    margin: 0;
}

.budget-monthly-summary dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 12px;
    align-items: baseline;
}

.budget-monthly-summary dt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: #111111;
    font-size: 0.92rem;
}

.budget-monthly-summary dt::after {
    content: "";
    flex: 1;
    min-width: 20px;
    border-bottom: 1px dotted #555555;
}

.budget-monthly-summary dd {
    margin: 0;
    color: #111111;
    font-family: Consolas, "Courier New", monospace;
    text-align: right;
}

.budget-obligation-summary {
    display: grid;
    align-content: start;
    gap: 18px;
}

.budget-obligation-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #AEB7C3;
    font-weight: 900;
    text-transform: uppercase;
}

.budget-surplus-box {
    padding: 12px;
    border: 1px solid #D3BA76;
    border-radius: 6px;
    background: #F4EEDD;
    text-align: center;
}

.budget-surplus-box h3 {
    margin: 0 0 6px;
    color: #111111;
    font-size: 1rem;
    text-transform: uppercase;
}

.budget-surplus-box p {
    margin: 0;
    color: #111111;
    font-family: Consolas, "Courier New", monospace;
}

.budget-surplus-box strong {
    margin-left: 12px;
    font-size: 1.45rem;
}

.budget-edit-modal {
    width: min(92vw, 560px);
}

.budget-detail-form {
    margin-top: 8px;
}

.account-edit-view .account-form input[name="name"],
.account-edit-view .account-form input[name="financial_institution"],
.account-edit-view .account-form input[name="website_url"],
.account-edit-view .account-form input[name="account_number"] {
    width: min(100%, 36ch);
}

@media (min-width: 641px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select {
        -moz-appearance: textfield;
    }

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

    input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

}

@media (max-width: 820px) and (min-width: 641px) {
    .dashboard-cash-flow-widget {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .dashboard-summary-values {
        justify-self: center;
        width: min(100%, 180px);
    }
}

@media (max-width: 640px) {
    .app-main {
        padding-top: 4px;
    }

    .home-view {
        padding-top: 4px;
    }

    .dashboard-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .dashboard-cash-flow-widget {
        grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
        gap: 4px 6px;
        padding: 8px 6px;
    }

    .dashboard-net-worth {
        gap: 6px;
        padding: 8px 6px;
    }

    .dashboard-cash-flow-widget h2 {
        font-size: 0.9rem;
    }

    .dashboard-summary-values {
        gap: 4px;
        justify-content: start;
    }

    .dashboard-summary-values p {
        grid-template-columns: minmax(0, 1fr) 8ch;
        gap: 4px;
    }

    .dashboard-summary p {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .dashboard-net-worth h2 {
        font-size: 0.95rem;
    }

    .dashboard-net-worth-legend {
        gap: 4px;
    }

    .dashboard-net-worth-legend p {
        grid-template-columns: 8px minmax(0, 1fr) 11.5ch;
        gap: 3px;
        font-size: 0.52rem;
        line-height: 1.15;
    }

    .dashboard-net-worth-ring {
        width: min(100%, 118px);
    }

    .net-worth-ring-value {
        font-size: 0.54rem;
    }

    .legend-swatch {
        width: 8px;
        height: 8px;
    }

    .snapshot-title-row,
    .snapshot-layout,
    .snapshot-summary-grid {
        grid-template-columns: 1fr;
    }

    .snapshot-detail-panel {
        padding-left: 0;
    }

    .snapshot-title-row [data-snapshot-create] {
        justify-self: start;
    }

    @media (orientation: portrait) {
        .snapshot-title-row {
            grid-template-columns: 56px minmax(0, 1fr);
            align-items: center;
        }

        .snapshot-title-content {
            min-width: 0;
        }

        .snapshot-mobile-title-row {
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: space-between;
            width: calc(100vw - 80px);
        }

        .snapshot-mobile-title-row h1 {
            flex: 0 1 auto;
            overflow: hidden;
            min-width: 0;
            margin: 0;
            font-size: clamp(1.15rem, 6.4vw, 1.65rem);
            line-height: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .snapshot-mobile-actions {
            display: flex;
            flex: 0 0 auto;
            gap: 6px;
            align-items: center;
            justify-self: end;
            min-width: 0;
        }

        .snapshot-title-row .helper-text {
            display: none;
        }

        .snapshot-desktop-create-button {
            display: none;
        }

        .snapshot-mobile-camera-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            min-width: 0;
            height: auto;
            min-height: 0;
            margin-top: 0;
            padding: 6px;
        }

        .snapshot-mobile-menu {
            position: relative;
            display: block;
            justify-self: end;
            max-width: min(42vw, 170px);
        }

        .snapshot-mobile-menu summary {
            overflow: hidden;
            padding: 6px 8px;
            border: 1px solid var(--color-border);
            border-radius: 6px;
            background: var(--color-surface);
            color: var(--color-primary);
            cursor: pointer;
            font-size: 0.84rem;
            font-weight: 800;
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .snapshot-mobile-menu ul {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 5;
            display: grid;
            gap: 0;
            width: min(78vw, 280px);
            max-height: 55vh;
            margin: 0;
            padding: 0;
            border: 1px solid var(--color-border);
            border-radius: 6px;
            overflow-y: auto;
            background: #FFFFFF;
            box-shadow: var(--shadow-panel);
            list-style: none;
        }

        .snapshot-mobile-menu-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 36px;
            align-items: stretch;
            border-bottom: 1px solid var(--color-border);
        }

        .snapshot-mobile-menu-item:last-child {
            border-bottom: 0;
        }

        .snapshot-mobile-select-button,
        .snapshot-mobile-delete-button {
            min-width: 0;
            min-height: 36px;
            border: 0;
            background: #FFFFFF;
            color: var(--color-text);
            cursor: pointer;
        }

        .snapshot-mobile-select-button {
            overflow: hidden;
            padding: 6px 8px;
            font-size: 0.82rem;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .snapshot-mobile-menu-item.is-selected .snapshot-mobile-select-button {
            color: var(--color-primary);
            font-weight: 800;
        }

        .snapshot-mobile-delete-button {
            display: inline-grid;
            place-items: center;
            color: #A11B1B;
        }

        .snapshot-list-panel {
            display: none;
        }

        .snapshot-layout {
            grid-template-columns: 1fr;
        }

        .snapshot-record-list li {
            grid-template-columns: minmax(0, 1fr) max-content;
            gap: 8px;
            align-items: start;
        }

        .snapshot-record-list span {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .snapshot-record-list strong {
            white-space: nowrap;
            text-align: right;
        }
    }

    .balances-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dashboard-gauge {
        width: min(100%, 88px);
    }

    .dashboard-gauge-labels {
        margin-top: -4px;
        font-size: 0.56rem;
    }

    .dashboard-gauge-value {
        font-size: 0.72rem;
    }

    .module-grid {
        gap: 7px;
    }

    .module-grid a,
    .module-grid button {
        padding: 7px 6px;
    }

}

@media (max-width: 640px) and (orientation: portrait) {
    .dashboard-summary {
        margin-bottom: 6px;
    }

    .dashboard-cash-flow-widget {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .dashboard-summary-values {
        justify-self: center;
        justify-content: center;
        width: min(100%, 160px);
    }

    .dashboard-net-worth-legend {
        justify-self: center;
        width: min(100%, 150px);
    }

    .dashboard-net-worth-legend p {
        grid-template-columns: 8px minmax(0, 0.82fr) 11.5ch;
        gap: 2px;
    }

    .cash-flow-view {
        font-size: 15px;
    }

}

@media (max-width: 640px) and (orientation: landscape) {
    .dashboard-cash-flow-widget {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .dashboard-summary-values {
        justify-self: center;
        justify-content: center;
        width: min(100%, 160px);
    }

    .app-main {
        padding-top: 0;
    }

    .home-view {
        padding-top: 0;
    }

    .cash-flow-view,
    .cash-flow-panel,
    .cash-flow-table-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .cash-flow-panel {
        padding: 10px;
        overflow: hidden;
    }

}

@media (max-width: 640px) and (orientation: portrait), (max-height: 640px) and (orientation: landscape) {
    .cash-flow-table th,
    .cash-flow-table td {
        padding: 6px;
    }

    .cash-flow-month .cash-flow-table .cash-flow-date-row td {
        padding: 4px 8px;
        background: #6F2DA8;
        color: #FFFFFF;
        font-size: calc(0.94rem - 1px);
        font-weight: 700;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    body {
        padding-top: env(safe-area-inset-top);
    }

    .cash-flow-panel {
        width: 100vw;
        max-width: 100vw;
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        padding: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .cash-flow-panel > .section-heading-row,
    .cash-flow-panel > .helper-text {
        padding-right: 10px;
        padding-left: 10px;
    }

    .cash-flow-panel > .section-heading-row {
        display: grid;
        gap: 0;
        margin-bottom: 6px;
    }

    .cash-flow-list {
        margin-right: -1px;
        margin-left: -1px;
    }

}

@media (max-height: 640px) and (orientation: landscape) {
    .cash-flow-month .cash-flow-table .cash-flow-date-row td {
        font-size: 0.94rem;
    }
}

@media (max-height: 640px) and (orientation: landscape) {
    .app-main {
        padding-top: 6px;
    }

    .home-view {
        padding-top: 0;
    }

    .cash-flow-view,
    .cash-flow-panel,
    .cash-flow-table-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .cash-flow-panel {
        padding: 10px;
        overflow: hidden;
    }

}

@media (max-height: 760px) and (max-width: 520px) {
    .app-header {
        min-height: 56px;
        padding-block: 6px;
    }

    .brand-title {
        width: min(178px, calc(100vw - 124px));
        max-height: 36px;
    }

    .app-main {
        align-items: flex-start;
        padding-block: 10px;
    }

    .auth-panel {
        padding: 14px;
    }

    .auth-logo {
        width: 160px;
        margin-top: -6px;
        margin-bottom: 16px;
    }

    .login-panel {
        width: min(100%, 560px);
    }

    .login-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .login-logo {
        width: min(160px, 86vw);
        margin-bottom: 0;
    }

    h1 {
        margin-bottom: 10px;
        font-size: 1.35rem;
    }

    input,
    .secondary-button,
    .primary-button,
    .passkey-button {
        min-height: 42px;
    }

    .compact-button {
        min-height: 38px;
    }

    .compact-passkey-button {
        min-height: 42px;
    }

    .account-create-panel {
        width: min(100%, 520px);
    }

    .field-row {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 8px;
    }

    .field-row label {
        font-size: 0.95rem;
    }

    .password-control {
        width: min(100%, 34ch);
        max-width: 100%;
    }

    .form-actions {
        padding-left: 124px;
    }
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
    .is-login-screen .app-header {
        display: none;
    }

    .is-login-screen .app-main {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
        align-items: stretch;
    }

    .is-login-screen .auth-view,
    .is-login-screen .auth-panel {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .is-login-screen .auth-panel {
        display: flex;
        align-items: center;
        padding: 18px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-panel {
        width: min(100%, 520px);
        padding-top: 18px;
    }

    .login-layout {
        grid-template-columns: 1fr;
        align-items: center;
        row-gap: 24px;
        justify-items: center;
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .login-brand-column,
    .login-form-column,
    .login-form-column .section-title-row {
        display: contents;
    }

    .is-login-screen .section-title-row h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .login-logo {
        grid-column: 1 / -1;
        width: min(100%, 180px);
        max-width: 180px;
        margin: 0;
        justify-self: center;
    }

    .create-account-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
        justify-items: center;
        gap: 2px;
        width: 100%;
    }

    .create-account-prompt {
        display: block;
        grid-column: 1 / -1;
        margin: 0;
        color: var(--color-muted);
        font-size: 0.95rem;
        line-height: 1.2;
        text-align: center;
        justify-self: center;
    }

    .create-account-button {
        grid-column: auto;
        width: auto;
        max-width: none;
        margin: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-primary);
        text-align: center;
        text-decoration: underline;
        box-shadow: none;
        justify-self: center;
    }

    .create-account-desktop-text {
        display: none;
    }

    .create-account-mobile-text {
        display: inline;
    }

    .compact-passkey-button {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: center;
        margin-top: 0;
        margin-bottom: 24px;
        background: var(--color-primary);
        white-space: normal;
    }

    .login-form-column form {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        row-gap: 8px;
        width: 100%;
    }

    .login-form-column form > input[type="hidden"] {
        display: none;
    }

    .login-form-column form > label {
        text-align: right;
    }

    .login-form-column form > input,
    .login-form-column form > .password-control {
        min-width: 0;
        max-width: 100%;
        justify-self: start;
    }

    .login-form-column form > input {
        width: min(100%, 24ch);
    }

    .login-form-column form > label[for="login-password"],
    .login-form-column form > label[for="login-password"] + .password-control {
        margin-top: 8px;
    }

    .login-form-column form > .primary-button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 24px;
    }

    .login-form-column form > .password-login-button {
        grid-column: 2;
        width: 100%;
        margin-top: 8px;
    }

    .income-layout,
    .expense-layout,
    .account-layout {
        grid-template-columns: 1fr;
    }

    .income-list-panel,
    .expense-list-panel,
    .account-list-panel,
    .asset-list-panel,
    .balances-form-panel,
    .income-form-panel,
    .expense-form-panel,
    .account-form-panel,
    .asset-form-panel,
    .cash-flow-panel,
    .loan-calculator-panel,
    .loan-results {
        padding: 10px;
    }

    .income-list-panel,
    .expense-list-panel,
    .account-list-panel,
    .asset-list-panel,
    .balances-form-panel {
        width: auto;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 0;
        border-radius: 0;
    }

.income-list-panel > .section-heading-row,
.expense-list-panel > .section-heading-row,
.account-list-panel > .section-heading-row,
.asset-list-panel > .section-heading-row,
.balances-form-panel > h2,
    .balances-form-panel > .balances-scan-actions,
    .income-list-panel > .checkbox-row,
    .expense-list-panel > .checkbox-row,
    .account-list-panel > .checkbox-row,
    .asset-list-panel > .checkbox-row,
    .income-list-panel > .helper-text,
    .expense-list-panel > .helper-text,
    .account-list-panel > .helper-text,
    .asset-list-panel > .helper-text,
    .balances-form-panel .form-actions,
    .balances-form-panel > .balances-form > .helper-text {
    margin-right: 10px;
    margin-left: 10px;
}

.income-list-panel > .section-heading-row,
.expense-list-panel > .section-heading-row,
.account-list-panel > .section-heading-row,
.asset-list-panel > .section-heading-row {
    margin-top: 10px;
}

    .income-list,
    .expense-list,
    .account-list,
    .asset-list,
    .balances-list {
        gap: 0;
        padding-right: 10px;
    }

    .income-list-item,
    .expense-list-item,
    .account-list-item,
    .asset-list-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
        min-height: 0;
    }

    .balances-row {
        padding: 4px;
    }

    .income-list-item + .income-list-item,
    .expense-list-item + .expense-list-item,
    .account-list-item + .account-list-item,
    .asset-list-item + .asset-list-item,
    .balances-row + .balances-row {
        margin-top: -1px;
    }

    .income-row-actions,
    .expense-row-actions {
        display: flex;
        align-self: center;
        gap: 4px;
        margin-right: 0;
    }

    .account-row-actions {
        display: flex;
        align-self: center;
        gap: 4px;
        margin-right: 0;
    }

    [data-credit-list] .asset-row-actions {
        margin-right: 0;
    }

    .income-select-button,
    .expense-select-button {
        padding: 4px;
    }

    .income-select-button strong,
    .expense-select-button strong {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .income-select-button span,
    .expense-select-button span {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .income-row-actions .icon-action-button,
    .expense-row-actions .icon-action-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .income-row-actions .icon-action-button svg,
.expense-row-actions .icon-action-button svg {
        width: 19px;
        height: 19px;
    }

    .loan-calculator-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        width: 100%;
        max-width: 100%;
    }

    .loan-calculator-panel {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        margin-bottom: 10px;
    }

    .loan-results {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .loan-calculator-form {
        gap: 8px;
        font-size: 0.72rem;
        max-width: 100%;
        overflow: visible;
    }

    .loan-field {
        grid-template-columns: minmax(58px, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 4px;
    }

    .loan-term-field {
        grid-column: 1 / -1;
        grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    }

    .loan-term-field label {
        margin-bottom: 0;
    }

    .loan-field label {
        font-size: 0.72rem;
        line-height: 1.05;
    }

    .loan-calculator-form input,
    .loan-calculator-form select {
        min-height: 30px;
        padding: 4px;
        font-size: 16px;
    }

    .loan-calculator-form .money-input input {
        padding-left: 20px;
    }

    .loan-calculator-form .money-prefix {
        left: 7px;
    }

    .loan-calculator-form .suffix-input input {
        padding-right: 20px;
    }

    .loan-calculator-form .suffix-input.has-numeric-keypad input {
        padding-right: 72px;
    }

    .loan-calculator-form .input-suffix {
        right: 7px;
    }

    .loan-calculator-form .suffix-input.has-numeric-keypad .input-suffix {
        right: 50px;
    }

    .loan-principal-input,
    .loan-rate-input,
    .loan-escrow-input {
        max-width: none;
    }

    .loan-term-controls {
        width: min(100%, 240px);
        grid-template-columns: minmax(11ch, 1fr) max-content;
        gap: 4px;
        max-width: none;
    }

    .loan-table-wrap {
        max-height: calc(100dvh - 116px);
    }

    .loan-term-controls input,
    .loan-term-controls select {
        min-width: 0;
    }

    .loan-calculator-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .loan-calculator-actions .primary-button,
    .loan-calculator-actions .secondary-button {
        width: 100%;
        min-height: 32px;
        margin-top: 0;
        padding: 0 8px;
        font-size: 0.78rem;
    }

    .app-review-modal {
        grid-template-columns: 1fr;
        gap: 10px;
        width: min(100%, 420px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .app-review-modal .app-modal-logo {
        max-width: 72px;
    }

    .app-review-modal .balance-scan-review {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .app-review-modal .balance-scan-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .app-review-modal .balance-scan-row input {
        width: min(100%, 18ch);
    }

    .app-review-modal .app-modal-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .app-modal {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .app-modal-actions {
        grid-template-columns: 1fr;
    }

    .section-heading-row {
        grid-template-columns: 1fr;
    }

    .section-heading-row {
        display: grid;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .field-row label {
        text-align: left;
    }

    .input-short,
    .input-phone,
    .password-control {
        max-width: 100%;
    }

    .form-actions {
        grid-template-columns: max-content max-content;
        justify-content: end;
        justify-items: end;
        padding-left: 0;
    }

    .bug-report-form .field-row {
        grid-template-columns: 1fr;
    }

    .bug-report-file-note,
    .bug-report-file-list,
    .bug-report-form .form-actions {
        margin-left: 0;
        padding-left: 0;
    }
    .module-title-row {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
    }

    .snapshot-title-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .snapshot-title-row [data-snapshot-create] {
        grid-column: 3;
        justify-self: end;
    }

    .income-summary-title-row,
    .expense-summary-title-row,
    .account-summary-title-row,
    .cash-flow-title-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .income-monthly-total,
    .expense-monthly-total,
    .account-balance-summary,
    .cash-flow-summary {
        grid-column: 2;
        font-size: 0.95rem;
        white-space: normal;
    }

    .module-title-row img {
        width: 56px;
        height: 56px;
    }

    .dashboard-icon-link {
        width: 56px;
        height: 56px;
    }

    .income-row-actions,
.expense-row-actions {
        justify-content: flex-end;
    }

    .checkbox-row-offset {
        margin-left: 0;
    }

    .inline-control-row {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) and (orientation: portrait) {
    .login-form-column form > .password-login-button {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 220px);
        margin-top: 24px;
    }
}

@media (min-width: 641px) {
    .is-login-screen .app-header {
        display: grid;
    }

    .is-login-screen .app-main {
        align-items: center;
        min-height: auto;
        padding: 18px 12px;
    }

    .is-login-screen .auth-view {
        width: min(100%, 920px);
        min-height: 0;
    }

    .is-login-screen .auth-panel {
        display: block;
        width: min(100%, 760px);
        min-height: 0;
        padding: 18px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        box-shadow: var(--shadow-panel);
    }

    .is-login-screen .login-panel {
        padding-top: 58px;
    }

    .is-login-screen .login-layout {
        display: grid;
        grid-template-columns: 240px 320px;
        align-items: center;
        justify-content: center;
        gap: 28px;
        width: 100%;
        margin: 0;
    }

    .is-login-screen .login-brand-column {
        display: grid;
        grid-template-rows: auto auto;
        align-content: center;
        justify-content: center;
        justify-items: center;
        gap: 14px;
        max-width: none;
    }

    .is-login-screen .login-form-column {
        display: block;
        min-width: 0;
    }

    .is-login-screen .login-form-column .section-title-row {
        display: flex;
    }

    .is-login-screen .section-title-row h1 {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 20px 11px;
        overflow: visible;
        clip: auto;
        border-radius: 8px 0 8px 0;
        background: var(--color-primary);
        color: #FFFFFF;
        font-size: 1.25rem;
        white-space: normal;
    }

    .is-login-screen .login-logo {
        grid-column: auto;
        width: min(170px, 100%);
        max-width: 170px;
        margin: 0 auto;
        justify-self: center;
    }

    .is-login-screen .create-account-row {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
        justify-items: center;
        gap: 2px;
        width: max-content;
        max-width: 100%;
    }

    .is-login-screen .create-account-mobile-text {
        display: none;
    }

    .is-login-screen .create-account-prompt {
        display: block;
        margin: 0;
        color: var(--color-muted);
        font-size: 0.95rem;
        line-height: 1.2;
        text-align: center;
    }

    .is-login-screen .create-account-desktop-text {
        display: inline;
    }

    .is-login-screen .create-account-button {
        width: auto;
        min-height: 0;
        margin-top: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-primary);
        text-decoration: underline;
    }

    .is-login-screen .compact-passkey-button {
        grid-column: auto;
        width: 100%;
        justify-self: auto;
        margin: 0;
        background: var(--color-primary);
        white-space: nowrap;
    }

    .is-login-screen .login-form-column form {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .is-login-screen .login-form-column form > label {
        text-align: left;
    }

    .is-login-screen .login-form-column form > input,
    .is-login-screen .login-form-column form > .password-control {
        min-width: 0;
        max-width: 100%;
    }

    .is-login-screen .login-form-column form > .password-control {
        width: min(100%, 34ch);
    }

    .is-login-screen .login-form-column form > input {
        width: min(100%, 24ch);
    }

    .is-login-screen .login-form-column form > label[for="login-password"],
    .is-login-screen .login-form-column form > label[for="login-password"] + .password-control {
        margin-top: 0;
    }

    .is-login-screen .login-form-column form > .primary-button {
        grid-column: auto;
        width: 100%;
        margin-top: 8px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .is-login-screen .app-header {
        display: none;
    }
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
    .module-budget {
        background: #FFFFFF;
    }

    .module-budget .app-shell {
        height: 100vh;
        height: 100dvh;
    }

    .module-budget .app-main {
        padding: 0;
    }

    .module-budget .app-header {
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        align-items: center;
        padding: 8px 10px;
    }

    .module-budget .account-header-slot {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .module-budget .brand {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        justify-self: stretch;
        padding-left: 0;
    }

    .module-budget .brand-title {
        width: min(210px, calc(100vw - 132px));
        max-height: 38px;
    }

    .module-budget .main-menu-button {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .budget-date-control {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        gap: 6px;
        margin-right: 0;
        font-size: 0.9rem;
    }

    .budget-view {
        width: 100%;
        min-height: 0;
        padding: 8px 8px 14px;
        border: 0;
        border-radius: 0;
    }

    .budget-workarea {
        min-height: 0;
    }

    .budget-top-summary {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .budget-top-summary-cell {
        grid-template-columns: minmax(0, 1fr) 12ch;
        grid-template-rows: auto;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        text-align: left;
    }

    .budget-top-summary-cell ~ .budget-top-summary-cell {
        border-top: 1px solid #D6DAE0;
        border-left: 0;
    }

    .budget-top-summary-operator {
        justify-items: center;
        margin: 8px 0;
        border-top: 1px solid #D6DAE0;
        border-left: 0;
        font-size: 1rem;
        transform: none;
    }

    .budget-top-summary dd {
        font-size: 1rem;
        text-align: right;
    }

    .budget-grid,
    .budget-monthly-summary-grid {
        grid-template-columns: 1fr;
    }

    .budget-grid {
        grid-auto-flow: row;
        grid-template-rows: none;
    }

    .budget-column-head,
    .budget-item-row,
    .budget-section-total {
        grid-template-columns: 16px minmax(0, 1fr) 88px;
    }

    .budget-monthly-summary dl div {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 8px;
    }
}

@media (min-width: 641px) and (hover: none) and (pointer: coarse) {
    .is-login-screen .login-form-column form > .password-login-button {
        grid-column: auto;
        width: 100%;
        margin-top: 8px;
    }
}

@media print {
    @page {
        size: letter portrait;
        margin: 0.25in;
    }

    html,
    body,
    .module-budget,
    .module-budget .app-shell {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        background: #FFFFFF;
    }

    .module-budget .app-header {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 0 0 6px;
        border-bottom: 0;
    }

    .module-budget .account-header-slot,
    .module-budget .main-menu-button,
    .module-budget .budget-date-control,
    .menu,
    .modal-backdrop {
        display: none !important;
    }

    .module-budget .brand {
        grid-column: 1;
        justify-content: center;
        padding: 0;
    }

    .module-budget .brand-title {
        width: 2.35in;
        max-height: 0.42in;
    }

    .module-budget .app-main {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .budget-view {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .budget-workarea {
        overflow: visible;
    }

    .budget-top-summary {
        grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.35fr) 24px minmax(0, 1.35fr) 24px minmax(0, 1fr);
        margin-bottom: 6px;
        padding: 6px 0;
        break-inside: avoid;
        box-shadow: none;
    }

    .budget-top-summary-cell {
        grid-template-rows: minmax(20px, auto) auto;
        gap: 3px;
        padding: 0 6px;
    }

    .budget-top-summary dt {
        font-size: 8pt;
    }

    .budget-top-summary dd,
    .budget-top-summary-operator {
        font-size: 12pt;
    }

    .budget-top-summary-operator {
        transform: translateY(12px);
    }

    .budget-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        gap: 6px;
    }

    .budget-section,
    .budget-monthly-summary {
        break-inside: avoid;
        box-shadow: none;
    }

    .budget-section {
        padding: 5px 7px 6px;
    }

    .budget-section h2,
    .budget-monthly-summary h2 {
        margin: -5px -7px 5px;
        padding: 3px 7px;
        font-size: 8pt;
    }

    .budget-column-head,
    .budget-item-row,
    .budget-section-total {
        grid-template-columns: 13px minmax(0, 1fr) 78px;
        min-height: 0;
        font-size: 8pt;
    }

    .budget-column-head {
        padding: 1px 0 3px;
    }

    .budget-item-description,
    .budget-item-amount {
        height: 14px;
        font-size: 8pt;
        line-height: 14px;
    }

    .budget-row-marker {
        width: 13px;
        height: 14px;
        font-size: 8pt;
        line-height: 14px;
    }

    .budget-section-total {
        margin-top: 2px;
        padding-top: 3px;
    }

    .budget-section-total + .budget-section-total {
        padding-top: 1px;
    }

    .budget-monthly-summary {
        margin-top: 6px;
        padding: 6px 8px;
    }

    .budget-monthly-summary-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 12px;
    }

    .budget-monthly-summary dl div {
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 6px;
        font-size: 7.5pt;
    }

    .budget-surplus-box {
        padding: 5px;
    }

    .budget-surplus-box h3 {
        margin-bottom: 2px;
        font-size: 8pt;
    }

    .budget-surplus-box strong {
        font-size: 12pt;
    }
}