:root {
  color-scheme: light;
  --navy: #081d3a;
  --navy-soft: #1b2a4f;
  --teal: #13a7a0;
  --teal-2: #14b8a6;
  --mint-soft: #eaf7f4;
  --blue-soft: #edf4ff;
  --violet-soft: #f2efff;
  --red: #d94a4a;
  --red-soft: #fff1f1;
  --bg: #f8fafa;
  --surface: #ffffff;
  --surface-soft: #fbfdfd;
  --border: #e6edf0;
  --border-strong: #d8e3e8;
  --muted: #6b7a90;
  --muted-soft: #8d99aa;
  --shadow-card: 0 10px 26px rgba(8, 29, 58, 0.07);
  --shadow-soft: 0 6px 16px rgba(8, 29, 58, 0.055);
  --radius-card: 18px;
  --radius-button: 13px;
  --bottom-nav-height: 76px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-shield-z: 9000;
}

/* Ödemelerim statik geliştirme önizlemesi */
.payments-preview-screen {
  min-width: 0;
}

.payments-preview-topbar .payments-preview-add span {
  margin: -2px 0 0;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0;
}

.payments-preview-body {
  min-width: 0;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
}

.payments-preview-notice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0 0 14px;
  border-radius: 999px;
  background: #eaf6f4;
  padding: 7px 10px;
  color: #52716f;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

.payments-preview-notice > span:first-child,
.payments-preview-notice svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.payments-live-state {
  display: grid;
  min-height: 390px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 30px 18px 90px;
  color: var(--navy);
  text-align: center;
}

.payments-live-state > strong {
  max-width: 290px;
  font-size: 16px;
  line-height: 1.45;
}

.payments-live-state > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.payments-live-state .payments-secondary-action {
  width: min(100%, 230px);
  margin-top: 4px;
}

.payments-live-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #d9ece9;
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: payments-live-spin 0.75s linear infinite;
}

@keyframes payments-live-spin {
  to { transform: rotate(360deg); }
}

.payments-live-form-error,
.payments-live-sheet-error {
  margin: 0;
  border-radius: 12px;
  background: #fff4f2;
  padding: 10px 12px;
  color: #9f403a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.payments-live-action-status {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid #cce5e2;
  border-radius: 13px;
  background: #eef8f6;
  padding: 10px 12px;
  color: #315f5b;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.4;
}

.payments-live-action-status button {
  min-height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 11px;
  color: #087f79;
  font: inherit;
  font-weight: 900;
}

.payments-live-consent {
  margin: 0;
}

.payments-live-action-status button:focus-visible {
  outline: 2px solid rgba(19, 167, 160, 0.72);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .payments-live-spinner { animation-duration: 1.5s; }
}

.payments-empty-state {
  display: grid;
  min-height: 500px;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 24px 18px 70px;
  text-align: center;
}

.payments-empty-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid #cce9e5;
  border-radius: 21px;
  color: var(--teal);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.payments-empty-icon svg {
  width: 28px;
  height: 28px;
}

.payments-empty-state h2 {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.25;
}

.payments-empty-state p {
  max-width: 320px;
  margin: 0;
  color: #617188;
  font-size: 14px;
  line-height: 1.55;
}

.payments-primary-action,
.payments-secondary-action {
  width: 100%;
  min-height: 50px;
  justify-content: center;
}

.payments-empty-state .payments-primary-action {
  width: min(100%, 270px);
  margin-top: 4px;
}

.payments-live-first-use-screen .payments-preview-body,
.payments-live-no-upcoming-screen .payments-preview-body,
.payments-preview-overview-screen .payments-preview-body {
  padding-bottom: calc(var(--bottom-nav-height) + 36px + env(safe-area-inset-bottom));
}

.payments-live-first-use-screen .payments-empty-state,
.payments-live-no-upcoming-screen .payments-empty-state {
  min-height: 0;
  padding-top: clamp(46px, 10dvh, 78px);
  padding-bottom: clamp(38px, 8dvh, 64px);
}

.payments-live-no-upcoming-screen .payments-empty-state {
  padding-bottom: 32px;
}

.payments-summary {
  display: grid;
  min-width: 0;
  gap: 5px;
  border-radius: 19px;
  background: var(--navy);
  padding: 16px 18px;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(8, 29, 58, 0.16);
}

.payments-summary > span {
  color: #bfece7;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.payments-summary > strong {
  min-width: 0;
  font-size: 27px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.payments-summary > small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11.5px;
  line-height: 1.4;
}

.payments-summary > .payments-summary-estimate-note {
  width: fit-content;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 7px;
  color: #bfece7;
  font-size: 9.5px;
  font-weight: 800;
}

.payments-list {
  display: grid;
  min-width: 0;
  margin-top: 18px;
}

.payments-date-group {
  min-width: 0;
}

.payments-date-group + .payments-date-group {
  margin-top: 15px;
}

.payments-date-group > h2 {
  margin: 0 0 6px;
  color: #68798e;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.35;
}

.payments-date-group.is-overdue > h2 {
  color: #b44f48;
}

.payments-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid #dde8ea;
  background: transparent;
  padding: 5px 1px 11px;
  color: var(--navy);
  text-align: left;
}

.payments-row-icon,
.payments-completed-link-icon,
.payments-detail-icon {
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--mint-soft);
}

.payments-row-icon {
  width: 40px;
  height: 40px;
  grid-row: 1 / span 2;
  border-radius: 13px;
}

.payments-row-icon svg {
  width: 18px;
  height: 18px;
}

.payments-row-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 2px;
}

.payments-row-copy > strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.payments-row-copy > small {
  color: #6b7a8d;
  font-size: 11px;
  line-height: 1.35;
}

.payments-row-due {
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
}

.payments-row-due.is-late,
.payments-completed-row > p.is-late {
  color: #b44f48;
}

.payments-row-amount {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  margin-top: 4px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.payments-row-estimate {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  color: #66788c;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
}

.payments-completed-link {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid #d6e5e4;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px 12px;
  color: var(--navy);
  text-align: left;
  box-shadow: 0 5px 14px rgba(8, 29, 58, 0.04);
}

.payments-completed-link-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.payments-completed-link-icon svg {
  width: 17px;
  height: 17px;
}

.payments-completed-link > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payments-completed-link strong {
  font-size: 13.5px;
  line-height: 1.3;
}

.payments-completed-link small {
  color: #6c7c90;
  font-size: 10.5px;
}

.payments-completed-link > span:last-child {
  color: #7b8d99;
  font-size: 22px;
}

.payments-history-year {
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  border: 1px solid #d5e5e5;
  border-radius: 17px;
  background: #ffffff;
  padding: 4px 7px;
  box-shadow: 0 5px 14px rgba(8, 29, 58, 0.04);
}

.payments-history-year > strong {
  color: var(--navy);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.payments-history-year button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--navy);
  background: #f2f8f7;
  font-size: 25px;
  line-height: 1;
}

.payments-history-list {
  display: grid;
  min-width: 0;
  margin-top: 18px;
  border-top: 1px solid #dce7e9;
}

.payments-history-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #dce7e9;
  background: transparent;
  padding: 13px 2px;
  color: var(--navy);
  text-align: left;
}

.payments-history-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.payments-history-row strong {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.payments-history-row small {
  color: #52647a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.payments-history-row em {
  color: #42716b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.payments-history-row em.is-late {
  color: #b44f48;
}

.payments-history-row .payments-history-leading {
  color: #51677c;
}

.payments-history-row > span:last-child {
  color: #7b8d99;
  font-size: 24px;
  line-height: 1;
}

.payments-history-empty {
  margin: 18px 0 0;
  color: #647489;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.payments-preview-bottom-space {
  height: calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom));
}

.payments-preview-form-screen .payments-preview-body,
.payments-preview-detail-screen .payments-preview-body,
.payments-preview-completed-screen .payments-preview-body {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.payments-preview-form-screen .payments-preview-body {
  padding-bottom: calc(156px + env(safe-area-inset-bottom));
}

.payments-preview-form-screen .payments-preview-notice {
  margin-bottom: 17px;
}

.payments-form {
  display: grid;
  min-width: 0;
  gap: 15px;
  padding-bottom: 24px;
}

.payments-field,
.payments-segmented-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
}

.payments-field > span:first-child,
.payments-segmented-field > legend {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.35;
}

.payments-field input,
.payments-field select,
.payments-field textarea,
.payments-paid-date-field input,
.payments-paid-amount-field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 1px solid #cfdee2;
  border-radius: 15px;
  color: var(--navy);
  background: #ffffff;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}

.payments-field textarea {
  min-height: 92px;
  resize: vertical;
  padding-top: 13px;
  padding-bottom: 13px;
}

.payments-category-field {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfdee2;
  border-radius: 15px;
  color: #607085;
  background: #ffffff;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
}

.payments-category-field.is-selected {
  color: var(--navy);
}

.payments-category-field > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.payments-category-field > span:last-child {
  color: #788b99;
  font-size: 22px;
  line-height: 1;
  text-align: right;
}

.payments-field input:focus-visible,
.payments-field select:focus-visible,
.payments-field textarea:focus-visible,
.payments-segmented-control input:focus-visible + span,
.payments-paid-date-field input:focus-visible,
.payments-paid-amount-field input:focus-visible,
.payments-category-field:focus-visible,
.payments-row:focus-visible,
.payments-completed-link:focus-visible,
.payments-history-year button:focus-visible,
.payments-history-row:focus-visible,
.payments-delete-action:focus-visible,
.payments-sheet-delete-action:focus-visible,
.payments-preview-sheet .sheet-close:focus-visible {
  outline: 2px solid rgba(19, 167, 160, 0.72);
  outline-offset: 2px;
}

.payments-amount-input {
  position: relative;
  display: block;
  min-width: 0;
}

.payments-amount-input input {
  padding-right: 48px;
}

.payments-amount-input > small {
  position: absolute;
  top: 50%;
  right: 15px;
  color: #6a7a8e;
  font-size: 12px;
  font-weight: 850;
  transform: translateY(-50%);
}

.payments-segmented-control {
  display: grid;
  min-height: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid #cfdee2;
  border-radius: 15px;
  background: #eef3f4;
  padding: 4px;
}

.payments-segmented-control label {
  position: relative;
  min-width: 0;
}

.payments-segmented-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.payments-segmented-control span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #637287;
  font-size: 13px;
  font-weight: 850;
}

.payments-segmented-control input:checked + span {
  color: var(--navy);
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(8, 29, 58, 0.08);
}

.payments-note-field > span small,
.payments-note-field > small {
  color: #738196;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
}

.payments-form-action {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 20;
  width: 100%;
  max-width: 430px;
  margin: 0;
  border-top: 1px solid rgba(210, 225, 228, 0.92);
  background: rgba(249, 252, 251, 0.97);
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.payments-detail-hero {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid #d4e6e4;
  border-radius: 19px;
  background: #ffffff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.payments-detail-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

.payments-detail-icon svg {
  width: 23px;
  height: 23px;
}

.payments-detail-hero > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.payments-detail-hero small {
  width: fit-content;
  border-radius: 999px;
  background: #eaf6f4;
  padding: 4px 7px;
  color: #52716f;
  font-size: 9.5px;
  font-weight: 850;
}

.payments-detail-hero h2 {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.payments-detail-hero strong {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.payments-detail-list {
  display: grid;
  min-width: 0;
  margin: 16px 0 0;
  border-top: 1px solid #dce7e9;
}

.payments-detail-list > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid #dce7e9;
  padding: 12px 2px;
}

.payments-detail-list dt {
  color: #6a798d;
  font-size: 12px;
  line-height: 1.4;
}

.payments-detail-list dd {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: break-word;
  text-align: right;
}

.payments-detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.payments-delete-action,
.payments-sheet-delete-action {
  min-height: 48px;
  border: 1px solid rgba(199, 67, 60, 0.32);
  border-radius: 15px;
  color: #a83f39;
  background: #ffffff;
  font-size: 13px;
  font-weight: 850;
}

.payments-completed-head h2 {
  margin: 2px 0 12px;
  color: var(--navy);
  font-size: 20px;
  font-weight: 900;
}

.payments-completed-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  border: 1px solid #cfe6e3;
  border-radius: 17px;
  background: #eef8f6;
  padding: 14px 15px;
}

.payments-completed-summary strong {
  grid-column: 1 / -1;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.35;
}

.payments-completed-summary span {
  color: #556a7c;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.4;
}

.payments-completed-summary .payments-completed-total {
  grid-column: 1 / -1;
  border-top: 1px solid #c9e0dd;
  padding-top: 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
}

.payments-distribution {
  display: grid;
  min-width: 0;
  gap: 12px;
  margin-top: 20px;
  border-top: 1px solid #dce7e9;
  padding-top: 17px;
}

.payments-distribution > h2 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}

.payments-distribution-list {
  display: grid;
  min-width: 0;
  gap: 11px;
}

.payments-distribution-row {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 5px 4px;
  color: var(--navy);
  text-align: left;
}

.payments-distribution-row.is-selected {
  background: #eef8f6;
  box-shadow: 0 0 0 1px #cce6e2 inset;
}

.payments-distribution-meta {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: baseline;
  gap: 8px;
}

.payments-distribution-meta strong,
.payments-distribution-meta span,
.payments-distribution-meta small {
  min-width: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.payments-distribution-meta strong {
  font-size: 12.5px;
  font-weight: 850;
  overflow-wrap: break-word;
}

.payments-distribution-meta span {
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.payments-distribution-meta small {
  color: #5e7083;
  font-size: 10.5px;
  font-weight: 850;
  text-align: right;
}

.payments-distribution-track {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef0;
}

.payments-distribution-track > span {
  display: block;
  width: var(--payments-distribution-width);
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.payments-distribution-row.is-navy .payments-distribution-track > span {
  background: var(--navy-soft);
}

.payments-distribution-row.is-slate .payments-distribution-track > span {
  background: #72899a;
}

.payments-distribution > p {
  margin: 0;
  color: #66778a;
  font-size: 10.5px;
  line-height: 1.5;
}

.payments-completed-filter {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  border-radius: 13px;
  background: #eef8f6;
  padding: 10px 12px;
}

.payments-completed-filter strong {
  min-width: 0;
  color: var(--navy);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.payments-completed-filter button {
  min-height: 36px;
  flex: 0 0 auto;
  border: 0;
  color: #087f79;
  background: transparent;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 850;
}

.payments-completed-list {
  display: grid;
  min-width: 0;
  margin-top: 14px;
  border-top: 1px solid #dce7e9;
}

.payments-completed-row {
  display: grid;
  min-width: 0;
  gap: 6px;
  border-bottom: 1px solid #dce7e9;
  padding: 14px 2px;
}

.payments-completed-row h3 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.payments-completed-amount {
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.4;
}

.payments-completed-dates {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px 14px;
  color: #68788c;
  font-size: 10.5px;
  line-height: 1.4;
}

.payments-completed-dates strong {
  color: #46596f;
}

.payments-completed-row > p {
  margin: 0;
  color: #42716b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.finance-coming-sheet.payments-preview-sheet {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.payments-preview-sheet-head {
  align-items: flex-start;
  padding: 9px 0 15px;
}

.payments-preview-sheet-head h2 {
  max-width: calc(100% - 52px);
  margin: 0;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.28;
}

.payments-preview-sheet-content {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.payments-preview-sheet.is-category-selection {
  max-height: calc(100dvh - 54px - env(safe-area-inset-top));
}

.payments-preview-sheet.is-category-selection .payments-preview-sheet-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2px 2px;
  -webkit-overflow-scrolling: touch;
}

.payments-category-panel-intro {
  margin: 0;
  color: #617287;
  font-size: 12.5px;
  line-height: 1.5;
}

.payments-category-options {
  display: grid;
  min-width: 0;
  border-top: 1px solid #dce7e9;
}

.payments-category-option {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #dce7e9;
  color: var(--navy);
  background: transparent;
  padding: 10px 2px;
  text-align: left;
}

.payments-category-option > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.payments-category-option strong {
  font-size: 13.5px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.payments-category-option small {
  color: #68798d;
  font-size: 10.5px;
  line-height: 1.4;
}

.payments-category-option > span:last-child {
  color: #7b8d99;
  font-size: 21px;
  line-height: 1;
}

.payments-category-option.is-subtype {
  min-height: 50px;
}

.payments-category-back {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  color: #087f79;
  background: #eef8f6;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 850;
}

.payments-category-back > span {
  font-size: 20px;
  line-height: 1;
}

.payments-distribution-row:focus-visible,
.payments-completed-filter button:focus-visible,
.payments-category-option:focus-visible,
.payments-category-back:focus-visible {
  outline: 2px solid rgba(19, 167, 160, 0.72);
  outline-offset: 2px;
}

.payments-paid-date-field,
.payments-paid-amount-field {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
}

.payments-preview-sheet-note,
.payments-preview-sheet-description {
  margin: 0;
  color: #5d6e82;
  font-size: 12.5px;
  line-height: 1.5;
}

.payments-preview-sheet-note {
  border-left: 3px solid var(--teal);
  border-radius: 0 12px 12px 0;
  background: #eef8f6;
  padding: 11px 12px;
}

.payments-preview-sheet-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 9px;
}

.payments-preview-sheet-actions > button {
  min-width: 0;
  min-height: 48px;
  justify-content: center;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.3;
}

.payments-preview-sheet-actions .payments-sheet-delete-action {
  background: #c7433c;
  color: #ffffff;
}

@media (max-width: 390px) {
  .payments-preview-body {
    padding-right: max(15px, env(safe-area-inset-right));
    padding-left: max(15px, env(safe-area-inset-left));
  }

  .payments-summary > strong {
    font-size: 25px;
  }

  .payments-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .payments-row-icon {
    width: 38px;
    height: 38px;
  }

  .payments-row-amount {
    font-size: 13px;
  }

}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.14), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 46%, #edf7f5 100%);
  color: var(--navy);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--safe-area-shield-z);
  height: var(--safe-area-top);
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

html.overlay-open,
body.overlay-open,
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.app-shell.overlay-open .content,
.app-shell.no-scroll .content {
  overflow: hidden !important;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
[data-tap] {
  transition:
    transform 130ms ease,
    opacity 130ms ease,
    box-shadow 130ms ease,
    background 130ms ease;
}

[data-tap] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.is-pressed {
  opacity: 0.94;
  transform: scale(0.98);
}

svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

svg[fill="none"] {
  fill: none;
}

.app-shell {
  position: relative;
  display: flex;
  width: min(390px, calc(100vw - 36px));
  height: min(844px, calc(100dvh - 36px));
  min-height: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(214, 226, 231, 0.9);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(8, 29, 58, 0.1);
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  padding: calc(16px + env(safe-area-inset-top)) 20px 10px;
  background: rgba(248, 250, 250, 0.92);
  backdrop-filter: blur(20px);
}

.brand {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.brand-symbol {
  width: 31px;
  height: 36px;
  object-fit: contain;
}

.brand-wordmark-text {
  display: inline-flex;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
}

.brand-wordmark-text span:last-child {
  color: var(--teal);
}

.content {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 20px 110px;
  scroll-padding-bottom: 110px;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.content::-webkit-scrollbar {
  display: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.1px;
}

h2 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.24;
}

p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.52;
}

.home-hero {
  padding-top: 6px;
}

.home-hero p,
.screen-head p {
  max-width: 340px;
  font-size: 14px;
}

.hero-actions {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 11px;
  margin-top: 17px;
}

.btn {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.btn:active {
  transform: scale(0.98);
}

.feature-mini-card.is-pressed,
.lesson-row.is-pressed,
.company-row.is-pressed,
.calendar-card.is-pressed {
  opacity: 0.96;
  transform: scale(0.985);
  box-shadow: 0 6px 18px rgba(8, 29, 58, 0.06);
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #0fa79e 0%, #34c3b0 100%);
  box-shadow: 0 8px 18px rgba(19, 167, 160, 0.2);
}

.btn-secondary {
  color: #ffffff;
  background: #081d3a;
  box-shadow: 0 8px 18px rgba(8, 29, 58, 0.14);
}

.btn-outline {
  color: var(--navy);
  border: 1px solid #d9e4ea;
  background: var(--surface);
  box-shadow: none;
}

.btn-text {
  height: auto;
  padding: 0;
  border-radius: 0;
  color: #0fa79e;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

.btn-text svg {
  width: 13px;
  height: 13px;
}

.btn-compact {
  height: 34px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
}

.btn-compact-teal {
  color: #ffffff;
  background: linear-gradient(135deg, #0fa79e 0%, #2dbca9 100%);
  box-shadow: 0 6px 14px rgba(19, 167, 160, 0.16);
}

.button {
  color: #ffffff;
  background: linear-gradient(135deg, #0fa79e 0%, #34c3b0 100%);
  box-shadow: 0 8px 18px rgba(19, 167, 160, 0.2);
}

.ghost-button {
  color: #ffffff;
  background: #081d3a;
  box-shadow: 0 8px 18px rgba(8, 29, 58, 0.14);
}

.tools-section {
  margin-top: 16px;
}

.tool-head {
  display: block;
  margin-bottom: 9px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-card,
.lesson-tool-cta,
.tool-summary-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 158px;
  gap: 8px;
  border-color: #d4ece8;
  background:
    radial-gradient(circle at 84% 18%, rgba(19, 167, 160, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f7fcfb 100%);
  padding: 12px;
}

.tool-card::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -30px;
  width: 96px;
  height: 58px;
  border-top: 1px solid rgba(19, 167, 160, 0.11);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.tool-card-compound {
  border-color: #d8e8ff;
  background:
    radial-gradient(circle at 84% 18%, rgba(37, 99, 235, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.tool-card-compound::after {
  border-color: rgba(37, 99, 235, 0.13);
}

.tool-card-icon,
.tool-summary-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #bde9e2;
  border-radius: 16px;
  color: var(--teal);
  background: linear-gradient(180deg, #effbf8 0%, #ffffff 100%);
  box-shadow: 0 10px 24px rgba(19, 167, 160, 0.1);
}

.tool-card-icon.blue,
.tool-summary-icon {
  border-color: #c9dcff;
  color: #2563eb;
  background: linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

.tool-card-icon svg,
.tool-summary-icon svg {
  width: 21px;
  height: 21px;
}

.tool-summary-card .tool-summary-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.tool-summary-card .tool-summary-icon svg {
  width: 23px;
  height: 23px;
}

.tool-card-body {
  position: relative;
  z-index: 1;
}

.tool-card h2 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 16.5px;
  line-height: 1.18;
}

.tool-card p {
  display: block;
  color: var(--navy-soft);
  font-size: 12px;
  line-height: 1.34;
}

.tool-card small {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 20px;
  align-items: center;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 0 8px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.tool-card-compound small {
  color: #2563eb;
  background: var(--blue-soft);
}

.tool-card-action {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid rgba(8, 29, 58, 0.08);
  padding-top: 9px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.tool-card-action.blue {
  color: #2563eb;
}

.tool-card-action svg {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(19, 167, 160, 0.09);
  padding: 4px;
}

.tool-card-action.blue svg {
  background: rgba(37, 99, 235, 0.09);
}

.section {
  margin-top: 24px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-head h2 {
  margin: 0;
  font-size: 16px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  color: var(--teal);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.text-link svg {
  width: 13px;
  height: 13px;
}

.featured-list,
.list-section,
.timeline,
.about-list,
.disclosure-list,
.quiz-options {
  display: grid;
  gap: 12px;
}

.featured-list,
.list-section,
.timeline {
  gap: 14px;
}

.feature-mini-card,
.lesson-row,
.calendar-card,
.company-row,
.about-card,
.detail-card,
.detail-block,
.insight-box,
.disclosure-row,
.legal-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.feature-mini-card {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.feature-dot {
  width: 7px;
  height: 7px;
  align-self: start;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--teal);
}

.feature-dot.navy {
  background: var(--navy);
}

.mini-label {
  display: block;
  margin-bottom: 4px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
}

.icon-action,
.company-logo-mini,
.chevron-action {
  display: grid;
  place-items: center;
  border: 0;
  flex: 0 0 auto;
}

.icon-action {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: var(--teal);
  background: var(--mint-soft);
}

.company-logo-mini {
  min-width: 46px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #d4ece8;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 900;
}

.screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.screen-head h1 {
  margin-bottom: 2px;
  font-size: 24px;
}

.screen-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--navy);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.search-bar {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 0 12px;
  box-shadow: var(--shadow-soft);
}

.search-bar svg {
  color: var(--muted-soft);
  width: 16px;
  height: 16px;
}

.search-bar input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
  font-size: 13px;
}

.search-tune {
  color: var(--navy-soft);
  font-size: 12px;
  opacity: 0.55;
}

.filter-bar {
  display: flex;
  gap: 8px;
  margin: 12px -20px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px 3px;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
  touch-action: pan-x;
  white-space: nowrap;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar::after {
  content: "";
  flex: 0 0 calc(100% - 56px);
}

.filter-chip {
  min-height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--navy-soft);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}

.calendar-filter-stack {
  display: grid;
  margin-top: 8px;
}

.calendar-filter-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-filter-stack .filter-bar {
  margin-top: 7px;
  margin-bottom: 11px;
  scroll-behavior: auto;
}

.calendar-filter-stack .filter-bar::after {
  content: none;
}

.filter-bar[data-filter-action="filter-lessons"]::after {
  content: none;
}

.filter-bar[data-filter-action="filter-lessons"],
.filter-bar[data-filter-action="filter-portfolio-strategies"] {
  scroll-behavior: auto;
}

.filter-bar[data-filter-action="filter-portfolio-strategies"]::after {
  content: none;
}

.filter-chip.is-active {
  color: #ffffff;
  border-color: var(--teal);
  background: var(--teal);
}

.calendar-category-control {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 7px 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 0 16px;
  color: var(--navy);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.calendar-category-control > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-category-control:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.calendar-category-chevron {
  flex: 0 0 auto;
  color: var(--teal);
  font-size: 20px;
  line-height: 1;
}

.lesson-row,
.company-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
}

.learn-portfolio-entry,
.portfolio-strategy-row {
  width: 100%;
  min-width: 0;
  border: 1px solid #cceae5;
  color: var(--navy);
  background: var(--surface);
  font: inherit;
  text-align: left;
}

.learn-portfolio-entry {
  display: grid;
  min-height: 86px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-card);
  padding: 13px;
  box-shadow: var(--shadow-soft);
}

.learn-portfolio-entry-icon,
.portfolio-strategy-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: var(--mint-soft);
}

.learn-portfolio-entry-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.learn-portfolio-entry-icon svg,
.portfolio-strategy-icon svg {
  width: 22px;
  height: 22px;
}

.learn-portfolio-entry-copy,
.portfolio-strategy-row-main {
  min-width: 0;
}

.learn-portfolio-entry-copy {
  display: grid;
  gap: 2px;
}

.learn-portfolio-entry-copy .mini-label {
  margin: 0 0 1px;
}

.learn-portfolio-entry-copy strong {
  font-size: 15px;
  line-height: 1.25;
}

.learn-portfolio-entry-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.learn-portfolio-entry-arrow,
.portfolio-strategy-arrow {
  color: var(--teal);
  font-size: 28px;
  line-height: 1;
}

.learn-portfolio-entry:focus-visible,
.portfolio-strategy-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.learn-portfolio-entry:active,
.learn-portfolio-entry.is-pressed,
.portfolio-strategy-row:active,
.portfolio-strategy-row.is-pressed {
  background: #f4fbf9;
}

.portfolio-strategy-level-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: -2px 0 18px;
  border: 1px solid #d4ece8;
  border-radius: 16px;
  background: var(--mint-soft);
  padding: 10px 11px;
}

.portfolio-strategy-level-note svg {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: var(--teal);
  background: #ffffff;
  padding: 6px;
}

.portfolio-strategy-level-note p {
  color: var(--navy-soft);
  font-size: 11.5px;
  line-height: 1.42;
}

.portfolio-strategy-results {
  display: grid;
  gap: 22px;
}

.portfolio-strategy-group {
  min-width: 0;
}

.portfolio-strategy-group-head {
  display: flex;
  min-height: 28px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding: 0 2px;
}

.portfolio-strategy-group-head h2 {
  min-width: 0;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.25;
}

.portfolio-strategy-group-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}

.portfolio-strategy-list {
  display: grid;
  gap: 9px;
}

.portfolio-strategy-row {
  display: grid;
  min-height: 92px;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  border-color: var(--border);
  border-radius: 18px;
  padding: 11px;
  box-shadow: var(--shadow-soft);
}

.portfolio-strategy-icon {
  width: 42px;
  height: 42px;
  align-self: start;
  border-radius: 14px;
}

.portfolio-strategy-row-main {
  display: grid;
  gap: 4px;
}

.portfolio-strategy-row-main > strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.27;
}

.portfolio-strategy-row-main > small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portfolio-strategy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.portfolio-strategy-meta .category-chip,
.portfolio-strategy-meta .level {
  min-height: 22px;
  padding: 0 8px;
  font-size: 9.5px;
}

.portfolio-strategy-detail-hero h1 {
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.portfolio-strategy-detail-hero p {
  margin-top: 7px;
}

.portfolio-strategy-example {
  border-color: #cceae5;
  background: var(--mint-soft);
}

.portfolio-strategy-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.portfolio-strategy-assets span {
  display: inline-flex;
  min-height: 30px;
  max-width: 100%;
  align-items: center;
  border: 1px solid #c6e5df;
  border-radius: 999px;
  background: #ffffff;
  padding: 6px 10px;
  color: var(--navy-soft);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.portfolio-strategy-strengths {
  border-color: #cceae5;
  background: #f4fbf9;
}

.portfolio-strategy-limitations {
  border-color: #dfe7eb;
  background: #fafcfd;
}

.portfolio-strategy-disclaimer {
  margin-bottom: 4px;
}

.portfolio-strategy-library-note {
  margin-top: 18px;
}

.row-icon,
.company-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 15px;
  font-weight: 950;
}

.row-icon.tone-2 {
  color: #2563eb;
  background: var(--blue-soft);
}

.row-icon.tone-3 {
  color: #6d5bd0;
  background: var(--violet-soft);
}

.row-icon.tone-4 {
  color: var(--teal);
  background: #effaf8;
}

.row-main {
  min-width: 0;
}

.row-main h2,
.company-row h2 {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 4px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.28;
}

.row-main p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 1.42;
}

.row-action {
  white-space: nowrap;
}

.row-action svg,
.chevron-action svg {
  width: 13px;
  height: 13px;
}

.chevron-action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--navy-soft);
  background: var(--surface-soft);
}

.company-action {
  height: 32px;
  padding: 0 10px;
  font-size: 11.5px;
}

.content-family-control,
.fund-view-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 4px;
}

.content-family-control { margin-bottom: 16px; }
.fund-view-control { margin: 12px 0 16px; }

.content-family-control button,
.fund-view-control button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.content-family-control button.is-active,
.fund-view-control button.is-active {
  color: var(--navy);
  background: #fff;
  box-shadow: 0 4px 12px rgba(8, 29, 58, 0.06);
}

.content-family-control button:focus-visible,
.fund-view-control button:focus-visible,
.fund-row:focus-visible,
.fund-type-row:focus-visible,
.fund-source-link:focus-visible,
.fund-learning-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.fund-learning-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  gap: 11px;
  margin: 12px 0 14px;
  border: 1px solid #d4ece8;
  border-radius: 16px;
  color: var(--navy);
  background: #f7fcfb;
  padding: 11px 12px;
  text-align: left;
}

.fund-learning-link:active,
.fund-learning-link.is-pressed { background: var(--mint-soft); }

.fund-learning-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--teal);
  background: #eaf7f4;
}

.fund-learning-icon svg { width: 19px; height: 19px; }
.fund-learning-copy { display: grid; min-width: 0; gap: 3px; }
.fund-learning-copy strong { color: var(--navy); font-size: 13.5px; font-weight: 850; line-height: 1.3; }
.fund-learning-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.fund-learning-arrow { color: var(--teal); font-size: 24px; line-height: 1; text-align: right; }

.fund-library-note { margin-bottom: 14px; }

.fund-list,
.fund-type-list {
  display: grid;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.fund-row,
.fund-type-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
  background: transparent;
  padding: 12px;
  text-align: left;
}

.fund-row { grid-template-columns: 48px minmax(0, 1fr) 18px; }
.fund-type-row { grid-template-columns: minmax(0, 1fr) 18px; }
.fund-row:last-child, .fund-type-row:last-child { border-bottom: 0; }
.fund-row:active, .fund-type-row:active, .fund-row.is-pressed, .fund-type-row.is-pressed { background: var(--mint-soft); }

.fund-code {
  display: inline-flex;
  width: 48px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cce9e5;
  border-radius: 12px;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.fund-code.large { width: max-content; min-width: 58px; min-height: 36px; padding: 0 12px; font-size: 14px; }
.fund-row-main, .fund-type-row > span:first-child { display: grid; min-width: 0; gap: 4px; }
.fund-row-main strong, .fund-type-row strong { color: var(--navy); font-size: 13.5px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.fund-row-main small, .fund-type-row small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.fund-row-arrow, .fund-type-row > span:last-child { color: var(--muted-soft); font-size: 24px; line-height: 1; }

.fund-profile-hero {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid #cfe8e5;
  border-radius: var(--radius-card);
  background: #f7fcfb;
  padding: 16px;
}

.fund-profile-hero h1 { margin: 2px 0 0; color: var(--navy); font-size: 21px; line-height: 1.24; overflow-wrap: anywhere; }
.fund-profile-hero p { color: var(--navy-soft); font-size: 13px; font-weight: 750; line-height: 1.4; }
.fund-profile-hero small { color: var(--muted); font-size: 11px; }

.fund-detail-sections {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.fund-detail-section { min-width: 0; border-bottom: 1px solid var(--border); padding: 15px; }
.fund-detail-section:last-child { border-bottom: 0; }
.fund-detail-section h2 { margin-bottom: 7px; color: var(--navy); font-size: 14px; }
.fund-detail-section p, .fund-definition-list dd { color: var(--navy-soft); font-size: 12.5px; line-height: 1.52; overflow-wrap: anywhere; }
.fund-asset-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fund-asset-tags span { display: inline-flex; min-height: 30px; align-items: center; border: 1px solid #d3ebe7; border-radius: 999px; color: var(--navy-soft); background: var(--mint-soft); padding: 5px 9px; font-size: 10.5px; font-weight: 750; }
.fund-definition-list { display: grid; gap: 10px; margin: 0; }
.fund-definition-list div { display: grid; gap: 3px; }
.fund-definition-list dt, .fund-risk-values span { color: var(--muted); font-size: 10.5px; font-weight: 750; }
.fund-definition-list dd { margin: 0; color: var(--navy); font-weight: 750; }
.fund-risk-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fund-risk-values div { display: grid; gap: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); padding: 10px; }
.fund-risk-values strong { color: var(--navy); font-size: 15px; }
.fund-field-note { margin-top: 8px; color: var(--muted) !important; font-size: 10.5px !important; }
.fund-source-list { display: grid; gap: 8px; }
.fund-source-link { display: grid; min-width: 0; min-height: 44px; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 8px; border: 1px solid #d5e9e6; border-radius: 12px; color: var(--navy); background: #f8fcfb; padding: 9px 10px; font-size: 12px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.fund-source-link svg { width: 14px; height: 14px; color: var(--teal); }
.fund-source-link.compact { display: inline-flex; width: max-content; max-width: 100%; margin-top: 8px; }
.fund-verification-pending { color: var(--muted) !important; }
.fund-lesson-cta { margin-bottom: 14px; }
.fund-lesson-primary-cta { margin-top: 16px; }
.fund-lesson-primary-cta .btn { min-height: 44px; }
.fund-lesson-disclaimer { margin-bottom: 14px; }

.company-library-note {
  display: grid;
  gap: 4px;
  border: 1px solid #d4ece8;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(234, 247, 244, 0.82), rgba(255, 255, 255, 0.92));
  padding: 11px 12px;
}

.company-library-note strong {
  color: var(--navy);
  font-size: 12px;
}

.company-library-note span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.38;
}

.company-results-bar {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
  color: var(--muted);
}

.company-results-bar strong {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 850;
}

.company-results-bar span {
  font-size: 10.5px;
  text-align: right;
}

.company-learning-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  margin: 8px 0 10px;
  border: 1px solid #d4ece8;
  border-radius: 14px;
  color: var(--navy);
  background: #f7fcfb;
  padding: 8px 10px;
  text-align: left;
}

.company-learning-row:active,
.company-learning-row.is-pressed {
  background: var(--mint-soft);
}

.company-learning-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.company-learning-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--teal);
  background: #eaf7f4;
}

.company-learning-icon svg {
  width: 17px;
  height: 17px;
}

.company-learning-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.company-learning-copy strong {
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 850;
  line-height: 1.3;
}

.company-learning-copy small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.company-learning-arrow {
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
  text-align: right;
}

.company-filters {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 8px 0;
}

.company-filter-field {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin: 0;
  border: 0;
  padding: 0;
}

.company-filter-field > legend,
.company-filter-field > span:first-child {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.company-country-segment {
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid #cfdee2;
  border-radius: 13px;
  background: #eef3f4;
  padding: 2px;
}

.company-country-option {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: #637287;
  background: transparent;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1;
}

.company-country-option.is-active {
  color: #ffffff;
  background: var(--teal);
  box-shadow: 0 2px 7px rgba(8, 29, 58, 0.08);
}

.company-country-option:focus-visible,
.company-sector-select-shell select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.company-sector-select-shell {
  position: relative;
  display: block;
  min-width: 0;
}

.company-sector-select-shell select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  appearance: none;
  border: 1px solid #cfdee2;
  border-radius: 14px;
  color: var(--navy);
  background: var(--surface);
  padding: 0 44px 0 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: var(--shadow-soft);
}

.company-sector-select-shell > span {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--teal);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-55%);
}

.company-empty-state {
  margin: 0;
}

.lesson-tool-cta {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  border-color: #d4ece8;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfa 100%);
  padding: 14px;
}

.lesson-tool-cta .tool-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.lesson-tool-cta .tool-card-icon svg {
  width: 20px;
  height: 20px;
}

.lesson-tool-cta h2 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 16px;
}

.lesson-tool-cta p {
  margin-bottom: 12px;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.dividend-lesson-tool-cta {
  margin-top: 28px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.meta-row.tight {
  gap: 6px;
  margin: 7px 0 0;
}

.category-chip,
.level,
.company-code,
.event-category {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.category-chip {
  color: var(--navy-soft);
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.level {
  border: 1px solid #d4ece8;
  color: var(--teal);
  background: var(--mint-soft);
}

.level-beginner {
  color: var(--teal);
  border-color: #d4ece8;
  background: var(--mint-soft);
}

.level-intermediate {
  color: #2563eb;
  border-color: #d7e6ff;
  background: var(--blue-soft);
}

.level-advanced {
  color: var(--navy);
  border-color: #dcd7ff;
  background: var(--violet-soft);
}

.company-code {
  color: #ffffff;
  background: var(--navy);
}

.calendar-card {
  display: block;
  padding: 15px;
}

.calendar-safety-note {
  display: grid;
  gap: 5px;
  border: 1px solid #d4ece8;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(234, 247, 244, 0.86), rgba(255, 255, 255, 0.94));
  padding: 11px 12px;
}

.calendar-safety-note p,
.calendar-safety-note span {
  margin: 0;
  color: var(--navy-soft);
  font-size: 11.4px;
  line-height: 1.42;
}

.calendar-safety-note span {
  color: var(--muted);
  font-weight: 700;
}

.calendar-month-marker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 2px -2px;
  padding: 0 2px;
}

.calendar-month-marker span {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
}

.calendar-month-marker small {
  border: 1px solid #dce9ec;
  border-radius: 999px;
  background: #f8fbfb;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.calendar-meta-row {
  display: grid;
  grid-template-columns: auto minmax(82px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.date-stack {
  min-width: 52px;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
  padding: 8px 7px;
  text-align: center;
  box-shadow: 0 7px 18px rgba(8, 29, 58, 0.045);
}

.date-stack strong,
.date-stack span,
.date-stack small {
  display: block;
}

.date-stack strong {
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.date-stack span {
  margin-top: 4px;
  color: var(--navy-soft);
  font-size: 10px;
  font-weight: 700;
}

.date-stack small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.calendar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-title-row h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
}

.reminder-button,
.reminder-badge {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.reminder-button {
  border: 1px solid #d4ece8;
  color: var(--teal);
  background: linear-gradient(180deg, #f7fffd 0%, var(--mint-soft) 100%);
  box-shadow: 0 8px 18px rgba(19, 167, 160, 0.08);
}

.calendar-meta-row .reminder-button {
  justify-self: center;
}

.reminder-button svg,
.reminder-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.reminder-button.is-active {
  color: var(--navy);
  border-color: #cbe7e2;
  background: #e7f6f3;
}

.reminder-badge {
  color: var(--navy-soft);
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.reminder-badge.inline {
  margin-top: 10px;
}

.event-category {
  display: inline-flex;
  min-height: 36px;
  max-width: 112px;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(8, 29, 58, 0.045);
  white-space: nowrap;
}

.calendar-meta-row .event-category {
  justify-self: end;
}

.event-category svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.event-category span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-category.category--makro {
  color: #0f7490;
  border-color: #cdeaf4;
  background: #edf9fd;
}

.event-category.category--sektorel {
  color: #17656b;
  border-color: #d4eeec;
  background: #effaf8;
}

.event-category.category--bilanco {
  color: var(--navy-soft);
  border-color: #dce6ef;
  background: #f3f7fb;
}

.event-category.category--temettu {
  color: #6d5bd0;
  border-color: #e3ddff;
  background: #f4f1ff;
}

.event-category.category--halkaarz {
  color: #0f8f74;
  border-color: #d2eee8;
  background: #ecfaf6;
}

.event-category.category--spkkap {
  color: var(--navy-soft);
  border-color: #d9e3ea;
  background: #f6f8fa;
}

.event-category.category--etkinlik {
  color: var(--navy);
  border-color: #d8eafa;
  background: #eef7ff;
}

.event-status {
  display: inline-flex;
  min-height: 24px;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.event-status.waiting,
.event-status.draft,
.event-status.upcoming {
  color: var(--navy-soft);
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.event-status.today {
  color: var(--teal);
  border: 1px solid #cceae5;
  background: var(--mint-soft);
}

.event-status.announced {
  color: var(--teal);
  border: 1px solid #d4ece8;
  background: var(--mint-soft);
}

.event-status.past {
  color: var(--muted);
  border: 1px solid var(--border);
  background: #f5f7f8;
}

.calendar-info-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.calendar-release-summary {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
  border: 1px solid #cceae5;
  border-radius: 16px;
  background: var(--mint-soft);
  padding: 11px 12px;
}

.calendar-release-summary > div:first-child {
  display: grid;
  gap: 3px;
}

.calendar-release-summary span,
.calendar-release-summary dt {
  color: var(--teal);
  font-size: 10px;
  font-weight: 850;
}

.calendar-release-summary strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.4;
}

.calendar-release-summary dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.calendar-release-summary dl div {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  padding: 5px 8px;
}

.calendar-release-summary dd {
  margin: 0;
  color: var(--navy-soft);
  font-size: 10.5px;
  font-weight: 750;
}

.calendar-info-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.calendar-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.calendar-info-row > svg {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--teal);
  background: var(--mint-soft);
  padding: 8px;
}

.calendar-info-row.compact {
  padding-top: 10px;
}

.calendar-info-row.compact p {
  color: var(--navy-soft);
  font-size: 13px;
  font-weight: 650;
}

.calendar-info-row.compact span {
  color: var(--teal);
  font-weight: 850;
}

.calendar-info-row.compact p {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.timezone-pill {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid #d4ece8;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 0 7px;
  color: var(--teal);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.calendar-info-row h3 {
  margin: 0 0 3px;
  color: var(--navy);
  font-size: 12.5px;
}

.calendar-info-row p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.calendar-info-row strong {
  color: var(--navy);
}

.calendar-info-row a {
  color: var(--navy-soft);
  text-decoration: none;
}

.calendar-detail-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 13px;
}

.calendar-detail-action.multi {
  justify-content: center;
}

.calendar-export-actions {
  display: grid;
  gap: 9px;
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.calendar-export-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.calendar-export-buttons {
  display: grid;
  gap: 9px;
}

.calendar-export-button {
  width: 100%;
  min-height: 48px;
  height: auto;
  justify-content: center;
  gap: 8px;
  border-color: #d4e6e8;
  background: #ffffff;
  padding: 11px 14px;
  color: var(--navy);
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.calendar-export-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--teal);
}

.calendar-export-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calendar-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
}

.calendar-load-more .btn {
  min-width: 190px;
  border-color: #d4e6e8;
  background: #ffffff;
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(8, 29, 58, 0.06);
}

.calendar-load-more .btn span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.impact-trigger,
.release-trigger,
.dividend-trigger {
  height: 36px;
  border-color: #d4ece8;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
  padding: 0 15px;
  color: var(--teal);
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(19, 167, 160, 0.07);
}

.dividend-trigger {
  color: var(--navy);
  border-color: #dde7f0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
  box-shadow: 0 8px 18px rgba(8, 29, 58, 0.06);
}

.impact-trigger svg,
.dividend-trigger svg {
  width: 14px;
  height: 14px;
}

.company-avatar {
  border: 1px solid #d4ece8;
  color: var(--teal);
  background: linear-gradient(180deg, #effbf8 0%, #ffffff 100%);
  box-shadow: 0 8px 18px rgba(19, 167, 160, 0.08);
}

.company-avatar.large {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  font-size: 17px;
}

.company-profile-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(234, 247, 244, 0.9), rgba(255, 255, 255, 0.96)),
    var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.company-profile-head {
  display: flex;
  gap: 13px;
  align-items: center;
}

.company-profile-head h1 {
  margin-bottom: 7px;
  font-size: 21px;
  line-height: 1.18;
}

.company-summary {
  margin-top: 14px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.company-profile-note {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  border: 1px solid #d4ece8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0 11px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
}

.company-profile-note svg {
  width: 13px;
  height: 13px;
}

.company-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.company-mini-grid div {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
  padding: 10px 8px;
}

.company-mini-grid span,
.company-mini-grid strong {
  display: block;
}

.company-mini-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.company-mini-grid strong {
  overflow: hidden;
  margin-top: 4px;
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-insight-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.company-info-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

.company-info-card.primary {
  border-color: #d4ece8;
  background: linear-gradient(180deg, #ffffff, #f7fcfb);
}

.company-info-card.positive {
  background: var(--surface);
}

.company-info-card.risk {
  border-color: #ffe0e0;
  background: #fffafa;
}

.company-info-card.watch {
  background: var(--surface-soft);
}

.company-info-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 15px;
  color: var(--teal);
  background: var(--mint-soft);
}

.company-info-card.revenue .company-info-icon {
  color: #2563eb;
  background: var(--blue-soft);
}

.company-info-card.positive .company-info-icon {
  color: var(--teal);
  background: var(--mint-soft);
}

.company-info-card.risk .company-info-icon {
  color: var(--red);
  background: var(--red-soft);
}

.company-info-card.watch .company-info-icon {
  color: var(--navy-soft);
  background: var(--surface);
}

.company-info-icon svg {
  width: 18px;
  height: 18px;
}

.company-info-card h2 {
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.25;
}

.company-info-card p {
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.52;
}

.company-info-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.company-detail-hero {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 15px;
  box-shadow: var(--shadow-card);
}

.company-detail-hero h1 {
  margin-bottom: 8px;
  font-size: 21px;
}

.disclosure-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
}

.disclosure-row > svg {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: var(--teal);
  background: var(--mint-soft);
  padding: 9px;
}

.disclosure-row.risk > svg {
  color: var(--red);
  background: var(--red-soft);
}

.disclosure-row h2 {
  margin-bottom: 3px;
  font-size: 13px;
}

.back-link {
  display: inline-flex;
  border: 0;
  margin-bottom: 12px;
  padding: 0;
  color: var(--teal);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.detail-card,
.detail-block,
.insight-box {
  padding: 15px;
  margin-bottom: 12px;
}

.detail-card h1 {
  font-size: 24px;
}

.detail-block h2,
.insight-box h2 {
  font-size: 15px;
}

.detail-block p + p {
  margin-top: 10px;
}

.lesson-topic-list {
  display: grid;
  gap: 9px;
}

.lesson-topic-card {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  padding: 12px;
}

.lesson-topic-card h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 13px;
}

.lesson-topic-card p {
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.lesson-topic-card p + p {
  margin-top: 0;
}

.etf-examples-block {
  display: grid;
  gap: 12px;
}

.etf-example-list {
  display: grid;
  gap: 10px;
}

.etf-example-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
  padding: 13px;
}

.etf-code {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #d7e6ff;
  border-radius: 16px;
  color: #2563eb;
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 900;
}

.etf-example-card h3 {
  color: var(--navy);
  font-size: 14px;
}

.etf-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.etf-title-row span {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid #d4ece8;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 0 8px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.etf-example-card p {
  color: var(--navy-soft);
  font-size: 12.4px;
  line-height: 1.45;
}

.etf-example-card dl {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
}

.etf-example-card dt {
  color: var(--navy);
  font-size: 11px;
  font-weight: 850;
}

.etf-example-card dd {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.38;
}

.etf-disclaimer {
  margin-top: 0;
}

.lesson-tool-cta + .list-section {
  margin-top: 16px;
}

.insight-box,
.legal-note {
  border-color: #d4ece8;
  background: var(--mint-soft);
}

.detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 17px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.balance-cta,
.balance-guide-hero,
.balance-card,
.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.balance-cta {
  display: grid;
  gap: 13px;
  margin-bottom: 12px;
  padding: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #f1fbf8 100%);
}

.balance-cta h2 {
  margin-bottom: 5px;
  font-size: 16px;
}

.balance-cta .btn {
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 11px 14px;
  white-space: normal;
  line-height: 1.18;
  text-align: center;
}

.balance-guide-hero {
  margin-bottom: 14px;
  padding: 15px;
  border-color: #d4ece8;
  background: var(--mint-soft);
  box-shadow: none;
}

.balance-guide-hero h2 {
  margin-bottom: 6px;
  font-size: 17px;
}

.balance-guide,
.balance-group,
.balance-list {
  display: grid;
}

.balance-guide {
  gap: 18px;
}

.balance-group {
  gap: 10px;
}

.balance-head {
  margin-bottom: 0;
}

.balance-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.balance-list {
  gap: 10px;
}

.balance-card {
  overflow: hidden;
}

.balance-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 13px 14px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition:
    transform 130ms ease,
    opacity 130ms ease,
    background 130ms ease;
}

.balance-card summary::-webkit-details-marker {
  display: none;
}

.balance-card summary span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.balance-card summary small {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 10px;
  font-weight: 800;
}

.balance-card[open] summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.balance-card-body {
  display: grid;
  gap: 11px;
  padding: 13px 14px 14px;
}

.formula-box,
.education-note {
  border: 1px solid #d4ece8;
  border-radius: 14px;
  background: var(--mint-soft);
}

.formula-box {
  display: grid;
  gap: 4px;
  padding: 11px;
}

.formula-box strong {
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
}

.formula-box span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.balance-info h3 {
  margin-bottom: 3px;
  font-size: 12px;
}

.education-note {
  padding: 10px 11px;
  color: var(--navy-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.42;
}

.education-note h3 {
  margin-bottom: 4px;
  color: var(--teal);
  font-size: 11px;
}

.education-note p {
  color: var(--navy-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.empty-state {
  padding: 15px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.empty-state h2 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.empty-state p {
  margin: 0;
}

.quiz-box {
  display: grid;
  gap: 10px;
}

.quiz-question {
  color: var(--navy);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.48;
}

.quiz-option {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--navy);
  background: var(--surface);
  text-align: left;
  font-size: 13px;
  font-weight: 650;
}

.quiz-option.is-correct {
  color: #ffffff;
  border-color: var(--teal);
  background: var(--teal);
}

.quiz-option.is-wrong {
  color: var(--red);
  border-color: #ffd7d7;
  background: var(--red-soft);
}

.answer-box {
  display: none;
  border: 1px solid #d4ece8;
  border-radius: 14px;
  background: var(--mint-soft);
  padding: 12px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.answer-box.is-visible {
  display: block;
}

.quiz-feedback-title {
  display: block;
  margin-bottom: 5px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.answer-box p {
  color: var(--navy-soft);
}

.quiz-next-button {
  margin-top: 11px;
}

.about-card {
  padding: 18px;
}

.about-card.legal {
  border-color: #d4ece8;
  background: var(--mint-soft);
}

.about-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 15px;
  color: var(--navy);
  background: var(--surface-soft);
}

.about-icon.blue {
  color: #2563eb;
  background: var(--blue-soft);
}

.about-icon.teal {
  color: var(--teal);
  background: #ffffff;
}

.about-icon.brand-mark {
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 29, 58, 0.07);
}

.about-icon.brand-mark img {
  width: 26px;
  height: 30px;
  object-fit: contain;
}

.legal-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  color: var(--navy-soft);
  font-size: 12px;
  line-height: 1.48;
  box-shadow: none;
}

.legal-note::before {
  content: "!";
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--teal);
  font-size: 14px;
  font-weight: 900;
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  background: rgba(8, 29, 58, 0);
  opacity: 0;
  transition:
    opacity 180ms ease,
    background 180ms ease;
}

.sheet-overlay[hidden],
.reminder-sheet[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.sheet-overlay.is-visible {
  pointer-events: auto;
  opacity: 1;
  background: rgba(8, 29, 58, 0.22);
}

.reminder-sheet {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  z-index: 1110;
  display: grid;
  gap: 14px;
  max-height: calc(100% - 70px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.98);
  padding: 9px 14px 16px;
  box-shadow: 0 24px 70px rgba(8, 29, 58, 0.18);
  transform: translateY(calc(100% + 28px));
  transition: transform 220ms ease;
  backdrop-filter: blur(22px);
}

.reminder-sheet.is-visible {
  transform: translateY(0);
}

.sheet-handle {
  width: 42px;
  height: 4px;
  justify-self: center;
  border-radius: 999px;
  background: var(--border-strong);
}

.reminder-sheet > .sheet-handle,
.finance-bulk-delete-sheet > .finance-bulk-delete-handle {
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.reminder-sheet > .sheet-handle::after,
.finance-bulk-delete-sheet > .finance-bulk-delete-handle::after {
  position: absolute;
  inset: -14px -32px;
  content: "";
}

.reminder-sheet.is-dragging > .sheet-handle,
.finance-bulk-delete-sheet.is-dragging > .finance-bulk-delete-handle {
  cursor: grabbing;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sheet-head h2 {
  margin-bottom: 5px;
  font-size: 18px;
}

.sheet-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--navy-soft);
  background: var(--surface-soft);
  font-size: 20px;
  line-height: 1;
}

.detail-sheet {
  max-height: calc(100% - 54px);
}

.detail-sheet-head h2 {
  margin-bottom: 5px;
  font-size: 20px;
}

.detail-sheet-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}

.detail-sheet-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.detail-sheet-content .back-link {
  display: none;
}

.detail-sheet-content > :first-child {
  margin-top: 0;
}

#detailSheet.lesson-detail-sheet {
  align-content: start;
  grid-template-rows: auto max-content auto;
}

#detailSheet.lesson-detail-sheet .detail-sheet-head {
  height: auto;
  min-height: max-content;
  padding-bottom: 8px;
}

#detailSheet.lesson-detail-sheet .detail-sheet-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

#detailSheet.lesson-detail-sheet .detail-sheet-head p {
  display: block;
  max-height: none;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

#detailSheet.lesson-detail-sheet .detail-sheet-content {
  margin-top: 8px;
}

#detailSheet.content-first-detail-sheet {
  align-content: start;
  grid-template-rows: auto 44px auto;
}

#detailSheet.content-first-detail-sheet .detail-sheet-head {
  position: relative;
  height: 44px;
  min-height: 44px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
}

#detailSheet.content-first-detail-sheet .detail-sheet-head > div {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#detailSheet.content-first-detail-sheet .sheet-close {
  margin-left: auto;
}

#detailSheet.content-first-detail-sheet .detail-sheet-content {
  margin-top: 4px;
}

#impactSheet {
  align-content: start;
  grid-template-rows: auto max-content auto;
}

#releaseSheet {
  align-content: start;
  grid-template-rows: auto max-content auto;
}

#releaseSheet .sheet-head {
  height: auto;
  min-height: max-content;
  padding-bottom: 8px;
}

#releaseSheet .sheet-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

#releaseSheet .sheet-head p {
  display: block;
  max-height: none;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

#releaseSheet .release-content {
  margin-top: 8px;
}

#impactSheet .sheet-head {
  height: auto;
  min-height: max-content;
  padding-bottom: 8px;
}

#impactSheet .sheet-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

#impactSheet .sheet-head p {
  display: block;
  max-height: none;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

#impactSheet .impact-content {
  margin-top: 8px;
}

#dividendSheet,
#compoundSheet {
  align-content: start;
  grid-template-rows: auto max-content auto;
}

#dividendSheet .sheet-head,
#compoundSheet .sheet-head {
  height: auto;
  min-height: max-content;
  padding-bottom: 8px;
}

#dividendSheet .sheet-head > div,
#compoundSheet .sheet-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

#dividendSheet .sheet-head p,
#compoundSheet .sheet-head p {
  display: block;
  max-height: none;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

#dividendSheet .dividend-content,
#compoundSheet .compound-content {
  margin-top: 14px;
}

#compoundSheet .compound-currency-note {
  margin: -2px 0 2px;
  color: var(--navy-soft);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.45;
}

.reminder-options {
  display: grid;
  gap: 9px;
}

.reminder-option {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  padding: 0 13px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.reminder-option small {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 10px;
  font-weight: 850;
}

.reminder-option.is-selected {
  border-color: #d4ece8;
  background: var(--mint-soft);
}

#calendarCategorySheet {
  top: auto;
  align-content: start;
  grid-template-rows: 4px auto minmax(0, 1fr);
  max-height: min(620px, calc(100% - 32px));
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
}

.calendar-category-options {
  display: grid;
  min-height: 0;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 1px 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.calendar-category-options::-webkit-scrollbar {
  display: none;
}

.calendar-category-option {
  min-height: 48px;
  box-shadow: none;
}

.calendar-category-option:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.reminder-option.danger {
  color: var(--red);
  background: var(--red-soft);
  border-color: #ffd7d7;
  box-shadow: none;
}

#reminderSheet .reminder-calendar-export {
  display: grid;
  gap: 8px;
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

#reminderSheet .reminder-calendar-trigger {
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #8a78d4;
  border-radius: 15px;
  background: rgba(242, 239, 255, 0.46);
  padding: 0 14px;
  color: #5f4fc0;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

#reminderSheet .reminder-calendar-icon,
#reminderSheet .reminder-calendar-icon svg {
  width: 20px;
  height: 20px;
}

#reminderSheet .reminder-calendar-icon svg {
  display: block;
  fill: currentColor;
}

#reminderSheet .reminder-calendar-disclosure {
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease;
}

#reminderSheet .reminder-calendar-trigger[aria-expanded="true"] .reminder-calendar-disclosure {
  transform: rotate(180deg);
}

#reminderSheet .reminder-calendar-choices {
  display: grid;
  gap: 7px;
  padding: 2px 0 0 32px;
}

#reminderSheet .reminder-calendar-choices[hidden] {
  display: none;
}

#reminderSheet .reminder-calendar-choice {
  display: grid;
  min-height: 48px;
  align-content: center;
  gap: 3px;
  border: 1px solid #ddd7f6;
  border-radius: 13px;
  background: var(--surface);
  padding: 8px 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

#reminderSheet .reminder-calendar-choice small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

#reminderSheet .reminder-calendar-trigger:focus-visible,
#reminderSheet .reminder-calendar-choice:focus-visible {
  outline: 3px solid rgba(19, 167, 160, 0.3);
  outline-offset: 2px;
}

.impact-sheet {
  max-height: calc(100% - 44px);
}

.impact-content {
  display: grid;
  gap: 10px;
}

.release-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.release-card,
.release-legal {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.release-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
}

.release-card > div,
.release-legal > div {
  min-width: 0;
}

.release-overview-card {
  border-color: #d6e7e9;
}

.release-card-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 15px;
  color: var(--teal);
  background: var(--mint-soft);
}

.release-card-icon svg {
  width: 18px;
  height: 18px;
}

.release-card h3,
.release-legal h3 {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.3;
}

.release-card p,
.release-legal p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.52;
}

.release-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.release-fact {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.release-fact:last-child {
  border-bottom: 0;
}

.release-fact dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.4;
}

.release-fact dd {
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.release-pending {
  display: block;
  margin: 0 !important;
  border: 1px solid #d4ece8;
  border-radius: 13px;
  background: var(--mint-soft);
  padding: 9px 10px;
  color: var(--teal) !important;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.4;
}

.release-source-fact a,
.release-source-fact span {
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.release-topic-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.release-topic-list span {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  border: 1px solid #d4ece8;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 5px 10px;
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.release-legal {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  border-color: #d4ece8;
  background: #f3fbfa;
  padding: 16px;
  box-shadow: none;
}

.release-legal-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 14px;
  color: var(--teal);
  background: #ffffff;
}

@media (max-width: 430px) {
  .release-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .release-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .release-fact {
    grid-template-columns: minmax(88px, 0.4fr) minmax(0, 1fr);
    gap: 9px;
  }

  .release-legal {
    padding: 14px;
  }
}

.release-legal-icon svg {
  width: 17px;
  height: 17px;
}

.impact-card,
.impact-legal,
.dividend-summary-card,
.dividend-legal {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.impact-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 13px;
}

.impact-card-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 15px;
  color: var(--teal);
  background: var(--mint-soft);
}

.impact-card-icon svg {
  width: 18px;
  height: 18px;
}

.impact-card h3 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 13.5px;
}

.impact-card p,
.impact-card li {
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.impact-sector-list,
.impact-company-list,
.impact-checklist {
  display: grid;
  gap: 8px;
}

.impact-sector,
.impact-company {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 10px;
}

.impact-sector span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 0 8px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 850;
}

.impact-sector strong,
.impact-company strong,
.impact-company span {
  display: block;
}

.impact-sector strong {
  margin-top: 7px;
  margin-bottom: 3px;
  color: var(--navy);
  font-size: 12.5px;
}

.impact-helper {
  margin-bottom: 9px;
}

.impact-company strong {
  color: var(--navy);
  font-size: 12.5px;
}

.impact-company span {
  margin-top: 2px;
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 800;
}

.impact-company p {
  margin-top: 7px;
}

.impact-checklist {
  margin: 0;
  padding-left: 16px;
}

.impact-legal {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  border-color: #d4ece8;
  background: linear-gradient(180deg, #f3fbfa 0%, #ffffff 100%);
  padding: 13px;
  box-shadow: none;
}

.impact-legal-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 14px;
  color: var(--teal);
  background: var(--mint-soft);
}

.impact-legal-icon svg {
  width: 17px;
  height: 17px;
}

.impact-legal h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 13px;
}

.impact-legal p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 12px;
  line-height: 1.58;
}

.dividend-sheet {
  max-height: calc(100% - 54px);
}

.dividend-content {
  display: grid;
  gap: 11px;
}

.dividend-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: #d4ece8;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfa 100%);
  padding: 13px;
}

.dividend-summary-card h3 {
  margin: 4px 0 3px;
  color: var(--navy);
  font-size: 15px;
}

.dividend-summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.dividend-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 5px;
}

.dividend-date-list span,
.kap-dividend-dates span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.dividend-date-list strong,
.kap-dividend-dates strong {
  color: var(--navy-soft);
}

.dividend-per-share {
  display: grid;
  min-width: 96px;
  justify-items: end;
  color: var(--teal);
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.dividend-per-share small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 750;
}

.kap-dividend-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d8ece9;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
  padding: 13px;
  box-shadow: var(--shadow-soft);
}

.kap-dividend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kap-dividend-head h3 {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 14px;
}

.kap-dividend-head a,
.kap-dividend-head > span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.kap-dividend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.kap-dividend-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  padding: 9px;
}

.kap-dividend-grid span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.kap-dividend-grid strong {
  color: var(--navy);
  font-size: 11.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kap-dividend-grid small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
}

.kap-rate-button {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 5px 8px;
  color: var(--teal);
  font: inherit;
  font-size: 9.5px;
  font-weight: 850;
  cursor: pointer;
}

.kap-dividend-card p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 10.5px;
  line-height: 1.45;
}

.kap-dividend-dates {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  padding: 9px;
}

.dividend-form {
  display: grid;
  gap: 9px;
}

.calc-field {
  display: grid;
  gap: 7px;
}

.calc-field span {
  color: var(--navy-soft);
  font-size: 11.5px;
  font-weight: 800;
}

.calc-field .calc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calc-label-row em {
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 4px 8px;
  color: var(--teal);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
}

.calc-field small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
}

.calc-field .calc-field-error {
  display: none;
  color: var(--red);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.calc-field .calc-field-error.is-visible {
  display: block;
}

.calc-field input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 0 13px;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  outline: none;
}

#dividendSheet .calc-field input,
#dividendSheet .calc-field select,
#compoundSheet .calc-field input,
#compoundSheet .calc-field select {
  min-height: 48px;
  max-width: 100%;
  padding: 0 14px;
  font-size: 16px;
  line-height: 1.25;
  scroll-margin-top: 120px;
  scroll-margin-bottom: 28px;
}

#dividendSheet .calc-field input::placeholder,
#compoundSheet .calc-field input::placeholder {
  font-size: 16px;
}

.calc-field input:focus {
  border-color: #bfe5df;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(19, 167, 160, 0.09);
}

.calc-field input[readonly] {
  color: var(--navy-soft);
  background: #f7fafb;
}

.calc-error {
  min-height: 17px;
  margin: -2px 0 0;
  color: var(--red);
  font-size: 11px;
  font-weight: 750;
}

.dividend-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.compound-sheet {
  max-height: calc(100% - 54px);
}

.compound-content {
  display: grid;
  gap: 11px;
}

.tool-summary-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-color: #d7e6ff;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  padding: 14px;
}

.tool-summary-icon {
  width: 46px;
  height: 46px;
  align-self: center;
  border-radius: 16px;
}

.tool-summary-icon svg {
  width: 21px;
  height: 21px;
}

.tool-summary-card > div {
  min-width: 0;
  align-self: center;
}

.tool-summary-card .mini-label {
  margin-bottom: 3px;
  line-height: 1.15;
}

.tool-summary-card h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.22;
}

.tool-summary-card p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 11.8px;
  line-height: 1.42;
}

.compound-results {
  display: grid;
  gap: 9px;
}

.result-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.result-card.net {
  border-color: #d4ece8;
  background: var(--mint-soft);
}

.result-card span,
.result-card strong {
  display: block;
}

.result-card span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.result-card strong {
  margin-top: 6px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.result-card.net strong {
  color: var(--teal);
  overflow-wrap: anywhere;
}

.dividend-legal {
  border-color: #d4ece8;
  background: var(--mint-soft);
  padding: 12px;
  color: var(--navy-soft);
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: none;
}

.toast {
  position: absolute;
  right: 22px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  left: 22px;
  z-index: 1120;
  pointer-events: none;
  border-radius: 16px;
  background: rgba(8, 29, 58, 0.94);
  padding: 12px 14px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bottom-nav {
  position: fixed;
  right: auto;
  bottom: 8px;
  left: 50%;
  z-index: 1000;
  display: flex;
  width: min(390px, calc(100vw - 24px));
  height: var(--bottom-nav-height);
  min-height: var(--bottom-nav-height);
  margin: 0;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(8, 29, 58, 0.12);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

html.modal-open .bottom-nav,
html.sheet-open .bottom-nav,
html.overlay-open .bottom-nav,
body.modal-open .bottom-nav,
body.sheet-open .bottom-nav,
body.overlay-open .bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.nav-item {
  display: grid;
  grid-template-rows: 22px 14px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  color: var(--navy-soft);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.nav-item svg {
  display: block;
  width: 19px;
  height: 19px;
  align-self: center;
}

.nav-item span {
  display: block;
  align-self: center;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

.nav-item.is-active {
  color: var(--teal);
  background: var(--mint-soft);
}

.install-area,
.install-area.is-visible {
  display: none;
}

@media (min-width: 700px) {
  .app-shell {
    width: min(390px, calc(100vw - 48px));
    height: min(844px, calc(100dvh - 48px));
  }
}

@media (max-width: 430px) {
  html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }

  .app-shell {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .topbar {
    min-height: 62px;
    padding: calc(12px + env(safe-area-inset-top)) 20px 6px;
  }

  .content {
    min-height: calc(100vh - 62px);
    min-height: calc(100dvh - 62px);
    flex: 0 0 auto;
    overflow: visible;
    padding: 8px 20px 110px;
  }

  .sheet-overlay,
  .reminder-sheet {
    position: fixed;
  }

  .sheet-overlay {
    z-index: 99990;
  }

  .home-hero {
    padding-top: 0;
  }

  .home-hero h1 {
    margin-bottom: 8px;
  }

  .hero-actions {
    margin-top: 14px;
  }

  .tools-section {
    margin-top: 12px;
  }

  .tool-head {
    margin-bottom: 7px;
  }

  .tool-card {
    min-height: 150px;
    gap: 7px;
    padding: 11px;
  }

  .reminder-sheet {
    top: max(72px, calc(env(safe-area-inset-top) + 48px));
    right: 8px;
    bottom: 0;
    left: 8px;
    z-index: 99999;
    max-height: none;
    border-radius: 30px 30px 0 0;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  #reminderSheet.calendar-reminder-sheet {
    top: auto;
    right: 12px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 12px;
    height: auto;
    min-height: 0;
    max-height: 70vh;
    max-height: 70dvh;
    align-content: start;
    grid-template-rows: auto auto auto;
    gap: 12px;
    overflow-y: auto;
    border-radius: 28px;
    padding: 10px 14px 18px;
  }

  #reminderSheet .sheet-head {
    align-items: flex-start;
  }

  #reminderSheet .sheet-head p {
    margin-bottom: 0;
  }

  #reminderSheet .reminder-options {
    gap: 8px;
  }

  #reminderSheet .reminder-option {
    min-height: 46px;
    padding: 0 13px;
  }

  .impact-sheet,
  .release-sheet,
  .dividend-sheet,
  .compound-sheet,
  .detail-sheet {
    top: max(96px, calc(env(safe-area-inset-top) + 64px));
    max-height: none;
  }

  .impact-sheet .sheet-head,
  .release-sheet .sheet-head,
  .dividend-sheet .sheet-head,
  .compound-sheet .sheet-head,
  .detail-sheet .sheet-head {
    min-height: 52px;
    padding-top: 2px;
  }

  .toast {
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

#releaseSheet.dividend-detail-sheet {
  align-content: start;
  grid-template-rows: 4px 56px auto;
  row-gap: 0;
}

#releaseSheet.dividend-detail-sheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 56px;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
  padding: 6px 0;
  background: #ffffff;
}

#releaseSheet.dividend-detail-sheet .sheet-head::before {
  content: "";
  position: absolute;
  inset: -18px -16px -1px;
  z-index: -1;
  pointer-events: none;
  border-bottom: 1px solid rgba(220, 231, 235, 0.8);
  background: #ffffff;
}

#releaseSheet.dividend-detail-sheet .sheet-head > div {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#releaseSheet.dividend-detail-sheet .release-content {
  gap: 12px;
  margin-top: 4px;
}

.dividend-detail-company-card,
.dividend-detail-section,
.dividend-detail-terms,
.dividend-detail-legal {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.dividend-detail-company-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-color: #d4ece8;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
  padding: 15px;
}

.dividend-detail-company-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: var(--navy);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.dividend-detail-company-copy {
  min-width: 0;
}

.dividend-detail-company-copy h3 {
  margin: 3px 0 8px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dividend-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dividend-detail-meta span,
.dividend-detail-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid #d4e6e8;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 9px;
  color: var(--navy-soft);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.dividend-detail-status {
  grid-column: 2;
  justify-self: start;
  border-color: #ccebe6;
  background: var(--mint-soft);
  color: var(--teal);
}

.dividend-detail-section {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.dividend-detail-section-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.dividend-detail-section-head > div {
  min-width: 0;
}

.dividend-detail-section-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.3;
}

.dividend-detail-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}

.dividend-detail-section-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--teal);
  background: var(--mint-soft);
}

.dividend-detail-section-icon svg {
  width: 17px;
  height: 17px;
}

.dividend-detail-summary {
  border-color: #d4ece8;
}

.dividend-detail-amount-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dividend-detail-amount-grid > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 11px;
}

.dividend-detail-amount-grid > div.net {
  border-color: #d4ece8;
  background: var(--mint-soft);
}

.dividend-detail-amount-grid span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.3;
}

.dividend-detail-amount-grid strong {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dividend-detail-amount-grid .net strong {
  color: var(--teal);
}

.dividend-detail-stopaj,
.dividend-detail-caption {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.dividend-detail-stopaj strong {
  color: var(--navy-soft);
}

.dividend-date-timeline {
  display: grid;
}

.dividend-date-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 11px 0;
}

.dividend-date-row:first-child {
  padding-top: 2px;
}

.dividend-date-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dividend-date-dot {
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 2px #ccebe6;
}

.dividend-date-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dividend-date-copy > span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.dividend-date-copy strong {
  color: var(--navy);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dividend-date-copy small {
  color: var(--teal);
  font-size: 9.5px;
  font-weight: 800;
}

.dividend-date-calendar-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d4e6e8;
  border-radius: 14px;
  background: #ffffff;
  padding: 8px 10px;
  color: var(--teal);
  font: inherit;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.2;
}

.dividend-date-calendar-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.dividend-detail-terms {
  overflow: hidden;
}

.dividend-terms-toggle {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: #ffffff;
  padding: 13px 15px;
  color: var(--navy);
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.dividend-terms-toggle:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -3px;
}

.dividend-terms-toggle > span:first-child {
  display: grid;
  gap: 3px;
}

.dividend-terms-toggle strong {
  font-size: 13px;
  line-height: 1.3;
}

.dividend-terms-toggle small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.dividend-terms-toggle-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--teal);
  background: var(--mint-soft);
  transition: transform 180ms ease;
}

.dividend-terms-toggle-icon svg {
  width: 16px;
  height: 16px;
}

.dividend-terms-toggle[aria-expanded="true"] .dividend-terms-toggle-icon {
  transform: rotate(90deg);
}

.dividend-terms-panel {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding: 0 15px 6px;
}

.dividend-terms-panel[hidden] {
  display: none;
}

.dividend-term-item {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.dividend-term-item:last-child {
  border-bottom: 0;
}

.dividend-term-item dt {
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.35;
}

.dividend-term-item dd {
  margin: 0;
  color: var(--navy-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.dividend-detail-source-actions {
  display: grid;
  gap: 8px;
}

.dividend-detail-source-actions .btn {
  width: 100%;
  min-height: 48px;
  height: auto;
  justify-content: center;
  gap: 8px;
  padding: 11px 13px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.dividend-detail-source-actions .btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.dividend-detail-source-actions .btn span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dividend-detail-legal {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  border-color: #d4ece8;
  background: #f3fbfa;
  padding: 14px;
  box-shadow: none;
}

.dividend-detail-legal > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 13px;
  color: var(--teal);
  background: #ffffff;
}

.dividend-detail-legal svg {
  width: 16px;
  height: 16px;
}

.dividend-detail-legal p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

@media (max-width: 430px) {
  #releaseSheet.dividend-detail-sheet {
    top: max(56px, calc(env(safe-area-inset-top) + 8px));
    grid-template-rows: 4px 48px auto;
    padding-top: 6px;
  }

  #releaseSheet.dividend-detail-sheet .sheet-head {
    height: 48px;
    min-height: 48px;
    padding: 2px 0;
  }

  #releaseSheet.dividend-detail-sheet .sheet-head::before {
    inset: -10px -16px -1px;
  }

  #releaseSheet.dividend-detail-sheet .release-content {
    margin-top: 2px;
  }

  .dividend-detail-company-card,
  .dividend-detail-section {
    padding: 14px;
  }
}

/* Finansım views */
.finance-home-card {
  display: grid;
  width: 100%;
  min-height: 96px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid #cce9e5;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(234, 247, 244, 0.92), rgba(255, 255, 255, 0.98));
  padding: 13px 14px;
  color: var(--navy);
  text-align: left;
  box-shadow: 0 9px 24px rgba(8, 29, 58, 0.07);
}

.finance-home-card:focus-visible,
.finance-budget-card:focus-visible,
.finance-contribution-entry-card:focus-visible,
.finance-next-card:focus-visible,
.finance-back-button:focus-visible,
.finance-form-toggle:focus-visible,
.finance-example-link:focus-visible,
.finance-calculate-action:focus-visible,
.finance-report-create-action:focus-visible,
.finance-print-action:focus-visible,
.finance-report-return-action:focus-visible,
.finance-target-source-action button:focus-visible,
.finance-topbar-action:focus-visible,
.finance-data-delete-action:focus-visible,
.finance-bulk-delete-continue-action:focus-visible,
.finance-bulk-delete-final-action:focus-visible,
.finance-contribution-backup-action:focus-visible,
.finance-contribution-restore-action:focus-visible,
.finance-restore-close:focus-visible,
.finance-restore-methods input:focus-visible,
.finance-restore-replace-consent input:focus-visible,
.finance-contribution-primary:focus-visible,
.finance-contribution-add-action:focus-visible,
.finance-contribution-record-actions button:focus-visible,
.finance-contribution-danger-action:focus-visible,
.finance-coming-close-action:focus-visible,
.finance-coming-sheet .sheet-close:focus-visible,
.finance-contribution-field input:focus-visible,
.finance-contribution-field select:focus-visible,
.finance-contribution-field textarea:focus-visible,
.finance-device-consent:has(input:focus-visible) {
  outline: 3px solid rgba(19, 167, 160, 0.45);
  outline-offset: 2px;
}

.finance-bulk-delete-actions .btn-outline:focus-visible {
  border-color: var(--teal);
  outline: 3px solid rgba(19, 167, 160, 0.55);
  outline-offset: 2px;
}

.finance-home-icon,
.finance-coming-icon,
.finance-budget-card-icon {
  display: grid;
  place-items: center;
  color: var(--teal);
  background: #ffffff;
}

.finance-home-icon {
  width: 44px;
  height: 44px;
  grid-row: 1 / span 2;
  border: 1px solid #bde9e2;
  border-radius: 15px;
  box-shadow: 0 6px 16px rgba(19, 167, 160, 0.1);
}

.finance-home-icon svg {
  width: 20px;
  height: 20px;
}

.finance-home-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-home-copy strong {
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}

.finance-home-copy > span {
  color: var(--navy-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.48;
}

.finance-home-action {
  grid-column: 2;
  color: var(--teal);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.app-shell.finance-view-active .topbar {
  display: none;
}

.app-shell.finance-view-active .content {
  padding: 0;
  scroll-padding: 0;
  background: var(--bg);
}

html.finance-focus-view .bottom-nav,
body.finance-focus-view .bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.finance-screen {
  min-height: 100%;
  overflow-x: hidden;
  color: var(--navy);
  background:
    linear-gradient(180deg, #f9fcfb 0%, var(--bg) 42%, #f4f9f8 100%);
}

.finance-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  min-height: calc(64px + env(safe-area-inset-top));
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid rgba(216, 227, 232, 0.88);
  background: rgba(249, 252, 251, 0.97);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  backdrop-filter: blur(18px);
}

.finance-topbar h1 {
  align-self: center;
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.finance-back-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--navy);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.finance-back-button span {
  margin-top: -3px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.finance-topbar-spacer {
  width: 44px;
  height: 44px;
}

.finance-topbar-action {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--navy);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.finance-topbar-action span {
  margin-top: -5px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
}

.finance-screen-body {
  padding: 16px 20px 0;
}

.finance-intro,
.finance-screen-copy p {
  color: #52647a;
  font-size: 15px;
  line-height: 1.5;
}

.finance-intro {
  margin-bottom: 14px;
}

.finance-hub-body {
  min-width: 0;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
}

.finance-budget-card {
  display: grid;
  width: 100%;
  min-height: 150px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px 13px;
  align-content: center;
  border: 0;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 90% 12%, rgba(45, 188, 169, 0.26), transparent 34%),
    linear-gradient(145deg, #081d3a 0%, #102a50 100%);
  padding: 18px;
  text-align: left;
  box-shadow: 0 16px 34px rgba(8, 29, 58, 0.2);
}

.finance-budget-card-icon {
  width: 48px;
  height: 48px;
  grid-row: 1;
  border-radius: 16px;
  color: #ffffff;
  background: rgba(20, 184, 166, 0.18);
}

.finance-budget-card-icon svg {
  width: 22px;
  height: 22px;
}

.finance-budget-card-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.finance-budget-card-copy small {
  width: fit-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 9px;
  color: #d1fff7;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1;
}

.finance-budget-card-copy strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
}

.finance-budget-card-copy > span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13.5px;
  line-height: 1.48;
}

.finance-budget-card-action {
  grid-column: 2;
  color: #69dfcd;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.finance-contribution-entry-card {
  display: grid;
  width: 100%;
  min-height: 142px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  gap: 9px 13px;
  margin-top: 14px;
  border: 1px solid #c9e4e1;
  border-radius: 20px;
  color: var(--navy);
  background: linear-gradient(145deg, #ffffff 0%, #edf8f6 100%);
  padding: 16px 18px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(8, 29, 58, 0.09);
}

.finance-contribution-entry-icon,
.finance-contribution-hero-icon,
.finance-device-info-icon,
.finance-contribution-empty-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--teal);
  background: #ffffff;
}

.finance-contribution-entry-icon {
  width: 48px;
  height: 48px;
  grid-row: 1;
  border: 1px solid #bde7e1;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(19, 167, 160, 0.1);
}

.finance-contribution-entry-icon svg,
.finance-contribution-hero-icon svg,
.finance-device-info-icon svg,
.finance-contribution-empty-icon svg {
  width: 22px;
  height: 22px;
}

.finance-contribution-entry-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.finance-contribution-entry-copy small,
.finance-preview-badge,
.finance-contribution-future-badge {
  width: fit-content;
  border-radius: 999px;
  font-weight: 850;
  line-height: 1;
}

.finance-contribution-entry-copy small {
  color: #42636a;
  background: #deefec;
  padding: 5px 9px;
  font-size: 11.5px;
}

.finance-contribution-entry-copy strong {
  font-size: 18px;
  font-weight: 850;
  line-height: 1.22;
}

.finance-contribution-entry-copy > span {
  color: #52647a;
  font-size: 13.5px;
  line-height: 1.48;
}

.finance-contribution-entry-action {
  grid-column: 2;
  color: #087f79;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.finance-contribution-body {
  display: grid;
  align-content: start;
  gap: 15px;
}

.finance-contribution-screen .finance-topbar h1 {
  font-size: 16px;
}

.finance-preview-badge {
  color: #087f79;
  background: #e2f4f1;
  padding: 6px 10px;
  font-size: 11.5px;
}

.finance-contribution-intro {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  border: 1px solid #d6e8e6;
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-hero-icon,
.finance-device-info-icon,
.finance-contribution-empty-icon {
  width: 48px;
  height: 48px;
  border: 1px solid #c8e8e3;
  border-radius: 16px;
}

.finance-contribution-intro p,
.finance-contribution-scope-note p,
.finance-contribution-empty-state p,
.finance-contribution-honesty-note {
  margin: 0;
  color: #52647a;
  font-size: 14px;
  line-height: 1.55;
}

.finance-contribution-purpose,
.finance-device-info,
.finance-contribution-empty-state,
.finance-contribution-future {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-purpose h2,
.finance-device-info h2,
.finance-contribution-empty-state h2,
.finance-contribution-future h2,
.finance-contribution-scope-note strong {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-contribution-purpose ul,
.finance-device-info ul,
.finance-contribution-future ul {
  display: grid;
  gap: 11px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.finance-contribution-purpose li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--navy-soft);
  font-size: 14px;
  line-height: 1.45;
}

.finance-contribution-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: #087f79;
  background: #e4f5f2;
  font-size: 13px;
  font-weight: 900;
}

.finance-contribution-scope-note {
  display: grid;
  gap: 7px;
  border-left: 3px solid var(--teal);
  border-radius: 0 15px 15px 0;
  background: #eef8f6;
  padding: 14px 15px;
}

.finance-contribution-primary {
  width: 100%;
  min-height: 48px;
}

.finance-contribution-primary:disabled {
  border-color: #d5dfe2;
  color: #83909f;
  background: #e8edef;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.finance-device-info {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.finance-device-info li,
.finance-contribution-future li {
  position: relative;
  color: var(--navy-soft);
  font-size: 14px;
  line-height: 1.5;
  padding-left: 17px;
}

.finance-device-info li::before,
.finance-contribution-future li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.finance-device-consent {
  display: grid;
  min-height: 74px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #cbdde0;
  border-radius: 16px;
  color: var(--navy-soft);
  background: #ffffff;
  padding: 15px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--shadow-soft);
}

.finance-device-consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--teal);
}

.finance-contribution-honesty-note {
  color: #68778a;
  font-size: 13px;
  text-align: center;
}

.finance-contribution-empty-state {
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 24px 17px;
  text-align: center;
}

.finance-contribution-empty-state h2 {
  font-size: 19px;
}

.finance-contribution-empty-state small {
  color: #6b7889;
  font-size: 12px;
  line-height: 1.45;
}

.finance-contribution-future {
  box-shadow: none;
}

.finance-contribution-future-badge {
  display: inline-flex;
  color: #536775;
  background: #e7efef;
  padding: 5px 9px;
  font-size: 11px;
}

.finance-contribution-future h2 {
  margin-top: 9px;
  font-size: 15px;
}

.finance-contribution-future li::before {
  background: #82919d;
}

.finance-contribution-backup-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #c9e4e1;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #edf8f6 100%);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-backup-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #bde7e1;
  border-radius: 15px;
  color: var(--teal);
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(19, 167, 160, 0.1);
}

.finance-contribution-backup-icon svg {
  width: 21px;
  height: 21px;
}

.finance-contribution-backup-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.finance-contribution-backup-copy h2 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-contribution-backup-copy p {
  margin: 0;
  color: #52647a;
  font-size: 13px;
  line-height: 1.5;
}

.finance-contribution-backup-actions,
.finance-contribution-backup-status,
.finance-contribution-backup-card > small,
.finance-contribution-csv-section {
  grid-column: 1 / -1;
}

.finance-contribution-backup-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.finance-contribution-backup-empty,
.finance-privacy-tool-empty {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 12px;
  color: #5c6d82;
  background: #f3f7f7;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.finance-contribution-backup-empty.is-error,
.finance-privacy-tool-empty.is-error {
  border: 1px solid rgba(199, 67, 60, 0.22);
  color: #9e3934;
  background: #fff7f6;
}

.finance-contribution-backup-action,
.finance-contribution-restore-action,
.finance-csv-export-action {
  width: 100%;
  min-height: 48px;
}

.finance-contribution-backup-action,
.finance-contribution-restore-action {
  min-width: 0;
  min-height: 52px;
  padding-right: 16px;
  padding-left: 16px;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}

.finance-contribution-backup-action:disabled,
.finance-contribution-restore-action:disabled,
.finance-csv-export-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.finance-contribution-backup-status,
.finance-contribution-csv-status {
  margin: 0;
  border-radius: 12px;
  color: var(--navy-soft);
  background: #f4f7f8;
  padding: 10px 11px;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.45;
}

.finance-contribution-backup-status.is-error,
.finance-contribution-csv-status.is-error {
  border: 1px solid rgba(199, 67, 60, 0.24);
  color: #9e3934;
  background: #fff7f6;
}

.finance-contribution-backup-status.is-success,
.finance-contribution-csv-status.is-success {
  border: 1px solid rgba(19, 167, 160, 0.24);
  color: #087f79;
  background: #effaf8;
}

.finance-contribution-backup-card > small {
  color: #68778a;
  font-size: 11.5px;
  line-height: 1.45;
}

.finance-contribution-backup-card > .finance-contribution-csv-section {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
  border-top: 1px solid rgba(11, 28, 67, 0.1);
  padding-top: 14px;
}

.finance-contribution-csv-copy {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
}

.finance-contribution-csv-copy h3 {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

.finance-contribution-csv-copy p,
.finance-contribution-csv-section > small {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #68778a;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
}

.finance-csv-export-action {
  width: 100%;
  justify-self: center;
  max-width: 260px;
}

.finance-data-privacy-body {
  display: grid;
  align-content: start;
  gap: 0;
}

.finance-privacy-section {
  display: grid;
  min-width: 0;
  gap: 9px;
  border-bottom: 1px solid rgba(11, 28, 67, 0.1);
  padding: 18px 0;
}

.finance-privacy-section:first-child {
  padding-top: 4px;
}

.finance-privacy-section h2 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-privacy-section > strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.finance-privacy-section p {
  min-width: 0;
  margin: 0;
  color: #5c6d82;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.finance-privacy-tool-list {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.finance-privacy-tool-list article {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.finance-privacy-tool-list article + article {
  border-top: 1px solid rgba(11, 28, 67, 0.08);
  padding-top: 12px;
}

.finance-privacy-tool-list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-privacy-tool-list article strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}

.finance-privacy-tool-list .btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: auto;
  padding: 11px 14px;
  line-height: 1.3;
  white-space: normal;
}

.finance-privacy-tool-status {
  border-radius: 12px;
  background: #f4f7f8;
  padding: 10px 11px;
  color: var(--navy-soft) !important;
  font-weight: 750;
}

.finance-privacy-tool-status.is-error {
  border: 1px solid rgba(199, 67, 60, 0.24);
  color: #9e3934 !important;
  background: #fff7f6;
}

.finance-privacy-tool-status.is-success {
  border: 1px solid rgba(19, 167, 160, 0.24);
  color: #087f79 !important;
  background: #effaf8;
}

.finance-privacy-security {
  border-bottom: 0;
}

.finance-data-management {
  margin-top: 10px;
  border: 1px solid #e4d5d3;
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.finance-privacy-eyebrow {
  color: #68778a;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.finance-data-management-summary {
  color: var(--navy-soft) !important;
  font-weight: 750;
}

.finance-data-management-empty,
.finance-data-management-status {
  border-radius: 12px;
  background: #f3f7f7;
  padding: 11px 12px;
}

.finance-data-management-status.is-error {
  border: 1px solid rgba(199, 67, 60, 0.22);
  color: #9e3934;
  background: #fff7f6;
}

.finance-data-delete-action {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(199, 67, 60, 0.52);
  border-radius: 14px;
  color: #ad3d37;
  background: #ffffff;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.finance-data-delete-action:active {
  background: #fff7f6;
}

.finance-bulk-delete-backdrop {
  align-items: end;
  padding: 0;
}

.finance-bulk-delete-sheet {
  display: grid;
  width: min(100%, 430px);
  max-height: calc(100dvh - max(18px, env(safe-area-inset-top)));
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, 0.99);
  padding-top: 9px;
  box-shadow: 0 -18px 52px rgba(8, 29, 58, 0.24);
  backdrop-filter: blur(22px);
}

.finance-bulk-delete-handle {
  width: 42px;
  height: 4px;
  justify-self: center;
  border-radius: 999px;
  background: #c6d2d7;
}

.finance-bulk-delete-scroll {
  display: grid;
  min-width: 0;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.finance-bulk-delete-scroll h2 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-bulk-delete-scroll p {
  min-width: 0;
  margin: 0;
  color: var(--navy-soft);
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.finance-bulk-delete-question {
  color: var(--navy) !important;
  font-size: 15px !important;
  font-weight: 850;
}

.finance-bulk-delete-counts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.finance-bulk-delete-counts > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  background: #f3f7f7;
  padding: 10px 12px;
}

.finance-bulk-delete-counts dt,
.finance-bulk-delete-counts dd {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.finance-bulk-delete-backup-action {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 11px 14px;
  line-height: 1.3;
  white-space: normal;
}

.finance-bulk-delete-note {
  color: #68778a !important;
  font-size: 12px !important;
}

.finance-bulk-delete-actions {
  position: sticky;
  bottom: calc(-16px - env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 2px -18px calc(-16px - env(safe-area-inset-bottom));
  border-top: 1px solid rgba(11, 28, 67, 0.08);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  backdrop-filter: blur(18px);
}

.finance-bulk-delete-actions .btn,
.finance-bulk-delete-continue-action,
.finance-bulk-delete-final-action {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: auto;
  padding: 10px 12px;
  line-height: 1.25;
  white-space: normal;
}

.finance-bulk-delete-continue-action {
  border: 1px solid #0b1c43;
  border-radius: 14px;
  color: #ffffff;
  background: #0b1c43;
  font-size: 13px;
  font-weight: 850;
}

.finance-bulk-delete-final-action {
  border: 1px solid #c7433c;
  border-radius: 14px;
  color: #ffffff;
  background: #c7433c;
  font-size: 13px;
  font-weight: 850;
}

.finance-bulk-delete-actions button:disabled,
.finance-bulk-delete-backup-action:disabled {
  cursor: wait;
  opacity: 0.58;
}

.finance-restore-backdrop {
  padding-top: calc(16px + env(safe-area-inset-top));
}

.finance-restore-dialog {
  position: relative;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.finance-restore-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--navy);
  background: #ffffff;
  font-size: 23px;
  line-height: 1;
}

.finance-restore-close:disabled {
  cursor: wait;
  opacity: 0.5;
}

.finance-restore-warning,
.finance-restore-security,
.finance-restore-recommendation,
.finance-restore-status {
  border-radius: 13px;
  padding: 11px 12px;
}

.finance-restore-warning {
  border: 1px solid #efc6a6;
  color: #75431f !important;
  background: #fff8f1;
}

.finance-restore-security {
  color: #087f79 !important;
  background: #eaf7f4;
}

.finance-restore-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.finance-restore-loading {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 15px;
  background: #f4f8f8;
  padding: 20px;
  text-align: center;
}

.finance-restore-loading > span {
  width: 30px;
  height: 30px;
  border: 3px solid #cfe8e4;
  border-top-color: var(--teal);
  border-radius: 999px;
  animation: finance-contribution-spin 0.9s linear infinite;
}

.finance-restore-loading strong {
  color: var(--navy);
  font-size: 14px;
}

.finance-restore-loading p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.finance-restore-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.finance-restore-summary > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  border-radius: 13px;
  background: #f3f8f8;
  padding: 10px 11px;
}

.finance-restore-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.finance-restore-summary dd {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.finance-restore-methods {
  display: grid;
  gap: 9px;
  margin: 2px 0 0;
  border: 0;
  padding: 0;
}

.finance-restore-methods legend {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
}

.finance-restore-methods label {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
}

.finance-restore-methods label:has(input:checked) {
  border-color: #7bcfc5;
  background: #effaf8;
  box-shadow: 0 0 0 2px rgba(19, 167, 160, 0.1);
}

.finance-restore-methods input,
.finance-restore-replace-consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--teal);
}

.finance-restore-methods span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.finance-restore-methods strong {
  color: var(--navy);
  font-size: 12.5px;
  line-height: 1.4;
}

.finance-restore-methods small {
  color: var(--navy-soft);
  font-size: 11.5px;
  line-height: 1.45;
}

.finance-restore-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.finance-restore-plan span {
  border-radius: 12px;
  color: var(--navy-soft);
  background: #f2f6f7;
  padding: 9px 10px;
  font-size: 11.5px;
  line-height: 1.4;
}

.finance-restore-plan strong {
  color: var(--navy);
}

.finance-restore-recommendation {
  margin: 0;
  color: #75431f !important;
  background: #fff8f1;
  font-size: 12px !important;
}

.finance-restore-status {
  margin: 0;
  color: var(--navy-soft) !important;
  background: #f4f7f8;
  font-size: 12.5px !important;
  font-weight: 750;
}

.finance-restore-status.is-error {
  border: 1px solid rgba(199, 67, 60, 0.24);
  color: #9e3934 !important;
  background: #fff7f6;
}

.finance-restore-replace-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #efc6a6;
  border-radius: 14px;
  color: #75431f;
  background: #fff8f1;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.finance-restore-dialog .finance-contribution-danger-action:disabled {
  border-color: #d5dfe2;
  color: #83909f;
  background: #e8edef;
  cursor: not-allowed;
}

.finance-contribution-loading,
.finance-contribution-load-error {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-loading > span {
  width: 30px;
  height: 30px;
  border: 3px solid #d7eeeb;
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: finance-contribution-spin 0.8s linear infinite;
}

.finance-contribution-loading strong,
.finance-contribution-load-error h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-contribution-loading p,
.finance-contribution-load-error p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.finance-contribution-load-error > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: #c7433c;
  background: #fff0ee;
}

.finance-contribution-load-error > span svg {
  width: 21px;
  height: 21px;
}

.finance-contribution-load-error .btn {
  min-width: 150px;
  margin-top: 6px;
}

.finance-contribution-inline-status {
  margin: 0;
  border-radius: 13px;
  padding: 11px 12px;
  color: var(--navy-soft);
  background: #f3f8f8;
  font-size: 13px;
  line-height: 1.45;
}

.finance-contribution-inline-status.is-error {
  border: 1px solid rgba(199, 67, 60, 0.24);
  color: #9e3934;
  background: #fff7f6;
}

.finance-contribution-total-card {
  display: grid;
  min-width: 0;
  gap: 7px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(145deg, #081d3a 0%, #102a50 100%);
  padding: 19px;
  box-shadow: 0 15px 32px rgba(8, 29, 58, 0.18);
}

.finance-contribution-total-card > span {
  color: #bcefe7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
}

.finance-contribution-total-card > strong {
  min-width: 0;
  color: #ffffff;
  font-size: clamp(25px, 7.2vw, 31px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-align: center;
}

.finance-contribution-total-card > strong.is-negative {
  color: #ff938b;
}

.finance-contribution-total-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 13px;
}

.finance-contribution-total-breakdown > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding-right: 10px;
}

.finance-contribution-total-breakdown > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-right: 0;
  padding-left: 12px;
}

.finance-contribution-total-breakdown span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
}

.finance-contribution-total-breakdown strong {
  min-width: 0;
  color: #8ee4d8;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.finance-contribution-total-breakdown > div + div strong {
  color: #ff938b;
}

.finance-monthly-target-card {
  display: grid;
  min-width: 0;
  gap: 11px;
  border: 1px solid #cce9e5;
  border-radius: 18px;
  background: #ffffff;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.finance-monthly-target-head,
.finance-monthly-target-meta {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-monthly-target-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-monthly-target-head span,
.finance-monthly-target-meta span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
}

.finance-monthly-target-head strong,
.finance-monthly-target-meta strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}

.finance-monthly-target-head > div strong {
  color: #087f79;
  text-align: left;
}

.finance-monthly-target-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5efef;
}

.finance-monthly-target-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.finance-contribution-list-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-contribution-list-head > div {
  min-width: 0;
}

.finance-contribution-list-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.3;
}

.finance-contribution-list-head > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.finance-contribution-add-actions,
.finance-contribution-empty-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.finance-contribution-add-action {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #bfe3de;
  border-radius: 13px;
  color: #087f79;
  background: #f2fbf9;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 850;
}

.finance-contribution-add-action svg {
  width: 17px;
  height: 17px;
}

.finance-contribution-add-action.is-withdrawal {
  border-color: #f1c2be;
  color: #b9433d;
  background: #fff7f6;
}

.finance-contribution-list {
  display: grid;
  gap: 11px;
}

.finance-contribution-record {
  display: grid;
  min-width: 0;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #ffffff;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-record-head {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.finance-contribution-record-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.finance-transaction-type {
  width: fit-content;
  border-radius: 999px;
  color: #087f79;
  background: #e7f6f3;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.finance-contribution-record.is-withdrawal .finance-transaction-type {
  color: #b9433d;
  background: #fff0ee;
}

.finance-contribution-record-head strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.finance-contribution-record-head time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.finance-contribution-record-head > span {
  min-width: 0;
  color: #087f79;
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: right;
}

.finance-contribution-record.is-withdrawal .finance-contribution-record-head > span {
  color: #c7433c;
}

.finance-contribution-record > p {
  margin: 0;
  border-radius: 12px;
  color: var(--navy-soft);
  background: #f5f9f9;
  padding: 10px 11px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.finance-contribution-record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.finance-contribution-record-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  color: #087f79;
  background: #eef8f6;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
}

.finance-contribution-record-actions button.is-danger {
  color: #b53d37;
  background: #fff0ee;
}

.finance-contribution-form-intro {
  margin: 0 1px -2px;
  color: #52647a;
  font-size: 14px;
  line-height: 1.5;
}

.finance-contribution-form-screen .finance-contribution-body {
  gap: 10px;
}

.finance-contribution-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.finance-contribution-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.finance-contribution-field > span:first-child,
.finance-contribution-field-label-row {
  color: var(--navy-soft);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}

.finance-contribution-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-contribution-field-label-row small,
.finance-contribution-field-help {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.finance-contribution-field-label-row output {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
}

.finance-contribution-field select,
.finance-contribution-field > input,
.finance-contribution-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  outline: 0;
  color: var(--navy);
  background: var(--surface-soft);
  padding: 0 13px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.finance-contribution-field select,
.finance-contribution-field > input {
  height: 52px;
}

.finance-contribution-field textarea {
  min-height: 82px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.finance-contribution-field select:focus,
.finance-contribution-field input:focus,
.finance-contribution-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(19, 167, 160, 0.18);
}

.finance-contribution-field select:focus-visible,
.finance-contribution-field input:focus-visible,
.finance-contribution-field textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.finance-contribution-field > input[type="date"] {
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 12px;
  text-align: left;
  text-align-last: left;
}

.finance-contribution-field > input[type="date"]::-webkit-date-and-time-value {
  min-height: 1.35em;
  margin: 0;
  text-align: left;
}

.finance-contribution-field > input[type="date"]::-webkit-calendar-picker-indicator {
  width: 21px;
  height: 21px;
  margin: 0 0 0 8px;
  padding: 3px;
}

.finance-contribution-field select[aria-invalid="true"],
.finance-contribution-field > input[aria-invalid="true"],
.finance-contribution-field textarea[aria-invalid="true"] {
  border-color: #f0645a;
  background: #fffafa;
}

.finance-contribution-form-error {
  margin: 0;
  border-radius: 12px;
  background: #fff2f0;
  padding: 10px 11px;
}

.finance-contribution-dialog-backdrop {
  position: fixed;
  z-index: 100100;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: end center;
  background: rgba(8, 29, 58, 0.42);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  backdrop-filter: blur(3px);
}

.finance-contribution-dialog {
  display: grid;
  width: min(100%, 410px);
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 22px 55px rgba(8, 29, 58, 0.26);
}

.finance-contribution-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--teal);
  background: var(--mint-soft);
}

.finance-contribution-dialog-icon.is-danger {
  color: #c7433c;
  background: #fff0ee;
}

.finance-contribution-dialog-icon svg {
  width: 19px;
  height: 19px;
}

.finance-contribution-dialog h2 {
  margin: 1px 0 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-contribution-dialog > p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.finance-contribution-dialog-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  border-radius: 13px;
  background: #f3f8f8;
  padding: 11px 12px;
}

.finance-contribution-dialog-record strong,
.finance-contribution-dialog-record span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-contribution-dialog-record span {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.finance-contribution-dialog-record small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11.5px;
}

.finance-contribution-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 4px;
}

.finance-contribution-dialog-actions .btn {
  min-width: 0;
  min-height: 46px;
  padding: 0 10px;
}

.finance-contribution-danger-action {
  min-height: 46px;
  border: 1px solid #ef9a94;
  border-radius: 13px;
  color: #ffffff;
  background: #c7433c;
  font-size: 13px;
  font-weight: 850;
}

@keyframes finance-contribution-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-contribution-loading > span {
    animation: none;
  }
}

@media (max-width: 430px) {
  .finance-contribution-backup-card > .finance-contribution-backup-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .finance-contribution-backup-actions > .finance-contribution-backup-action,
  .finance-contribution-backup-actions > .finance-contribution-restore-action {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 52px;
    flex: 0 0 auto;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .finance-restore-summary,
  .finance-restore-plan {
    grid-template-columns: 1fr;
  }

  .finance-restore-dialog {
    padding-right: 15px;
    padding-left: 15px;
  }

  .finance-csv-export-action {
    justify-self: stretch;
    max-width: none;
  }

  .finance-contribution-record-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .finance-contribution-record-head > span {
    font-size: 16px;
    overflow-wrap: normal;
    text-align: left;
  }

  .finance-contribution-record-actions button {
    flex: 1 1 0;
  }

  .finance-contribution-dialog-actions {
    grid-template-columns: 1fr;
  }

  .finance-contribution-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-contribution-add-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-contribution-add-action {
    min-width: 0;
    padding: 0 8px;
    font-size: 11.5px;
  }
}

.finance-coming-section {
  margin-top: 24px;
}

.finance-coming-section > h2 {
  margin: 0 0 11px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-next-card {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 104px;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 14px 13px 14px 14px;
  color: var(--navy);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.finance-coming-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #d5ebe8;
  border-radius: 14px;
  background: var(--mint-soft);
}

.finance-coming-icon svg {
  width: 19px;
  height: 19px;
}

.finance-next-card-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-next-card-copy small {
  width: fit-content;
  border-radius: 999px;
  background: #e8f2f1;
  padding: 5px 9px;
  color: #4f6670;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.finance-next-card.is-payments-preview .finance-next-card-copy small {
  background: #e2f4f1;
  color: #087f79;
}

.finance-next-card-copy strong {
  color: var(--navy);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

.finance-next-card-copy > span {
  color: #607085;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.finance-next-card-chevron {
  color: #7e909c;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}

.finance-data-privacy-entry {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  border: 1px solid #d8e5e6;
  border-radius: 15px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.78);
  padding: 11px 13px;
  text-align: left;
  box-shadow: 0 3px 12px rgba(8, 29, 58, 0.03);
  -webkit-tap-highlight-color: transparent;
}

.finance-data-privacy-entry:focus:not(:focus-visible) {
  outline: none;
}

.finance-data-privacy-entry:focus-visible {
  outline: 2px solid rgba(19, 167, 160, 0.72);
  outline-offset: 2px;
}

.finance-data-privacy-entry-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--teal-dark);
  background: #eaf6f4;
}

.finance-data-privacy-entry-icon svg {
  width: 18px;
  height: 18px;
}

.finance-data-privacy-entry-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.finance-data-privacy-entry-copy strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.finance-data-privacy-entry-copy > span {
  color: #66768a;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.finance-data-privacy-entry-chevron {
  flex: 0 0 auto;
  color: #7e909c;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.finance-coming-sheet {
  top: auto;
  right: 12px;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 12px;
  align-content: start;
  gap: 0;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 84px - env(safe-area-inset-top));
  border-radius: 26px;
  padding: 9px 14px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
  .finance-coming-overlay {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 34px;
    transform: none;
  }

  .finance-coming-sheet {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100% - 24px);
    transform: translateY(calc(100% + 28px));
  }

  .finance-coming-sheet.is-visible {
    transform: translateY(0);
  }

  .finance-contribution-dialog-backdrop {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(390px, calc(100vw - 36px));
    height: min(844px, calc(100dvh - 36px));
    min-height: 0;
    border-radius: 34px;
    transform: translate(-50%, -50%);
  }
}

.finance-coming-panel-head {
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 15px;
}

.finance-coming-panel-head > div {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 8px;
}

.finance-coming-panel-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.finance-coming-panel-badge {
  width: fit-content;
  border: 1px solid #cfe8e4;
  border-radius: 999px;
  background: var(--mint-soft);
  padding: 6px 9px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.finance-coming-panel-content {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding-bottom: 2px;
}

.finance-coming-panel-description {
  margin: 0;
  color: var(--navy-soft);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.55;
}

.finance-coming-panel-scope {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
}

.finance-coming-panel-scope h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-coming-panel-scope ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finance-coming-panel-scope li {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.45;
}

.finance-coming-panel-check {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: var(--teal);
  background: var(--mint-soft);
  font-size: 13px;
  font-weight: 900;
}

.finance-coming-panel-status {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  border: 1px solid #d5ebe8;
  border-radius: 15px;
  background: #f3fbfa;
  padding: 13px;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.finance-coming-panel-status > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--teal);
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
}

.finance-coming-close-action {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  color: var(--navy);
  background: #ffffff;
}

@media (max-width: 390px) {
  .finance-coming-sheet {
    right: 10px;
    left: 10px;
    padding-right: 13px;
    padding-left: 13px;
  }

  .finance-coming-panel-head h2 {
    font-size: 19px;
  }

  .finance-coming-panel-description {
    font-size: 13.5px;
  }
}

.finance-bottom-space {
  height: calc(28px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.finance-hub-screen .finance-bottom-space {
  height: calc(112px + env(safe-area-inset-bottom));
}

.finance-form-body,
.finance-result-body {
  display: grid;
  gap: 14px;
}

.finance-preview-note,
.finance-example-note {
  display: grid;
  border: 1px solid #cce9e5;
  border-radius: 16px;
  background: var(--mint-soft);
  color: var(--navy);
  padding: 13px;
}

.finance-preview-note {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.finance-preview-note > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: var(--teal);
  background: #ffffff;
}

.finance-preview-note svg {
  width: 16px;
  height: 16px;
}

.finance-preview-note strong,
.finance-example-note strong {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 850;
}

.finance-preview-note p,
.finance-example-note p {
  margin-top: 3px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.finance-form {
  display: grid;
  gap: 18px;
}

.finance-form-section {
  display: grid;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.finance-form-section > h2 {
  margin: 0;
  font-size: 16px;
}

.finance-field-list,
.finance-expense-total,
.finance-expense-detail {
  display: grid;
  gap: 12px;
}

.finance-expense-total[hidden],
.finance-expense-detail[hidden] {
  display: none;
}

.finance-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.finance-field > span:first-child {
  color: var(--navy-soft);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}

.finance-field-helper {
  margin-top: -3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.finance-input-shell {
  position: relative;
  display: block;
  min-width: 0;
}

.finance-input-shell input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  outline: 0;
  background: var(--surface-soft);
  padding: 0 54px 0 13px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 750;
  line-height: 1;
}

.finance-input-shell input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 167, 160, 0.12);
}

.finance-contribution-field .finance-input-shell input:focus {
  box-shadow: 0 0 0 2px rgba(19, 167, 160, 0.18);
}

.finance-input-shell input[aria-invalid="true"] {
  border-color: #f0645a;
  background: #fffafa;
}

.finance-input-shell input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(240, 100, 90, 0.13);
}

.finance-input-suffix {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-50%);
}

.finance-form-toggle,
.finance-example-link {
  width: fit-content;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  color: var(--teal);
  font-size: 14px;
  font-weight: 850;
  text-align: left;
}

.finance-data-note,
.finance-safe-note {
  margin: 0;
  border: 1px solid #d5e8e5;
  border-radius: 15px;
  background: #f4fbfa;
  padding: 12px 13px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.finance-inline-error {
  margin: -2px 0 0;
  color: #c7433c;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.finance-inline-error[hidden] {
  display: none;
}

.finance-form-actions,
.finance-result-actions {
  display: grid;
  gap: 9px;
}

.finance-disabled-action {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dce5e8;
  border-radius: 14px;
  color: #8995a4;
  background: #edf1f2;
  font-size: 14px;
  font-weight: 850;
  cursor: not-allowed;
  opacity: 1;
}

.finance-example-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.finance-calculate-action {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0fa79e 0%, #2bbca9 100%);
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(19, 167, 160, 0.2);
}

.finance-example-note {
  gap: 4px;
}

.finance-main-result {
  display: grid;
  gap: 8px;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 12%, rgba(45, 188, 169, 0.28), transparent 34%),
    linear-gradient(145deg, #081d3a 0%, #102a50 100%);
  padding: 20px;
  box-shadow: 0 16px 32px rgba(8, 29, 58, 0.18);
}

.finance-main-result > span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.finance-main-result strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.finance-main-result p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

.finance-main-result.is-negative {
  background:
    radial-gradient(circle at 86% 12%, rgba(240, 100, 90, 0.26), transparent 34%),
    linear-gradient(145deg, #231b2d 0%, #4b2630 100%);
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.finance-summary-grid article {
  display: grid;
  min-width: 0;
  min-height: 104px;
  align-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #ffffff;
  padding: 13px;
  box-shadow: var(--shadow-soft);
}

.finance-summary-grid span {
  color: #617187;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.4;
}

.finance-summary-grid strong {
  min-width: 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.finance-summary-grid article.is-negative strong {
  color: #c7433c;
}

.finance-ratio-card,
.finance-expense-groups {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.finance-ratio-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-ratio-card h2,
.finance-expense-groups h2 {
  margin: 0;
  font-size: 15px;
}

.finance-ratio-card strong {
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
}

.finance-ratio-card.is-over-income {
  border-color: rgba(199, 67, 60, 0.34);
  box-shadow: 0 12px 28px rgba(199, 67, 60, 0.09);
}

.finance-ratio-card.is-over-income > div:first-child strong {
  color: #c7433c;
}

.finance-ratio-track {
  height: 16px;
  overflow: hidden;
  margin-top: 16px;
  border-radius: 999px;
  background: #e7eef0;
  box-shadow: inset 0 0 0 1px rgba(15, 35, 70, 0.04);
}

.finance-ratio-fill {
  display: flex;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.finance-ratio-fill.is-neutral {
  background: linear-gradient(90deg, #13a7a0, #2bbca9);
}

.finance-ratio-neutral {
  width: 100%;
  height: 100%;
}

.finance-ratio-segment {
  flex: 0 0 auto;
  height: 100%;
  background: var(--finance-expense-color);
}

.finance-ratio-segment + .finance-ratio-segment {
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.76);
}

.finance-ratio-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 13px;
}

.finance-ratio-key {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--navy-soft);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.3;
}

.finance-ratio-key i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--finance-expense-color);
}

.finance-expense-groups > p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.finance-expense-groups > .finance-expense-empty {
  margin-top: 10px;
  border-radius: 13px;
  background: #f4f8f8;
  padding: 12px;
  color: var(--navy-soft);
  font-size: 13px;
}

.finance-expense-groups ol {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.finance-expense-groups li {
  --finance-expense-color: #14a894;
  --finance-expense-tint: #e6f7f4;
  display: grid;
  position: relative;
  grid-template-columns: 4px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 11px 0;
}

.finance-expense-accent {
  width: 4px;
  height: 30px;
  border-radius: 999px;
  background: var(--finance-expense-color);
}

.finance-expense-rank {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: var(--finance-expense-color);
  background: var(--finance-expense-tint);
  font-size: 11px;
  font-weight: 900;
}

.finance-expense-label {
  min-width: 0;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.4;
}

.finance-expense-groups li strong {
  min-width: 0;
  color: var(--navy);
  font-size: 13px;
  overflow-wrap: anywhere;
  text-align: right;
}

.finance-expense-groups li.finance-expense-category-housing,
.finance-ratio-segment.finance-expense-category-housing,
.finance-ratio-key.finance-expense-category-housing,
.finance-report-groups li.finance-expense-category-housing,
.finance-report-ratio-segment.finance-expense-category-housing {
  --finance-expense-color: #e5a500;
  --finance-expense-tint: #fff5d6;
}

.finance-expense-groups li.finance-expense-category-bills,
.finance-ratio-segment.finance-expense-category-bills,
.finance-ratio-key.finance-expense-category-bills,
.finance-report-groups li.finance-expense-category-bills,
.finance-report-ratio-segment.finance-expense-category-bills {
  --finance-expense-color: #8b5cf6;
  --finance-expense-tint: #f1ebff;
}

.finance-expense-groups li.finance-expense-category-living,
.finance-ratio-segment.finance-expense-category-living,
.finance-ratio-key.finance-expense-category-living,
.finance-report-groups li.finance-expense-category-living,
.finance-report-ratio-segment.finance-expense-category-living {
  --finance-expense-color: #3b82f6;
  --finance-expense-tint: #e8f1ff;
}

.finance-expense-groups li.finance-expense-category-transport,
.finance-ratio-segment.finance-expense-category-transport,
.finance-ratio-key.finance-expense-category-transport,
.finance-report-groups li.finance-expense-category-transport,
.finance-report-ratio-segment.finance-expense-category-transport {
  --finance-expense-color: #0e9fbe;
  --finance-expense-tint: #e3f7fb;
}

.finance-expense-groups li.finance-expense-category-debt,
.finance-ratio-segment.finance-expense-category-debt,
.finance-ratio-key.finance-expense-category-debt,
.finance-report-groups li.finance-expense-category-debt,
.finance-report-ratio-segment.finance-expense-category-debt {
  --finance-expense-color: #f0645a;
  --finance-expense-tint: #ffebe8;
}

.finance-expense-groups li.finance-expense-category-personal,
.finance-ratio-segment.finance-expense-category-personal,
.finance-ratio-key.finance-expense-category-personal,
.finance-report-groups li.finance-expense-category-personal,
.finance-report-ratio-segment.finance-expense-category-personal {
  --finance-expense-color: #14a894;
  --finance-expense-tint: #e6f7f4;
}

.finance-result-actions .btn {
  width: 100%;
}

.finance-target-source-action {
  display: grid;
  min-width: 0;
  gap: 12px;
  border: 1px solid #cce9e5;
  border-radius: 17px;
  background: #f4fbfa;
  padding: 14px;
}

.finance-target-source-action > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.finance-target-source-action strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.finance-target-source-action span {
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.48;
}

.finance-target-source-action button {
  min-height: 46px;
  border: 1px solid #a9dcd6;
  border-radius: 13px;
  color: #087f79;
  background: #ffffff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
}

.finance-target-source-action button:disabled {
  border-color: #d7e1e3;
  color: #88959f;
  background: #eef2f3;
  cursor: not-allowed;
}

.finance-report-create-action {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #b9ddd8;
  border-radius: 14px;
  color: #087f79;
  background: #f4fbfa;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 850;
}

.finance-report-create-action svg,
.finance-print-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.finance-report-preview {
  display: grid;
  gap: 22px;
  min-height: 100%;
  background: #f3f6f8;
  padding: 16px 16px 0;
}

.finance-report-screen .finance-topbar h1 {
  font-size: 16px;
  font-weight: 800;
}

.finance-report-sheet {
  display: grid;
  min-width: 0;
  gap: 16px;
  border: 1px solid #d6e4e7;
  border-radius: 22px;
  background: #ffffff;
  padding: clamp(16px, 4.5vw, 20px);
  box-shadow: 0 12px 30px rgba(8, 29, 58, 0.07);
}

.finance-report-header {
  position: relative;
  display: grid;
  gap: 8px;
  padding-bottom: 15px;
}

.finance-report-header::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.finance-report-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.finance-report-brand-symbol {
  width: 36px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
}

.finance-report-brand > span {
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.finance-report-heading p,
.finance-report-heading h2,
.finance-report-period span,
.finance-report-period strong,
.finance-report-main-value span,
.finance-report-main-value strong,
.finance-report-main-value p,
.finance-report-summary span,
.finance-report-summary strong,
.finance-report-ratio h3,
.finance-report-ratio strong,
.finance-report-groups h3,
.finance-report-note p,
.finance-report-footer span,
.finance-report-footer strong,
.finance-report-section-label,
.finance-report-actions p {
  margin: 0;
}

.finance-report-heading {
  display: grid;
  gap: 0;
}

.finance-report-heading h2 {
  color: var(--navy);
  font-size: clamp(24px, 6.4vw, 27px);
  font-weight: 800;
  line-height: 1.12;
  white-space: nowrap;
}

.finance-report-period {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  border: 1px solid #d7ebe8;
  border-radius: 999px;
  background: #f2f8f7;
  padding: 5px 8px;
}

.finance-report-period span,
.finance-report-footer span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.finance-report-period strong,
.finance-report-footer strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.finance-report-main-value {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(19, 167, 160, 0.26);
  border-radius: 14px;
  color: #ffffff;
  background: #0b2748;
  padding: 13px 15px 14px;
  box-shadow: inset 0 2px 0 rgba(19, 167, 160, 0.9);
}

.finance-report-main-value > span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.finance-report-main-value > strong {
  min-width: 0;
  color: #ffffff;
  font-size: clamp(24px, 9.2vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  white-space: nowrap;
}

.finance-report-main-value > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.45;
}

.finance-report-main-value.is-negative {
  border-color: rgba(240, 100, 90, 0.62);
  background: #0b2748;
  box-shadow: inset 0 2px 0 rgba(240, 100, 90, 0.88);
}

.finance-report-main-value.is-negative > strong {
  color: #ff9189;
}

.finance-report-summary-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e8eb;
  border-radius: 14px;
  background: #f7fafb;
}

.finance-report-section-label {
  color: #637287;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.finance-report-summary-panel > .finance-report-section-label {
  padding: 10px 12px 9px;
}

.finance-report-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #e0e8eb;
  background: #e0e8eb;
}

.finance-report-summary article {
  display: grid;
  min-width: 0;
  min-height: 74px;
  align-content: space-between;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: #fbfdfd;
  padding: 11px 12px;
}

.finance-report-summary span {
  color: #617187;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.finance-report-summary strong {
  min-width: 0;
  color: var(--navy);
  font-size: clamp(14px, 4.7vw, 19px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}

.finance-report-summary article.is-negative strong {
  color: #c7433c;
}

.finance-report-ratio,
.finance-report-groups {
  border: 1px solid #dfe9ed;
  border-radius: 14px;
  background: #fcfefe;
  padding: 13px;
}

.finance-report-ratio > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.finance-report-ratio h3,
.finance-report-groups h3 {
  color: #637287;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.finance-report-ratio strong {
  color: var(--teal);
  font-size: clamp(26px, 7.5vw, 32px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.finance-report-ratio.is-over-income {
  border-color: rgba(199, 67, 60, 0.34);
}

.finance-report-ratio.is-over-income strong {
  color: #c7433c;
}

.finance-report-ratio-track {
  height: 8px;
  overflow: hidden;
  margin-top: 13px;
  border-radius: 999px;
  background: #e7eef0;
}

.finance-report-ratio-fill {
  display: flex;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.finance-report-ratio-fill.is-neutral {
  background: var(--teal);
}

.finance-report-ratio-fill.is-at-capacity {
  background: #f0645a;
}

.finance-report-ratio-neutral,
.finance-report-ratio-overflow {
  width: 100%;
  height: 100%;
}

.finance-report-ratio-segment {
  flex: 0 0 auto;
  height: 100%;
  background: var(--finance-expense-color);
}

.finance-report-ratio-segment + .finance-report-ratio-segment {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.8);
}

.finance-report-groups ol {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.finance-report-groups li {
  --finance-expense-color: #14a894;
  --finance-expense-tint: #e6f7f4;
  display: grid;
  min-width: 0;
  grid-template-columns: 4px 25px minmax(0, 1fr) minmax(88px, auto);
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 9px 0;
}

.finance-report-group-accent {
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: var(--finance-expense-color);
}

.finance-report-group-rank {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  color: var(--finance-expense-color);
  background: var(--finance-expense-tint);
  font-size: 10.5px;
  font-weight: 900;
}

.finance-report-group-label {
  min-width: 0;
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.finance-report-groups li > strong {
  min-width: 0;
  color: var(--navy);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.finance-report-note {
  display: grid;
  gap: 6px;
  border-left: 3px solid rgba(19, 167, 160, 0.72);
  border-radius: 0 10px 10px 0;
  background: #f6fbfa;
  padding: 12px 13px;
}

.finance-report-note p {
  color: var(--navy-soft);
  font-size: 12.5px;
  line-height: 1.52;
}

.finance-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 11px;
}

.finance-report-actions {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.finance-print-action {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0fa79e 0%, #2bbca9 100%);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(19, 167, 160, 0.2);
}

.finance-report-return-action {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9d9d6;
  border-radius: 14px;
  color: #087f79;
  background: #ffffff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 850;
}

.finance-report-actions p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 430px) {
  .app-shell.finance-view-active .content {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .finance-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html.finance-report-view,
  html.finance-report-view body {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  html.finance-report-view body {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.finance-report-view body > *:not(.app-shell) {
    display: none !important;
  }

  html.finance-report-view body::before,
  html.finance-report-view .bottom-nav,
  html.finance-report-view .app-shell > .topbar,
  html.finance-report-view .finance-report-screen > .finance-topbar,
  html.finance-report-view .finance-report-actions,
  html.finance-report-view .finance-report-screen .finance-bottom-space {
    display: none !important;
  }

  html.finance-report-view .app-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html.finance-report-view .app-shell .content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html.finance-report-view #app > *:not(.finance-report-screen) {
    display: none !important;
  }

  html.finance-report-view .finance-report-screen,
  html.finance-report-view .finance-report-preview {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html.finance-report-view .finance-report-sheet {
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    gap: 2.2mm !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 8mm 10mm !important;
    box-shadow: none !important;
    color: #081d3a !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html.finance-report-view .finance-report-header {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.2mm !important;
    border-bottom: 0 !important;
    padding-bottom: 2.8mm !important;
  }

  html.finance-report-view .finance-report-header::after {
    width: 8mm !important;
    height: 0.45mm !important;
  }

  html.finance-report-view .finance-report-brand-symbol {
    width: 7mm !important;
    height: 8mm !important;
  }

  html.finance-report-view .finance-report-brand > span {
    font-size: 9.5pt !important;
    font-weight: 800 !important;
  }

  html.finance-report-view .finance-report-heading h2 {
    font-size: 16pt !important;
  }

  html.finance-report-view .finance-report-period span,
  html.finance-report-view .finance-report-footer span,
  html.finance-report-view .finance-report-section-label {
    font-size: 7.5pt !important;
  }

  html.finance-report-view .finance-report-period strong,
  html.finance-report-view .finance-report-footer strong {
    font-size: 8.5pt !important;
  }

  html.finance-report-view .finance-report-period {
    width: max-content !important;
    gap: 1mm !important;
    padding: 1mm 2mm !important;
  }

  html.finance-report-view .finance-report-main-value {
    gap: 1mm !important;
    padding: 3mm 4mm !important;
    box-shadow: none !important;
  }

  html.finance-report-view .finance-report-main-value > span {
    font-size: 8pt !important;
  }

  html.finance-report-view .finance-report-main-value > strong {
    margin-top: 0.5mm !important;
    font-size: 20pt !important;
    white-space: nowrap !important;
  }

  html.finance-report-view .finance-report-main-value > p {
    margin-top: 0.5mm !important;
    font-size: 8pt !important;
    line-height: 1.3 !important;
  }

  html.finance-report-view .finance-report-summary {
    gap: 0.2mm !important;
  }

  html.finance-report-view .finance-report-summary-panel {
    border-color: #d8e3e8 !important;
    box-shadow: none !important;
  }

  html.finance-report-view .finance-report-summary-panel > .finance-report-section-label {
    padding: 1.7mm 2.5mm 1.4mm !important;
  }

  html.finance-report-view .finance-report-ratio,
  html.finance-report-view .finance-report-groups {
    padding: 2.5mm !important;
  }

  html.finance-report-view .finance-report-summary article {
    min-height: 15mm !important;
    gap: 1.5mm !important;
    padding: 2.2mm 2.5mm !important;
  }

  html.finance-report-view .finance-report-summary span,
  html.finance-report-view .finance-report-group-label,
  html.finance-report-view .finance-report-groups li > strong {
    font-size: 7.6pt !important;
  }

  html.finance-report-view .finance-report-summary strong {
    font-size: 10.5pt !important;
    white-space: nowrap !important;
  }

  html.finance-report-view .finance-report-ratio h3,
  html.finance-report-view .finance-report-groups h3 {
    font-size: 8.5pt !important;
  }

  html.finance-report-view .finance-report-ratio strong {
    font-size: 15pt !important;
  }

  html.finance-report-view .finance-report-ratio-track {
    height: 2mm !important;
    margin-top: 2mm !important;
  }

  html.finance-report-view .finance-report-groups ol {
    margin-top: 1.2mm !important;
  }

  html.finance-report-view .finance-report-groups li {
    grid-template-columns: 1mm 6mm minmax(0, 1fr) minmax(27mm, auto) !important;
    gap: 1.5mm !important;
    padding: 1.8mm 0 !important;
  }

  html.finance-report-view .finance-report-group-accent {
    height: 7mm !important;
  }

  html.finance-report-view .finance-report-group-rank {
    width: 6mm !important;
    height: 6mm !important;
    font-size: 7pt !important;
  }

  html.finance-report-view .finance-report-groups li > strong {
    white-space: nowrap !important;
  }

  html.finance-report-view .finance-report-note {
    gap: 0.8mm !important;
    padding: 2.2mm 2.8mm !important;
  }

  html.finance-report-view .finance-report-note p {
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
  }

  html.finance-report-view .finance-report-footer {
    gap: 3mm !important;
    padding-top: 2mm !important;
  }

  html.finance-report-view .finance-report-main-value,
  html.finance-report-view .finance-report-summary-panel,
  html.finance-report-view .finance-report-summary,
  html.finance-report-view .finance-report-summary article,
  html.finance-report-view .finance-report-ratio,
  html.finance-report-view .finance-report-groups,
  html.finance-report-view .finance-report-groups li,
  html.finance-report-view .finance-report-note,
  html.finance-report-view .finance-report-footer {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
}