/* Shared reusable components. Page files own placement, not component appearance. */
.ui-label {font-family:var(--font-ui);font-size:var(--text-label);font-weight:var(--weight-normal);line-height:1.4;letter-spacing:normal}
.ui-control {font-family:var(--font-ui);font-size:var(--text-field);font-weight:var(--weight-normal);line-height:normal;letter-spacing:normal}
.ui-control::placeholder {font-family:inherit;font-size:inherit;font-weight:var(--weight-normal);letter-spacing:normal}
/* Compatibility selectors let all current operation fields use the same contract. */
#form label.field,#form .operation-accounts label.field {font-family:inherit;font-size:var(--text-label);font-weight:var(--weight-normal);line-height:1.4;letter-spacing:normal}
#form input,#form select,#form .operation-accounts select,#form #subcategorychoice,#form #subcategory,#form #date,#form #sum,#form .signed-sum input,#form .compact-date-text {font-family:inherit;font-size:var(--text-field);font-weight:var(--weight-normal);line-height:normal;letter-spacing:normal}
#form input::placeholder,#form #description::placeholder,#form #sum::placeholder {font-family:inherit;font-size:var(--text-field);font-weight:var(--weight-normal);letter-spacing:normal}
.edit-floating,.ui-floating-actions{position:fixed;z-index:100;display:flex;gap:8px;padding:6px;background:var(--color-palette-ffffffed);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 4px 18px var(--color-shadow);backdrop-filter:blur(6px)}
.edit-floating[hidden],.ui-floating-actions[hidden]{display:none}
.edit-floating button,.ui-floating-actions button{width:var(--action-size);height:var(--action-size);padding:0;font-size:var(--action-icon-size);line-height:1;border:0;border-radius:10px;background:var(--color-palette-f8f3ef)}
.edit-floating-save{color:var(--color-success)}
.edit-floating-cancel{color:var(--color-danger)}
.edit-floating button:disabled,.ui-floating-actions button:disabled{opacity:.45}





.edit-floating{left:var(--edit-left,auto)!important;top:var(--edit-top,auto)!important;right:auto!important;bottom:auto!important}



/* Confirmation dialogs share typography and action styling. */

:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog){width:min(440px,calc(100% - 32px));box-sizing:border-box;padding:24px;border-radius:var(--radius-dialog);color:var(--color-text);max-height:85dvh;overflow:auto}
:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog) h2{font-size:var(--text-18);font-weight:var(--weight-medium);line-height:1.35;margin:0 0 16px}
:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog) p{font-size:var(--text-14);font-weight:var(--weight-normal);line-height:1.65;margin:12px 0;color:var(--color-palette-79675b)}
:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog) .note{font-size:var(--text-12);line-height:1.6;color:var(--color-text-muted)}
:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog) .tools{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:20px}
:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog) .tools button{width:100%;margin:0;padding:10px 14px;min-height:38px;font-size:var(--text-13);font-weight:var(--weight-normal);line-height:1.45;border-radius:10px;white-space:normal}
@media(max-width:600px){:is(#mergedialog,#clearaccountdialog,#deletedialog,#cleandialog,#importdialog){padding:20px}}

/* Mobile calculator and amount warnings */
.amount-warning{position:fixed;inset:auto;margin:0;box-sizing:border-box;border:1px solid var(--color-border-soft);border-radius:14px;padding:16px;background:var(--color-surface);color:var(--color-text);box-shadow:0 6px 24px var(--color-shadow);z-index:10001;font:var(--text-14) var(--font-system-short)}.amount-warning[hidden]{display:none}.amount-warning p{margin:4px 20px 12px 0;line-height:1.6}.amount-warning button{margin:0;font-size:var(--text-13);padding:7px 14px;color:var(--color-accent-text);background:var(--color-surface-soft);border:0;border-radius:10px}.amount-warning .amount-warning-close{position:absolute;right:6px;top:4px;font-size:var(--text-23);background:transparent;padding:0 6px}.money-keypad{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,480px);box-sizing:border-box;border:1px solid var(--color-border-soft);border-radius:var(--radius-dialog) 18px 0 0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--color-page);color:var(--color-text);box-shadow:0 -6px 28px var(--color-shadow);z-index:10000;font:var(--text-16) var(--font-system-short)}.money-keypad[hidden]{display:none}.money-keypad-preview{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 8px}.money-keypad-output{font-size:var(--text-18);overflow:auto;white-space:nowrap;flex:1;text-align:right}.money-keypad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.money-keypad button{margin:0;border:0;border-radius:10px;background:var(--color-palette-f2ebe5);color:var(--color-text);min-height:42px;padding:6px;font:var(--text-18) var(--font-system-short);touch-action:manipulation}.money-keypad .money-keypad-done{font-size:var(--text-13);background:var(--color-palette-f7e8d7)}.money-keypad .money-keypad-system{font-size:var(--text-12);min-height:30px;padding:4px 8px;background:transparent}.zero-amount{color:var(--color-palette-a39387)!important}.money-keypad-output.zero-amount{color:var(--color-palette-a39387)}.money-keypad-error{font-size:var(--text-12);color:var(--color-palette-b44b42);margin:4px 0 0}

/* Saving overlay */
#finance-save-lock{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:20px;border:0;border-radius:0;box-sizing:border-box;background:var(--color-page-alpha-780);color:var(--color-palette-70462e);outline:none;overscroll-behavior:contain}#finance-save-lock[open]{display:grid;place-items:center}#finance-save-lock::backdrop{background:var(--color-text-alpha-220)}#finance-save-lock .saving-card{padding:24px 30px;border:1px solid var(--color-chart-grid);border-radius:var(--radius-dialog);background:var(--color-surface);text-align:center;box-shadow:0 8px 35px var(--color-palette-49312615)}#finance-save-lock p{margin:8px 0 0;font-size:var(--text-13);color:var(--color-text-muted)}.saving-fox{position:relative;width:200px;max-width:100%;aspect-ratio:1;margin:0 auto 12px}.saving-fox img{display:block;width:100%;height:auto}

/* Chart visibility controls; separate from navigation/selecting a legend item. */
.legend .chart-legend-row{display:grid;grid-template-columns:var(--chart-eye-column) minmax(0,1fr);gap:var(--space-xs);align-items:center;min-width:0;padding-inline-start:calc(var(--chart-info-size) + var(--space-xs))}
.legend .chart-legend-row[hidden]{display:none}
.chart-eye,.legend .chart-legend-row>.chart-eye{display:inline-flex;align-items:center;justify-content:center;justify-self:center;width:var(--chart-eye-size);height:var(--chart-eye-size);padding:0;border:0;background:transparent;color:var(--color-chart-eye);border-radius:var(--radius-control)}
.chart-eye svg,.chart-show-all svg,.chart-eye-example svg{width:100%;height:100%;display:block}
.legend .chart-legend-row>.catrow{font-family:var(--font-ui);font-size:var(--text-13);font-weight:var(--weight-normal);min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.chart-legend-row>.catrow>span{min-width:0;overflow-wrap:anywhere}
.chart-legend-row>.catrow>strong{font-family:inherit;font-size:inherit;font-weight:var(--weight-strong);flex:none;white-space:nowrap}
.chart-item-hidden>.catrow>strong,.chart-parent-hidden>.catrow>strong{color:var(--color-text-muted);opacity:var(--chart-hidden-opacity)}
.chart-show-all,.legend>.chart-show-all,.legend .chart-visibility-tools>.chart-show-all{display:inline-flex;align-items:center;justify-content:center;width:var(--chart-eye-large-size);height:var(--chart-eye-large-size);padding:var(--space-xs);border:0;background:transparent;color:var(--color-text);margin:0 0 var(--space-sm);flex:none}
.chart-eye:focus-visible,.chart-show-all:focus-visible,.chart-select-all:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.chart-color-picker{position:relative;display:block;flex:0 0 var(--chart-color-size);width:var(--chart-color-size);height:var(--chart-color-size);border-radius:50%;background:var(--item-color);overflow:hidden;cursor:pointer}
#management .chart-color-picker input[type=color]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.chart-color-picker:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}

/* A changed table/session invalidates other tabs without background reloads. */
.ui-stale-page{position:fixed;inset:0;margin:auto;width:min(380px,calc(100% - 32px));max-width:380px;box-sizing:border-box;padding:var(--space-xl);border:1px solid var(--color-border);border-radius:var(--radius-dialog);background:var(--color-surface);color:var(--color-text);font-family:var(--font-ui)}
.ui-stale-page p{margin:0 0 var(--space-lg);font-size:var(--text-14);font-weight:var(--weight-normal);line-height:1.6}
.ui-stale-page button{width:100%;font-size:var(--text-13);font-weight:var(--weight-normal);color:var(--color-accent-text);background:var(--color-button)}
.ui-stale-page::backdrop{background:var(--color-backdrop)}

.field-calendar-icon{display:block;width:var(--text-16);height:var(--text-16);color:var(--color-text-muted);pointer-events:none}
.field-calendar-icon svg{display:block;width:100%;height:100%}

/* Standard information surface shared by balance hints and settings examples. */
.ui-info-surface{background:var(--color-help-surface);border:1px solid var(--color-border);border-radius:14px;box-shadow:0 8px 24px var(--color-palette-49312618);color:var(--color-text)}
.ui-info-host{position:relative}
.ui-info-panel{position:absolute;inset:var(--info-panel-top,64px) 12px auto;margin:0;box-sizing:border-box;width:calc(100% - 24px);max-width:none;max-height:var(--info-panel-max-height,65dvh);overflow:auto;padding:14px 18px 8px;font-family:var(--font-ui);font-size:var(--text-13);line-height:1.6;z-index:100}
.ui-info-panel h2{font-size:var(--text-16);font-weight:var(--weight-medium);line-height:1.4;margin:0 0 var(--space-md)}
.ui-info-panel p{font-size:var(--text-13);font-weight:var(--weight-normal);line-height:1.6;margin:0 0 var(--space-md);overflow-wrap:anywhere}
.ui-info-close{position:sticky;bottom:0;display:block;margin:0 0 0 auto;right:auto;width:32px;height:32px;padding:0;background:var(--color-help-surface);border:0;border-radius:8px;color:var(--color-text-muted);font-size:var(--text-25);font-weight:var(--weight-normal);line-height:1}

.data-warnings{max-width:1152px;margin:16px auto 0;padding:12px 18px;font-size:var(--text-13);line-height:1.6;box-sizing:border-box}.data-warnings summary{cursor:pointer;color:var(--color-accent-text)}.data-warnings ul{list-style:none;max-height:35dvh;overflow:auto;padding-left:0;margin:12px 0 0}.data-warnings li+li{margin-top:6px}@media(max-width:1200px){.data-warnings{margin-left:24px;margin-right:24px}}@media(max-width:600px){.data-warnings{margin-left:14px;margin-right:14px}}

.data-warnings .operation-warning-ignored{color:var(--color-operation-warning)}
.data-warnings .operation-warning-error{color:var(--color-operation-error)}

.data-warnings li>details>p{margin:8px 0}.operation-warning-source{overflow-x:auto;color:var(--color-text-muted)}.operation-warning-source table{border-collapse:collapse}.operation-warning-source td{padding:6px 10px;border:1px solid var(--color-border);min-width:90px;white-space:pre-wrap}

.ui-status-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text)}.ui-status-banner .ui-status-close{flex:0 0 32px;width:32px;height:32px;padding:0;margin:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-24);line-height:1}

.operation-excluded .detail-value,.balance-excluded .balancevalue{color:var(--color-text-muted);opacity:var(--chart-hidden-opacity)}

.legend .chart-visibility-tools>.chart-show-all{margin:0}
.legend .chart-visibility-tools>.chart-select-all{display:flex;align-items:center;gap:var(--space-sm);justify-self:stretch;box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:auto;min-height:var(--chart-info-size);padding:var(--space-sm);padding-inline-start:calc(var(--chart-legend-label-inset) + (var(--chart-legend-dot-size) - var(--chart-select-all-size))/2);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-text);font-size:var(--text-chart-total);text-align:left;overflow-wrap:anywhere;margin:0}
.chart-select-all>span{min-width:0;overflow-wrap:anywhere;font-weight:var(--weight-strong)}
.chart-select-all-total{font-family:var(--font-ui);font-size:var(--text-chart-total);margin-inline-start:auto;flex:none;white-space:nowrap;font-weight:var(--weight-chart-total)}
.legend .chart-visibility-tools>.chart-select-all:is(:hover,[aria-pressed=true]){background:var(--color-accent-alpha-85)}
.legend .chart-visibility-tools>.chart-select-all::before{content:"";display:block;flex:0 0 var(--chart-select-all-size);width:var(--chart-select-all-size);height:var(--chart-select-all-size);border-radius:50%;background:var(--chart-select-all-fill)}
.legend .chart-visibility-tools>.management-info{width:var(--chart-info-size);min-width:var(--chart-info-size);height:var(--chart-info-size);min-height:var(--chart-info-size);padding:0;border:0;background:transparent;color:var(--color-text-muted);text-align:center;font-size:var(--text-20)}
.chart-eye-example{display:inline-flex;flex:none;width:var(--chart-eye-size);height:var(--chart-eye-size);color:var(--color-chart-eye)}

#transferinfotitle:empty{display:none}

/* Recovery remains usable when app initialization or a resource fails. */
.ui-load-error{box-sizing:border-box;width:calc(100% - 32px);max-width:620px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-dialog);background:var(--color-surface);color:var(--color-text);font:var(--text-14) var(--font-ui);line-height:1.6}
.ui-load-error::backdrop{background:var(--color-text-alpha-220)}
.ui-load-error h2{font-size:var(--text-20);font-weight:var(--weight-strong);margin:0 0 16px}
.ui-load-error p{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;font-size:inherit;color:inherit}
.ui-load-error .ui-load-meta{font-size:var(--text-12);color:var(--color-text-muted)}
.ui-load-actions,.ui-load-service{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}
.ui-load-service code{display:block;overflow-wrap:anywhere;user-select:all;color:var(--color-text);font:inherit}
.ui-load-service span{width:100%}.ui-load-error button,.ui-load-error a{font:inherit;color:var(--color-text);background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-control);padding:10px 14px;cursor:pointer;box-sizing:border-box}
.ui-load-error details{margin-top:20px}.ui-load-error summary{cursor:pointer}

.average-budget-actions{background:var(--color-accent-alpha-80);border-radius:var(--radius-control)}
.budget-sheet-button{font-size:var(--text-13);font-weight:var(--weight-normal);padding:var(--space-sm) var(--space-md);background:transparent}
.average-budget-actions>.management-info{background:transparent;flex:none}

.operation-archive{display:inline-flex;align-items:center;justify-content:center;width:var(--history-archive-icon-size);height:var(--history-archive-icon-size);color:var(--color-text-muted)}
.operation-archive svg,.history-account-archive-icon svg{display:block;width:100%;height:100%}
.history-account-archived,.history-account-service{display:inline;color:var(--color-text-muted)}
.history-account-archive-icon{display:inline-block;vertical-align:text-bottom;margin-inline-end:var(--space-xs);width:var(--history-archive-icon-size);height:var(--history-archive-icon-size)}
#history.selecting .row.operation-archived{opacity:var(--history-archive-opacity)}
/* Shared illustration row for document error pages. */
.error-offline-symbol{display:block;width:1em;height:1em}
.error-hero{display:flex;align-items:center;gap:clamp(18px,4vw,36px);margin:0 0 24px;font-size:var(--text-error-code)}
.error-hero .code{font-size:inherit;line-height:1;letter-spacing:-.045em;font-weight:var(--weight-650);opacity:.6;white-space:nowrap}
.error-illustration{display:block;height:.82em;width:auto;max-width:48%;object-fit:contain;border-radius:12px}