:root {
    --ink: #152824;
    --muted: #6f7d79;
    --line: #e5ebe8;
    --paper: #f4f7f5;
    --white: #ffffff;
    --green: #0b6b57;
    --green-dark: #084d41;
    --mint: #d9efe8;
    --orange: #d97732;
    --shadow: 0 18px 60px rgba(20, 49, 41, .10);
}

* { box-sizing: border-box; }
:where(input,select,textarea)[required] { border-left: 3px solid #d96b4f !important; }
:where(input,select,textarea)[required]:focus { border-left-color: #b84a32 !important; }
label:has(> input[required]),label:has(> select[required]),label:has(> textarea[required]),.required-label { position: relative; }
label:has(> input[required])::after,label:has(> select[required])::after,label:has(> textarea[required])::after,.required-label::after { content: "* 必填"; position: absolute; top: 0; right: 2px; padding: 2px 6px; border-radius: 5px; color: #a83d29; background: #fff0eb; font-size: 9px; font-weight: 800; line-height: 1.35; letter-spacing: .02em; }
.check-label:has(> input[required])::after,.settings-check:has(> input[required])::after,.save-credentials:has(> input[required])::after { display: none; }
html { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; letter-spacing: .03em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; color: white; background: var(--green); box-shadow: 0 8px 22px rgba(11,107,87,.24); }
.brand-light .brand-mark { color: var(--green-dark); background: #dff5ed; }
.brand-light { color: white; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.eyebrow.light { color: #aee0d2; }
.muted { color: var(--muted); }

.login-page { background: #e7eeeb; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .92fr) 1.08fr; }
.login-story { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 54px 8vw 42px 6vw; color: white; background: linear-gradient(145deg, #063f36 0%, #0a6d59 58%, #16866d 100%); }
.login-story::before, .login-story::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-story::before { width: 520px; height: 520px; right: -230px; top: 6%; }
.login-story::after { width: 300px; height: 300px; left: -170px; bottom: 8%; }
.story-content { position: relative; z-index: 1; margin: auto 0; max-width: 620px; }
.story-content h1 { margin: 0 0 24px; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(42px, 5vw, 74px); line-height: 1.14; letter-spacing: -.06em; }
.story-content > p:not(.eyebrow) { max-width: 520px; color: #cce9e1; font-size: 17px; line-height: 1.9; }
.story-stats { display: flex; gap: 54px; margin-top: 58px; }
.story-stats div { display: grid; gap: 7px; }
.story-stats strong { font-size: 30px; }
.story-stats span, .story-footnote { color: #b8ddd3; font-size: 13px; }
.story-footnote { position: relative; z-index: 1; margin: 0; letter-spacing: .06em; }
.login-panel { display: grid; place-items: center; padding: 48px 6vw; background: #f7faf8; }
.login-card { width: min(430px, 100%); padding: 46px; border: 1px solid rgba(13,83,70,.10); border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.login-card h2 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.04em; }
.login-card > .muted { margin: 0 0 34px; }
.login-form { display: grid; gap: 10px; }
.login-form label { margin-top: 10px; font-size: 13px; font-weight: 700; }
.login-form .required-label { display: block; padding-right: 54px; }
.label-row { display: flex; justify-content: space-between; align-items: end; }
.label-row span { color: #9aa6a2; font-size: 12px; }
.login-form input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #d9e2de; border-radius: 12px; outline: none; background: #fbfdfc; transition: .2s; }
.login-form input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(11,107,87,.10); }
.login-form button { display: flex; justify-content: space-between; align-items: center; height: 54px; margin-top: 18px; padding: 0 20px; border: 0; border-radius: 12px; color: white; background: var(--green); font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px rgba(11,107,87,.22); }
.login-form button:hover { background: var(--green-dark); }
.save-credentials { display: flex !important; align-items: center; gap: 10px; margin-top: 8px !important; padding: 10px 12px; border: 1px solid #e0e7e4; border-radius: 11px; background: #f8fbfa; cursor: pointer; }
.save-credentials input { width: 17px !important; height: 17px !important; flex: 0 0 17px; accent-color: var(--green); }
.save-credentials span { display: grid; gap: 2px; }.save-credentials strong { font-size: 12px; }.save-credentials small { color: var(--muted); font-size: 9px; font-weight: 400; }
.demo-account { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 16px; border-radius: 12px; background: #f0f7f4; }
.demo-account div { display: grid; gap: 4px; font-size: 12px; }
.demo-account span { color: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #20a77f; box-shadow: 0 0 0 5px rgba(32,167,127,.12); }
.notice { margin: -18px 0 18px; padding: 11px 13px; border-radius: 10px; font-size: 13px; }
.notice.error { color: #9a332b; background: #fff0ee; }
.notice.success { color: #176a51; background: #e9f7f1; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px; border-right: 1px solid var(--line); background: #fff; }
.sidebar .brand { padding: 0 10px 26px; }
.nav-list { display: grid; gap: 6px; margin-top: 14px; }
.nav-list a { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 11px; color: #5f6f6a; font-size: 14px; font-weight: 700; }
.nav-list a:hover { background: #f2f7f5; }
.nav-list a.active { color: var(--green); background: #eaf5f1; }
.nav-list a span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #edf2f0; font-size: 12px; }
.nav-list a.active span { color: white; background: var(--green); }
.sidebar-card { margin-top: auto; padding: 17px; border-radius: 16px; color: white; background: var(--green-dark); }
.sidebar-card p { margin: 0 0 12px; color: #b7d8d0; font-size: 12px; }
.sidebar-card strong { font-size: 24px; }
.sidebar-card span { margin-left: 5px; color: #b7d8d0; font-size: 11px; }
.progress { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.15); }
.progress i { display: block; height: 100%; border-radius: inherit; background: #77d5bb; }
.logout-form button { width: 100%; margin-top: 14px; padding: 10px; border: 0; color: #71807b; background: transparent; cursor: pointer; }
.main-content { min-width: 0; padding: 30px clamp(24px, 4vw, 58px) 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.date-line { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.topbar h1 { margin: 0; font-size: 27px; }
.profile { display: flex; align-items: center; gap: 11px; }
.profile > div { display: grid; gap: 3px; }
.profile span { color: var(--muted); font-size: 11px; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white !important; background: var(--green); font-weight: 800; }
.menu-button { display: none; border: 0; background: transparent; font-size: 24px; }
.welcome-band { display: flex; align-items: center; justify-content: space-between; min-height: 188px; padding: 32px 42px; overflow: hidden; border-radius: 24px; color: white; background: linear-gradient(120deg, #06483d, #0b715c); box-shadow: 0 16px 42px rgba(8,80,67,.17); }
.welcome-band h2 { margin: 0 0 10px; font-size: 31px; }
.welcome-band p:not(.eyebrow) { margin: 0; color: #c6e4dc; }
.occupancy-ring { --value: 85; width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#84ddc3 calc(var(--value) * 1%), rgba(255,255,255,.14) 0); }
.occupancy-ring::before { content: ""; width: 92px; height: 92px; grid-area: 1/1; border-radius: 50%; background: #0a5c4d; }
.occupancy-ring div { z-index: 1; grid-area: 1/1; display: grid; place-items: center; }
.occupancy-ring strong { font-size: 24px; }
.occupancy-ring span { color: #b9dbd2; font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.metric-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 6px 20px rgba(30,60,52,.04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: #bfd8d0; box-shadow: 0 12px 30px rgba(30,60,52,.09); }
.metric-label { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.metric-icon.blue { color: #2366a0; background: #e5f0fa; }
.metric-icon.green { color: #087154; background: #e2f4ed; }
.metric-icon.orange { color: #b35422; background: #fceddf; }
.metric-icon.purple { color: #6a4aa0; background: #eee8f8; }
.metric-card > strong { font-size: 28px; letter-spacing: -.04em; }
.metric-card small { margin-left: 4px; color: var(--muted); }
.metric-card p { margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.metric-card p b { color: var(--ink); }
.metric-card p b.positive { color: var(--green); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 20px; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-head h2 { margin: 0; font-size: 18px; }
.panel-head > a { color: var(--green); font-size: 12px; font-weight: 700; }
.badge { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--green); background: var(--mint); font-size: 11px; font-weight: 800; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 8px; border-bottom: 1px solid var(--line); color: #8a9692; text-align: left; font-size: 10px; letter-spacing: .05em; }
td { padding: 16px 8px; border-bottom: 1px solid #eef2f0; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { display: grid; gap: 5px; }
td:first-child span { color: var(--muted); font-size: 10px; }
.rate-cell { display: flex; align-items: center; gap: 8px; }
.rate-bar { width: 65px; height: 5px; overflow: hidden; border-radius: 5px; background: #e6eeeb; }
.rate-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.alert-list { display: grid; gap: 4px; }
.alert-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf1ef; }
.alert-marker { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #4e8ec7; }
.alert-item.urgent .alert-marker { background: #dc644f; }
.alert-item.warning .alert-marker { background: #e4a044; }
.alert-item strong { font-size: 12px; }
.alert-item p { margin: 5px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.alert-item time { color: #a0aaa6; font-size: 9px; }
.text-button { display: block; margin-top: 17px; color: var(--green); text-align: center; font-size: 12px; font-weight: 700; }

.property-main { max-width: 1680px; width: 100%; }
.page-notice { margin: 0 0 18px; }
.property-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 36px; border-radius: 22px; color: white; background: linear-gradient(125deg, #073f36, #0d725e); box-shadow: 0 15px 42px rgba(8,80,67,.15); }
.property-hero h2 { max-width: 640px; margin: 0 0 9px; font-size: clamp(23px, 3vw, 32px); }
.property-hero p:not(.eyebrow) { margin: 0; color: #c5e4db; font-size: 13px; }
.property-kpis { display: flex; gap: 10px; }
.property-kpis div { min-width: 102px; padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.08); }
.property-kpis strong, .property-kpis span { display: block; }
.property-kpis strong { margin-bottom: 5px; font-size: 24px; }
.property-kpis span { color: #bfe0d7; font-size: 10px; }
.property-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.compact-panel { padding: 20px; }
.property-filter-list { display: grid; gap: 7px; }
.property-filter-list a { display: grid; gap: 5px; padding: 13px; border: 1px solid transparent; border-radius: 12px; }
.property-filter-list a:hover { background: #f4f8f6; }
.property-filter-list a.active { border-color: #b9dcd1; background: #edf7f3; }
.property-filter-list strong { font-size: 13px; }
.property-filter-list span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.create-drawer, .create-room { position: relative; margin-top: 16px; }
.create-drawer summary, .create-room summary { list-style: none; cursor: pointer; color: var(--green); font-size: 12px; font-weight: 800; }
.create-drawer summary { padding: 12px; border: 1px dashed #b8d8cf; border-radius: 11px; text-align: center; }
.create-drawer summary::-webkit-details-marker, .create-room summary::-webkit-details-marker { display: none; }
.stack-form { display: grid; gap: 12px; margin-top: 15px; }
.stack-form label, .room-form label { display: grid; gap: 6px; color: #52645f; font-size: 10px; font-weight: 700; }
.stack-form input, .stack-form textarea, .room-form input, .room-form select { width: 100%; padding: 10px 11px; border: 1px solid #dce5e1; border-radius: 9px; outline: none; color: var(--ink); background: white; }
.stack-form textarea { min-height: 76px; resize: vertical; }
.stack-form input:focus, .stack-form textarea:focus, .room-form input:focus, .room-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,87,.08); }
.primary-button { padding: 11px 16px; border: 0; border-radius: 10px; color: white; background: var(--green); font-weight: 800; cursor: pointer; }
.secondary-button { padding: 10px 15px; border: 1px solid #cfdcd7; border-radius: 10px; color: #52645f; background: white; font-weight: 800; cursor: pointer; }
.secondary-button:hover { border-color: #9fbab1; background: #f4f8f6; }
.danger-button { padding: 10px 15px; border: 1px solid #e3b9b5; border-radius: 10px; color: #a33d35; background: #fff8f7; font-weight: 800; cursor: pointer; }
.danger-button:hover { border-color: #cf8179; background: #fff0ee; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 16px; }
.section-title-row h2 { margin: 0; font-size: 20px; }
.create-room { margin: 0; }
.create-room summary { padding: 11px 15px; border-radius: 10px; color: white; background: var(--green); box-shadow: 0 8px 20px rgba(11,107,87,.16); }
.room-form { position: absolute; z-index: 10; right: 0; top: 48px; width: min(620px, 86vw); display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 24px 70px rgba(20,49,41,.18); }
.wide-field { grid-column: 1 / -1; }
.room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.room-card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 6px 20px rgba(30,60,52,.04); }
.room-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.room-property { color: var(--muted); font-size: 10px; }
.room-card h3 { margin: 4px 0 0; font-size: 21px; }
.status-pill { padding: 6px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; }
.status-pill.vacant { color: #087154; background: #e2f4ed; }
.status-pill.occupied { color: #2366a0; background: #e5f0fa; }
.status-pill.reserved { color: #a95820; background: #fceddf; }
.status-pill.unavailable { color: #7b6864; background: #eeeae8; }
.room-price { margin: 19px 0 11px; }
.room-price strong { font-size: 25px; }
.room-price span { margin-left: 4px; color: var(--muted); font-size: 10px; }
.room-meta, .facility-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.room-meta span { padding-right: 8px; border-right: 1px solid var(--line); color: #596a65; font-size: 11px; }
.room-meta span:last-child { border-right: 0; }
.facility-tags { min-height: 24px; margin: 13px 0 17px; }
.facility-tags span { padding: 4px 7px; border-radius: 6px; color: #57706a; background: #f0f5f3; font-size: 9px; }
.media-strip { display: flex; gap: 7px; margin-bottom: 15px; overflow-x: auto; }
.media-thumb { position: relative; flex: 0 0 74px; height: 58px; overflow: hidden; border-radius: 9px; background: #dce6e2; }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-thumb form { position: absolute; top: 3px; right: 3px; }
.media-thumb button { display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; color: white; background: rgba(15,35,29,.75); cursor: pointer; }
.room-actions { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #edf1ef; }
.status-form, .media-form { display: flex; align-items: center; gap: 7px; }
.status-form select { flex: 1; min-width: 0; padding: 8px; border: 1px solid #dce5e1; border-radius: 8px; color: #53635e; background: white; }
.status-form button, .media-form button { padding: 8px 11px; border: 0; border-radius: 8px; color: var(--green); background: #eaf5f1; font-size: 10px; font-weight: 800; cursor: pointer; }
.media-form label { flex: 1; min-width: 0; padding: 8px 10px; overflow: hidden; border: 1px dashed #c5d7d1; border-radius: 8px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.media-form input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.side-note { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); color: #a9cec4; font-size: 9px; line-height: 1.7; }
.empty-state { padding: 60px; border: 1px dashed #cbd9d4; border-radius: 18px; color: var(--muted); text-align: center; background: rgba(255,255,255,.5); }
.empty-state strong { color: var(--ink); }
.empty-state p { font-size: 12px; }
.contract-main { max-width: 1560px; width: 100%; }
.contract-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 36px; border-radius: 22px; color: white; background: linear-gradient(125deg,#263d58,#315f68); box-shadow: 0 15px 42px rgba(32,60,72,.15); }
.contract-hero h2 { margin: 0 0 9px; font-size: clamp(24px,3vw,32px); }
.contract-hero p:not(.eyebrow) { margin: 0; color: #d4e2e4; font-size: 13px; }
.contract-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 25px 2px 16px; }
.contract-toolbar h2 { margin: 0; font-size: 20px; }
.contract-create-form { grid-template-columns: repeat(2,1fr); }
.contract-list { display: grid; gap: 14px; }
.contract-card { padding: 23px 25px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 6px 20px rgba(30,60,52,.04); }
.contract-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.contract-no { color: #7b8b86; font-size: 9px; letter-spacing: .08em; }
.contract-card h3 { margin: 5px 0 0; font-size: 19px; }
.status-pill.draft { color: #6f625d; background: #eeeae8; }
.status-pill.pending_tenant { color: #a95820; background: #fceddf; }
.status-pill.active { color: #087154; background: #e2f4ed; }
.status-pill.expiring { color: #9b6b10; background: #fff2cc; }
.status-pill.expired,.status-pill.terminated { color: #824a46; background: #f6e8e7; }
.contract-facts { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; margin: 20px 0; padding: 16px 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }
.contract-facts div { display: grid; gap: 6px; }
.contract-facts span { color: var(--muted); font-size: 9px; }
.contract-facts strong { font-size: 12px; }
.bill-drawer summary { cursor: pointer; color: var(--green); font-size: 11px; font-weight: 800; }
.bill-table { display: grid; margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.bill-table div { display: grid; grid-template-columns: .7fr 1fr 1fr .7fr; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #edf1ef; align-items: center; font-size: 10px; }
.bill-table div:last-child { border: 0; }
.bill-table strong { text-align: right; }
.bill-table em { color: var(--muted); text-align: right; font-style: normal; }
.contract-actions { display: flex; align-items: center; gap: 12px; margin-top: 17px; }
.contract-actions .primary-button { padding: 9px 13px; font-size: 10px; }
.contract-actions > a,.contract-actions > details > summary { color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.contract-actions > details { position: relative; }
.terminate-form { position: absolute; z-index: 5; right: 0; top: 26px; width: 280px; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.terminate-form input { width: 100%; padding: 8px; border: 1px solid #dce5e1; border-radius: 8px; }
.terminate-form button { padding: 8px; border: 0; border-radius: 8px; color: white; background: #a64940; cursor: pointer; }
.settlement-box { display: flex; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; color: #675626; background: #fff7df; font-size: 10px; }

.property-edit-drawer { position: relative; margin-top: 13px; }
.property-manage-row { display: block; }
.property-manage-row form { margin: 0; }
.editor-delete-row { display: flex; justify-content: flex-end; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #e8d9d7; }
.property-edit-drawer summary, .room-edit-drawer summary, .account-edit summary { color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; }
.property-edit-drawer .stack-form { padding-top: 4px; }
.room-edit-drawer { position: relative; margin-top: 17px; }
.room-edit-drawer .room-form, .inline-room-form { position: static; width: 100%; margin-top: 12px; box-shadow: none; }

.account-toolbar { margin-top: 26px; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 6px 20px rgba(30,60,52,.04); }
.account-card-head, .account-card-head > div { display: flex; align-items: center; gap: 12px; }
.account-card-head { justify-content: space-between; }
.account-card-head h3 { margin: 0 0 4px; font-size: 16px; }
.account-card-head div span { color: var(--muted); font-size: 10px; }
.account-facts { display: flex; justify-content: space-between; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; }
.account-facts span { color: var(--muted); }
.account-edit .check-label { display: flex; grid-template-columns: auto 1fr; align-items: center; }
.account-edit .check-label input { width: auto; }
.account-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-actions .account-edit { flex: 1; }
.account-actions .danger-button { padding: 7px 11px; font-size: 10px; }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; }
.filter-tabs a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: white; font-size: 11px; font-weight: 800; }
.filter-tabs a.active { border-color: var(--green); color: white; background: var(--green); }
.todo-list { display: grid; gap: 12px; }
.todo-card { display: grid; grid-template-columns: 6px 1fr; gap: 18px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.todo-card.read { opacity: .7; }
.todo-marker { border-radius: 6px; background: #4e8ec7; }
.todo-marker.finance { background: #dc644f; }
.todo-marker.repair { background: #e4a044; }
.todo-marker.device { background: #6a4aa0; }
.todo-body > div:first-child, .todo-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.todo-category { color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.todo-body time { color: #99a5a1; font-size: 10px; }
.todo-body h3 { margin: 8px 0 6px; font-size: 16px; }
.todo-body p { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.todo-actions { justify-content: flex-start; }
.todo-actions a, .todo-actions button { border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.empty-state { padding: 54px 24px; border: 1px dashed #cddbd6; border-radius: 18px; color: var(--muted); text-align: center; background: white; }
.empty-state strong { color: var(--ink); }

.report-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 31px 38px; border-radius: 23px; color: white; background: linear-gradient(125deg, #073f36, #0d725e); }
.report-hero h2 { margin: 0 0 9px; font-size: clamp(24px, 3vw, 32px); }
.report-hero p:not(.eyebrow) { margin: 0; color: #c5e4db; font-size: 13px; }
.report-income { display: grid; min-width: 220px; gap: 5px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.17); }
.report-income span, .report-income small { color: #bfe0d7; }
.report-income strong { font-size: 32px; }
.report-layout { display: grid; grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr); gap: 20px; }
.trend-chart { height: 220px; display: flex; align-items: end; justify-content: space-around; gap: 11px; padding-top: 15px; border-bottom: 1px solid var(--line); }
.trend-column { height: 100%; flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 9px; text-align: center; }
.trend-bars { height: 100%; display: flex; align-items: end; justify-content: center; gap: 4px; }
.trend-bars i { width: min(19px, 38%); min-height: 8px; border-radius: 5px 5px 0 0; }
.trend-bars .expected, .chart-legend .expected { background: #dfe8e5; }
.trend-bars .received, .chart-legend .received { background: var(--green); }
.trend-column > span { color: var(--muted); font-size: 9px; }
.chart-legend { display: flex; justify-content: center; gap: 18px; margin-top: 15px; color: var(--muted); font-size: 10px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; }

.settings-main { max-width: 1500px; }
.settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 30px 36px; border-radius: 23px; color: white; background: linear-gradient(125deg, #073f36, #0d725e); box-shadow: 0 15px 42px rgba(8,80,67,.15); }
.settings-hero h2 { margin: 0 0 9px; font-size: clamp(24px,3vw,32px); }
.settings-hero p:not(.eyebrow) { margin: 0; color: #c5e4db; font-size: 13px; }
.settings-shield { padding: 10px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; color: #d5efe7; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; white-space: nowrap; }
.settings-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.settings-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 6px 20px rgba(30,60,52,.04); }
.settings-card-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.settings-card-head > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--green); background: var(--mint); font-size: 10px; font-weight: 900; }
.settings-card-head h2 { margin: 0 0 5px; font-size: 17px; }
.settings-card-head p { margin: 0; color: var(--muted); font-size: 10px; }
.settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.settings-fields label { display: grid; gap: 7px; color: #52645f; font-size: 10px; font-weight: 800; }
.settings-fields input, .settings-fields select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #dce5e1; border-radius: 9px; outline: none; color: var(--ink); background: white; }
.settings-fields input:focus, .settings-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,87,.08); }
.settings-fields small { color: #899691; font-size: 9px; font-weight: 400; line-height: 1.5; }
.settings-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; align-self: end; min-height: 42px; padding: 9px 11px; border: 1px solid #dce5e1; border-radius: 9px; }
.settings-check input { width: auto; min-height: auto; }
.settings-check span { display: grid; gap: 2px; }
.settings-check strong { font-size: 10px; }
.settings-submit { grid-column: 1/-1; position: sticky; bottom: 18px; z-index: 5; display: flex; justify-content: flex-end; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: 1fr; }
    .property-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .room-grid { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-layout { grid-template-columns: 1fr; }
    .settings-form { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-story { min-height: 300px; padding: 34px 28px; }
    .story-content { margin: 50px 0 20px; }
    .story-content h1 { font-size: 39px; }
    .story-stats, .story-footnote { display: none; }
    .login-panel { padding: 30px 18px; }
    .login-card { padding: 30px 24px; }
    .app-shell { display: block; }
    .sidebar { display: none; }
    .main-content { padding: 22px 16px 40px; }
    .menu-button { display: block; }
    .topbar { justify-content: flex-start; gap: 14px; }
    .profile { margin-left: auto; }
    .profile > div { display: none; }
    .welcome-band { padding: 26px; }
    .occupancy-ring { width: 96px; height: 96px; }
    .occupancy-ring::before { width: 72px; height: 72px; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .metric-card { padding: 17px; }
    .metric-card > strong { font-size: 23px; }
    .table-wrap { overflow-x: auto; }
    table { min-width: 560px; }
    .property-hero { display: block; padding: 25px; }
    .contract-hero { display: block; padding: 25px; }
    .property-kpis { margin-top: 20px; }
    .property-layout { grid-template-columns: 1fr; }
    .property-filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .room-form { position: fixed; top: 70px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 90px); overflow-y: auto; }
}

@media (max-width: 460px) {
    .welcome-band { align-items: flex-start; min-height: 200px; }
    .welcome-band h2 { font-size: 24px; }
    .welcome-band p:not(.eyebrow) { max-width: 210px; font-size: 12px; line-height: 1.6; }
    .occupancy-ring { width: 82px; height: 82px; }
    .occupancy-ring::before { width: 62px; height: 62px; }
    .occupancy-ring strong { font-size: 18px; }
    .metric-grid { grid-template-columns: 1fr; }
    .property-kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
    .property-kpis div { min-width: 0; padding: 12px; }
    .property-filter-list, .room-form { grid-template-columns: 1fr; }
    .wide-field { grid-column: auto; }
    .contract-facts { grid-template-columns: 1fr; gap: 12px; }
    .contract-create-form { grid-template-columns: 1fr; }
    .bill-table div { grid-template-columns: .7fr 1fr; }
    .bill-table strong,.bill-table em { text-align: left; }
    .settlement-box { display: grid; }
    .account-grid { grid-template-columns: 1fr; }
    .report-hero { display: grid; padding: 25px; }
    .report-income { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.17); border-left: 0; }
    .settings-hero { display: grid; padding: 25px; }
    .settings-fields { grid-template-columns: 1fr; }
    .settings-submit { position: static; }
}

/* Platform administration */
.admin-main { background: #f4f7fb; }
.admin-sidebar { background: linear-gradient(180deg, #122033, #182c46); }
.admin-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.2fr); gap: 30px; padding: 34px; border-radius: 24px; background: linear-gradient(135deg, #18324e, #24577a); color: #fff; box-shadow: 0 18px 50px rgba(22,49,75,.18); }
.admin-hero h2 { font-size: 30px; margin: 8px 0; }
.admin-hero p { max-width: 680px; color: #d8e8f4; line-height: 1.7; }
.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
.admin-kpis div { display: flex; flex-direction: column; justify-content: center; padding: 18px; border-radius: 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.admin-kpis strong { font-size: 27px; }
.admin-kpis span { margin-top: 6px; color: #cfe1ed; font-size: 13px; }
.admin-tabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 10px; margin: 22px 0; padding: 10px; border-radius: 16px; background: rgba(244,247,251,.94); backdrop-filter: blur(12px); }
.admin-tabs a { padding: 10px 16px; border-radius: 10px; background: #fff; color: #31506c; text-decoration: none; border: 1px solid #e0e8ef; }
.admin-tabs a:hover { background: #eaf4f9; color: #0d718c; }
.admin-section { scroll-margin-top: 90px; margin-top: 22px; }
.admin-section .panel-title > span { color: #718397; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.admin-form-grid details { padding: 14px 16px; border: 1px solid #dce6ed; border-radius: 14px; background: #f8fbfd; }
.admin-form-grid summary { cursor: pointer; font-weight: 700; color: #1e5871; }
.admin-form-grid .stack-form { margin-top: 16px; }
.compact-form { min-width: 270px; margin-top: 12px; }
.inline-danger { display: inline-block; margin-left: 8px; }
.audit-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.audit-filter input { min-width: 190px; }
.admin-section td code { white-space: normal; word-break: break-all; font-size: 12px; }
.admin-section table small { color: #6c7d8c; word-break: break-all; }
@media (max-width: 1100px) { .admin-hero { grid-template-columns: 1fr; } .admin-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .admin-main { padding: 20px 14px; } .admin-hero { padding: 24px 20px; } .admin-kpis, .admin-form-grid { grid-template-columns: 1fr; } .admin-tabs { overflow-x: auto; } .admin-tabs a { white-space: nowrap; } .audit-filter { width: 100%; } .audit-filter input { min-width: 0; width: 100%; } }

/* Property listing center */
.listing-main { max-width: 1600px; width: 100%; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.header-actions form { margin: 0; }
.report-period-form { display: flex; align-items: end; gap: 8px; }
.report-period-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.report-period-form input { min-height: 38px; padding: 7px 10px; border: 1px solid #dce5e1; border-radius: 9px; background: #fff; }
.empty-state.compact { padding: 16px; }
.todo-card:target { border-color: #71ad9d; box-shadow: 0 0 0 4px rgba(11,107,87,.10); }
.listing-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 32px 36px; border-radius: 23px; color: #fff; background: linear-gradient(120deg,#173e4a,#0b715c); box-shadow: 0 16px 42px rgba(8,80,67,.16); }
.listing-hero h2 { margin: 0 0 10px; font-size: clamp(24px,3vw,33px); }
.listing-hero p:not(.eyebrow) { margin: 0; color: #cae3de; font-size: 13px; }
.listing-kpis { display: grid; grid-template-columns: repeat(4,minmax(76px,1fr)); gap: 9px; }
.listing-kpis div { padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.08); }
.listing-kpis strong,.listing-kpis span { display: block; }
.listing-kpis strong { font-size: 23px; }
.listing-kpis span { margin-top: 4px; color: #c0ddd6; font-size: 10px; }
.listing-toolbar { display: flex; justify-content: space-between; margin: 26px 2px 15px; }
.listing-toolbar h2 { margin: 0; font-size: 20px; }
.listing-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.listing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.listing-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 7px 22px rgba(30,60,52,.05); }
.listing-cover { position: relative; height: 178px; display: grid; place-items: center; color: #82918c; background: #e7efec; }
.listing-cover img { width: 100%; height: 100%; object-fit: cover; }
.listing-cover .status-pill { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); }
.listing-cover .status-pill.published { color: #087154; }.listing-cover .status-pill.paused { color: #9b6b10; }.listing-cover .status-pill.offline { color: #824a46; }
.listing-card-body { padding: 19px; }
.listing-no { margin: 0; color: #91a09b; font-size: 9px; letter-spacing: .08em; }
.listing-card h3 { margin: 6px 0 8px; font-size: 17px; line-height: 1.45; }
.listing-location { color: var(--muted); font-size: 11px; }
.listing-card-facts { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 15px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.listing-card-facts strong { color: #c45f25; font-size: 17px; }.listing-card-facts span { color: #667772; font-size: 10px; }
.listing-metrics { display: flex; gap: 10px; flex-wrap: wrap; color: #95a19d; font-size: 9px; }
.listing-actions { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.listing-actions a,.listing-actions button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.editor-summary { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.editor-summary > div:not(.editor-state-actions) { display: grid; gap: 4px; }.editor-summary span { color: var(--muted); font-size: 9px; }.editor-summary strong { font-size: 12px; }
.editor-state-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }.editor-state-actions form { margin: 0; }
.listing-editor { display: grid; gap: 18px; }
.editor-section { padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 5px 18px rgba(30,60,52,.035); }
.editor-section-title { display: flex; gap: 13px; margin-bottom: 21px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.editor-section-title > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; }
.editor-section-title h2 { margin: 0 0 4px; font-size: 18px; }.editor-section-title p { margin: 0; color: var(--muted); font-size: 10px; }
.editor-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.editor-fields label { display: grid; gap: 6px; color: #52645f; font-size: 10px; font-weight: 700; }
.editor-fields input,.editor-fields select,.editor-fields textarea { width: 100%; min-height: 41px; padding: 10px 11px; border: 1px solid #dce5e1; border-radius: 9px; outline: none; background: #fff; }
.editor-fields textarea { min-height: 88px; resize: vertical; }.editor-fields input:focus,.editor-fields select:focus,.editor-fields textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,107,87,.08); }
.field-wide { grid-column: 1/-1; }.check-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }.check-row label { display: flex; grid-template-columns: none; align-items: center; gap: 6px; }.check-row input { width: auto; min-height: 0; }
.choice-block { margin: 18px 0; }.choice-block h3 { margin: 0 0 10px; font-size: 12px; }.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-grid label { position: relative; cursor: pointer; }.choice-grid input { position: absolute; opacity: 0; }.choice-grid span { display: block; padding: 8px 11px; border: 1px solid #dce5e1; border-radius: 9px; color: #62736e; background: #fff; font-size: 10px; }
.choice-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }.choice-title h3 { margin: 0; }.choice-title > div { display: flex; gap: 7px; }.choice-title button { padding: 5px 9px; border: 1px solid #bfd1cb; border-radius: 7px; color: var(--green); background: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }.choice-title button:hover { background: #edf6f2; }
.choice-grid input:checked + span { border-color: #7eb7a7; color: var(--green); background: #eaf5f1; font-weight: 800; }
.publish-declaration { margin-top: 20px; padding: 15px 17px; border-radius: 12px; color: #5f5a3d; background: #fff9e8; }.publish-declaration strong { font-size: 12px; }.publish-declaration p { margin: 5px 0 0; font-size: 10px; line-height: 1.6; }
.editor-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 19px; }.listing-delete-form { display: flex; justify-content: flex-end; margin-top: 15px; }
.source-sync-panel { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid #cfe2dc; border-radius: 15px; background: #f4faf7; }
.source-sync-panel strong { font-size: 13px; }.source-sync-panel p { margin: 5px 0 0; color: #60736d; font-size: 10px; line-height: 1.6; }.source-sync-panel > span { color: var(--muted); font-size: 9px; }
.source-outdated { border-color: #edcf96; background: #fff9e9; }.source-diff-list { display: grid; gap: 6px; margin-top: 12px; }.source-diff-list span { display: grid; grid-template-columns: 80px minmax(90px,1fr) 18px minmax(90px,1fr); gap: 7px; align-items: center; font-size: 9px; }.source-diff-list b { color: #6c5a37; }.source-diff-list del { color: #a16d68; }.source-diff-list i { color: #a98b50; font-style: normal; text-align: center; }.source-diff-list em { color: #28735e; font-style: normal; font-weight: 700; }
.rent-sync-control select { border-color: #9cc8bb; background: #f0f8f5; }.source-managed-field input { color: #49635c; background: #edf4f1; cursor: not-allowed; }
.listing-control-panel { display: grid; gap: 12px; margin: 24px 0 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.listing-filter-form,.listing-bulk-form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.listing-filter-form input { flex: 1 1 240px; }.listing-filter-form input,.listing-filter-form select,.listing-bulk-form select { min-height: 40px; padding: 8px 11px; border: 1px solid #dce5e1; border-radius: 9px; background: #fff; }.listing-bulk-form { padding-top: 12px; border-top: 1px solid var(--line); }.listing-bulk-form label { display: flex; align-items: center; gap: 6px; color: #52645f; font-size: 10px; font-weight: 700; }.listing-bulk-form > span { color: var(--muted); font-size: 9px; }
.listing-card { position: relative; }.listing-select { position: absolute; z-index: 3; top: 12px; left: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; color: #315f53; background: rgba(255,255,255,.93); font-size: 9px; font-weight: 800; cursor: pointer; }.listing-select input { accent-color: var(--green); }.listing-card-flags { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.sync-badge { padding: 4px 7px; border-radius: 7px; color: #28735e; background: #e9f5f0; font-size: 8px; font-weight: 800; }.sync-badge.warning { color: #8a641d; background: #fff1cf; }
.listing-media-manager { margin-top: 18px; }.listing-media-manager .editor-section-title { align-items: center; }.listing-media-manager .editor-section-title > a { margin-left: auto; }.media-upload-form { display: flex; gap: 10px; align-items: center; padding: 14px; border: 1px dashed #b8cec7; border-radius: 12px; background: #f7fbf9; }.media-upload-form input { min-width: 0; flex: 1; font-size: 10px; }.listing-media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 16px; }.listing-media-item { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.listing-media-item.is-cover { border-color: #65aa97; box-shadow: 0 0 0 2px rgba(60,145,120,.12); }.listing-media-item > div:first-child { position: relative; height: 135px; background: #e8efec; }.listing-media-item img,.listing-media-item video { width: 100%; height: 100%; object-fit: cover; }.listing-media-item > div:first-child span { position: absolute; top: 8px; left: 8px; padding: 5px 7px; border-radius: 7px; color: #fff; background: var(--green); font-size: 8px; font-weight: 800; }.listing-media-item > p { margin: 9px 10px 4px; color: var(--muted); font-size: 9px; }.media-item-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 10px 11px; }.media-item-actions form { margin: 0; }.media-item-actions button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }.media-item-actions .danger-link { color: #a34f45; }.empty-media { margin-top: 15px; padding: 18px; border-radius: 11px; color: var(--muted); background: #f5f8f6; text-align: center; font-size: 10px; }
.listing-media-manager .media-upload-form + .media-upload-form { margin-top: 10px; }.media-upload-form > span { color: var(--muted); font-size: 9px; }.cover-upload-form { border-style: solid; border-color: #c8ddd6; background: #f2faf7; }

/* Public rental pages */
.rental-page { background: #f3f6f4; }.rental-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px,calc((100vw - 1240px)/2)); border-bottom: 1px solid var(--line); background: #fff; }.rental-header > div,.rental-header > a:last-child { color: var(--green); font-size: 12px; font-weight: 700; }
.rental-shell,.rental-detail-shell { width: min(1240px,calc(100% - 40px)); margin: 0 auto; }.rental-search-hero { margin-top: 28px; padding: 44px; border-radius: 25px; color: #fff; background: linear-gradient(120deg,#063f36,#0d7963); }.rental-search-hero h1 { margin: 0 0 10px; font-size: clamp(32px,5vw,52px); }.rental-search-hero > p:not(.eyebrow) { color: #c8e4dc; }.rental-search-hero form { display: grid; grid-template-columns: 1fr 1fr .8fr .8fr auto; gap: 9px; margin-top: 27px; }.rental-search-hero input,.rental-search-hero button { min-width: 0; padding: 13px; border: 0; border-radius: 10px; }.rental-search-hero button { padding-inline: 25px; color: var(--green-dark); background: #dff5ed; font-weight: 800; cursor: pointer; }
.rental-result-head { display: flex; justify-content: space-between; margin: 28px 2px 15px; }.rental-result-head h2 { margin: 0; }.rental-result-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.public-listing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.public-listing-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .2s; }.public-listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.public-cover { position: relative; height: 210px; display: grid; place-items: center; color: var(--muted); background: #e4ece9; }.public-cover img { width: 100%; height: 100%; object-fit: cover; }.public-cover > span { position: absolute; top: 12px; left: 12px; padding: 6px 9px; border-radius: 8px; color: #fff; background: #d97732; font-size: 9px; font-weight: 800; }.public-card-body { padding: 18px; }.public-card-body h3 { margin: 8px 0; font-size: 17px; line-height: 1.45; }.public-card-body > p { color: var(--muted); font-size: 11px; }.public-tags { display: flex; flex-wrap: wrap; gap: 5px; }.public-tags i { padding: 4px 7px; border-radius: 6px; color: var(--green); background: #eaf5f1; font-size: 9px; font-style: normal; }.public-facts { display: flex; gap: 8px; color: #62726e; font-size: 10px; }.public-price { display: block; margin-top: 15px; color: #c35d24; font-size: 20px; }.rental-footer { margin-top: 50px; padding: 28px; color: #8a9793; background: #e8eeeb; text-align: center; font-size: 10px; }
.rental-detail-shell { padding-top: 28px; }.detail-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: 430px; }.detail-cover,.detail-thumbs > div { overflow: hidden; border-radius: 15px; background: #dfe8e4; }.detail-cover { display: grid; place-items: center; }.detail-cover img,.detail-thumbs img,.detail-thumbs video { width: 100%; height: 100%; object-fit: cover; }.detail-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: hidden; }.detail-heading { display: flex; justify-content: space-between; gap: 35px; padding: 30px 2px; border-bottom: 1px solid var(--line); }.detail-heading h1 { margin: 10px 0 7px; font-size: 30px; }.detail-heading p,.detail-heading span { color: var(--muted); }.detail-price { flex: 0 0 190px; text-align: right; }.detail-price strong { color: #c35d24; font-size: 34px; }.detail-price > span { color: #c35d24; }.detail-price p { font-size: 11px; }.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 20px; margin-top: 22px; align-items: start; }.detail-main { display: grid; gap: 17px; }.detail-panel { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.detail-panel h2 { margin: 0 0 20px; font-size: 18px; }.detail-fact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }.detail-fact-grid div { display: grid; gap: 6px; }.detail-fact-grid span { color: var(--muted); font-size: 9px; }.detail-fact-grid strong { font-size: 12px; }.detail-copy,.description-block p { color: #53655f; font-size: 12px; line-height: 1.9; white-space: pre-line; }.description-block { margin-top: 20px; }.description-block h3 { font-size: 13px; }.detail-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }.detail-chip-grid span { padding: 8px 11px; border-radius: 9px; color: #4f6962; background: #edf4f1; font-size: 10px; }.fee-lines { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.fee-lines p { display: flex; justify-content: space-between; margin: 0; padding: 12px; border-radius: 9px; background: #f6f9f7; font-size: 10px; }.contact-card { position: sticky; top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(20,49,41,.08); }.contact-card p { color: var(--muted); font-size: 10px; }.contact-card h3 { margin-bottom: 7px; }.contact-card > strong,.contact-card > span { display: block; }.contact-card > span { margin-top: 5px; color: var(--muted); font-size: 10px; }.contact-card button { width: 100%; margin: 20px 0; padding: 12px; border: 0; border-radius: 10px; color: #fff; background: var(--green); font-weight: 800; }.contact-card small { color: var(--muted); line-height: 1.8; }
@media (max-width: 1050px) { .listing-grid,.public-listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.editor-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }.listing-media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.detail-layout { grid-template-columns: 1fr; }.contact-card { position: static; }.rental-search-hero form { grid-template-columns: repeat(2,1fr); }.rental-search-hero button { grid-column: 1/-1; } }
@media (max-width: 700px) { .listing-hero,.detail-heading { display: grid; }.listing-kpis { grid-template-columns: repeat(2,1fr); }.listing-grid,.public-listing-grid,.editor-fields { grid-template-columns: 1fr; }.listing-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.media-upload-form,.source-sync-panel { display: grid; }.field-wide { grid-column: auto; }.editor-summary { flex-wrap: wrap; }.editor-state-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }.rental-search-hero { padding: 28px 22px; }.rental-search-hero form { grid-template-columns: 1fr; }.rental-search-hero button { grid-column: auto; }.detail-gallery { height: auto; grid-template-columns: 1fr; }.detail-cover { height: 280px; }.detail-thumbs { grid-template-columns: repeat(3,1fr); height: 100px; }.detail-heading h1 { font-size: 24px; }.detail-price { text-align: left; }.detail-fact-grid { grid-template-columns: repeat(2,1fr); } }