:root {
  color-scheme: light;
  --ink: #272521;
  --ink-soft: #413d37;
  --ink-muted: #716b61;
  --paper: #f4f2ee;
  --white: #fff;
  --line: #e8e4de;
  --line-strong: #d7d0c5;
  --green: #b7ad9c;
  --green-dark: #645a4d;
  --green-pale: #f0ede7;
  --orange: #968874;
  --blue-pale: #eae8e2;
  --red: #9e4f45;
  --shadow: 0 16px 44px rgb(39 37 33 / 9%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #6b922e; outline-offset: 2px; }
.app-shell { min-height: 100vh; }

.sidebar {
  width: 252px; height: 100vh; position: fixed; inset: 0 auto 0 0; z-index: 20;
  display: flex; flex-direction: column; padding: 27px 15px 17px;
  color: #eaf0e9; background: var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 8px 48px; color: white; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1.3px solid #c9ef74; border-radius: 10px 10px 10px 3px; color: var(--green); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font: 800 24px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.075em; }
.brand-name span { color: var(--green); }
.workspace-label { padding: 0 10px; color: #89978e; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.main-nav { display: grid; gap: 5px; margin-top: 16px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 11px; border: 0; border-radius: 8px; color: #b6c1ba; background: transparent; text-align: left; cursor: pointer; font-size: 13px; transition: background .18s ease, color .18s ease; }
.nav-link:hover { color: white; background: #22342b; }
.nav-link.active { color: var(--ink); background: var(--green); font-weight: 700; }
.nav-icon { display: inline-flex; width: 18px; justify-content: center; font-size: 20px; line-height: 1; }
.nav-count { margin-left: auto; font-size: 11px; color: inherit; opacity: .7; }
.sidebar-bottom { margin-top: auto; }
.sidebar-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 5px 15px; padding: 13px 10px; border: 1px solid #304038; border-radius: 8px; }
.online-dot { width: 7px; height: 7px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 11px; font-weight: 600; }
.sidebar-note small { margin-top: 4px; color: #a4b0a7; font-size: 9px; }
.profile-button { display: flex; align-items: center; width: 100%; gap: 10px; padding: 11px 6px 1px; border: 0; border-top: 1px solid #304038; color: white; background: transparent; text-align: left; cursor: pointer; }
.avatar { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; font-weight: 700; font-size: 12px; }
.avatar-olive { color: #243425; background: #d7e4c9; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-copy strong { font-size: 11px; font-weight: 600; }
.profile-copy small { margin-top: 3px; color: #9daaa0; font-size: 9px; }
.profile-more { color: #afbbb2; letter-spacing: 2px; }

.main-area { min-height: 100vh; margin-left: 252px; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 42px; border-bottom: 1px solid var(--line); background: var(--white); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #99a19b; font-size: 11px; }
.breadcrumb strong { color: #37433b; font-weight: 600; }
.crumb-slash { color: #cbd1cb; }
.topbar-actions { display: flex; align-items: center; gap: 21px; }
.global-search { height: 34px; width: 244px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: #78827a; background: #fbfcfb; }
.search-icon { font-size: 20px; transform: rotate(-20deg); }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.global-search input::placeholder { color: #9ba39c; }
kbd { flex: 0 0 auto; color: #87918a; font: 10px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.demo-label { display: inline-flex; align-items: center; gap: 6px; color: #8a928b; font-size: 8px; font-weight: 700; letter-spacing: .11em; white-space: nowrap; }
.demo-label span { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.icon-button { position: relative; width: 30px; height: 30px; border: 0; color: #617067; background: transparent; font-size: 20px; cursor: pointer; }
.notification-button i { position: absolute; top: 5px; right: 4px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: var(--orange); }
.page-content { max-width: 1450px; margin: 0 auto; padding: 34px 42px 52px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-heading h1 { margin: 0; font: 700 27px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.045em; }
.page-heading p { max-width: 600px; margin: 8px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.heading-actions { display: flex; gap: 8px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:active { transform: translateY(1px); }
.button-primary { color: var(--ink); background: var(--green); }
.button-primary:hover { background: #b9e65e; }
.button-secondary { border-color: var(--line-strong); color: #435047; background: var(--white); }
.button-secondary:hover { border-color: #9eac9f; }
.button-icon { font-size: 16px; line-height: 0; }
.pipeline { margin: 0 0 26px; padding: 18px 20px 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-title { margin: 0; font: 700 13px/1.3 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.015em; }
.subtle-link { display: inline-flex; align-items: center; gap: 5px; border: 0; color: #56665a; background: transparent; font-size: 10px; font-weight: 600; cursor: pointer; }
.subtle-link:hover { color: #334d25; }
.pipeline-total { margin-left: 7px; color: #929b93; font-size: 10px; font-weight: 400; }
.pipeline-stages { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 16px; }
.property-pipeline-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.property-pipeline-step { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); }
.property-pipeline-step:first-child { padding-left: 0; }
.property-pipeline-step:last-child { padding-right: 0; border-right: 0; }
.property-pipeline-step .stage-count { overflow-wrap: anywhere; }
.pipeline-note { margin: 11px 0 0; color: var(--ink-muted); font-size: 9px; line-height: 1.5; }
.commission-estimate { margin: 12px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #f7f5f1; font-size: 12px; font-weight: 650; }
.pipeline-stage { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.pipeline-stage:first-child { padding-left: 0; }
.pipeline-stage:last-child { padding-right: 0; border-right: 0; }
.stage-swatch { width: 7px; height: 28px; flex: 0 0 auto; border-radius: 4px; background: var(--stage-color); }
.stage-info { min-width: 0; }
.stage-label { display: block; overflow: hidden; color: #727d74; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.stage-count { display: block; margin-top: 4px; font: 700 18px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.pipeline-stage:hover .stage-label, .pipeline-stage.selected .stage-label { color: var(--ink); }
.pipeline-stage.selected .stage-count { color: var(--green-dark); }

.metrics-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 27px; padding: 15px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.metric { padding: 2px 20px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: 2px; }
.metric:last-child { border-right: 0; }
.metric-label { display: block; color: #7a857c; font-size: 10px; }
.metric-value { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font: 700 23px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.04em; }
.metric-note { color: #7c9272; font: 500 9px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.metric-note.neutral { color: #8c958e; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(295px, .83fr); gap: 24px; align-items: start; }
.dashboard-column { min-width: 0; }
.section-block { margin-bottom: 28px; }
.analytics-toolbar { display: flex; align-items: end; gap: 12px; margin: -8px 0 18px; }
.analytics-filter { display: grid; gap: 5px; color: var(--ink-muted); font-size: 10px; font-weight: 600; }
.analytics-filter select { min-width: 154px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: var(--white); font-size: 11px; }
.analytics-zone { margin: 0 0 10px auto; color: var(--ink-muted); font-size: 10px; }
.analytics-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 25px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.analytics-summary > div { display: grid; gap: 7px; padding: 15px 18px; border-right: 1px solid var(--line); }
.analytics-summary > div:first-child { padding-left: 2px; }
.analytics-summary > div:last-child { border-right: 0; }
.analytics-summary span { color: var(--ink-muted); font-size: 10px; }
.analytics-summary strong { font-size: 20px; letter-spacing: -.03em; }
.analytics-table-scroll { overflow-x: auto; }
.analytics-table { min-width: 520px; }
.analytics-table td { min-width: 155px; }
.analytics-value { display: inline-block; min-width: 40px; }
.analytics-bar { display: block; width: min(100%, 170px); height: 4px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: #ece9e3; }
.analytics-bar i { display: block; height: 100%; border-radius: inherit; background: #a79a83; }
.analytics-bar.income i { background: #62594e; }
.analytics-undated { margin: 10px 0 0; color: var(--ink-muted); font-size: 10px; line-height: 1.5; }
.analytics-employee { margin-bottom: 9px; border-bottom: 1px solid var(--line); background: var(--white); }
.analytics-employee summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; cursor: pointer; list-style: none; }
.analytics-employee summary::-webkit-details-marker { display: none; }
.analytics-employee summary::after { content: "＋"; color: var(--ink-muted); }
.analytics-employee[open] summary::after { content: "−"; }
.analytics-employee summary strong, .analytics-employee summary small { display: block; }
.analytics-employee summary strong { font-size: 12px; }
.analytics-employee summary small { margin-top: 4px; color: var(--ink-muted); font-size: 9px; }
.analytics-employee-total { color: var(--ink-soft); font-size: 10px; text-align: right; white-space: nowrap; }
.analytics-employee .analytics-table-scroll { padding: 0 12px; }
.analytics-employee .analytics-undated { padding: 0 14px 12px; }
.section-head { margin-bottom: 13px; }
.section-heading-with-copy h2 { margin: 0; font: 700 14px/1.3 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.section-heading-with-copy p { margin: 4px 0 0; color: #8b948d; font-size: 10px; }
.list-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.lead-table { width: 100%; border-collapse: collapse; text-align: left; }
.lead-table th { padding: 11px 13px; border-bottom: 1px solid var(--line); color: #929a93; background: #fbfcfb; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lead-table td { padding: 12px 13px; border-bottom: 1px solid #edf0ed; font-size: 10px; vertical-align: middle; }
.lead-table tr:last-child td { border-bottom: 0; }
.lead-table tr:hover td { background: #fbfcfa; }
.lead-name { display: flex; align-items: center; gap: 9px; min-width: 128px; }
.plain-lead-button { display: block; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.plain-lead-button:hover .lead-name-copy strong { text-decoration: underline; text-underline-offset: 2px; }
.lead-name-copy { min-width: 0; }
.lead-name-copy strong, .lead-name-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lead-name-copy strong { font-size: 10px; font-weight: 600; }
.lead-name-copy small { margin-top: 3px; color: #929b94; font-size: 9px; }
.avatar-sm { width: 27px; height: 27px; flex: 0 0 auto; font-size: 10px; }
.avatar-coral { color: #684536; background: #f1dfd4; }
.avatar-blue { color: #3c5960; background: #dce9e9; }
.avatar-lilac { color: #615169; background: #e7deeb; }
.avatar-gold { color: #65532f; background: #f1ebd2; }
.lead-source { color: #6f7a72; white-space: nowrap; }
.lead-budget { color: #4c584e; white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 0; border-radius: 4px; font-size: 8px; white-space: nowrap; cursor: pointer; }
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-contact { color: #536d85; background: #edf3f7; }
.status-viewing { color: #886b35; background: #f8f3e7; }
.status-negotiation { color: #5e6f4a; background: #eff4e8; }
.status-contract { color: #706080; background: #f2eef6; }
.status-new { color: #4d7054; background: #edf5eb; }
.status-select { max-width: 120px; padding: 5px 6px; border: 0; border-radius: 4px; color: #536d85; background: #edf3f7; font-size: 8px; cursor: pointer; }
.status-select.status-new { color: #4d7054; background: #edf5eb; }
.status-select.status-contact { color: #536d85; background: #edf3f7; }
.status-select.status-viewing { color: #886b35; background: #f8f3e7; }
.status-select.status-negotiation { color: #5e6f4a; background: #eff4e8; }
.status-select.status-contract { color: #706080; background: #f2eef6; }
.task-list { padding: 2px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.task-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.task-item:last-child { border-bottom: 0; }
.task-check { position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; appearance: none; border: 1px solid #c8d1c9; border-radius: 5px; background: white; cursor: pointer; }
.task-check:checked { border-color: var(--green-dark); background: var(--green-dark); }
.task-check:checked::after { position: absolute; left: 4px; top: 1px; width: 5px; height: 8px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); content: ""; }
.task-copy { min-width: 0; flex: 1; }
.task-copy strong { display: block; color: #354138; font-size: 10px; font-weight: 600; line-height: 1.5; }
.task-title-button { display: block; padding: 0; border: 0; color: #354138; background: transparent; text-align: left; font-size: 10px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.task-title-button:hover { text-decoration: underline; text-underline-offset: 2px; }
.task-copy small { display: block; margin-top: 4px; color: #89938b; font-size: 9px; }
.task-item.done .task-copy strong { color: #9aa39b; text-decoration: line-through; }
.task-item.done .task-title-button, .task-row.done .task-title-button { color: #9aa39b; text-decoration: line-through; }
.task-time { flex: 0 0 auto; padding: 4px 6px; border-radius: 4px; color: #718074; background: #f2f5f1; font-size: 8px; white-space: nowrap; }
.task-time.overdue { color: #a7554a; background: #fbefec; }
.object-preview { display: grid; gap: 9px; }
.object-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 11px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.object-row { width: 100%; padding: 0 0 10px; border-top: 0; border-right: 0; border-left: 0; background: transparent; text-align: left; cursor: pointer; }
.object-row:hover .property-copy strong { text-decoration: underline; text-underline-offset: 2px; }
.object-row:last-child { padding-bottom: 0; border: 0; }
.property-art { position: relative; overflow: hidden; min-height: 64px; border-radius: 5px; background: linear-gradient(130deg, #d6dfd0, #abbcab); }
.property-art::before { position: absolute; left: 13px; right: 12px; bottom: 0; height: 45px; border: 1px solid rgb(255 255 255 / 62%); background: rgb(244 248 237 / 72%); clip-path: polygon(0 21%, 42% 0, 100% 23%, 100% 100%, 0 100%); content: ""; }
.property-art::after { position: absolute; left: 25px; bottom: 0; width: 12px; height: 22px; background: #91a28e; box-shadow: 21px -2px 0 -3px #78907e, 37px -1px 0 -2px #a0ae9c; content: ""; }
.property-art.art-2 { background: linear-gradient(135deg, #d7e3e3, #a9bcba); }
.property-art.art-2::before { left: 7px; right: 9px; height: 44px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(90deg, #eaf0ed 0 13px, #a8bbb7 13px 15px); }
.property-art.art-2::after { left: 19px; width: 2px; height: 45px; background: #8fa6a0; box-shadow: 15px 0 #8fa6a0, 30px 0 #8fa6a0, 45px 0 #8fa6a0; }
.property-art.art-3 { background: linear-gradient(135deg, #eadbcb, #c9ae96); }
.property-art.art-3::before { left: 13px; right: 13px; height: 47px; clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); background: #f3eadc; }
.property-art.art-3::after { left: 34px; width: 11px; height: 21px; background: #bda58e; }
.property-copy { min-width: 0; }
.property-copy strong, .property-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.property-copy strong { font-size: 10px; font-weight: 600; }
.property-copy small { margin-top: 4px; color: #88938a; font-size: 9px; }
.property-price { margin-top: 6px; color: #4a5d4e; font-size: 9px; font-weight: 700; }

.toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.toolbar-search { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; }
.toolbar-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; }
.filter-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: #506054; background: white; font-size: 10px; cursor: pointer; }
.result-count { margin-left: auto; color: #879187; font-size: 10px; white-space: nowrap; }
.full-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
.full-table { min-width: 710px; }
.full-table td { padding-top: 13px; padding-bottom: 13px; }
.row-actions { display: flex; gap: 4px; }
.text-button { padding: 4px 5px; border: 0; color: #758177; background: transparent; font-size: 9px; cursor: pointer; }
.text-button:hover { color: var(--red); }
.property-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.property-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.property-card .property-art { height: 156px; border-radius: 0; }
.property-card .property-art::before { left: 24%; right: 22%; height: 85%; }
.property-card .property-art::after { left: 40%; width: 20px; height: 40px; }
.property-card .art-2::before { left: 13%; right: 13%; height: 92%; }
.property-card .art-2::after { left: 28%; height: 90%; }
.property-card .art-3::before { left: 21%; right: 21%; height: 89%; }
.property-card .art-3::after { left: 47%; width: 15px; height: 35px; }
.property-card-content { padding: 14px; }
.property-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.property-card h3 { margin: 0; font: 700 13px/1.35 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.property-card p { margin: 5px 0 0; color: #869188; font-size: 10px; }
.property-card .property-price { margin-top: 12px; color: var(--ink); font-size: 14px; }
.property-meta { display: flex; gap: 13px; margin-top: 11px; color: #758077; font-size: 9px; }
.property-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.property-kind { color: #79837b; font-size: 9px; }
.property-status { color: #62804c; font-size: 9px; font-weight: 600; }
.property-delete { border: 0; color: #8a958c; background: transparent; font-size: 9px; cursor: pointer; }
.property-delete:hover { color: var(--red); }
.task-date-heading { margin: 23px 0 9px; color: #58675c; font-size: 10px; font-weight: 700; }
.push-settings { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 20px; padding: 15px 17px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgb(255 255 255 / 78%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.push-settings strong, .push-settings p, .push-settings small { display: block; }
.push-settings strong { font-size: 12px; }
.push-settings p { margin: 4px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.push-settings small { max-width: 62ch; margin-top: 4px; color: var(--ink-muted); font-size: 9px; line-height: 1.5; }
.push-settings button { flex: 0 0 auto; }
.push-settings button:disabled { opacity: .58; cursor: not-allowed; }
.team-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.team-note .online-dot { margin-top: 4px; background: #8dbd4a; }
.team-note strong, .team-note small { display: block; }
.team-note strong { font-size: 11px; }
.team-note small { margin-top: 4px; color: #879188; font-size: 9px; }
.storage-warning { margin-top: 22px; padding: 12px 14px; border: 1px solid #e8c682; border-radius: 6px; color: #725725; background: #fcf7e9; font-size: 10px; line-height: 1.5; }
.tasks-panel { padding: 0 17px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row .task-copy strong { font-size: 11px; }
.task-row .task-title-button { font-size: 11px; }
.task-related { min-width: 120px; color: #7d897f; font-size: 9px; }
.task-row .task-time { min-width: 80px; text-align: center; }
.delete-task { width: 25px; height: 25px; border: 0; color: #99a29a; background: transparent; cursor: pointer; }
.delete-task:hover { color: var(--red); }
.empty-state { padding: 38px 20px; border: 1px dashed var(--line-strong); border-radius: 8px; color: #879188; background: #fbfcfa; text-align: center; }
.empty-state strong { display: block; margin-bottom: 5px; color: #49564c; font-size: 12px; }
.empty-state p { margin: 0; font-size: 10px; line-height: 1.6; }
.empty-state .button { margin-top: 14px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgb(16 29 22 / 48%); animation: fade-in .16s ease-out; }
.modal { width: min(100%, 500px); max-height: min(90vh, 760px); overflow: auto; padding: 23px; border-radius: 10px; background: white; box-shadow: 0 22px 64px rgb(0 0 0 / 19%); animation: rise-in .2s cubic-bezier(.16, 1, .3, 1); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 19px; }
.modal-head h2 { margin: 0; font: 700 18px/1.3 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.03em; }
.modal-head p { margin: 5px 0 0; color: #879188; font-size: 10px; }
.modal-close { width: 28px; height: 28px; border: 0; border-radius: 5px; color: #718076; background: #f2f5f1; font-size: 18px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-field { display: grid; gap: 6px; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { color: #57645a; font-size: 10px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: white; font-size: 11px; }
.form-field textarea { min-height: 68px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #a5ada6; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.toast-region { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { max-width: min(360px, calc(100vw - 32px)); padding: 11px 14px; border-radius: 7px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 11px; line-height: 1.5; animation: rise-in .18s ease-out; }
.toast.error { background: #9b4138; }
.toast.success { color: #223421; background: var(--green); }
.mobile-nav { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { transform: translateY(8px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 1180px) {
  .sidebar { width: 220px; }
  .main-area { margin-left: 220px; }
  .topbar { padding-right: 27px; padding-left: 27px; }
  .page-content { padding-right: 27px; padding-left: 27px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 18px; }
  .lead-table td { padding-right: 8px; padding-left: 8px; }
  .lead-table th { padding-right: 8px; padding-left: 8px; }
}
@media (max-width: 960px) {
  .sidebar { width: 68px; padding-right: 9px; padding-left: 9px; align-items: center; }
  .brand { margin: 0 0 42px; }
  .brand-name, .workspace-label, .nav-link > span:not(.nav-icon), .sidebar-bottom { display: none; }
  .main-nav { width: 100%; }
  .nav-link { justify-content: center; padding: 12px 8px; }
  .nav-icon { font-size: 21px; }
  .main-area { margin-left: 68px; }
  .topbar { padding: 0 22px; }
  .page-content { padding: 30px 22px 48px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .sidebar { display: none; }
  .main-area { margin: 0; padding-bottom: 70px; }
  .topbar { height: 56px; padding: 0 16px; }
  .breadcrumb { font-size: 10px; }
  .topbar-actions { gap: 9px; }
  .global-search { width: 34px; height: 34px; justify-content: center; padding: 0; border: 0; background: transparent; }
  .global-search input, .global-search kbd { display: none; }
  .global-search .search-icon { font-size: 22px; }
  .demo-label { font-size: 7px; }
  .notification-button { display: none; }
  .page-content { padding: 24px 16px 35px; }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { margin-top: 5px; font-size: 10px; }
  .page-heading .button { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .page-heading .button .button-label { display: none; }
  .pipeline { margin-bottom: 20px; padding: 15px 13px 13px; }
  .pipeline-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 11px; }
  .property-pipeline-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .property-pipeline-step { padding: 8px 7px; }
  .property-pipeline-step:nth-child(2) { border-right: 0; }
  .property-pipeline-step:nth-child(3) { padding-left: 0; }
  .property-pipeline-step .stage-label { max-width: none; font-size: 8px; }
  .property-pipeline-step .stage-count { font-size: 15px; }
  .property-pipeline-step.commission-step .stage-count { font-size: 13px; }
  .pipeline-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 5px; }
  .pipeline-stage:first-child { padding-left: 0; }
  .stage-swatch { width: 22px; height: 3px; border-radius: 3px; }
  .stage-label { max-width: 58px; font-size: 7px; }
  .stage-count { font-size: 15px; }
  .metrics-row { grid-template-columns: 1fr 1fr; row-gap: 13px; margin-bottom: 21px; padding: 12px 0; }
  .metric { padding: 4px 12px; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3) { padding-left: 2px; }
  .metric-label { font-size: 9px; }
  .metric-value { font-size: 19px; }
  .dashboard-grid { gap: 19px; }
  .dashboard-side { display: block; }
  .section-block { margin-bottom: 20px; }
  .table-mobile-scroll { overflow-x: auto; }
  .lead-table { min-width: 610px; }
  .lead-table td, .lead-table th { padding-right: 9px; padding-left: 9px; }
  .property-grid { grid-template-columns: 1fr; gap: 11px; }
  .property-card { display: grid; grid-template-columns: 116px 1fr; }
  .property-card .property-art { height: 100%; min-height: 170px; }
  .property-card .property-card-content { padding: 12px; }
  .property-card .property-art::before { left: 13%; right: 13%; }
  .property-card .property-art::after { left: 43%; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-search { flex: 1 1 100%; width: 100%; }
  .filter-select { flex: 1; }
  .result-count { margin-left: 0; }
  .task-row { flex-wrap: wrap; gap: 8px; }
  .task-row .task-copy { flex-basis: calc(100% - 34px); }
  .task-related { margin-left: 28px; }
  .tasks-panel { padding: 0 12px; }
  .push-settings { align-items: stretch; flex-direction: column; gap: 12px; padding: 13px; }
  .push-settings button { width: 100%; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 8px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(255 255 255 / 97%); }
  .mobile-nav-link { display: grid; justify-items: center; gap: 2px; padding: 4px 0; border: 0; color: #7c887e; background: transparent; font-size: 8px; cursor: pointer; }
  .mobile-nav-link span { font-size: 17px; line-height: 1; }
  .mobile-nav-link.active { color: #355126; font-weight: 700; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 90vh; padding: 20px 17px max(18px, env(safe-area-inset-bottom)); border-radius: 13px 13px 0 0; }
  .form-grid { gap: 11px; }
  .form-field input, .form-field select { min-height: 40px; }
  .toast-region { right: 12px; bottom: 82px; left: 12px; }
  .toast { max-width: none; }
}
@media (max-width: 380px) {
  .demo-label { display: none; }
  .pipeline-stage { padding-right: 3px; padding-left: 3px; }
  .stage-label { font-size: 6px; }
  .property-card { grid-template-columns: 92px 1fr; }
  .property-meta { gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* FateHouse: a warm architectural ledger, drawn in ink, limestone, and
   the original taupe crest. Blur belongs to navigable glass surfaces only. */
:root {
  --ink: #292722;
  --ink-soft: #423e38;
  --ink-muted: #71695e;
  --paper: #f3f0eb;
  --green: #bab1a1;
  --green-dark: #695e4f;
  --green-pale: #eeeae2;
  --line: #e6e1d8;
  --line-strong: #d3ccbf;
  --orange: #918672;
  --red: #985046;
  --shadow: 0 15px 38px rgb(52 46 37 / 8%);
}

.app-shell { color: var(--ink); }
.sidebar {
  padding: 21px 14px 14px;
  border-right: 1px solid rgb(88 78 64 / 10%);
  color: #33302b;
  background: rgb(247 245 241 / 78%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  backdrop-filter: blur(26px) saturate(135%);
}
.brand { height: 57px; gap: 8px; margin: 0 4px 39px; color: var(--ink); }
.brand-mark { width: 52px; height: 52px; border: 0; border-radius: 0; object-fit: cover; }
.brand-name { display: grid; gap: 4px; white-space: normal; letter-spacing: 0; }
.brand-name span { color: #72695c; font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.brand-name strong { font: 500 23px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; }
.workspace-label { padding-inline: 9px; color: #847d72; font-size: 8px; letter-spacing: .12em; }
.nav-link { gap: 12px; padding: 11px 10px; border-radius: 7px; color: #675f54; }
.nav-link:hover { color: #282520; background: rgb(209 201 189 / 24%); }
.nav-link.active { color: #faf8f3; background: #302d28; }
.nav-count { font-variant-numeric: tabular-nums; }
.sidebar-note { border-color: rgb(91 82 68 / 18%); background: rgb(255 255 255 / 28%); }
.online-dot { background: #948875; }
.sidebar-note small { color: #756d62; }
.profile-button { border-color: rgb(91 82 68 / 16%); color: var(--ink); }
.profile-copy small { color: #716a5f; }
.avatar-olive { color: #473f35; background: #ded8ce; }

.main-area { background: transparent; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  border-color: rgb(220 213 202 / 62%);
  background: rgb(248 246 242 / 77%);
  -webkit-backdrop-filter: blur(23px) saturate(130%);
  backdrop-filter: blur(23px) saturate(130%);
}
.breadcrumb { color: #81796e; }
.breadcrumb strong { color: #34312c; }
.crumb-slash { color: #b7afa2; }
.global-search { border-color: rgb(143 131 111 / 24%); border-radius: 7px; background: rgb(255 255 255 / 58%); }
.global-search input::placeholder { color: #72695f; }
.demo-label { color: #6f665b; letter-spacing: .13em; }
.demo-label > span:first-child { width: 7px; height: 7px; background: #9c8d75; }
.demo-label > span:last-child { width: auto; height: auto; border-radius: 0; background: transparent; }
.page-heading h1,
.section-heading-with-copy h2,
.section-title,
.property-card h3,
.modal-head h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.025em; }
.page-heading h1 { font-size: clamp(26px, 2.4vw, 34px); }
.page-heading p { color: #6d665c; }
.button { min-height: 41px; border-radius: 6px; }
.button-primary, .button-dark { color: #f8f6f1; background: #302d28; }
.button-primary:hover, .button-dark:hover { background: #49443c; }
.button-secondary { border-color: #d2cabe; color: #49443c; background: rgb(255 255 255 / 66%); }
.button-secondary:hover { border-color: #a59a89; background: white; }
.pipeline, .list-panel, .task-list, .tasks-panel, .team-note, .team-intro, .employee-list, .invitation-list {
  border-color: rgb(213 206 194 / 76%);
  background: rgb(255 255 255 / 69%);
  -webkit-backdrop-filter: blur(17px) saturate(120%);
  backdrop-filter: blur(17px) saturate(120%);
  box-shadow: 0 9px 26px rgb(62 55 43 / 3%);
}
.pipeline { border-radius: 9px; }
.pipeline-stage { border-color: rgb(213 206 194 / 72%); }
.property-pipeline-step { border-color: rgb(213 206 194 / 72%); }
.stage-swatch { background: var(--stage-color); }
.stage-label, .metric-label { color: #6e675d; }
.pipeline-note { color: #6d665c; }
.stage-count, .metric-value { font-variant-numeric: tabular-nums; }
.metric { border-color: rgb(154 143 126 / 18%); }
.metrics-row { border-color: #d4cdc1; }
.metric-note { color: #655b4e; }
.metric-note.neutral { color: #70685e; }
.section-heading-with-copy p,
.lead-name-copy small,
.task-copy small,
.property-copy small,
.property-card p,
.result-count,
.property-kind { color: #6f685e; }
.lead-table th { color: #665f55; background: rgb(247 245 241 / 74%); }
.lead-table td { border-color: rgb(220 214 205 / 65%); }
.lead-table tr:hover td { background: rgb(246 243 237 / 77%); }
.status-new, .status-select.status-new { color: #554f44; background: #edeae2; }
.status-contact, .status-select.status-contact { color: #425455; background: #e7eceb; }
.status-viewing, .status-select.status-viewing { color: #66553a; background: #f1ebdf; }
.status-negotiation, .status-select.status-negotiation { color: #465345; background: #e8ede7; }
.status-contract, .status-select.status-contract { color: #5b5062; background: #ede8ef; }
.task-list, .tasks-panel { border-radius: 8px; }
.task-item, .task-row { border-color: rgb(220 214 205 / 75%); }
.task-copy small { font-size: 10px; }
.task-title-button, .task-copy strong, .task-row .task-title-button { color: #39352f; }
.task-time { color: #625a4f; background: #eeece6; }
.task-time.overdue { color: #874a40; background: #f2e7e2; }
.object-row { border-color: rgb(220 214 205 / 80%); }
.property-card { border-color: rgb(210 201 188 / 72%); background: rgb(255 255 255 / 76%); }
.property-card .property-art { min-height: 156px; }
.property-status { color: #585a49; }
.toolbar-search, .filter-select { border-color: #d1c9bd; background: rgb(255 255 255 / 72%); }
.toolbar-search input { font-size: 12px; }
.filter-select { color: #4a453d; }
.team-note { border-radius: 8px; }
.empty-state { border-color: #cfc7ba; color: #6e675d; background: rgb(255 255 255 / 48%); }
.empty-state strong { color: #3e3932; }

.auth-screen {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .76fr);
  min-height: 100vh;
  overflow: auto;
  background: #f8f6f2;
}
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: #51493f; background: #f5f2ed; font-size: 12px; }
.boot-screen img { width: 164px; height: 164px; object-fit: cover; }
.auth-art {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(32px, 6vw, 78px);
  background: linear-gradient(147deg, #ece7df, #dbd3c7 62%, #c9bead);
}
.auth-art::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 49.7%, rgb(91 79 60 / 11%) 49.8% 50%, transparent 50.1%),
    linear-gradient(32deg, transparent 0 67%, rgb(255 255 255 / 25%) 67.1% 67.25%, transparent 67.35%);
  content: "";
}
.auth-art-sun { position: absolute; top: 23%; right: 16%; width: clamp(180px, 26vw, 340px); aspect-ratio: 1; border-radius: 50%; background: rgb(247 242 234 / 44%); box-shadow: 0 35px 100px rgb(93 78 58 / 13%); }
.auth-building { position: absolute; bottom: -3%; background: rgb(154 143 125 / 20%); border: 1px solid rgb(255 255 255 / 40%); }
.building-back { right: 7%; width: 30%; height: 46%; clip-path: polygon(20% 0, 100% 11%, 100% 100%, 0 100%, 0 20%); }
.building-mid { left: 37%; width: 35%; height: 37%; clip-path: polygon(0 13%, 70% 0, 100% 25%, 100% 100%, 0 100%); background: rgb(235 230 220 / 45%); }
.building-front { left: 7%; width: 34%; height: 25%; clip-path: polygon(0 26%, 56% 0, 100% 17%, 100% 100%, 0 100%); background: rgb(106 96 81 / 18%); }
.art-caption { position: relative; z-index: 1; display: grid; gap: 19px; color: #332f28; }
.art-caption span, .art-footer { color: #635b50; font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.art-caption strong { font: 400 clamp(30px, 4vw, 55px)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.03em; }
.auth-illustration { position: absolute; z-index: 2; top: 46%; left: 50%; width: min(41vw, 440px); max-width: 62%; height: auto; mix-blend-mode: multiply; transform: translate(-50%, -39%); }
.art-footer { position: absolute; right: clamp(32px, 6vw, 78px); bottom: 38px; left: clamp(32px, 6vw, 78px); display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid rgb(89 77 60 / 24%); }
.auth-side { display: grid; min-height: 100vh; place-items: center; padding: 50px clamp(28px, 5vw, 72px); background: rgb(249 247 243 / 90%); }
.auth-panel { width: min(100%, 395px); }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 48px; color: var(--ink); text-decoration: none; }
.auth-brand img { width: 72px; height: 72px; object-fit: cover; mix-blend-mode: multiply; }
.auth-brand span { display: grid; gap: 4px; }
.auth-brand small { color: #746b5f; font-size: 8px; font-weight: 600; letter-spacing: .12em; }
.auth-brand strong { font: 400 28px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .035em; }
.auth-form-heading { margin-bottom: 25px; }
.auth-form-heading h1 { margin: 0; font: 400 clamp(26px, 3vw, 34px)/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.auth-form-heading p { margin: 9px 0 0; color: #70685d; font-size: 13px; line-height: 1.65; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; color: #514a40; font-size: 11px; font-weight: 600; }
.auth-field input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #d5cec2; border-radius: 5px; outline: 0; color: #302d28; background: rgb(255 255 255 / 74%); font-size: 14px; }
.auth-field input:focus { border-color: #8c806c; background: white; box-shadow: 0 0 0 3px rgb(154 142 122 / 14%); }
.auth-field input::placeholder { color: #797165; font-weight: 400; }
.auth-field input[readonly] { color: #625a50; background: #f0ede7; }
.auth-submit { width: 100%; min-height: 47px; margin-top: 3px; font-size: 13px; }
.auth-submit:disabled, .button:disabled, button:disabled { opacity: .56; cursor: wait; }
.button-dark { min-height: 42px; }
.auth-footnote, .auth-security { color: #6e665b; font-size: 10px; line-height: 1.6; }
.auth-footnote { margin: 0; text-align: center; }
.auth-security { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid #e3ded5; }
.auth-back { display: inline-block; margin-top: 20px; padding: 8px 0; border: 0; color: #625a4e; background: transparent; font-size: 11px; cursor: pointer; }
.auth-back:hover, .auth-signout:hover { color: #302c25; text-decoration: underline; }
.auth-note, .form-feedback { padding: 12px 13px; border: 1px solid #d8d0c3; border-radius: 5px; color: #5c554b; background: rgb(255 255 255 / 65%); font-size: 11px; line-height: 1.6; }
.auth-note code { overflow-wrap: anywhere; font-size: 10px; }
.form-feedback { margin: 0; }
.form-feedback.error { border-color: #dfc5bb; color: #814a40; background: #f7eeea; }
.form-feedback.info { color: #635b4e; }
.auth-form-actions { display: flex; justify-content: space-between; gap: 9px; }
.auth-form-actions .button { flex: 1; }
.auth-divider { margin: 3px 0; border-bottom: 1px solid #ded8cd; color: #736b60; font-size: 10px; }
.auth-divider span { position: relative; top: 8px; padding-right: 9px; background: #f8f6f2; }
.auth-signout { margin-top: 21px; padding: 5px 0; border: 0; color: #71695d; background: transparent; font-size: 11px; cursor: pointer; }
.team-intro { display: flex; align-items: center; gap: 17px; margin-bottom: 29px; padding: 18px 20px; border: 1px solid #ded7cb; border-radius: 8px; }
.team-crest { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid #a69b88; border-radius: 50%; color: #635a4c; font: 500 13px Georgia, serif; }
.team-intro strong { font: 500 17px Georgia, serif; }
.team-intro p { margin: 5px 0 0; color: #6d665c; font-size: 11px; line-height: 1.6; }
.employee-list, .invitation-list { overflow: hidden; border: 1px solid #ded7cb; border-radius: 8px; }
.employee-row, .invitation-row { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-bottom: 1px solid rgb(215 208 196 / 69%); }
.employee-row:last-child, .invitation-row:last-child { border-bottom: 0; }
.employee-avatar { color: #524a3e; background: #e3ded4; }
.employee-identity { display: grid; min-width: 0; flex: 1; gap: 4px; }
.employee-identity strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.employee-identity small { overflow: hidden; color: #6e675d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.employee-role { color: #685f52; font-size: 10px; }
.employee-role.admin { color: #463f35; font-weight: 700; }
.employee-state { flex: 0 0 auto; color: #695f51; font-size: 10px; }
.employee-state::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #958a75; content: ""; }
.employee-state.disabled { color: #8b5a50; }
.employee-state.disabled::before { background: #b17668; }
.employee-toggle { min-height: 35px; padding-inline: 10px; font-size: 10px; }
.invitation-row { min-height: 65px; }
.invite-symbol { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #ded7cb; border-radius: 50%; color: #62594c; }
.invite-warning { margin: 12px 0 0; color: #70685d; font-size: 10px; line-height: 1.6; }
.invitation-created { display: grid; gap: 11px; }
.invitation-created h3 { margin: 0; font: 500 20px Georgia, serif; }
.invitation-created p { margin: 0; color: #665f55; font-size: 11px; line-height: 1.6; }
.invite-check { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #f5f2ed; background: #544d41; }
.invite-modal .auth-field input { min-height: 43px; }

.mobile-nav {
  border-color: rgb(206 198 186 / 65%);
  background: rgb(250 248 244 / 86%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.mobile-nav-link { min-height: 46px; gap: 4px; color: #625a4f; font-size: 10px; }
.mobile-nav-link span { font-size: 18px; }
.mobile-nav-link.active { color: #312e29; }
.modal-backdrop { background: rgb(42 39 34 / 35%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal { border: 1px solid rgb(255 255 255 / 69%); background: rgb(250 248 244 / 93%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.modal-close { background: #ece8e1; }
.modal-head p, .form-field label { color: #635b50; }
.form-field input, .form-field select, .form-field textarea { border-color: #d4ccbf; background: rgb(255 255 255 / 80%); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #766d61; }
.toast { background: #302d28; }
.toast.success { color: #302d28; background: #dad3c7; }
.toast.error { background: #865047; }
.storage-warning { color: #695a43; background: #f5eee2; }
.property-art, .property-art.art-1 { background: linear-gradient(132deg, #e6e0d6, #c1b6a5); }
.property-art::before { background: rgb(250 248 242 / 82%); }
.property-art::after { background: #9b907d; }
.property-art.art-2 { background: linear-gradient(135deg, #e5e2dc, #c6c2b9); }
.property-art.art-2::before { background: repeating-linear-gradient(90deg, #f1efeb 0 13px, #b9b3a8 13px 15px); }
.property-art.art-2::after { background: #918a7d; box-shadow: 15px 0 #918a7d, 30px 0 #918a7d, 45px 0 #918a7d; }
.property-art.art-3 { background: linear-gradient(135deg, #e8dfd2, #c6b7a3); }
.property-art.art-3::before { background: #f0ece4; }
.property-art.art-3::after { background: #a3937d; }

@media (max-width: 960px) {
  .sidebar { background: rgb(247 245 241 / 88%); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
  .property-toolbar { flex-wrap: wrap; }
  .property-toolbar .toolbar-search { flex: 1 1 220px; }
  .property-toolbar .property-address-filter { flex: 1 1 170px; }
  .property-pipeline-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .auth-screen { grid-template-columns: 1fr; overflow-x: hidden; }
  .auth-art { display: none; }
  .auth-side { min-height: 100vh; align-items: start; padding: max(42px, env(safe-area-inset-top)) 23px max(35px, env(safe-area-inset-bottom)); }
  .auth-panel { width: min(100%, 410px); margin: 0 auto; }
  .auth-brand { margin-bottom: 39px; }
  .auth-brand img { width: 60px; height: 60px; }
  .auth-field { font-size: 12px; }
  .auth-field input { min-height: 49px; font-size: 16px; }
  .auth-form { gap: 17px; }
  .auth-form-heading p { font-size: 14px; }
  .auth-submit { min-height: 49px; }
  .page-content { padding-bottom: max(86px, calc(70px + env(safe-area-inset-bottom))); }
  .page-heading h1 { font-size: 24px; }
  .page-heading p, .section-heading-with-copy p { font-size: 11px; }
  .pipeline-stage { min-height: 56px; justify-content: start; }
  .stage-label { max-width: 66px; color: #5e574c; font-size: 9px; }
  .stage-count { font-size: 16px; }
  .metric-label { font-size: 11px; }
  .metric-value { font-size: 20px; }
  .metric-note { font-size: 10px; }
  .section-heading-with-copy h2 { font-size: 17px; }
  .section-title { font-size: 15px; }
  .lead-table { min-width: 670px; }
  .lead-table td, .lead-table th { font-size: 11px; }
  .task-copy strong, .task-title-button { font-size: 12px; }
  .task-copy small { font-size: 10px; }
  .mobile-nav { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding-top: 7px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .mobile-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mobile-nav-link { min-height: 48px; padding-inline: 1px; font-size: 8px; line-height: 1.15; }
  .mobile-nav-link span { font-size: 16px; }
  .analytics-toolbar { flex-wrap: wrap; }
  .analytics-filter { flex: 1 1 130px; }
  .analytics-filter select { min-width: 0; width: 100%; }
  .analytics-zone { flex-basis: 100%; margin: 0; }
  .analytics-summary > div { padding: 13px 10px; }
  .analytics-summary strong { font-size: 17px; }
  .analytics-employee summary { align-items: flex-start; }
  .analytics-employee-total { max-width: 43%; white-space: normal; }
  .employee-row, .invitation-row { flex-wrap: wrap; gap: 10px; padding: 13px; }
  .employee-identity { flex: 1 1 calc(100% - 60px); }
  .employee-role { margin-left: 43px; }
  .employee-toggle { margin-left: auto; }
  .employee-state { font-size: 9px; }
  .invitation-row .employee-state { margin-left: 44px; }
  .team-intro { align-items: flex-start; padding: 15px; }
  .team-intro strong { font-size: 15px; }
  .toolbar-search input, .filter-select { min-height: 44px; font-size: 12px; }
  .page-heading .button { min-height: 42px; }
  .property-card-content { min-width: 0; }
  .property-card h3 { overflow-wrap: anywhere; font-size: 14px; }
  .property-card p { overflow-wrap: anywhere; font-size: 10px; line-height: 1.45; }
  .property-kind, .property-status { font-size: 8px; }
}

@media (max-width: 380px) {
  .auth-side { padding-inline: 17px; }
  .employee-row { align-items: flex-start; }
  .employee-role { margin-left: 0; }
  .employee-toggle { width: 100%; }
  .pipeline-stage { padding-inline: 2px; }
  .stage-label { font-size: 8px; }
  .metric { padding-inline: 8px; }
  .property-card { grid-template-columns: 84px minmax(0, 1fr); }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .mobile-nav, .pipeline, .list-panel, .task-list, .tasks-panel, .modal,
  .auth-side, .team-note, .team-intro, .employee-list, .invitation-list, .buyer-card {
    background: #f7f5f1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.property-art { position: relative; overflow: hidden; }
.property-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.property-art:has(> img)::before, .property-art:has(> img)::after { display: none; }
.property-card-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; color: #665f55; font-size: 10px; line-height: 1.4; }
.property-platforms { display: grid; flex: 1 1 100%; gap: 6px; color: #625a4f; }
.property-platforms > strong { font-size: 9px; font-weight: 600; }
.property-platforms ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.property-platform { display: inline-flex; min-width: 0; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid #d9d2c7; border-radius: 999px; color: #403c36; background: rgb(247 245 241 / 88%); font-size: 9px; font-weight: 600; line-height: 1.2; }
.property-platform-mark { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border-radius: 50%; color: #fff; background: #665f55; font-size: 10px; font-weight: 700; }
.property-card-footer { gap: 8px; }
.property-card-footer .text-button { flex: 0 0 auto; min-height: 30px; padding: 5px 7px; color: #4f594f; font-size: 11px; font-weight: 600; }
.property-card-footer .text-button:hover { color: #292722; background: #eeeae2; }

.buyer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.buyer-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgb(210 201 188 / 72%);
  border-radius: 8px;
  background: rgb(255 255 255 / 76%);
}
.buyer-card-head { display: flex; align-items: flex-start; gap: 12px; }
.buyer-identity { display: grid; min-width: 0; flex: 1; gap: 4px; }
.buyer-identity h2 { overflow-wrap: anywhere; margin: 0 0 2px; color: #302d28; font: 500 17px/1.3 Georgia, "Times New Roman", serif; }
.buyer-identity a, .buyer-muted { overflow-wrap: anywhere; color: #5e584e; font-size: 12px; text-decoration: none; }
.buyer-identity a:hover { color: #292722; text-decoration: underline; }
.buyer-card-head > .property-delete { flex: 0 0 auto; }
.buyer-interests { display: grid; gap: 7px; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgb(220 214 205 / 80%); }
.buyer-interests > strong { display: flex; align-items: center; justify-content: space-between; color: #615a50; font-size: 11px; font-weight: 600; }
.buyer-interests > strong span { color: #746b5f; font-variant-numeric: tabular-nums; }
.buyer-interests > p { margin: 0; color: #6f685e; font-size: 11px; }
.buyer-property-link { display: grid; gap: 3px; padding: 8px 0; border: 0; border-bottom: 1px solid rgb(220 214 205 / 60%); color: #39352f; background: transparent; text-align: left; cursor: pointer; }
.buyer-property-link:last-child { border-bottom: 0; }
.buyer-property-link:hover span { text-decoration: underline; }
.buyer-property-link span { font-size: 12px; font-weight: 600; }
.buyer-property-link small { color: #6f685e; font-size: 10px; }
.buyer-notes { margin: 10px 0 0; color: #5f594f; font-size: 11px; line-height: 1.55; white-space: pre-line; }
.buyer-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgb(220 214 205 / 60%); }
.buyer-card-footer > span { color: #766e62; font-size: 10px; }

.photo-manager { display: grid; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #dcd6cd; }
.photo-manager-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-manager-heading h3 { margin: 0; color: #302d28; font: 500 16px/1.3 Georgia, "Times New Roman", serif; }
.photo-manager-heading p, .photo-empty { margin: 4px 0 0; color: #625a4f; font-size: 11px; line-height: 1.4; }
.photo-upload-button { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.photo-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.photo-upload-button:focus-within { outline: 2px solid #625a4f; outline-offset: 3px; }
.photo-upload-button:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.photo-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; border: 1px solid #d9d2c7; border-radius: 5px; background: #e8e3da; }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute; top: 4px; right: 4px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; color: #292722; background: rgb(250 248 244 / 92%); cursor: pointer; }
.photo-remove:hover { color: #fff; background: #874a40; }
.field-hint { color: #625a4f; font-size: 10px; line-height: 1.4; }
.form-field select[multiple] { min-height: 112px; padding: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.property-scope-tabs { display: flex; gap: 5px; margin: 0 0 15px; border-bottom: 1px solid #d9d2c7; }
.property-scope-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: #665f55; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.property-scope-tab span { color: #746b5f; font-size: 10px; font-variant-numeric: tabular-nums; }
.property-scope-tab:hover { color: #292722; background: rgb(255 255 255 / 55%); }
.property-scope-tab.active { border-bottom-color: #655b4d; color: #302d28; }
.property-filter-field { display: grid; min-width: 118px; gap: 4px; color: #625a4f; font-size: 9px; }
.property-filter-field .filter-select, .property-filter-field input { width: 100%; }
.property-address-filter { min-width: 170px; flex: 1; }
.property-address-filter input, .property-price-filter input { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #d1c9bd; border-radius: 6px; color: #403c36; background: rgb(255 255 255 / 78%); font-size: 10px; }
.property-price-filter { display: grid; min-width: 180px; gap: 4px; color: #625a4f; font-size: 9px; }
.property-price-filter > span { grid-column: 1 / -1; }
.property-price-filter > label { min-width: 0; }
.property-price-filter { grid-template-columns: 1fr 1fr; }
.property-price-filter > span { grid-column: 1 / -1; }
.property-price-filter input { width: 100%; }
.property-status { display: inline-flex; min-height: 22px; align-items: center; padding: 2px 8px; border: 1px solid #ddd6ca; border-radius: 999px; color: #4a453d; background: #f3f0e9; font-size: 9px; white-space: nowrap; }
.property-card-footer .property-status { margin-right: auto; }
.profile-button .avatar { overflow: hidden; }
.profile-button .avatar img, .profile-photo-preview img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-photo-setting { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #d9d2c7; border-radius: 7px; background: rgb(255 255 255 / 50%); }
.profile-photo-preview { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; color: #453e34; background: #ded8ce; font-size: 16px; font-weight: 700; }
.profile-photo-setting > div { display: grid; gap: 5px; }
.profile-photo-setting strong { color: #38342d; font-size: 12px; }
.profile-photo-setting small { color: #625a4f; font-size: 10px; }
.profile-photo-setting .button { width: fit-content; min-height: 34px; margin-top: 3px; font-size: 10px; }
#profile-form textarea { width: 100%; min-height: 75px; padding: 11px 12px; border: 1px solid #d4ccbf; border-radius: 6px; color: #302d28; background: rgb(255 255 255 / 80%); font: inherit; font-size: 12px; resize: vertical; }
.profile-autosave-status { margin: -5px 0 0; color: #625a4f; font-size: 10px; line-height: 1.5; }
.profile-autosave-status.pending { color: #655b4d; }
.profile-autosave-status.saved { color: #4e614e; }
.profile-autosave-status.error { color: #873f36; }
.photo-manager .photo-grid#property-create-photo-preview { display: block; overflow-wrap: anywhere; color: #625a4f; font-size: 10px; line-height: 1.5; }
.offline-sync { padding: 13px 42px; border-bottom: 1px solid #d9d2c7; color: #302d28; background: #f0ede6; }
.offline-sync-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offline-sync-head > div:first-child { display: grid; gap: 3px; }
.offline-sync-head strong { font-size: 12px; }
.offline-sync-head span, .offline-sync-note { color: #625a4f; font-size: 10px; line-height: 1.5; }
.offline-sync-note { max-width: 90ch; margin: 8px 0 0; }
.offline-sync-actions { display: flex; gap: 8px; }
.offline-sync-button, .offline-sync-cancel { min-height: 34px; padding: 6px 10px; border: 1px solid #c9c0b3; border-radius: 5px; color: #353129; background: #fffdfa; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; }
.offline-sync-button:hover, .offline-sync-cancel:hover { background: #e9e4da; }
.offline-sync-button:disabled, .offline-sync-cancel:disabled { opacity: .55; cursor: not-allowed; }
.offline-sync-list { display: grid; gap: 5px; max-width: 760px; margin: 10px 0 0; padding: 0; list-style: none; }
.offline-sync-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #d9d2c7; }
.offline-sync-list li > span { display: grid; min-width: 0; gap: 2px; }
.offline-sync-list strong { overflow-wrap: anywhere; font-size: 10px; }
.offline-sync-list small { color: #625a4f; font-size: 9px; }
.offline-sync-cancel { min-height: 30px; flex: 0 0 auto; color: #74433b; }
.offline-sync-error { margin: 0; color: #873f36; font-size: 11px; }

@media (max-width: 650px) {
  .buyer-grid { grid-template-columns: 1fr; gap: 10px; }
  .buyer-card { padding: 14px; }
  .buyer-identity h2 { font-size: 16px; }
  .photo-manager-heading { align-items: flex-start; }
  .photo-manager-heading .button { min-height: 40px; }
  .property-card-meta { font-size: 9px; }
  .property-scope-tabs { margin-right: -4px; }
  .property-scope-tab { flex: 1; justify-content: center; padding-inline: 5px; font-size: 11px; }
  .property-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .property-toolbar .toolbar-search, .property-toolbar .property-address-filter, .property-toolbar .property-price-filter { width: 100%; min-width: 0; grid-column: 1 / -1; }
  .property-toolbar .property-filter-field { min-width: 0; }
  .property-toolbar .result-count { grid-column: 1 / -1; margin: 0; text-align: right; }
  .property-filter-field .filter-select, .property-address-filter input, .property-price-filter input { min-height: 42px; font-size: 12px; }
  .property-card-footer { flex-wrap: wrap; }
  .property-card-footer .text-button { min-height: 40px; }
  .profile-photo-setting { align-items: flex-start; }
  .offline-sync { padding: 12px 16px; }
  .offline-sync-head { align-items: flex-start; }
  .offline-sync-button { min-height: 40px; }
  .offline-sync-list li { align-items: flex-start; }
  .offline-sync-note { font-size: 10px; }
}