:root {
  color-scheme: light;
  --fallback-page: #f2f2f7;
  --fallback-group: #fff;
  --fallback-ink: #000;
  --fallback-secondary: #636366;
  --fallback-link: #0068d8;
  --fallback-line: #c6c6c8;
  --fallback-danger: #c93228;
  --page: var(--tg-theme-secondary-bg-color, var(--tg-theme-bg-color, var(--fallback-page)));
  --group: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, var(--fallback-group)));
  --ink: var(--tg-theme-text-color, var(--fallback-ink));
  --secondary: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, var(--fallback-secondary)));
  --section-label: var(--tg-theme-section-header-text-color, var(--secondary));
  --line: var(--tg-theme-section-separator-color, var(--fallback-line));
  --link: var(--action-text, var(--tg-theme-link-color, var(--fallback-link)));
  --button: var(--action-fill, var(--tg-theme-button-color, var(--fallback-link)));
  --button-text: var(--action-fill-text, var(--tg-theme-button-text-color, #fff));
  --danger: var(--tg-theme-destructive-text-color, var(--fallback-danger));
  --header: var(--tg-theme-header-bg-color, var(--page));
  --bottom-bar: var(--tg-theme-bottom-bar-bg-color, var(--group));
  --selected: color-mix(in srgb, var(--link) 10%, var(--group));
  --safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);
  --content-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --bottom-inset: calc(var(--safe-bottom) + var(--content-bottom));
  --viewport-gap: max(0px, calc(100dvh - var(--tg-viewport-stable-height, 100dvh)));
  --tab-height: 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  color: var(--ink);
  background: var(--page);
}

@supports (font: -apple-system-body) {
  :root { font: -apple-system-body; }
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --fallback-page: #000;
  --fallback-group: #1c1c1e;
  --fallback-ink: #fff;
  --fallback-secondary: #a3a3a9;
  --fallback-link: #5faaff;
  --fallback-line: #38383a;
  --fallback-danger: #ff6961;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    color-scheme: dark;
    --fallback-page: #000;
    --fallback-group: #1c1c1e;
    --fallback-ink: #fff;
    --fallback-secondary: #a3a3a9;
    --fallback-link: #5faaff;
    --fallback-line: #38383a;
    --fallback-danger: #ff6961;
  }
}

* { box-sizing: border-box; }
body { margin: 0; min-height: var(--tg-viewport-stable-height, 100dvh); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
[hidden] { display: none !important; }
::selection { background: var(--selected); }
a { color: var(--link); text-underline-offset: .2em; }
input, textarea { caret-color: var(--link); }

.shell {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--content-top)) max(16px, var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px)) calc(var(--tab-height) + var(--bottom-inset) + 40px) max(16px, var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
}
.header { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.header-label { color: var(--secondary); font-size: .7647rem; }
:root[data-embedded="true"] .header { display: none; }
.demo-notice { padding: 4px 0 8px; color: var(--secondary); font-size: .7059rem; }
main { min-width: 0; padding-top: 18px; }
main:focus { outline: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 2rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
h2, h3, h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-heading > div:first-child { flex: 1 1 12rem; min-width: 0; }
.subtitle { max-width: 60ch; margin: 0; color: var(--secondary); font-size: .8824rem; line-height: 1.4; }
.page-heading .action-group { flex-wrap: nowrap; gap: 8px; padding-top: 2px; }
.page-heading .button { padding: 10px 6px; background: transparent; color: var(--link); font-size: .8824rem; border-radius: 8px; }
.page-heading .button:not(.secondary) { font-weight: 600; }

.section, .ledger-section { margin-top: 28px; }
.section > h2, .section-heading h2 { margin: 0 16px 8px; color: var(--section-label); font-size: .7647rem; line-height: 1.35; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading .text-button { margin-right: 10px; }
.section-description { margin: 0 16px 12px; color: var(--secondary); font-size: .7647rem; line-height: 1.4; }
.help, .fine-print, .price { display: block; max-width: 70ch; margin: 8px 16px 0; color: var(--secondary); font-size: .7647rem; line-height: 1.4; }
.fine-print { margin-top: 16px; }
.updated-at { margin: 20px 16px 0; color: var(--secondary); font-size: .7059rem; }
.muted { color: var(--secondary); }
.count { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; }

.ledger { margin: 0; border-radius: 12px; background: var(--group); font-variant-numeric: tabular-nums; }
.ledger > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 16px; align-items: baseline; min-height: 46px; padding: 12px 16px; }
.ledger > div + div::before { position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--line); content: ""; }
.ledger dt { min-width: 0; overflow-wrap: anywhere; }
.ledger dd { max-width: 18ch; margin: 0; color: var(--secondary); text-align: right; overflow-wrap: anywhere; }
.ledger-balance dt, .ledger-balance dd { color: var(--ink); font-weight: 600; }
.default-limits .help { border-radius: 12px; padding: 14px 16px; margin: 4px 0 0; background: var(--group); color: var(--ink); font-size: .8824rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; padding: 11px 18px; background: var(--button); color: var(--button-text); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.button.secondary, .button.ghost { background: transparent; color: var(--link); font-weight: 400; }
.button.danger { background: transparent; color: var(--danger); font-weight: 400; }
.button:active:not(:disabled), .text-button:active, .record:active { opacity: .6; }
.text-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; padding: 9px 6px; background: transparent; color: var(--link); font-size: .8824rem; text-decoration: none; text-align: left; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.split { min-width: 0; }
.record-list { border-radius: 12px; background: var(--group); }
.record { position: relative; display: block; width: 100%; min-height: 64px; border: 0; padding: 13px 36px 13px 16px; background: transparent; color: var(--ink); text-align: left; }
.record + .record::before { position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--line); content: ""; }
.record::after { position: absolute; top: calc(50% - 4px); right: 16px; width: 7px; height: 7px; border-top: 1.7px solid var(--secondary); border-right: 1.7px solid var(--secondary); transform: rotate(45deg); content: ""; }
.record:first-child { border-radius: 12px 12px 0 0; }
.record:last-child { border-radius: 0 0 12px 12px; }
.record:only-child { border-radius: 12px; }
.record-title { display: block; overflow-wrap: anywhere; }
.record-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 5px; color: var(--secondary); font-size: .7647rem; }
.mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .7059rem; overflow-wrap: anywhere; }
.access-state { color: var(--secondary); }
.record-detail { min-width: 0; }
.split:not(.has-selection) .record-detail, .split.has-selection .record-list { display: none; }
.selection-hint { color: var(--secondary); padding: 20px 16px; }
.back-button { display: inline-flex; gap: 7px; margin: -14px 0 12px -4px; }
.back-button::before { width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); content: ""; }
:root[data-native-back="true"] .back-button { display: none; }
.section-intro { margin: 0 16px 20px; }
.section-intro h2 { margin-bottom: 6px; font-size: 1.2941rem; font-weight: 700; overflow-wrap: anywhere; }
.id-label { margin-bottom: 0; color: var(--secondary); }

fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.field-block { min-width: 0; margin-bottom: 20px; }
.field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; border-radius: 12px; margin: 0; padding: 10px 16px; background: var(--group); }
.field > span { flex: 1; min-width: 0; }
.field input, .field select { max-width: 56%; }
input[type="text"], textarea, select { min-width: 0; min-height: 26px; border: 0; border-radius: 0; padding: 0; color: var(--ink); background: transparent; font-size: 1rem; }
input[type="text"] { flex: 1; text-align: right; }
input::placeholder, textarea::placeholder { color: var(--secondary); opacity: 1; }
input:read-only, textarea:read-only { color: var(--secondary); }
.text-field { display: block; padding: 13px 16px; }
.text-field > span { display: block; margin-bottom: 12px; color: var(--secondary); font-size: .7647rem; }
textarea { display: block; width: 100%; min-height: 160px; resize: vertical; line-height: 1.45; }
textarea.soul { min-height: 220px; }
select { flex: 1; width: 100%; text-align: right; text-overflow: ellipsis; color: var(--secondary); }
.picker-row { gap: 10px; }
.field-pair { display: grid; gap: 0; }
.settings-form .field-block:last-child { margin-bottom: 0; }
.settings-form .section { margin-top: 28px; }
.settings-form .section:first-child { margin-top: 0; }
.editor h3 { margin: 28px 16px 10px; color: var(--section-label); font-size: .7647rem; font-weight: 400; text-transform: uppercase; }
.editor .section-intro.help { margin: 0 16px 12px; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-radius: 12px; padding: 10px 16px; background: var(--group); cursor: pointer; }
.switch { position: relative; flex: none; appearance: none; -webkit-appearance: none; width: 51px; height: 31px; margin: 0; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--ink) 18%, var(--group)); transition: background-color 180ms ease-out; cursor: pointer; }
.switch::before { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #0003; content: ""; transition: transform 180ms ease-out; }
.switch:checked { background: var(--button); }
.switch:checked::before { transform: translateX(20px); }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-radius: 12px; padding: 12px 16px; background: var(--group); font-size: .8824rem; cursor: pointer; }
.check-row input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--button); }

.form-actions { position: sticky; bottom: calc(var(--viewport-gap) + var(--tab-height) + var(--bottom-inset) + 22px); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; border-radius: 12px; padding: 10px 12px; background: var(--group); }
.action-group { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.form-status { flex: 1; min-width: 0; font-size: .7647rem; line-height: 1.4; color: var(--secondary); overflow-wrap: anywhere; }
.page-status { margin: -8px 16px 20px; color: var(--secondary); font-size: .8824rem; line-height: 1.4; overflow-wrap: anywhere; }
.page-status:empty, .form-status:empty { display: none; }
.error { color: var(--danger); }
.saved { color: var(--ink); }
.form-status:not(:empty) { flex-basis: 100%; }
.form-actions .action-group { width: 100%; justify-content: space-between; }
.form-actions .action-group > .button:only-child { width: 100%; }
:root[data-native-save="true"] .form-actions button[type="submit"] { display: none; }
:root[data-native-save="true"] .form-actions { position: static; background: transparent; padding: 0 16px; }
.recovery .form-actions { position: static; margin-top: 12px; padding: 12px 16px; }
.recovery > form > fieldset > .field { margin-bottom: 16px; }
.recovery select { max-width: 75%; }
.request-details { margin-bottom: 20px; font-size: .8824rem; }
.request-details > div { grid-template-columns: 100px minmax(0, 1fr); }
.request-details dd { overflow-wrap: anywhere; }

.usage { margin-top: 28px; }
.usage h3 { margin: 0 16px 12px; }
.usage-grid { display: grid; gap: 20px; }
.usage-cell h4 { margin: 0 16px 8px; color: var(--section-label); font-size: .7647rem; font-weight: 400; text-transform: uppercase; }
.usage-cell p { margin: 8px 16px 0; color: var(--secondary); font-size: .7647rem; }
.usage-cell .ledger { font-size: .8824rem; }
.empty, .state-screen { padding: 24px 16px; }
.empty p, .state-screen p { max-width: 54ch; color: var(--secondary); font-size: .8824rem; line-height: 1.4; }
.state-screen h1 { font-size: 1.6471rem; }
.loading-lines { max-width: 480px; margin-top: 28px; }
.loading-lines span { display: block; height: 14px; margin: 20px 0; border-radius: 4px; background: var(--line); opacity: .35; }
.loading-lines span:nth-child(2) { width: 80%; }
.loading-lines span:nth-child(3) { width: 50%; }

#navigation { position: fixed; z-index: 5; right: max(12px, var(--tg-safe-area-inset-right, 0px)); bottom: calc(var(--viewport-gap) + var(--bottom-inset) + 8px); left: max(12px, var(--tg-safe-area-inset-left, 0px)); display: flex; min-height: 60px; max-width: 728px; margin: 0 auto; border: .5px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 28px; padding: 4px; background: var(--bottom-bar); box-shadow: 0 4px 18px #00000012; }
#navigation button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 52px; border: 0; border-radius: 24px; padding: 5px 8px; background: transparent; color: var(--secondary); font-size: .6471rem; font-weight: 500; line-height: 1.2; }
#navigation button[aria-current="page"] { background: var(--selected); color: var(--action-selected-text, var(--link)); font-weight: 600; }
#navigation svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#navigation button > span { max-width: 100%; overflow-wrap: anywhere; }

@supports (backdrop-filter: blur(20px)) {
  #navigation { background: color-mix(in srgb, var(--bottom-bar) 92%, transparent); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #navigation { background: var(--bottom-bar); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}
@media (hover: hover) {
  .record:hover { background: var(--selected); }
  .button:hover:not(:disabled), .text-button:hover { filter: brightness(.92); }
}
@media (min-width: 900px) {
  .shell { max-width: 980px; padding-right: 32px; padding-left: 32px; }
  main { padding-top: 28px; }
  .split { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 32px; }
  .split.has-selection .record-list, .split:not(.has-selection) .record-detail, .split .record-list, .split .record-detail { display: block; }
  .record.active { background: var(--selected); }
  .back-button { display: none; }
  .settings-form, .ledger-section, main > .section, main > .updated-at { max-width: 680px; }
  #navigation { max-width: 500px; }
}
@media (max-width: 360px) {
  .shell { padding-right: 12px; padding-left: 12px; }
  .page-heading { gap: 8px; }
  .page-heading .action-group { flex-wrap: wrap; max-width: 76px; }
  .ledger > div { gap: 10px; }
  .field { gap: 8px; }
}
@media (max-width: 899px) {
  main:has(.split.has-selection) .page-heading .action-group { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}