/* 아파트 장기 계획 앱의 화면 스타일 */
/* 관리자 마스터 데이터 편집 화면 */
.user-admin-layout > .master-admin-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard-section-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-section-nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.dashboard-section-nav button:hover,
.dashboard-section-nav button:focus-visible,
.dashboard-section-nav button.is-active {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.dashboard-section-nav button > svg {
  width: 21px;
  height: 21px;
  color: var(--mint-text);
}

.dashboard-section-nav button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-section-nav button strong {
  font-size: 15px;
}

.dashboard-section-nav button small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.35;
}

[data-dashboard-workspace-panel] {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .dashboard-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .dashboard-section-nav button {
    min-height: 64px;
    padding: 10px;
  }

  .dashboard-section-nav button small {
    display: none;
  }
}

/* v3.10 입주 구매 견적과 예산 통제 */
.prep-quote-history,
.prep-payment-editor {
  min-width: 0;
}

.prep-quote-history > small,
.prep-payment-editor > small {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.prep-quote-rows,
.prep-payment-fields {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.prep-quote-row,
.prep-payment-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.8fr) minmax(140px, 0.9fr) minmax(160px, 1fr) minmax(180px, 1.2fr) 40px;
  align-items: end;
  min-width: 0;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-payment-row {
  grid-template-columns: minmax(140px, 1fr) minmax(132px, 0.8fr) minmax(140px, 0.9fr) minmax(112px, 0.7fr) 40px;
}

.prep-quote-row .icon-button,
.prep-payment-row .icon-button {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
}

.prep-model-quotes {
  grid-area: quotes;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.prep-model-quotes > summary {
  min-height: 40px;
  padding: 10px 0 0;
  color: var(--mint-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.prep-model-quotes > div {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.prep-model-quotes p {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  font-size: 12px;
}

.prep-model-quotes p span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
}

.prep-compare-row {
  grid-template-areas:
    "model model model"
    "price vendor status"
    "quotes quotes quotes"
    "actions actions actions";
}

.prep-budget-control {
  display: grid;
  min-width: 0;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.prep-budget-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.prep-budget-control-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.prep-budget-control-head span,
.prep-budget-control h4 {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
}

.prep-budget-control-head strong {
  font-size: 24px;
}

.prep-budget-control-head small {
  color: var(--ink-soft);
  line-height: 1.45;
}

.prep-budget-warnings {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prep-budget-warnings li {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
}

.prep-budget-warnings span {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.prep-budget-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.prep-budget-control-grid > section {
  min-width: 0;
}

.prep-budget-control h4 {
  margin: 0 0 8px;
}

.prep-budget-category-list,
.prep-budget-month-list {
  display: grid;
  border-block: 1px solid var(--line);
}

.prep-budget-category,
.prep-budget-month {
  display: grid;
  grid-template-columns: minmax(74px, 0.7fr) minmax(120px, 1fr) minmax(82px, auto);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.prep-budget-category:first-child,
.prep-budget-month:first-child {
  border-top: 0;
}

.prep-budget-category span,
.prep-budget-month span {
  text-align: right;
}

.prep-budget-category em,
.prep-budget-month em {
  color: var(--ink-soft);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.prep-budget-category em.is-over {
  color: var(--danger);
}

.prep-budget-category em.is-safe {
  color: var(--mint-text);
}

@media (max-width: 980px) {
  .prep-quote-row,
  .prep-payment-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prep-quote-row .icon-button,
  .prep-payment-row .icon-button {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .prep-quote-row,
  .prep-payment-row,
  .prep-budget-control-grid,
  .prep-model-quotes p {
    grid-template-columns: minmax(0, 1fr);
  }

  .prep-quote-row .icon-button,
  .prep-payment-row .icon-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .prep-compare-row {
    grid-template-areas:
      "model"
      "price"
      "vendor"
      "status"
      "quotes"
      "actions";
  }

  .prep-budget-control-head {
    align-items: stretch;
    flex-direction: column;
  }

  .prep-budget-warnings li {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .prep-budget-category,
  .prep-budget-month {
    grid-template-columns: minmax(64px, 0.7fr) minmax(96px, 1fr) minmax(72px, auto);
  }
}

.master-active-summary,
.master-impact-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.master-active-summary > div,
.master-impact-summary > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.master-active-summary > div:last-child,
.master-impact-summary > div:last-of-type {
  border-right: 0;
}

.master-active-summary span,
.master-impact-summary span,
.master-impact-summary em {
  color: var(--ink-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.master-active-summary strong,
.master-impact-summary strong {
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 16px;
  line-height: 1.45;
}

.master-metadata-grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) minmax(170px, 0.5fr) minmax(260px, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.master-editor-section {
  min-width: 0;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.master-editor-section summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-weight: 900;
}

.master-editor-section summary strong {
  color: var(--ink-soft);
  font-size: 13px;
}

.master-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 4px;
}

.master-editor-table {
  display: grid;
  min-width: 920px;
  gap: 6px;
}

.master-option-table {
  min-width: 1500px;
}

.master-table-head,
.master-table-row {
  display: grid;
  align-items: center;
  gap: 6px;
}

.master-price-table .master-table-head,
.master-price-table .master-table-row {
  grid-template-columns: 110px 120px 100px 110px 150px minmax(150px, 1fr) 40px;
}

.master-option-table .master-table-head,
.master-option-table .master-table-row {
  grid-template-columns: 110px 150px 90px 120px 180px 210px 140px 210px minmax(200px, 1fr) 40px;
}

.master-schedule-table .master-table-head,
.master-schedule-table .master-table-row {
  grid-template-columns: 150px 100px 220px 150px 130px 180px 170px 90px 150px minmax(240px, 1fr) 40px;
}

.master-schedule-table {
  min-width: 1700px;
}

.master-table-head {
  padding: 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.master-table-row {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.master-table-row input,
.master-table-row select {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
}

.master-table-row .icon-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  color: var(--danger);
}

.master-add-button {
  margin-top: 8px;
}

.master-file-actions,
.master-apply-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.master-file-actions .compact-field {
  min-width: min(420px, 100%);
}

.master-impact-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--amber-border);
  border-radius: var(--radius);
  background: var(--amber-soft);
}

.master-impact-panel[hidden] {
  display: none;
}

.master-impact-summary {
  border-color: rgba(173, 111, 0, 0.24);
}

.master-impact-summary > div {
  border-color: rgba(173, 111, 0, 0.24);
}

.master-impact-summary > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  line-height: 1.6;
}

.master-impact-panel > .primary-button {
  justify-self: start;
}

.master-history-section {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.master-history-list {
  display: grid;
  gap: 8px;
}

.master-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.master-history-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.master-history-item span,
.master-history-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .master-active-summary,
  .master-impact-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-active-summary > div:nth-child(2n),
  .master-impact-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .master-metadata-grid {
    grid-template-columns: 1fr;
  }

  .master-editor-section summary {
    min-height: 48px;
  }

  .master-file-actions,
  .master-apply-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .master-file-actions > button,
  .master-apply-actions > button,
  .master-impact-panel > .primary-button,
  .master-history-item > button {
    width: 100%;
    min-height: 44px;
  }

  .master-history-item {
    align-items: stretch;
    flex-direction: column;
  }
}

/* v2.93 NAS 저장공간, HTTPS 쿠키와 활성 세션 관리 */
.session-security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.session-security-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border-left: 4px solid var(--mint);
  background: var(--panel);
}

.session-security-grid dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.session-security-grid dd {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.active-session-list {
  display: grid;
  gap: 8px;
}

.security-event-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.security-event-section h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.security-event-list {
  display: grid;
  gap: 6px;
}

.security-event-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--mint);
  background: var(--panel);
}

.security-event-item.is-warning {
  border-left-color: var(--amber);
}

.security-event-item > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.security-event-item strong {
  font-size: 13px;
}

.security-event-item span,
.security-event-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.active-session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.active-session-item.is-current {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.active-session-identity {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.active-session-identity .avatar-image {
  width: 40px;
  height: 40px;
}

.active-session-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
}

.active-session-title > span:not(.status-pill) {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.active-session-identity p,
.active-session-identity small {
  margin: 3px 0 0;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.active-session-identity p {
  font-size: 12px;
}

.active-session-identity small {
  display: block;
  font-size: 11px;
}

@media (max-width: 760px) {
  .session-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .active-session-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .active-session-item > button {
    width: 100%;
    min-height: 44px;
  }

  .security-event-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .session-security-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page);
  font-size: var(--font-body);
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden],
.tab-panel {
  display: none !important;
}

.tab-panel.is-active {
  display: block !important;
}

.login-screen {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 32px 20px;
  background: #eef2f5;
}

.login-screen::before {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--mint);
  content: '';
}

.login-panel {
  display: grid;
  width: min(100%, 440px);
  gap: 20px;
  padding: 34px 36px 36px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.login-brand-mark {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.login-brand h1 {
  margin: 0;
  font-size: 29px;
  line-height: 1.15;
}

.login-brand h1 span {
  color: var(--mint-text);
  font-weight: 800;
}

.login-section-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.login-fields {
  display: grid;
  gap: 16px;
}

.login-panel .input-field {
  color: var(--ink);
  font-weight: 800;
}

.login-panel .input-field input {
  min-height: 50px;
  padding: 0 14px;
  background: #fbfcfd;
}

.login-panel .input-field input::placeholder {
  color: #98a2b3;
}

.login-submit {
  min-height: 50px;
  font-size: 15px;
}

.login-secondary {
  min-height: 46px;
}

.invite-panel {
  width: min(100%, 680px);
}

.login-title-row,
.state-history-head,
.invite-list-item,
.invite-code-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.login-title-row p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

#inviteBackButton {
  flex: 0 0 auto;
  white-space: nowrap;
}

.invite-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invite-fields .span-2 {
  grid-column: 1 / -1;
}

.input-field,
.compact-field,
.select-field {
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
}

.check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint);
}

.input-field input,
.compact-field input,
.compact-field textarea,
select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--paper);
}

.compact-field textarea {
  min-height: 92px;
  padding: 10px 12px;
  resize: vertical;
}

.compact-field input {
  min-height: 38px;
}

.compact-field input:disabled {
  color: var(--ink-soft);
  background: var(--panel);
}

.input-field input:focus,
.compact-field input:focus,
.compact-field textarea:focus,
select:focus {
  border-color: var(--mint);
  outline: 3px solid var(--mint-soft);
}

.form-error {
  min-height: 20px;
  margin: 0;
  color: #b3261e;
  font-size: 14px;
  font-weight: 700;
}

.state-status {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.state-status.is-error {
  color: #b3261e;
}

.primary-button,
.ghost-button,
.tab-button,
.icon-button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 800;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.primary-button {
  border: 0;
  padding: 0 16px;
  color: #ffffff;
  background: var(--ink);
}

.primary-button:hover {
  background: #1f2937;
}

.ghost-button {
  border: 1px solid var(--line);
  padding: 0 12px;
  color: var(--ink);
  background: var(--paper);
}

.ghost-button:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.icon-button {
  width: 38px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
}

.icon-button:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.primary-button:focus-visible,
.ghost-button:focus-visible,
.icon-button:focus-visible,
.tab-button:focus-visible {
  outline: 3px solid var(--mint-soft);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--ink);
  font-weight: 800;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

.hero-metrics div,
.finance-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hero-metrics dt,
.finance-summary dt {
  color: var(--ink-soft);
  font-size: 13px;
}

.hero-metrics dd,
.finance-summary dd {
  margin: 0;
  text-align: right;
  font-weight: 900;
}

.finance-summary dd.is-warning {
  color: #b3261e;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  min-height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-self: start;
  gap: 24px;
  overflow-y: auto;
  padding: 24px;
  background: #111827;
  color: #ffffff;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: #111827;
  background: var(--lime);
  font-weight: 900;
}

.brand-lockup h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar .eyebrow {
  color: #bfdbfe;
}

.tab-nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.tab-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  text-align: left;
}

.tab-button:hover:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.tab-button.is-active {
  color: #111827;
  background: #ffffff;
}

.sidebar-foot {
  display: grid;
  gap: 8px;
}

.sidebar-foot .ghost-button,
.sidebar-foot .version,
.sidebar-foot .user-chip,
.sidebar-foot .save-status-chip {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.version,
.user-chip,
.save-status-chip {
  width: fit-content;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
}

.version.is-mismatch {
  max-width: 100%;
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  color: var(--amber-text);
  background: var(--amber-soft);
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.save-status-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
}

button.save-status-chip {
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.save-status-saving {
  border-color: rgba(255, 241, 217, 0.42);
  background: rgba(255, 241, 217, 0.14);
}

.save-status-saved {
  border-color: rgba(224, 243, 237, 0.42);
  background: rgba(224, 243, 237, 0.14);
}

.save-status-error {
  border-color: rgba(253, 232, 227, 0.46);
  background: rgba(253, 232, 227, 0.16);
}

.save-status-conflict {
  border-color: rgba(255, 211, 105, 0.56);
  background: rgba(255, 211, 105, 0.18);
}

.planner-stage {
  display: grid;
  align-content: start;
  gap: 22px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 28px;
}

.remote-change-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  color: var(--ink);
  background: var(--amber-soft);
}

.remote-change-banner span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.remote-change-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.collaboration-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 42;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(440px, calc(100vw - 40px));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--mint-border);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-strong);
}

.collaboration-notice p {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.collaboration-notice .collaboration-actor {
  min-width: 0;
}

.collaboration-notice .actor-avatar,
.collaboration-notice .avatar-image {
  width: 34px;
  height: 34px;
}

.save-status-offline {
  border-color: rgba(255, 241, 217, 0.52);
  color: var(--amber-text);
  background: var(--amber-soft);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
  gap: 22px;
  align-items: start;
}

.hero-panel:has(.hero-metrics[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy,
.surface-panel,
.feature-card,
.image-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hero-copy {
  padding: 26px;
}

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

.hero-title-row .eyebrow {
  margin: 0;
}

.project-edit-button {
  flex: 0 0 auto;
}

.hero-copy h2 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.1;
  text-wrap: balance;
  word-break: keep-all;
}

.hero-copy p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: keep-all;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.hero-metrics div {
  flex-direction: column;
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hero-metrics dd {
  color: var(--ink);
  font-size: 20px;
}

.dashboard-grid,
.content-grid,
.finance-layout,
.movein-grid,
.movein-board {
  display: grid;
  gap: 16px;
}

.dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.user-admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.user-admin-layout > .user-ops-summary-panel,
.user-admin-layout > .backup-panel,
.user-admin-layout > .data-health-panel,
.user-admin-layout > .recent-user-change-panel,
.user-admin-layout > .user-list-panel,
.user-admin-layout > .state-history-panel {
  grid-column: 1 / -1;
}

.user-form,
.user-list,
.backup-actions,
.invite-list,
.state-history-list {
  display: grid;
  gap: 12px;
}

.invite-code-result,
.invite-list-item,
.state-history-item,
.state-history-preview {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.invite-code-result {
  margin-top: 12px;
  border-color: var(--mint);
  background: var(--mint-soft);
}

.invite-code-result code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.invite-list {
  margin-top: 12px;
}

.family-access-preview {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.family-access-preview-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.family-access-preview-head h4,
.family-access-preview-head p {
  margin: 0;
}

.family-access-preview-head p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.family-access-preview-identity .avatar-image {
  width: 48px;
  height: 48px;
}

.family-access-counts,
.family-onboarding-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.family-access-counts > div,
.family-onboarding-counts > div {
  min-width: 0;
  padding: 10px;
  border-left: 4px solid var(--mint);
  background: var(--panel);
}

.family-access-counts dt,
.family-access-counts dd,
.family-onboarding-counts dt,
.family-onboarding-counts dd {
  margin: 0;
}

.family-access-counts dt,
.family-onboarding-counts dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.family-access-counts dd,
.family-onboarding-counts dd {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 900;
}

.family-access-boundaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.family-access-boundaries > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.family-access-boundaries strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.family-access-boundaries svg {
  width: 16px;
  height: 16px;
}

.family-access-boundaries p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  word-break: keep-all;
}

.family-onboarding-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.family-onboarding-dialog::backdrop {
  background: rgba(16, 24, 21, 0.55);
}

.family-onboarding-shell {
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 24px;
}

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

.family-onboarding-head h2,
.family-onboarding-head p {
  margin: 0;
}

.family-onboarding-head h2 {
  margin-top: 4px;
  font-size: 26px;
}

.family-onboarding-head > div > p:last-child {
  margin-top: 6px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.family-onboarding-identity {
  padding: 14px;
  border: 1px solid var(--mint);
  border-radius: 8px;
  background: var(--mint-soft);
}

.family-onboarding-identity .avatar-image {
  width: 52px;
  height: 52px;
}

.family-onboarding-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-onboarding-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  background: var(--panel);
}

.family-onboarding-steps li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink);
  font-weight: 900;
}

.family-onboarding-steps strong,
.family-onboarding-steps p {
  display: block;
  margin: 0;
}

.family-onboarding-steps p {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

.family-onboarding-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.family-onboarding-actions button {
  height: 44px;
  min-height: 44px;
}

.invite-list-item p,
.state-history-item p,
.state-history-preview p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 760px) {
  .family-access-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-onboarding-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .family-access-boundaries {
    grid-template-columns: minmax(0, 1fr);
  }

  .family-onboarding-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-onboarding-actions .primary-button {
    grid-column: 1 / -1;
  }

  .family-onboarding-shell {
    gap: 12px;
    padding: 16px;
  }

  .family-onboarding-head h2 {
    font-size: 22px;
  }

  .family-onboarding-head > div > p:last-child,
  .family-onboarding-steps p {
    font-size: 12px;
  }

  .family-onboarding-identity {
    padding: 10px;
  }

  .family-onboarding-identity .avatar-image {
    width: 44px;
    height: 44px;
  }

  .family-onboarding-counts > div {
    padding: 8px;
  }

  .family-onboarding-steps {
    gap: 6px;
  }

  .family-onboarding-steps li {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 8px 10px;
  }

  .family-onboarding-steps li > span {
    width: 30px;
    height: 30px;
  }
}

.invite-status,
.state-revision-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
}

.state-history-panel {
  grid-column: 1 / -1;
}

.user-admin-layout > .surface-panel.state-history-panel {
  grid-column: 1 / -1;
}

.user-admin-layout > .surface-panel.backup-panel {
  grid-column: 1 / -1;
}

.user-admin-layout > .surface-panel.data-health-panel {
  grid-column: 1 / -1;
}

.state-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.state-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.state-history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.backup-actions {
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: end;
}

.ops-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.ops-status-grid div {
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.ops-status-grid dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.ops-status-grid dd {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ops-diagnostics-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.data-health-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.data-health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.data-health-summary > div {
  min-width: 0;
  padding: 13px 14px;
  background: var(--paper);
}

.data-health-summary span,
.data-health-summary strong {
  display: block;
}

.data-health-summary span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.data-health-summary strong {
  margin-top: 5px;
  font-size: 18px;
}

.data-health-summary .is-ok strong {
  color: var(--mint-text);
}

.data-health-summary .is-review strong {
  color: var(--amber-text);
}

.data-health-summary .is-error strong {
  color: var(--coral-text);
}

.data-health-backup {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--mint);
  background: var(--mint-soft);
}

.data-health-backup svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--mint-text);
}

.data-health-backup p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.data-health-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.data-health-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.data-health-row > div {
  min-width: 0;
}

.data-health-row p {
  margin: 3px 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.data-health-row small {
  display: block;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.data-health-row.is-error .status-pill {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.data-health-row.is-warning .status-pill {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.data-health-empty {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 20px 2px 6px;
  color: var(--mint-text);
  font-weight: 800;
}

.ops-diagnostics-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ops-diagnostics-title h4,
.ops-diagnostics-events-head h5 {
  margin: 0;
}

.ops-diagnostics-title .status-pill.is-ok {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.ops-diagnostics-title .status-pill.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.ops-diagnostics-title .status-pill.is-error {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.ops-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.ops-diagnostics-grid > div {
  min-width: 0;
  padding: 11px 12px;
  background: var(--paper);
}

.ops-diagnostics-grid dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.ops-diagnostics-grid dd {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ops-diagnostics-alerts,
.ops-diagnostics-events {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.ops-diagnostics-alert,
.ops-diagnostics-event,
.ops-diagnostics-empty {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
}

.ops-diagnostics-alert {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.ops-diagnostics-alert.is-error,
.ops-diagnostics-event.is-error {
  border-left-color: var(--danger);
  background: var(--coral-soft);
}

.ops-diagnostics-alert svg,
.ops-diagnostics-empty svg {
  width: 18px;
  height: 18px;
}

.ops-diagnostics-alert strong,
.ops-diagnostics-event strong {
  font-size: 13px;
}

.ops-diagnostics-alert p,
.ops-diagnostics-event p,
.ops-diagnostics-event span,
.ops-diagnostics-events-head span {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.ops-diagnostics-empty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-diagnostics-empty.is-ok {
  border-left-color: var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.ops-diagnostics-events-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 4px;
}

.ops-diagnostics-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--panel);
}

.ops-diagnostics-event > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.ops-diagnostics-event code {
  font-size: 11px;
}

.backup-readiness-grid {
  margin-bottom: 14px;
}

.backup-coverage-section,
.upload-audit-section {
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.backup-coverage-section h4,
.upload-audit-section h4 {
  margin: 0;
  font-size: 14px;
}

.backup-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 9px;
  border-block: 1px solid var(--line);
}

.backup-coverage-grid > div {
  min-width: 0;
  padding: 14px 16px;
}

.backup-coverage-grid > div + div {
  border-left: 1px solid var(--line);
}

.backup-coverage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.backup-coverage-head span {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.backup-coverage-grid p,
.backup-coverage-grid small,
.upload-audit-section .section-head p {
  overflow-wrap: break-word;
}

.backup-coverage-grid p {
  margin: 8px 0 3px;
  font-weight: 800;
  line-height: 1.45;
}

.backup-coverage-grid small,
.upload-audit-section .section-head p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.backup-actions > button,
.upload-audit-section button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.backup-actions svg,
.upload-audit-section button svg {
  width: 18px;
  height: 18px;
}

.upload-audit-section {
  margin-top: 20px;
  margin-bottom: 0;
}

.upload-audit-section .section-head {
  margin-bottom: 10px;
}

.upload-audit-section .section-head p {
  margin: 4px 0 0;
}

.upload-audit-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.upload-audit-summary > div {
  min-width: 0;
  padding: 12px;
}

.upload-audit-summary > div + div {
  border-left: 1px solid var(--line);
}

.upload-audit-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.upload-audit-summary dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
  line-height: 1.35;
}

.attachment-upload-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.attachment-upload-progress > div {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
}

.attachment-upload-progress strong,
.attachment-upload-progress span {
  font-size: 12px;
  font-weight: 900;
}

.attachment-upload-progress progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 8px;
  border: 0;
  accent-color: var(--mint);
  background: var(--surface-soft);
  border-radius: 4px;
  overflow: hidden;
}

.attachment-upload-progress progress::-webkit-progress-bar {
  background: var(--surface-soft);
}

.attachment-upload-progress progress::-webkit-progress-value {
  background: var(--mint);
  border-radius: 4px;
}

.attachment-upload-progress progress::-moz-progress-bar {
  background: var(--mint);
  border-radius: 4px;
}

.attachment-upload-progress p {
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: break-word;
}

.attachment-upload-progress.is-error p {
  color: var(--coral-text);
  font-weight: 800;
}

.attachment-center-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 8px;
}

.attachment-center-toolbar .select-field {
  width: min(220px, 100%);
}

.attachment-center-toolbar p {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.attachment-center-list {
  max-height: 360px;
  overflow-y: auto;
  border-block: 1px solid var(--line);
}

.attachment-center-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 11px 0;
}

.attachment-center-item + .attachment-center-item {
  border-top: 1px solid var(--line);
}

.attachment-center-item-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.attachment-center-item-main > div {
  min-width: 0;
}

.attachment-center-item-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--mint-text);
  background: var(--mint-soft);
  border-radius: 6px;
}

.attachment-center-item.is-issue .attachment-center-item-icon {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.attachment-center-item-icon svg {
  width: 18px;
  height: 18px;
}

.attachment-center-item strong,
.attachment-center-item small {
  display: block;
}

.attachment-center-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-center-item small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.attachment-center-status {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 11px;
  font-weight: 900;
}

.attachment-center-item.is-issue .attachment-center-status {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.attachment-center-actions {
  display: flex;
  gap: 6px;
}

.attachment-center-actions .icon-button {
  width: 40px;
  height: 40px;
}

.upload-audit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.upload-audit-actions .check-field {
  flex: 1 1 auto;
}

.backup-history-section {
  margin-bottom: 16px;
}

.backup-history-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.backup-history-list {
  border-block: 1px solid var(--line);
}

.backup-history-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 2px;
}

.backup-history-item + .backup-history-item {
  border-top: 1px solid var(--line);
}

.backup-history-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.backup-history-item strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.backup-history-item p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.status-ok {
  color: var(--mint-text);
}

.status-bad {
  color: #b3261e;
}

.user-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.user-card-head,
.user-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.avatar-label,
.actor-chip,
.user-card-identity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.avatar-image {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  object-fit: cover;
  background: var(--paper);
}

.avatar-image-small {
  width: 22px;
  height: 22px;
}

.user-card-avatar {
  width: 42px;
  height: 42px;
}

.user-card-head h4 {
  margin: 0 0 4px;
  font-size: 17px;
}

.user-card-head p,
.user-card-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.user-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.6fr) minmax(150px, 0.4fr);
  gap: 10px;
  align-items: end;
}

.user-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.user-ops-summary-panel {
  grid-column: 1 / -1;
}

.ops-monitor-heading-status {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.ops-monitor-heading-status small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.ops-monitor-heading-status .status-pill.is-ok {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.ops-monitor-heading-status .status-pill.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.ops-monitor-heading-status .status-pill.is-error {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.user-ops-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.user-ops-summary-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.user-ops-summary-card.is-ok {
  border-top: 4px solid var(--mint);
}

.user-ops-summary-card.is-warning {
  border-top: 4px solid var(--amber);
}

.user-ops-summary-card.is-error {
  border-top: 4px solid var(--danger);
}

.user-ops-summary-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-ops-summary-card small {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--panel-strong);
  font-size: 10px;
  font-weight: 900;
}

.user-ops-summary-card.is-ok small {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.user-ops-summary-card.is-warning small {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.user-ops-summary-card.is-error small {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.user-ops-summary-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.user-ops-summary-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.25;
}

.user-ops-summary-card p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.ops-monitor-alerts {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ops-monitor-alert,
.ops-monitor-empty {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
}

.ops-monitor-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}

.ops-monitor-alert.is-error,
.ops-monitor-empty.is-error {
  border-left-color: var(--danger);
  background: var(--coral-soft);
}

.ops-monitor-alert strong {
  font-size: 13px;
}

.ops-monitor-alert p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.ops-monitor-alert button {
  min-height: 40px;
  white-space: nowrap;
}

.ops-monitor-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.ops-monitor-empty.is-ok {
  border-left-color: var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.ops-monitor-empty svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ops-monitor-resolved details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.ops-monitor-resolved summary {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ops-monitor-resolved ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ops-monitor-resolved li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  color: var(--ink-soft);
  font-size: 12px;
}

.pwa-settings-head {
  align-items: center;
}

.pwa-settings-panel {
  align-self: start;
}

.pwa-app-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.pwa-setting-list {
  display: grid;
  gap: 8px;
}

.pwa-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.pwa-offline-row {
  border-left-color: var(--violet);
}

.pwa-setting-copy {
  min-width: 0;
}

.pwa-setting-copy > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.pwa-setting-copy p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.pwa-status {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--panel-strong);
  font-size: 11px;
  font-weight: 900;
}

.pwa-status.is-ready {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.pwa-status.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.pwa-status.is-blocked {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.pwa-setting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.pwa-setting-row button {
  min-height: 42px;
  white-space: nowrap;
}

.state-library-panel {
  grid-column: 1 / -1;
}

.state-save-grid,
.state-share-row {
  display: grid;
  gap: 10px;
  align-items: end;
}

.state-save-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.35fr) auto auto;
}

.state-share-row {
  grid-template-columns: minmax(220px, 1fr) auto;
  margin-top: 12px;
}

.saved-state-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.saved-state-item {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.saved-state-item h4 {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.saved-state-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.share-code {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
}

.saved-state-controls,
.saved-state-actions {
  display: grid;
  gap: 10px;
  align-items: end;
}

.saved-state-controls {
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.28fr);
}

.saved-state-actions {
  grid-template-columns: repeat(5, minmax(0, auto));
  justify-content: end;
}

.saved-state-preview {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.saved-state-preview dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.saved-state-preview div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.saved-state-preview dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.saved-state-preview dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.dashboard-action-list,
.dashboard-risk-list,
.recent-change-list {
  display: grid;
  gap: 10px;
}

.dashboard-today-panel {
  margin-bottom: 16px;
}

.dashboard-today-head,
.dashboard-today-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-today-head {
  justify-content: space-between;
}

.dashboard-today-identity {
  min-width: 0;
}

.dashboard-today-identity > div:last-child {
  min-width: 0;
}

.dashboard-today-identity .actor-chip {
  min-height: 44px;
  padding: 5px;
}

.dashboard-today-identity .actor-chip > span:last-child {
  display: none;
}

.dashboard-today-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-block: 1px solid var(--line);
}

.dashboard-today-amounts > div {
  min-width: 0;
  padding: 14px;
  border-left: 3px solid var(--mint);
}

.dashboard-today-amounts > div.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.dashboard-today-amounts > div.is-review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.dashboard-today-amounts > div.is-missing {
  border-left-color: var(--line-strong);
  background: var(--panel-strong);
}

.dashboard-today-amounts > div.is-done {
  border-left-color: var(--mint);
}

.dashboard-today-amounts span,
.dashboard-today-amounts strong,
.dashboard-today-amounts p {
  display: block;
  min-width: 0;
}

.dashboard-today-amounts span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-today-amounts strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 19px;
}

.dashboard-today-amounts p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.dashboard-input-readiness {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 0;
}

.dashboard-input-readiness + .dashboard-today-amounts {
  margin-top: 0;
}

.dashboard-input-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-input-readiness-head h4 {
  margin: 0;
  font-size: 13px;
}

.dashboard-input-readiness-head strong {
  color: var(--amber-ink);
  font-size: 12px;
}

.dashboard-input-readiness-head strong.is-complete {
  color: var(--mint-text);
}

.dashboard-input-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.dashboard-input-gap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 10px;
  color: var(--ink-soft);
  background: var(--paper);
}

.dashboard-input-gap span {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.dashboard-input-gap svg {
  flex: 0 0 auto;
}

.dashboard-input-complete {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mint-text);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-today-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  margin-top: 18px;
}

.dashboard-today-workspace > section {
  min-width: 0;
}

.dashboard-today-workspace h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.dashboard-today-panel .assignment-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-today-panel .assignment-card {
  padding: 11px;
  background: var(--panel);
}

.dashboard-today-panel .assignment-card strong {
  margin-top: 5px;
  font-size: 18px;
}

.dashboard-today-panel .assignment-card p {
  margin-top: 5px;
  font-size: 11px;
}

.dashboard-today-notifications {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.dashboard-today-notifications > summary {
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-today-notifications[open] > summary {
  color: var(--ink);
}

.dashboard-today-notifications .notification-list {
  margin-top: 8px;
}

.reconciliation-inbox-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  scroll-margin-top: 76px;
}

.reconciliation-inbox-head {
  align-items: flex-end;
}

.reconciliation-inbox-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reconciliation-inbox-summary article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #4977b8;
  border-radius: 8px;
  background: var(--panel);
}

.reconciliation-inbox-summary article.is-proof {
  border-left-color: var(--coral);
}

.reconciliation-inbox-summary article.is-account {
  border-left-color: var(--amber);
}

.reconciliation-inbox-summary article.is-duplicate {
  border-left-color: #7857a8;
}

.reconciliation-inbox-summary svg {
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
}

.reconciliation-inbox-summary span {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  word-break: keep-all;
}

.reconciliation-inbox-summary strong {
  font-size: 16px;
  white-space: nowrap;
}

.reconciliation-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reconciliation-inbox-filters button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--panel);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.reconciliation-inbox-filters button span {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel-strong);
  font-size: 11px;
}

.reconciliation-inbox-filters button.is-active {
  border-color: var(--mint-strong);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.reconciliation-inbox-list {
  display: grid;
  gap: 9px;
}

.reconciliation-inbox-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(210px, auto);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid #4977b8;
  border-radius: 8px;
  background: var(--panel);
}

.reconciliation-inbox-item.is-proof {
  border-left-color: var(--coral);
}

.reconciliation-inbox-item.is-account {
  border-left-color: var(--amber);
}

.reconciliation-inbox-item.is-duplicate {
  border-left-color: #7857a8;
}

.reconciliation-inbox-item.is-confirmed {
  opacity: 0.72;
  border-left-color: var(--line-strong);
  background: var(--panel-soft);
}

.reconciliation-inbox-main,
.reconciliation-inbox-amount,
.reconciliation-inbox-actions {
  min-width: 0;
}

.reconciliation-inbox-main > div:first-child,
.reconciliation-inbox-type,
.reconciliation-inbox-confirm,
.reconciliation-inbox-confirm > div {
  display: flex;
  align-items: center;
}

.reconciliation-inbox-main > div:first-child {
  flex-wrap: wrap;
  gap: 8px;
}

.reconciliation-inbox-type {
  gap: 5px;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel-strong);
  font-size: 11px;
  font-weight: 900;
}

.reconciliation-inbox-type svg {
  width: 14px;
  height: 14px;
}

.reconciliation-inbox-main time,
.reconciliation-inbox-main small,
.reconciliation-inbox-amount span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.reconciliation-inbox-main > strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.reconciliation-inbox-main p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.reconciliation-inbox-main small {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reconciliation-inbox-amount {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.reconciliation-inbox-amount strong {
  font-size: 15px;
  white-space: nowrap;
}

.reconciliation-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.reconciliation-inbox-actions > .ghost-button {
  min-height: 40px;
}

.reconciliation-inbox-confirm {
  flex-basis: 100%;
  justify-content: flex-end;
  gap: 7px;
  min-height: 30px;
}

.reconciliation-inbox-confirm > div {
  gap: 4px;
}

.reconciliation-inbox-confirm .actor-chip {
  max-width: 130px;
}

.reconciliation-inbox-note {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.collaboration-inbox-panel {
  margin-bottom: 16px;
  scroll-margin-top: 76px;
}

.collaboration-inbox-head {
  align-items: flex-end;
}

.collaboration-inbox-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.collaboration-inbox-filters button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  background: var(--panel);
  font: inherit;
  cursor: pointer;
}

.collaboration-inbox-filters button span {
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  word-break: keep-all;
}

.collaboration-inbox-filters button strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 15px;
}

.collaboration-inbox-filters button.is-active {
  border-color: var(--mint-strong);
  color: var(--mint-strong);
  background: var(--mint-soft);
  box-shadow: inset 0 -3px 0 var(--mint-strong);
}

.collaboration-inbox-filters button.is-warning:not(.is-active) {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.collaboration-inbox-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.collaboration-task {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(340px, 1.35fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--panel);
}

.collaboration-task.is-overdue {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.collaboration-task.is-complete {
  border-left-color: var(--mint);
}

.collaboration-task-main,
.collaboration-task-roles,
.collaboration-task-actions {
  min-width: 0;
}

.collaboration-task-status,
.collaboration-task-actions,
.collaboration-confirmers {
  display: flex;
  align-items: center;
}

.collaboration-task-status {
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.collaboration-task-main h4 {
  margin: 8px 0 0;
  font-size: 16px;
  word-break: keep-all;
}

.collaboration-task-main p,
.collaboration-task-main small {
  display: block;
  margin: 5px 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.collaboration-task-main p {
  font-size: 13px;
}

.collaboration-task-main small {
  font-size: 12px;
}

.collaboration-task-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.collaboration-role {
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.collaboration-role > span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.collaboration-role > strong {
  display: block;
  font-size: 13px;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.collaboration-role .actor-chip {
  min-width: 0;
  padding: 3px 5px;
}

.collaboration-role .actor-chip > span:last-child {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collaboration-confirmers {
  gap: 3px;
}

.collaboration-confirmers .actor-chip {
  width: 30px;
  padding: 3px;
}

.collaboration-confirmers .actor-chip > span:last-child {
  display: none;
}

.collaboration-task-actions {
  justify-content: flex-end;
  gap: 6px;
}

.collaboration-task-actions .ghost-button,
.collaboration-task-actions .text-button {
  min-height: 40px;
  white-space: nowrap;
}

.collaboration-task-actions .ghost-button.is-active {
  border-color: var(--mint-strong);
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.collaboration-task-activity {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.collaboration-task-activity > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.collaboration-task-activity > summary::marker {
  color: var(--mint-strong);
}

.collaboration-activity-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 12px;
  padding-top: 2px;
}

.collaboration-comment-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.collaboration-comment-list article {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--canvas-soft);
}

.collaboration-comment-list article p,
.collaboration-activity-empty,
.collaboration-confirmation-history {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.collaboration-confirmation-history {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.collaboration-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
  min-width: 0;
}

.collaboration-comment-form label {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.collaboration-comment-form textarea {
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.collaboration-comment-form textarea:focus-visible {
  border-color: var(--mint-strong);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.collaboration-comment-form .ghost-button {
  min-height: 42px;
  white-space: nowrap;
}

.collaboration-inbox-empty {
  min-height: 88px;
  margin: 0;
}

.dashboard-quick-record-panel {
  grid-column: 1 / -1;
}

.dashboard-quick-record {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-quick-record .ghost-button {
  min-height: 52px;
}

.dashboard-action-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-action-item strong,
.dashboard-risk-item strong {
  overflow-wrap: anywhere;
}

.dashboard-action-item p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-action-category {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dashboard-action-item[data-priority-category='money'] .dashboard-action-category {
  color: var(--coral-text);
}

.dashboard-action-item[data-priority-category='missing'] .dashboard-action-category {
  color: var(--amber-text);
}

.dashboard-action-item[data-priority-category='deadline'] .dashboard-action-category {
  color: var(--mint-text);
}

.dashboard-action-more {
  border-top: 1px solid var(--line);
}

.dashboard-action-more > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.dashboard-action-more > summary::-webkit-details-marker {
  display: none;
}

.dashboard-action-more > summary strong {
  color: var(--ink);
}

.dashboard-action-more-list {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.dashboard-action-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.dashboard-action-main > div {
  min-width: 0;
}

.dashboard-action-rank {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-action-controls,
.dashboard-action-confirmations,
.dashboard-action-actors {
  display: flex;
  align-items: center;
}

.dashboard-action-controls {
  gap: 10px;
}

.dashboard-action-confirmations {
  gap: 8px;
  min-height: 36px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.dashboard-action-actors {
  gap: 4px;
}

.dashboard-action-actors:empty {
  display: none;
}

.dashboard-action-confirmations .actor-chip {
  min-width: 28px;
  padding: 3px;
}

.dashboard-action-confirmations .actor-chip span {
  display: none;
}

.dashboard-action-confirmations .text-button.is-active {
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.section-description {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.dashboard-action-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.dashboard-action-review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.dashboard-risk-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recent-change-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--panel);
}

.recent-change-item div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.recent-change-item > div > span,
.recent-change-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.recent-change-item strong {
  overflow-wrap: anywhere;
}

.recent-change-item > .text-button {
  grid-column: 2;
  justify-self: end;
}

.recent-change-item > .recent-change-item-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recent-change-history {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.recent-change-history > summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  color: var(--mint-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.recent-change-history-list {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.recent-change-history-event {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.recent-change-history-event > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recent-change-history-event > header > strong {
  font-size: 13px;
}

.recent-change-diff {
  display: grid;
  gap: 6px;
  margin: 0;
}

.recent-change-diff > div {
  display: grid;
  grid-template-columns: minmax(72px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.recent-change-diff dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.recent-change-diff dd {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.recent-change-diff del,
.recent-change-diff ins {
  overflow-wrap: anywhere;
}

.recent-change-diff del {
  color: var(--coral-text);
}

.recent-change-diff ins {
  color: var(--mint-text);
  text-decoration: none;
}

.recent-change-history-legacy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.dashboard-risk-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-risk-item span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-risk-item strong {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.3;
}

.dashboard-risk-warning {
  border-color: #f4c2b8;
  background: var(--coral-soft);
}

.dashboard-risk-review {
  border-color: #f0d19c;
  background: var(--amber-soft);
}

.dashboard-notification-panel,
.household-calendar-panel {
  grid-column: 1 / -1;
}

.notification-count {
  display: inline-grid;
  min-width: 25px;
  min-height: 25px;
  place-items: center;
  margin-left: 6px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--danger);
  font-size: 12px;
  vertical-align: middle;
}

.notification-count.is-empty {
  color: var(--ink-soft);
  background: var(--panel);
}

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

.notification-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.notification-item.is-read {
  opacity: 0.68;
  border-left-color: var(--line-strong);
}

.notification-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.notification-review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mint);
}

.notification-item.is-read .notification-dot {
  background: var(--line-strong);
}

.notification-item > div {
  min-width: 0;
}

.notification-item > div > span,
.notification-item p {
  color: var(--ink-soft);
  font-size: 11px;
}

.notification-item strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.notification-item p {
  margin: 4px 0 0;
  line-height: 1.35;
}

.calendar-head {
  align-items: end;
}

.calendar-controls {
  display: grid;
  grid-template-columns: 40px minmax(145px, auto) 40px minmax(140px, auto);
  align-items: center;
  gap: 6px;
}

.calendar-controls input,
.calendar-controls select {
  min-height: 40px;
}

.household-calendar {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  padding: 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.calendar-day {
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.is-empty {
  background: var(--panel);
}

.calendar-day.is-today > strong {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--ink);
}

.calendar-events {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.calendar-event {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 5px 6px;
  border: 0;
  border-left: 3px solid var(--violet);
  border-radius: 5px;
  color: var(--ink);
  background: var(--violet-soft);
  text-align: left;
  cursor: pointer;
}

.calendar-event span,
.calendar-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event span {
  font-size: 10px;
  font-weight: 900;
}

.calendar-event small {
  color: var(--ink-soft);
  font-size: 9px;
}

.calendar-event-payment,
.calendar-event-expense {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.calendar-event-saving,
.calendar-event-income {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.calendar-event-prep {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.funding-simulator-form,
.funding-simulator-result {
  display: grid;
  gap: 10px;
}

.funding-simulator-form {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
}

.funding-simulator-result {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.funding-simulator-result article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--panel);
}

.funding-simulator-result article.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.funding-simulator-result article.is-done {
  border-left-color: var(--lime);
  background: var(--lime-soft);
}

.funding-simulator-result article.is-active {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.funding-simulator-result span,
.funding-simulator-result p {
  color: var(--ink-soft);
  font-size: 11px;
}

.funding-simulator-result strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.funding-simulator-result p {
  margin: 5px 0 0;
}

.content-grid,
.finance-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
}

.feature-card,
.surface-panel {
  padding: 20px;
}

.feature-card h3,
.surface-panel h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-wrap: balance;
  word-break: keep-all;
}

.feature-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
}

.accent-coral {
  background: var(--coral-soft);
  border-color: #f4c2b8;
}

.accent-lime {
  background: var(--lime-soft);
  border-color: #dbe9a7;
}

.accent-savings {
  background: var(--violet-soft);
  border-color: #c7d2fe;
}

.status-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--amber-text);
  background: var(--amber-soft);
  font-size: 13px;
  font-weight: 900;
}

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

.option-layout {
  display: grid;
  gap: 16px;
}

.choice-grid,
.option-stack {
  display: grid;
  gap: 10px;
}

.price-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 14px;
}

.option-stack {
  grid-template-columns: 1fr;
}

.choice-card {
  position: relative;
  display: grid;
  min-height: 66px;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.choice-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-card:has(input:checked) {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.choice-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}

.choice-title {
  font-weight: 900;
}

.choice-meta,
.choice-detail {
  color: var(--ink-soft);
  font-size: 13px;
}

.choice-detail {
  line-height: 1.35;
}

.option-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.option-group.is-locked {
  background: var(--amber-soft);
}

.option-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
}

.option-note {
  color: var(--amber-text);
  font-size: 13px;
}

.option-manager-panel {
  grid-column: 1 / -1;
}

.option-priority-board {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding-block: 14px;
  border-block: 1px solid var(--line);
}

.option-priority-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.option-priority-head > div {
  display: grid;
  gap: 3px;
}

.option-priority-head span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.option-priority-head h4,
.option-priority-head p {
  margin: 0;
}

.option-priority-head h4 {
  font-size: 18px;
}

.option-priority-head p {
  color: var(--ink-soft);
  font-size: 13px;
}

.option-decision-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.option-decision-overview > div {
  min-width: 0;
  padding: 11px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--panel);
}

.option-decision-overview > div.is-risk {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.option-decision-overview > div.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.option-decision-overview dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.option-decision-overview dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.option-decision-queue {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.option-priority-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.4fr) auto;
  grid-template-areas:
    "title facts action"
    "impact impact impact";
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.option-priority-row:first-child {
  border-top: 0;
}

.option-priority-row.is-complete {
  background: var(--panel);
}

.option-priority-title {
  display: grid;
  grid-area: title;
  min-width: 0;
  gap: 5px;
}

.option-priority-title > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.option-priority-title strong,
.option-priority-impact strong {
  overflow-wrap: anywhere;
}

.option-priority-title small,
.option-priority-impact span,
.option-priority-impact small {
  color: var(--ink-soft);
  font-size: 12px;
}

.option-priority-facts {
  display: grid;
  grid-area: facts;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.option-priority-facts div {
  min-width: 0;
}

.option-priority-facts dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.option-priority-facts dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
}

.option-priority-impact {
  display: grid;
  grid-area: impact;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.option-priority-row > .ghost-button {
  grid-area: action;
  min-height: 40px;
  white-space: nowrap;
}

.option-status-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.option-status-summary div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.option-status-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.option-status-summary dd {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.option-manager-list {
  display: grid;
  gap: 12px;
}

.option-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
}

.option-decision-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.option-decision-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
  align-items: start;
}

.option-decision-head h4 {
  margin: 8px 0 4px;
  font-size: 18px;
  line-height: 1.25;
}

.option-decision-head p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 900;
}

.option-status-field {
  min-width: 0;
}

.section-submeta {
  min-height: 0;
  margin: -4px 0 14px;
}

.option-board-tools {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 14px;
}

.option-board-tools .select-field {
  width: min(100%, 220px);
}

.option-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.option-quick-status {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 13px;
  font-weight: 900;
}

.option-quick-status.is-active {
  border-color: var(--mint-text);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.option-quick-status:hover {
  border-color: var(--mint);
  color: var(--ink);
}

.option-decision-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.option-decision-impact,
.option-confirmation-row,
.option-confirmation-actors {
  display: flex;
  align-items: center;
}

.option-decision-impact {
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.option-decision-impact > div:first-child {
  display: grid;
  gap: 3px;
}

.option-decision-impact span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.option-decision-impact strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.option-confirmation-row {
  justify-content: flex-end;
  gap: 10px;
}

.option-confirmation-copy {
  display: grid;
  gap: 2px;
  min-width: 150px;
}

.option-confirmation-copy strong {
  font-size: 13px;
}

.option-confirmation-copy span,
.option-decision-impact small,
.option-payment-tracking p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.option-confirmation-actors {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.option-confirmation-row .ghost-button.is-active {
  border-color: var(--mint-strong);
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.option-payment-tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.option-payment-tracking > div {
  display: grid;
  gap: 5px;
}

.option-payment-tracking > div > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.selected-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
}

.payment-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  list-style-position: inside;
}

.timeline-list {
  max-height: 640px;
  overflow: auto;
  padding-right: 6px;
}

.finance-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: 16px;
}

.finance-control-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.finance-control-group + .finance-control-group {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.finance-control-group legend {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 0;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.finance-control-group .span-2 {
  grid-column: 1 / -1;
}

.dsr-input-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.dsr-input-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mint-text);
  font-weight: 900;
}

.acquisition-cost-control-group {
  grid-template-columns: 1fr;
}

.acquisition-cost-base,
.acquisition-cost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.acquisition-cost-base div,
.acquisition-cost-base p,
.acquisition-cost-total span,
.acquisition-cost-total strong {
  min-width: 0;
  margin: 0;
}

.acquisition-cost-base div,
.acquisition-cost-total {
  font-weight: 900;
}

.acquisition-cost-base span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.acquisition-cost-base p {
  color: var(--ink-soft);
  font-size: 12px;
  text-align: right;
}

.acquisition-cost-list {
  display: grid;
}

.acquisition-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.acquisition-cost-name,
.acquisition-cost-manual {
  grid-column: 1 / -1;
}

.acquisition-cost-name,
.acquisition-cost-rate-output {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.acquisition-cost-name strong {
  font-size: 14px;
}

.acquisition-cost-name span,
.acquisition-cost-rate-output span {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.acquisition-cost-rate-output {
  min-height: 66px;
  align-content: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.percent-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.percent-input > span {
  color: var(--ink-soft);
  font-weight: 900;
}

.acquisition-cost-manual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.acquisition-cost-manual:has(input:checked) {
  border-color: var(--mint-text);
  background: var(--mint-soft);
  color: var(--mint-text);
}

.acquisition-cost-manual input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mint-text);
}

.acquisition-cost-total {
  margin-top: 2px;
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.acquisition-cost-total strong {
  font-size: 18px;
}

.existing-debt-control-group {
  grid-template-columns: 1fr;
  scroll-margin-top: 82px;
}

.existing-debt-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.existing-debt-summary > div {
  min-width: 0;
  padding: 11px;
  border-radius: 8px;
  background: var(--panel);
}

.existing-debt-summary span,
.existing-debt-row span,
.existing-debt-row small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.existing-debt-summary strong,
.existing-debt-row strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.existing-debt-summary small,
.existing-debt-row small {
  margin-top: 4px;
}

.existing-debt-editor {
  min-width: 0;
  scroll-margin-top: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.existing-debt-editor > summary {
  min-height: 44px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 900;
}

.existing-debt-editor[open] > summary {
  border-bottom: 1px solid var(--line);
}

.existing-debt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.existing-debt-payoff {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mint-soft);
}

.existing-debt-payoff input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.existing-debt-payoff span {
  line-height: 1.45;
}

.existing-debt-form-actions,
.existing-debt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.existing-debt-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.existing-debt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 12px;
  min-width: 0;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--paper);
}

.existing-debt-row.is-payoff {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.existing-debt-row > div {
  min-width: 0;
}

.existing-debt-row > .audit-trail {
  grid-column: 1 / span 2;
}

.existing-debt-row > .existing-debt-actions {
  grid-column: 3;
  grid-row: 2;
}

.existing-debt-main p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.existing-debt-actions button {
  min-height: 40px;
}

.finance-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.dsr-stress-panel {
  min-width: 0;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--paper);
}

.dsr-stress-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.dsr-stress-head > div {
  min-width: 0;
}

.dsr-stress-head span,
.dsr-stress-card span,
.dsr-income-evidence span {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.dsr-stress-head h4 {
  margin: 4px 0 0;
  font-size: 17px;
}

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

.dsr-stress-card {
  min-width: 0;
  padding: 11px;
  border-radius: 8px;
  background: var(--panel);
}

.dsr-stress-card.is-warning {
  background: var(--coral-soft);
}

.dsr-stress-card strong,
.dsr-income-evidence strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: normal;
  word-break: keep-all;
  font-size: 17px;
}

.dsr-stress-card p,
.dsr-income-evidence p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.dsr-stress-formula {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dsr-stress-formula li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.dsr-stress-formula strong {
  color: var(--ink);
}

.dsr-income-evidence {
  margin-top: 10px;
  padding: 11px;
  border-radius: 8px;
  background: var(--mint-soft);
}

.dsr-stress-disclaimer {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.readiness-summary {
  margin-top: 12px;
}

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

.finance-risk-card {
  min-width: 0;
  min-height: 124px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.finance-risk-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.finance-risk-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.2;
}

.finance-risk-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.finance-risk-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.finance-risk-active {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.mortgage-quote-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.mortgage-quote-overview > div {
  min-width: 0;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mortgage-quote-overview span,
.mortgage-quote-overview small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.mortgage-quote-overview strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.mortgage-quote-overview small {
  margin-top: 4px;
  line-height: 1.35;
}

.mortgage-quote-editor {
  scroll-margin-top: 82px;
  margin-bottom: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mortgage-quote-editor summary {
  min-height: 48px;
  padding: 14px 2px;
  color: var(--mint-text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.mortgage-quote-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 2px 0 16px;
}

.mortgage-quote-form .compact-field,
.mortgage-quote-form .percent-input,
.mortgage-quote-form .month-input,
.mortgage-quote-form input,
.mortgage-quote-form select {
  min-width: 0;
}

.mortgage-quote-form .percent-input > input,
.mortgage-quote-form .month-input > input {
  width: auto;
}

.month-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.month-input > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.mortgage-quote-note {
  grid-column: span 2;
}

.mortgage-quote-form-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.mortgage-quote-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mortgage-quote-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
}

.mortgage-quote-card.is-selected {
  border-color: var(--mint);
  border-top-color: var(--mint-text);
  background: var(--mint-soft);
}

.mortgage-quote-card-head,
.mortgage-quote-card-actions,
.mortgage-simulator-head,
.mortgage-simulator-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mortgage-quote-card-head > div {
  min-width: 0;
}

.mortgage-quote-card h4,
.mortgage-simulator-head h4,
.mortgage-simulator-section h5 {
  margin: 0;
  overflow-wrap: anywhere;
}

.mortgage-quote-card h4 {
  font-size: 17px;
}

.mortgage-quote-product {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.mortgage-quote-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mortgage-quote-metrics,
.mortgage-simulation-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mortgage-quote-metrics div,
.mortgage-simulation-metrics div {
  min-width: 0;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.mortgage-quote-metrics dt,
.mortgage-simulation-metrics dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.mortgage-quote-metrics dd,
.mortgage-simulation-metrics dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 900;
}

.mortgage-quote-note-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.mortgage-quote-card-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.mortgage-quote-card-actions .danger-button {
  margin-left: auto;
}

.mortgage-simulator {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.mortgage-simulator-head {
  margin-bottom: 16px;
}

.mortgage-simulator-head .compact-field {
  width: min(360px, 100%);
}

.mortgage-simulator-head h4 {
  font-size: 19px;
}

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

.mortgage-simulator-section {
  min-width: 0;
  padding-top: 14px;
  border-top: 3px solid var(--violet);
}

.mortgage-simulator-section + .mortgage-simulator-section {
  border-top-color: var(--coral);
}

.mortgage-simulator-title h5 {
  font-size: 16px;
}

.mortgage-simulator-title span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.mortgage-simulator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mortgage-prepayment-strategy {
  grid-column: 1 / -1;
}

.mortgage-simulation-result {
  margin-top: 12px;
}

.mortgage-simulation-result .option-empty {
  margin: 0;
  padding: 16px 0;
}

.mortgage-simulation-result.is-warning dd {
  color: #b3261e;
}

.savings-target-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

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

.savings-target-card,
.savings-projection-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.savings-target-card {
  border-left: 4px solid var(--violet);
}

.savings-target-main {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.savings-target-warning,
.savings-projection-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.savings-target-good,
.savings-projection-target {
  border-left-color: var(--lime);
  background: var(--lime-soft);
}

.savings-target-card span,
.savings-projection-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.savings-target-card strong,
.savings-projection-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--ink);
  line-height: 1.15;
}

.savings-target-card strong {
  font-size: 22px;
}

.savings-projection-card strong {
  font-size: 20px;
}

.savings-target-card p,
.savings-projection-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.savings-good {
  color: var(--green) !important;
}

.savings-warning {
  color: var(--danger) !important;
}

.savings-progress-track {
  overflow: hidden;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: #eceff3;
}

.savings-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--violet));
}

.savings-ledger-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.savings-ledger-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.savings-ledger-card-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.savings-ledger-card-done {
  border-left-color: var(--lime);
  background: var(--lime-soft);
}

.savings-ledger-card span,
.savings-account-card span,
.savings-record-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.savings-ledger-card strong,
.savings-account-card strong,
.savings-record-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.savings-ledger-card p,
.savings-account-card p,
.savings-record-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.savings-ledger-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.savings-form {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.section-head-compact {
  align-items: start;
  margin-bottom: 0;
}

.section-head-compact h4,
.savings-ledger-lists h4 {
  margin: 0;
  font-size: 16px;
}

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

.savings-form-wide {
  grid-column: 1 / -1;
}

.savings-ledger-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.savings-account-list,
.savings-record-list {
  display: grid;
  gap: 10px;
}

.savings-account-card,
.savings-record-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

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

.savings-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: end;
}

.savings-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.savings-account-metrics,
.savings-record-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.savings-account-metrics div,
.savings-record-metrics div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel);
}

.savings-account-metrics dt,
.savings-record-metrics dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.savings-account-metrics dd,
.savings-record-metrics dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 900;
}

.savings-month-action {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-left: 5px solid var(--mint);
  border-radius: 8px;
  background: #f5f8ff;
}

.savings-month-action-copy > span,
.savings-subhead span,
.savings-month-progress span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.savings-month-action-copy > strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.savings-month-action-copy small {
  color: var(--ink-soft);
  font-size: 15px;
}

.savings-month-action-copy p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.savings-month-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.savings-month-progress strong {
  font-size: 18px;
}

.savings-month-actions {
  display: grid;
  gap: 8px;
  min-width: 130px;
}

.savings-trend-panel,
.savings-transfer-panel,
.savings-scenario-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.savings-subhead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.savings-subhead h4 {
  margin: 3px 0 0;
  font-size: 16px;
}

.savings-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.savings-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.savings-chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.savings-chart-legend .is-plan,
.savings-bar-pair .is-plan {
  background: #aeb8c7;
}

.savings-chart-legend .is-actual,
.savings-bar-pair .is-actual {
  background: var(--mint);
}

.savings-chart-legend .is-cumulative {
  border-radius: 999px;
  background: var(--violet);
}

#savingsTrendChart {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 14px;
}

.savings-bar-chart,
.savings-cumulative-chart {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.savings-bar-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-height: 210px;
}

.savings-bar-column {
  display: grid;
  grid-template-rows: 24px 1fr 20px;
  align-items: end;
  min-width: 0;
  text-align: center;
}

.savings-bar-value {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.savings-bar-pair {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  height: 140px;
  border-bottom: 1px solid var(--line);
}

.savings-bar-pair i {
  display: block;
  width: min(18px, 35%);
  min-height: 0;
  border-radius: 3px 3px 0 0;
}

.savings-bar-column > span {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.savings-cumulative-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.savings-cumulative-head span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.savings-cumulative-head strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.savings-cumulative-chart svg {
  display: block;
  width: 100%;
  height: 170px;
}

.savings-chart-axis {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

.savings-chart-line {
  fill: none;
  stroke: var(--violet);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.savings-chart-point {
  fill: var(--paper);
  stroke: var(--violet);
  stroke-width: 4;
}

.savings-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.savings-purpose-grid,
.savings-contribution-list,
.savings-transfer-list,
.savings-scenario-list {
  display: grid;
  gap: 8px;
}

.savings-purpose-item,
.savings-contribution-item,
.savings-transfer-item,
.savings-scenario-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.savings-purpose-item > div:first-child,
.savings-contribution-item,
.savings-contribution-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.savings-purpose-item strong,
.savings-contribution-item strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.savings-purpose-item span,
.savings-contribution-item span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.savings-purpose-item p {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 900;
}

.savings-contribution-item > div {
  align-items: end;
  flex-direction: column;
  gap: 2px;
}

.savings-transfer-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.savings-transfer-item.is-overdue {
  border-color: #f3a6b5;
  background: var(--coral-soft);
}

.savings-transfer-item.is-done {
  border-color: #b7db75;
  background: var(--lime-soft);
}

.savings-transfer-date {
  text-align: center;
}

.savings-transfer-date strong,
.savings-transfer-date span,
.savings-transfer-copy strong,
.savings-transfer-copy span {
  display: block;
}

.savings-transfer-date strong {
  font-size: 20px;
}

.savings-transfer-date span,
.savings-transfer-copy span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.savings-transfer-copy strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.savings-close-panel,
.savings-form-drawer {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.savings-close-panel {
  margin-top: 14px;
}

.savings-close-panel > summary,
.savings-form-drawer > summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 13px 44px 13px 14px;
  cursor: pointer;
  list-style: none;
}

.savings-close-panel > summary::-webkit-details-marker,
.savings-form-drawer > summary::-webkit-details-marker {
  display: none;
}

.savings-close-panel > summary::after,
.savings-form-drawer > summary::after {
  position: absolute;
  top: 50%;
  right: 16px;
  content: '+';
  color: var(--ink-soft);
  font-size: 22px;
  transform: translateY(-50%);
}

.savings-close-panel[open] > summary::after,
.savings-form-drawer[open] > summary::after {
  content: '-';
}

.savings-close-panel > summary span,
.savings-form-drawer > summary span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.savings-close-panel > summary strong,
.savings-form-drawer > summary strong {
  font-size: 15px;
}

.savings-close-tools {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 0 14px 12px;
}

.savings-close-rows {
  display: grid;
  gap: 8px;
  padding: 0 14px 12px;
}

.savings-close-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.savings-close-row strong,
.savings-close-row small {
  display: block;
}

.savings-close-row small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
}

.savings-close-panel > .primary-button {
  width: calc(100% - 28px);
  margin: 0 14px 14px;
}

.savings-form-drawer .savings-form {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}

.savings-scenario-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.savings-scenario-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.savings-scenario-card {
  border-left: 4px solid var(--mint);
}

.savings-scenario-card .savings-card-head > div > span,
.savings-scenario-card .savings-card-head > div > strong {
  display: block;
}

.savings-scenario-card .savings-card-head > div > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.savings-scenario-card .savings-card-head > div > strong {
  margin-top: 5px;
  font-size: 16px;
}

.savings-scenario-card.is-warning {
  border-left-color: var(--coral);
}

.savings-scenario-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
}

.savings-scenario-card dl div {
  padding: 8px;
  border-radius: 6px;
  background: var(--paper);
}

.savings-scenario-card dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
}

.savings-scenario-card dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
}

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

.savings-allocation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.savings-allocation-summary-item {
  min-width: 0;
  padding: 12px;
  border-left: 3px solid var(--ink-soft);
  background: var(--panel);
}

.savings-allocation-summary-item.is-allocated,
.savings-allocation-summary-item.is-done {
  border-left-color: var(--mint);
}

.savings-allocation-summary-item.is-available {
  border-left-color: var(--violet);
}

.savings-allocation-summary-item.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.savings-allocation-summary-item span,
.savings-allocation-summary-item small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.savings-allocation-summary-item strong {
  display: block;
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.savings-allocation-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-block: 1px solid var(--line);
}

.savings-allocation-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(210px, 1.3fr) minmax(140px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
}

.savings-emergency-config {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.savings-allocation-status {
  min-height: 20px;
  margin: 8px 0;
}

.savings-allocation-status.is-error {
  color: var(--danger);
}

.savings-allocation-accounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.savings-allocation-account {
  display: grid;
  grid-template-areas:
    "identity metrics"
    "allocations allocations";
  grid-template-columns: minmax(130px, 0.8fr) minmax(170px, 1.2fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.savings-allocation-account > div:first-child {
  grid-area: identity;
}

.savings-allocation-account > dl {
  grid-area: metrics;
}

.savings-allocation-account.is-warning {
  border-color: #f1b9b5;
  background: var(--coral-soft);
}

.savings-allocation-account > div > span,
.savings-allocation-account > div > strong {
  display: block;
  overflow-wrap: anywhere;
}

.savings-allocation-account > div > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.savings-allocation-account > div > strong {
  margin-top: 4px;
  font-size: 14px;
}

.savings-allocation-account dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.savings-allocation-account dl div {
  min-width: 0;
  padding: 7px;
  background: var(--panel);
}

.savings-allocation-account dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
}

.savings-allocation-account dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 900;
}

.savings-allocation-chips {
  grid-area: allocations;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.savings-allocation-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.savings-allocation-chips .icon-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 5px;
  border: 0;
  background: transparent;
}

.savings-goal-sources {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.savings-goal-allocate {
  width: 100%;
  margin-top: 10px;
}

.savings-goal-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--paper);
}

.savings-goal-card.is-done {
  border-left-color: var(--lime);
  background: var(--lime-soft);
}

.savings-goal-card.is-setup {
  border-left-color: var(--ink-soft);
  background: var(--panel);
}

.savings-goal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.savings-goal-head > div {
  min-width: 0;
}

.savings-goal-head span,
.irregular-cash-item span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.savings-goal-head strong,
.irregular-cash-item > div > strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.savings-goal-metrics,
.savings-close-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 0;
}

.savings-goal-metrics div,
.savings-close-summary div {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: var(--panel);
}

.savings-goal-metrics dt,
.savings-close-summary span,
.irregular-cash-item dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
}

.savings-goal-metrics dd,
.savings-close-summary strong,
.irregular-cash-item dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 900;
}

.savings-goal-editor {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.savings-goal-editor summary {
  padding: 11px 0 7px;
  cursor: pointer;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.savings-goal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.savings-goal-editor > .primary-button {
  width: 100%;
}

.savings-close-summary {
  margin: 0 14px 12px;
}

.savings-close-summary .is-warning {
  color: var(--danger);
  background: var(--coral-soft);
}

.savings-closing-list {
  display: grid;
  gap: 6px;
  padding: 0 14px 14px;
}

.savings-closing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: 8px;
  background: var(--paper);
}

.savings-closing-item.is-warning {
  border-left-color: var(--coral);
}

.savings-closing-item span,
.savings-closing-item strong {
  display: block;
  font-size: 11px;
}

.irregular-cash-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.irregular-cash-form {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(100px, 0.5fr) minmax(140px, 0.7fr) minmax(150px, 0.8fr);
  align-items: end;
  gap: 10px;
}

.irregular-confidence-field,
.irregular-cash-note {
  grid-column: span 2;
}

.irregular-confidence-field input {
  min-height: 40px;
  padding: 0;
}

.irregular-cash-form > .primary-button {
  grid-column: span 4;
}

.irregular-cash-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.irregular-cash-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.irregular-cash-item.is-expense {
  border-left-color: var(--coral);
}

.irregular-cash-item p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.irregular-cash-item dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.irregular-cash-item dl div {
  padding: 8px;
  border-radius: 6px;
  background: var(--panel);
}

.savings-mobile-actions {
  display: none;
}

.finance-summary div {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.schedule-panel {
  grid-column: 1 / -1;
}

.schedule-editor {
  display: grid;
  gap: 10px;
}

.schedule-integrity {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.schedule-integrity.is-valid {
  border-left: 4px solid var(--mint-strong);
}

.schedule-integrity.is-warning {
  border-left: 4px solid var(--amber-strong);
}

.schedule-integrity-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.schedule-integrity-head div {
  display: grid;
  gap: 3px;
}

.schedule-integrity-head span,
.schedule-integrity dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.schedule-integrity-head strong {
  font-size: 18px;
}

.schedule-integrity-head p,
.schedule-integrity-note,
.schedule-integrity ul {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.schedule-integrity dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.schedule-integrity dl div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.schedule-integrity dl div:last-child {
  border-right: 0;
}

.schedule-integrity dd {
  margin: 0;
  font-weight: 900;
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 1fr) minmax(150px, 0.35fr) minmax(150px, 0.35fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.schedule-row-title {
  min-width: 0;
}

.schedule-row-title strong {
  display: block;
  font-size: 15px;
}

.schedule-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.schedule-override-pill {
  color: var(--amber-ink);
}

.schedule-row-source {
  display: grid;
  min-width: 0;
  gap: 4px;
  align-self: stretch;
  align-content: center;
}

.schedule-row-source > span,
.schedule-row-source small {
  overflow-wrap: break-word;
  word-break: keep-all;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.schedule-row-source small {
  font-weight: 600;
}

.schedule-source-button {
  justify-self: start;
  min-height: 36px;
  padding: 6px 10px;
}

.cashflow-panel {
  grid-column: 1 / -1;
}

.scenario-panel {
  grid-column: 1 / -1;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.scenario-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.scenario-card h4 {
  margin: 0;
  font-size: 18px;
}

.scenario-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.scenario-metrics {
  display: grid;
  gap: 8px;
  margin: 0;
}

.scenario-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.scenario-metrics dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.scenario-metrics dd {
  margin: 0;
  text-align: right;
  font-weight: 900;
}

.scenario-gap.is-warning {
  color: #b3261e;
}

.scenario-cash-path,
.scenario-dsr-path {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.scenario-path-head,
.scenario-dsr-path > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scenario-path-head span,
.scenario-dsr-path span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.scenario-path-head strong,
.scenario-dsr-path strong {
  text-align: right;
  font-size: 16px;
}

.scenario-cash-path dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.scenario-cash-path dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}

.scenario-cash-path dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.scenario-cash-path dd {
  margin: 0;
  text-align: right;
  font-weight: 900;
}

.scenario-cash-path .is-subtotal {
  margin-top: 2px;
  border-top: 1px dashed var(--line-strong);
}

.scenario-cash-path .is-result {
  margin: 2px -5px -4px;
  padding: 10px 5px 4px;
  border-top: 2px solid var(--mint);
}

.scenario-cash-path .is-result.is-warning dd,
.scenario-cash-path .is-result.is-warning dt,
.scenario-dsr-path.is-warning strong {
  color: #b3261e;
}

.scenario-dsr-path.is-review {
  border-color: #d5a21a;
  background: #fffaf0;
}

.scenario-dsr-path p {
  font-size: 12px;
}

.saved-finance-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.saved-finance-scenario-head h4 {
  margin: 2px 0 0;
  font-size: 17px;
}

.saved-scenario-grid {
  margin-top: 12px;
}

.saved-scenario-card {
  border-top: 3px solid var(--mint);
}

.saved-scenario-card.is-warning {
  border-top-color: var(--coral);
}

.saved-scenario-card .ghost-button {
  align-self: end;
}

.scenario-delta-table-wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.scenario-delta-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

.scenario-delta-table th,
.scenario-delta-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.scenario-delta-table th:first-child {
  text-align: left;
}

.scenario-delta-table thead th {
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 11px;
}

.scenario-delta-table tbody tr:last-child th,
.scenario-delta-table tbody tr:last-child td {
  border-bottom: 0;
}

.scenario-delta-table .is-base {
  background: var(--mint-soft);
}

.cashflow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cashflow-summary div {
  min-width: 0;
  min-height: 116px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cashflow-summary span,
.cashflow-amount span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.cashflow-summary strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 19px;
  line-height: 1.2;
}

.cashflow-summary p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.cashflow-chart {
  display: grid;
  gap: 10px;
}

.cash-calendar {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.cash-actual-workspace {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}

.cash-actual-workspace h4 {
  margin: 2px 0 0;
  font-size: 18px;
}

.cash-actual-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cash-actual-summary div {
  min-width: 0;
  padding: 13px;
  border-left: 3px solid var(--mint);
  background: var(--panel);
}

.cash-actual-summary span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.cash-actual-summary strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.cash-actual-summary small {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.cash-actual-summary .is-warning {
  border-left-color: var(--coral);
}

.cash-plan-reconciliation {
  display: grid;
  gap: 8px;
}

.cash-funding-history {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cash-funding-history-head {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
}

.cash-funding-history-head h5 {
  margin: 2px 0 0;
  font-size: 16px;
}

.cash-funding-history-head > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.cash-funding-history-list {
  display: grid;
}

.cash-funding-history-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(105px, 0.8fr));
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 4px;
  border-top: 1px solid var(--line);
}

.cash-funding-history-row:first-child {
  border-top: 0;
}

.cash-funding-history-row > div {
  min-width: 0;
}

.cash-funding-history-row span,
.cash-funding-history-row small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.cash-funding-history-row strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.cash-funding-history-source strong {
  margin-top: 0;
  font-size: 16px;
}

.cash-funding-history-source span {
  margin-top: 4px;
}

.cash-funding-history-row .is-warning strong {
  color: var(--danger);
}

.cash-funding-history-row .is-done strong {
  color: var(--mint-strong);
}

.cash-plan-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(110px, 0.7fr)) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  background: var(--panel);
}

.cash-plan-row.is-warning,
.cash-plan-row.is-over {
  border-left-color: var(--coral);
}

.cash-plan-row.is-pending {
  border-left-color: #d5a31b;
}

.cash-plan-row.is-unlinked {
  border-left-color: var(--ink-soft);
}

.cash-plan-row > div {
  min-width: 0;
}

.cash-plan-row span,
.cash-plan-row small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.cash-plan-row strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.cash-plan-row small {
  margin-top: 3px;
}

.cash-plan-actions {
  display: grid;
  gap: 6px;
}

.cash-plan-actions button {
  min-width: 92px;
}

.cash-actual-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 0.7fr)) minmax(200px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cash-actual-drawer {
  border: 1px solid var(--line);
  background: var(--panel);
}

.cash-actual-drawer > summary {
  padding: 13px 15px;
  cursor: pointer;
  font-weight: 900;
}

.cash-actual-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
}

.cash-actual-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 15px;
}

.cash-actual-plan-field,
.cash-actual-description-field {
  grid-column: span 2;
}

.cash-actual-note {
  grid-column: span 3;
}

.cash-actual-proof-field {
  grid-column: span 2;
}

.cash-actual-proof-preview {
  display: flex;
  min-height: 44px;
  gap: 10px;
  align-items: center;
  grid-column: span 2;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 12px;
}

.cash-actual-proof-preview:empty {
  display: none;
}

.cash-actual-proof-preview img {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cash-actual-proof-preview a,
.cash-actual-proof-preview strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cash-actual-proof-preview button {
  flex: 0 0 auto;
  margin-left: auto;
}

.cash-actual-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cash-actual-form-actions button {
  flex: 1 1 auto;
}

.cash-actual-list {
  display: grid;
  gap: 8px;
  scroll-margin-top: 92px;
}

.cash-actual-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cash-actual-group.is-unlinked {
  border-left: 4px solid var(--ink-soft);
}

.cash-actual-group-head {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(460px, 1.7fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--panel-strong);
}

.cash-actual-group-title,
.cash-actual-group-metrics,
.cash-actual-group-metrics > div {
  min-width: 0;
}

.cash-actual-group-title > span,
.cash-actual-group-metrics dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.cash-actual-group-title > strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.cash-actual-group-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 0;
}

.cash-actual-group-metrics > div {
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

.cash-actual-group-metrics > div.is-warning {
  border-left-color: var(--coral);
}

.cash-actual-group-metrics > div.is-done {
  border-left-color: var(--mint);
}

.cash-actual-group-metrics dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.cash-actual-add-source {
  min-width: 150px;
  min-height: 44px;
}

.cash-actual-group-entries .cash-actual-row {
  border: 0;
  border-top: 1px solid var(--line);
}

.cash-actual-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(125px, 0.7fr) minmax(100px, 0.6fr) minmax(170px, 1fr) minmax(180px, auto);
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.cash-actual-row > div {
  min-width: 0;
}

.cash-actual-row span {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.cash-actual-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 5px;
}

.cash-actual-row-head time {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.cash-actual-row-head .status-chip {
  display: inline-flex;
  color: var(--teal-deep);
}

.cash-actual-row-head .cash-payment-status.is-planned {
  color: #7a5200;
  background: var(--amber-soft);
}

.cash-actual-row-head .cash-payment-status.is-paid {
  color: var(--teal-deep);
  background: var(--mint-soft);
}

.cash-actual-row strong,
.cash-actual-row p {
  display: block;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.cash-actual-row p {
  color: var(--ink-soft);
  font-size: 12px;
}

.cash-actual-amount {
  white-space: nowrap;
  font-size: 16px;
}

.cash-funding-source {
  overflow-wrap: anywhere;
}

.cash-actual-detail .audit-trail {
  margin-top: 7px;
}

.cash-proof-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 900;
}

.cash-proof-link img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cash-proof-missing {
  color: #a53a22 !important;
  font-weight: 900;
}

.cash-actual-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.cash-actual-actions button {
  min-width: 56px;
  white-space: nowrap;
}

.cash-actual-gap.is-warning {
  color: #b3261e;
}

.cash-calendar-year {
  display: grid;
  gap: 10px;
}

.cash-calendar-year h4 {
  margin: 0;
  font-size: 16px;
}

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

.cash-calendar-tile {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 150px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cash-calendar-tile > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.cash-calendar-tile strong {
  font-size: 15px;
}

.cash-calendar-tile span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.cash-calendar-tile p {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.cash-calendar-tile ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
  list-style: none;
}

.cashflow-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(140px, 0.22fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.cashflow-month {
  color: var(--ink);
  font-weight: 900;
}

.cashflow-body {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.cashflow-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf0;
}

.cashflow-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--violet));
}

.cashflow-items {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cashflow-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 13px;
}

.cashflow-items strong {
  flex-shrink: 0;
  color: var(--ink);
}

.cashflow-amount {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.cashflow-amount strong {
  color: var(--ink);
  font-size: 18px;
}

.fine-print {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.info-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.info-brief,
.notice-panel,
.unit-panel,
.unit-supply-panel,
.asset-panel,
.document-panel,
.document-list-panel {
  min-width: 0;
}

.asset-panel {
  grid-row: span 3;
}

.document-panel,
.document-list-panel {
  grid-column: 1 / -1;
}

.document-check-panel {
  grid-column: 1 / -1;
}

.info-fact-grid,
.notice-stack {
  display: grid;
  gap: 10px;
  margin: 0;
}

.info-fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-fact-grid div,
.notice-stack div {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.info-fact-grid dt,
.notice-stack span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.info-fact-grid dd,
.notice-stack strong {
  display: block;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: keep-all;
}

.info-address {
  grid-column: 1 / -1;
}

.info-brief-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

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

.document-check-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
}

.document-check-item.is-done {
  border-left-color: var(--mint);
  background: var(--panel);
}

.document-check-item strong {
  display: block;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.document-check-item p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: keep-all;
}

.document-form {
  display: grid;
  grid-template-columns: 0.75fr 1fr 1fr;
  gap: 12px;
}

.document-form .span-2 {
  grid-column: span 2;
}

.document-form small {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.document-form small.is-error {
  color: var(--danger);
}

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

.document-summary div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.document-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.document-summary dd {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 900;
}

.document-list {
  display: grid;
  gap: 12px;
}

.document-card .prep-card-title p {
  overflow-wrap: anywhere;
}

.document-attachment-meta {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.document-reference-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 8px 0 0;
}

.document-reference-meta div {
  display: flex;
  gap: 6px;
}

.document-reference-meta dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.document-reference-meta dd {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}

.document-preview {
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.document-preview.is-image {
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
}

.document-preview.is-image img {
  width: 148px;
  height: 104px;
  object-fit: cover;
  background: var(--line);
}

.document-preview.is-image span {
  padding: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.document-preview.is-file {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.document-preview.is-file span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 900;
}

.document-preview.is-file img {
  width: 88px;
  height: 72px;
  border-radius: 6px;
  background: var(--paper);
  object-fit: contain;
}

.document-preview.is-file strong {
  overflow-wrap: anywhere;
}

.document-preview.is-file em {
  color: var(--ink-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.unit-table-wrap {
  overflow-x: auto;
}

.unit-supply-panel {
  grid-column: 1 / -1;
}

.unit-supply-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
}

.unit-supply-form {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 10px;
}

.unit-supply-fields {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.unit-supply-fields > * {
  min-width: 0;
}

.unit-supply-submit {
  width: auto;
  min-width: 88px;
  min-height: 48px;
  padding-inline: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.unit-supply-source {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  word-break: keep-all;
}

.unit-supply-result {
  display: grid;
  min-width: 0;
  min-height: 132px;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.unit-supply-result > span,
.unit-supply-result-head span,
.unit-supply-result-facts dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.unit-supply-result > strong {
  font-size: 25px;
  line-height: 1.2;
}

.unit-supply-result > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}

.unit-supply-result.is-general {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.unit-supply-result.is-special {
  border-left-color: var(--violet);
  background: var(--violet-soft);
}

.unit-supply-result.is-type-only {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.unit-supply-result.is-missing {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.unit-supply-result-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.unit-supply-result-head div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.unit-supply-result-head strong {
  font-size: 22px;
  line-height: 1.2;
}

.unit-supply-status {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink) !important;
  background: var(--paper);
}

.unit-supply-result-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
}

.unit-supply-result-facts div {
  min-width: 0;
}

.unit-supply-result-facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  word-break: keep-all;
}

@media (max-width: 760px) {
  .unit-supply-layout {
    grid-template-columns: 1fr;
  }

  .unit-supply-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-supply-submit {
    grid-column: 1 / -1;
    width: 100%;
  }

  .unit-supply-result-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.unit-count-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 13px;
}

.unit-count-table th,
.unit-count-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}

.unit-count-table th {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.unit-count-table td:nth-child(3) {
  text-align: right;
  font-weight: 900;
}

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

.info-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-card {
  margin: 0;
  overflow: hidden;
}

.image-card a {
  display: block;
  color: inherit;
}

.image-card.wide {
  grid-column: 1 / -1;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
}

.image-card figcaption {
  padding: 12px 14px;
  color: var(--ink-soft);
  font-size: 13px;
}

.movein-board {
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.prep-editor {
  display: grid;
  min-width: 0;
  gap: 4px;
}

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

.prep-form .span-2 {
  grid-column: 1 / -1;
}

.prep-form small {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-form small.is-error {
  color: var(--danger);
}

.prep-finance-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  font-weight: 900;
}

.prep-finance-toggle input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--mint);
}

.prep-finance-toggle span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prep-candidate-editor {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-candidate-editor-head,
.prep-candidate-field-head,
.prep-candidate-field-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prep-candidate-editor-head,
.prep-candidate-field-head {
  justify-content: space-between;
}

.prep-candidate-editor-head span,
.prep-candidate-field-head strong {
  color: var(--ink);
  font-weight: 900;
}

.prep-candidate-fields {
  display: grid;
  gap: 10px;
}

.prep-candidate-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--paper);
  font-weight: 800;
}

.prep-candidate-field {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-candidate-primary {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--ink);
}

.prep-candidate-field-actions {
  flex-shrink: 0;
}

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

.prep-candidate-grid .span-2 {
  grid-column: 1 / -1;
}

.prep-candidate-image-field {
  display: grid;
  gap: 8px;
}

.prep-candidate-image-field > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-candidate-image-gallery {
  display: grid;
  gap: 8px;
}

.prep-candidate-image-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 12px;
  font-weight: 800;
}

.prep-candidate-image-gallery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.prep-candidate-field .prep-candidate-image-gallery-list {
  grid-template-columns: 1fr;
}

.prep-candidate-image-tile {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-candidate-image-tile.is-primary {
  border-color: var(--mint-text);
  background: var(--mint-soft);
}

.prep-candidate-image-tile > a {
  display: block;
  overflow: hidden;
  background: #f4f6f8;
}

.prep-candidate-image-tile img {
  width: 78px;
  height: 100%;
  min-height: 96px;
  object-fit: contain;
}

.prep-candidate-image-tile > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 8px;
}

.prep-candidate-image-tile strong,
.prep-candidate-image-tile span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.prep-candidate-image-tile span {
  color: var(--ink-soft);
  font-weight: 800;
}

.prep-candidate-image-tile em {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--mint-text);
  background: var(--panel);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.prep-candidate-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.prep-candidate-image-actions .text-button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.prep-candidate-image-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
}

.prep-candidate-image-preview img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #f4f6f8;
}

.prep-candidate-image-preview span {
  min-width: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-overview,
.prep-timeline-panel,
.prep-list-panel {
  min-width: 0;
}

.prep-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.prep-summary-grid div {
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-summary-grid dt {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.prep-summary-grid dd {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
}

.prep-finance-summary {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.prep-upcoming {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.prep-upcoming h4 {
  margin: 0;
  font-size: 16px;
}

.prep-upcoming ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prep-upcoming li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.prep-upcoming span,
.prep-upcoming em {
  color: var(--ink-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.prep-upcoming strong {
  overflow-wrap: anywhere;
}

.prep-timeline-panel {
  grid-column: 2;
}

.prep-timeline {
  display: grid;
  gap: 14px;
}

.prep-timeline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.prep-timeline-summary div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-timeline-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-timeline-summary dd {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.prep-timeline-groups {
  display: grid;
  gap: 12px;
}

.prep-timeline-month {
  display: grid;
  gap: 8px;
}

.prep-timeline-month h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.prep-timeline-month ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prep-timeline-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.prep-timeline-overdue {
  border-left-color: var(--coral);
}

.prep-timeline-soon {
  border-left-color: var(--amber);
}

.prep-timeline-done {
  opacity: 0.72;
}

.prep-timeline-date,
.prep-timeline-title,
.prep-timeline-status {
  display: grid;
  gap: 4px;
}

.prep-timeline-date strong {
  font-size: 22px;
  line-height: 1;
}

.prep-timeline-date span,
.prep-timeline-title span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-timeline-title strong {
  overflow-wrap: anywhere;
}

.prep-timeline-status {
  justify-items: end;
}

.prep-list-panel {
  grid-column: 1 / -1;
}

.prep-list-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.prep-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  flex: 1;
  gap: 10px;
}

.prep-view-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(56px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-view-button {
  min-height: 38px;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 12px;
  color: var(--ink-soft);
  background: transparent;
  font-weight: 900;
}

.prep-view-button:first-child {
  border-left: 0;
}

.prep-view-button.is-active {
  color: var(--ink);
  background: var(--mint-soft);
}

.prep-items {
  display: grid;
  gap: 12px;
}

.prep-list-rows {
  display: grid;
  gap: 8px;
}

.prep-list-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(88px, 0.65fr)) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-list-main,
.prep-list-cell {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.prep-list-main strong,
.prep-list-cell strong {
  overflow-wrap: anywhere;
}

.prep-list-main span,
.prep-list-cell span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-list-candidate strong {
  font-size: 13px;
}

.prep-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.prep-list-result-summary {
  margin: -2px 0 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.prep-list-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.prep-list-signals span {
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
}

.prep-list-signals span.is-warning {
  border-color: var(--amber);
  color: var(--amber-text);
  background: var(--amber-soft);
}

.prep-list-open {
  min-height: 40px;
  white-space: nowrap;
}

.prep-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
}

.prep-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-card-head,
.prep-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.prep-card-title {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.prep-card-title h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: balance;
  word-break: keep-all;
}

.prep-card-title p,
.prep-note {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
  text-wrap: pretty;
  word-break: keep-all;
}

.audit-trail {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 6px;
}

.audit-trail > span {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
}

.actor-chip {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
}

.actor-chip span,
.avatar-label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.audit-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.audit-summary-avatars {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
}

.audit-summary-avatars .avatar-image + .avatar-image {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--paper);
}

.audit-summary-text {
  min-width: 0;
  line-height: 1.35;
  text-wrap: pretty;
  word-break: keep-all;
}

.document-audit-summary {
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 3px 5px;
}

.document-audit-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.document-audit-avatar + .document-audit-avatar {
  margin-left: -7px;
}

.document-audit-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prep-image-preview {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: center;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
}

.prep-image-preview img {
  width: 164px;
  height: 112px;
  object-fit: contain;
  object-position: center;
  background: var(--panel);
}

.prep-image-preview span {
  padding: 12px;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.prep-existing-image-preview {
  margin-top: 8px;
}

.prep-existing-image-preview[hidden] {
  display: none;
}

.prep-editor-image-preview {
  grid-template-columns: 112px minmax(0, 1fr);
  max-width: 560px;
}

.prep-editor-image-preview img {
  width: 112px;
}

.prep-image-file-picker {
  flex-wrap: wrap;
}

.prep-image-file-picker .file-picker-name {
  display: flex;
  flex: 1 1 120px;
  align-items: center;
  overflow: visible;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.prep-image-preview.is-load-error {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 76px;
  border-style: dashed;
  background: var(--amber-soft);
  cursor: default;
}

.prep-image-preview.is-load-error::before {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  justify-self: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--amber-text);
  background: var(--paper);
  content: '!';
  font-weight: 900;
}

.prep-image-preview.is-load-error img {
  display: none;
}

.prep-card-actions {
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 8px;
}

.text-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 800;
}

.text-button.danger {
  color: #b3261e;
}

.prep-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prep-meta div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--paper);
}

.prep-meta dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-meta dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.prep-link {
  color: var(--mint-text);
  font-weight: 900;
  text-decoration: none;
}

.prep-link:hover {
  text-decoration: underline;
}

.prep-candidate-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mint-soft);
}

.prep-candidate-summary-image,
.prep-model-image,
.prep-list-candidate-image {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-candidate-summary-image {
  width: 56px;
  height: 56px;
}

.prep-model-image,
.prep-list-candidate-image {
  width: 48px;
  height: 48px;
}

.prep-candidate-summary-image img,
.prep-model-image img,
.prep-list-candidate-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prep-candidate-summary div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.prep-candidate-summary span:first-child {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.prep-candidate-summary strong {
  overflow-wrap: anywhere;
}

.prep-models {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-model-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.prep-model-row:first-child {
  border-top: 0;
}

.prep-model-row.is-primary {
  background: var(--mint-soft);
}

.prep-model-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.prep-model-title {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.prep-model-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prep-model-badges {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.prep-model-main em {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.prep-model-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.prep-model-meta div {
  min-width: 0;
}

.prep-model-meta dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.prep-model-meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.prep-model-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.prep-model-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prep-model-gallery-thumb {
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-model-gallery-thumb.is-primary {
  border-color: var(--mint-text);
}

.prep-model-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prep-compare-panel {
  grid-column: 1 / -1;
}

.prep-compare-list {
  display: grid;
  gap: 14px;
}

.prep-compare-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-compare-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.prep-compare-head h4 {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.25;
}

.prep-compare-head dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
}

.prep-compare-head dl div {
  padding: 10px;
  border-radius: 8px;
  background: var(--paper);
}

.prep-compare-head dt,
.prep-compare-cell span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.prep-compare-head dd {
  margin: 4px 0 0;
  font-weight: 900;
}

.prep-compare-execution {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding-block: 10px;
  border-block: 1px solid var(--line);
}

.prep-compare-execution > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.prep-compare-execution > div > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.prep-compare-execution strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.prep-compare-execution .ghost-button {
  min-height: 40px;
  white-space: nowrap;
}

.prep-compare-rows {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-compare-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "model model model"
    "price vendor status"
    "actions actions actions";
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.prep-compare-row:first-child {
  border-top: 0;
}

.prep-compare-row.is-primary {
  background: var(--mint-soft);
}

.prep-compare-model {
  display: flex;
  grid-area: model;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.prep-compare-cell.is-price {
  grid-area: price;
}

.prep-compare-cell.is-vendor {
  grid-area: vendor;
}

.prep-compare-cell.is-status {
  grid-area: status;
}

.prep-compare-model div,
.prep-compare-cell {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.prep-compare-model strong,
.prep-compare-cell strong {
  overflow-wrap: anywhere;
}

.prep-compare-model span,
.prep-compare-cell em,
.prep-compare-muted {
  color: var(--ink-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.prep-compare-image {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-compare-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prep-compare-actions {
  display: flex;
  grid-area: actions;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.prep-compare-confirmed {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.prep-list-candidate-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.prep-list-candidate-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prep-tag,
.status-pill {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.prep-tag {
  color: var(--violet-text);
  background: var(--violet-soft);
}

.status-pill {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.status-pill.status-review {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.status-pill.status-planned {
  color: var(--violet-text);
  background: var(--violet-soft);
}

.status-pill.status-active {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.status-pill.status-excluded {
  color: #6b7280;
  background: #eef0f2;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    min-height: auto;
  }

  .tab-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .hero-panel,
  .content-grid,
  .finance-layout,
  .info-workspace,
  .movein-grid,
  .movein-board,
  .user-admin-layout,
  .cashflow-panel,
  .scenario-panel,
  .option-manager-panel,
  .state-library-panel,
  .schedule-panel,
  .document-panel,
  .document-list-panel,
  .prep-timeline-panel,
  .prep-list-panel {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .planner-stage {
    padding: 18px;
  }

  .hero-metrics,
  .dashboard-grid,
  .image-grid,
  .info-fact-grid,
  .info-image-grid,
  .finance-controls,
  .finance-control-group,
  .cashflow-summary,
  .cash-actual-summary,
  .savings-target-grid,
  .savings-projection-grid,
  .savings-ledger-summary,
  .savings-ledger-workspace,
  .savings-form-grid,
  .savings-ledger-lists,
  .savings-account-metrics,
  .savings-record-metrics,
  .cash-calendar-grid,
  .scenario-grid,
  .document-form,
  .document-summary,
  .document-checklist,
  .option-status-summary,
  .option-decision-head,
  .dashboard-action-item,
  .dashboard-risk-list,
  .dashboard-readiness-grid,
  .payment-readiness-summary,
  .payment-readiness-row,
  .recent-change-item,
  .finance-risk-grid,
  .prep-summary-grid,
  .prep-timeline-summary,
  .prep-timeline-item,
  .prep-candidate-grid,
  .prep-candidate-image-gallery-list,
  .prep-filter-grid,
  .prep-list-row,
  .prep-compare-head dl,
  .prep-compare-row,
  .prep-meta,
  .prep-model-meta,
  .prep-form,
  .user-ops-summary,
  .state-save-grid,
  .state-share-row,
  .saved-state-controls,
  .saved-state-actions,
  .saved-state-preview dl,
  .schedule-row,
  .user-card-grid,
  .user-password-row,
  .backup-actions,
  .ops-status-grid,
  .backup-coverage-grid,
  .upload-audit-summary {
    grid-template-columns: 1fr;
  }

  .schedule-integrity-head {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-integrity dl {
    grid-template-columns: 1fr;
  }

  .schedule-integrity dl div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .schedule-integrity dl div:last-child {
    border-bottom: 0;
  }

  .backup-coverage-grid > div + div,
  .upload-audit-summary > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .upload-audit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .attachment-center-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .attachment-center-toolbar p {
    margin: 0;
    text-align: left;
  }

  .attachment-center-item {
    grid-template-columns: 1fr;
  }

  .attachment-center-actions {
    justify-content: flex-end;
  }

  .attachment-center-actions .icon-button {
    width: 44px;
    height: 44px;
  }

  .upload-audit-actions button {
    min-height: 44px;
    width: 100%;
  }

  .remote-change-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .remote-change-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-change-actions > :only-child {
    grid-column: 1 / -1;
  }

  .remote-change-actions button {
    min-height: 44px;
  }

  .collaboration-notice {
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
  }

  .tab-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    grid-auto-flow: column;
    grid-auto-columns: minmax(88px, 1fr);
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -18px;
    padding: 10px 18px;
    background: #111827;
    scrollbar-width: thin;
  }

  .primary-button,
  .ghost-button,
  .tab-button,
  .icon-button {
    min-height: 44px;
  }

  .tab-button {
    padding: 0 10px;
    white-space: nowrap;
    text-align: center;
  }

  .icon-button {
    width: 44px;
  }

  .document-form .span-2 {
    grid-column: 1 / -1;
  }

  .saved-state-item {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 18px;
  }

  .hero-copy h2 {
    font-size: 28px;
  }

  .section-head,
  .cashflow-row,
  .prep-list-toolbar,
  .user-card-head,
  .user-actions,
  .prep-card-head,
  .prep-candidate-editor-head,
  .prep-candidate-field-head,
  .prep-model-main,
  .prep-compare-head,
  .prep-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .prep-image-preview,
  .document-preview.is-image {
    grid-template-columns: 1fr;
  }

  .prep-image-preview img,
  .document-preview.is-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  #panel-movein.is-active {
    padding-bottom: 72px;
  }

  .prep-list-add {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    min-width: 112px;
    box-shadow: 0 14px 30px rgba(23, 34, 29, 0.18);
  }

  .prep-view-toggle {
    width: 100%;
  }

  .prep-list-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .option-board-tools {
    justify-content: stretch;
  }

  .option-board-tools .select-field {
    width: 100%;
  }

  .prep-compare-actions {
    justify-content: flex-start;
  }

  .prep-compare-actions .text-button {
    min-height: 44px;
  }

  .prep-compare-execution {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .prep-compare-row {
    grid-template-areas:
      "model"
      "price"
      "vendor"
      "status"
      "actions";
  }

  .prep-compare-execution .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .cashflow-row {
    display: flex;
  }

  .cashflow-body,
  .cashflow-amount {
    width: 100%;
  }

  .cashflow-amount {
    justify-items: start;
    text-align: left;
  }

  .cashflow-items li {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .prep-upcoming li {
    grid-template-columns: 1fr;
  }

  .prep-timeline-status {
    justify-items: start;
  }

  .prep-filter-label {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1000px) {
  .savings-allocation-workspace,
  .savings-allocation-account {
    grid-template-columns: 1fr;
  }

  .savings-allocation-account {
    grid-template-areas:
      "identity"
      "metrics"
      "allocations";
  }

  .savings-allocation-accounts {
    grid-template-columns: 1fr;
  }

  .savings-month-action {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  }

  .savings-month-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #savingsTrendChart {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #panel-finance.is-active {
    padding-bottom: 86px;
  }

  .savings-manager-panel {
    padding: 14px;
  }

  .savings-manager-panel > .section-head {
    margin-bottom: 10px;
  }

  .savings-month-action {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .savings-month-action-copy > strong {
    font-size: 24px;
  }

  .savings-month-action-copy small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }

  .savings-month-actions {
    display: none;
  }

  .savings-ledger-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .savings-allocation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-allocation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-allocation-form > .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .savings-emergency-config {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .savings-allocation-form input,
  .savings-allocation-form select,
  .savings-allocation-form button,
  .savings-emergency-config input,
  .savings-emergency-config button {
    min-height: 44px;
  }

  .savings-ledger-card {
    min-height: 116px;
    padding: 10px;
  }

  .savings-ledger-card strong {
    margin-top: 6px;
    font-size: 16px;
  }

  .savings-ledger-card p {
    margin-top: 6px;
    font-size: 10px;
  }

  .savings-subhead {
    align-items: start;
    flex-direction: column;
  }

  .savings-chart-legend {
    gap: 9px;
  }

  #savingsTrendChart,
  .savings-insight-grid,
  .savings-ledger-workspace,
  .savings-ledger-lists,
  .savings-scenario-list {
    grid-template-columns: 1fr;
  }

  .savings-bar-chart {
    gap: 4px;
    min-height: 178px;
    padding: 8px;
  }

  .savings-bar-column {
    grid-template-rows: 1fr 20px;
  }

  .savings-bar-value {
    display: none;
  }

  .savings-bar-pair {
    height: 132px;
  }

  .savings-cumulative-chart svg {
    height: 130px;
  }

  .savings-insight-grid {
    gap: 14px;
  }

  .savings-transfer-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .savings-transfer-item > .text-button {
    grid-column: 2 / -1;
    justify-self: stretch;
  }

  .savings-close-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .savings-close-row {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 8px;
  }

  .savings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-account-metrics,
  .savings-record-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .savings-account-metrics div,
  .savings-record-metrics div {
    padding: 7px;
  }

  .savings-account-metrics dd,
  .savings-record-metrics dd {
    font-size: 11px;
  }

  .savings-account-card,
  .savings-record-card {
    padding: 11px;
  }

  .savings-account-card p,
  .savings-record-card p {
    display: none;
  }

  .savings-scenario-form {
    grid-template-columns: 1fr;
  }

  .savings-goal-list,
  .irregular-cash-form,
  .irregular-cash-item {
    grid-template-columns: 1fr;
  }

  .savings-goal-metrics,
  .savings-close-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-goal-fields {
    grid-template-columns: 1fr;
  }

  .savings-goal-head,
  .savings-closing-item {
    align-items: start;
    flex-direction: column;
  }

  .irregular-confidence-field,
  .irregular-cash-note,
  .irregular-cash-form > .primary-button {
    grid-column: auto;
  }

  .irregular-cash-item dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .irregular-cash-item > .text-button {
    width: 100%;
  }

  .savings-mobile-actions {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }
}

/* v2.14 운영 도구형 UI 재정리 */
body {
  background: var(--page);
}

.app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
  background: var(--page);
}

.sidebar {
  gap: 18px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.brand-lockup {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: var(--ink);
}

.brand-lockup h1 {
  font-size: 20px;
}

.sidebar .eyebrow,
.eyebrow {
  color: var(--mint-text);
}

.tab-nav {
  gap: 6px;
}

.tab-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: transparent;
  font-size: 14px;
}

.tab-button:hover:not(.is-active) {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

.tab-button.is-active {
  color: #ffffff;
  background: var(--ink);
}

.sidebar-foot {
  gap: 6px;
}

.sidebar-foot .ghost-button,
.sidebar-foot .version,
.sidebar-foot .user-chip,
.sidebar-foot .save-status-chip {
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel);
}

.version,
.user-chip,
.save-status-chip {
  border-radius: var(--radius);
  font-size: 12px;
}

.planner-stage {
  max-width: 1360px;
  gap: 18px;
  overflow-x: clip;
  padding: 22px 24px 32px;
}

.tab-panel,
.dashboard-grid,
.content-grid,
.finance-layout,
.option-layout,
.movein-board,
.info-workspace,
.user-admin-layout {
  min-width: 0;
}

.hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 14px;
}

.hero-copy,
.surface-panel,
.feature-card,
.image-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.hero-copy {
  min-height: 120px;
  padding: 18px 20px;
}

.hero-copy h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.hero-copy p {
  max-width: 760px;
  line-height: 1.55;
}

.hero-metrics {
  gap: 8px;
}

.hero-metrics div {
  min-height: 120px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.hero-metrics dt,
.finance-summary dt {
  font-weight: 800;
}

.hero-metrics dd {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.surface-panel,
.feature-card {
  padding: 18px;
}

.surface-panel h3,
.feature-card h3 {
  font-size: 20px;
}

.feature-card {
  min-height: 146px;
  background: var(--paper);
}

.feature-card p {
  font-size: 14px;
  line-height: 1.55;
}

.accent-coral {
  border-color: #fecdd3;
  background: var(--coral-soft);
}

.accent-lime {
  border-color: #d9ed9d;
  background: var(--lime-soft);
}

.accent-savings {
  border-color: #c7d2fe;
  background: var(--violet-soft);
}

.dashboard-grid .feature-card.accent-savings {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
}

.dashboard-grid .feature-card.accent-savings .eyebrow {
  grid-column: 1 / -1;
}

.dashboard-grid .feature-card.accent-savings p {
  margin: 0;
}

.status-badge,
.prep-tag,
.status-pill,
.audit-trail > span,
.actor-chip {
  border-radius: 999px;
}

.primary-button {
  background: var(--ink);
}

.primary-button:hover {
  background: #27272a;
}

.ghost-button,
.text-button,
.icon-button,
.prep-view-toggle {
  background: var(--paper);
}

.input-field input,
.compact-field input,
.compact-field textarea,
select {
  border-color: var(--line);
  background: #ffffff;
}

.input-field input:focus,
.compact-field input:focus,
.compact-field textarea:focus,
select:focus {
  border-color: var(--mint);
  outline-color: var(--mint-soft);
}

.content-grid,
.finance-layout,
.option-layout,
.movein-board,
.info-workspace,
.user-admin-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-grid .feature-card {
  grid-column: span 2;
}

.content-grid > .surface-panel {
  grid-column: span 6;
}

.dashboard-readiness-panel {
  grid-column: 1 / -1;
}

.content-grid > .dashboard-notification-panel,
.content-grid > .household-calendar-panel {
  grid-column: 1 / -1;
}

.dashboard-readiness-grid,
.payment-readiness-summary {
  display: grid;
  gap: 10px;
}

.dashboard-readiness-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-readiness-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-readiness-card,
.payment-readiness-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-readiness-card span,
.payment-readiness-metric span,
.payment-readiness-row span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-readiness-card strong,
.payment-readiness-metric strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 20px;
}

.dashboard-readiness-card p,
.payment-readiness-metric p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-readiness-card.is-warning,
.payment-readiness-metric.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.dashboard-readiness-card.is-active {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.dashboard-action-panel {
  grid-column: span 5;
}

.dashboard-risk-panel {
  grid-column: span 4;
}

.dashboard-change-panel {
  grid-column: span 3;
}

.state-library-panel {
  grid-column: 1 / -1;
}

.option-layout > .surface-panel:nth-child(1) {
  grid-column: span 4;
}

.option-layout > .surface-panel:nth-child(2) {
  grid-column: span 8;
}

.option-manager-panel {
  grid-column: 1 / -1;
}

.finance-layout > .surface-panel {
  grid-column: span 6;
}

.finance-workspace-nav {
  position: sticky;
  top: 12px;
  z-index: 9;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.finance-workspace-nav button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
  cursor: pointer;
}

.finance-workspace-nav button:hover,
.finance-workspace-nav button:focus-visible {
  color: var(--ink);
  background: var(--panel);
}

.finance-workspace-nav button.is-active {
  color: var(--paper);
  background: var(--ink);
}

.finance-layout > .finance-workspace-overview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.35fr) auto;
  gap: 20px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.finance-workspace-overview > div:first-child {
  min-width: 0;
}

.finance-workspace-overview > div:first-child > span {
  color: var(--mint-text);
  font-size: 0.72rem;
  font-weight: 800;
}

.finance-workspace-overview h3 {
  margin: 2px 0 4px;
  font-size: 1.12rem;
}

.finance-workspace-overview p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.finance-workspace-progress {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
}

.finance-workspace-progress > span {
  grid-row: 1;
  width: 4px;
  min-height: 42px;
  border-radius: 999px;
  background: var(--amber);
}

.finance-workspace-progress.is-danger > span {
  background: var(--danger);
}

.finance-workspace-progress.is-ready > span {
  background: var(--mint);
}

.finance-workspace-progress strong {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 4px;
  min-width: 0;
}

.finance-workspace-progress strong > span {
  color: var(--amber-text);
  font-size: 0.82rem;
  font-weight: 900;
}

.finance-workspace-progress.is-danger strong > span {
  color: var(--danger);
}

.finance-workspace-progress.is-ready strong > span {
  color: var(--mint-text);
}

.finance-workspace-progress strong small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finance-workspace-overview .secondary-button {
  min-height: 42px;
  white-space: nowrap;
}

.finance-section-nav {
  position: static;
  z-index: 8;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
}

.finance-section-nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
  min-height: 104px;
  padding: 16px;
  text-align: left;
  color: var(--ink);
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.finance-section-nav button:hover,
.finance-section-nav button:focus-visible {
  color: var(--ink);
  border-color: var(--mint-border);
  background: var(--mint-soft);
}

.finance-section-nav button.is-active {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.finance-section-nav button > span {
  display: grid;
  width: 34px;
  height: 34px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 7px;
  color: var(--mint-text);
  background: var(--mint-soft);
}

.finance-section-nav button > span svg,
.finance-section-nav button > svg {
  width: 18px;
  height: 18px;
}

.finance-section-nav button > strong {
  align-self: end;
  min-width: 0;
  font-size: 15px;
}

.finance-section-nav button > small {
  align-self: start;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
  word-break: keep-all;
}

.finance-section-nav button > svg {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--ink-soft);
}

.finance-integrity-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 3fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--panel);
  border-block: 1px solid var(--line);
}

.finance-integrity-strip > div:first-child {
  display: grid;
  gap: 2px;
}

.finance-integrity-strip > div:first-child span {
  color: var(--mint-text);
  font-size: 0.72rem;
  font-weight: 800;
}

.finance-integrity-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-integrity-summary > div {
  min-width: 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--line-strong);
}

.finance-integrity-summary span,
.finance-integrity-summary small {
  display: block;
  color: var(--ink-soft);
}

.finance-integrity-summary strong {
  display: block;
  margin-block: 2px;
  font-size: 1rem;
}

.finance-integrity-summary .is-warning strong {
  color: var(--danger);
}

[data-finance-workspace-panel] {
  scroll-margin-top: 82px;
}

.finance-layout > .finance-assumptions-panel {
  order: 2;
  grid-column: 1 / -1;
}

.finance-risk-panel {
  order: 2;
  grid-column: span 7;
}

.finance-layout > .mortgage-quote-panel {
  order: 3;
  grid-column: 1 / -1;
}

.finance-layout > .payment-readiness-panel {
  order: 3;
  grid-column: 1 / -1;
}

.finance-layout > .transaction-import-panel {
  order: 3;
  grid-column: 1 / -1;
}

.finance-layout > .household-cashflow-panel {
  order: 3;
  grid-column: 1 / -1;
}

.finance-layout > .living-expense-panel {
  order: 3;
  grid-column: 1 / -1;
}

.payment-readiness-summary {
  margin-bottom: 12px;
}

.payment-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0;
  border-block: 1px solid var(--line);
}

.payment-action-summary article {
  min-width: 0;
  padding: 14px;
  border-left: 3px solid var(--mint-strong);
}

.payment-action-summary article.is-danger {
  border-left-color: var(--danger);
  background: var(--coral-soft);
}

.payment-action-summary article.is-warning,
.payment-action-summary article.is-watch {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.payment-action-summary article.is-review {
  border-left-color: var(--amber);
}

.payment-action-summary span,
.payment-action-summary p {
  color: var(--ink-soft);
}

.payment-action-summary span {
  font-size: 12px;
  font-weight: 900;
}

.payment-action-summary strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 19px;
}

.payment-action-summary p {
  margin: 4px 0 0;
  font-size: 11px;
}

.payment-action-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.payment-action-item {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
}

.payment-action-item.is-danger {
  border-left-color: var(--danger);
  background: var(--coral-soft);
}

.payment-action-item.is-warning,
.payment-action-item.is-watch {
  border-left-color: var(--amber);
}

.payment-action-item.is-review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.payment-action-item[data-primary-action="true"] {
  box-shadow: 0 8px 20px rgba(34, 67, 126, 0.1);
}

.payment-action-rank {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: var(--mint-text);
  background: var(--mint-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.payment-action-copy {
  min-width: 0;
}

.payment-action-copy > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.payment-action-copy > strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.payment-action-copy > p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.payment-action-item > button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
}

.payment-action-item > button svg {
  width: 16px;
  height: 16px;
}

.payment-action-more {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.payment-action-clear {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  color: var(--mint-text);
  background: var(--mint-soft);
  border: 1px solid var(--mint-line);
  border-radius: 8px;
}

.payment-action-clear > svg {
  width: 24px;
  height: 24px;
}

.payment-action-clear strong,
.payment-action-clear p {
  display: block;
  margin: 0;
}

.payment-action-clear p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.payment-action-detail {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.payment-action-detail > summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  cursor: pointer;
  list-style: none;
}

.payment-action-detail > summary::-webkit-details-marker {
  display: none;
}

.payment-action-detail > summary span,
.payment-action-detail > summary strong,
.payment-action-detail > summary small {
  display: block;
}

.payment-action-detail > summary small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
}

.payment-action-detail > summary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.payment-action-detail[open] > summary svg {
  transform: rotate(180deg);
}

.payment-action-detail-body {
  padding-bottom: 8px;
}

.payment-execution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0;
  border-block: 1px solid var(--line);
}

.payment-execution-summary article {
  min-width: 0;
  padding: 14px;
  border-left: 3px solid var(--mint-strong);
}

.payment-execution-summary article.is-overdue {
  border-left-color: var(--danger);
  background: var(--coral-soft);
}

.payment-execution-summary article.is-watch,
.payment-execution-summary article.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.payment-execution-summary span,
.payment-execution-summary p,
.payment-execution-row span,
.payment-execution-row small,
.payment-execution-row time {
  color: var(--ink-soft);
}

.payment-execution-summary span,
.payment-execution-row span {
  font-size: 12px;
  font-weight: 900;
}

.payment-execution-summary strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 19px;
}

.payment-execution-summary p {
  margin: 4px 0 0;
  font-size: 11px;
}

.payment-execution-list {
  display: grid;
  gap: 8px;
}

.payment-execution-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) repeat(3, minmax(130px, 0.72fr)) minmax(154px, auto);
  gap: 12px;
  min-width: 0;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  background: var(--paper);
}

.payment-execution-row.is-overdue,
.payment-execution-row.is-urgent,
.payment-execution-row.is-proof {
  border-left-color: var(--danger);
}

.payment-execution-row.is-soon,
.payment-execution-row.is-watch {
  border-left-color: var(--amber);
}

.payment-execution-row.is-done {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.payment-execution-row > div {
  min-width: 0;
}

.payment-execution-row > div.is-warning strong,
.payment-execution-row > div.is-warning small {
  color: var(--danger);
}

.payment-execution-row strong,
.payment-execution-row small,
.payment-execution-row time {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.payment-execution-main .payment-execution-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 7px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.payment-execution-main time {
  font-size: 11px;
}

.payment-execution-main > strong {
  font-size: 15px;
}

.payment-execution-main p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.payment-execution-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.payment-execution-actions button {
  min-height: 40px;
  padding-inline: 10px;
}

.payment-execution-complete {
  color: var(--mint-strong) !important;
}

.payment-readiness-subhead {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 24px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.payment-readiness-subhead span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.payment-readiness-subhead h4 {
  margin: 0;
  font-size: 15px;
}

.payment-readiness-list {
  display: grid;
  gap: 8px;
}

.payment-readiness-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(110px, 0.7fr));
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.payment-readiness-row.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.payment-readiness-row > div {
  min-width: 0;
}

.payment-readiness-row strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  white-space: nowrap;
}

.payment-readiness-date span {
  display: block;
  margin-top: 5px;
  line-height: 1.4;
}

.transaction-import-panel {
  min-width: 0;
}

.transaction-import-head {
  align-items: center;
}

.transaction-import-source {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.transaction-import-file {
  grid-column: span 6;
}

.transaction-import-profile-field,
#transactionImportEncodingField,
#transactionImportSheetField {
  grid-column: span 3;
}

.transaction-import-source button {
  grid-column: span 2;
  min-height: 44px;
}

.transaction-import-file-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding-right: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.transaction-import-file-button {
  display: inline-grid;
  min-height: 42px;
  place-items: center;
  border-width: 0 1px 0 0;
  border-radius: 7px 0 0 7px;
  cursor: pointer;
}

.transaction-import-file-control > span {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-import-step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 10px;
}

.transaction-import-step-head > span {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.transaction-import-step-head h4 {
  margin: 0;
  font-size: 15px;
}

.transaction-import-mapping-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}

.transaction-import-profile-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(150px, 0.6fr)) auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.transaction-import-profile-tools button {
  min-height: 44px;
}

.transaction-import-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.transaction-import-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.transaction-import-summary span,
.transaction-import-summary strong {
  display: block;
}

.transaction-import-summary span {
  color: var(--ink-soft);
  font-size: 12px;
}

.transaction-import-summary strong {
  margin-top: 4px;
  font-size: 18px;
}

.transaction-import-summary small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.transaction-import-summary .is-active {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.transaction-import-summary .is-warning {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.transaction-import-rule-manager {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.transaction-import-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.transaction-import-rule-head h5 {
  margin: 0;
  font-size: 15px;
}

.transaction-import-rule-head span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.transaction-import-rule-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.transaction-import-rule-form button {
  min-height: 44px;
}

.transaction-import-rule-list {
  display: grid;
  gap: 7px;
}

.transaction-import-rule-suggestions:empty {
  display: none;
}

.transaction-import-rule-suggestions {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
}

.transaction-import-rule-suggestion-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 12px;
}

.transaction-import-rule-suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}

.transaction-import-rule-suggestion-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
}

.transaction-import-rule-suggestion-list span,
.transaction-import-rule-suggestion-list strong,
.transaction-import-rule-suggestion-list small {
  overflow-wrap: anywhere;
}

.transaction-import-rule-suggestion-list small {
  color: var(--mint-text);
  font-weight: 800;
}

.transaction-import-rule-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.transaction-import-rule-item strong,
.transaction-import-rule-item p {
  display: block;
  margin: 0;
}

.transaction-import-rule-item p {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.transaction-import-rule-toggle {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 54px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.transaction-import-rule-toggle input {
  width: 20px;
  height: 20px;
}

.transaction-import-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.transaction-import-tools select,
.transaction-import-tools button {
  min-height: 42px;
}

.transaction-import-tools .primary-button {
  margin-left: auto;
}

.transaction-import-list,
.transaction-import-history {
  display: grid;
  gap: 7px;
}

.transaction-import-row {
  display: grid;
  grid-template-columns: 30px minmax(170px, 1.4fr) minmax(120px, 0.65fr) minmax(140px, 0.75fr) minmax(190px, 0.9fr) minmax(100px, 0.6fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px 10px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.transaction-import-row.is-duplicate {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.transaction-import-row.is-excluded {
  border-left-color: var(--line-strong);
  background: var(--panel);
}

.transaction-import-row.is-error {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.transaction-import-row.is-review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.transaction-import-check {
  display: grid;
  min-height: 40px;
  place-items: center;
}

.transaction-import-check input {
  width: 18px;
  height: 18px;
}

.transaction-import-main,
.transaction-import-target {
  min-width: 0;
}

.transaction-import-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.transaction-import-row[data-transaction-classification="income-record"] .transaction-import-target {
  grid-template-columns: minmax(0, 1fr);
}

.transaction-import-main span,
.transaction-import-main strong {
  display: block;
}

.transaction-import-main span,
.transaction-import-row-state,
.transaction-import-target-empty {
  color: var(--ink-soft);
  font-size: 12px;
}

.transaction-import-main strong {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-import-amount {
  text-align: right;
  white-space: nowrap;
}

.transaction-import-amount.is-income {
  color: var(--mint-text);
}

.transaction-import-amount.is-expense {
  color: var(--coral-text);
}

.transaction-import-row select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

.transaction-import-row-state {
  line-height: 1.4;
}

.transaction-import-more {
  width: 100%;
  margin-top: 8px;
}

.transaction-import-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
}

.transaction-import-history-item:first-child {
  border-top: 0;
}

.transaction-import-history-item span,
.transaction-import-history-item strong,
.transaction-import-history-item p {
  display: block;
  margin: 0;
}

.transaction-import-history-item span,
.transaction-import-history-item p {
  color: var(--ink-soft);
  font-size: 12px;
}

.transaction-import-history-item strong {
  margin: 3px 0;
}

.monthly-closing-import-note {
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--mint-soft);
}

.monthly-closing-import-summary.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-import-summary span,
.monthly-closing-import-summary strong {
  display: block;
}

.monthly-closing-import-summary span {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-import-summary small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.household-cashflow-panel {
  min-width: 0;
}

.household-cashflow-head {
  align-items: end;
}

.household-cashflow-month-tools {
  display: grid;
  grid-template-columns: 42px 160px 42px auto;
  gap: 7px;
  align-items: center;
}

.household-cashflow-month-tools input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--paper);
}

.mortgage-affordability {
  display: grid;
  gap: 14px;
  scroll-margin-top: 82px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--violet) 34%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--violet-soft) 45%, var(--paper));
}

.mortgage-affordability-head,
.mortgage-affordability-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mortgage-affordability-head > div:first-child {
  min-width: 0;
}

.mortgage-affordability-head span,
.mortgage-affordability-row-head span {
  color: var(--violet-text);
  font-size: 11px;
  font-weight: 900;
}

.mortgage-affordability-head h4,
.mortgage-affordability-row-head h5,
.mortgage-affordability-head p,
.mortgage-affordability-boundary,
.mortgage-affordability-equation,
.mortgage-affordability-sources,
.mortgage-affordability-formula {
  margin: 0;
}

.mortgage-affordability-head h4 {
  margin-top: 4px;
  font-size: 19px;
}

.mortgage-affordability-head p {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.mortgage-affordability-controls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.6fr);
  min-width: 300px;
  gap: 8px;
}

.mortgage-affordability-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mortgage-affordability-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--paper);
}

.mortgage-affordability-summary > div.is-done {
  border-left-color: var(--mint);
}

.mortgage-affordability-summary > div.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.mortgage-affordability-summary > div.is-review,
.mortgage-affordability-row.is-missing {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.mortgage-affordability-summary span,
.mortgage-affordability-summary strong,
.mortgage-affordability-summary small {
  display: block;
}

.mortgage-affordability-summary span,
.mortgage-affordability-summary small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.mortgage-affordability-summary strong {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.mortgage-affordability-boundary,
.mortgage-affordability-formula {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 12px;
  line-height: 1.5;
}

.mortgage-affordability-boundary.is-warning {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.mortgage-affordability-list {
  display: grid;
  gap: 10px;
}

.mortgage-affordability-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.mortgage-affordability-row.is-warning {
  border-left-color: var(--coral);
}

.mortgage-affordability-row-head h5 {
  margin-top: 3px;
  font-size: 16px;
}

.mortgage-affordability-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.mortgage-affordability-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  background: var(--panel);
}

.mortgage-affordability-metrics dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.mortgage-affordability-metrics dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 900;
}

.mortgage-affordability-metrics dd.is-warning {
  color: var(--coral-text);
}

.mortgage-affordability-equation {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.mortgage-affordability-sources {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.household-month-action-center {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.household-month-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.household-month-action-head span,
.household-month-action-copy > span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.household-month-action-head h4 {
  margin: 3px 0 0;
  font-size: 19px;
}

.household-month-action-head p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.household-month-action-head > strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--mint-text);
  font-size: 12px;
}

.household-month-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.household-month-action-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.household-month-action-summary > div.is-warning {
  border-color: var(--coral);
  background: var(--coral-soft);
}

.household-month-action-summary > div.is-done {
  border-color: var(--mint-border);
}

.household-month-action-summary span,
.household-month-action-summary strong,
.household-month-action-summary p {
  display: block;
  min-width: 0;
}

.household-month-action-summary span,
.household-month-action-summary p {
  color: var(--ink-soft);
  font-size: 11px;
}

.household-month-action-summary strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.household-month-action-summary p {
  margin: 4px 0 0;
}

.household-month-action-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.household-month-action-list > article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}

.household-month-action-list > article.is-urgent {
  border-left-color: var(--coral);
}

.household-month-action-list > article.is-watch {
  border-left-color: var(--mint);
}

.household-month-action-order {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.household-month-action-copy {
  min-width: 0;
}

.household-month-action-copy strong,
.household-month-action-copy p {
  display: block;
}

.household-month-action-copy strong {
  margin-top: 2px;
  font-size: 14px;
}

.household-month-action-copy p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.household-month-action-list button {
  min-width: 120px;
}

.household-month-action-empty {
  padding: 18px;
  border: 1px dashed var(--mint-border);
  border-radius: 12px;
  background: var(--mint-wash);
  text-align: center;
}

.household-month-action-empty strong,
.household-month-action-empty p {
  display: block;
}

.household-month-action-empty p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.household-starter {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.household-starter-main {
  min-width: 0;
  padding: 18px 22px 18px 0;
}

.household-starter-head,
.household-starter-apply,
.household-employment-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.household-starter-head span,
.household-employment-scenario > summary span {
  display: block;
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.household-starter-head h4,
.household-starter-head strong,
.household-employment-scenario > summary strong {
  margin: 3px 0 0;
  font-size: 16px;
}

.household-starter-head > strong {
  flex: 0 0 auto;
  color: var(--mint-text);
}

.household-starter-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.household-starter-setup > div {
  display: flex;
  min-width: 0;
  min-height: 58px;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line);
}

.household-starter-setup > div:nth-child(even) {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.household-starter-setup span,
.household-starter-setup strong {
  display: block;
}

.household-starter-setup span {
  color: var(--ink-soft);
  font-size: 11px;
}

.household-starter-setup strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.household-starter-setup .text-button {
  flex: 0 0 auto;
  min-height: 32px;
  font-size: 11px;
}

.household-starter-ready {
  flex: 0 0 auto;
  color: var(--mint-text) !important;
  font-weight: 900;
}

.household-starter-apply {
  margin-top: 12px;
}

.household-starter-apply > div {
  min-width: 0;
}

.household-starter-apply span,
.household-starter-apply strong,
.household-starter-apply p {
  display: inline;
  margin: 0 8px 0 0;
}

.household-starter-apply span,
.household-starter-apply p {
  color: var(--ink-soft);
  font-size: 12px;
}

.household-starter-apply strong {
  font-size: 16px;
}

.household-starter-apply .primary-button {
  flex: 0 0 auto;
}

.household-employment-scenario {
  min-width: 0;
  border-left: 1px solid var(--line);
}

.household-employment-scenario > summary {
  position: relative;
  padding: 18px 42px 18px 22px;
  cursor: pointer;
  list-style: none;
}

.household-employment-scenario > summary::-webkit-details-marker {
  display: none;
}

.household-employment-scenario > summary::after {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--ink-soft);
  content: '+';
  font-size: 20px;
  transform: translateY(-50%);
}

.household-employment-scenario[open] > summary::after {
  content: '-';
}

.household-employment-body {
  padding: 0 0 18px 22px;
}

.household-employment-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.household-employment-preview {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.household-employment-preview > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.household-employment-preview span,
.household-employment-preview strong {
  font-size: 12px;
}

.household-employment-preview span,
.household-employment-actions p {
  color: var(--ink-soft);
}

.household-employment-preview i {
  color: var(--ink-soft);
  font-style: normal;
}

.household-employment-actions {
  align-items: end;
  margin-top: 12px;
}

.household-employment-actions p {
  max-width: 300px;
  margin: 0;
  font-size: 11px;
}

.household-employment-actions button {
  flex: 0 0 auto;
}

.household-cashflow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 22px;
}

.household-cashflow-summary > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid #d6a228;
  border-radius: 8px;
  background: var(--panel);
}

.household-cashflow-summary > div.is-done {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.household-cashflow-summary > div.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.household-cashflow-summary span,
.household-cashflow-summary strong,
.household-cashflow-summary p,
.household-cashflow-breakdown span,
.household-cashflow-breakdown strong,
.household-cashflow-breakdown p,
.household-account-flows strong,
.household-account-flows p {
  display: block;
  margin: 0;
}

.household-cashflow-summary span,
.household-cashflow-summary p,
.household-cashflow-breakdown span,
.household-cashflow-breakdown p,
.household-account-flows p {
  color: var(--ink-soft);
  font-size: 12px;
}

.household-cashflow-summary strong {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: 19px;
}

.household-cashflow-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 22px;
}

.household-cashflow-insights > section:last-child {
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.household-cashflow-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.household-cashflow-breakdown > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.household-cashflow-breakdown strong {
  margin: 4px 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.household-account-flows {
  display: grid;
  gap: 7px;
}

.household-account-flows article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.household-account-flows article.is-warning {
  border-color: color-mix(in srgb, var(--coral) 45%, var(--line));
  background: var(--coral-soft);
}

.household-account-flows article > strong {
  color: var(--mint-text);
  font-size: 16px;
  white-space: nowrap;
}

.household-account-flows article.is-warning > strong {
  color: var(--coral-text);
}

.household-account-flows article > p {
  grid-column: 1 / -1;
}

.household-transfer-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.household-transfer-column {
  min-width: 0;
}

.household-transfer-column + .household-transfer-column {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.household-transfer-route {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.household-transfer-route > span {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-weight: 900;
}

.household-cashflow-workspace {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.household-cashflow-column {
  min-width: 0;
}

.household-cashflow-column + .household-cashflow-column {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.household-cashflow-drawer {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.household-cashflow-drawer > summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 13px 42px 13px 14px;
  cursor: pointer;
  list-style: none;
}

.household-cashflow-drawer > summary::-webkit-details-marker {
  display: none;
}

.household-cashflow-drawer > summary::after {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--ink-soft);
  content: '+';
  font-size: 22px;
  transform: translateY(-50%);
}

.household-cashflow-drawer[open] > summary::after {
  content: '-';
}

.household-cashflow-drawer > summary span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.household-cashflow-drawer > summary strong {
  font-size: 14px;
}

.household-cashflow-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 13px;
  border-top: 1px solid var(--line);
}

.household-cashflow-form-wide,
.household-cashflow-form-actions {
  grid-column: 1 / -1;
}

.household-cashflow-form .toggle-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.household-cashflow-form .toggle-row input {
  width: 18px;
  height: 18px;
}

.household-cashflow-form-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.household-cashflow-list {
  display: grid;
  gap: 7px;
}

.household-cashflow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.household-cashflow-row.is-inactive {
  border-left-color: var(--line-strong);
  opacity: 0.7;
}

.household-cashflow-row > div:first-child {
  min-width: 0;
}

.household-cashflow-row span,
.household-cashflow-row strong,
.household-cashflow-row p {
  display: block;
  margin: 0;
}

.household-cashflow-row span,
.household-cashflow-row p {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.household-cashflow-row > div:first-child > strong {
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.household-cashflow-amount {
  white-space: nowrap;
}

.household-cashflow-amount.is-income {
  color: var(--mint-text);
}

.household-cashflow-amount.is-expense {
  color: var(--coral-text);
}

.household-cashflow-row-audit,
.household-cashflow-row-actions {
  grid-column: 1 / -1;
}

.household-cashflow-row-audit {
  min-width: 0;
}

.household-cashflow-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.household-cashflow-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.household-cashflow-row-actions button {
  min-height: 36px;
  padding: 7px 10px;
}

.living-expense-panel {
  min-width: 0;
}

.living-expense-head {
  align-items: end;
}

.living-expense-month-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.living-expense-month-tools input {
  width: 160px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--paper);
}

.living-expense-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 22px;
}

.living-expense-summary > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--panel);
}

.living-expense-summary > div.is-done {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.living-expense-summary > div.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.living-expense-summary span,
.living-expense-summary strong,
.living-expense-summary p {
  display: block;
  margin: 0;
}

.living-expense-summary span,
.living-expense-summary p {
  color: var(--ink-soft);
  font-size: 12px;
}

.living-expense-summary strong {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: 19px;
}

.living-expense-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 22px;
}

.living-expense-budget-editor {
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.living-expense-category-list {
  display: grid;
  gap: 7px;
}

.living-expense-category-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, auto);
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--paper);
}

.living-expense-category-row.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.living-expense-category-copy strong,
.living-expense-category-copy span,
.living-expense-category-amounts strong,
.living-expense-category-amounts span {
  display: block;
}

.living-expense-category-copy span,
.living-expense-category-amounts span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 11px;
}

.living-expense-category-amounts {
  text-align: right;
  white-space: nowrap;
}

.living-expense-progress {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--panel-strong);
}

.living-expense-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}

.living-expense-category-row.is-warning .living-expense-progress > span {
  background: var(--coral);
}

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

.living-expense-allocation-editor {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.living-expense-allocation-editor > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.living-expense-allocation-editor > div:first-child span,
.living-expense-allocation-editor > p {
  color: var(--ink-soft);
  font-size: 12px;
}

.living-expense-allocation-editor > p {
  margin: 0;
  line-height: 1.5;
}

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

.living-expense-allocation-note {
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--mint-soft);
  color: var(--mint-text) !important;
  font-weight: 800;
}

.living-expense-allocation-note.is-error {
  background: var(--coral-soft);
  color: var(--coral-text) !important;
}

.living-expense-budget-editor > .primary-button {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
}

.living-expense-trend-panel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.living-expense-legend {
  display: flex;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 11px;
}

.living-expense-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.living-expense-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.living-expense-legend .is-budget {
  background: var(--violet);
}

.living-expense-legend .is-spent {
  background: var(--coral);
}

.living-expense-trend {
  display: grid;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  gap: 8px;
  min-height: 196px;
}

.living-expense-trend-column {
  display: grid;
  grid-template-rows: 34px 130px 20px;
  gap: 4px;
  min-width: 0;
  padding: 7px;
  border-bottom: 3px solid transparent;
  text-align: center;
}

.living-expense-trend-column.is-current {
  border-bottom-color: var(--ink);
  background: var(--panel);
}

.living-expense-trend-values span,
.living-expense-trend-values strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.living-expense-trend-values span {
  color: var(--ink-soft);
}

.living-expense-trend-bars {
  display: flex;
  gap: 4px;
  align-items: end;
  justify-content: center;
  border-bottom: 1px solid var(--line-strong);
}

.living-expense-trend-bars i {
  display: block;
  width: min(28%, 24px);
  min-height: 0;
  border-radius: 3px 3px 0 0;
}

.living-expense-trend-bars .is-budget {
  background: var(--violet);
}

.living-expense-trend-bars .is-spent {
  background: var(--coral);
}

.living-expense-trend-column > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.living-expense-record-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.living-expense-form-drawer {
  align-self: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.living-expense-form-drawer > summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 13px 44px 13px 14px;
  cursor: pointer;
  list-style: none;
}

.living-expense-form-drawer > summary::-webkit-details-marker {
  display: none;
}

.living-expense-form-drawer > summary::after {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--ink-soft);
  content: '+';
  font-size: 22px;
  transform: translateY(-50%);
}

.living-expense-form-drawer[open] > summary::after {
  content: '-';
}

.living-expense-form-drawer > summary span {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.living-expense-form-drawer > summary strong {
  font-size: 15px;
}

.living-expense-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.living-expense-description-field,
.living-expense-note-field,
.living-expense-form-actions {
  grid-column: 1 / -1;
}

.living-expense-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.living-expense-list {
  display: grid;
  gap: 7px;
}

.living-expense-record {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 8px;
  background: var(--paper);
}

.living-expense-record-main {
  min-width: 0;
}

.living-expense-record-main span,
.living-expense-record-main strong,
.living-expense-record-main p {
  display: block;
  margin: 0;
}

.living-expense-record-main span,
.living-expense-record-main p {
  color: var(--ink-soft);
  font-size: 11px;
}

.living-expense-record-main strong {
  margin: 3px 0;
}

.living-expense-record-amount {
  color: var(--coral-text);
  white-space: nowrap;
}

.living-expense-record-audit {
  min-width: 0;
}

.living-expense-record-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.danger-button {
  color: var(--danger);
}

.monthly-closing-living-note {
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-living-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--mint-soft);
}

.monthly-closing-living-summary.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.monthly-closing-living-summary span,
.monthly-closing-living-summary strong {
  display: block;
}

.monthly-closing-living-summary span {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-household-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--mint-soft);
}

.monthly-closing-household-summary.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.monthly-closing-household-summary span,
.monthly-closing-household-summary strong {
  display: block;
}

.monthly-closing-household-summary span {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-balance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-left: 4px solid var(--mint);
  background: var(--mint-soft);
}

.monthly-closing-balance-summary.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-balance-summary span,
.monthly-closing-balance-summary strong {
  display: block;
}

.monthly-closing-balance-summary span {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-layout > .savings-target-panel {
  order: 3;
  grid-column: 1 / -1;
}

.finance-layout > .savings-goal-panel {
  order: 4;
  grid-column: 1 / -1;
}

.finance-layout > .funding-simulator-panel {
  order: 5;
  grid-column: 1 / -1;
}

.finance-layout > .savings-manager-panel {
  order: 6;
  grid-column: 1 / -1;
}

.finance-layout > .cashflow-panel {
  order: 1;
  grid-column: 1 / -1;
}

.finance-layout > .schedule-panel,
.finance-layout > .payment-calendar-panel,
.finance-layout > .scenario-panel,
.finance-layout > .savings-manager-panel {
  grid-column: 1 / -1;
}

.finance-layout > .schedule-panel {
  order: 7;
}

.finance-layout > .payment-calendar-panel {
  order: 8;
}

.finance-layout > .scenario-panel {
  order: 9;
}

.info-brief,
.notice-panel,
.unit-panel {
  grid-column: span 4;
}

@media (min-width: 1181px) {
  .info-workspace > .info-brief {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .info-workspace > .notice-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .info-workspace > .unit-panel {
    grid-column: 5 / -1;
    grid-row: 1;
  }

  .info-workspace > .unit-supply-panel {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .info-workspace > .notice-panel .notice-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.asset-panel {
  grid-column: span 8;
  grid-row: span 2;
}

.document-check-panel,
.document-panel,
.document-list-panel {
  grid-column: 1 / -1;
}

.prep-editor {
  order: 2;
  grid-column: span 4;
}

.prep-overview {
  order: 2;
  grid-column: span 8;
}

.prep-list-panel {
  order: 1;
  grid-column: 1 / -1;
}

.prep-timeline-panel {
  order: 4;
  grid-column: span 5;
}

.prep-compare-panel {
  order: 5;
  grid-column: span 7;
}

.movein-board > [data-prep-workspace-panel] {
  grid-column: 1 / -1;
}

.info-workspace > [data-info-workspace-panel] {
  grid-column: 1 / -1;
  grid-row: auto;
}

.user-admin-layout > .surface-panel {
  grid-column: span 6;
}

.user-admin-layout > .user-ops-summary-panel,
.user-admin-layout > .backup-panel,
.user-admin-layout > .recent-user-change-panel,
.user-admin-layout > .user-list-panel,
.user-admin-layout > .state-history-panel {
  grid-column: 1 / -1;
}

.dashboard-action-item,
.dashboard-risk-item,
.recent-change-item,
.finance-risk-card,
.savings-target-card,
.savings-projection-card,
.schedule-row,
.scenario-card,
.cash-calendar-tile,
.option-decision-card,
.prep-card,
.prep-list-row,
.prep-compare-item,
.user-card,
.saved-state-item,
.document-summary div,
.ops-status-grid div,
.prep-summary-grid div,
.cashflow-summary div,
.option-status-summary div {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: none;
}

.dashboard-action-item,
.finance-risk-card,
.document-check-item,
.prep-timeline-item {
  border-left-width: 3px;
}

.dashboard-risk-list {
  gap: 8px;
}

.cashflow-bar-track {
  background: #eceff3;
}

.cashflow-bar-track span {
  background: linear-gradient(90deg, var(--mint), var(--violet));
}

.unit-count-table th {
  background: var(--panel);
}

.unit-count-table th,
.unit-count-table td {
  padding: 12px;
}

.prep-list-toolbar {
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.prep-view-button.is-active {
  color: #ffffff;
  background: var(--ink);
}

.prep-list-row {
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(96px, 0.65fr)) minmax(180px, 1fr) auto;
  background: var(--paper);
}

.prep-card {
  background: var(--paper);
}

.prep-meta div,
.prep-compare-head dl div,
.prep-models,
.prep-candidate-field,
.prep-candidate-editor,
.document-preview {
  background: var(--panel);
}

.document-list,
.user-list,
.saved-state-list {
  gap: 10px;
}

.image-card {
  box-shadow: none;
}

.image-card figcaption {
  background: var(--paper);
}

/* v2.16 부부 공동 관리 보강 */
.dashboard-personal-panel {
  grid-column: 1 / -1;
}

.assignment-summary,
.cashflow-insight,
.prep-status-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.assignment-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assignment-card,
.cashflow-insight-card,
.prep-status-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.assignment-card span,
.cashflow-insight-card span,
.prep-status-column p {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.assignment-card strong,
.cashflow-insight-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.1;
}

.assignment-card p,
.cashflow-insight-card p,
.prep-status-column p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.assignment-card-mine,
.cashflow-insight-active {
  border-left: 3px solid var(--mint);
}

.assignment-card-joint {
  border-left: 3px solid var(--violet);
}

.assignment-card-others,
.cashflow-insight-warning {
  border-left: 3px solid var(--coral);
}

.assignment-card-none {
  border-left: 3px solid var(--amber);
}

.cashflow-insight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0;
}

.cashflow-insight-done {
  border-left: 3px solid var(--lime);
}

.recent-change-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recent-change-tools select {
  min-width: 130px;
}

.recent-change-advanced-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recent-change-advanced-filters label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.recent-change-advanced-filters select {
  min-width: 0;
}

.recent-change-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.recent-change-select-all,
.recent-change-item-selector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.recent-change-select-all {
  min-height: 40px;
}

.recent-change-select-all input,
.recent-change-item-selector input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--mint-strong);
}

.recent-change-bulk-toolbar > strong {
  margin-right: auto;
  color: var(--mint-text);
  font-size: 13px;
}

.recent-change-bulk-toolbar .text-button {
  min-height: 40px;
}

.recent-change-item-selector {
  min-height: 32px;
}

.recent-change-item-selector span {
  color: var(--ink-soft);
  font-size: 12px;
}

.recent-change-item.is-unseen {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.recent-change-item.is-deleted {
  border-left-color: var(--ink-soft);
  background: var(--panel-soft);
}

.recent-change-deleted-meta {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.recent-change-trash-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.recent-change-trash-summary span {
  color: var(--ink-soft);
  font-size: 12px;
}

.recent-change-context {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.recent-change-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.recent-change-overview > div {
  min-width: 0;
  padding: 12px;
}

.recent-change-overview > div + div {
  border-left: 1px solid var(--line);
}

.recent-change-overview span,
.recent-change-overview strong {
  display: block;
}

.recent-change-overview span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.recent-change-overview strong {
  margin-top: 4px;
  font-size: 18px;
}

.recent-change-groups,
.recent-change-group,
.recent-change-group-list {
  display: grid;
  gap: 10px;
}

.recent-change-group + .recent-change-group {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.recent-change-group > header,
.recent-change-group > header > div,
.recent-change-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recent-change-group > header {
  justify-content: space-between;
}

.recent-change-group > header span,
.recent-change-group > header small,
.recent-change-more {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.recent-change-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.recent-change-kind.is-amount {
  background: var(--mint-soft);
  color: var(--mint-text);
}

.recent-change-kind.is-evidence {
  background: var(--violet-soft);
  color: var(--violet-text);
}

.recent-change-kind.is-comment {
  background: var(--coral-soft);
  color: var(--coral-text);
}

.recent-change-kind.is-decision {
  background: var(--amber-soft);
  color: var(--amber-text);
}

.recent-change-more {
  margin: 0;
}

.avatar-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.avatar-choice-button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 132px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.avatar-choice-button .avatar-image {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 3px 4px rgb(15 23 42 / 0.12));
}

.avatar-choice-button > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-choice-button.is-selected {
  border-color: var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
  box-shadow: inset 0 0 0 1px var(--mint);
}

.avatar-choice-button.is-selected::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  place-items: center;
  color: #ffffff;
  background: var(--mint);
  font-size: 11px;
  line-height: 1;
}

@media (hover: hover) {
  .avatar-choice-button:hover {
    border-color: var(--ink-muted);
    background: var(--panel);
    transform: translateY(-1px);
  }

  .avatar-choice-button.is-selected:hover {
    border-color: var(--mint);
    background: var(--mint-soft);
  }
}

.managed-avatar-field {
  grid-column: span 2;
}

.option-comment-panel,
.comment-list {
  display: grid;
  gap: 8px;
}

.option-comment-panel {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.option-comment-submit {
  justify-self: end;
}

.comment-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.comment-item p,
.comment-empty {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.comment-empty {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.prep-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mobile-quick-actions {
  display: none;
  gap: 8px;
  margin-bottom: 10px;
}

.prep-status-board {
  margin-bottom: 12px;
}

.prep-status-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prep-status-column-head strong {
  font-size: 18px;
}

.prep-status-mini-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.prep-status-mini-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  color: var(--ink);
  background: var(--panel);
  text-align: left;
}

.prep-status-mini-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.prep-status-mini-item em,
.prep-status-empty {
  color: var(--ink-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.prep-filter-grid {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

/* v2.25.4 자료 이미지 보드 */
.info-workspace > .asset-panel {
  grid-column: 1 / -1;
  grid-row: auto;
}

.document-image-board,
.document-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.document-image-board > .prep-empty,
.document-list > .prep-empty {
  grid-column: 1 / -1;
}

.document-image-card,
.document-card {
  grid-column: span 6;
  min-width: 0;
  align-self: start;
}

.document-image-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.document-card-size-compact {
  grid-column: span 4;
}

.document-card-size-medium {
  grid-column: span 6;
}

.document-card-size-large {
  grid-column: span 8;
}

.document-card-size-full {
  grid-column: 1 / -1;
}

.document-image-card.is-dragging {
  opacity: 0.45;
}

.document-image-card.is-drop-target {
  border-color: var(--mint);
  outline: 3px solid var(--mint-soft);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.document-image-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.document-image-card-head > div:first-child {
  min-width: 0;
}

.document-image-card-head h4 {
  margin: 8px 0 0;
  overflow-wrap: break-word;
  font-size: 17px;
  line-height: 1.35;
  text-wrap: balance;
  word-break: keep-all;
}

.document-image-card-media {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.document-image-card-media.has-multiple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-image-open {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
  text-align: left;
  cursor: zoom-in;
}

.document-image-card-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: var(--document-image-fit, contain);
  object-position: var(--document-focus-x, 50%) var(--document-focus-y, 50%);
  background: #f3f5f6;
}

.document-image-card-media[data-image-fit="contain"] {
  --document-image-fit: contain;
}

.document-image-card-media[data-image-fit="cover"] {
  --document-image-fit: cover;
}

.document-image-card-media[data-media-height="short"] img {
  height: 220px;
}

.document-image-card-media[data-media-height="medium"] img {
  height: 380px;
}

.document-image-card-media[data-media-height="tall"] img {
  height: 560px;
}

.document-image-card-media span {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.document-image-card-note {
  margin: 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: keep-all;
}

.document-display-settings {
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.document-display-settings > summary {
  position: relative;
  padding: 10px 38px 10px 14px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.document-display-settings > summary::-webkit-details-marker {
  display: none;
}

.document-display-settings > summary::after {
  position: absolute;
  top: 50%;
  right: 15px;
  content: '+';
  font-size: 18px;
  transform: translateY(-50%);
}

.document-display-settings[open] > summary::after {
  content: '−';
}

.document-display-controls {
  display: grid;
  grid-template-columns: minmax(110px, 0.65fr) minmax(150px, 0.9fr) repeat(2, minmax(170px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 0 14px 14px;
}

.document-display-controls label,
.document-fit-control {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.document-display-controls label > span,
.document-fit-control > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.document-display-controls select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--paper);
}

.document-fit-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-fit-control > span {
  grid-column: 1 / -1;
}

.document-fit-control button {
  min-height: 36px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 12px;
  font-weight: 900;
}

.document-fit-control button:first-of-type {
  border-radius: 6px 0 0 6px;
}

.document-fit-control button:last-of-type {
  margin-left: -1px;
  border-radius: 0 6px 6px 0;
}

.document-fit-control button[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--ink);
  color: #ffffff;
  background: var(--ink);
}

.document-focus-control {
  grid-template-columns: minmax(0, 1fr) 38px;
}

.document-focus-control > span {
  grid-column: 1 / -1;
}

.document-focus-control input {
  width: 100%;
  accent-color: var(--mint-strong);
}

.document-focus-control output {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.document-display-reset {
  min-height: 36px;
}

.document-featured-tag {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.document-layout-actions .text-button.is-active {
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.document-list-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.document-list-tools .select-field {
  min-width: 150px;
}

.document-list-tools input {
  min-width: 220px;
}

.document-source-open {
  margin-top: 4px;
}

/* v2.30 월간 실행과 공동 마감 */
.content-grid > .dashboard-monthly-panel {
  grid-column: 1 / -1;
}

.content-grid > .dashboard-readiness-panel {
  grid-column: span 7;
}

.content-grid > .dashboard-household-panel {
  grid-column: span 5;
}

.content-grid > .dashboard-detail-panel {
  grid-column: 1 / -1;
}

.dashboard-monthly-head,
.monthly-closing-controls,
.monthly-closing-state,
.monthly-closing-people,
.monthly-closing-person,
.compact-section-head {
  display: flex;
  align-items: center;
}

.dashboard-monthly-head,
.monthly-closing-state {
  justify-content: space-between;
  gap: 18px;
}

.monthly-closing-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.monthly-closing-controls input {
  width: 148px;
}

.monthly-execution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 0;
  border-block: 1px solid var(--line);
}

.monthly-execution-summary > div {
  min-width: 0;
  padding: 16px;
  border-left: 3px solid var(--mint);
}

.monthly-execution-summary > div + div {
  border-top: 0;
}

.monthly-execution-summary > div.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.monthly-execution-summary > div.is-done {
  border-left-color: var(--mint);
}

.monthly-execution-summary span,
.monthly-closing-step-summary span,
.monthly-closing-payment-compare span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.monthly-execution-summary strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 20px;
}

.monthly-execution-summary p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.dashboard-account-reconciliation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-account-reconciliation > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dashboard-account-reconciliation span,
.dashboard-account-reconciliation small {
  color: var(--ink-soft);
  font-size: 12px;
}

.dashboard-account-reconciliation span {
  font-weight: 900;
}

.dashboard-account-reconciliation strong,
.dashboard-account-reconciliation small {
  overflow-wrap: anywhere;
}

.finance-layout > .account-reconciliation-panel {
  order: 3;
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 0 24px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.account-reconciliation-panel > summary {
  padding-block: 18px;
}

.account-reconciliation-panel > summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.account-reconciliation-panel > summary > span strong {
  font-size: 20px;
}

.account-reconciliation-panel > summary > svg {
  width: 20px;
  height: 20px;
  margin-left: auto;
  transition: transform 160ms ease;
}

.account-reconciliation-panel[open] > summary > svg {
  transform: rotate(180deg);
}

.monthly-balance-reconciliation {
  margin-top: 16px;
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.monthly-balance-reconciliation > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 900;
}

.monthly-balance-reconciliation > summary::marker {
  color: var(--mint-strong);
}

.monthly-balance-reconciliation > summary small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.monthly-balance-reconciliation form {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.monthly-balance-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.monthly-balance-fields label {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.monthly-balance-fields input {
  width: 100%;
  min-width: 0;
}

.monthly-balance-fields label > small {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.monthly-balance-note {
  grid-column: 1 / -1;
}

.monthly-balance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.monthly-balance-actions p {
  flex: 1;
  margin: 0;
  color: var(--mint-strong);
  font-size: 12px;
  font-weight: 800;
}

.monthly-balance-actions p.is-error {
  color: var(--danger);
}

.monthly-balance-result {
  padding: 0 0 14px;
}

.monthly-balance-empty {
  padding: 13px 14px;
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
}

.monthly-balance-empty p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-balance-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.monthly-balance-result-grid article {
  min-width: 0;
  padding: 13px;
  border-left: 3px solid var(--line-strong);
}

.monthly-balance-result-grid article.is-actual,
.monthly-balance-result-grid article.is-done {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.monthly-balance-result-grid article.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.monthly-balance-result-grid span,
.monthly-balance-result-grid strong {
  display: block;
}

.monthly-balance-result-grid span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.monthly-balance-result-grid strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.monthly-balance-result-grid p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.monthly-balance-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--panel);
}

.monthly-balance-coverage > div {
  min-width: 0;
  padding: 10px 13px;
}

.monthly-balance-coverage > div.is-warning {
  background: var(--amber-soft);
}

.monthly-balance-coverage span,
.monthly-balance-coverage strong,
.monthly-balance-coverage small {
  display: block;
  overflow-wrap: anywhere;
}

.monthly-balance-coverage span,
.monthly-balance-coverage small {
  color: var(--ink-soft);
  font-size: 10px;
}

.monthly-balance-coverage strong {
  margin: 4px 0;
  font-size: 14px;
}

.monthly-balance-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 11px;
}

.monthly-balance-meta p {
  margin: 0;
}

.financial-account-reconciliation {
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}

.financial-account-reconciliation .section-head {
  align-items: flex-end;
  margin-bottom: 12px;
}

.financial-account-form,
.financial-snapshot-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.financial-account-form label,
.financial-snapshot-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.financial-account-form input,
.financial-account-form select,
.financial-snapshot-form input,
.financial-snapshot-form select {
  width: 100%;
  min-width: 0;
}

.financial-account-form-actions {
  display: flex;
  gap: 8px;
}

.financial-account-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.financial-account-item {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(210px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint-strong);
  background: var(--paper);
}

.financial-account-item > div,
.financial-account-item span,
.financial-account-item strong,
.financial-account-item small {
  min-width: 0;
}

.financial-account-item span,
.financial-account-item small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
}

.financial-account-item strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.financial-account-amount {
  text-align: right;
}

.financial-account-actions {
  display: flex;
  gap: 6px;
}

.financial-snapshot-note {
  grid-column: span 2;
}

.financial-reconciliation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  border: 1px solid var(--line);
}

.financial-reconciliation-summary article {
  min-width: 0;
  padding: 12px;
  border-left: 3px solid var(--line-strong);
}

.financial-reconciliation-summary article.is-actual {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.financial-reconciliation-summary span,
.financial-reconciliation-summary strong {
  display: block;
}

.financial-reconciliation-summary span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.financial-reconciliation-summary strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.financial-reconciliation-note {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.6;
}

.monthly-closing-state {
  min-height: 62px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.monthly-closing-state p {
  margin: 6px 0 0;
  color: var(--coral-text);
  font-size: 12px;
  font-weight: 800;
}

.monthly-closing-people {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.monthly-closing-person {
  gap: 6px;
  min-height: 38px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
}

.monthly-closing-person.is-confirmed {
  border-color: var(--mint);
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.monthly-execution-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 18px;
}

.monthly-execution-column {
  min-width: 0;
}

.monthly-execution-column h4,
.dashboard-subheading,
.monthly-closing-history h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.monthly-closing-history {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.monthly-closing-history h4 {
  margin: 0 6px 0 0;
}

.monthly-closing-history-item {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  font-size: 11px;
}

.monthly-closing-history-item span,
.monthly-closing-history-item time {
  color: var(--ink-soft);
}

.monthly-closing-history-item strong,
.monthly-closing-history-item time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-subheading {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.dashboard-household-divider {
  margin: 18px 0;
  border-top: 1px solid var(--line);
}

.compact-section-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.compact-section-head h4 {
  margin: 0;
  font-size: 14px;
}

.dashboard-detail-panel {
  padding: 0;
  overflow: clip;
}

.dashboard-detail-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.dashboard-detail-panel > summary::-webkit-details-marker {
  display: none;
}

.dashboard-detail-panel > summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
}

.dashboard-detail-panel[open] > summary::after {
  content: '−';
}

.dashboard-detail-panel > summary > span {
  display: grid;
  gap: 4px;
}

.dashboard-detail-panel > summary strong {
  font-size: 16px;
}

.dashboard-detail-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.dashboard-detail-body {
  padding: 18px;
}

.dashboard-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.monthly-closing-dialog {
  width: min(820px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.project-profile-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.project-profile-dialog::backdrop {
  background: rgb(15 23 42 / 72%);
}

.project-profile-shell {
  display: grid;
  max-height: calc(100vh - 34px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.project-profile-head,
.project-profile-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
}

.project-profile-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.project-profile-head h2 {
  margin: 3px 0 0;
  font-size: 21px;
  text-wrap: balance;
  word-break: keep-all;
}

.project-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding: 20px;
}

.project-profile-grid .span-2 {
  grid-column: 1 / -1;
}

.project-profile-grid textarea {
  resize: vertical;
}

.project-unit-editor {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.project-unit-editor legend {
  padding: 0 6px;
  font-weight: 900;
}

.project-unit-editor > div {
  display: grid;
  gap: 8px;
}

.project-unit-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(100px, 0.6fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.project-unit-editor-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.project-unit-editor-row label {
  display: grid;
  gap: 5px;
}

.project-unit-editor-row label span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.project-profile-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.pwa-install-guide {
  width: min(460px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.pwa-install-guide::backdrop {
  background: rgb(15 23 42 / 72%);
}

.pwa-install-guide-shell {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.pwa-install-guide header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pwa-install-guide h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.pwa-install-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.pwa-install-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  counter-increment: install-step;
}

.pwa-install-steps li::before {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink);
  content: counter(install-step);
  font-size: 12px;
  font-weight: 900;
}

.pwa-install-guide > .pwa-install-guide-shell > .primary-button {
  min-height: 44px;
}

@media (max-width: 760px) {
  .pwa-setting-row {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
  }

  .pwa-setting-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .pwa-setting-row > button,
  .pwa-setting-actions button {
    width: 100%;
    min-height: 44px;
  }
}

.monthly-closing-dialog::backdrop {
  background: rgb(15 23 42 / 72%);
}

.monthly-closing-shell {
  display: grid;
  grid-template-rows: auto auto minmax(280px, 1fr) auto;
  max-height: calc(100vh - 34px);
}

.monthly-closing-dialog-head,
.monthly-closing-dialog-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}

.monthly-closing-dialog-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.monthly-closing-dialog-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.monthly-closing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.monthly-closing-steps button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
}

.monthly-closing-steps button:last-child {
  border-right: 0;
}

.monthly-closing-steps button > span,
.monthly-closing-step-head > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink-soft);
  background: #e3e7ea;
  font-size: 12px;
  font-weight: 900;
}

.monthly-closing-steps button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.monthly-closing-steps button.is-active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 -3px var(--mint);
}

.monthly-closing-steps button.is-active > span,
.monthly-closing-steps button.is-done > span {
  color: #ffffff;
  background: var(--mint-strong);
}

.monthly-closing-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.monthly-closing-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid var(--line);
}

.monthly-closing-flow button {
  display: grid;
  min-width: 0;
  min-height: 82px;
  align-content: center;
  gap: 3px;
  padding: 11px 12px;
  border: 0;
  border-left: 3px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}

.monthly-closing-flow button + button {
  border-top: 0;
}

.monthly-closing-flow button.is-done {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.monthly-closing-flow button.is-warning {
  border-left-color: var(--amber);
}

.monthly-closing-flow button.is-active {
  box-shadow: inset 0 -3px var(--ink);
}

.monthly-closing-flow button > span,
.monthly-closing-flow button > small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.monthly-closing-flow button > strong,
.monthly-closing-flow button > small {
  overflow-wrap: anywhere;
}

.monthly-closing-empty-action {
  padding: 14px;
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-empty-action p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-empty-action.is-optional {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.monthly-closing-import-history,
.monthly-closing-review-rows {
  display: grid;
  margin-top: 12px;
  border-block: 1px solid var(--line);
}

.monthly-closing-import-history > div,
.monthly-closing-review-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  min-width: 0;
  align-items: center;
  padding: 9px 0;
}

.monthly-closing-import-history > div + div,
.monthly-closing-review-rows > div + div {
  border-top: 1px solid var(--line);
}

.monthly-closing-import-history span,
.monthly-closing-review-rows span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.monthly-closing-import-history time,
.monthly-closing-review-rows small {
  color: var(--ink-soft);
  font-size: 11px;
}

.monthly-closing-step-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.monthly-closing-account-source {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.monthly-closing-account-source span,
.monthly-closing-account-source strong {
  display: block;
}

.monthly-closing-account-source span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.monthly-closing-account-source strong {
  margin-top: 4px;
}

.monthly-closing-balance-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-closing-balance-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.monthly-closing-balance-form input {
  width: 100%;
  min-width: 0;
}

.monthly-closing-balance-form .monthly-closing-balance-note {
  grid-column: span 2;
}

.monthly-closing-balance-form > button {
  align-self: end;
}

.monthly-closing-step-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.monthly-closing-step-head > span {
  color: #ffffff;
  background: var(--ink);
}

.monthly-closing-step-head h3,
.monthly-closing-step-head p {
  margin: 0;
}

.monthly-closing-step-head h3 {
  font-size: 18px;
}

.monthly-closing-step-head p {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 13px;
}

.monthly-closing-review-grid,
.monthly-closing-payment-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-closing-review-grid > div,
.monthly-closing-payment-compare > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.monthly-closing-review-grid strong,
.monthly-closing-review-grid small,
.monthly-closing-payment-compare strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.monthly-closing-review-grid small {
  color: var(--ink-soft);
}

.monthly-closing-payment-compare > div.is-warning {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-payment-compare > div.is-done {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.monthly-closing-step-summary,
.monthly-closing-final-status {
  margin-top: 14px;
  padding: 14px;
  border-left: 4px solid var(--mint);
  background: var(--mint-soft);
}

.monthly-closing-step-summary strong,
.monthly-closing-final-status strong,
.monthly-closing-final-status span {
  display: block;
  margin-top: 4px;
}

.monthly-closing-step-summary p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-note {
  color: var(--ink-soft);
  font-size: 13px;
}

.monthly-closing-payment-ledger {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.monthly-closing-payment-ledger > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
}

.monthly-closing-payment-ledger span {
  min-width: 0;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.monthly-closing-payment-ledger strong {
  flex: 0 0 auto;
}

.monthly-closing-payment-ledger p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.monthly-closing-list-group + .monthly-closing-list-group {
  margin-top: 18px;
}

.monthly-closing-list-group h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.monthly-closing-list-group ul,
.monthly-closing-warnings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.monthly-closing-list-group li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.monthly-closing-list-group li small {
  color: var(--ink-soft);
}

.monthly-closing-list-group li.is-empty {
  display: block;
  color: var(--ink-soft);
}

.monthly-closing-people.is-dialog {
  justify-content: flex-start;
  margin-top: 14px;
}

.monthly-closing-warnings {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: #7c4a00;
  font-size: 13px;
  font-weight: 800;
}

.monthly-closing-warnings li {
  padding: 9px 12px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-missing-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
}

.monthly-closing-missing-actions > button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.monthly-closing-missing-actions small {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.monthly-closing-ready {
  margin: 14px 0 0;
  color: var(--mint-strong);
  font-weight: 900;
}

.monthly-closing-dialog-footer {
  justify-content: flex-end;
  min-height: 70px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.monthly-closing-dialog-footer .state-status {
  margin-right: auto;
  color: var(--coral-text);
}

.asset-detail-dialog {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.asset-detail-dialog::backdrop {
  background: rgb(15 23 42 / 72%);
}

.asset-detail-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 34px);
}

.asset-detail-head,
.asset-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.asset-detail-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.asset-detail-head h2 {
  margin: 3px 0 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 22px;
}

.asset-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.asset-detail-media {
  display: grid;
  min-width: 0;
  min-height: 480px;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #eef2f7;
}

.asset-detail-image,
.asset-detail-youtube,
.asset-detail-document {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 480px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: #eef2f7;
}

.asset-detail-image {
  cursor: zoom-in;
}

.asset-detail-image img,
.asset-detail-youtube img,
.asset-detail-document img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
}

.asset-detail-youtube {
  background: #111827;
}

.asset-detail-image > span,
.asset-detail-youtube > span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #ffffff;
  background: rgb(15 23 42 / 88%);
  font-size: 12px;
  font-weight: 900;
}

.asset-detail-document {
  align-content: center;
  gap: 12px;
  padding: 20px;
}

.asset-detail-document img {
  max-width: min(100%, 520px);
  max-height: min(58vh, 620px);
}

.asset-detail-document span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.asset-detail-placeholder {
  display: grid;
  max-width: 420px;
  place-items: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
}

.asset-detail-placeholder svg {
  width: 42px;
  height: 42px;
  color: var(--mint-deep);
}

.asset-detail-placeholder strong {
  overflow-wrap: anywhere;
  font-size: 20px;
}

.asset-detail-placeholder span {
  color: var(--ink-soft);
  line-height: 1.6;
  word-break: keep-all;
}

.asset-detail-info {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 18px;
  padding: 22px;
}

.asset-detail-note {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--ink);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: keep-all;
}

.asset-detail-note.is-empty {
  color: var(--ink-soft);
}

.asset-detail-meta {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.asset-detail-meta > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.asset-detail-meta dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.asset-detail-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
}

.asset-detail-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.asset-detail-actions a,
.asset-detail-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.asset-detail-actions [hidden] {
  display: none;
}

.document-viewer {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(880px, calc(100vh - 32px));
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.document-viewer::backdrop {
  background: rgb(15 23 42 / 72%);
}

.document-viewer-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
}

.document-viewer-head,
.document-viewer-toolbar,
.document-annotation-tools,
.document-annotation-colors {
  display: flex;
  align-items: center;
}

.document-viewer-head {
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.document-viewer-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.document-viewer-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.document-viewer-toolbar-spacer {
  flex: 1 1 auto;
}

.document-viewer-toolbar .text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.document-viewer-toolbar .text-button.is-active {
  border-color: var(--mint-strong);
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.document-viewer-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.document-viewer-workspace.is-annotating {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 290px);
}

.document-viewer-annotation-toolbar {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #f8fafc;
}

.document-viewer-annotation-toolbar[hidden] {
  display: none;
}

.document-annotation-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.document-annotation-tool-button {
  min-width: 0;
  min-height: 40px;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 9px;
  font-size: 12px;
}

.document-annotation-tool-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.document-annotation-tools .document-annotation-tool-button.is-active {
  border-color: var(--mint-strong);
  color: #ffffff;
  background: var(--mint-strong);
}

.document-viewer-annotation-toolbar > input {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.document-measurement-panel {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.document-measurement-panel[hidden] {
  display: none;
}

.document-measurement-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.document-measurement-heading strong {
  color: var(--mint-strong);
  text-align: right;
}

.document-measurement-preferences {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.2fr);
  gap: 6px;
}

.document-measurement-preferences label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.document-measurement-preferences select {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.document-measurement-preferences .document-measurement-snap {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.35;
}

.document-measurement-snap input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.document-measurement-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px;
}

.document-measurement-controls label {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.document-measurement-controls input {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.document-measurement-controls .text-button {
  grid-column: 1;
  justify-content: center;
}

.document-measurement-controls .icon-button {
  grid-column: 2;
  grid-row: 2 / span 2;
  width: 40px;
  min-width: 40px;
  height: 100%;
}

.document-measurement-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.document-area-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.document-area-controls[hidden] {
  display: none;
}

.document-area-controls span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.document-area-controls .text-button {
  min-height: 38px;
}

.document-annotation-colors {
  gap: 6px;
}

.document-annotation-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  outline: 1px solid var(--line-strong);
  background: var(--annotation-color);
}

.document-annotation-color.is-active {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}

.document-annotation-color.is-mint {
  --annotation-color: #087f6d;
}

.document-annotation-color.is-amber {
  --annotation-color: #a86608;
}

.document-annotation-color.is-coral {
  --annotation-color: #b64233;
}

.document-annotation-color.is-indigo {
  --annotation-color: #4f46b8;
}

.document-viewer-annotation-toolbar > span {
  min-height: 38px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}

.document-viewer-annotation-toolbar > .primary-button {
  width: 100%;
}

.document-viewer-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  background: #e9edef;
}

.document-viewer-stage.is-pannable {
  cursor: grab;
  touch-action: none;
}

.document-viewer-stage.is-panning {
  cursor: grabbing;
}

.document-viewer-stage.is-annotating {
  cursor: crosshair;
  touch-action: none;
}

.document-viewer-canvas {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.document-viewer-stage.is-panning .document-viewer-canvas,
.document-viewer-stage.is-annotating .document-viewer-canvas {
  transition: none;
}

.document-viewer-canvas img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.document-viewer-annotations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.document-annotation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.document-annotation-lines line {
  stroke: var(--annotation-color);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgb(255 255 255 / 90%));
}

.document-annotation-lines polygon {
  fill: color-mix(in srgb, var(--annotation-color) 18%, transparent);
  stroke: var(--annotation-color);
  stroke-width: 3;
  stroke-linejoin: round;
}

.document-annotation-lines polyline.is-draft {
  fill: color-mix(in srgb, #087f6d 12%, transparent);
  stroke: #087f6d;
  stroke-width: 2.5;
  stroke-dasharray: 2.5 2;
  stroke-linejoin: round;
}

.document-annotation-lines circle.is-draft {
  fill: #087f6d;
  stroke: #ffffff;
  stroke-width: 0.5;
}

.document-annotation-lines line.is-draft {
  stroke-dasharray: 2.5 2;
  opacity: 0.85;
}

.document-annotation-marker,
.document-annotation-handle {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.document-annotation-marker {
  display: inline-flex;
  min-width: 36px;
  min-height: 36px;
  max-width: min(240px, 70%);
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 2px solid #ffffff;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgb(15 23 42 / 24%);
  color: #ffffff;
  background: var(--annotation-color);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
}

.document-annotation-marker.is-pin {
  min-width: 38px;
  width: 38px;
  padding: 7px;
}

.document-annotation-marker.is-pin span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  padding: 4px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgb(15 23 42 / 20%);
  color: var(--ink);
  background: rgb(255 255 255 / 94%);
  transform: translateX(-50%);
}

.document-annotation-marker.is-note {
  border-radius: 5px;
}

.document-annotation-marker.is-area {
  max-width: min(360px, 85%);
  border-radius: 6px;
}

.document-annotation-marker.is-area span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-annotation-marker.is-measure {
  transform: translate(-50%, calc(-50% - 18px));
}

.document-annotation-marker.is-measure.is-calibration {
  transform: translate(-50%, calc(-50% + 18px));
}

.document-annotation-marker.is-selected {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--annotation-color), 0 3px 12px rgb(15 23 42 / 30%);
}

.document-annotation-marker svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.document-viewer-annotations:not(.is-editing) .document-annotation-marker {
  cursor: default;
}

.document-viewer-annotations.is-editing .document-annotation-marker {
  cursor: move;
}

.document-viewer-annotations.is-editing .document-annotation-marker.is-locked {
  cursor: not-allowed;
}

.document-annotation-handle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 7px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--annotation-color);
  background: var(--annotation-color);
  cursor: move;
}

.document-annotation-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mint-strong);
  background: var(--mint-soft);
}

.document-annotation-count svg {
  width: 13px;
  height: 13px;
}

.document-viewer-caption {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.document-card > .prep-card-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.document-card .prep-card-title {
  flex: 1 1 220px;
}

.document-card-commandbar {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
  justify-items: end;
}

.document-layout-actions,
.document-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.document-card-size-compact .document-card-commandbar,
.document-card-size-medium .document-card-commandbar {
  width: 100%;
  justify-items: start;
}

.document-card-size-compact .document-layout-actions,
.document-card-size-compact .document-card-actions,
.document-card-size-medium .document-layout-actions,
.document-card-size-medium .document-card-actions {
  justify-content: flex-start;
}

.document-drag-handle,
.document-order-button {
  width: 34px;
  min-height: 34px;
  font-size: 16px;
}

.document-drag-handle {
  cursor: grab;
}

.document-drag-handle:active {
  cursor: grabbing;
}

.document-order-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.document-size-control {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.document-size-button {
  min-width: 34px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.document-size-button:last-child {
  min-width: 48px;
  border-right: 0;
}

.document-size-button.is-active {
  color: #ffffff;
  background: var(--ink);
}

.document-card-actions .text-button {
  align-self: flex-start;
  height: 34px;
  min-height: 34px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .project-profile-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .project-profile-shell {
    max-height: calc(100vh - 18px);
  }

  .project-profile-head,
  .project-profile-footer {
    padding-inline: 14px;
  }

  .project-profile-grid {
    grid-template-columns: 1fr;
    padding: 16px 14px;
  }

  .project-profile-grid .span-2 {
    grid-column: auto;
  }

  .project-unit-editor-row {
    grid-template-columns: 1fr;
  }

  .document-image-board,
  .document-list {
    grid-template-columns: 1fr;
  }

  .document-image-card,
  .document-card,
  .document-card-size-compact,
  .document-card-size-medium,
  .document-card-size-large,
  .document-card-size-full {
    grid-column: 1 / -1;
  }

  .document-image-card-head {
    display: grid;
  }

  .document-image-card-media.has-multiple {
    grid-template-columns: 1fr;
  }

  .document-image-card-media.has-multiple img {
    height: auto;
  }

  .document-image-card-media[data-media-height="short"] img {
    height: 180px;
  }

  .document-image-card-media[data-media-height="medium"] img {
    height: 290px;
  }

  .document-image-card-media[data-media-height="tall"] img {
    height: 420px;
  }

  .document-display-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-focus-control,
  .document-display-reset {
    grid-column: 1 / -1;
  }

  .document-image-card.document-card-size-compact {
    width: 72%;
  }

  .document-image-card.document-card-size-medium {
    width: 86%;
  }

  .document-image-card.document-card-size-large,
  .document-image-card.document-card-size-full {
    width: 100%;
  }

  .document-card-commandbar {
    width: 100%;
    justify-items: stretch;
  }

  .document-card > .prep-card-head {
    justify-content: flex-start;
  }

  .document-card .prep-card-title {
    flex: 0 1 auto;
    width: 100%;
  }

  .document-layout-actions,
  .document-card-actions {
    justify-content: flex-start;
  }

  .document-drag-handle {
    display: none;
  }

  .document-order-button {
    width: 44px;
    min-height: 44px;
  }

  .document-size-button {
    min-height: 42px;
  }

  .document-card-actions {
    width: 100%;
  }

  .document-card-actions .text-button {
    flex: 1 1 88px;
    height: 44px;
    min-height: 44px;
  }

  .document-list-tools,
  .document-list-tools .select-field,
  .document-list-tools input {
    width: 100%;
    min-width: 0;
  }

  .document-viewer {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .asset-detail-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .asset-detail-shell {
    max-height: calc(100vh - 18px);
  }

  .asset-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-detail-media,
  .asset-detail-image,
  .asset-detail-youtube,
  .asset-detail-document {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .asset-detail-info {
    padding: 16px 14px;
  }

  .asset-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px;
  }

  .asset-detail-actions a,
  .asset-detail-actions button {
    min-width: 0;
    min-height: 44px;
  }

  .asset-detail-actions .primary-button {
    grid-column: 1 / -1;
  }

  .asset-detail-actions:has(#assetDetailAnnotate[hidden]) #assetDetailOriginal {
    grid-column: 1 / -1;
  }

  .document-viewer-head {
    padding: 10px 12px;
  }

  .document-viewer-toolbar {
    gap: 7px;
    padding: 7px 10px;
  }

  .document-viewer-toolbar-spacer {
    flex-basis: 12px;
  }

  .document-viewer-workspace.is-annotating {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) auto;
  }

  .document-viewer-annotation-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-height: min(410px, 48vh);
    padding: 10px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .document-annotation-tools {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-viewer-annotation-toolbar > input,
  .document-measurement-panel,
  .document-annotation-manager,
  .document-measurement-results,
  .document-viewer-annotation-toolbar > span,
  .document-viewer-annotation-toolbar > .primary-button {
    grid-column: 1 / -1;
  }

  .document-viewer-annotation-toolbar > span {
    min-height: 18px;
  }

  .document-annotation-tool-button {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 10px;
  }

  .document-annotation-color {
    width: 32px;
    height: 32px;
  }

  .document-viewer-stage {
    padding: 8px;
  }

  .document-annotation-marker {
    min-height: 40px;
    font-size: 11px;
  }

  .document-annotation-marker.is-pin {
    width: 42px;
    min-width: 42px;
  }

  .document-viewer-annotations.is-editing .document-annotation-marker:not(.is-selected) {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .document-viewer-annotations.is-editing .document-annotation-marker:not(.is-selected) span {
    display: none;
  }

  .document-annotation-marker.is-pin span {
    transform: translate(-50%, var(--annotation-label-shift));
  }

  .document-annotation-marker.is-room,
  .document-annotation-marker.is-note {
    transform: translate(-50%, calc(-50% + var(--annotation-label-shift)));
  }

  .document-annotation-handle {
    width: 34px;
    height: 34px;
  }

  .document-annotation-marker.is-measure {
    transform: translate(-50%, calc(-50% - 22px + var(--annotation-label-shift)));
  }

  .document-annotation-marker.is-measure.is-calibration {
    transform: translate(-50%, calc(-50% + 22px + var(--annotation-label-shift)));
  }

  .document-area-controls .text-button {
    min-height: 44px;
  }

  .dashboard-quick-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action-controls {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-action-confirmations {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .option-decision-impact,
  .option-confirmation-row,
  .option-payment-tracking {
    align-items: stretch;
    flex-direction: column;
  }

  .option-decision-fields {
    grid-template-columns: 1fr;
  }

  .option-confirmation-actors {
    justify-content: flex-start;
  }

  .option-priority-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .option-priority-board {
    scroll-margin-top: 64px;
  }

  .option-decision-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .option-priority-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "facts"
      "impact"
      "action";
  }

  .option-priority-facts {
    grid-template-columns: 1fr;
  }

  .option-priority-impact {
    grid-template-columns: 1fr;
  }

  .option-priority-row > .ghost-button {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: auto;
    grid-template-rows: auto auto auto auto;
    align-self: stretch;
    overflow: visible;
  }

  .content-grid,
  .finance-layout,
  .option-layout,
  .movein-board,
  .info-workspace,
  .user-admin-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .info-workspace > .info-brief,
  .info-workspace > .notice-panel,
  .info-workspace > .unit-panel {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mortgage-quote-overview,
  .mortgage-quote-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mortgage-simulator-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-today-workspace {
    grid-template-columns: 1fr;
  }

  .assignment-summary,
  .dashboard-readiness-grid,
  .payment-readiness-summary,
  .cashflow-insight,
  .savings-target-grid,
  .savings-projection-grid,
  .savings-ledger-summary,
  .savings-ledger-workspace,
  .savings-ledger-lists,
  .prep-status-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid .feature-card,
  .content-grid > .surface-panel,
  .dashboard-action-panel,
  .dashboard-risk-panel,
  .dashboard-change-panel,
  .option-layout > .surface-panel:nth-child(1),
  .option-layout > .surface-panel:nth-child(2),
  .finance-layout > .surface-panel,
  .finance-layout > .finance-assumptions-panel,
  .finance-risk-panel,
  .info-brief,
  .notice-panel,
  .unit-panel,
  .asset-panel,
  .prep-editor,
  .prep-overview,
  .prep-timeline-panel,
  .prep-compare-panel,
  .user-admin-layout > .surface-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .finance-workspace-nav {
    top: 52px;
    gap: 3px;
    margin-inline: -2px;
    padding: 4px;
  }

  .finance-workspace-nav button {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 12px;
  }

  .finance-workspace-overview {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
  }

  .finance-workspace-overview > div:first-child {
    grid-column: 1 / -1;
  }

  .finance-workspace-overview .secondary-button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .finance-section-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .finance-section-nav button {
    min-width: 0;
    min-height: 96px;
    padding: 14px;
  }

  [data-finance-workspace-panel] {
    scroll-margin-top: 162px;
  }

  .finance-integrity-strip {
    grid-template-columns: 1fr;
  }

  .finance-integrity-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-screen {
    padding: 20px 14px;
  }

  .login-panel {
    gap: 18px;
    padding: 26px 22px 28px;
  }

  .login-brand {
    padding-bottom: 18px;
  }

  .login-brand-mark {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .login-brand h1 {
    font-size: 26px;
  }

  .invite-fields {
    grid-template-columns: 1fr;
  }

  .mortgage-quote-overview,
  .mortgage-quote-form,
  .mortgage-quote-list,
  .mortgage-simulator-fields {
    grid-template-columns: 1fr;
  }

  .mortgage-quote-editor {
    scroll-margin-top: 182px;
  }

  .mortgage-quote-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mortgage-quote-overview strong {
    font-size: 15px;
  }

  .mortgage-quote-note,
  .mortgage-prepayment-strategy {
    grid-column: auto;
  }

  .mortgage-quote-form-actions,
  .mortgage-quote-card-head,
  .mortgage-simulator-head {
    align-items: stretch;
    flex-direction: column;
  }

  .mortgage-quote-form-actions button,
  .mortgage-quote-card-actions button {
    flex: 1 1 120px;
    min-height: 44px;
  }

  .mortgage-quote-card-actions .danger-button {
    margin-left: 0;
  }

  .invite-fields .span-2 {
    grid-column: auto;
  }

  .invite-fields .avatar-choice-grid,
  #inviteAdminAvatarChoices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 10px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
  }

  .brand-lockup {
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .brand-lockup h1 {
    font-size: 18px;
  }

  .sidebar .eyebrow {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .tab-nav {
    grid-auto-columns: minmax(76px, max-content);
    gap: 6px;
    margin: 0 -14px;
    padding: 4px 14px 8px;
    background: transparent;
  }

  .tab-button {
    min-height: 38px;
    padding: 0 12px;
    color: var(--ink-soft);
    background: var(--panel);
    font-size: 14px;
  }

  .tab-button.is-active {
    color: #ffffff;
    background: var(--ink);
  }

  .sidebar-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .sidebar-foot .ghost-button,
  .sidebar-foot .version,
  .sidebar-foot .user-chip,
  .sidebar-foot .save-status-chip {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .sidebar-foot #logoutButton {
    margin-left: auto;
  }

  .planner-stage {
    gap: 14px;
    padding: 14px;
  }

  .hero-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-copy {
    min-height: auto;
    padding: 16px;
  }

  .hero-copy h2 {
    font-size: 26px;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-metrics div {
    min-height: 82px;
    padding: 12px;
  }

  .hero-metrics dd {
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .dashboard-grid,
  .content-grid,
  .finance-layout,
  .option-layout,
  .movein-board,
  .info-workspace,
  .user-admin-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-monthly-head,
  .monthly-closing-state {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-today-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-today-head > .ghost-button {
    min-height: 44px;
  }

  .dashboard-today-amounts {
    grid-template-columns: 1fr;
  }

  .dashboard-today-amounts > div {
    padding: 12px;
  }

  .dashboard-today-panel .assignment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-today-panel .dashboard-action-controls .text-button,
  .dashboard-today-panel .compact-section-head .ghost-button {
    min-height: 44px;
  }

  .reconciliation-inbox-panel {
    scroll-margin-top: 64px;
  }

  .reconciliation-inbox-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reconciliation-inbox-head .status-pill {
    align-self: flex-start;
  }

  .reconciliation-inbox-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reconciliation-inbox-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reconciliation-inbox-filters button {
    justify-content: space-between;
    min-width: 0;
    min-height: 44px;
    border-radius: 8px;
  }

  .reconciliation-inbox-filters button:first-child {
    grid-column: 1 / -1;
  }

  .reconciliation-inbox-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .reconciliation-inbox-amount {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .reconciliation-inbox-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .reconciliation-inbox-actions > button {
    width: 100%;
    min-height: 44px;
  }

  .reconciliation-inbox-confirm {
    justify-content: space-between;
    min-height: 44px;
  }

  .collaboration-inbox-panel {
    scroll-margin-top: 64px;
  }

  .collaboration-inbox-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collaboration-inbox-filters button {
    min-height: 48px;
    padding: 9px 10px;
  }

  .collaboration-task {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .collaboration-task-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collaboration-role {
    padding-left: 7px;
  }

  .collaboration-task-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collaboration-task-activity > summary {
    min-height: 44px;
  }

  .collaboration-activity-body,
  .collaboration-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaboration-comment-form .ghost-button {
    min-height: 44px;
  }

  .collaboration-task-actions .ghost-button,
  .collaboration-task-actions .text-button {
    min-height: 44px;
    white-space: normal;
  }

  .monthly-closing-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .monthly-closing-controls input {
    width: 100%;
  }

  .monthly-closing-controls .ghost-button {
    grid-column: 1 / -1;
  }

  .monthly-execution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-execution-summary > div {
    padding: 13px 10px;
  }

  .monthly-execution-summary strong {
    font-size: 17px;
  }

  .monthly-closing-people {
    justify-content: flex-start;
  }

  .monthly-execution-workspace {
    grid-template-columns: 1fr;
  }

  .monthly-closing-history {
    grid-template-columns: 1fr;
  }

  .monthly-closing-history h4 {
    margin-bottom: 2px;
  }

  .monthly-closing-history-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .monthly-closing-history-item time {
    grid-column: 1 / -1;
  }

  .dashboard-detail-panel > summary,
  .dashboard-detail-body {
    padding-inline: 14px;
  }

  .monthly-closing-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .monthly-closing-shell {
    max-height: calc(100vh - 18px);
  }

  .monthly-closing-dialog-head,
  .monthly-closing-dialog-footer {
    padding-inline: 12px;
  }

  .monthly-closing-steps button strong {
    display: none;
  }

  .monthly-closing-steps button {
    min-height: 48px;
  }

  .monthly-closing-dialog-body {
    padding: 18px 14px;
  }

  .monthly-closing-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-closing-flow button {
    min-height: 76px;
  }

  .monthly-closing-import-history > div,
  .monthly-closing-review-rows > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .monthly-closing-import-history time,
  .monthly-closing-review-rows small {
    grid-column: 1 / -1;
  }

  .monthly-closing-balance-form {
    grid-template-columns: 1fr;
  }

  .monthly-closing-account-source {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-closing-account-source > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .monthly-closing-balance-form .monthly-closing-balance-note {
    grid-column: auto;
  }

  .monthly-closing-step-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .monthly-closing-step-actions > button,
  .monthly-closing-balance-form > button {
    width: 100%;
  }

  .monthly-closing-missing-actions > button {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .monthly-closing-review-grid,
  .monthly-closing-payment-compare {
    grid-template-columns: 1fr;
  }

  .monthly-closing-dialog-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .monthly-closing-dialog-footer .state-status {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }

  .monthly-closing-dialog-footer .primary-button {
    grid-column: 3;
  }

  .assignment-summary,
  .dashboard-readiness-grid,
  .payment-readiness-summary,
  .payment-readiness-row,
  .cashflow-insight,
  .savings-target-grid,
  .savings-projection-grid,
  .savings-ledger-summary,
  .savings-ledger-workspace,
  .savings-form-grid,
  .savings-ledger-lists,
  .savings-account-metrics,
  .savings-record-metrics,
  .prep-status-board,
  .avatar-choice-grid {
    grid-template-columns: 1fr;
  }

  .payment-execution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-action-item {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .payment-action-rank {
    justify-self: start;
  }

  .payment-action-item > button {
    width: 100%;
    justify-content: center;
  }

  .payment-execution-row {
    grid-template-columns: 1fr;
  }

  .payment-execution-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .payment-execution-actions button,
  .payment-execution-actions .payment-execution-complete {
    min-height: 44px;
    width: 100%;
  }

  .payment-execution-actions .payment-execution-complete {
    display: grid;
    place-items: center;
  }

  .mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid .feature-card.accent-savings {
    grid-template-columns: 1fr;
  }

  .recent-change-tools {
    width: 100%;
    justify-content: stretch;
  }

  .recent-change-tools select,
  .recent-change-tools .ghost-button {
    flex: 1 1 120px;
  }

  .recent-change-advanced-filters {
    grid-template-columns: 1fr;
  }

  .recent-change-advanced-filters select {
    min-height: 44px;
  }

  .recent-change-bulk-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
  }

  .recent-change-select-all {
    min-height: 44px;
  }

  .recent-change-bulk-toolbar > strong {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0;
  }

  .recent-change-bulk-toolbar .text-button {
    min-height: 44px;
  }

  .recent-change-item-selector {
    min-height: 44px;
  }

  .recent-change-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recent-change-overview > div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .recent-change-overview > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .recent-change-item > .text-button {
    grid-column: 1;
    min-height: 44px;
    justify-self: stretch;
  }

  .recent-change-item > .recent-change-item-actions {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .recent-change-item-actions .text-button {
    min-height: 44px;
  }

  .recent-change-history > summary {
    min-height: 44px;
  }

  .recent-change-diff > div {
    grid-template-columns: 1fr;
  }

  .state-history-item {
    grid-template-columns: 1fr;
  }

  .cash-actual-row {
    grid-template-columns: 1fr;
  }

  .cash-actual-group-head {
    grid-template-columns: 1fr;
  }

  .cash-actual-list {
    scroll-margin-top: 124px;
  }

  .cash-actual-workspace {
    scroll-margin-top: 118px;
  }

  .cash-actual-group-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-funding-history-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-funding-history-source {
    grid-column: 1 / -1;
  }

  .cash-actual-add-source {
    width: 100%;
  }

  .cash-actual-toolbar,
  .cash-plan-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-actual-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-actual-form input,
  .cash-actual-form select,
  .cash-actual-form textarea,
  .cash-actual-form button {
    min-height: 44px;
  }

  .cash-actual-plan-field,
  .cash-actual-description-field,
  .cash-actual-note,
  .cash-actual-proof-field,
  .cash-actual-proof-preview,
  .cash-actual-form-actions {
    grid-column: 1 / -1;
  }

  .cash-plan-row > div:first-child,
  .cash-plan-row > div:nth-child(4),
  .cash-plan-actions,
  .cash-actual-search,
  .cash-actual-toolbar > button {
    grid-column: 1 / -1;
  }

  .cash-plan-actions,
  .cash-actual-toolbar > button {
    width: 100%;
  }

  .cash-plan-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-actual-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cash-actual-summary strong {
    white-space: nowrap;
    font-size: 14px;
  }

  .transaction-import-source,
  .transaction-import-mapping-grid,
  .transaction-import-profile-tools,
  .transaction-import-rule-form,
  .transaction-import-summary,
  .monthly-closing-import-summary,
  .monthly-closing-household-summary,
  .monthly-closing-balance-summary,
  .monthly-closing-living-summary,
  .living-expense-summary,
  .living-expense-budget-grid,
  .living-expense-allocation-grid,
  .living-expense-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-balance-fields,
  .monthly-balance-result-grid,
  .monthly-balance-coverage,
  .financial-account-form,
  .financial-snapshot-form,
  .financial-reconciliation-summary,
  .report-balance-reconciliation {
    grid-template-columns: 1fr;
  }

  .monthly-balance-reconciliation > summary {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }

  .dashboard-account-reconciliation {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-account-reconciliation .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .finance-layout > .account-reconciliation-panel {
    padding: 0 16px 18px;
  }

  .account-reconciliation-panel > summary {
    position: relative;
    padding-right: 32px;
  }

  .account-reconciliation-panel > summary > svg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .account-reconciliation-panel[open] > summary > svg {
    transform: translateY(-50%) rotate(180deg);
  }

  .monthly-balance-note {
    grid-column: auto;
  }

  .monthly-balance-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .monthly-balance-actions .primary-button {
    width: 100%;
    min-height: 46px;
  }

  .monthly-balance-result-grid article + article {
    border-top: 1px solid var(--line);
  }

  .monthly-balance-coverage > div + div {
    border-top: 1px solid var(--line);
  }

  .monthly-balance-meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .financial-account-reconciliation .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .financial-account-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .financial-account-amount {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

  .financial-account-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .financial-snapshot-note {
    grid-column: auto;
  }

  .living-expense-head {
    align-items: stretch;
    flex-direction: column;
  }

  .living-expense-month-tools {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    justify-content: stretch;
  }

  .living-expense-month-tools input {
    width: 100%;
  }

  .living-expense-month-tools .ghost-button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .living-expense-main-grid,
  .living-expense-record-workspace {
    grid-template-columns: 1fr;
  }

  .living-expense-budget-editor {
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .living-expense-category-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .living-expense-trend {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .living-expense-trend-column {
    min-width: 0;
    padding-inline: 3px;
  }

  .living-expense-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .living-expense-record-audit,
  .living-expense-record-actions {
    grid-column: 1 / -1;
  }

  .living-expense-record-actions button {
    flex: 1;
    min-height: 44px;
  }

  .transaction-import-file {
    grid-column: 1 / -1;
  }

  #transactionImportEncodingField,
  .transaction-import-source button {
    grid-column: auto;
  }

  .transaction-import-profile-field,
  #transactionImportSheetField {
    grid-column: 1 / -1;
  }

  .transaction-import-profile-tools .compact-field {
    grid-column: 1 / -1;
  }

  .transaction-import-rule-manager {
    padding: 12px;
  }

  .transaction-import-rule-keyword,
  .transaction-import-rule-form button {
    grid-column: 1 / -1;
  }

  .transaction-import-rule-form button,
  .transaction-import-rule-form input,
  .transaction-import-rule-form select {
    min-height: 44px;
  }

  .transaction-import-rule-item {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }

  .transaction-import-source button,
  .transaction-import-tools button,
  .transaction-import-tools select {
    min-height: 44px;
  }

  .transaction-import-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transaction-import-tools .primary-button {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

  .transaction-import-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 10px;
  }

  .transaction-import-main {
    grid-column: 2;
  }

  .transaction-import-amount {
    grid-column: 3;
    grid-row: 1;
  }

  .transaction-import-row > select {
    grid-column: 2 / -1;
  }

  .transaction-import-target {
    grid-column: 2 / -1;
  }

  .transaction-import-row-state {
    grid-column: 2 / -1;
  }

  .transaction-import-history-item {
    grid-template-columns: 1fr;
  }

  .cash-actual-row {
    gap: 8px;
    padding: 13px;
  }

  .cash-actual-actions {
    justify-content: stretch;
  }

  .cash-actual-actions button {
    flex: 1 1 0;
  }

  .saved-finance-scenario-head {
    align-items: stretch;
    flex-direction: column;
  }

  .state-history-actions {
    justify-content: stretch;
  }

  .state-history-actions button {
    flex: 1 1 120px;
  }

  .dashboard-grid .feature-card,
  .content-grid > .surface-panel,
  .option-layout > .surface-panel,
  .finance-layout > .surface-panel,
  .info-workspace > .surface-panel,
  .movein-board > .surface-panel,
  .user-admin-layout > .surface-panel {
    grid-column: 1 / -1;
  }

  .surface-panel,
  .feature-card {
    padding: 16px;
  }

  .notification-list,
  .funding-simulator-form,
  .funding-simulator-result {
    grid-template-columns: 1fr;
  }

  .notification-item {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .notification-item > .text-button {
    grid-column: 2;
    width: 100%;
  }

  .calendar-head {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-controls {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    width: 100%;
  }

  .calendar-controls select {
    grid-column: 1 / -1;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-day,
  .calendar-day:nth-child(7n) {
    display: none;
    min-height: 0;
    border-right: 0;
  }

  .calendar-day.has-events,
  .calendar-day.is-today {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .calendar-events {
    margin-top: 0;
  }

  .calendar-event {
    min-height: 44px;
    align-content: center;
  }

  .funding-simulator-form > .primary-button {
    min-height: 44px;
  }

  .prep-list-toolbar {
    padding: 10px;
  }

  #panel-movein.is-active {
    padding-bottom: 0;
  }

  .prep-list-add {
    position: static;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    box-shadow: none;
  }

  .prep-list-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ops-monitor-heading-status {
    justify-items: start;
    width: 100%;
    text-align: left;
  }

  .ops-monitor-alert {
    grid-template-columns: 1fr;
  }

  .ops-monitor-alert button {
    width: 100%;
    min-height: 44px;
  }

  .ops-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-health-actions {
    width: 100%;
  }

  .data-health-actions button {
    flex: 1 1 0;
    min-height: 44px;
  }

  .data-health-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-health-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .data-health-row > button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .ops-diagnostics-event {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .savings-ledger-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-account-metrics,
  .savings-record-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .option-status-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.report-context-tools,
[data-report-workspace-panel] {
  grid-column: 1 / -1;
}

.user-admin-layout[data-user-section='user-account'] > .account-profile-panel,
.user-admin-layout[data-user-section='user-recent'] > .recent-user-change-panel {
  grid-column: 1 / -1;
}

.report-context-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

.report-context-tools .report-export-bar {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.report-overview-panel,
.report-annual-panel,
.report-action-panel {
  grid-column: 1 / -1;
}

.report-action-panel {
  scroll-margin-top: 82px;
}

.report-action-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.report-action-layout > section {
  min-width: 0;
}

.report-signal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  border-block: 1px solid var(--line);
}

.report-signal-summary > div {
  min-width: 0;
  padding: 10px 8px;
  border-top: 3px solid var(--line-strong);
}

.report-signal-summary > div + div {
  border-left: 1px solid var(--line);
}

.report-signal-summary span,
.report-signal-summary strong {
  display: block;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.report-signal-summary span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.report-signal-summary strong {
  margin-top: 4px;
  font-size: 16px;
}

.report-signal-summary .is-missing {
  border-top-color: var(--amber);
}

.report-signal-summary .is-risk {
  border-top-color: var(--coral);
}

.report-signal-summary .is-change {
  border-top-color: #4977b8;
}

.report-signal-summary .is-stable {
  border-top-color: var(--mint);
}

.report-cause-list {
  display: grid;
  gap: 8px;
}

.report-cause-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--panel);
}

.report-cause-row.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-cause-row.is-missing {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.report-cause-row.is-done {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.report-cause-row > div {
  min-width: 0;
}

.report-cause-row span,
.report-cause-row p,
.report-forecast-grid span,
.report-forecast-grid p,
.report-adjustment-advice span,
.report-adjustment-advice p {
  color: var(--ink-soft);
  font-size: 11px;
}

.report-cause-row span,
.report-forecast-grid span,
.report-adjustment-advice span {
  font-weight: 800;
}

.report-cause-row strong,
.report-cause-row p {
  display: block;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.report-cause-row > div > strong {
  margin-top: 4px;
  font-size: 14px;
}

.report-cause-row > div > p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.report-cause-row > strong {
  font-size: 14px;
  white-space: nowrap;
}

.report-cause-row .text-button {
  min-height: 40px;
  white-space: nowrap;
}

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

.report-forecast-grid > div {
  min-width: 0;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #4977b8;
  border-radius: 8px;
  background: var(--panel);
}

.report-forecast-grid > div.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-forecast-grid > div.is-done {
  border-left-color: var(--mint);
}

.report-forecast-grid strong,
.report-forecast-grid p {
  display: block;
  min-width: 0;
}

.report-forecast-grid strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.report-forecast-grid p {
  margin: 5px 0 0;
  line-height: 1.4;
  word-break: keep-all;
}

.report-adjustment-advice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: var(--mint-soft);
}

.report-adjustment-advice.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-adjustment-advice.is-active {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.report-adjustment-advice strong,
.report-adjustment-advice p {
  display: block;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.report-adjustment-advice strong {
  margin-top: 5px;
  font-size: 15px;
}

.report-adjustment-advice p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.report-adjustment-advice .ghost-button {
  min-height: 40px;
  white-space: nowrap;
}

.report-head {
  align-items: flex-start;
}

.report-print-header {
  display: none;
}

.report-period-tools {
  display: grid;
  grid-template-columns: 38px 92px 38px 92px 38px;
  gap: 8px;
  align-items: center;
}

.report-period-tools input,
.report-period-tools select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-weight: 700;
}

.report-export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.report-export-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
}

.report-export-actions .ghost-button {
  min-height: 40px;
  white-space: nowrap;
}

.report-export-status {
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.report-export-status.is-error {
  color: var(--coral-text);
}

.report-month-summary,
.report-annual-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-metric,
.report-annual-summary > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}

.report-metric.is-savings {
  border-left-color: var(--mint);
}

.report-metric.is-income {
  border-left-color: #4977b8;
}

.report-metric.is-balance {
  border-left-color: #4977b8;
}

.report-metric.is-living {
  border-left-color: var(--coral);
}

.report-metric.is-payment {
  border-left-color: #d6a228;
}

.report-metric.is-category {
  border-left-color: var(--violet);
}

.report-metric.is-warning,
.report-annual-summary > .is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-metric.is-missing {
  border-left-color: var(--line-strong);
  background: var(--panel-strong);
}

.report-metric.is-done,
.report-annual-summary > .is-done {
  border-left-color: var(--mint);
}

.report-metric span,
.report-annual-summary span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-metric strong,
.report-annual-summary strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: normal;
  word-break: keep-all;
  font-size: 20px;
}

.report-metric strong .money-nowrap {
  display: inline;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.report-metric p,
.report-annual-summary p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.hero-metrics > div,
.feature-card,
.finance-summary > div,
.report-metric {
  position: relative;
}

.report-metric:has(.metric-drilldown-button) {
  padding-right: 14px;
}

.report-metric:has(.metric-drilldown-button) > span:first-child {
  padding-right: 40px;
}

.metric-drilldown-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  min-height: 36px;
  color: var(--ink-soft);
  background: var(--paper);
}

.metric-drilldown-button svg {
  width: 17px;
  height: 17px;
}

.finance-summary > div:has(.metric-drilldown-button) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px 10px;
}

.finance-summary > div:has(.metric-drilldown-button) > dt {
  grid-column: 1;
  grid-row: 1;
}

.finance-summary > div:has(.metric-drilldown-button) > dd {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  white-space: nowrap;
}

.finance-summary > div:has(.metric-drilldown-button) > .metric-drilldown-button {
  position: static;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.calculation-drilldown-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-strong);
}

.calculation-drilldown-dialog::backdrop {
  background: rgba(19, 24, 29, 0.46);
}

.calculation-drilldown-shell {
  display: grid;
  max-height: calc(100vh - 26px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.calculation-drilldown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.calculation-drilldown-head h2,
.calculation-drilldown-head p {
  margin: 0;
}

.calculation-drilldown-head h2 {
  margin-top: 3px;
  font-size: 23px;
}

.calculation-drilldown-head p:last-child {
  margin-top: 7px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-wrap: pretty;
  word-break: keep-all;
}

.calculation-drilldown-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--mint-soft);
}

.calculation-drilldown-total span,
.calculation-drilldown-total p,
.calculation-drilldown-rows span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.calculation-drilldown-total strong {
  font-size: 22px;
}

.calculation-drilldown-total p {
  grid-column: 1 / -1;
  margin: 0;
}

.calculation-drilldown-rows {
  overflow-y: auto;
  padding: 0 20px;
}

.calculation-drilldown-rows article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.calculation-drilldown-rows article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.calculation-drilldown-rows article strong {
  overflow-wrap: anywhere;
}

.calculation-drilldown-rows article > strong {
  text-align: right;
  white-space: nowrap;
}

.calculation-drilldown-rows .is-negative {
  color: var(--coral-text);
}

.calculation-drilldown-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.income-plan-change-body {
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
}

.income-plan-change-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: var(--radius);
  background: var(--panel);
}

.income-plan-change-source span,
.income-plan-change-source small {
  color: var(--ink-soft);
  font-weight: 800;
}

.income-plan-change-source strong:last-of-type {
  white-space: nowrap;
}

.income-plan-change-source small {
  grid-column: 1 / -1;
}

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

.income-plan-change-body .state-status {
  min-height: 20px;
  margin: 0;
}

.income-plan-copy-body {
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
}

.income-plan-copy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.income-plan-copy-summary > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.income-plan-copy-summary span,
.income-plan-copy-summary strong,
.income-plan-copy-row span,
.income-plan-copy-row strong,
.income-plan-copy-row small {
  display: block;
}

.income-plan-copy-summary span,
.income-plan-copy-row span,
.income-plan-copy-row small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.income-plan-copy-summary strong,
.income-plan-copy-row strong {
  margin-top: 4px;
}

.income-plan-copy-rows {
  display: grid;
  gap: 8px;
}

.income-plan-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr);
  gap: 8px 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: var(--radius);
}

.income-plan-copy-row.is-carried,
.income-plan-copy-row.is-duplicate {
  border-left-color: var(--line-strong);
}

.income-plan-copy-row > div,
.income-plan-copy-row .compact-field {
  min-width: 0;
}

.income-plan-copy-row > div > strong {
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.income-plan-copy-row-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 850;
}

.income-plan-copy-row.is-duplicate .income-plan-copy-row-status {
  color: var(--amber-text);
}

.income-plan-copy-confirm {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.income-plan-copy-confirm input {
  width: 20px;
  height: 20px;
}

.income-plan-copy-body .state-status {
  min-height: 20px;
  margin: 0;
}

.report-detail-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.report-detail-nav .ghost-button {
  min-height: 42px;
}

.report-month-compare,
.report-activity {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

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

.report-subhead span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-subhead strong {
  font-size: 13px;
}

.report-compare-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.report-compare-row > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-compare-row > strong {
  font-size: 14px;
}

.report-compare-row > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.report-compare-row.is-better {
  border-color: var(--mint-line);
  background: var(--mint-soft);
}

.report-compare-row.is-worse {
  border-color: #efb7c1;
  background: var(--coral-soft);
}

.report-balance-reconciliation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  border-left: 4px solid var(--mint-strong);
  background: var(--line);
}

.report-balance-reconciliation.is-warning {
  border-left-color: var(--amber);
}

.report-balance-reconciliation > div {
  min-width: 0;
  padding: 12px;
  background: var(--paper);
}

.report-balance-reconciliation span,
.report-balance-reconciliation strong {
  display: block;
}

.report-balance-reconciliation span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.report-balance-reconciliation strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.report-balance-reconciliation p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.report-closing-snapshot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.report-snapshot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.report-snapshot-head > div {
  min-width: 0;
}

.report-snapshot-head span:first-child {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-snapshot-head strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

.report-snapshot-head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.report-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.report-snapshot-row {
  min-width: 0;
  padding: 10px 11px;
  border-left: 3px solid var(--mint);
  background: var(--panel);
}

.report-snapshot-row.is-changed {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-snapshot-row > span,
.report-snapshot-row > strong,
.report-snapshot-row > p {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-snapshot-row > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.report-snapshot-row > strong {
  margin-top: 4px;
  font-size: 14px;
}

.report-snapshot-row > p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-annual-head-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.report-annual-head-actions .ghost-button {
  min-height: 40px;
}

.report-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.report-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.report-legend .is-savings,
.report-annual-bars .is-savings {
  background: var(--mint);
}

.report-legend .is-income,
.report-annual-bars .is-income {
  background: #4977b8;
}

.report-legend .is-living,
.report-annual-bars .is-living {
  background: var(--coral);
}

.report-legend .is-payment {
  background: #d6a228;
}

.report-annual-summary {
  margin-bottom: 18px;
}

.report-income-bridge {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.report-income-bridge-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-income-bridge-head span,
.report-income-bridge-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-income-bridge-head strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.report-income-bridge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-income-bridge-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel);
}

.report-income-bridge-card strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  overflow-wrap: normal;
  word-break: keep-all;
}

.report-income-bridge-card p,
.report-income-bridge-note,
.report-income-missing p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.report-income-bridge-card.is-review {
  border-left: 4px solid var(--amber);
}

.report-income-bridge-card.is-done {
  border-left: 4px solid var(--mint);
}

.report-income-bridge-note {
  margin: 0;
}

.report-income-missing {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.report-income-missing > strong {
  display: block;
  font-size: 13px;
}

.report-income-missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.report-income-missing-actions button {
  min-width: 48px;
  min-height: 40px;
}

.report-income-inbox {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.report-income-inbox-head,
.report-income-inbox-head-actions,
.report-income-inbox-title,
.report-income-inbox-confirm {
  display: flex;
  align-items: center;
}

.report-income-inbox-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-income-inbox-head > div:first-child > span,
.report-income-inbox-summary span,
.report-income-inbox-amounts span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.report-income-inbox-head > div:first-child > strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.report-income-inbox-head p,
.report-income-inbox-main p,
.report-income-inbox-note {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.report-income-inbox-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.report-income-inbox-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.report-income-inbox-summary > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel-soft);
}

.report-income-inbox-summary strong {
  display: block;
  margin-top: 3px;
}

.report-income-inbox-summary .is-missing {
  border-left: 4px solid var(--coral);
}

.report-income-inbox-summary .is-partial {
  border-left: 4px solid var(--amber);
}

.report-income-inbox-summary .is-exceeded,
.report-income-inbox-summary .is-extra {
  border-left: 4px solid #4977b8;
}

.report-income-inbox-list {
  display: grid;
  gap: 8px;
}

.report-income-inbox-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) minmax(190px, auto);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel-soft);
}

.report-income-inbox-item.is-missing {
  border-left-color: var(--coral);
}

.report-income-inbox-item.is-partial {
  border-left-color: var(--amber);
}

.report-income-inbox-item.is-exceeded,
.report-income-inbox-item.is-extra {
  border-left-color: #4977b8;
}

.report-income-inbox-item.is-confirmed {
  border-left-color: var(--mint);
  background: color-mix(in srgb, var(--mint) 6%, var(--panel));
}

.report-income-inbox-title {
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.income-inbox-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--line);
}

.income-inbox-status.is-missing {
  color: var(--coral-text);
  background: color-mix(in srgb, var(--coral) 14%, var(--panel));
}

.income-inbox-status.is-partial {
  color: #8a5b00;
  background: color-mix(in srgb, var(--amber) 18%, var(--panel));
}

.income-inbox-status.is-exceeded,
.income-inbox-status.is-extra {
  color: #315d9a;
  background: color-mix(in srgb, #4977b8 14%, var(--panel));
}

.report-income-inbox-main > strong {
  display: block;
  margin-top: 6px;
}

.report-income-inbox-amounts {
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 0;
  text-align: right;
}

.report-income-inbox-amounts strong {
  margin-top: 2px;
  word-break: keep-all;
}

.report-income-inbox-amounts span,
.report-income-inbox-amounts strong {
  white-space: nowrap;
}

.report-income-inbox-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.report-income-inbox-actions > .ghost-button {
  min-height: 40px;
}

.report-income-inbox-confirm {
  justify-content: flex-end;
  gap: 7px;
  min-height: 30px;
}

.report-income-inbox-confirm > div {
  display: flex;
  gap: 4px;
}

.report-income-inbox-confirm .actor-chip {
  max-width: 130px;
}

.report-income-inbox-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.report-annual-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  min-height: 220px;
}

.report-annual-column {
  display: grid;
  grid-template-rows: 22px 34px 120px 30px;
  gap: 4px;
  min-width: 0;
  padding: 6px 3px;
  border-bottom: 3px solid transparent;
  text-align: center;
}

.report-annual-column.is-current {
  border-bottom-color: var(--ink);
  background: var(--panel);
}

.report-annual-month {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.report-annual-values span {
  display: block;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-annual-values span:nth-child(1) {
  color: #4977b8;
}

.report-annual-values span:nth-child(2) {
  color: var(--mint-text);
}

.report-annual-values span:nth-child(3) {
  color: var(--coral-text);
}

.report-annual-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  border-bottom: 1px solid var(--line-strong);
}

.report-annual-bars i {
  width: min(30%, 20px);
  min-height: 0;
  border-radius: 3px 3px 0 0;
}

.report-payment-label {
  align-self: center;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-payment-label.is-actual {
  color: var(--ink);
}

.report-payment-label.is-planned {
  color: #9a6900;
}

.report-category-list,
.report-contribution-list {
  display: grid;
  gap: 8px;
}

.report-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: var(--radius);
}

.report-category-row.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-category-main,
.report-category-amount {
  display: grid;
  gap: 3px;
}

.report-category-main span,
.report-category-amount span {
  color: var(--ink-soft);
  font-size: 11px;
}

.report-category-amount {
  text-align: right;
}

.report-category-progress {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel-strong);
}

.report-category-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}

.report-category-row.is-warning .report-category-progress span {
  background: var(--coral);
}

.report-contribution-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.report-contribution-summary > div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.report-contribution-summary span,
.report-contribution-summary strong {
  display: block;
}

.report-contribution-summary span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.report-contribution-summary strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.report-household-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.report-household-flow-row > strong {
  color: var(--mint-text);
  align-self: center;
  font-weight: 900;
  white-space: nowrap;
}

.report-household-flow-row > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.report-activity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.report-activity-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .mortgage-affordability-head {
    align-items: stretch;
    flex-direction: column;
  }

  .mortgage-affordability-controls {
    width: 100%;
    min-width: 0;
  }

  .mortgage-affordability-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .household-month-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .household-starter {
    grid-template-columns: 1fr;
  }

  .household-starter-main {
    padding-right: 0;
  }

  .household-employment-scenario {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .household-employment-scenario > summary {
    padding-left: 0;
  }

  .household-employment-body {
    padding-left: 0;
  }

  .household-cashflow-insights,
  .household-cashflow-workspace,
  .household-transfer-workspace {
    grid-template-columns: 1fr;
  }

  .household-cashflow-insights > section:last-child,
  .household-cashflow-column + .household-cashflow-column,
  .household-transfer-column + .household-transfer-column {
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .report-layout {
    grid-template-columns: 1fr;
  }

  .report-context-tools {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .report-overview-panel,
  .report-annual-panel {
    grid-column: auto;
  }

  .report-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-annual-head-actions {
    width: 100%;
    justify-items: stretch;
  }

  .report-annual-head-actions .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .report-annual-head-actions .report-legend {
    justify-content: flex-start;
  }

  .report-period-tools {
    align-self: stretch;
  }

  .report-export-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .report-export-status {
    min-height: 18px;
    text-align: left;
  }

  .report-month-summary,
  .report-annual-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-income-bridge-grid {
    grid-template-columns: 1fr;
  }

  .report-income-inbox-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-income-inbox-item {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  }

  .report-income-inbox-actions {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
  }

  .report-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 64px;
  }

  .household-cashflow-head {
    align-items: stretch;
    flex-direction: column;
  }

  .household-cashflow-month-tools {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .household-cashflow-month-tools .primary-button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .mortgage-affordability {
    padding: 14px;
    scroll-margin-top: 182px;
  }

  .mortgage-affordability-controls {
    grid-template-columns: 1fr;
  }

  .mortgage-affordability-controls input,
  .mortgage-affordability-controls select {
    min-height: 44px;
  }

  .mortgage-affordability-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mortgage-affordability-metrics > div:last-child {
    grid-column: 1 / -1;
  }

  .household-month-action-center {
    padding: 15px;
  }

  .household-month-action-head {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .household-month-action-head > strong {
    align-self: flex-start;
  }

  .household-month-action-list > article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .household-month-action-list button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .household-starter-main {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .household-starter-head,
  .household-starter-apply,
  .household-employment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .household-starter-head {
    gap: 4px;
  }

  .household-starter-head > strong {
    align-self: flex-start;
  }

  .household-starter-setup,
  .household-employment-fields {
    grid-template-columns: 1fr;
  }

  .household-starter-setup > div,
  .household-starter-setup > div:nth-child(even) {
    padding: 8px 0;
    border-left: 0;
  }

  .household-starter-setup .text-button {
    min-height: 44px;
  }

  .household-starter-apply > div {
    line-height: 1.7;
  }

  .household-starter-apply .primary-button,
  .household-employment-actions button {
    width: 100%;
    min-height: 44px;
  }

  .household-employment-scenario > summary {
    min-height: 58px;
  }

  .household-employment-preview > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .household-employment-actions {
    gap: 10px;
  }

  .household-employment-actions p {
    max-width: none;
  }

  .household-cashflow-summary,
  .household-cashflow-breakdown,
  .household-cashflow-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-report.is-active {
    padding-bottom: 0;
  }

  #panel-report [data-report-workspace-panel] {
    order: 0;
  }

  #panel-report .report-context-tools {
    order: 1;
  }

  .report-action-panel {
    scroll-margin-top: 64px;
  }

  .dashboard-action-more > summary {
    min-height: 44px;
  }

  .report-period-tools {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .report-period-tools input,
  .report-period-tools select {
    height: 44px;
  }

  .report-period-tools select {
    grid-column: 1 / 3;
  }

  .report-period-tools .report-this-month-button {
    grid-column: 3;
  }

  .report-export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-export-actions .ghost-button {
    min-height: 44px;
  }

  .report-detail-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-detail-nav .ghost-button {
    min-height: 44px;
  }

  .report-action-layout {
    grid-template-columns: 1fr;
  }

  .report-signal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-signal-summary > div:nth-child(odd) {
    border-left: 0;
  }

  .report-signal-summary > div:nth-child(n + 3) {
    border-top-width: 3px;
  }

  .report-cause-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .report-cause-row .text-button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .report-adjustment-advice {
    grid-template-columns: 1fr;
  }

  .report-adjustment-advice .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .report-snapshot-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-snapshot-head .status-pill {
    align-self: flex-start;
  }

  .report-contribution-summary > div:last-child {
    grid-column: 1 / -1;
  }

  .report-month-summary,
  .report-annual-summary,
  .report-contribution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-income-bridge-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-income-inbox-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-income-inbox-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .report-income-inbox-head-actions .status-pill {
    align-self: flex-start;
  }

  .report-income-inbox-head-actions .ghost-button,
  .report-income-inbox-actions > .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .report-income-inbox-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .report-income-inbox-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .report-income-inbox-amounts strong {
    grid-column: 1 / -1;
  }

  .report-income-inbox-actions {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .report-income-inbox-confirm {
    justify-content: space-between;
    min-height: 44px;
  }

  .report-compare-list,
  .report-activity-list {
    grid-template-columns: 1fr;
  }

  .report-annual-chart {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .report-annual-column {
    grid-template-columns: 42px 88px 72px minmax(0, 1fr);
    grid-template-rows: 64px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    text-align: left;
  }

  .report-annual-column.is-current {
    border-bottom: 0;
    border-left-color: var(--ink);
  }

  .report-annual-values span {
    font-size: 10px;
  }

  .report-annual-bars {
    align-self: stretch;
    min-width: 0;
  }

  .report-annual-bars i {
    width: min(30%, 20px);
  }

  .report-payment-label {
    font-size: 10px;
    white-space: normal;
  }

  .report-category-row,
  .report-household-flow-row {
    min-height: 44px;
  }

  .report-subhead {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .metric-drilldown-button {
    top: 8px;
    right: 8px;
    width: 44px;
    min-height: 44px;
  }

  .calculation-drilldown-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .calculation-drilldown-shell {
    max-height: calc(100vh - 18px);
  }

  .calculation-drilldown-head,
  .calculation-drilldown-total,
  .calculation-drilldown-actions {
    padding-inline: 14px;
  }

  .calculation-drilldown-rows {
    padding-inline: 14px;
  }

  .calculation-drilldown-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .calculation-drilldown-actions button {
    width: 100%;
    min-height: 44px;
  }

  .income-plan-change-body {
    padding-inline: 14px;
  }

  .income-plan-change-source,
  .income-plan-change-fields {
    grid-template-columns: 1fr;
  }

  .income-plan-change-source small {
    grid-column: auto;
  }

  .income-plan-copy-body {
    padding-inline: 14px;
  }

  .income-plan-copy-summary,
  .income-plan-copy-row {
    grid-template-columns: 1fr;
  }

  .income-plan-copy-row-status {
    grid-column: auto;
  }

  .pwa-settings-head {
    align-items: center;
    flex-direction: row;
  }

  .pwa-settings-head .pwa-app-icon {
    margin-left: auto;
  }

  .pwa-setting-actions {
    grid-template-columns: 1fr;
  }

  .acquisition-cost-base {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .acquisition-cost-base p {
    text-align: left;
  }

  .acquisition-cost-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
  }

  .acquisition-cost-name,
  .acquisition-cost-manual {
    grid-column: 1 / -1;
  }

  .acquisition-cost-manual {
    justify-content: flex-start;
  }

  .acquisition-cost-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@page {
  size: A4 portrait;
  margin: 12mm;
}

/* v2.52 계정 설정과 NAS 관리자 운영 영역 분리 */
[data-admin-only][hidden] {
  display: none !important;
}

/* v3.6 실사용 전환의 정리 영향과 백업 보호 상태 */
.user-admin-layout > .launch-transition-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.launch-transition-panel .section-head > div > p:last-child {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.launch-transition-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.launch-transition-steps span {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--panel);
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.launch-transition-steps span:last-child {
  border-right: 0;
}

.launch-transition-steps span.is-active {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.launch-transition-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.launch-transition-readiness > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}

.launch-transition-readiness > div.is-ready {
  border-left-color: var(--mint-strong);
}

.launch-transition-readiness > div.is-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.launch-transition-readiness dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.launch-transition-readiness dd {
  margin: 5px 0 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
}

.launch-transition-impact {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.launch-transition-impact .section-head strong {
  white-space: nowrap;
}

.launch-transition-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.launch-transition-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}

.launch-transition-candidate input {
  width: 22px;
  height: 22px;
  margin: 0;
}

.launch-transition-candidate span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.launch-transition-candidate strong,
.launch-transition-candidate small {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.launch-transition-candidate small {
  color: var(--ink-soft);
  line-height: 1.4;
}

.launch-transition-protection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--mint);
  border-radius: var(--radius);
  background: var(--mint-soft);
}

.launch-transition-protection strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.launch-transition-protection svg,
.launch-transition-actions svg {
  width: 18px;
  height: 18px;
}

.launch-transition-protection p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 13px;
  line-height: 1.45;
}

.launch-transition-confirm {
  margin-top: 14px;
}

.launch-transition-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.launch-transition-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 760px) {
  .launch-transition-steps,
  .launch-transition-readiness,
  .launch-transition-candidates {
    grid-template-columns: 1fr;
  }

  .launch-transition-steps span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .launch-transition-steps span:last-child {
    border-bottom: 0;
  }

  .launch-transition-protection {
    grid-template-columns: 1fr;
  }

  .launch-transition-protection button,
  .launch-transition-actions,
  .launch-transition-actions button {
    width: 100%;
  }

  .launch-transition-actions {
    display: grid;
  }
}

.user-admin-layout > .account-profile-panel {
  grid-column: span 5;
}

.user-admin-layout > .pwa-settings-panel {
  grid-column: span 7;
}

.user-admin-layout > .account-security-panel {
  grid-column: span 5;
}

.user-admin-layout > .recent-user-change-panel {
  grid-column: span 7;
}

.user-admin-layout > .account-privacy-panel {
  grid-column: 1 / -1;
}

.user-admin-heading {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 24px 2px 2px;
  border-top: 2px solid var(--ink);
}

.user-admin-heading h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.user-admin-heading > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.user-admin-layout > .family-readiness-panel {
  grid-column: 1 / -1;
  min-width: 0;
  scroll-margin-top: 82px;
}

.family-readiness-summary {
  margin: 0 0 14px;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  word-break: keep-all;
  line-height: 1.55;
}

.family-readiness-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.family-readiness-facts > div {
  min-width: 0;
  padding: 14px 16px;
}

.family-readiness-facts > div + div {
  border-left: 1px solid var(--line);
}

.family-readiness-facts dt,
.family-readiness-facts dd {
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-readiness-facts dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.family-readiness-facts dd {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 900;
}

.family-readiness-boundaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid var(--line);
}

.family-readiness-boundaries > div {
  min-width: 0;
  padding: 14px 16px;
}

.family-readiness-boundaries > div + div {
  border-left: 1px solid var(--line);
}

.family-readiness-boundaries strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.family-readiness-boundaries svg {
  width: 17px;
  height: 17px;
  color: var(--mint-text);
}

.family-readiness-boundaries p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-readiness-steps {
  margin: 14px 0 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.family-readiness-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 2px;
}

.family-readiness-steps li + li {
  border-top: 1px solid var(--line);
}

.family-readiness-index {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
}

.family-readiness-steps li.is-ready .family-readiness-index {
  border-color: var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.family-readiness-steps li.is-warning .family-readiness-index {
  border-color: var(--amber);
  color: #7a4a00;
  background: var(--amber-soft);
}

.family-readiness-steps strong,
.family-readiness-steps p,
.family-readiness-step-state {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-readiness-steps strong {
  font-size: 14px;
}

.family-readiness-steps p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.family-readiness-step-state {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.family-readiness-steps li.is-warning .family-readiness-step-state {
  color: #7a4a00;
}

.family-readiness-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.family-readiness-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}

.family-readiness-actions svg {
  width: 18px;
  height: 18px;
}

.family-rehearsal {
  margin-top: 18px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}

.family-rehearsal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.family-rehearsal-head h4,
.family-rehearsal-head p,
.family-rehearsal-access h5,
.family-rehearsal-summary {
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-rehearsal-head h4 {
  margin-top: 4px;
  font-size: 18px;
}

.family-rehearsal-head > div > p:last-child,
.family-rehearsal-summary {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.family-rehearsal-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 520px;
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}

.family-rehearsal-scenarios button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  color: var(--ink-soft);
  background: var(--panel);
  font-weight: 800;
}

.family-rehearsal-scenarios button + button {
  border-left: 1px solid var(--line-strong);
}

.family-rehearsal-scenarios button.is-selected {
  color: var(--panel);
  background: var(--ink);
}

.family-rehearsal-access {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  border-block: 1px solid var(--line);
}

.family-rehearsal-access > div {
  min-width: 0;
  padding: 14px 16px;
}

.family-rehearsal-access > div + div {
  border-left: 1px solid var(--line);
}

.family-rehearsal-access h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.family-rehearsal-access h5 svg {
  width: 17px;
  height: 17px;
  color: var(--mint-text);
}

.family-rehearsal-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.family-rehearsal-menu-list li {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 800;
}

.family-rehearsal-counts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.family-rehearsal-counts > div {
  min-width: 0;
  padding: 12px 8px;
}

.family-rehearsal-counts dt,
.family-rehearsal-counts dd {
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-rehearsal-counts dt {
  color: var(--ink-soft);
  font-size: 11px;
}

.family-rehearsal-counts dd {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
}

.family-rehearsal-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.family-rehearsal-flow li {
  min-width: 0;
}

.family-rehearsal-flow li + li {
  border-left: 1px solid var(--line);
}

.family-rehearsal-flow button {
  width: 100%;
  min-height: 100%;
  padding: 12px;
  border: 0;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}

.family-rehearsal-flow li.is-current button {
  color: var(--ink);
  background: var(--mint-soft);
}

.family-rehearsal-flow li.is-checked button {
  color: var(--mint-text);
}

.family-rehearsal-step-index {
  display: grid;
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.family-rehearsal-step-index svg {
  width: 15px;
  height: 15px;
}

.family-rehearsal-flow strong,
.family-rehearsal-flow small {
  display: block;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.family-rehearsal-flow strong {
  font-size: 13px;
}

.family-rehearsal-flow small {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
}

.family-rehearsal-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.family-rehearsal-controls button {
  min-height: 44px;
}

.account-profile-form,
.notification-preference-form {
  display: grid;
  gap: 14px;
}

.account-profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.account-profile-avatar .avatar-image {
  width: 48px;
  height: 48px;
}

.account-profile-identity dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.account-profile-identity dl > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
}

.account-profile-identity dt,
.account-profile-identity dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-profile-identity dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.account-profile-identity dd {
  font-weight: 800;
}

.account-avatar-field {
  display: grid;
  gap: 8px;
}

.account-profile-form > button,
.notification-preference-form > button {
  justify-self: end;
}

.account-profile-panel button,
.pwa-settings-panel button,
.account-security-panel button,
.account-privacy-panel button,
.account-privacy-panel summary {
  min-height: 44px;
}

.account-privacy-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.account-privacy-summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
}

.account-privacy-summary > div:nth-child(4n),
.account-privacy-summary > div:last-child {
  border-right: 0;
}

.account-privacy-summary dt,
.account-privacy-summary dd,
.account-privacy-summary span {
  margin: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.account-privacy-summary dt,
.account-privacy-summary span {
  color: var(--ink-soft);
  font-size: 12px;
}

.account-privacy-summary dd {
  font-size: 19px;
  font-weight: 900;
}

.account-privacy-retention {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.account-privacy-delete {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.account-privacy-delete > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.account-privacy-delete > summary::-webkit-details-marker {
  display: none;
}

.account-privacy-delete > summary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.16s ease;
}

.account-privacy-delete[open] > summary svg {
  transform: rotate(180deg);
}

.account-privacy-delete form {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.account-privacy-delete-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-privacy-delete-options legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
}

.account-privacy-delete-options .check-field {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.account-privacy-boundary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 11px 12px;
  border-left: 4px solid var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 13px;
  line-height: 1.5;
}

.account-privacy-boundary svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

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

.account-privacy-delete form > .danger-button {
  justify-self: end;
}

.account-recovery-section {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.account-recovery-section h4,
.account-recovery-section p {
  margin: 0;
}

.account-recovery-section p {
  margin-top: 6px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.account-recovery-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.account-recovery-result {
  padding: 16px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}

.account-recovery-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-recovery-result ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 14px 0 0;
  padding-left: 24px;
}

.account-recovery-result code {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .account-recovery-form,
  .account-recovery-result ol {
    grid-template-columns: 1fr;
  }

  .account-recovery-result-head {
    align-items: stretch;
    flex-direction: column;
  }
}

.notification-preference-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.notification-preference-form fieldset {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.notification-preference-form legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
}

.notification-preference-form .check-field {
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.pwa-device-row {
  grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1fr);
  align-items: start;
}

.pwa-device-list {
  display: grid;
  gap: 7px;
}

.pwa-device-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.pwa-device-item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pwa-device-item strong,
.pwa-device-item span,
.pwa-device-item p {
  overflow-wrap: anywhere;
}

.pwa-device-item span,
.pwa-device-item p {
  color: var(--ink-soft);
  font-size: 11px;
}

.pwa-device-item p {
  margin: 0;
  text-align: right;
}

.account-section-panel {
  scroll-margin-top: 82px;
}

@media (max-width: 1180px) {
  .user-admin-layout > .account-profile-panel,
  .user-admin-layout > .pwa-settings-panel,
  .user-admin-layout > .account-security-panel,
  .user-admin-layout > .account-privacy-panel,
  .user-admin-layout > .recent-user-change-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .account-section-panel {
    scroll-margin-top: 112px;
  }

  .family-readiness-panel {
    scroll-margin-top: 112px;
  }

  .family-readiness-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-readiness-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-readiness-facts > div:nth-child(odd) {
    border-left: 0;
  }

  .family-readiness-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .family-readiness-boundaries {
    grid-template-columns: 1fr;
  }

  .family-readiness-boundaries > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .family-readiness-actions button {
    width: 100%;
    justify-content: center;
  }

  .family-rehearsal-head,
  .family-rehearsal-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .family-rehearsal-scenarios {
    max-width: none;
  }

  .family-rehearsal-scenarios button {
    min-height: 44px;
  }

  .family-rehearsal-access {
    grid-template-columns: 1fr;
  }

  .family-rehearsal-access > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .family-rehearsal-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .family-rehearsal-flow {
    grid-template-columns: 1fr;
  }

  .family-rehearsal-flow li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .family-rehearsal-flow button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    min-height: 56px;
  }

  .family-rehearsal-step-index {
    margin-bottom: 0;
  }

  .family-rehearsal-controls button {
    width: 100%;
  }

  .notification-preference-form fieldset,
  .account-privacy-summary,
  .account-privacy-retention,
  .account-privacy-delete-options,
  .account-privacy-confirm-grid,
  .pwa-device-row,
  .pwa-device-item {
    grid-template-columns: 1fr;
  }

  .account-profile-form > button,
  .notification-preference-form > button,
  .account-privacy-retention > button,
  .account-privacy-delete form > .danger-button {
    width: 100%;
    min-height: 44px;
  }

  .account-profile-panel .avatar-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pwa-device-item p {
    text-align: left;
  }
}

@media (max-width: 360px) {
  .family-readiness-facts {
    grid-template-columns: 1fr;
  }

  .family-readiness-facts > div + div,
  .family-readiness-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .family-readiness-steps li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .family-readiness-step-state {
    grid-column: 2;
    text-align: left;
  }

  .family-readiness-actions {
    grid-template-columns: 1fr;
  }

  .family-rehearsal-scenarios,
  .family-rehearsal-counts {
    grid-template-columns: 1fr;
  }

  .family-rehearsal-scenarios button + button {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}

@media print {
  html {
    background: #ffffff !important;
  }

  body.report-print-month,
  body.report-print-year {
    min-width: 0;
    color: #111111;
    background: #ffffff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.report-print-month .app-shell,
  body.report-print-year .app-shell {
    display: block !important;
    min-height: 0;
  }

  body.report-print-month .sidebar,
  body.report-print-year .sidebar,
  body.report-print-month .hero-panel,
  body.report-print-year .hero-panel,
  body.report-print-month .remote-change-banner,
  body.report-print-year .remote-change-banner,
  body.report-print-month .skip-link,
  body.report-print-year .skip-link,
  body.report-print-month .tab-panel,
  body.report-print-year .tab-panel,
  body.report-print-month .report-context-tools,
  body.report-print-year .report-context-tools,
  body.report-print-month .report-export-bar,
  body.report-print-year .report-export-bar {
    display: none !important;
  }

  body.report-print-month .planner-stage,
  body.report-print-year .planner-stage {
    width: 100%;
    padding: 0 !important;
  }

  body.report-print-month #panel-report,
  body.report-print-year #panel-report {
    display: block !important;
    padding: 0 !important;
  }

  body.report-print-month .report-layout,
  body.report-print-year .report-layout {
    display: block;
  }

  body.report-print-month .report-print-header,
  body.report-print-year .report-print-header {
    display: block;
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 2px solid #111111;
  }

  .report-print-header p,
  .report-print-header h1,
  .report-print-header span {
    display: block;
    margin: 0;
  }

  .report-print-header p {
    color: #1d4ed8;
    font-size: 10pt;
    font-weight: 900;
  }

  .report-print-header h1 {
    margin-top: 2mm;
    font-size: 21pt;
  }

  .report-print-header span {
    margin-top: 2mm;
    color: #64748b;
    font-size: 9pt;
  }

  body.report-print-month .surface-panel,
  body.report-print-year .surface-panel {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #ffffff !important;
  }

  body.report-print-month .report-layout,
  body.report-print-year .report-layout,
  body.report-print-month .report-overview-panel,
  body.report-print-year .report-annual-panel,
  body.report-print-month .report-category-panel,
  body.report-print-year .report-contribution-panel {
    background: #ffffff !important;
  }

  body.report-print-month .report-head,
  body.report-print-year .report-head {
    margin-bottom: 5mm;
  }

  body.report-print-month .report-period-tools,
  body.report-print-year .report-period-tools,
  body.report-print-month .report-detail-nav,
  body.report-print-year .report-detail-nav,
  body.report-print-month .report-action-panel button,
  body.report-print-year .report-action-panel button,
  body.report-print-year #incomePlanCopyOpen,
  body.report-print-month .section-description,
  body.report-print-year .section-description {
    display: none !important;
  }

  body.report-print-month .report-annual-panel,
  body.report-print-month .report-contribution-panel,
  body.report-print-year .report-overview-panel,
  body.report-print-year .report-category-panel {
    display: none !important;
  }

  body.report-print-month .report-category-panel,
  body.report-print-year .report-contribution-panel {
    margin-top: 8mm;
    break-before: page;
  }

  body.report-print-month .report-month-summary,
  body.report-print-year .report-annual-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.report-print-month .report-compare-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.report-print-year .report-annual-chart {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 200px;
  }

  body.report-print-year .report-annual-column {
    grid-template-columns: none;
    grid-template-rows: 22px 34px 110px 30px;
    min-width: 0;
    border-bottom: 3px solid transparent;
    border-left: 0;
    text-align: center;
  }

  body.report-print-month article,
  body.report-print-year article,
  body.report-print-month .report-annual-summary > div,
  body.report-print-year .report-annual-summary > div {
    break-inside: avoid;
  }
}

/* v2.56.0 공통 글꼴, 명령 버튼과 모바일 첫 화면 밀도를 통일합니다. */
.eyebrow {
  display: none !important;
}

h1,
h2,
h3,
h4,
p,
dt,
dd,
button,
label,
input,
select,
textarea {
  letter-spacing: 0;
}

dd,
.amount,
[class*='amount'],
[class*='price'],
[class*='total'],
input[type='number'],
input[type='date'],
input[type='month'] {
  font-variant-numeric: tabular-nums;
}

.primary-button {
  min-height: var(--control-height);
  color: #ffffff;
  background: var(--mint-strong);
}

.primary-button:hover {
  background: #1e40af;
}

.primary-button:active {
  background: #1e3a8a;
}

.ghost-button,
.text-button,
.icon-button {
  min-height: var(--control-height);
}

.icon-button {
  display: inline-grid;
  width: var(--control-height);
  padding: 0;
  place-items: center;
}

.icon-button svg,
.file-picker-button svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

button:disabled,
.primary-button:disabled,
.ghost-button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.danger-button,
.text-button.danger {
  color: var(--danger);
}

.danger-button:hover,
.text-button.danger:hover {
  border-color: #fda4af;
  color: #9f1239;
  background: var(--coral-soft);
}

.file-picker {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.file-picker-button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: var(--control-height);
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input[type='date'],
input[type='month'] {
  min-height: var(--control-height);
}

@media (max-width: 760px) {
  .sidebar {
    gap: 6px;
    padding: 8px 12px;
  }

  .brand-lockup {
    gap: 8px;
    margin-bottom: 2px;
    padding-bottom: 6px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .brand-lockup h1 {
    font-size: 17px;
  }

  .tab-nav {
    margin-inline: -12px;
    padding: 2px 12px 5px;
  }

  .tab-button,
  .primary-button,
  .ghost-button,
  .text-button,
  .icon-button,
  .file-picker-button {
    min-height: var(--control-height-touch);
  }

  .icon-button {
    width: var(--control-height-touch);
  }

  .document-drag-handle {
    display: none;
  }

  .sidebar-foot {
    margin-top: 2px;
  }

  .sidebar-foot .version {
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 7px;
    border-color: color-mix(in srgb, var(--mint) 42%, var(--line));
    color: var(--mint-text);
    background: var(--mint-soft);
    font-size: 12px;
    white-space: nowrap;
  }

  .sidebar-foot .version.is-mismatch {
    flex-basis: 100%;
    white-space: normal;
  }

  .sidebar-foot .ghost-button,
  .sidebar-foot .user-chip,
  .sidebar-foot .save-status-chip {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 12px;
  }

  .planner-stage {
    gap: 10px;
    padding: 10px 12px calc(104px + env(safe-area-inset-bottom));
  }

  .hero-panel {
    gap: 6px;
  }

  .hero-copy {
    min-height: 0;
    padding: 10px 12px;
  }

  .hero-title-row {
    margin: 0;
  }

  .hero-copy h2 {
    margin: 0 0 3px;
    font-size: 21px;
    line-height: 1.2;
  }

  .hero-copy p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .project-edit-button {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .hero-copy:has(.project-edit-button) {
    position: relative;
    padding-right: 54px;
  }

  .hero-metrics {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
  }

  .hero-metrics div {
    min-height: 58px;
    padding: 8px 9px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-metrics div + div {
    border-left: 1px solid var(--line);
  }

  .hero-metrics dt {
    font-size: 11px;
  }

  .hero-metrics dd {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.2;
  }

  .surface-panel,
  .feature-card {
    padding: 14px;
  }

  .file-picker {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .file-picker-button {
    justify-content: center;
  }
}

/* v2.57.0 전역 명령창, 단계형 가져오기와 안전한 변경 피드백을 표시합니다. */
.global-command-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.global-command-tools .ghost-button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 8px;
  font-size: 13px;
}

.global-command-tools svg,
.command-quick-actions svg,
.command-search-field svg,
.command-search-results svg,
.transaction-import-impact svg,
.backup-restore-diff svg,
.transaction-import-step-head svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.sync-center {
  width: min(760px, calc(100% - 32px));
  max-height: min(840px, 90svh);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-strong);
}

.sync-center::backdrop {
  background: rgba(24, 24, 27, 0.42);
}

.sync-center-shell {
  display: grid;
  gap: 16px;
  max-height: min(840px, 90svh);
  overflow-y: auto;
  padding: 20px;
}

.sync-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sync-center-head h2,
.sync-center-head p,
.sync-center-section h3,
.sync-center-section p {
  margin: 0;
}

.sync-center-head h2 {
  margin-top: 3px;
  font-size: 22px;
}

.sync-center-head > div > p:last-child,
.sync-center-section .section-head p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

.sync-center-status {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint-strong);
  border-radius: var(--radius);
  background: var(--mint-soft);
}

.sync-center-status.is-error,
.sync-center-status.is-conflict {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.sync-center-status.is-offline {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.sync-center-status > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-center-status span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.sync-center-status strong {
  font-size: 18px;
}

.sync-center-status p {
  margin: 0;
  overflow-wrap: break-word;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.sync-center-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sync-center-summary > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.sync-center-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.sync-center-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: 900;
}

.sync-center-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sync-center-safety-head,
.sync-center-recovery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-center-safety-head h3,
.sync-center-recovery-head h4 {
  margin: 0;
}

.sync-center-safety-head .status-pill.is-ok {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.sync-center-safety-head .status-pill.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.sync-center-safety-head .status-pill.is-error {
  color: var(--coral-text);
  background: var(--coral-soft);
}

.sync-center-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sync-center-safety-item {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint-strong);
  border-radius: var(--radius);
  background: var(--panel);
}

.sync-center-safety-item.is-warning {
  border-left-color: var(--amber);
}

.sync-center-safety-item.is-error {
  border-left-color: var(--coral);
}

.sync-center-safety-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sync-center-safety-item > div span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.sync-center-safety-item p,
.sync-center-safety-item small {
  margin: 0;
  overflow-wrap: break-word;
}

.sync-center-safety-item p {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.sync-center-safety-item small {
  color: var(--ink-soft);
  font-size: 12px;
}

.sync-center-recovery-scope {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.sync-center-recovery-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sync-center-recovery-head svg {
  width: 17px;
  height: 17px;
}

.sync-center-recovery-scope dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sync-center-recovery-scope dl > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sync-center-recovery-scope dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.sync-center-recovery-scope dd {
  margin: 5px 0 0;
  overflow-wrap: break-word;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.sync-center-pending {
  min-width: 0;
}

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

.sync-center-pending-head span {
  color: var(--ink-soft);
  font-size: 13px;
}

.sync-center-pending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sync-center-pending-list span {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--amber-text);
  background: var(--amber-soft);
  font-size: 12px;
  font-weight: 900;
}

.sync-center-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sync-center-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sync-center-actions svg {
  width: 18px;
  height: 18px;
}

.sync-center-history {
  display: grid;
  gap: 6px;
}

.sync-center-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sync-center-history-item p {
  margin-top: 3px;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.sync-center-section > .section-head .status-pill.is-ok {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.sync-center-section > .section-head .status-pill.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.sync-center-item-ledger {
  display: grid;
  gap: 6px;
}

.sync-center-ledger-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sync-center-ledger-main,
.sync-center-ledger-actor {
  min-width: 0;
}

.sync-center-ledger-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
}

.sync-center-ledger-title span {
  flex: 0 0 auto;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.sync-center-ledger-title strong,
.sync-center-ledger-item p {
  overflow-wrap: anywhere;
}

.sync-center-ledger-item p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.command-center {
  width: min(720px, calc(100% - 32px));
  max-height: min(780px, 88svh);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 72px rgba(16, 24, 40, 0.22);
}

.command-center::backdrop {
  background: rgba(24, 24, 27, 0.42);
}

.command-center-shell {
  display: grid;
  gap: 16px;
  max-height: min(780px, 88svh);
  overflow-y: auto;
  padding: 20px;
}

.command-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.command-center-head h2,
.command-center-head p {
  margin: 0;
}

.command-center-head h2 {
  font-size: 22px;
}

.command-center-head p {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
}

.command-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.command-quick-actions button {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel);
  font-weight: 800;
  word-break: keep-all;
}

.command-quick-actions button:hover {
  border-color: var(--mint);
  color: var(--mint-text);
  background: var(--mint-soft);
}

.command-search-field {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}

.command-search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
}

.command-search-status {
  margin: -8px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.command-search-results {
  display: grid;
  gap: 6px;
}

.command-search-results > button {
  display: grid;
  min-width: 0;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  grid-template-areas: 'kind title icon' 'kind detail icon';
  gap: 2px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.command-search-results > button:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.command-search-results span {
  grid-area: kind;
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.command-search-results strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-search-results small {
  grid-area: detail;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-search-results svg {
  grid-area: icon;
}

.command-search-target {
  outline: 3px solid rgba(15, 159, 138, 0.28);
  outline-offset: 3px;
}

.undo-bar {
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: 20px;
  display: flex;
  max-width: min(520px, calc(100% - 40px));
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #3f3f46;
  border-radius: var(--radius);
  color: #ffffff;
  background: var(--ink);
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
}

.undo-bar > span {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.undo-bar .ghost-button,
.undo-bar .icon-button {
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

body:has(.undo-bar:not([hidden])) .collaboration-notice {
  bottom: 88px;
}

.transaction-import-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.transaction-import-progress button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--panel);
}

.transaction-import-progress button:last-child {
  border-right: 0;
}

.transaction-import-progress button span,
.transaction-import-step-head > span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 900;
}

.transaction-import-progress button.is-active {
  color: #ffffff;
  background: var(--ink);
}

.transaction-import-progress button.is-active span {
  color: var(--ink);
  background: #ffffff;
}

.transaction-import-progress button.is-complete {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.transaction-import-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.transaction-import-impact {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint);
  border-radius: var(--radius);
  background: var(--panel);
}

.transaction-import-impact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.transaction-import-impact-head span {
  color: var(--ink-soft);
  font-size: 13px;
}

.transaction-import-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
}

.transaction-import-impact-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.transaction-import-impact-grid span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.transaction-import-impact-grid strong,
.backup-restore-diff strong {
  display: flex;
  align-items: center;
  gap: 4px;
}

.transaction-import-reconciliation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.transaction-import-reconciliation > div {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: var(--paper);
}

.transaction-import-reconciliation span,
.transaction-import-reconciliation strong {
  display: block;
  overflow-wrap: anywhere;
}

.transaction-import-reconciliation span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.transaction-import-reconciliation strong {
  margin-top: 3px;
  font-size: 13px;
}

.transaction-import-reconciliation > .is-warning {
  background: var(--amber-soft);
}

.transaction-import-reconciliation > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: right;
}

.backup-restore-preview {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.backup-restore-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.backup-restore-progress span {
  padding: 8px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.backup-restore-progress .is-complete {
  color: var(--mint-text);
  background: var(--mint-soft);
}

.backup-restore-progress .is-active {
  color: #ffffff;
  background: var(--ink);
}

.backup-restore-file-summary,
.backup-restore-diff {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.backup-restore-file-summary > div,
.backup-restore-diff > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.backup-restore-file-summary span,
.backup-restore-diff span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.backup-restore-diff .is-changed {
  border-color: #f5c76b;
  background: var(--amber-soft);
}

.backup-restore-summary > p {
  margin: 10px 0 0;
  color: var(--coral-text);
  font-weight: 800;
}

.backup-restore-confirm {
  align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .brand-lockup {
    padding-right: 48px;
  }

  .global-command-tools {
    position: absolute;
    top: 7px;
    right: 12px;
    display: flex;
  }

  .global-command-tools .ghost-button {
    width: 38px;
    min-height: 38px;
    padding: 0;
  }

  .global-command-tools .ghost-button span {
    display: none;
  }

  #globalQuickRecordButton {
    display: none;
  }

  .command-center {
    width: min(100%, var(--mobile-visual-viewport-width, 100%));
    max-height: min(86svh, calc(var(--mobile-visual-viewport-height, 100svh) * 0.92));
    margin: auto auto 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translate(
      var(--mobile-visual-viewport-shift-x, 0),
      calc(-1 * var(--mobile-visual-viewport-bottom, 0px))
    );
  }

  .sync-center {
    width: min(100%, var(--mobile-visual-viewport-width, 100%));
    max-height: min(92svh, calc(var(--mobile-visual-viewport-height, 100svh) * 0.96));
    margin: auto auto 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translate(
      var(--mobile-visual-viewport-shift-x, 0),
      calc(-1 * var(--mobile-visual-viewport-bottom, 0px))
    );
  }

  .sync-center-shell {
    max-height: min(92svh, calc(var(--mobile-visual-viewport-height, 100svh) * 0.96));
    gap: 14px;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .sync-center-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sync-center-safety-grid,
  .sync-center-recovery-scope dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .sync-center-safety-head,
  .sync-center-recovery-head {
    align-items: flex-start;
  }

  .sync-center-status > div,
  .sync-center-pending-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .sync-center-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sync-center-actions button {
    justify-content: center;
    min-width: 0;
  }

  .sync-center-history-item {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .sync-center-ledger-item {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .sync-center-ledger-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .command-center-shell {
    max-height: min(86svh, calc(var(--mobile-visual-viewport-height, 100svh) * 0.92));
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .command-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .is-mobile-visual-narrow .command-quick-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-search-results > button {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }

  .undo-bar {
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 12px;
    max-width: none;
  }

  body:has(.undo-bar:not([hidden])) .collaboration-notice {
    bottom: calc(156px + env(safe-area-inset-bottom));
  }

  .transaction-import-progress button {
    min-height: 52px;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
  }

  .transaction-import-progress button span {
    width: 22px;
    height: 22px;
  }

  .transaction-import-step-actions,
  .transaction-import-impact-head {
    align-items: stretch;
    flex-direction: column;
  }

  .transaction-import-step-actions button {
    width: 100%;
    min-height: 44px;
  }

  .transaction-import-impact-grid,
  .transaction-import-reconciliation,
  .backup-restore-file-summary,
  .backup-restore-diff {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-restore-progress {
    grid-template-columns: 1fr;
  }
}

/* 금융 계산의 출처와 추천 적용 전후를 검토하는 신뢰 센터 */
.finance-layout > .finance-trust-panel {
  order: 1;
  grid-column: 1 / -1;
  scroll-margin-top: 82px;
}

.finance-trust-head {
  align-items: flex-start;
}

.finance-trust-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.finance-trust-head-actions .secondary-button {
  min-height: 38px;
  padding: 7px 10px;
}

.finance-trust-head-actions .secondary-button svg {
  width: 16px;
  height: 16px;
}

.finance-trust-reference {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.funding-decision-sheet {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--mint) 36%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--mint-soft) 42%, var(--surface));
}

.funding-decision-head,
.funding-decision-footer,
.funding-decision-card-head,
.funding-income-boundary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.funding-decision-head > div > span,
.funding-decision-card-head > span,
.funding-income-boundary span,
.funding-decision-flow span,
.funding-decision-flow small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.funding-decision-head h4 {
  margin: 4px 0 0;
  font-size: 22px;
}

.funding-decision-head p {
  max-width: 820px;
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.funding-decision-result {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--mint-strong);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
}

.funding-decision-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 16px;
}

.funding-decision-flow > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.funding-decision-flow > span {
  align-self: center;
  font-size: 18px;
}

.funding-decision-flow strong,
.funding-decision-flow small {
  display: block;
}

.funding-decision-flow strong {
  margin-top: 5px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.funding-decision-flow small {
  margin-top: 4px;
  line-height: 1.35;
}

.funding-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.funding-decision-grid > article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.funding-decision-grid > .funding-decision-monthly {
  grid-column: 1 / -1;
}

.funding-decision-card-head {
  display: block;
}

.funding-decision-card-head h5 {
  margin: 3px 0 0;
  font-size: 16px;
}

.funding-decision-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 14px 0 0;
}

.funding-decision-grid dl > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.funding-decision-grid dt,
.funding-decision-grid dd {
  margin: 0;
}

.funding-decision-grid dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.funding-decision-grid dd {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.funding-decision-grid article > div + p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.funding-income-boundary {
  margin-top: 14px;
}

.funding-income-boundary > section {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.funding-income-boundary strong,
.funding-income-boundary small {
  display: block;
}

.funding-income-boundary strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.funding-income-boundary small {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.funding-decision-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.funding-decision-footer > div:first-child strong,
.funding-decision-footer > div:first-child span {
  display: block;
}

.funding-decision-footer > div:first-child span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.funding-decision-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.finance-decision-center {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(140deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.finance-decision-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.finance-decision-head > div:first-child > span,
.finance-decision-list small {
  color: var(--mint-text);
  font-size: 11px;
  font-weight: 900;
}

.finance-decision-head h4 {
  margin: 3px 0 0;
  font-size: 20px;
}

.finance-decision-head p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-decision-summary {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.finance-decision-summary > span {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.finance-decision-summary > span.is-danger {
  color: var(--danger);
  background: var(--coral-soft);
}

.finance-decision-summary > span.is-warning {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.finance-decision-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.finance-decision-list > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 11px;
  background: var(--surface);
}

.finance-decision-list > article.is-danger {
  border-left-color: var(--danger);
}

.finance-decision-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--ink-soft);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 900;
}

.finance-decision-list strong,
.finance-decision-list p {
  display: block;
}

.finance-decision-list strong {
  margin-top: 2px;
  font-size: 14px;
}

.finance-decision-list p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.finance-decision-list button {
  min-width: 108px;
}

.finance-decision-clear {
  padding: 16px;
  border: 1px dashed var(--mint-border);
  border-radius: 11px;
  background: var(--mint-wash);
  text-align: center;
}

.finance-decision-clear p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-trust-summary,
.savings-recommendation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.finance-trust-summary > div,
.savings-recommendation-summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 13px;
  border-right: 1px solid var(--line);
}

.finance-trust-summary > div:last-child,
.savings-recommendation-summary > div:last-child {
  border-right: 0;
}

.finance-trust-summary span,
.finance-trust-summary small,
.savings-recommendation-summary span,
.savings-recommendation-summary small {
  color: var(--ink-soft);
}

.finance-trust-summary span,
.savings-recommendation-summary span {
  font-size: 12px;
  font-weight: 800;
}

.finance-trust-summary strong,
.savings-recommendation-summary strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}

.finance-trust-summary .is-warning strong,
.savings-recommendation-summary .is-warning strong {
  color: var(--danger);
}

.finance-readiness-section {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  scroll-margin-top: 82px;
}

.finance-readiness-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.finance-readiness-head > div:first-child > span {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.finance-readiness-head h4 {
  margin: 3px 0;
  font-size: 18px;
}

.finance-readiness-head p,
.finance-readiness-reference {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.finance-readiness-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.finance-readiness-summary > span {
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.finance-readiness-summary > span.is-warning {
  color: var(--danger);
  background: var(--coral-soft);
}

.finance-readiness-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.finance-readiness-item {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 16px;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}

.finance-readiness-item.is-review,
.finance-readiness-item.is-missing,
.finance-readiness-item.is-stale,
.finance-readiness-item.is-expired,
.finance-readiness-item.is-changed {
  border-left: 3px solid var(--amber);
  padding-left: 10px;
}

.finance-readiness-item.is-missing,
.finance-readiness-item.is-expired {
  border-left-color: var(--danger);
}

.finance-readiness-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finance-readiness-item-title h5 {
  margin: 0;
  font-size: 15px;
}

.finance-readiness-item-main > strong,
.finance-readiness-item-main > p,
.finance-readiness-item-main > small {
  display: block;
}

.finance-readiness-item-main > strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.finance-readiness-item-main > p {
  margin: 4px 0 2px;
  color: var(--ink-soft);
  font-size: 13px;
}

.finance-readiness-item-main > small {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 750;
}

.finance-readiness-item .status-pill.status-missing,
.finance-readiness-item .status-pill.status-expired {
  color: var(--danger);
  background: var(--coral-soft);
}

.finance-readiness-item .status-pill.status-stale,
.finance-readiness-item .status-pill.status-changed {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.finance-readiness-confirmation {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-readiness-confirmation > div:first-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.finance-readiness-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.finance-readiness-actions button {
  min-height: 40px;
}

.finance-readiness-reference {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding-top: 12px;
}

.finance-readiness-reference a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  color: var(--mint-text);
  font-weight: 800;
}

.finance-trust-evidence {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.finance-trust-evidence > summary {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  cursor: pointer;
  list-style: none;
}

.finance-trust-evidence > summary::-webkit-details-marker {
  display: none;
}

.finance-trust-evidence > summary .finance-trust-subhead {
  margin: 0;
}

.finance-trust-evidence > summary > strong {
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-trust-evidence[open] > summary > svg {
  transform: rotate(180deg);
}

.finance-trust-evidence-body {
  padding-bottom: 18px;
}

.savings-recommendation-summary .is-active strong {
  color: var(--mint-text);
}

.finance-trust-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px;
  margin-top: 20px;
}

.finance-trust-column,
.finance-formula-section {
  min-width: 0;
}

.finance-trust-subhead {
  margin-bottom: 9px;
}

.finance-trust-subhead span {
  color: var(--mint-text);
  font-size: 12px;
  font-weight: 900;
}

.finance-trust-subhead h4 {
  margin: 2px 0 0;
  font-size: 17px;
}

.finance-trust-source-list,
.finance-trust-warning-list,
.finance-formula-list {
  border-top: 1px solid var(--line);
}

.finance-trust-source-list > button {
  display: grid;
  width: 100%;
  min-height: 74px;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.finance-trust-source-list > button:hover {
  background: var(--panel);
}

.finance-source-kind {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 4px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 11px;
  font-weight: 900;
}

.finance-trust-source-list strong,
.finance-trust-source-list p,
.finance-trust-source-list small {
  display: block;
}

.finance-trust-source-list p {
  margin: 3px 0;
  font-weight: 750;
}

.finance-trust-source-list small,
.finance-source-default {
  color: var(--ink-soft);
  font-size: 12px;
}

.finance-source-audit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.finance-source-freshness {
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--mint-text);
  background: var(--mint-soft);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.finance-source-freshness.is-stale,
.finance-source-freshness.is-unverified {
  color: var(--amber-text);
  background: var(--amber-soft);
}

.finance-source-freshness.is-missing {
  color: var(--danger);
  background: var(--coral-soft);
}

.finance-source-freshness.is-optional {
  color: var(--ink-soft);
  background: var(--panel);
}

.finance-source-audit .audit-trail {
  margin: 0;
}

.finance-source-audit svg {
  width: 16px;
  height: 16px;
}

.finance-trust-warning {
  display: grid;
  min-height: 74px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

.finance-trust-warning > svg {
  margin-top: 2px;
  color: var(--amber-text);
}

.finance-trust-warning.is-high > svg,
.finance-trust-warning.is-high strong {
  color: var(--danger);
}

.finance-trust-warning p,
.finance-trust-clear p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.finance-trust-clear {
  display: grid;
  min-height: 90px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px 4px;
  color: var(--mint-text);
}

.finance-formula-section {
  margin-top: 22px;
}

.finance-formula-list details {
  border-bottom: 1px solid var(--line);
}

.finance-formula-list summary {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto) 20px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  cursor: pointer;
  list-style: none;
}

.finance-formula-list summary::-webkit-details-marker {
  display: none;
}

.finance-formula-list summary strong {
  text-align: right;
}

.finance-formula-list details[open] summary svg {
  transform: rotate(180deg);
}

.finance-formula-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px 22px;
  padding: 0 4px 16px;
}

.finance-formula-expression {
  margin: 0;
  color: var(--mint-text);
  font-weight: 850;
}

.finance-formula-detail ul {
  grid-row: span 2;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
}

.finance-formula-detail > p:not(.finance-formula-expression) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.finance-formula-provenance {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.finance-formula-provenance > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.finance-formula-provenance > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-formula-provenance button {
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--mint-text);
  background: var(--paper);
  font-size: 12px;
  font-weight: 850;
}

.savings-recommendation-dialog {
  width: min(900px, calc(100% - 32px));
  max-width: none;
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
}

.savings-recommendation-dialog::backdrop {
  background: rgba(24, 24, 27, 0.52);
}

.savings-recommendation-shell {
  display: grid;
  max-height: min(88vh, 900px);
  grid-template-rows: auto auto minmax(180px, 1fr) auto auto;
  gap: 14px;
  padding: 20px;
  overflow: hidden;
}

.savings-recommendation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.savings-recommendation-head h2,
.savings-recommendation-head p {
  margin: 0;
}

.savings-recommendation-head p {
  margin-top: 4px;
  color: var(--ink-soft);
}

.savings-recommendation-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.savings-recommendation-table-head,
.savings-recommendation-rows > div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(145px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.savings-recommendation-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
}

.savings-recommendation-rows > div {
  border-top: 1px solid var(--line);
}

.savings-recommendation-rows > div.is-warning {
  background: var(--coral-soft);
}

.savings-recommendation-rows > div.is-covered > strong {
  color: var(--mint-text);
}

.savings-recommendation-rows span strong,
.savings-recommendation-rows span small {
  display: block;
}

.savings-recommendation-rows span small {
  margin-top: 2px;
  color: var(--ink-soft);
}

.savings-recommendation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  .finance-layout > .finance-trust-panel {
    scroll-margin-top: 182px;
  }

  .finance-trust-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .finance-trust-reference {
    width: 100%;
  }

  .finance-trust-head-actions .secondary-button {
    min-height: 44px;
  }

  .funding-decision-sheet {
    padding: 14px 12px;
  }

  .funding-decision-head,
  .funding-decision-footer,
  .funding-income-boundary {
    flex-direction: column;
    align-items: stretch;
  }

  .funding-decision-result {
    width: 100%;
    min-height: 44px;
  }

  .funding-decision-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .funding-decision-flow > span {
    display: none;
  }

  .funding-decision-flow > div:last-child {
    grid-column: 1 / -1;
  }

  .funding-decision-grid {
    grid-template-columns: 1fr;
  }

  .funding-decision-grid > .funding-decision-monthly {
    grid-column: auto;
  }

  .funding-decision-grid dl {
    grid-template-columns: 1fr;
  }

  .funding-decision-links {
    justify-content: flex-start;
  }

  .funding-decision-links button {
    min-height: 44px;
  }

  .finance-decision-center {
    padding: 14px 12px;
  }

  .finance-decision-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .finance-decision-summary {
    justify-content: flex-start;
  }

  .finance-decision-list > article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .finance-decision-list button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .finance-readiness-section {
    padding: 14px 12px;
    scroll-margin-top: 182px;
  }

  .finance-readiness-head {
    display: grid;
  }

  .finance-readiness-summary {
    justify-content: flex-start;
  }

  .finance-readiness-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .finance-readiness-confirmation {
    justify-items: start;
  }

  .finance-readiness-confirmation > div:first-child,
  .finance-readiness-actions {
    justify-content: flex-start;
  }

  .finance-readiness-actions button {
    min-height: 44px;
  }

  .finance-readiness-reference a {
    min-height: 44px;
  }

  .finance-trust-summary,
  .savings-recommendation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-trust-summary strong,
  .savings-recommendation-summary strong {
    font-size: 17px;
  }

  .savings-recommendation-summary small {
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .finance-trust-summary > div:nth-child(2),
  .savings-recommendation-summary > div:nth-child(2) {
    border-right: 0;
  }

  .finance-trust-summary > div:nth-child(-n + 2),
  .savings-recommendation-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .finance-trust-workspace,
  .finance-formula-detail {
    grid-template-columns: 1fr;
  }

  .finance-trust-source-list > button {
    grid-template-columns: 68px minmax(0, 1fr) 18px;
  }

  .finance-source-audit .audit-trail,
  .finance-source-audit .finance-source-default {
    display: none;
  }

  .finance-formula-provenance {
    align-items: flex-start;
  }

  .finance-formula-provenance > div {
    width: 100%;
  }

  .finance-formula-provenance button {
    min-height: 44px;
  }

  .finance-trust-evidence > summary {
    grid-template-columns: minmax(0, 1fr) 20px;
    min-height: 72px;
  }

  .finance-trust-evidence > summary > strong {
    grid-column: 1;
    grid-row: 2;
  }

  .finance-trust-evidence > summary > svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .finance-trust-warning {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .finance-trust-warning .text-button {
    grid-column: 2;
    justify-self: start;
    min-height: 40px;
  }

  .finance-formula-list summary {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .finance-formula-list summary strong {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  .finance-formula-list summary svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .finance-formula-detail ul {
    grid-row: auto;
  }

  .savings-recommendation-dialog {
    width: 100%;
    max-height: 90svh;
    margin: auto auto 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .savings-recommendation-shell {
    max-height: 90svh;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  }

  .savings-recommendation-table-head {
    display: none;
  }

  .savings-recommendation-rows > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .savings-recommendation-rows > div > span:first-child {
    grid-column: 1 / -1;
  }

  .savings-recommendation-rows [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
  }

  .savings-recommendation-actions button {
    min-height: 44px;
    flex: 1 1 0;
  }
}

.user-admin-layout > .surface-panel.master-admin-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

/* v2.68 부부 담당 바로가기와 원본 항목 강조 */
.assignment-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.dashboard-today-workspace > section:last-child .compact-section-head {
  align-items: flex-start;
  flex-direction: column;
}

.dashboard-today-workspace > section:last-child .compact-section-head h4 {
  word-break: keep-all;
}

.assignment-shortcuts .ghost-button {
  min-width: 0;
  min-height: 36px;
  padding: 7px 6px;
  white-space: normal;
  word-break: keep-all;
}

.source-record-highlight {
  scroll-margin-block: 120px;
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--mint) 16%, transparent);
}

@media (max-width: 760px) {
  .dashboard-today-panel .compact-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .assignment-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .assignment-shortcuts .ghost-button {
    min-width: 0;
    min-height: 44px;
    padding-inline: 6px;
    white-space: normal;
    word-break: keep-all;
  }

  .mobile-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-quick-actions .ghost-button {
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
  }

  .source-record-highlight {
    scroll-margin-block: 190px;
    outline-width: 2px;
    outline-offset: 2px;
  }
}

/* v2.71 모바일 상단 메뉴와 금액 카드의 첫 화면 밀도를 정리합니다. */
@media (max-width: 760px) {
  .sidebar {
    grid-template-rows: auto auto auto auto;
    transition: padding 160ms ease, gap 160ms ease;
  }

  .tab-nav {
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .tab-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-button {
    scroll-snap-align: center;
  }

  .sidebar-foot {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: nowrap;
  }

  .sidebar-foot .user-chip {
    flex: 0 0 auto;
  }

  .sidebar-foot .save-status-chip {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-foot .save-retry-button {
    display: none;
  }

  .sidebar-foot #logoutButton {
    width: var(--control-height-touch);
    min-width: var(--control-height-touch);
    min-height: var(--control-height-touch);
    margin-left: 0;
    padding: 0;
  }

  .sidebar-foot #logoutButton svg {
    width: 18px;
    height: 18px;
  }

  .sidebar-foot #logoutButton span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sidebar.is-compact {
    gap: 0;
    padding: 4px 12px;
  }

  .sidebar.is-compact .brand-lockup,
  .sidebar.is-compact .global-command-tools,
  .sidebar.is-compact .sidebar-foot {
    display: none;
  }

  .sidebar.is-compact .tab-nav {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .sidebar.is-compact .tab-button {
    min-height: 44px;
  }

  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-metrics > div:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) var(--control-height-touch);
    align-items: center;
    gap: 8px;
  }

  .hero-metrics div {
    min-height: 54px;
    padding: 5px 10px;
  }

  .hero-metrics dd {
    overflow: visible;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    word-break: normal;
  }

  .hero-metrics > div:last-child .metric-drilldown-button {
    position: static;
    width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }

  .hero-copy > p:not(.eyebrow) {
    display: none;
  }
}

/* v2.80 모바일 메뉴의 프로젝트 문맥과 리포트 조작 밀도를 정리합니다. */
.report-this-month-button {
  width: 38px;
  min-height: 38px;
}

@media (max-width: 760px) {
  .app-shell:is(
    [data-active-tab='options'],
    [data-active-tab='finance'],
    [data-active-tab='report'],
    [data-active-tab='share'],
    [data-active-tab='movein']
  ) #projectHeader .hero-copy {
    display: none;
  }

  .app-shell:is(
    [data-active-tab='options'],
    [data-active-tab='finance'],
    [data-active-tab='report'],
    [data-active-tab='share'],
    [data-active-tab='movein']
  ) #projectHeader {
    gap: 0;
  }

  .app-shell:is(
    [data-active-tab='share'],
    [data-active-tab='users']
  ) #projectHeader {
    display: none;
  }

  .report-overview-panel .section-description {
    display: none;
  }

  .report-metric:has(.metric-drilldown-button) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-height-touch);
    align-content: start;
    column-gap: 6px;
  }

  .report-metric:has(.metric-drilldown-button) > span:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding-right: 0;
  }

  .report-metric:has(.metric-drilldown-button) > strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .report-metric:has(.metric-drilldown-button) > p {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .report-metric:has(.metric-drilldown-button) > .metric-drilldown-button {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }

  .report-period-tools {
    gap: 6px;
  }

  .report-period-tools .report-this-month-button {
    width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }

  .report-export-bar {
    margin-top: 12px;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* v2.83 자료와 입주준비의 입력 단계와 반복 작업 메뉴를 정리합니다. */
.document-form-readiness {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--amber-soft);
}

.document-form-readiness.is-complete {
  border-left-color: var(--mint-strong);
  background: var(--mint-soft);
}

.document-form-readiness > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.document-form-readiness span,
.document-form-readiness small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.document-form-readiness strong {
  font-size: 17px;
}

.document-form-readiness small {
  margin: 0;
  line-height: 1.4;
  text-wrap: pretty;
  word-break: keep-all;
}

.document-form-readiness .ghost-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.document-form-readiness .ghost-button svg {
  width: 18px;
  height: 18px;
}

.prep-form-detail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.prep-summary-grid dd {
  white-space: nowrap;
  word-break: normal;
}

.prep-form-detail > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.prep-form-detail > summary::-webkit-details-marker {
  display: none;
}

.prep-form-detail > summary span {
  font-weight: 900;
}

.prep-form-detail > summary strong {
  color: var(--ink-soft);
  font-size: 12px;
}

.prep-form-detail > summary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.prep-form-detail[open] > summary svg {
  transform: rotate(180deg);
}

.prep-form-detail-body {
  min-width: 0;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.prep-form-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prep-form > *,
.prep-form-detail-body > *,
.prep-candidate-field,
.prep-candidate-grid {
  min-width: 0;
}

.prep-form-detail .prep-candidate-editor {
  padding: 0;
  border: 0;
  background: transparent;
}

.prep-evidence-editor {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.prep-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.card-action-menu {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: flex-start;
}

.card-action-menu > summary {
  cursor: pointer;
  list-style: none;
}

.card-action-menu > summary::-webkit-details-marker {
  display: none;
}

.card-action-menu[open] > summary {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.card-action-menu-panel,
.card-action-menu-panel.prep-card-actions,
.card-action-menu-panel.document-card-actions,
.card-action-menu-panel.prep-list-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 168px;
  max-width: min(220px, calc(100vw - 48px));
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(23, 34, 29, 0.16);
}

.card-action-menu-panel .text-button,
.document-card-actions.card-action-menu-panel .text-button {
  width: 100%;
  height: 40px;
  min-height: 40px;
  justify-content: flex-start;
  border-color: transparent;
  text-align: left;
  white-space: nowrap;
}

.card-action-menu-panel .text-button:hover {
  border-color: var(--line);
  background: var(--panel);
}

@media (max-width: 760px) {
  .document-form-readiness {
    align-items: stretch;
    flex-direction: column;
  }

  .document-form-readiness .ghost-button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .prep-form-detail-grid,
  .prep-evidence-grid {
    grid-template-columns: 1fr;
  }

  .prep-summary-grid {
    grid-template-columns: 1fr;
  }

  .prep-form-detail > summary {
    min-height: 52px;
  }

  .prep-card:not(.document-card) > .prep-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
  }

  .document-card > .prep-card-head {
    align-items: flex-start;
    flex-flow: row nowrap;
  }

  .prep-card:not(.document-card) > .prep-card-head .prep-card-title,
  .document-card .prep-card-title {
    width: auto;
    flex: 1 1 0;
  }

  .document-card-commandbar {
    width: auto;
    justify-items: end;
  }

  .prep-list-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .card-action-menu > summary {
    width: 44px;
    min-height: 44px;
  }

  .card-action-menu-panel .text-button,
  .document-card-actions.card-action-menu-panel .text-button {
    height: 44px;
    min-height: 44px;
  }
}

/* v2.91 입주준비 구매 실행 보드 */
.prep-status-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prep-execution-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.prep-execution-head h4,
.prep-execution-head p {
  margin: 0;
}

.prep-execution-head h4 {
  margin-top: 3px;
  font-size: 22px;
}

.prep-execution-head p {
  margin-top: 5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.prep-execution-kicker {
  color: var(--mint-deep);
  font-size: 11px;
  font-weight: 900;
}

.prep-execution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(76px, 1fr));
  min-width: min(100%, 390px);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-execution-summary > div {
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid var(--line);
}

.prep-execution-summary > div:first-child {
  border-left: 0;
}

.prep-execution-summary dt,
.prep-execution-summary dd {
  margin: 0;
}

.prep-execution-summary dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.prep-execution-summary dd {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 900;
}

.prep-execution-summary .is-warning dd {
  color: var(--danger);
}

.prep-execution-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 6px;
}

.prep-execution-filter {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ink-soft);
  background: var(--paper);
  font: inherit;
  cursor: pointer;
}

.prep-execution-filter span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  text-align: left;
}

.prep-execution-filter strong {
  flex: 0 0 auto;
  color: var(--ink);
}

.prep-execution-filter.is-active {
  border-color: var(--mint);
  color: var(--mint-deep);
  background: var(--mint-soft);
  box-shadow: inset 0 0 0 1px var(--mint);
}

.prep-execution-lanes {
  display: grid;
  grid-template-columns: repeat(7, minmax(94px, 1fr));
  max-width: 100%;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.prep-execution-lane {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  min-width: 0;
  padding: 11px 10px;
  border-left: 1px solid var(--line);
  background: var(--paper);
}

.prep-execution-lane:first-child {
  border-left: 0;
}

.prep-execution-lane > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-self: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--line);
  font-size: 11px;
  font-weight: 900;
}

.prep-execution-lane strong,
.prep-execution-lane em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prep-execution-lane strong {
  font-size: 13px;
}

.prep-execution-lane em {
  color: var(--ink-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.prep-execution-lane.is-active {
  box-shadow: inset 0 3px 0 var(--mint);
  background: var(--mint-soft);
}

.prep-execution-lane.is-active > span {
  color: var(--paper);
  background: var(--mint-deep);
}

.prep-execution-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prep-execution-queue-head span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.prep-execution-queue {
  display: grid;
  gap: 8px;
}

.prep-execution-item {
  display: grid;
  grid-template-columns: 72px minmax(190px, 1fr) minmax(275px, 1.15fr) minmax(175px, auto) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.prep-execution-thumb {
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 13px;
  font-weight: 900;
}

.prep-execution-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prep-execution-identity,
.prep-execution-meta,
.prep-execution-evidence-list {
  min-width: 0;
}

.prep-execution-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}

.prep-execution-identity > strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.prep-execution-progress {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--line);
}

.prep-execution-progress span {
  display: block;
  height: 100%;
  background: var(--mint-deep);
}

.prep-execution-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.prep-execution-meta dt,
.prep-execution-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.prep-execution-meta dt {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.prep-execution-meta dd {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.prep-execution-evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.prep-execution-evidence {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.prep-execution-evidence.is-ready {
  border-color: var(--mint-line);
  color: var(--mint-deep);
  background: var(--mint-soft);
}

.prep-execution-open {
  min-width: 62px;
  min-height: 40px;
}

.prep-execution-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--paper);
  text-align: center;
}

@media (max-width: 1180px) {
  .prep-execution-head {
    align-items: stretch;
    flex-direction: column;
  }

  .prep-execution-summary {
    width: 100%;
  }

  .prep-execution-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }

  .prep-execution-thumb {
    width: 64px;
  }

  .prep-execution-meta {
    grid-column: 2 / 4;
  }

  .prep-execution-meta dd {
    white-space: normal;
  }

  .prep-execution-evidence-list {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .prep-status-board {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .prep-execution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .prep-execution-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prep-execution-filter {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .prep-execution-filter:last-child {
    grid-column: 1 / -1;
  }

  .prep-execution-summary > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .prep-execution-summary > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .prep-execution-queue-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .prep-execution-queue-head span {
    text-align: left;
  }

  .prep-execution-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .prep-execution-thumb {
    width: 56px;
  }

  .prep-execution-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .prep-execution-meta,
  .prep-execution-evidence-list {
    grid-column: 1 / -1;
  }

  .prep-execution-open {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .prep-list-open {
    min-height: 44px;
  }
}

/* v2.92 월 마감 변화 원인과 3·6·12개월 전망 */
.report-snapshot-causes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.report-snapshot-cause-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.report-snapshot-cause-head > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
}

.report-snapshot-cause-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.report-snapshot-cause {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--panel);
}

.report-snapshot-cause.is-warning {
  border-left-color: var(--coral);
  background: var(--coral-soft);
}

.report-snapshot-cause.is-done {
  border-left-color: var(--mint);
  background: var(--mint-soft);
}

.report-snapshot-cause > div {
  min-width: 0;
}

.report-snapshot-cause span,
.report-snapshot-cause strong,
.report-snapshot-cause p {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.report-snapshot-cause span {
  display: block;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
}

.report-snapshot-cause > div > strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
}

.report-snapshot-cause > strong {
  align-self: center;
  font-size: 13px;
  white-space: nowrap;
}

.report-snapshot-cause p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.report-snapshot-cause-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  text-align: center;
}

@media (max-width: 760px) {
  .report-snapshot-cause-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-snapshot-cause-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

/* v2.97 부부 링크·동영상·이미지 정보공유 */
.shared-library-workspace {
  display: grid;
  gap: 16px;
}

.shared-resource-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line);
}

.shared-resource-summary > div {
  min-width: 0;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
}

.shared-resource-summary > div:first-child {
  border-left: 0;
}

.shared-resource-summary dt,
.shared-resource-summary dd {
  margin: 0;
}

.shared-resource-summary dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.shared-resource-summary dd {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 900;
}

.shared-resource-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(5, minmax(112px, auto));
  align-items: end;
  gap: 10px;
  margin-top: 16px;
}

.shared-resource-toolbar .search-field {
  min-width: 0;
}

.shared-resource-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.shared-resource-card {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.shared-resource-card.is-unread {
  border-color: var(--mint);
  box-shadow: inset 3px 0 0 var(--mint);
}

.shared-resource-media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 176px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.shared-resource-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shared-resource-image img {
  object-fit: contain;
  background: var(--panel);
}

.shared-resource-youtube {
  background: #111827;
}

.shared-resource-youtube img {
  object-fit: contain;
}

.shared-resource-image > span,
.shared-resource-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #ffffff;
  background: rgba(23, 34, 29, 0.88);
  font-size: 11px;
  font-weight: 900;
}

.shared-resource-image > span svg,
.shared-resource-play svg {
  width: 15px;
  height: 15px;
}

.shared-resource-link {
  align-content: center;
  gap: 10px;
  padding: 18px;
  color: var(--mint-deep);
  background: var(--mint-soft);
  text-align: center;
}

.shared-resource-link svg,
.shared-resource-media-empty svg,
.shared-resource-media-fallback svg {
  width: 28px;
  height: 28px;
}

.shared-resource-link span {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 900;
}

.shared-resource-link em {
  color: var(--ink-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.shared-resource-media-fallback {
  display: none;
  align-content: center;
  gap: 8px;
  padding: 18px;
  color: #9f2d23;
  text-align: center;
}

.shared-resource-youtube.is-unavailable {
  background: var(--coral-soft);
}

.shared-resource-youtube.is-unavailable .shared-resource-media-fallback {
  display: grid;
}

.shared-resource-media-empty {
  align-content: center;
  gap: 8px;
  color: var(--ink-soft);
}

.shared-resource-card-body {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 16px;
}

.shared-resource-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.shared-resource-quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shared-resource-quick-actions .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
}

.shared-resource-quick-actions .icon-button.is-active {
  color: #875400;
  border-color: #e6c35c;
  background: #fff8d9;
}

.shared-resource-quick-actions .icon-button.is-active svg {
  fill: currentColor;
}

.shared-resource-unread-pill {
  color: var(--mint-deep);
  background: var(--mint-soft);
}

.shared-resource-text-warning {
  color: #8a4b00;
  background: #fff1cc;
}

.shared-resource-card.has-damaged-text {
  border-color: #d99b38;
}

.shared-resource-card-head h4 {
  margin: 8px 0 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 17px;
  line-height: 1.35;
}

.shared-resource-detail,
.shared-resource-note {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.shared-resource-collaboration-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}

.shared-resource-status-control {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  min-width: 0;
}

.shared-resource-status-control button {
  min-height: 40px;
  padding: 7px 10px;
  white-space: nowrap;
  font-size: 11px;
}

.shared-resource-comments {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.shared-resource-comments > summary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.shared-resource-comments > summary::-webkit-details-marker {
  display: none;
}

.shared-resource-comments > summary svg {
  width: 16px;
  height: 16px;
}

.shared-resource-comment-list {
  display: grid;
  gap: 8px;
}

.shared-resource-comment {
  padding: 10px;
  border-left: 3px solid var(--mint);
  background: var(--panel);
}

.shared-resource-comment p,
.shared-resource-comment-empty {
  margin: 7px 0 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.shared-resource-comment-empty {
  margin: 0;
  color: var(--ink-soft);
}

.shared-resource-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}

.shared-resource-comment-form textarea {
  min-width: 0;
  min-height: 42px;
  resize: vertical;
}

.shared-resource-comment-form .icon-button {
  width: 42px;
  height: 42px;
}

.shared-resource-form .field-feedback {
  min-height: 0;
  margin: -8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.shared-resource-form .field-feedback:empty {
  display: none;
}

.shared-resource-form .field-feedback.is-error {
  color: var(--danger);
}

.shared-resource-note {
  overflow-wrap: break-word;
  word-break: keep-all;
  color: var(--ink);
}

.shared-resource-card .audit-trail {
  margin-top: 14px;
}

.shared-resource-actions {
  min-width: 150px;
}

.shared-resource-actions button {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.shared-resource-actions button svg {
  width: 16px;
  height: 16px;
}

.shared-resource-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--panel);
  text-align: center;
}

.shared-resource-empty svg {
  width: 30px;
  height: 30px;
}

.shared-resource-empty strong {
  color: var(--ink);
}

.shared-resource-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.shared-resource-image-field {
  min-width: 0;
}

.shared-resource-form-preview,
.shared-resource-url-preview {
  min-width: 0;
}

.shared-resource-form-preview {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 86px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.shared-resource-form-preview img {
  width: 160px;
  height: 96px;
  object-fit: cover;
}

.shared-resource-form-preview span,
.shared-resource-form-preview p {
  margin: 0;
  padding: 12px;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.shared-resource-youtube-preview,
.shared-resource-link-preview {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.shared-resource-youtube-preview img {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.shared-resource-youtube-preview span,
.shared-resource-link-preview span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.shared-resource-link-preview svg,
.shared-resource-youtube-preview svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--mint-deep);
}

.shared-resource-form-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shared-resource-form-actions .state-status {
  min-width: 0;
  margin: 0;
}

@media (max-width: 1180px) {
  .shared-resource-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shared-resource-toolbar .shared-resource-search {
    grid-column: 1 / -1;
  }

  .shared-resource-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .shared-resource-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shared-resource-summary > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shared-resource-summary > div:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .shared-resource-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shared-resource-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-resource-toolbar .shared-resource-search {
    grid-column: 1 / -1;
  }

  .shared-resource-form .span-2 {
    grid-column: 1;
  }

  .shared-resource-summary > div {
    padding: 11px 10px;
  }

  .shared-resource-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-resource-media {
    min-height: 190px;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .shared-resource-card-body {
    padding: 14px;
  }

  .shared-resource-card-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-resource-quick-actions {
    justify-content: flex-end;
  }

  .shared-resource-collaboration-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .shared-resource-status-control {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shared-resource-status-control button {
    min-height: 44px;
    padding-inline: 5px;
  }

  .shared-resource-form-preview {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .shared-resource-form-preview img {
    width: 104px;
    height: 84px;
  }

  .shared-resource-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .shared-resource-form-actions .primary-button {
    width: 100%;
    min-height: 46px;
  }

  .shared-resource-actions button {
    min-height: 44px;
  }
}

.prep-compare-row {
  grid-template-areas:
    "model model model"
    "price vendor status"
    "quotes quotes quotes"
    "actions actions actions";
}

.prep-quote-row,
.prep-payment-row {
  grid-template-columns: minmax(0, 1fr);
}

#prepForm,
#prepForm * {
  box-sizing: border-box;
}

#prepForm .compact-field,
#prepForm .compact-field > input,
#prepForm .compact-field > select,
#prepForm .compact-field > textarea {
  min-width: 0;
  max-width: 100%;
}

#prepForm .prep-form-detail-grid {
  grid-template-columns: minmax(0, 1fr);
}

.prep-quote-row > *,
.prep-payment-row > * {
  min-width: 0;
}

.prep-quote-row .icon-button,
.prep-payment-row .icon-button {
  justify-self: end;
}

@media (max-width: 760px) {
  .prep-compare-row {
    grid-template-areas:
      "model"
      "price"
      "vendor"
      "status"
      "quotes"
      "actions";
  }
}

.finance-layout > .plan-baseline-panel {
  order: 9;
  grid-column: 1 / -1;
}

.finance-layout > .scenario-panel {
  order: 10;
}

.plan-baseline-panel {
  min-width: 0;
}

.plan-baseline-head {
  align-items: flex-start;
}

.plan-baseline-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border-block: 1px solid var(--line);
}

.plan-baseline-metric {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.plan-baseline-metric:last-child {
  border-right: 0;
}

.plan-baseline-metric > span,
.plan-baseline-cause-head span,
.plan-baseline-cause-menu {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.plan-baseline-metric > strong {
  overflow-wrap: anywhere;
  font-size: 26px;
  line-height: 1.2;
}

.plan-baseline-metric > p,
.plan-baseline-cause-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.plan-baseline-metric.is-better > strong {
  color: var(--mint-ink);
}

.plan-baseline-metric.is-worse > strong {
  color: var(--danger);
}

.plan-baseline-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 4px;
}

.plan-baseline-empty > svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--mint-ink);
}

.plan-baseline-empty strong {
  display: block;
}

.plan-baseline-empty p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.plan-baseline-causes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.plan-baseline-cause-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.plan-baseline-cause-head > div {
  display: grid;
  gap: 3px;
}

.plan-baseline-cause-list {
  border-top: 1px solid var(--line);
}

.plan-baseline-cause {
  display: grid;
  grid-template-columns: 64px minmax(110px, 0.8fr) minmax(220px, 1fr) minmax(100px, auto) 20px;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.plan-baseline-cause:hover,
.plan-baseline-cause:focus-visible {
  background: var(--mint-wash);
}

.plan-baseline-cause.is-changed {
  box-shadow: inset 3px 0 0 var(--amber-strong);
}

.plan-baseline-cause-label,
.plan-baseline-cause-values,
.plan-baseline-cause > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.plan-baseline-cause-label {
  font-weight: 900;
}

.plan-baseline-cause-values {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.plan-baseline-cause > strong {
  text-align: right;
}

.plan-baseline-cause > svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .plan-baseline-head {
    align-items: stretch;
  }

  .plan-baseline-head .primary-button {
    width: 100%;
    min-height: 46px;
  }

  .plan-baseline-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-baseline-metric:nth-child(2) {
    border-right: 0;
  }

  .plan-baseline-metric:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .plan-baseline-metric > strong {
    overflow-wrap: normal;
    font-size: 18px;
    white-space: nowrap;
  }

  .plan-baseline-cause-head {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .plan-baseline-cause {
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    min-height: 72px;
    gap: 4px 10px;
    padding: 11px 4px;
  }

  .plan-baseline-cause-label {
    grid-column: 2;
  }

  .plan-baseline-cause-values {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .plan-baseline-cause > strong {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
  }

  .plan-baseline-cause > svg {
    grid-column: 3;
    grid-row: 1 / span 3;
  }
}

@media (max-width: 760px) {
  .dsr-input-group .span-2 {
    grid-column: auto;
  }

  .existing-debt-control-group .span-2 {
    grid-column: auto;
  }

  .existing-debt-control-group,
  .existing-debt-editor {
    scroll-margin-top: 182px;
  }

  .existing-debt-summary,
  .existing-debt-form,
  .existing-debt-row {
    grid-template-columns: 1fr;
  }

  .existing-debt-row > .audit-trail,
  .existing-debt-row > .existing-debt-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .existing-debt-form-actions,
  .existing-debt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .existing-debt-form-actions button,
  .existing-debt-actions button {
    min-height: 44px;
  }

  .dsr-stress-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dsr-stress-head .status-pill {
    align-self: start;
  }

  .dsr-stress-grid {
    grid-template-columns: 1fr;
  }

  .dsr-stress-card strong,
  .dsr-income-evidence strong {
    font-size: 16px;
  }
}

.numeric-status {
  display: inline-flex !important;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: inherit;
}

.numeric-status-label {
  display: inline-flex !important;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  color: inherit !important;
  background: var(--panel-strong);
  font-size: 0.65em !important;
  font-weight: 900 !important;
  line-height: 1.35;
  white-space: nowrap;
}

.numeric-status.is-missing {
  color: var(--ink-soft);
}

.numeric-status.is-review {
  color: var(--amber-text);
}

.numeric-status.is-review .numeric-status-label {
  background: var(--amber-soft);
}

.numeric-status.is-warning {
  color: var(--danger);
}

.numeric-status.is-warning .numeric-status-label {
  background: var(--coral-soft);
}

.numeric-status.is-done {
  color: var(--green);
}

.numeric-status.is-done .numeric-status-label {
  background: var(--lime-soft);
}

.readiness-summary .numeric-status {
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #panel-finance .finance-layout {
    gap: 10px;
  }

  #panel-finance .finance-workspace-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  #panel-finance .finance-workspace-progress,
  #panel-finance .finance-workspace-overview .secondary-button {
    width: 100%;
  }

  #panel-finance .finance-section-nav {
    gap: 7px;
  }

  #panel-finance .finance-section-nav button {
    min-height: 84px;
    gap: 3px 8px;
    padding: 12px;
  }

  #panel-finance .finance-section-nav button small {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #panel-finance [data-finance-workspace-panel]:not(.account-reconciliation-panel) {
    padding: 14px;
  }

  #panel-finance [data-finance-workspace-panel] > .section-head {
    gap: 8px;
    margin-bottom: 12px;
  }

  #panel-finance [data-finance-workspace-panel] > .section-head h3,
  #panel-finance [data-finance-workspace-panel] > h3 {
    font-size: 20px;
  }

  #panel-finance [data-finance-workspace-panel] :where(
    button,
    input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
    select,
    textarea,
    summary
  ) {
    min-height: 44px;
  }

  #panel-finance [data-finance-workspace-panel] :where(strong, dd, p, li, small, .money-nowrap) {
    overflow-wrap: normal;
    word-break: keep-all;
  }

  #panel-finance [data-finance-workspace-panel] .money-nowrap {
    white-space: nowrap;
  }

  #panel-finance .mortgage-affordability-summary small {
    font-size: 10px;
    white-space: nowrap;
  }

  #panel-finance .household-cashflow-summary p {
    overflow-wrap: normal;
    word-break: keep-all;
  }

  #panel-finance .scenario-delta-table-wrap {
    overflow-x: visible;
  }

  #panel-finance .scenario-delta-table {
    display: block;
    min-width: 0;
  }

  #panel-finance .scenario-delta-table thead {
    display: none;
  }

  #panel-finance .scenario-delta-table tbody {
    display: grid;
    gap: 8px;
    padding: 8px;
  }

  #panel-finance .scenario-delta-table tr {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
  }

  #panel-finance .scenario-delta-table th,
  #panel-finance .scenario-delta-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    text-align: right;
  }

  #panel-finance .scenario-delta-table th {
    color: var(--ink);
    font-size: 13px;
  }

  #panel-finance .scenario-delta-table td::before {
    color: var(--ink-soft);
    font-size: 11px;
  }

  #panel-finance .scenario-delta-table td:nth-child(2)::before {
    content: '월 상환 차이';
  }

  #panel-finance .scenario-delta-table td:nth-child(3)::before {
    content: '입주 현금 차이';
  }

  #panel-finance .scenario-delta-table td:nth-child(4)::before {
    content: '자금 상태 차이';
  }
}