/* ── Sheet overlay ─────────────────────────────────────────── */
.sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

.sheet-overlay.open { display: flex; }

.cat-sheet-overlay {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cat-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--tx-scrim, var(--scrim));
  backdrop-filter: blur(var(--tx-scrim-blur, 6px));
  -webkit-backdrop-filter: blur(var(--tx-scrim-blur, 6px));
  cursor: pointer;
}

.cat-sheet-overlay .cat-settings-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -12px 48px var(--scrim);
  animation: modal-up 0.22s ease;
  display: flex;
  flex-direction: column;
}

.cat-sheet-overlay .cat-settings-modal.cat-create-modal {
  top: auto;
  left: auto;
  height: auto;
  transform: none;
  opacity: 1;
}

.sheet {
  width: 100%;
  max-width: var(--max-w);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
}

.sheet h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.sheet-actions .btn { flex: 1; }

/* ── Add transaction modal ─────────────────────────────────── */
.tx-modal-overlay {
  --tx-scrim: var(--scrim);
  --tx-scrim-blur: 6px;
  display: none;
  position: fixed;
  inset: 0;
  background: var(--tx-scrim);
  backdrop-filter: blur(var(--tx-scrim-blur));
  -webkit-backdrop-filter: blur(var(--tx-scrim-blur));
  z-index: 250;
  align-items: flex-end;
  justify-content: center;
}

.tx-modal-overlay.open { display: flex; }

#modal-add-tx > .tx-modal {
  position: relative;
  z-index: 2;
}

#modal-add-tx > .cat-picker-overlay,
#modal-add-tx > .cat-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: 0;
}

#modal-add-tx > .cat-create-overlay {
  z-index: 20;
}

#modal-add-tx > .cat-picker-overlay:not([hidden]),
#modal-add-tx > .cat-create-overlay:not([hidden]) {
  pointer-events: auto;
}

#modal-add-tx.tx-submodal-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tx-modal {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  height: 36dvh;
  height: 36svh;
  max-height: 36dvh;
  max-height: 36svh;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-up 0.22s ease;
  user-select: none;
  -webkit-user-select: none;
}

.tx-modal input,
.tx-modal textarea {
  user-select: text;
  -webkit-user-select: text;
}

.tx-modal .topbar {
  flex-shrink: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: var(--surface);
}

.tx-wizard-header {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tx-wizard-topbar {
  position: relative;
  justify-content: space-between;
  gap: 10px;
  border-bottom: none;
}

.tx-wizard-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tx-wizard-stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tx-wizard-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-wizard-preview-amt.inc { color: var(--income); }
.tx-wizard-preview-amt.exp { color: var(--expense); }

.tx-wizard-preview-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.tx-wizard-preview-sep {
  color: var(--text-3);
  font-weight: 400;
}

.tx-wizard-topbar .tx-wizard-section {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  flex: 1;
  min-width: 0;
  text-align: left;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-wizard-scroll-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  padding: 0 12px env(safe-area-inset-bottom, 0px);
}

.tx-wizard-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.tx-wizard-nav-btn {
  --nav-save: 0;
  --nav-fab: 30px;
  --nav-save-h: 38px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nav-fab) + var(--nav-save) * (100% - var(--nav-fab)));
  min-width: calc(var(--nav-fab) + var(--nav-save) * (100% - var(--nav-fab)));
  height: calc(var(--nav-fab) + var(--nav-save) * (var(--nav-save-h) - var(--nav-fab)));
  margin: 0 auto;
  padding: calc(var(--nav-save) * 8px) 0;
  border: none;
  border-radius: calc((1 - var(--nav-save)) * 999px + var(--nav-save) * var(--radius));
  background: color-mix(in srgb, var(--accent) calc(var(--nav-save) * 100%), var(--surface-2));
  color: color-mix(in srgb, var(--on-accent) calc(var(--nav-save) * 100%), var(--text-2));
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  cursor: pointer;
  transition:
    width 0.22s cubic-bezier(0.34, 1.12, 0.64, 1),
    min-width 0.22s cubic-bezier(0.34, 1.12, 0.64, 1),
    height 0.22s cubic-bezier(0.34, 1.12, 0.64, 1),
    padding 0.22s cubic-bezier(0.34, 1.12, 0.64, 1),
    border-radius 0.22s cubic-bezier(0.34, 1.12, 0.64, 1),
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.tx-wizard-nav-btn:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--accent-hover) calc(var(--nav-save) * 100%), var(--border));
}

.tx-wizard-nav.is-nav-dragging .tx-wizard-nav-btn {
  transition: none;
}

.tx-wizard-nav.no-transition .tx-wizard-nav-btn,
.tx-wizard-nav.no-transition .tx-wizard-nav-arrow,
.tx-wizard-nav.no-transition .tx-wizard-nav-label {
  transition: none !important;
}

.tx-wizard-nav.is-nav-dragging .tx-wizard-nav-arrow,
.tx-wizard-nav.is-nav-dragging .tx-wizard-nav-label {
  transition: none;
}

.tx-wizard-nav-arrow {
  flex-shrink: 0;
  opacity: calc(1 - var(--nav-save));
  transform: scale(calc(1 - var(--nav-save) * 0.45));
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.34, 1.12, 0.64, 1);
}

.tx-wizard-nav-label {
  position: absolute;
  opacity: var(--nav-save);
  transform: scale(calc(0.88 + var(--nav-save) * 0.12));
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.22s cubic-bezier(0.34, 1.12, 0.64, 1);
}

.tx-wizard-nav-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--expense);
  letter-spacing: 0.02em;
  min-height: 5px;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tx-wizard-nav-status:not(:empty) {
  min-height: auto;
  opacity: 1;
  transform: translateY(0);
}

.add-wizard-carousel-wrap {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  touch-action: none;
  position: relative;
  isolation: isolate;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.add-wizard-carousel-wrap.is-dragging {
  touch-action: none;
  cursor: grabbing;
}

.add-wizard-carousel-wrap.is-dragging .add-step-details-body,
.add-wizard-carousel-wrap.is-dragging .add-step--amount,
.add-wizard-carousel-wrap.is-dragging .add-step-cat-body,
.add-wizard-carousel-wrap.is-dragging input,
.add-wizard-carousel-wrap.is-dragging textarea,
#cat-picker-overlay.is-dragging .cat-picker-modal-list,
#cat-picker-overlay.is-dragging input {
  touch-action: none;
}

#cat-picker-overlay.is-dragging {
  touch-action: none;
}

.add-wizard-track {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.add-wizard-track.dragging,
.add-wizard-track.no-transition {
  transition: none;
}

.add-wizard-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  contain: layout style paint;
}

.add-step {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.add-step--amount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 12px 14px;
  overflow: hidden;
  height: 100%;
}

.add-step--category {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.add-step--details {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.add-wizard-tags-zone {
  flex-shrink: 0;
  min-width: 0;
}

.add-wizard-tags-zone .field {
  margin: 0;
}

.add-wizard-tags-zone .field label {
  margin-bottom: 4px;
}

.tx-modal .add-wizard-tags-zone .tag-strip-wrap {
  margin: 0;
  padding: 4px 0 2px;
  --tag-fade-bg: var(--bg);
  touch-action: none;
}

.tx-modal .add-wizard-tags-zone .tag-strip {
  padding: 2px 0;
  touch-action: none;
}

.tx-modal .add-wizard-tags-zone .tag-chip-wrap.has-edit > .tag {
  margin-left: 6px;
}

@media (hover: none) {
  .tx-modal .add-wizard-tags-zone .tag-edit-btn {
    top: 2px;
    left: 2px;
  }
}

.add-step-details-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 14px 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  touch-action: none;
}

.add-step-details-body .add-description-field {
  width: 100%;
  flex: none;
  margin: 0;
}

.add-step-cat-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.add-step-pin {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.add-step-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.tx-modal .add-field-large {
  font-size: 44px;
  line-height: 1.05;
}

.tx-modal .add-amount-input {
  font-size: 56px;
  line-height: 1;
}

.tx-modal .add-field-suffix {
  font-size: 28px;
}

.tx-modal .add-date-input {
  font-size: 34px;
}

.tx-modal .add-field-row {
  padding: 4px 0;
}

.tx-modal .add-field-divider {
  margin: 6px 0 4px;
}

.tx-modal .form {
  gap: 12px;
}

.tx-modal .field label {
  margin-bottom: 4px;
}

.add-step-pin .seg-control--switch {
  position: relative;
  isolation: isolate;
}

.add-step-pin .seg-control--switch .seg-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  z-index: 0;
}

.add-step-pin .seg-control--switch[data-active="expense"] .seg-switch-thumb {
  left: calc(50%);
}

.add-step-pin .seg-control--switch button {
  position: relative;
  z-index: 1;
  background: transparent;
  transition: color 0.28s ease;
}

.add-step-pin .seg-control--switch button.on {
  background: transparent;
}

.add-step-pin .seg-control--switch button.on.inc { color: var(--income); }
.add-step-pin .seg-control--switch button.on.exp { color: var(--expense); }

.add-step-cat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 10px 12px;
  overflow: hidden;
  touch-action: none;
}

.add-step-cat-body--empty {
  justify-content: center;
}

.add-cat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--surface-2);
  text-align: center;
}

.add-cat-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.add-cat-empty .btn {
  width: 100%;
  max-width: 240px;
}

.add-step--category .add-category-error {
  flex-shrink: 0;
  margin: 0 12px 10px;
  text-align: center;
}

.tx-modal .cat-picker {
  position: relative;
  width: 100%;
  z-index: 1;
}

.cat-picker-overlay[hidden],
.cat-create-overlay[hidden] {
  display: none;
}

.cat-create-backdrop {
  position: fixed;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--tx-scrim, var(--scrim));
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 0.28s ease,
    backdrop-filter 0.28s ease,
    -webkit-backdrop-filter 0.28s ease;
}

.cat-create-overlay:not([hidden]) .cat-create-backdrop {
  opacity: 1;
  backdrop-filter: blur(var(--tx-scrim-blur, 6px));
  -webkit-backdrop-filter: blur(var(--tx-scrim-blur, 6px));
}

.cat-create-modal {
  position: fixed;
  z-index: 1;
  top: var(--cat-anchor-top, 12px);
  left: var(--cat-anchor-left, 12px);
  width: var(--cat-anchor-width, calc(100% - 24px));
  height: var(--cat-anchor-height, 40px);
  max-height: var(--cat-anchor-height, 40px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, var(--mix-base)),
    var(--shadow-md);
  overflow: hidden;
  transform-origin: top right;
  transition:
    top 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    left 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    height 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    max-height 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    border-radius 0.38s cubic-bezier(0.34, 1.1, 0.64, 1),
    box-shadow 0.38s ease;
}

.cat-create-overlay.is-expanded .cat-create-modal {
  top: calc(var(--tx-modal-top, 0px) + 12px);
  left: calc(var(--tx-modal-left, 0px) + 12px);
  width: calc(var(--tx-modal-width, 100vw) - 24px);
  height: auto;
  max-height: calc(var(--tx-modal-height, 50vh) - 24px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cat-create-overlay:not(.is-expanded) .cat-create-title,
.cat-create-overlay:not(.is-expanded) .cat-create-form,
.cat-create-overlay:not(.is-expanded) .cat-create-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cat-create-overlay.is-expanded .cat-create-title {
  animation: cat-picker-reveal 0.34s cubic-bezier(0.34, 1.2, 0.64, 1) 0.1s both;
}

.cat-create-overlay.is-expanded .cat-create-form {
  animation: cat-picker-reveal 0.36s cubic-bezier(0.34, 1.2, 0.64, 1) 0.14s both;
}

.cat-create-overlay.is-expanded .cat-create-actions {
  animation: cat-picker-reveal 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) 0.18s both;
}

.cat-create-title {
  margin: 0;
  padding: 14px 14px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.cat-create-form {
  padding: 12px 14px;
  gap: 12px;
}

.cat-create-type-pin {
  margin: 0;
}

.cat-create-type-pin .seg-control--switch {
  position: relative;
  isolation: isolate;
}

.cat-create-type-pin .seg-control--switch .seg-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  z-index: 0;
}

.cat-create-type-pin .seg-control--switch[data-active="expense"] .seg-switch-thumb {
  left: calc(50%);
}

.cat-create-type-pin .seg-control--switch button {
  position: relative;
  z-index: 1;
  background: transparent;
  transition: color 0.28s ease;
}

.cat-create-type-pin .seg-control--switch button.on {
  background: transparent;
}

.cat-create-type-pin .seg-control--switch button.on.inc { color: var(--income); }
.cat-create-type-pin .seg-control--switch button.on.exp { color: var(--expense); }

.cat-create-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.cat-create-actions .btn {
  flex: 1;
}

.cat-picker-backdrop {
  position: fixed;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--tx-scrim, var(--scrim));
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 0.28s ease,
    backdrop-filter 0.28s ease,
    -webkit-backdrop-filter 0.28s ease;
}

.cat-picker-overlay.is-expanded .cat-picker-backdrop {
  opacity: 1;
  backdrop-filter: blur(var(--tx-scrim-blur, 6px));
  -webkit-backdrop-filter: blur(var(--tx-scrim-blur, 6px));
}

.cat-picker-modal {
  position: fixed;
  z-index: 1;
  top: var(--cat-anchor-top, 12px);
  left: var(--cat-anchor-left, 12px);
  width: var(--cat-anchor-width, calc(100% - 24px));
  height: var(--cat-anchor-height, 60px);
  max-height: var(--cat-anchor-height, 60px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, var(--mix-base)),
    var(--shadow-md);
  overflow: hidden;
  transform-origin: top left;
  transform: scale(1);
  opacity: 1;
  transition:
    top 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    left 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    height 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    max-height 0.42s cubic-bezier(0.34, 1.18, 0.64, 1),
    border-radius 0.38s cubic-bezier(0.34, 1.1, 0.64, 1),
    box-shadow 0.38s ease,
    transform 0.38s cubic-bezier(0.34, 1.1, 0.64, 1),
    opacity 0.22s ease;
}

.cat-picker-overlay:not(.is-expanded) .cat-picker-modal {
  transform: scale(0.97);
  opacity: 0.94;
}

.cat-picker-overlay.is-expanded .cat-picker-modal {
  top: calc(var(--tx-modal-top, 0px) + 12px);
  left: calc(var(--tx-modal-left, 0px) + 12px);
  width: calc(var(--tx-modal-width, 100vw) - 24px);
  height: auto;
  max-height: calc(var(--tx-modal-height, 50vh) - 24px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(1);
  opacity: 1;
}

.cat-picker-overlay:not(.is-expanded) .cat-picker-modal-head,
.cat-picker-overlay:not(.is-expanded) .cat-picker-modal-list {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, visibility 0s linear 0.14s;
}

.cat-picker-overlay.is-expanded .cat-picker-modal-head {
  animation: cat-picker-reveal 0.36s cubic-bezier(0.34, 1.2, 0.64, 1) 0.12s both;
}

.cat-picker-overlay.is-expanded .cat-picker-modal-list {
  animation: cat-picker-reveal 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.18s both;
}

@keyframes cat-picker-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cat-picker-modal-head {
  flex-shrink: 0;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.cat-picker-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-picker-search-row .cat-picker-search {
  flex: 1;
  min-width: 0;
}

.cat-picker-add-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition:
    background 0.15s ease,
    transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.cat-picker-add-btn:active {
  background: var(--border);
  transform: scale(0.92);
}

.cat-picker-search {
  margin: 0;
}

.cat-picker-empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

.cat-picker-modal-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  touch-action: none;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tx-modal .cat-picker-trigger {
  width: 100%;
  min-height: 60px;
  padding: 16px 14px;
  gap: 12px;
  background: color-mix(in srgb, var(--cat-accent) 5%, var(--surface));
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: opacity 0.24s ease 0.1s, background 0.15s ease, box-shadow 0.15s ease;
}

.tx-modal .cat-picker-trigger:active {
  background: color-mix(in srgb, var(--cat-accent) 8%, var(--surface));
}

.tx-modal .cat-picker.is-open .cat-picker-trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.tx-modal .cat-picker-modal-list .cat-picker-option {
  width: 100%;
  padding: 9px 12px;
  gap: 10px;
  border-radius: var(--radius);
  border: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tx-modal .cat-picker-modal-list .cat-picker-option:active {
  background: var(--surface-2);
}

.tx-modal .cat-picker-modal-list .cat-picker-option.on {
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cat-accent) 32%, var(--border)),
    inset 3px 0 0 var(--cat-accent);
}

.tx-modal .cat-picker .cat-tile-letter {
  width: 38px;
  height: 40px;
  font-size: 16px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cat-accent) 72%, var(--surface));
  color: color-mix(in srgb, var(--cat-accent) 70%, var(--text));
}

.tx-modal .cat-picker-modal-list .cat-picker-option .cat-tile-letter {
  width: 36px;
  height: 36px;
  font-size: 15px;
  border-radius: 8px;
  background: var(--cat-accent);
  color: var(--on-accent);
  font-weight: 600;
}

.tx-modal .cat-picker .cat-tile.on .cat-tile-letter {
  background: color-mix(in srgb, var(--cat-accent) 78%, var(--surface));
  color: color-mix(in srgb, var(--cat-accent) 75%, var(--text));
}

.tx-modal .cat-picker-modal-list .cat-picker-option.on .cat-tile-letter {
  background: var(--cat-accent);
  color: var(--on-accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--cat-accent) 35%, var(--mix-base));
}

.tx-modal .cat-picker .cat-tile-name {
  font-size: 16px;
  font-weight: 500;
}

.cat-picker-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.cat-picker-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.cat-picker.is-open .cat-picker-chevron {
  transform: rotate(180deg);
}

.tx-modal .add-description-input {
  display: block;
  width: 100%;
  min-height: 64px;
  max-height: 120px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
  font-family: var(--font);
  touch-action: none;
}

.tx-modal .add-step-details-body .add-description-field {
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tx-modal .add-step-details-body .add-description-field .add-description-input {
  flex: none;
  min-height: 64px;
}

.add-field-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 8px 0;
}

.add-field-row.add-date-row {
  padding-top: 4px;
}

.add-field-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0 4px;
}

.add-field-large {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  padding: 0;
}

.add-field-large:focus { outline: none; }

.add-field-large::placeholder { color: var(--text-3); }

.add-field-large.invalid { color: var(--danger); }

.add-field-suffix {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-3);
  flex-shrink: 0;
}

.add-date-input {
  font-size: 28px;
  font-weight: 600;
  color: #b8b8c0;
  color-scheme: light;
  cursor: pointer;
}

.add-date-input:focus {
  color: var(--text-3);
}

.add-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.3;
  cursor: pointer;
  margin-left: 4px;
}

.add-field-error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 8px;
  display: none;
}

.add-field-error.show { display: block; }

/* ── Mobile: centered modals ───────────────────────────────── */
@media (max-width: 519px) {
  .tx-modal-overlay,
  .tag-modal-overlay,
  .sheet-overlay,
  .cat-sheet-overlay {
    align-items: center;
    justify-content: center;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .tx-modal {
    width: 100%;
    height: min(43svh, 100%);
    height: min(43dvh, 100%);
    max-height: min(43svh, calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    max-height: min(43dvh, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: var(--radius-lg);
    animation: modal-in 0.22s ease;
  }

  .cat-sheet-overlay .cat-settings-modal {
    width: 100%;
    max-width: 100%;
    max-height: min(85svh, calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border);
    animation: modal-in 0.22s ease;
  }
}