body:has(> .auth-card) { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(100%, 480px); padding: clamp(24px, 5vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.auth-card .brand-mark { margin-bottom: 24px; }
.auth-card h1 { margin-bottom: 12px; }
.auth-card p { color: var(--muted); }
.auth-card form { display: grid; gap: 20px; margin-top: 24px; }
.auth-card label { display: grid; gap: 8px; font-size: .875rem; font-weight: 600; }
.auth-card input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; color: var(--ink); background: var(--surface); }
.auth-card hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.auth-card select { width:100%; min-height:48px;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:16px;color:var(--ink);background:var(--surface); }
.recovery-code { display:block;overflow-wrap:anywhere;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px; }
.authenticator-qr { width:min(100%,240px);margin:16px auto;background:#fff;padding:8px; }
.authenticator-qr svg { display:block;width:100%;height:auto;stroke:none; }
.account-links { display:flex;flex-wrap:wrap;gap:12px;grid-column:1 / -1; }
a.secondary-button { color:var(--ink);text-decoration:none; }
a.primary-button { color:#fff;text-decoration:none; }
.auth-card .auth-error { padding: 12px; border-radius: 12px; background: #f8e5df; color: #843e30; }
body[data-storage="server"]:not(.data-ready) .app-shell, body[data-storage="server"]:not(.data-ready) .bottom-nav { visibility: hidden; }
.account-list { display: grid; gap: 12px; margin-top: 16px; }
.account-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-row strong { font-variant-numeric: tabular-nums; }
.sync-status { padding: 12px 16px; background: var(--green-100); color: var(--ink); border-radius: 12px; margin-bottom: 16px; font-size: .875rem; }
.sync-status.error { background: #f8e5df; color: #843e30; }
.row-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.row-actions .text-button { margin: 0; padding: 8px 0; }
.schedule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.schedule-row > div { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.schedule-row p { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.settings-card hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
#backupFile { width: 100%; min-width: 0; padding: 12px 0; font-size: 16px; }
button:disabled { opacity: .5; cursor: default; }
.account-row { flex-wrap: wrap; align-items: center; }
.account-controls { display: flex; gap: 16px; width: 100%; }
.account-row small { color: var(--muted); }
#managementDialog { width: min(480px, calc(100% - 32px)); max-height: 90dvh; padding: 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--surface); }
#managementDialog::backdrop { background: #102d2580; backdrop-filter: blur(3px); }
.management-form { display: grid; gap: 20px; }
.management-form label, .report-filters label { display: grid; gap: 8px; min-width: 0; font-size: .875rem; }
.management-form input, .report-filters input, .report-filters select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 16px; }
.management-form select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; }
.goal-item { padding: 20px 0; border-top: 1px solid var(--line); }
.goal-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.goal-heading strong { overflow-wrap: anywhere; }
.goal-heading span, .goal-item p { color: var(--muted); font-size: .875rem; }
.goal-item p { margin: 8px 0 12px; }
.editor-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.monthly-report { margin-top: 24px; padding: var(--card-padding); }
.report-filters { display: grid; grid-template-columns: minmax(0,1fr); align-items: end; gap: 16px; margin-bottom: 24px; }
.report-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.report-metrics span { display: block; font-size: .75rem; color: var(--muted); }
.report-metrics strong { display: block; margin-top: 8px; font-size: clamp(.875rem,2vw,1.25rem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.report-categories { max-width: 640px; }
@media(min-width:640px) { .report-filters { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:359px) { .row-actions { grid-column: 1 / -1; } }

/* Shared native controls, including profile and backup uploads. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder { color: var(--muted); opacity: 1; }
input[type="file"], .auth-card input[type="file"], #backupFile {
  display: block; width: 100%; min-width: 0; min-height: 48px;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: .875rem;
  overflow: hidden; cursor: pointer;
}
input[type="file"]::file-selector-button {
  min-height: 36px; margin: 0 12px 0 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--green-100); }
label:has(> input[type="checkbox"]:not(.switch)),
label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;
}
input[type="checkbox"]:not(.switch), input[type="radio"] {
  appearance: none; flex: 0 0 22px; width: 22px; height: 22px;
  min-width: 22px; min-height: 22px; margin: 0; padding: 0;
  border: 1.5px solid var(--muted); border-radius: 6px;
  background: var(--surface); cursor: pointer; display: grid; place-content: center;
}
input[type="checkbox"]:not(.switch):checked, input[type="radio"]:checked { background: var(--green-600); border-color: var(--green-600); }
input[type="checkbox"]:not(.switch):checked::before {
  content: ''; width: 10px; height: 6px; border: solid white; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg);
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: white; }
input.switch { appearance: none; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; padding: 3px; border: 1px solid var(--muted); border-radius: 999px; background: var(--surface-2); cursor: pointer; }
input.switch::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .16s ease; }
input.switch:checked { background: var(--green-600); border-color: var(--green-600); }
input.switch:checked::before { background: white; transform: translateX(18px); }
.amount-field div { width: min(100%, 340px); min-height: 80px; margin: 0 auto; padding: 8px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.amount-field div:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 20%, transparent); }
.amount-field input { min-width: 0; min-height: 56px; padding: 0 8px; font-size: clamp(2rem, 8vw, 2.7rem); caret-color: var(--green-600); }
.amount-field input:focus-visible { outline: none; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
@media (forced-colors: active) {
  input[type="checkbox"]:not(.switch), input[type="radio"], input.switch { appearance: auto; }
  input[type="checkbox"]::before, input[type="radio"]::before { content: none !important; }
}
@media (prefers-reduced-motion: reduce) { input.switch::before { transition: none; } }