:root {
    --bg: #eef1f3;
    --surface: #ffffff;
    --ink: #172026;
    --muted: #65727d;
    --line: #d8dee3;
    --blue: #1f6feb;
    --green: #168a5b;
    --amber: #b66a00;
    --dark: #0f1720;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 6px;
}
button { cursor: pointer; background: #f8fafb; padding: 10px 12px; }
input, select, textarea { width: 100%; padding: 10px 11px; background: #fff; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
main { padding: 24px; }
.topbar {
    height: 64px;
    background: #111820;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand small { display: block; color: #9fb0bf; font-size: 12px; }
.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #f0b429;
    color: #151515;
    font-weight: 800;
}
.topbar nav { display: flex; gap: 18px; color: #d7e0e8; font-size: 14px; }
.workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: start; }
.filters { display: grid; gap: 14px; position: sticky; top: 88px; }
.panel, .sticky-panel, .info-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}
.panel { display: grid; gap: 13px; }
.panel-title { font-weight: 750; color: var(--dark); }
.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.wide { width: 100%; }
.check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.check input { width: auto; }
.field-title { color: var(--muted); font-size: 13px; font-weight: 750; margin-bottom: 7px; }
.country-tools { display: grid; gap: 9px; }
.country-list {
    max-height: 185px;
    overflow: auto;
    display: grid;
    gap: 6px;
    padding: 9px;
    background: #f7fafc;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.country-list.compact { max-height: 128px; }
.country-list .check { font-size: 12px; }
.inline { display: flex; gap: 8px; }
.muted { color: var(--muted); font-size: 12px; margin: 0; }
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.stats div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}
.stats strong { display: block; font-size: 24px; }
.stats span { color: var(--muted); font-size: 12px; }
.result-head, .page-heading { margin: 0 0 14px; font-weight: 750; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.property-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
}
.thumb { display: block; height: 190px; background: #dce3e8; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #e9fff4;
    color: var(--green);
    border: 1px solid #9de3c0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
}
.card-body { padding: 14px; display: grid; gap: 12px; }
.card-top { display: grid; grid-template-columns: 1fr 38px; gap: 10px; }
.title { font-weight: 760; line-height: 1.25; display: block; }
.card-top p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.star { width: 36px; height: 36px; padding: 0; color: #8d98a3; }
.star.on { color: #d08a00; background: #fff8e7; border-color: #f0c36d; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta span, .chips span {
    background: #edf2f6;
    border-radius: 999px;
    padding: 5px 8px;
    color: #43515c;
    font-size: 12px;
}
.price { font-size: 22px; font-weight: 800; }
.payment { margin: 0; color: var(--amber); font-size: 13px; line-height: 1.35; }
.empty {
    background: #fff;
    border: 1px dashed #b8c2cc;
    border-radius: 8px;
    padding: 28px;
    color: var(--muted);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 22px 0 4px;
}
.pagination a, .pagination span {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
}
.pagination .disabled {
    pointer-events: none;
    color: #98a4ae;
    background: #eef2f5;
}
.flash-wrap { padding: 16px 24px 0; }
.flash { padding: 12px 14px; border-radius: 8px; background: #e8f2ff; border: 1px solid #b9d5ff; }
.flash.error { background: #fff0f0; border-color: #ffc2c2; }
.flash.warning { background: #fff8e7; border-color: #f2d188; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; max-width: 1380px; margin: 0 auto; }
.back { color: var(--blue); font-weight: 700; }
.detail h1 { font-size: 34px; line-height: 1.1; margin: 12px 0 8px; letter-spacing: 0; }
.subline { color: var(--muted); margin-bottom: 18px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #dce3e8; }
.detail-main { min-width: 0; }
.info-block { margin-top: 14px; }
.info-block h2, .sticky-panel h3 { margin: 0 0 12px; font-size: 17px; }
.description { white-space: pre-line; line-height: 1.6; color: #2c3842; }
.payment-block { border-color: #efc77f; background: #fffaf0; }
.payment-block pre { white-space: pre-wrap; margin: 0; color: #7a4700; }
.facts { display: grid; grid-template-columns: 190px 1fr; gap: 9px 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.sticky-panel { position: sticky; top: 88px; display: grid; gap: 14px; }
.big-price { font-size: 30px; font-weight: 850; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.source-link { color: var(--blue); font-weight: 750; }
.agent { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.agent strong { color: var(--ink); }
.list-page { max-width: 1040px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.list-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 8px; }
.list-card span { color: var(--muted); }
@media (max-width: 920px) {
    main { padding: 14px; }
    .workspace, .detail { grid-template-columns: 1fr; }
    .filters, .sticky-panel { position: static; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar { padding: 0 14px; }
    .topbar nav { gap: 10px; font-size: 13px; }
}
@media (max-width: 560px) {
    .topbar nav a:last-child { display: none; }
    .stats { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; }
    .page-head { align-items: stretch; flex-direction: column; }
}