.heading-icon { width: 24px; height: 24px; margin-right: 8px; color: var(--teal); vertical-align: -3px; }

.house-code { font-size: .75rem; font-weight: 800; color: var(--teal); white-space: nowrap; }

.house-meta { display: grid; gap: 2px; min-width: 0; }

.house-meta strong { overflow-wrap: anywhere; }

.house-header { display: flex; gap: 14px; align-items: center; margin: 0 0 20px; }

.house-header .client-thumb { width: 58px; height: 58px; }

.house-header h2 { margin: 2px 0; overflow-wrap: anywhere; }

.house-header p { margin: 0; color: var(--muted); font-size: .82rem; }

.house-rate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 16px; color: var(--muted); font-size: .84rem; }

.house-rate strong { font-size: 1rem; color: var(--text); }

.history-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; }

.history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }

.history-row:last-child { border-bottom: 0; }

.history-row small { display: block; color: var(--muted); }

.history-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; text-align: right; }

.modal-wide { width: min(100%, 660px); }

.code-search { max-width: 280px; }

.selected-house { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.selected-house strong { margin-right: auto; }

.selected-house .muted { font-size: .82rem; }

.field-note { display: block; margin-top: 5px; color: var(--muted); font-size: .77rem; }

.rate-preview { padding: 10px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--surface-soft); }

.house-open { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; max-width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--text); text-align: left; white-space: normal; font: inherit; }

.house-open:hover strong, .house-open:focus-visible strong { color: var(--teal); text-decoration: underline; }

.house-open .house-meta { text-align: left; }

.house-result .client-card-info { width: 100%; }

.cell-value { min-width: 0; overflow-wrap: anywhere; }

.row-actions { flex-wrap: wrap; }

body.modal-open { overflow: hidden; }

.modal { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; overflow-x: hidden; }

.modal h2, .modal h3, .modal p { overflow-wrap: anywhere; }

.modal-top { display: flex; justify-content: flex-end; position: sticky; top: -24px; z-index: 2; margin: -12px -8px 4px; background: var(--surface); }

.modal-top .icon-button { flex: none; }

.house-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 20px 0; }

.house-info > div { min-width: 0; }

.house-info dt { font-size: .77rem; color: var(--muted); margin-bottom: 4px; }

.house-info dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.house-info > div:last-child { grid-column: 1 / -1; }

.residence-photo { display: grid; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--text); background: var(--surface-soft); cursor: zoom-in; }

.residence-photo img { width: 100%; height: 220px; object-fit: contain; }

.residence-photo span { padding: 9px; font-size: .86rem; font-weight: 700; }

.photo-empty { padding: 28px 12px; text-align: center; background: var(--surface-soft); color: var(--muted); border-radius: 8px; }

.history-list { max-height: none; overflow: visible; }

.history-row > div { min-width: 0; overflow-wrap: anywhere; }

.form-actions { flex-wrap: wrap; }

#photo-viewer { margin: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border: 0; background: #07131b; color: #fff; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; }

#photo-viewer[open] { display: flex; flex-direction: column; }

#photo-viewer::backdrop { background: #07131b; }

.photo-tools { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px; }

.photo-tools strong { margin-right: auto; }

.photo-tools .btn { min-height: 44px; white-space: normal; text-decoration: none; background: #19333f; color: #fff; }

.photo-tools output { min-width: 46px; text-align: center; }

.photo-stage { flex: 1; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.photo-canvas { display: grid; place-items: center; }

.photo-canvas img { max-width: none; max-height: none; display: block; object-fit: contain; }

.photo-error { padding: 12px; text-align: center; }

@media (max-width: 720px) {

  .main, .view, .toolbar, .section-heading { min-width: 0; }

  .section-heading > div { width: 100%; }

  .section-heading h1 { font-size: 1.5rem; }

  .section-heading > .btn { white-space: normal; }

  .toolbar input, .toolbar select, .modal input, .modal select, .modal textarea { font-size: 16px; min-width: 0; max-width: 100%; }

  .toolbar > input, .toolbar > select { flex: 1 1 140px; width: 100%; }

  .toolbar > .search-field { min-width: 0; flex: 1 1 100%; }

  .code-search { max-width: none; width: 100%; }

  .history-row { align-items: flex-start; }

  .history-actions { min-width: 108px; }

  .selected-house strong { width: 100%; }

  .table-scroll { overflow: visible; border: 0; background: transparent; }

  .responsive-table { width: 100%; min-width: 0; display: block; background: transparent; }

  .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

  .responsive-table tbody { display: block; width: 100%; }

  .responsive-table tr { display: block; padding: 6px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

  .responsive-table td { display: grid; grid-template-columns: minmax(90px,.8fr) minmax(0,1.4fr); gap: 12px; align-items: start; padding: 10px 0; font-size: .9rem; }

  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: .79rem; font-weight: 600; }

  .responsive-table td:first-child, .responsive-table td:last-child { display: block; }

  .responsive-table td:first-child::before, .responsive-table td:last-child::before { display: none; }

  .responsive-table .house-open { width: 100%; }

  .responsive-table .btn { min-height: 44px; flex: 1 1 auto; white-space: normal; }

  .responsive-table td:last-child > .cell-value > .btn { width: 100%; }

  .responsive-table .client-row-name { min-width: 0; }

  .responsive-table .payment-chip { border-radius: 8px; }

  .modal-overlay { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }

  .modal { padding: 16px; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

  .modal-top { top: -16px; }

  .modal .form-actions .btn { min-height: 44px; flex: 1; white-space: normal; }

  .photo-tools strong { width: 100%; margin: 0; text-align: center; }

  .photo-tools .btn { padding: 8px 12px; font-size: .8rem; }

}

@media (max-width: 380px) { .house-info { grid-template-columns: 1fr; } .history-row { flex-wrap: wrap; } }



.quick-installments { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }