:root {
    --paper: #f3efe7;
    --surface: #fffdf8;
    --ink: #24221e;
    --muted: #716d64;
    --line: #d8d1c5;
    --accent: #8a3d2f;
    --accent-dark: #693025;
    --olive: #52604b;
    --gold: #b27a2f;
    --shadow: 0 14px 38px rgba(45, 38, 29, .09);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }

h1, h2, h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

h1 { font-size: clamp(2.1rem, 5vw, 4.5rem); font-style: italic; letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.04; }

.eyebrow,
.property-type,
.reference,
.filters label > span,
.login-form label,
.edit-dialog form > label > span,
.rating-field legend {
    margin: 0 0 .45rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.site-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 190px;
    padding: 2rem clamp(1rem, 4vw, 4rem);
    color: #fff;
    background:
        linear-gradient(100deg, rgba(37, 27, 22, .9), rgba(75, 38, 27, .72)),
        radial-gradient(circle at 82% 18%, #a66e4e, #4c3127 62%);
}

.site-header .eyebrow { color: rgba(255,255,255,.7); }
.text-button { padding: .55rem 0; color: rgba(255,255,255,.86); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); }

.catalog-shell { max-width: 1500px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem); }

.catalog-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
}

.catalog-intro p { color: var(--muted); }
.summary-cards { display: flex; gap: .75rem; flex-wrap: wrap; }
.summary-cards span { padding: .65rem .8rem; background: rgba(255,255,255,.52); border: 1px solid var(--line); font-size: .82rem; }
.summary-cards strong { font-size: 1.15rem; margin-right: .25rem; }

.filters {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr));
    gap: .85rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: rgba(243, 239, 231, .93);
    border-block: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.filters label, .login-form label, .edit-dialog form > label { display: flex; flex-direction: column; }

input, select, textarea {
    width: 100%;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
}

input, select { min-height: 46px; padding: .7rem .8rem; }
textarea { padding: .8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138, 61, 47, .12); }

.property-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }

.property-card {
    display: grid;
    grid-template-columns: minmax(190px, 36%) 1fr;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(90, 76, 59, .14);
    box-shadow: 0 2px 8px rgba(45, 38, 29, .045);
}

.property-card[hidden] { display: none; }
.property-image-wrap { position: relative; min-height: 100%; background: #ddd6ca; overflow: hidden; }
.property-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.property-card:hover .property-image { transform: scale(1.025); }
.listing-status { position: absolute; top: .85rem; left: .85rem; padding: .35rem .55rem; color: white; background: rgba(60, 77, 50, .9); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.property-content { min-width: 0; padding: 1.2rem; }
.property-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; }
.property-heading > div { min-width: 0; }
.property-heading h3 { overflow-wrap: anywhere; }
.reference { margin-top: .45rem; }
.location { min-height: 2.5rem; margin: .9rem 0; color: var(--muted); font-size: .88rem; }

.decision-pill { flex: 0 0 auto; padding: .35rem .5rem; border: 1px solid; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.status-none { color: #68635b; border-color: #bdb5aa; background: #f0ede7; }
.status-interested { color: #745018; border-color: #d9b46d; background: #fff2ce; }
.status-buying { color: #355437; border-color: #8eb491; background: #e6f2e5; }

.key-facts { display: grid; grid-template-columns: 1.5fr 1fr .7fr; border-block: 1px solid var(--line); }
.key-facts span { min-width: 0; padding: .75rem .6rem .75rem 0; }
.key-facts span + span { padding-left: .7rem; border-left: 1px solid var(--line); }
.key-facts small { display: block; color: var(--muted); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.key-facts strong { display: block; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }

.private-summary { display: flex; justify-content: space-between; gap: .8rem; margin: .85rem 0 .35rem; color: var(--muted); font-size: .78rem; }
.stars { color: var(--gold); letter-spacing: .05em; }
.note-preview { min-height: 2.5rem; margin: .35rem 0 .9rem; color: #4d4942; font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.card-actions, .dialog-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .55rem .8rem; text-decoration: none; border: 1px solid var(--ink); font-size: .78rem; font-weight: 650; }
.button.primary { color: #fff; background: var(--ink); }
.button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button.secondary { color: var(--ink); background: transparent; border-color: var(--line); }

.source-details { margin-top: .9rem; color: var(--muted); font-size: .8rem; }
.source-details summary { padding: .5rem 0; font-weight: 650; cursor: pointer; }
.source-details dl { margin: .5rem 0 0; border-top: 1px solid var(--line); }
.source-details dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid rgba(216, 209, 197, .65); }
.source-details dt { flex: 1 1 auto; }
.source-details dd { margin: 0; color: var(--ink); text-align: right; }

.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }

.edit-dialog { width: min(580px, calc(100% - 2rem)); padding: 0; color: var(--ink); background: var(--surface); border: 0; box-shadow: var(--shadow); }
.edit-dialog::backdrop { background: rgba(29, 25, 21, .66); backdrop-filter: blur(4px); }
.edit-dialog form { display: grid; gap: 1rem; padding: 1.4rem; }
.dialog-header { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 2rem; }
.icon-button { width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); font-size: 1.5rem; }
.dialog-actions { justify-content: flex-end; padding-top: .4rem; }
.form-message { min-height: 1.2rem; margin: 0; color: var(--accent); font-size: .82rem; }

.rating-field { margin: 0; padding: 0; border: 0; }
.rating-field > div { display: flex; align-items: center; gap: .3rem; }
.rating-field input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-field label { color: #c8c0b5; font-size: 1.7rem; cursor: pointer; }
.rating-field input:checked + label { color: var(--gold); }
.clear-rating { margin-left: .6rem; padding: .3rem 0; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: .75rem; }

.login-page { min-height: 100vh; background: linear-gradient(130deg, rgba(31,23,19,.7), rgba(69,42,31,.6)), radial-gradient(circle at 70% 25%, #b88d6c, #4d3429 65%); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(440px, 100%); padding: clamp(2rem, 6vw, 3.5rem); background: rgba(255, 253, 248, .97); box-shadow: var(--shadow); }
.login-intro { margin: 1rem 0 1.5rem; color: var(--muted); }
.login-form { display: grid; gap: 1rem; }
.trust-note { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
.alert { padding: .75rem; color: #7e211b; background: #fbe9e6; border-left: 3px solid #a94237; }

@media (max-width: 1100px) {
    .property-grid { grid-template-columns: 1fr; }
    .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .site-header { min-height: 150px; align-items: center; }
    .catalog-intro { align-items: flex-start; flex-direction: column; }
    .filters { position: static; grid-template-columns: 1fr 1fr; }
    .search-field { grid-column: 1 / -1; }
    .property-card { grid-template-columns: 1fr; }
    .property-image-wrap { aspect-ratio: 16 / 9; min-height: 0; }
    .property-heading { flex-direction: column; }
    .decision-pill { order: -1; }
    .private-summary { align-items: flex-start; flex-direction: column; }
    .card-actions .button { flex: 1 1 100%; }
}
