:root {
  color-scheme: light;
  --page: #f7f6fb;
  --panel: #fff;
  --ink: #251d35;
  --secondary: #635b72;
  --quiet: #726984;
  --border: #e9e4f1;
  --accent: #6134b5;
  --accent-hover: #4d2499;
  --lilac: #f1ebfb;
  --danger: #a12343;
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; opacity: .6; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid #7947d2; outline-offset: 3px; }
.container { width: min(100% - 48px, 1160px); margin-inline: auto; }
.topbar { background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { display: flex; gap: 11px; align-items: center; min-height: 65px; }
.brand-home { display: inline-flex; align-items: center; gap: 11px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.brand-home:hover .brand-name { color: var(--accent); }
.brand-mark {
  display: grid; place-items: center; flex: none; width: 35px; height: 35px;
  border-radius: 10px; background: #6c3cc7; color: #fff; font-size: 12px; font-weight: 790;
  letter-spacing: -.055em; box-shadow: inset 0 -3px 0 #5629ab;
}
.brand-name { font-weight: 760; letter-spacing: -.02em; }
.brand-context {
  margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--border);
  color: var(--quiet); font-size: 10px; letter-spacing: .11em; font-weight: 670;
}
.main { padding-block: 34px 48px; }
h1 { font-size: clamp(30px, 5vw, 43px); font-weight: 740; line-height: 1.08; letter-spacing: -.06em; }
h2 { font-size: 21px; font-weight: 720; line-height: 1.22; letter-spacing: -.035em; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px;
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel);
  font-weight: 660; text-decoration: none; color: var(--ink); line-height: 1.25;
}
.button:hover:not(:disabled) { background: #f9f5ff; }
.button.primary { color: #fff; background: var(--accent); border-color: var(--accent); padding-inline: 15px; }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.text-button { color: var(--accent); background: transparent; border-color: transparent; }
.button.danger { color: var(--danger); }
.button.danger:hover:not(:disabled) { background: #fff0f4; }
[data-action="new"]::before, [data-action="new-category"]::before { content: "+"; font-size: 20px; font-weight: 450; line-height: .75; }
.input {
  width: 100%; min-width: 0; min-height: 43px; padding: 8px 10px;
  border: 1px solid #dcd5e7; border-radius: 8px; background: #fff; font-weight: 420;
}
.input::placeholder { color: #7a7188; }
.select-control { position: relative; min-width: 0; font-weight: 420; }
.has-combo-toggle .input { padding-right: 48px; }
.has-clear .input { padding-right: 84px; }
.clear-title { position: absolute; right: 43px; top: 1px; width: 36px; height: calc(100% - 2px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--quiet); background: transparent; }
.clear-title:hover { color: var(--accent); background: var(--lilac); }
.clear-title svg { width: 17px; height: 17px; }
.combo-toggle { position: absolute; top: 1px; right: 1px; width: 43px; height: calc(100% - 2px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--accent); background: transparent; cursor: pointer; }
.combo-toggle:hover, .combo-toggle[aria-expanded="true"] { background: var(--lilac); }
.combo-toggle[aria-expanded="true"] .select-arrow { margin-top: 4px; transform: rotate(225deg); }
.select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 43px; padding: 9px 12px;
  border: 1px solid #dcd5e7; border-radius: 9px; background: #fff;
  text-align: left; font-weight: 500;
}
.select-trigger:hover:not(:disabled), .select-trigger[aria-expanded="true"] { border-color: #a98ad8; }
.select-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px #e9def9; }
.select-trigger span:first-child { min-width: 0; overflow-wrap: anywhere; }
.select-arrow {
  flex: none; width: 8px; height: 8px; margin: -4px 3px 0 0;
  border-right: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(45deg);
}
.select-trigger[aria-expanded="true"] .select-arrow { margin-top: 4px; transform: rotate(225deg); }
.select-options {
  position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; left: 0;
  max-height: min(290px, 45vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border: 1px solid #e4daef; border-radius: 11px; background: #fff;
  box-shadow: 0 12px 30px #35224b24, 0 3px 8px #35224b0d;
}
.select-options.opens-up { top: auto; bottom: calc(100% + 6px); }
.select-option {
  display: flex; align-items: center; min-height: 39px; padding: 8px 10px;
  border-radius: 7px; color: var(--ink); cursor: pointer; overflow-wrap: anywhere;
}
.select-option:hover, .select-option.is-active { background: #f5f0fc; }
.select-option[aria-selected="true"] { background: #ede4fa; color: #542697; font-weight: 650; }
.select-option[aria-selected="true"]::after { content: "✓"; margin-left: auto; padding-left: 8px; }
.select-option[aria-disabled="true"] { color: var(--quiet); }
.date-control { position: relative; min-width: 0; }
.date-control .input { padding-right: 48px; }
.date-calendar {
  position: absolute; top: 1px; right: 1px; width: 44px; height: calc(100% - 2px);
  display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--accent); background: transparent;
}
.date-calendar:hover { background: var(--lilac); }
.date-calendar svg { width: 20px; height: 20px; }
.date-picker {
  position: absolute; right: 22px; top: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.period-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 44px; padding: 16px 21px; margin-bottom: 16px;
  border: 1px solid #e9def9; border-radius: 14px;
  background: linear-gradient(100deg, #ede4fc, #f3edfc 58%, #faf7ff);
}
.period-summary-item { display: grid; gap: 4px; min-width: 0; }
.period-summary-filtered { padding-left: 24px; border-left: 1px solid #dcd0ed; }
.period-summary-filtered strong { font-size: clamp(22px, 4vw, 29px); }
.period-summary span { color: var(--secondary); font-size: 13px; font-weight: 520; }
.period-summary strong {
  font-size: clamp(28px, 5vw, 38px); line-height: 1.12; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.workspace { display: grid; grid-template-columns: minmax(206px, .9fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.surface {
  min-width: 0; border-radius: 13px; border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 1px 3px #37244d08;
}
.categories { padding: 17px 10px 10px; }
.category-heading {
  margin: 0 10px 12px; color: var(--quiet); text-transform: uppercase; font-size: 11px; font-weight: 730; letter-spacing: .08em;
}
.category-list { display: grid; gap: 3px; }
.category {
  display: flex; align-items: center; gap: 9px; min-height: 44px; width: 100%;
  padding: 7px 10px; text-align: left; border: 0; border-radius: 9px; background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.category::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #c9bdd8; }
.category[aria-pressed="true"]::before { background: var(--accent); }
.category span { overflow-wrap: anywhere; }
.category strong { flex: none; margin-left: auto; color: var(--secondary); font-size: 13px; font-weight: 590; font-variant-numeric: tabular-nums; }
.category[aria-pressed="true"] strong { color: var(--accent); }
.category[aria-pressed="true"], .category:hover { background: var(--lilac); }
.category[aria-pressed="true"] { color: #542697; font-weight: 690; }
.category-add { margin-top: 8px; padding-inline: 9px; }
.journal { padding: 18px; }
.list-heading {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center;
  padding-bottom: 16px; margin-bottom: 13px; border-bottom: 1px solid #f0ebf6;
}
.list-heading h1 { font-size: clamp(23px, 3.5vw, 34px); overflow-wrap: anywhere; }
.list-heading p { color: var(--secondary); margin-top: 5px; font-size: 13px; }
.list-heading > .category-mark { width: 47px; height: 47px; border-radius: 12px; }
.list-heading > .category-mark svg { width: 24px; height: 24px; }
.list-heading .journal-add { min-height: 43px; border-radius: 10px; }
.floating-add {
  position: fixed; z-index: 8; right: max(20px, calc((100vw - 1160px) / 2));
  bottom: max(20px, env(safe-area-inset-bottom)); min-height: 48px;
  border-radius: 14px; box-shadow: 0 8px 22px #4021733b;
}
.list-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.list-controls .button { flex: none; }
.list-search { position: relative; flex: 1; min-width: 0; }
.list-search svg { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); width: 17px; height: 17px; stroke-width: 1.65; color: var(--secondary); pointer-events: none; }
.list-search .search { padding-inline-start: 34px; border-color: var(--border); border-radius: 9px; }
.period-toggle, .filter-toggle, .excel-button { min-height: 43px; padding-inline: 10px; white-space: nowrap; }
.period-toggle { max-width: 38%; font-weight: 400; }
.period-toggle .select-arrow { width: 6px; height: 6px; border-width: 1.5px; }
.period-value { overflow: hidden; text-overflow: ellipsis; }
.list-controls .button svg { flex: none; width: 17px; height: 17px; stroke-width: 1.65; color: var(--secondary); }
.filter-toggle { width: 43px; padding-inline: 0; background: #f8f4fe; }
.excel-button { color: var(--secondary); background: #fcfbfe; }
.trash-toggle { min-height: 43px; color: var(--secondary); background: #fcfbfe; }
.trash-content { max-height: min(60vh, 520px); overflow: auto; color: var(--secondary); }
.trash-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.trash-row > div:first-child, .trash-actions { display: grid; gap: 4px; min-width: 0; }
.trash-row span { font-size: 12px; overflow-wrap: anywhere; }
.trash-row strong { color: var(--ink); overflow-wrap: anywhere; }
.trash-actions { justify-items: end; flex: none; }
.receipt-empty { display: grid; gap: 8px; overflow-wrap: anywhere; }
.receipt-empty > strong { font-size: 19px; }
.receipt-empty span, .receipt-empty p { color: var(--secondary); }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.filter-chip, .clear-filters { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 9px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 620; }
.filter-chip { max-width: 100%; background: #f2ebfc; color: #4d2b7e; text-align: left; }
.filter-chip span { overflow-wrap: anywhere; }
.filter-chip:hover { background: #e9dcf9; }
.filter-chip svg { width: 14px; height: 14px; flex: none; }
.clear-filters { background: transparent; color: var(--accent); }
.clear-filters:hover { background: var(--lilac); }
.export-error { margin: 0 0 10px; }
.journal-dialog { width: min(430px, calc(100% - 24px)); max-width: none; padding: 0; overflow: visible; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--ink); box-shadow: 0 18px 46px #2517383b; }
.journal-dialog::backdrop { background: #20142b78; }
.journal-dialog-body { padding: 16px; }
.journal-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.journal-dialog-close { width: 36px; min-height: 36px; padding: 0; }
.journal-dialog-close svg { width: 18px; height: 18px; }
.journal-dialog-form { display: grid; gap: 11px; }
.filter-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.filter-field { display: grid; gap: 4px; min-width: 0; color: var(--secondary); font-size: 13px; font-weight: 650; }
.filter-field legend { margin-bottom: 4px; padding: 0; }
.filter-field .input, .filter-field .select-control { color: var(--ink); font-size: 14px; font-weight: 400; }
.filters-footer { display: flex; align-items: center; gap: 8px; }
.filters-footer [type="submit"] { margin-inline-start: auto; }
.journal-dialog-form .error { margin: 0; font-size: 13px; }
.receipt-options { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #f8f5fc; }
.receipt-options label { position: relative; flex: 1; min-width: 0; cursor: pointer; }
.receipt-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.receipt-options span { display: grid; place-items: center; min-height: 34px; padding-inline: 4px; border-radius: 7px; }
.receipt-options input:checked + span { color: var(--accent); background: #fff; box-shadow: 0 1px 4px #251d3514; }
.receipt-options input:focus-visible + span { outline: 2px solid var(--accent); }
.journal-table { overflow: hidden; border: 1px solid #eee9f5; border-radius: 12px; box-shadow: 0 2px 8px #251d3507; }
.grid-row {
  display: grid; grid-template-columns: minmax(65px, .7fr) minmax(0, 1.65fr) minmax(84px, .95fr) minmax(0, 1.35fr) minmax(86px, .9fr) 52px 30px;
  gap: 9px; align-items: center; padding: 9px 12px;
}
.column-labels { color: var(--secondary); background: #f5f1fb; font-size: 12px; font-weight: 640; }
.column-sort {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 0;
  border: 0; background: none; font-weight: inherit; text-align: left;
}
.column-sort:hover, .column-labels [aria-sort] .column-sort { color: var(--accent); }
.sort-arrow { flex: none; width: 15px; height: 15px; color: var(--accent); }
.column-labels [aria-sort="ascending"] .sort-arrow { transform: rotate(180deg); }
.receipt-heading { text-align: center; }
.mobile-sort-label { display: none; }
.expense-row { min-height: 62px; border-top: 1px solid #f0ebf6; cursor: pointer; transition: background-color .15s ease; }
.expense-row:hover, .expense-row:focus-within { background: #fbf9ff; }
.expense-row > div { min-width: 0; overflow-wrap: anywhere; }
.expense-date { display: grid; gap: 2px; color: var(--secondary); font-size: 13px; }
.expense-date time { font-weight: 700; }
.expense-weekday { color: var(--quiet); font-size: 11px; font-weight: 450; }
.expense-category { color: var(--secondary); font-size: 13px; }
.category-mark { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #f2edfa; color: #7857ab; }
.category-mark svg { width: 18px; height: 18px; }
.category-mark[data-icon="household"] { background: #eef6ea; color: #57874f; }
.category-mark[data-icon="promotion"], .category-mark[data-icon="delivery"] { background: #fdf0e5; color: #a86a38; }
.category-mark[data-icon="equipment"], .category-mark[data-icon="rent"] { background: #edf5fe; color: #4779a8; }
.category-mark[data-icon="decor"] { background: #faf0f6; color: #a25d90; }
.category-mark[data-icon="other"] { background: #f3f1f7; color: #786e88; }
.expense-name {
  display: block; min-width: 0; padding: 0; text-align: left; border: 0; background: none;
  font-weight: 690; overflow-wrap: anywhere;
}
.expense-row:hover .expense-name { color: var(--accent); }
.row-actions { display: grid; place-items: center; }
.expense-actions {
  display: grid; place-items: center; width: 34px; height: 38px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--quiet); cursor: pointer;
}
.expense-actions:hover, .expense-actions:focus-visible, .expense-actions[aria-expanded="true"] { background: var(--lilac); color: var(--accent); }
.expense-actions svg { width: 17px; height: 17px; stroke-width: 1.65; }
.expense-menu {
  position: fixed; z-index: 100; min-width: 200px; max-height: calc(100dvh - 16px); overflow: auto; padding: 5px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: 0 12px 30px #27183e24;
}
.expense-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 11px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.expense-menu button:hover, .expense-menu button:focus-visible { outline: none; background: var(--lilac); }
.expense-menu svg { flex: none; width: 17px; height: 17px; color: var(--secondary); }
.expense-menu .menu-danger, .expense-menu .menu-danger svg { color: var(--danger); }
.expense-menu .menu-danger { border-top: 1px solid var(--border); border-radius: 0 0 7px 7px; }
.menu-chevron { margin-left: auto; font-size: 20px; line-height: 1; }
.menu-caption { padding: 7px 10px 3px; color: var(--quiet); font-size: 12px; font-weight: 650; }
.menu-check { width: 17px; color: var(--accent); text-align: center; }
.menu-error { margin: 5px 10px; color: var(--danger); font-size: 12px; }
.mobile-payee { display: none; margin-top: 3px; font-size: 12px; color: var(--quiet); }
.amount { text-align: right; font-variant-numeric: tabular-nums; }
.expense-row .amount { font-weight: 730; }
.receipt-cell { display: grid; place-items: center; color: var(--quiet); }
.receipt-thumb { position: relative; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--lilac); }
.receipt-thumb img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.receipt-thumb span { position: absolute; right: -5px; top: -4px; min-width: 17px; height: 17px; border-radius: 7px; background: var(--accent); color: white; font-size: 10px; line-height: 17px; }
.empty {
  display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 16px 45px;
  border-top: 1px solid var(--border);
}
.empty-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lilac); color: var(--accent); }
.empty-mark svg { width: 22px; height: 22px; }
.empty p, .message { color: var(--secondary); }
.empty button { margin-top: 6px; }
.message { padding: 20px 17px; }
.notice { margin: 0 0 14px; padding: 10px 13px; background: #edf7f1; color: #275d43; border: 1px solid #dbeee2; border-radius: 8px; }
.update-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid #d9c8ed; border-radius: 9px; background: var(--lilac); color: var(--ink); }
.update-banner .button { min-height: 34px; }
.editor { padding: 17px; }
.editor h2 { margin: 7px 0 15px; }
.back { min-height: 36px; margin-left: -7px; padding-inline: 7px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { display: grid; align-content: start; gap: 5px; min-width: 0; font-weight: 650; }
.wide-field { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.attach {
  margin: 15px 0; padding: clamp(12px, 2vw, 20px); border: 1px solid #eae3f5; border-radius: 16px;
  background: linear-gradient(115deg, #fff, #fcfaff); box-shadow: 0 6px 20px #51417c0b;
}
.attach-header { display: flex; align-items: center; gap: 10px; }
.attach-header h3 { margin: 0; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.15; letter-spacing: -.03em; }
.attach-icon {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  border-radius: 11px; background: #f0e9fc; color: var(--accent);
}
.attach-icon svg { width: 24px; height: 24px; }
.attach-count {
  flex: none; margin-inline-start: auto; padding: 6px 11px; border-radius: 999px;
  background: #f0e7fc; color: #572c9c; font-size: 13px; font-weight: 720; white-space: nowrap;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.photo-slots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  width: min(100%, 384px); gap: 12px; margin-top: 16px;
}
.photo-add, .photo-slot { min-width: 0; }
.photo-add { display: grid; justify-items: center; }
.slot-preview, .photo-add-button { aspect-ratio: 1.08; border-radius: 14px; }
.slot-preview { position: relative; background: var(--lilac); }
.slot-visual { position: absolute; inset: 0; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: inherit; background: transparent; }
.slot-visual:focus-visible { outline-offset: -3px; }
.slot-visual:disabled { opacity: 1; }
.slot-visual :is(img, canvas) { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot-tools { position: absolute; bottom: 7px; left: 7px; display: flex; gap: 5px; }
.attachment-remove, .attachment-rotate {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border);
  background: #fff; box-shadow: 0 2px 6px #251d3529;
}
.attachment-remove { position: absolute; top: 7px; right: 7px; border-radius: 50%; }
.attachment-rotate { border-radius: 8px; color: var(--accent); }
.attachment-remove:hover:not(:disabled), .attachment-rotate:hover:not(:disabled) { background: var(--lilac); }
.attachment-remove svg { width: 20px; height: 20px; }
.attachment-rotate svg { width: 17px; height: 17px; }
.slot-status {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; min-height: 22px;
  color: var(--secondary); font-size: 14px; font-weight: 580; text-align: center; overflow-wrap: anywhere;
}
.slot-check { display: none; }
.slot-status[data-state="ready"] .slot-check {
  display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: #0da94c; color: #fff;
}
.slot-check svg { width: 15px; height: 15px; }
.slot-status[data-state="error"] { color: var(--danger); font-size: 12px; }
.photo-add-button {
  display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; padding: 8px;
  border: 1.5px dashed #bdaed5; background: #f6f2fc; color: #5f5175; font-weight: 670;
}
.photo-add-button:hover:not(:disabled) { border-color: #8b65c5; background: #f0e8fc; }
.photo-add-button svg { width: 31px; height: 31px; color: var(--accent); }
.camera-button {
  display: none; align-items: center; justify-content: center; gap: 5px; min-height: 34px; margin-top: 4px;
  padding: 3px 5px; border: 0; border-radius: 7px; background: transparent; color: var(--accent);
  font-size: 13px; font-weight: 640;
}
.camera-button:hover:not(:disabled) { background: var(--lilac); }
.camera-button svg { width: 16px; height: 16px; flex: none; }
.receipt-meta { color: var(--secondary); }
.editor .delete-button { margin-inline-start: auto; }
.error { color: var(--danger); margin-top: 10px; }
.delete-confirm { margin-top: 14px; border: 1px solid #f2d8df; border-radius: 8px; padding: 12px; background: #fff7fa; }
.delete-dialog { width: min(420px, calc(100% - 28px)); padding: 20px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); background: var(--panel); box-shadow: 0 18px 50px #21143440; }
.delete-dialog::backdrop { background: #1d1429a6; }
.delete-dialog h2 { margin: 0 0 10px; }
.delete-dialog p { margin: 7px 0; color: var(--secondary); overflow-wrap: anywhere; }
.delete-dialog .error { color: var(--danger); }
.forget-suggestions { display: flex; align-items: start; gap: 8px; margin-top: 12px; color: var(--secondary); font-size: 13px; }
.forget-suggestions input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.category-hint { color: var(--secondary); font-weight: 400; }
.delete-dialog .actions { justify-content: flex-end; margin-top: 16px; }
.photo-wrap { min-height: 110px; margin: 13px 0; padding: 10px; border-radius: 8px; background: #f6f2fb; text-align: center; }
.photo-wrap p { padding: 16px 6px; color: var(--secondary); }
.photo-wrap img { display: block; width: auto; max-width: 100%; max-height: 68vh; margin-inline: auto; object-fit: contain; }
.receipt-dialog { width: min(1040px, calc(100% - 20px)); height: min(94dvh, 1100px); max-height: min(94dvh, 1100px); padding: 8px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); background: var(--panel); box-shadow: 0 18px 50px #21143440; }
.receipt-dialog[open] { display: flex; flex-direction: column; }
.receipt-dialog::backdrop { background: #1d1429a6; }
.viewer-toolbar, .rotation-tools, .zoom-controls, .dialog-actions { display: flex; align-items: center; gap: 5px; }
.viewer-toolbar { flex: none; flex-wrap: wrap; gap: 5px 10px; }
.zoom-controls { padding-left: 10px; border-left: 1px solid var(--border); }
.dialog-actions { margin-left: auto; }
.viewer-toolbar .button, .photo-navigation .button { display: grid; place-items: center; min-width: 38px; min-height: 38px; width: 38px; height: 38px; padding: 0; }
.viewer-toolbar svg { width: 19px; height: 19px; }
.save-rotation[aria-busy="true"] { position: relative; }
.save-rotation[aria-busy="true"] svg { opacity: 0; }
.save-rotation[aria-busy="true"]::after { content: ""; position: absolute; width: 17px; height: 17px; border: 2px solid #ffffff66; border-top-color: white; border-radius: 50%; animation: saving-spin .7s linear infinite; }
@keyframes saving-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .save-rotation[aria-busy="true"]::after { animation: none; } }
.dialog-photo { flex: 1; min-width: 0; min-height: 0; height: auto; margin: 7px 0 0; padding: 6px; overflow: auto; }
.photo-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; }
.photo-loading .photo-note { padding: 0 6px; }
.quick-preview { display: grid; place-items: center; min-height: 0; width: 100%; flex: 1; }
.quick-preview canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.photo-frame { position: relative; margin-inline: auto; }
.dialog-photo .photo-frame img { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; height: auto; margin: 0; }
.dialog-photo.is-zoomed .photo-frame { cursor: grab; touch-action: none; user-select: none; }
.dialog-photo.is-zoomed .photo-frame img { -webkit-user-drag: none; user-select: none; }
.dialog-photo.is-dragging .photo-frame { cursor: grabbing; }
.zoom-value, .photo-count { min-width: 38px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.receipt-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 7px 3px 1px; flex: none; }
.receipt-footer.has-navigation { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.receipt-caption { display: grid; min-width: 0; gap: 1px; }
.receipt-caption > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-caption strong, .receipt-amount { font-size: 14px; }
.receipt-caption span { color: var(--secondary); font-size: 12px; }
.receipt-amount { justify-self: end; white-space: nowrap; }
.photo-navigation { display: flex; flex: none; justify-content: center; align-items: center; gap: 12px; }
.photo-navigation .button { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
.photo-navigation svg { width: 19px; height: 19px; }
.download-photo[aria-disabled="true"] { opacity: .55; cursor: default; }
.rotation-error { flex: none; margin: 5px 2px 0; }
.scanner-dialog {
  width: min(820px, calc(100% - 20px)); max-width: none; max-height: calc(100dvh - 20px);
  padding: 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px #21143440;
}
.scanner-dialog::backdrop { background: #1d1429a6; }
.scanner-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scanner-tools { display: flex; gap: 4px; flex: none; }
.scanner-tools .button { width: 42px; min-height: 42px; padding: 0; }
.scanner-tools svg { width: 19px; height: 19px; }
.scanner-tools .scanner-close { margin-left: 3px; }
.scanner-hint { margin: 4px 0 10px; color: var(--secondary); font-size: 13px; }
.scanner-viewport { display: flex; justify-content: center; align-items: center; overflow: auto; padding: 21px; border-radius: 10px; background: #f4f0f9; }
.scanner-stage { position: relative; display: inline-block; max-width: 100%; flex: none; line-height: 0; }
.scanner-image { display: block; width: auto; height: auto; max-width: 100%; max-height: min(60dvh, 620px); }
.scanner-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scanner-overlay polygon { fill: #6b35c029; stroke: #fff; stroke-width: 5; vector-effect: non-scaling-stroke; }
.scanner-handle { position: absolute; width: 30px; height: 30px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #6532bc; box-shadow: 0 2px 8px #1f123f80; transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.scanner-handle:active { cursor: grabbing; }
.scanner-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scanner-error { margin-top: 8px; }
@media (max-width: 480px) {
  .scanner-dialog { padding: 12px; }
  .scanner-image { max-height: min(55dvh, 500px); }
  .scanner-viewport { padding: 19px; }
  .scanner-actions .button { flex: 1 1 auto; }
}
@media (max-width: 740px) {
  .container { width: calc(100% - 28px); }
  .main { padding-block: 20px 34px; }
  .period-summary { padding: 11px 14px; margin-bottom: 12px; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; }
  .main[data-view]:not([data-view="list"]) .categories { display: none; }
  .journal { padding: 12px; }
  .list-heading { gap: 9px; padding-bottom: 12px; margin-bottom: 10px; }
  .list-heading > .category-mark { width: 38px; height: 38px; border-radius: 10px; }
  .list-heading > .category-mark svg { width: 19px; height: 19px; }
  .list-heading p { font-size: 12px; }
  .list-controls { gap: 6px; }
  .journal-dialog { margin: 12px auto auto; }
}
@media (max-width: 860px) {
  .journal-table { border: 0; border-radius: 0; box-shadow: none; }
  .column-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 5px; padding: 4px 7px; border-radius: 8px; }
  .column-labels .receipt-heading, .column-labels .actions-heading { display: none; }
  .column-labels [data-sort-column="payee"] .sort-label { display: none; }
  .mobile-sort-label { display: inline; }
  .column-sort { gap: 3px; font-size: 11px; }
  .expense-row {
    grid-template-columns: minmax(0, 1fr) minmax(62px, max-content) 30px;
    grid-template-areas: "description amount actions" "category receipt actions" "date receipt actions";
    gap: 2px 6px; margin-top: 7px; padding: 8px; min-height: 0; border: 1px solid #ede8f4; border-radius: 10px;
  }
  .expense-description { grid-area: description; }
  .expense-category { grid-area: category; font-size: 12px; }
  .expense-date { grid-area: date; color: var(--quiet); font-size: 11px; }
  .expense-weekday, .desktop-payee { display: none; }
  .mobile-payee { display: block; }
  .expense-name { font-size: 14px; }
  .expense-row .amount { grid-area: amount; font-size: 14px; }
  .expense-row .receipt-cell { grid-area: receipt; justify-items: end; }
  .expense-row .receipt-thumb { width: 34px; height: 34px; }
  .expense-row .receipt-cell > span { visibility: hidden; }
  .expense-row .row-actions { grid-area: actions; }
  .expense-row .expense-actions { width: 30px; }
}
@media (min-width: 741px) and (max-width: 970px), (max-width: 560px) {
  .toolbar-label { display: none; }
  .excel-button { width: 43px; padding-inline: 0; }
}
@media (max-width: 480px) {
  .container { width: calc(100% - 20px); }
  .brand { min-height: 54px; }
  .brand-context { display: none; }
  .category-list { display: flex; flex-wrap: wrap; gap: 5px; }
  .category { width: auto; padding-inline: 10px; background: #faf8fd; }
  .category strong { display: none; }
  .journal-add span, .period-value, .period-toggle .select-arrow { display: none; }
  .floating-add { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .period-summary-filtered { padding-left: 0; border-left: 0; }
  .trash-toggle { padding-inline: 7px; font-size: 12px; }
  .list-heading .journal-add, .period-toggle { width: 43px; padding-inline: 0; }
  .editor { padding: 12px; }
  .fields { gap: 9px; }
  .input, .select-trigger, .select-option { font-size: 16px; }
  .attach-icon { width: 36px; height: 36px; }
  .attach-count { padding: 5px 9px; }
  .photo-slots { gap: 10px; margin-top: 12px; }
  .slot-preview, .photo-add-button { border-radius: 12px; }
  .editor .delete-button { margin-inline-start: 0; }
  .receipt-dialog { width: calc(100% - 12px); height: 95dvh; max-height: 95dvh; padding: 6px; }
  .viewer-toolbar { gap: 4px 6px; }
  .zoom-controls { padding-left: 6px; }
  .viewer-toolbar .button { min-width: 34px; min-height: 36px; width: 34px; height: 36px; }
  .zoom-value, .photo-count { min-width: 32px; }
  .receipt-footer.has-navigation { grid-template-columns: minmax(0, 1fr) auto; }
  .receipt-footer.has-navigation .photo-navigation { grid-column: 1 / -1; grid-row: 1; }
  .receipt-caption strong, .receipt-amount { font-size: 13px; }
}
@media (pointer: coarse) {
  .button, .button.back, .category, .input { min-height: 44px; }
  .expense-name { min-height: 33px; padding-block: 5px; }
  .expense-actions { min-width: 34px; height: 44px; }
  .attachment-remove, .attachment-rotate { width: 40px; height: 40px; }
  .viewer-toolbar .button { min-height: 40px; height: 40px; }
  .photo-navigation .button { min-height: 40px; height: 40px; }
  .photo-add { display: flex; flex-direction: column; align-items: stretch; }
  .camera-button {
    display: grid; order: -1; place-content: center; justify-items: center; gap: 8px;
    width: 100%; min-height: 0; aspect-ratio: 1.08; margin: 0; padding: 8px;
    border: 1.5px dashed #bdaed5; border-radius: 14px;
    background: #f6f2fc; color: #5f5175; font-size: 15px; font-weight: 670;
  }
  .camera-button:hover:not(:disabled) { border-color: #8b65c5; background: #f0e8fc; }
  .camera-button svg { width: 29px; height: 29px; color: var(--accent); }
  .photo-add-button {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    aspect-ratio: auto; min-height: 44px; margin-top: 4px; padding: 5px;
    border: 0; border-radius: 7px; background: transparent; color: var(--accent);
    font-size: 13px; font-weight: 640;
  }
  .photo-add-button:hover:not(:disabled) { background: var(--lilac); }
  .photo-add-button svg { width: 16px; height: 16px; }
}

.app-navigation {
  display: flex; gap: 4px; padding: 4px; margin-inline-start: auto;
  border: 1px solid #ede6f4; border-radius: 12px; background: #f8f6fb;
}
.app-navigation button, .analytics-periods button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--secondary); font-size: 14px; font-weight: 640; white-space: nowrap;
}
.app-navigation svg { width: 18px; height: 18px; flex: none; }
.app-navigation button:not(:disabled):hover, .analytics-periods button:hover { color: var(--accent); }
.app-navigation [aria-current="page"], .analytics-periods [aria-pressed="true"] {
  border-color: #e8ddf6; background: #fff; color: var(--accent); box-shadow: 0 1px 3px #37244d0b;
}
.main[data-view="analytics"] .categories { display: none; }
.main[data-view="analytics"] .workspace { grid-template-columns: minmax(0, 1fr); }
.main[data-view="analytics"] .content { border: 0; background: transparent; box-shadow: none; }
.analytics-page { --analytics-gap: 16px; }
.analytics-header {
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 24px; margin-bottom: 21px;
}
.analytics-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--accent);
  font-size: 11px; font-weight: 740; letter-spacing: .1em; text-transform: uppercase;
}
.analytics-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #a87be5; }
.analytics-intro { margin-top: 7px; color: var(--secondary); }
.analytics-controls { display: flex; align-items: end; gap: 10px; min-width: 0; }
.analytics-periods {
  display: flex; gap: 3px; padding: 4px;
  border: 1px solid #eae1f4; border-radius: 12px; background: #f1ebf9;
}
.analytics-month { display: grid; gap: 4px; min-width: 164px; }
.analytics-month > span { padding-inline-start: 2px; color: var(--secondary); font-size: 12px; font-weight: 610; }
.analytics-month .select-trigger { min-height: 46px; }
.analytics-month .select-options { z-index: 11; }
.analytics-metrics {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: var(--analytics-gap); margin-bottom: var(--analytics-gap);
}
.analytics-metric {
  min-width: 0; padding: 18px 21px; border-radius: 17px;
  display: flex; flex-direction: column; align-items: start;
}
.analytics-total {
  border-color: #e7d9f7;
  background: radial-gradient(ellipse at 100% 0%, #e9dafb 0%, transparent 62%), #faf6ff;
}
.analytics-metric-icon {
  display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 12px;
  border-radius: 10px; background: #f0e7fc; color: var(--accent);
}
.analytics-total .analytics-metric-icon { background: #eaddfa; }
.analytics-metric-icon svg { width: 20px; height: 20px; }
.analytics-metric-label { color: var(--secondary); font-size: 13px; font-weight: 670; }
.analytics-metric-value {
  display: block; max-width: 100%; margin-block: 4px 3px; overflow-wrap: anywhere;
  font-size: clamp(23px, 3.1vw, 39px); line-height: 1.12; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.analytics-total .analytics-metric-value { font-size: clamp(30px, 3.8vw, 46px); color: #432373; }
.analytics-metric-note, .analytics-compare > span { color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; }
.analytics-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-top: 11px; }
.analytics-change, .analytics-tag {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  background: #eee6fa; color: #5b378a; font-size: 12px; font-weight: 690;
}
.analytics-change.up { background: #f7e9d9; color: #8b4d21; }
.analytics-change.down { background: #e2f2ec; color: #276955; }
.analytics-charts {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--analytics-gap); margin-bottom: var(--analytics-gap);
}
.analytics-panel {
  display: flex; flex-direction: column; min-width: 0;
  padding: 18px 20px; border-radius: 17px;
}
.analytics-panel-heading {
  display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap;
  gap: 9px 12px; margin-bottom: 16px;
}
.analytics-panel-heading h2 { font-size: clamp(18px, 2.1vw, 22px); }
.analytics-panel-heading p { margin-top: 4px; color: var(--secondary); font-size: 13px; }
.analytics-chart-readout {
  display: grid; min-width: 84px; gap: 1px; padding: 6px 9px;
  border: 1px solid #eee4f9; border-radius: 9px; background: #f9f5ff;
  color: var(--secondary); font-size: 11px; text-align: right;
}
.analytics-chart-readout strong { color: #4d2881; font-size: 14px; font-variant-numeric: tabular-nums; }
.analytics-plot {
  flex: 1; display: grid; grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: minmax(182px, 1fr) auto; column-gap: 9px; row-gap: 7px; margin-top: 6px;
}
.analytics-axis {
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) 0;
  color: var(--quiet); font-size: 11px; line-height: 1; text-align: end;
}
.analytics-axis span { align-self: start; transform: translateY(-50%); }
.analytics-bars, .analytics-ticks {
  display: grid; grid-template-columns: repeat(var(--bucket-count), minmax(0, 1fr)); min-width: 0;
}
.analytics-bars {
  border-bottom: 1px solid #e9e2f0;
  background-image: linear-gradient(to bottom, #ede7f3 1px, transparent 1px);
  background-size: 100% 25%;
}
.analytics-bar {
  display: flex; align-items: end; justify-content: center; min-width: 0;
  padding: 0 clamp(1px, .25vw, 4px); border: 0; border-radius: 5px 5px 0 0; background: transparent;
}
.analytics-bar span {
  width: min(100%, 34px); height: var(--bar-height); min-height: 2px;
  border-radius: 5px 5px 1px 1px; background: linear-gradient(#b493ec, #d8c2f4);
}
.analytics-bar[aria-pressed="true"] { background: #f4ecfc99; }
.analytics-bar[aria-pressed="true"] span { background: linear-gradient(#a477e6, #7745c5); }
.analytics-bar:focus-visible { outline-offset: 0; position: relative; z-index: 1; }
.analytics-ticks {
  grid-column: 2; justify-items: center; color: var(--quiet);
  font-size: 11px; line-height: 1.4; white-space: nowrap;
}
.analytics-category-body { flex: 1; display: grid; align-items: center; gap: 10px; }
.analytics-donut { position: relative; justify-self: center; width: min(100%, 158px); }
.analytics-ring { display: block; width: 100%; }
.analytics-slice { cursor: pointer; transition: opacity .15s ease; }
.analytics-ring[data-selection="true"] .analytics-slice:not(.is-selected) { opacity: .28; }
.analytics-donut-label {
  position: absolute; inset: 22%; display: grid; place-content: center; gap: 3px; text-align: center;
  color: var(--secondary); font-size: 11px; line-height: 1.15; pointer-events: none;
}
.analytics-donut-label strong { color: var(--ink); font-size: 25px; letter-spacing: -.035em; }
.analytics-legend { display: grid; gap: 3px; max-height: 275px; overflow-y: auto; padding: 3px; }
.analytics-legend-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 14px; align-items: center;
  gap: 7px; min-height: 44px; padding: 4px 6px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; font-size: 13px; text-align: start;
}
.analytics-legend-row:hover, .analytics-legend-row.is-selected { border-color: #ede1fa; background: #f8f3fe; }
.analytics-legend-row:focus-visible { outline-offset: -2px; }
.analytics-legend-row > svg:first-child { width: 10px; height: 10px; }
.analytics-detail-arrow { width: 14px; height: 14px; color: #7855ac; }
.analytics-legend-name { font-weight: 620; overflow-wrap: anywhere; }
.analytics-legend-value { display: grid; justify-items: end; gap: 1px; max-width: 125px; text-align: end; overflow-wrap: anywhere; }
.analytics-legend-value small { color: var(--secondary); font-size: 11px; }
.analytics-ranking { display: grid; padding: 0; margin: 0; list-style: none; }
.analytics-payee + .analytics-payee { border-top: 1px solid #f0ebf5; }
.analytics-payee-button {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: start; gap: 10px;
  width: 100%; padding: 11px 6px; border: 0; border-radius: 10px; background: transparent; text-align: start;
}
.analytics-payee-button:hover { background: #f8f3fe; }
.analytics-payee-button:focus-visible { outline-offset: -2px; }
.analytics-payee-button .analytics-detail-arrow { align-self: center; }
.analytics-rank {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: #f3ecfc; color: var(--accent); font-size: 13px; font-weight: 720;
}
.analytics-payee-heading, .analytics-payee-caption { display: flex; justify-content: space-between; align-items: start; gap: 5px 10px; }
.analytics-payee-heading strong { overflow-wrap: anywhere; }
.analytics-payee-heading strong:last-child { flex: none; max-width: 52%; text-align: end; font-variant-numeric: tabular-nums; }
.analytics-payee-caption { margin-top: 1px; color: var(--secondary); font-size: 12px; }
.analytics-meter { display: block; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #f2ecf9; }
.analytics-meter span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #8b5bd2, #bd9aee); }
.analytics-state {
  display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 220px;
  padding: 24px; border-radius: 17px; color: var(--secondary); text-align: center;
}
.analytics-state h2 { color: var(--ink); }
.analytics-empty .analytics-metric-icon { width: 45px; height: 45px; margin-bottom: 4px; }
.analytics-detail {
  width: min(calc(100% - 24px), 690px); max-width: none; max-height: min(90dvh, 740px); padding: 0;
  overflow: hidden; border: 1px solid #e4d9f1; border-radius: 18px;
  background: var(--panel); color: var(--ink); box-shadow: 0 24px 68px #24153b40;
}
.analytics-detail::backdrop { background: #2117338c; }
.analytics-detail-shell { display: flex; flex-direction: column; gap: 13px; max-height: inherit; padding: 19px; }
.analytics-detail-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex: none; }
.analytics-detail-header h2 { font-size: clamp(22px, 4vw, 30px); overflow-wrap: anywhere; }
#analytics-detail-period { margin-top: 5px; color: var(--secondary); font-size: 13px; }
.analytics-detail-close { flex: none; width: 42px; padding: 0; }
.analytics-detail-close svg { width: 20px; height: 20px; }
.analytics-detail-summary {
  display: flex; justify-content: space-between; align-items: center; flex: none; flex-wrap: wrap;
  gap: 5px 12px; padding: 9px 12px; border: 1px solid #e9dcf7; border-radius: 11px;
  background: #f8f2ff; color: #573387;
}
.analytics-detail-summary strong { font-size: 19px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.analytics-detail-summary span { font-size: 13px; }
.analytics-detail-scroll {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 11px;
}
.analytics-detail-scroll:focus-visible { outline-offset: -2px; }
.analytics-detail-table { width: 100%; border-spacing: 0; table-layout: fixed; text-align: start; }
.analytics-detail-date { width: 108px; }
.analytics-detail-amount { width: 132px; }
.analytics-detail-thumb { width: 66px; }
.analytics-detail-mobile-date { display: none; }
.analytics-detail-table :is(th, td) { padding: 9px 11px; text-align: start; overflow-wrap: anywhere; }
.analytics-detail-table th {
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border);
  background: #faf7fd; color: var(--secondary); font-size: 12px;
}
.analytics-detail-table td { vertical-align: top; border-bottom: 1px solid #f1edf6; font-size: 14px; }
.analytics-detail-table tr:last-child td { border-bottom: 0; }
.analytics-detail-table td.analytics-detail-date-cell, .analytics-detail-mobile-date { color: var(--secondary); font-variant-numeric: tabular-nums; }
.analytics-detail-table .analytics-detail-money { text-align: end; }
.analytics-detail-table td.analytics-detail-money { font-weight: 670; font-variant-numeric: tabular-nums; }
.analytics-detail-table .analytics-detail-receipt { color: var(--secondary); text-align: center; vertical-align: middle; }
.analytics-detail-receipt .receipt-thumb { vertical-align: middle; }
.analytics-detail-table td small { display: block; margin-top: 2px; color: var(--secondary); font-size: 12px; }
.analytics-detail-table tr:focus { outline-offset: -2px; background: #f8f3fe; }
.analytics-detail-status { padding: 16px 12px; color: var(--secondary); text-align: center; }
.analytics-detail-more { display: flex; margin: 8px auto; }
@media (min-width: 1080px), (min-width: 550px) and (max-width: 850px) {
  .analytics-category-body { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 850px) {
  .analytics-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .brand { flex-wrap: wrap; }
  .brand:has(.app-navigation:not([hidden])) { gap: 7px 11px; padding-block: 9px; }
  .app-navigation { width: 100%; margin: 0; }
  .app-navigation button { flex: 1; }
  .analytics-page { --analytics-gap: 11px; }
  .analytics-header { gap: 12px; margin-bottom: 13px; }
  .analytics-intro { font-size: 13px; }
  .analytics-controls { width: 100%; align-items: stretch; flex-direction: column; gap: 8px; }
  .analytics-periods button { flex: 1; padding-inline: 6px; }
  .analytics-month { min-width: 0; }
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-total { grid-column: 1 / -1; }
  .analytics-metric, .analytics-panel { padding: 13px; border-radius: 14px; }
  .analytics-metric-icon { margin-bottom: 8px; }
  .analytics-chart-readout {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 8px; text-align: left;
  }
  .analytics-plot { column-gap: 6px; grid-template-rows: minmax(152px, 1fr) auto; }
  .analytics-axis, .analytics-ticks { font-size: 10px; }
  .analytics-detail { width: calc(100% - 16px); border-radius: 14px; }
  .analytics-detail-shell { gap: 10px; padding: 12px; }
  .analytics-detail-date { width: 82px; }
  .analytics-detail-amount { width: 84px; }
  .analytics-detail-thumb { width: 56px; }
  .analytics-detail-table :is(th, td) { padding: 8px 6px; font-size: 12px; }
}
@media (max-width: 480px) {
  .analytics-detail-date, .analytics-detail-date-cell { display: none; }
  .analytics-detail-mobile-date { display: block; margin-bottom: 3px; font-size: 11px; }
}
@media (pointer: coarse) {
  .app-navigation button, .analytics-periods button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-slice { transition: none; }
}