:root {
  color-scheme: light;
  --ink: #173126;
  --muted: #5f6f67;
  --line: #d8e1dc;
  --brand: #17633c;
  --brand-dark: #0f492b;
  --surface: #fff;
  --soft: #f2f7f4;
  --danger: #a32626;
  --focus: #f2b705;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; background: #f7faf8; color: var(--ink); }
html { overflow-x: hidden; }
body { overflow-x: hidden; font-size: 16px; line-height: 1.5; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible, [contenteditable]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, textarea, select { font: inherit; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: .66; }
input[readonly], textarea[readonly], .rich-editor-shell.is-readonly { background: #edf1ef; color: #52625a; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 12px; padding: 10px 14px; transform: translateY(-160%); border-radius: 7px; background: #fff; color: var(--ink); }
.skip-link:focus { transform: none; }
.topbar { display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 12px clamp(16px, 4vw, 56px); background: var(--ink); color: #fff; }
.topbar a { color: #fff; }
.brand { font-weight: 800; text-decoration: none; white-space: nowrap; }
.topbar nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.topbar form { margin: 0; }
.link-button { border-color: #8eaa9d; background: transparent; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 72px; }

h1 { margin: .2em 0 .5em; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; }
h2 { margin-top: 2em; }
h3 { margin: 0 0 8px; }
.eyebrow { margin: 0; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dashboard-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.button, button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.button.secondary, button.secondary { background: #fff; color: var(--brand-dark); }
.button.danger, button.danger { border-color: var(--danger); background: #fff; color: var(--danger); }

/* Действия внутри строки таблицы.
   `.link-button` для этого не годится: он объявляет только прозрачный фон, а
   цвет берёт из общего правила `button` — белый. В тёмной шапке это читается,
   в светлой ячейке таблицы получается белый текст на белом, то есть кнопка без
   надписи. Здесь фон и цвет заданы явно, а высота уменьшена: 48px посреди
   строки таблицы — это не кнопка, а препятствие. */
/* Карточка найденного счёта. Телефон — ссылка `tel:`, а не текст: звонок
   остаётся делом браузера и системы, здесь только адрес для него. Пометка
   рядом говорит, чего номер стоит, и не повышает его в звании. */
.receipt-premise dd a[href^="tel:"] { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.receipt-premise dd a[href^="tel:"]:hover,
.receipt-premise dd a[href^="tel:"]:focus-visible { text-decoration: underline; }
.receipt-premise .phone-origin { color: var(--muted); font-weight: 400; font-size: .88rem; }

/* Фотографии работы по дому. Порядок меняют стрелки, а не перетаскивание:
   кнопка работает без мыши, на телефоне и со скринридером. */
.work-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 12px 0 20px; }
.work-photo { margin: 0; padding: 10px; border: 1px solid #cdd9d2; border-radius: 10px; background: #fff; }
.work-photo--cover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.work-photo img { display: block; width: 100%; height: auto; border-radius: 7px; }
.work-photo figcaption { display: grid; gap: 2px; margin: 8px 0; font-size: .85rem; color: var(--muted); }
.work-photo-actions form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.work-photo-actions button { min-height: 34px; padding: 4px 10px; border-radius: 7px; background: #fff; color: var(--brand-dark); font-size: .85rem; }
.work-photo-actions button.danger { border-color: var(--danger); color: var(--danger); }
.work-photo-actions button[disabled] { opacity: .45; cursor: not-allowed; }
.work-photo-upload { display: grid; gap: 8px; max-width: 560px; }
.work-photo-upload button { justify-self: start; }

/* Массовая загрузка. Область перетаскивания — единственный новый элемент;
   всё остальное собрано из тех же кнопок, таблиц и подсказок, что и везде. */
.bulk-drop { display: grid; gap: 6px; justify-items: center; padding: 28px 20px; margin: 16px 0;
  border: 2px dashed #9eafa6; border-radius: 12px; background: #f7faf8; text-align: center; }
.bulk-drop--over { border-color: var(--brand); background: #eef5f1; }
.bulk-drop p { margin: 0; }
.bulk-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bulk-drop label.button { cursor: pointer; }
.bulk-chosen { margin: 8px 0 0; font-weight: 700; }
.bulk-replace { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.bulk-replace input { width: auto; min-height: 0; }
progress[data-bulk-progress-bar] { width: 100%; height: 18px; }

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-actions form { margin: 0; }
.row-actions .button, .row-actions button {
  min-height: 36px; padding: 6px 12px; border-radius: 7px;
  background: #fff; color: var(--brand-dark); font-size: .9rem; white-space: nowrap;
}
.row-actions button.danger { border-color: var(--danger); color: var(--danger); }

label, legend { margin-top: 14px; font-weight: 700; }
input, textarea, select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #9eafa6; border-radius: 7px; background: #fff; color: var(--ink); }
textarea { resize: vertical; }
.hint, small { color: var(--muted); }
.hint { margin: 2px 0 8px; }
.warning { margin: 8px 0 0; padding-left: 12px; border-left: 4px solid #c68016; color: #694400; }
.notice, .error { padding: 14px 16px; border-left: 5px solid var(--brand); border-radius: 8px; background: #e7f5ec; }
.error { border-color: var(--danger); background: #fff0f0; color: #781b1b; }
.compact-error { margin: 8px 0 0; padding: 8px 10px; }
.auth-card { width: min(480px, 100%); margin: 8vh auto; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 40px #17312612; }
.auth-card form, .editor { display: grid; gap: 8px; }

.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.metric { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.metric strong { display: block; font-size: 2rem; }
.metric span { color: var(--muted); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table { width: 100%; min-width: 820px; border-collapse: collapse; }
th, td { padding: 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--soft); font-size: .82rem; }
.status, .important { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; background: #e4f0e8; font-size: .84rem; font-weight: 800; }
.status::before { width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; content: ""; }
.status-review, .status-scheduled { background: #fff3cf; color: #785000; }
.status-published { background: #dff4e5; color: #12552f; }
.status-archived { background: #e8edf0; color: #465760; }
.status-deleted { background: #f9dfdf; color: #821f1f; }
.filters { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto minmax(150px, 220px) auto; align-items: end; gap: 10px; margin: 0 0 20px; }
.filters label { margin: 0; }
.document-filters { grid-template-columns: auto minmax(170px, 1fr) auto minmax(180px, 1fr) auto minmax(150px, 210px) auto; }

.editor { max-width: 960px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.editor.compact { max-width: 560px; }
.status-panel { display: flex; width: min(960px, 100%); align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.status-panel > span { color: var(--muted); font-weight: 700; }
.deleted-notice { width: min(960px, 100%); margin-bottom: 16px; padding: 20px; border: 2px solid #dbaaaa; border-radius: 12px; background: #fff6f6; }
.deleted-notice h2 { margin: 12px 0 6px; }
.deleted-notice p { margin: 0; }
.advanced { margin: 12px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.advanced summary { min-height: 48px; padding: 12px 14px; font-weight: 800; cursor: pointer; }
.advanced-body { padding: 0 14px 16px; }
.advanced-body label { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
fieldset { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.check { display: flex; min-height: 48px; align-items: center; gap: 9px; margin: 0; font-weight: 500; }
.check input { width: 24px; min-height: 24px; flex: 0 0 auto; }
.audience-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.audience-card { display: flex; min-height: 88px; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border: 1px solid #a8b9b0; border-radius: 10px; background: #fff; cursor: pointer; }
.audience-card:has(input:checked) { border: 2px solid var(--brand); background: #eef8f1; box-shadow: 0 0 0 2px #17633c1f; }
.audience-card input { width: 22px; min-height: 22px; flex: 0 0 auto; }
.audience-card span { display: grid; gap: 4px; }
.audience-card small { font-weight: 400; }
.house-picker { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.house-picker[hidden] { display: none; }
.house-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.selection-count { margin: 10px 0 0; font-weight: 800; }
.current-document-file { margin: 16px 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.current-document-file h2 { margin: 0 0 12px; font-size: 1.2rem; }
.current-document-file dl { margin: 0 0 16px; }
.hash-value { overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: .86rem; }
.document-preview dl { margin-block: 22px; }
.document-editor input[type="file"] { padding-block: 8px; }

.rich-editor-shell { overflow: hidden; border: 1px solid #9eafa6; border-radius: 9px; background: #fff; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--soft); }
.editor-toolbar button { min-width: 48px; min-height: 48px; padding: 7px 11px; border-color: #8da399; background: #fff; color: var(--ink); }
.rich-editor { min-height: 260px; padding: 14px; overflow-wrap: anywhere; }
.rich-editor:empty::before { color: #687a71; content: "Начните писать текст…"; }
.rich-editor p:first-child { margin-top: 0; }
.rich-editor a, .prose a { overflow-wrap: anywhere; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 18px; border: 1px solid #e3bcbc; border-radius: 10px; background: #fffafa; }
.danger-zone h2 { margin: 0 0 4px; font-size: 1.1rem; }
.danger-zone p { margin: 0; color: var(--muted); }
.sticky-actions { position: sticky; z-index: 20; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px calc(clamp(18px, 3vw, 32px) * -1) calc(clamp(18px, 3vw, 32px) * -1); padding: 14px clamp(18px, 3vw, 32px); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 -10px 24px #17312612; backdrop-filter: blur(8px); }
.dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); box-shadow: 0 20px 60px #0004; }
.dialog::backdrop { background: #112a20a8; }
.dialog form { padding: 24px; }
.dialog h2 { margin: 0 0 12px; }
.dialog label { display: block; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.draft-banner { padding: 16px; border-radius: 8px; background: #762121; color: #fff; font-weight: 900; text-align: center; }
.preview { max-width: 800px; margin: 24px auto; padding: clamp(20px, 5vw, 56px); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.prose { font-size: 1.08rem; overflow-wrap: anywhere; }
.important { background: #fff0ce; color: #654700; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
dt { font-weight: 800; }
dd { margin: 0; }
.user-actions { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; align-items: end; gap: 8px; min-width: 530px; }
.user-actions label { grid-column: 1 / -1; margin: 0; }
.user-actions button { white-space: nowrap; }

@media (max-width: 1024px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .topbar nav { order: 3; width: 100%; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .document-filters { grid-template-columns: 1fr 1fr; }
  .document-filters label { align-self: end; }
}

@media (max-width: 768px) {
  .container { padding-top: 28px; }
  .page-head { align-items: stretch; flex-direction: column; }
  .dashboard-actions { width: 100%; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr; }
  .document-filters { grid-template-columns: 1fr; }
  .audience-options, .form-grid { grid-template-columns: 1fr; }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .danger-zone button { align-self: flex-start; }
}

@media (max-width: 480px) {
  .container { width: min(100% - 24px, 1180px); padding-top: 24px; }
  .topbar { gap: 12px; padding-inline: 12px; }
  .topbar nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .metrics, .dashboard-actions, .house-grid { grid-template-columns: 1fr; }
  .current-document-file dl, .document-preview dl { grid-template-columns: 1fr; gap: 2px; }
  .current-document-file dd, .document-preview dd { margin-bottom: 10px; }
  .sticky-actions > *, .dialog-actions > * { width: 100%; }
  .dialog-actions { flex-direction: column-reverse; }
  .danger-zone button { width: 100%; }
  h1 { overflow-wrap: anywhere; }
  .auth-card { margin: 24px auto; padding: 22px; }
}

/* S1.5 — партнёры и рекламные предложения. */
.partner-compliance-reminder { margin: 0 0 22px; padding: 16px 18px; border: 1px solid #e0c27c; border-radius: 10px; background: #fff9e8; color: #4f421f; }
.partner-compliance-reminder strong { display: block; margin-bottom: 4px; }
.partner-compliance-reminder p { margin: 0; }
.partner-editor fieldset { margin: 22px 0; padding: 18px; border: 1px solid var(--border); border-radius: 10px; }
.partner-editor legend { padding: 0 8px; color: var(--primary); font-weight: 800; }
.partner-logo-current img { display: block; width: 160px; max-height: 90px; margin-bottom: 16px; object-fit: contain; object-position: left center; }
.partner-metrics { margin-bottom: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.partner-metrics h2 { margin-top: 0; }
.partner-metrics dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.partner-metrics dl > * { margin: 0; padding: 10px; background: #fff; }
.partner-metrics dd { color: var(--primary); font-size: 1.3rem; font-weight: 800; }
.partner-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.partner-preview-grid > section { min-width: 0; }
.admin-partner-preview { display: grid; gap: 8px; min-height: 320px; padding: 20px; border: 1px solid #c9ddd2; border-radius: 14px; background: linear-gradient(145deg, #fff, #eff7f3); }
.admin-partner-preview h3, .admin-partner-preview p { margin: 0; }
.admin-partner-preview .ad-marker { width: fit-content; padding: 3px 7px; border-radius: 999px; background: #e0ede7; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.admin-partner-preview footer { display: grid; align-self: end; gap: 3px; padding-top: 10px; border-top: 1px solid #d7e6de; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.admin-promo-preview { display: grid; gap: 7px; padding: 12px; border: 1px dashed #79a992; border-radius: 10px; background: #fff; }
.admin-promo-preview code { overflow-wrap: anywhere; color: var(--primary); font-size: 1.15rem; font-weight: 800; }

@media (max-width: 900px) {
  .partner-preview-grid { grid-template-columns: 1fr; }
  .partner-metrics dl { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .container { width: calc(100% - 16px); }
  .topbar nav { grid-template-columns: 1fr; }
  .editor { padding-inline: 12px; }
  .sticky-actions { margin-inline: -12px; padding-inline: 12px; }
  .editor-toolbar button { flex: 1 1 44%; }
}

.house-list-thumb, .house-list-placeholder { display: block; width: 96px; height: 64px; border-radius: 8px; object-fit: cover; }
.house-list-placeholder { display: grid; place-items: center; background: var(--soft); color: var(--muted); font-size: 2rem; }
.house-editor { max-width: 1040px; }
.slug-preview { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-row h2 { margin: 1.5em 0 0; }
.house-cover-current { max-width: 640px; margin: 16px 0; }
.house-cover-current img, .house-image-card > img, .house-preview-cover, .house-image-grid > img { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; object-fit: cover; object-position: var(--house-focal-x,50%) var(--house-focal-y,50%); }
.house-cover-empty { padding: 24px; border: 1px dashed #94a69d; border-radius: 10px; background: var(--soft); color: var(--muted); }
.fact-row { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: end; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.fact-row label { margin-top: 0; }
.fact-actions, .image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fact-actions button { min-width: 48px; padding-inline: 12px; }
.card-preview-admin { margin-top: 28px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
[data-house-card-preview] { width: min(520px,100%); margin: 16px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
[data-house-card-preview] > img, [data-house-card-preview] > .house-cover-empty { width: 100%; aspect-ratio: 3 / 2; border: 0; border-radius: 0; object-fit: cover; }
[data-house-card-preview] > div:last-child { padding: 18px; }
[data-house-card-preview] h3 { font-size: 1.35rem; }
[data-house-card-preview][data-viewport="mobile"] { width: min(320px,100%); }
.house-image-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.house-image-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.house-image-card > img { border-radius: 0; }
.house-image-card form { display: grid; gap: 10px; padding: 16px; }
.image-upload { margin-block: 18px 36px; }
input[type="range"] { padding: 0; }
.draft-banner { margin-bottom: 20px; padding: 16px; border: 2px solid #9b5d00; border-radius: 10px; background: #fff2cf; color: #5c3800; font-weight: 900; text-align: center; }
.house-page-preview { max-width: 1040px; }
.house-card-preview-size { max-width: 520px; }
.house-detail-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 28px; }
.house-facts-preview { grid-template-columns: minmax(150px,1fr) 2fr; }
.preview-modes { display: flex; gap: 18px; }

.focal-x-0 { --house-focal-x: 0%; }
.focal-y-0 { --house-focal-y: 0%; }
.focal-x-1 { --house-focal-x: 1%; }
.focal-y-1 { --house-focal-y: 1%; }
.focal-x-2 { --house-focal-x: 2%; }
.focal-y-2 { --house-focal-y: 2%; }
.focal-x-3 { --house-focal-x: 3%; }
.focal-y-3 { --house-focal-y: 3%; }
.focal-x-4 { --house-focal-x: 4%; }
.focal-y-4 { --house-focal-y: 4%; }
.focal-x-5 { --house-focal-x: 5%; }
.focal-y-5 { --house-focal-y: 5%; }
.focal-x-6 { --house-focal-x: 6%; }
.focal-y-6 { --house-focal-y: 6%; }
.focal-x-7 { --house-focal-x: 7%; }
.focal-y-7 { --house-focal-y: 7%; }
.focal-x-8 { --house-focal-x: 8%; }
.focal-y-8 { --house-focal-y: 8%; }
.focal-x-9 { --house-focal-x: 9%; }
.focal-y-9 { --house-focal-y: 9%; }
.focal-x-10 { --house-focal-x: 10%; }
.focal-y-10 { --house-focal-y: 10%; }
.focal-x-11 { --house-focal-x: 11%; }
.focal-y-11 { --house-focal-y: 11%; }
.focal-x-12 { --house-focal-x: 12%; }
.focal-y-12 { --house-focal-y: 12%; }
.focal-x-13 { --house-focal-x: 13%; }
.focal-y-13 { --house-focal-y: 13%; }
.focal-x-14 { --house-focal-x: 14%; }
.focal-y-14 { --house-focal-y: 14%; }
.focal-x-15 { --house-focal-x: 15%; }
.focal-y-15 { --house-focal-y: 15%; }
.focal-x-16 { --house-focal-x: 16%; }
.focal-y-16 { --house-focal-y: 16%; }
.focal-x-17 { --house-focal-x: 17%; }
.focal-y-17 { --house-focal-y: 17%; }
.focal-x-18 { --house-focal-x: 18%; }
.focal-y-18 { --house-focal-y: 18%; }
.focal-x-19 { --house-focal-x: 19%; }
.focal-y-19 { --house-focal-y: 19%; }
.focal-x-20 { --house-focal-x: 20%; }
.focal-y-20 { --house-focal-y: 20%; }
.focal-x-21 { --house-focal-x: 21%; }
.focal-y-21 { --house-focal-y: 21%; }
.focal-x-22 { --house-focal-x: 22%; }
.focal-y-22 { --house-focal-y: 22%; }
.focal-x-23 { --house-focal-x: 23%; }
.focal-y-23 { --house-focal-y: 23%; }
.focal-x-24 { --house-focal-x: 24%; }
.focal-y-24 { --house-focal-y: 24%; }
.focal-x-25 { --house-focal-x: 25%; }
.focal-y-25 { --house-focal-y: 25%; }
.focal-x-26 { --house-focal-x: 26%; }
.focal-y-26 { --house-focal-y: 26%; }
.focal-x-27 { --house-focal-x: 27%; }
.focal-y-27 { --house-focal-y: 27%; }
.focal-x-28 { --house-focal-x: 28%; }
.focal-y-28 { --house-focal-y: 28%; }
.focal-x-29 { --house-focal-x: 29%; }
.focal-y-29 { --house-focal-y: 29%; }
.focal-x-30 { --house-focal-x: 30%; }
.focal-y-30 { --house-focal-y: 30%; }
.focal-x-31 { --house-focal-x: 31%; }
.focal-y-31 { --house-focal-y: 31%; }
.focal-x-32 { --house-focal-x: 32%; }
.focal-y-32 { --house-focal-y: 32%; }
.focal-x-33 { --house-focal-x: 33%; }
.focal-y-33 { --house-focal-y: 33%; }
.focal-x-34 { --house-focal-x: 34%; }
.focal-y-34 { --house-focal-y: 34%; }
.focal-x-35 { --house-focal-x: 35%; }
.focal-y-35 { --house-focal-y: 35%; }
.focal-x-36 { --house-focal-x: 36%; }
.focal-y-36 { --house-focal-y: 36%; }
.focal-x-37 { --house-focal-x: 37%; }
.focal-y-37 { --house-focal-y: 37%; }
.focal-x-38 { --house-focal-x: 38%; }
.focal-y-38 { --house-focal-y: 38%; }
.focal-x-39 { --house-focal-x: 39%; }
.focal-y-39 { --house-focal-y: 39%; }
.focal-x-40 { --house-focal-x: 40%; }
.focal-y-40 { --house-focal-y: 40%; }
.focal-x-41 { --house-focal-x: 41%; }
.focal-y-41 { --house-focal-y: 41%; }
.focal-x-42 { --house-focal-x: 42%; }
.focal-y-42 { --house-focal-y: 42%; }
.focal-x-43 { --house-focal-x: 43%; }
.focal-y-43 { --house-focal-y: 43%; }
.focal-x-44 { --house-focal-x: 44%; }
.focal-y-44 { --house-focal-y: 44%; }
.focal-x-45 { --house-focal-x: 45%; }
.focal-y-45 { --house-focal-y: 45%; }
.focal-x-46 { --house-focal-x: 46%; }
.focal-y-46 { --house-focal-y: 46%; }
.focal-x-47 { --house-focal-x: 47%; }
.focal-y-47 { --house-focal-y: 47%; }
.focal-x-48 { --house-focal-x: 48%; }
.focal-y-48 { --house-focal-y: 48%; }
.focal-x-49 { --house-focal-x: 49%; }
.focal-y-49 { --house-focal-y: 49%; }
.focal-x-50 { --house-focal-x: 50%; }
.focal-y-50 { --house-focal-y: 50%; }
.focal-x-51 { --house-focal-x: 51%; }
.focal-y-51 { --house-focal-y: 51%; }
.focal-x-52 { --house-focal-x: 52%; }
.focal-y-52 { --house-focal-y: 52%; }
.focal-x-53 { --house-focal-x: 53%; }
.focal-y-53 { --house-focal-y: 53%; }
.focal-x-54 { --house-focal-x: 54%; }
.focal-y-54 { --house-focal-y: 54%; }
.focal-x-55 { --house-focal-x: 55%; }
.focal-y-55 { --house-focal-y: 55%; }
.focal-x-56 { --house-focal-x: 56%; }
.focal-y-56 { --house-focal-y: 56%; }
.focal-x-57 { --house-focal-x: 57%; }
.focal-y-57 { --house-focal-y: 57%; }
.focal-x-58 { --house-focal-x: 58%; }
.focal-y-58 { --house-focal-y: 58%; }
.focal-x-59 { --house-focal-x: 59%; }
.focal-y-59 { --house-focal-y: 59%; }
.focal-x-60 { --house-focal-x: 60%; }
.focal-y-60 { --house-focal-y: 60%; }
.focal-x-61 { --house-focal-x: 61%; }
.focal-y-61 { --house-focal-y: 61%; }
.focal-x-62 { --house-focal-x: 62%; }
.focal-y-62 { --house-focal-y: 62%; }
.focal-x-63 { --house-focal-x: 63%; }
.focal-y-63 { --house-focal-y: 63%; }
.focal-x-64 { --house-focal-x: 64%; }
.focal-y-64 { --house-focal-y: 64%; }
.focal-x-65 { --house-focal-x: 65%; }
.focal-y-65 { --house-focal-y: 65%; }
.focal-x-66 { --house-focal-x: 66%; }
.focal-y-66 { --house-focal-y: 66%; }
.focal-x-67 { --house-focal-x: 67%; }
.focal-y-67 { --house-focal-y: 67%; }
.focal-x-68 { --house-focal-x: 68%; }
.focal-y-68 { --house-focal-y: 68%; }
.focal-x-69 { --house-focal-x: 69%; }
.focal-y-69 { --house-focal-y: 69%; }
.focal-x-70 { --house-focal-x: 70%; }
.focal-y-70 { --house-focal-y: 70%; }
.focal-x-71 { --house-focal-x: 71%; }
.focal-y-71 { --house-focal-y: 71%; }
.focal-x-72 { --house-focal-x: 72%; }
.focal-y-72 { --house-focal-y: 72%; }
.focal-x-73 { --house-focal-x: 73%; }
.focal-y-73 { --house-focal-y: 73%; }
.focal-x-74 { --house-focal-x: 74%; }
.focal-y-74 { --house-focal-y: 74%; }
.focal-x-75 { --house-focal-x: 75%; }
.focal-y-75 { --house-focal-y: 75%; }
.focal-x-76 { --house-focal-x: 76%; }
.focal-y-76 { --house-focal-y: 76%; }
.focal-x-77 { --house-focal-x: 77%; }
.focal-y-77 { --house-focal-y: 77%; }
.focal-x-78 { --house-focal-x: 78%; }
.focal-y-78 { --house-focal-y: 78%; }
.focal-x-79 { --house-focal-x: 79%; }
.focal-y-79 { --house-focal-y: 79%; }
.focal-x-80 { --house-focal-x: 80%; }
.focal-y-80 { --house-focal-y: 80%; }
.focal-x-81 { --house-focal-x: 81%; }
.focal-y-81 { --house-focal-y: 81%; }
.focal-x-82 { --house-focal-x: 82%; }
.focal-y-82 { --house-focal-y: 82%; }
.focal-x-83 { --house-focal-x: 83%; }
.focal-y-83 { --house-focal-y: 83%; }
.focal-x-84 { --house-focal-x: 84%; }
.focal-y-84 { --house-focal-y: 84%; }
.focal-x-85 { --house-focal-x: 85%; }
.focal-y-85 { --house-focal-y: 85%; }
.focal-x-86 { --house-focal-x: 86%; }
.focal-y-86 { --house-focal-y: 86%; }
.focal-x-87 { --house-focal-x: 87%; }
.focal-y-87 { --house-focal-y: 87%; }
.focal-x-88 { --house-focal-x: 88%; }
.focal-y-88 { --house-focal-y: 88%; }
.focal-x-89 { --house-focal-x: 89%; }
.focal-y-89 { --house-focal-y: 89%; }
.focal-x-90 { --house-focal-x: 90%; }
.focal-y-90 { --house-focal-y: 90%; }
.focal-x-91 { --house-focal-x: 91%; }
.focal-y-91 { --house-focal-y: 91%; }
.focal-x-92 { --house-focal-x: 92%; }
.focal-y-92 { --house-focal-y: 92%; }
.focal-x-93 { --house-focal-x: 93%; }
.focal-y-93 { --house-focal-y: 93%; }
.focal-x-94 { --house-focal-x: 94%; }
.focal-y-94 { --house-focal-y: 94%; }
.focal-x-95 { --house-focal-x: 95%; }
.focal-y-95 { --house-focal-y: 95%; }
.focal-x-96 { --house-focal-x: 96%; }
.focal-y-96 { --house-focal-y: 96%; }
.focal-x-97 { --house-focal-x: 97%; }
.focal-y-97 { --house-focal-y: 97%; }
.focal-x-98 { --house-focal-x: 98%; }
.focal-y-98 { --house-focal-y: 98%; }
.focal-x-99 { --house-focal-x: 99%; }
.focal-y-99 { --house-focal-y: 99%; }
.focal-x-100 { --house-focal-x: 100%; }
.focal-y-100 { --house-focal-y: 100%; }

@media (max-width: 768px) {
  .dashboard-actions { grid-template-columns: 1fr 1fr; }
  .fact-row, .house-detail-grid { grid-template-columns: 1fr; }
  .fact-actions { align-items: stretch; }
  .house-image-grid { grid-template-columns: 1fr; }
  .section-row { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .dashboard-actions { grid-template-columns: 1fr; }
  .slug-preview { grid-template-columns: 1fr; }
  .image-actions > * { width: 100%; }
}