/* ==========================================================================
   pages.css — styles for each screen
   Dashboard · Objects · Property · Pipeline · Autosearch · Settings · sheets
   ========================================================================== */

/* ============================================================ shared bits */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  padding: .875rem .5rem;
  border-radius: var(--r-md);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  min-width: 0;
}
.stat b {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.stat span {
  font-size: .75rem;
  color: var(--muted);
}

/* charts */
.chart {
  position: relative;
  min-height: 13.125rem;
}
#chart-price {
  min-height: 14.375rem;
}
.chart svg {
  display: block;
  overflow: visible;
}
.chart .axis {
  fill: var(--muted);
  font-size: .7188rem;
  font-variant-numeric: tabular-nums;
}
.chart .grid {
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .dot {
  fill: var(--solid);
  stroke: var(--accent);
  stroke-width: 2.5;
  transition: r 0.25s var(--spring);
}
.chart .dot.on {
  r: 7;
}
.chart .cross {
  stroke: var(--ink);
  stroke-opacity: 0.28;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity 0.2s;
}
.chart .cross.on {
  opacity: 1;
}
.chart .hit,
.chart .bar-hit {
  fill: transparent;
  cursor: crosshair;
}
.chart .bar path {
  fill: var(--accent);
  opacity: 0.42;
  transition: opacity 0.25s;
}
.chart .bar.now path,
.chart .bar.hover path {
  opacity: 1;
}
.chart .bar-val {
  fill: var(--ink);
  font-size: .7812rem;
  font-weight: 700;
}
.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 1px;
  padding: .5625rem .8125rem;
  border-radius: .875rem;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--edge);
  box-shadow: 0 1rem 2.125rem -.875rem rgb(0 0 0 / 0.4);
  font-size: .75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
.chart-tip.on {
  opacity: 1;
}
.chart-tip b {
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chart-tip span {
  color: var(--muted);
}
.chart-tip em {
  font-style: normal;
  font-weight: 600;
}
.chart-tip em.pos {
  color: var(--green);
}
.chart-tip em.neg {
  color: var(--red);
}

/* rows used by lists */
.row-link {
  border-radius: 1rem;
  transition: background-color 0.2s;
}

/* ============================================================== dashboard */
.kpi {
  display: flex;
  flex-direction: column;
}
.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
  min-height: 2.75rem;
}
.kpi-ic {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.kpi-val {
  margin-top: 1.125rem;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.kpi-label {
  margin-top: .5rem;
  font-size: .9062rem;
  font-weight: 600;
}
.kpi-sub {
  margin-top: .125rem;
  font-size: .7812rem;
  color: var(--muted);
}

/* funnel */
.funnel {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.fun-row {
  display: grid;
  grid-template-columns: .625rem 5.75rem minmax(0, 1fr) 1.5rem 4rem;
  align-items: center;
  gap: .75rem;
  height: 2.75rem;
  padding: 0 .625rem;
  border-radius: .875rem;
  transition: background-color 0.2s;
}
.fun-row:hover {
  background: var(--soft);
}
.fun-name {
  font-size: .8438rem;
  font-weight: 500;
}
.fun-bar {
  height: .5rem;
  border-radius: .25rem;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.fun-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: .25rem;
  background: var(--accent);
  transform-origin: left;
  animation: grow 1.2s var(--ease) backwards;
  animation-delay: calc(0.5s + var(--i) * 0.08s);
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
.fun-n {
  font-weight: 700;
  text-align: right;
}
.fun-sum {
  font-size: .8125rem;
  color: var(--muted);
  text-align: right;
}

/* OLX ring */
.olx-dash {
  display: flex;
  flex-direction: column;
}
.ring-wrap {
  position: relative;
  width: 9.25rem;
  height: 9.25rem;
  margin: .125rem auto 1.25rem;
}
.ring {
  display: block;
}
.ring-track {
  fill: none;
  stroke: var(--soft-2);
}
.ring-arc {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}
.ring-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.ring-body b {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.ring-body b small {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.ring-body > span {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--muted);
}
.olx-dash .stat-row {
  margin-top: auto;
}

/* agenda + matches */
.agenda,
.matches {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ag-row,
.match-row {
  display: grid;
  align-items: center;
  gap: .875rem;
  padding: .5625rem .625rem;
  border-radius: 1rem;
  transition:
    background-color 0.2s,
    opacity 0.2s;
}
.ag-row:hover,
.match-row:hover {
  background: var(--soft);
}
.ag-row {
  grid-template-columns: 3.25rem 2.5rem minmax(0, 1fr) 1.25rem;
}
/* finished events stay readable: only the icon fades and the time is struck through */
.ag-row.past .ag-ic {
  opacity: 0.55;
}
.ag-row.past .ag-time {
  text-decoration: line-through;
}
.ag-time {
  font-size: .9375rem;
  font-weight: 700;
}
.ag-ic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ag-main,
.match-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ag-main b,
.match-main b {
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-main small,
.match-main small {
  font-size: .7812rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-go {
  color: var(--faint);
}
.match-row {
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
}
.match-row img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .875rem;
  object-fit: cover;
}
.match-price {
  font-size: .9375rem;
  font-weight: 700;
}

/* ================================================================ objects */
.toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: var(--gap);
}
.g-props {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.prop {
  display: flex;
  flex-direction: column;
  padding: .5rem;
}
.prop-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.1875rem;
  overflow: hidden;
  background: var(--soft);
}
.prop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.prop:hover .prop-media img {
  transform: scale(1.05);
}
.pill-glass {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 1.75rem;
  padding: 0 .6875rem;
  border-radius: 62.4375rem;
  background: rgb(18 18 22 / 0.36);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill-glass.tl {
  top: .625rem;
  left: .625rem;
}
.pill-glass.tr {
  top: .625rem;
  right: .625rem;
}
.pill-glass.bl {
  bottom: .625rem;
  left: .625rem;
}
.pill-glass.olx-dot {
  background: rgb(18 18 22 / 0.36);
  color: #fff;
}
.olx-dot.s-published i {
  background: #4ade80;
  --accent: #4ade80;
}
.olx-dot.s-draft i {
  background: #c9cdd6;
}
.olx-dot.s-sold i {
  background: #8fb6ff;
}
.olx-dot.s-removed i {
  background: #ff8086;
}
.prop-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .875rem .625rem .5rem;
}
.prop-price {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.prop-title {
  margin-top: .25rem;
  font-size: .9062rem;
  font-weight: 500;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-addr {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  font-size: .7812rem;
  color: var(--muted);
  min-width: 0;
}
.prop-addr span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .375rem;
  margin-top: auto;
  padding-top: .875rem;
}
.prop-meta > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  height: 2.375rem;
  border-radius: .75rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .7812rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2);
}
.g-sheet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.prop.compact {
  background: var(--soft);
}

/* =============================================================== property */
.prop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: var(--gap);
}
.code-chip {
  display: inline-flex;
  align-items: center;
  height: var(--h-btn);
  padding: 0 1.125rem;
  border-radius: 62.4375rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.prop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.col-main,
.col-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* gallery */
.gallery {
  padding: .5rem;
}
.gal-view {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  background: var(--soft);
  outline: none;
}
.gal-view.dragging {
  cursor: grabbing;
}
.gal-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.gal-slide {
  flex: 0 0 100%;
  height: 100%;
}
.gal-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.gal-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #121417;
  box-shadow: 0 .625rem 1.5rem -.75rem rgb(0 0 0 / 0.5);
  transition:
    opacity 0.3s,
    transform 0.35s var(--spring),
    background-color 0.2s;
}
.gal-nav:hover {
  background: #fff;
}
.gal-nav:active {
  transform: scale(0.9);
}
.gal-nav:disabled {
  opacity: 0;
  pointer-events: none;
}
.gal-nav.prev {
  left: .875rem;
}
.gal-nav.next {
  right: .875rem;
}
.gal-count {
  top: .875rem;
  left: .875rem;
}
.gal-dots {
  position: absolute;
  left: 50%;
  bottom: .875rem;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  gap: .375rem;
  padding: .375rem .5rem;
  border-radius: 62.4375rem;
  background: rgb(18 18 22 / 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gal-dots i {
  width: .4375rem;
  height: .4375rem;
  border-radius: .25rem;
  background: rgb(255 255 255 / 0.55);
  transition:
    width 0.4s var(--ease),
    background-color 0.3s;
}
.gal-dots i.on {
  width: 1.25rem;
  background: #fff;
}
.gal-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}
.gal-thumbs button {
  aspect-ratio: 4 / 3;
  border-radius: .875rem;
  overflow: hidden;
  opacity: 0.55;
  outline: .125rem solid transparent;
  outline-offset: .125rem;
  transition:
    opacity 0.3s,
    outline-color 0.3s,
    transform 0.35s var(--spring);
}
.gal-thumbs button:hover {
  opacity: 0.85;
}
.gal-thumbs button.on {
  opacity: 1;
  outline-color: var(--solid);
}
.gal-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* summary */
.sum-tags {
  display: flex;
  gap: .5rem;
}
.sum-price {
  margin-top: 1.125rem;
  font-size: clamp(2rem, 3vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1;
}
.sum-price small {
  margin-left: .25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.sum-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .625rem;
  font-size: .8438rem;
  color: var(--muted);
}
.sum-title {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.sum-addr {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .8438rem;
  color: var(--muted);
}
.sum-addr svg {
  margin-top: 1px;
}
.params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
  margin-top: 1.25rem;
}
.param {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1875rem;
  padding: .875rem .75rem;
  border-radius: var(--r-md);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  min-width: 0;
}
.param-ic {
  width: 2.125rem;
  height: 2.125rem;
  margin-bottom: .375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
}
.param b {
  max-width: 100%;
  font-size: .9062rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.param small {
  font-size: .75rem;
  color: var(--muted);
}

/* OLX block — the four actions sit in an even 2 × 2 grid */
.olx-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  margin-top: .75rem;
}
.olx-actions .btn {
  width: 100%;
  min-width: 0;
  height: 3.25rem;
  padding: 0 .75rem;
}
.olx-actions .btn span {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

/* owner */
.owner-row {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.owner-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.owner-row b {
  font-size: .9688rem;
  font-weight: 600;
}
.owner-row small {
  font-size: .7812rem;
  color: var(--muted);
}
.owner-contract {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 1rem 0;
  padding: .8125rem .875rem;
  border-radius: 1rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8438rem;
  font-weight: 500;
}

/* description */
.desc {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1.125rem;
}
.features span {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6875rem .8125rem;
  border-radius: .875rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8438rem;
  font-weight: 500;
}
.features svg {
  color: var(--accent);
}

/* price history header */
.card-head:has(.hist-sum) {
  flex-wrap: wrap;
}
.card-head:has(.hist-sum) > div:first-child {
  flex: 1 1 13.75rem;
}
.hist-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 6rem;
}
.hist-sum small {
  font-size: .75rem;
  color: var(--muted);
}
.hist-sum b {
  font-size: 1.0625rem;
  font-weight: 650;
}

/* who else sells it */
.comp-table {
  display: flex;
  flex-direction: column;
}
.comp-row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.9fr 1.3fr 0.7fr;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: 1rem;
  transition: background-color 0.2s;
}
.comp-row:not(.head) + .comp-row {
  box-shadow: 0 -1px 0 var(--line);
}
.comp-row:not(.head):hover {
  background: var(--soft);
  box-shadow: none;
}
.comp-row:not(.head):hover + .comp-row {
  box-shadow: none;
}
.comp-row.head {
  padding-top: 0;
  padding-bottom: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}
.comp-site {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}
.site-tag {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .6875rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-style: normal;
  font-size: .6562rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.comp-site b,
.comp-seller b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-seller {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.comp-seller small {
  font-size: .75rem;
  color: var(--muted);
}
.comp-price {
  font-weight: 650;
}
.comp-date {
  text-align: right;
  color: var(--muted);
  font-size: .8125rem;
}

/* =============================================================== pipeline */
.stage-tabs-wrap,
.pane-tabs {
  display: none;
}
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(13.625rem, 1fr));
  gap: .875rem;
  overflow-x: auto;
  padding-bottom: .375rem;
  scrollbar-width: none;
}
.board::-webkit-scrollbar {
  display: none;
}
.col {
  display: flex;
  flex-direction: column;
  padding: .875rem;
  min-height: 28.75rem;
  transition: box-shadow 0.3s;
}
.col.over {
  box-shadow:
    inset 0 0 0 .125rem color-mix(in srgb, var(--accent) 65%, transparent),
    var(--shadow-card);
}
.col.flash {
  animation: flash 1s var(--ease);
}
.col-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .125rem .125rem 0;
}
.col-head h3 {
  flex: 1;
  font-size: .9375rem;
  font-weight: 600;
}
.col-count {
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 .5rem;
  border-radius: 62.4375rem;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .75rem;
  font-weight: 700;
}
.col-sum {
  margin: .625rem .125rem .875rem;
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.col-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  flex: 1;
  min-height: 7.5rem;
}
.col.is-empty .col-list::after {
  content: attr(data-empty);
  display: grid;
  place-items: center;
  height: 6.875rem;
  padding: 1rem;
  border-radius: 1.125rem;
  border: 1.5px dashed var(--line-2);
  color: var(--muted);
  font-size: .7812rem;
  text-align: center;
}
.deal {
  position: relative;
  padding: .75rem;
  border-radius: 1.125rem;
  background: var(--soft-2);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 .5rem 1.25rem -1rem rgb(0 0 0 / 0.4);
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition:
    box-shadow 0.25s,
    background-color 0.25s;
}
.deal:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 .875rem 1.625rem -1rem rgb(0 0 0 / 0.45);
}
.deal-top {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.deal-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.deal-who b {
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-who small {
  font-size: .7188rem;
  color: var(--muted);
}
.deal-grip {
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.2s;
}
.deal:hover .deal-grip {
  opacity: 1;
}
.deal-prop {
  display: flex;
  align-items: flex-start;
  gap: .4375rem;
  margin: .625rem 0 .75rem;
  font-size: .7812rem;
  line-height: 1.35;
  color: var(--muted);
}
.deal-prop svg {
  margin-top: 1px;
}
.deal-prop span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deal-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.deal-foot b {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.deal-foot b small {
  font-size: .7188rem;
  color: var(--muted);
  font-weight: 600;
}
.deal-fee {
  font-size: .75rem;
  font-weight: 600;
  color: var(--green);
}
.deal-ph {
  border-radius: 1.125rem;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.deal-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--edge);
  box-shadow: 0 2.125rem 3.75rem -1.25rem rgb(0 0 0 / 0.5);
  color: var(--ink);
}
.deal-ghost .deal-grip {
  opacity: 1;
}

/* deal sheet */
.mini-prop {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem;
  margin-bottom: .5rem;
  border-radius: 1.125rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mini-prop img {
  width: 4rem;
  height: 4rem;
  border-radius: .8125rem;
  object-fit: cover;
}
.mini-prop span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mini-prop b {
  font-size: .875rem;
  font-weight: 600;
}
.mini-prop small {
  font-size: .7812rem;
  color: var(--muted);
}
.info-list {
  display: flex;
  flex-direction: column;
}
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  padding: .8125rem .125rem;
  font-size: .875rem;
}
.info-row + .info-row {
  border-top: 1px solid var(--line);
}
.info-row span {
  color: var(--muted);
  flex-shrink: 0;
}
.info-row b {
  font-weight: 600;
  text-align: right;
}
.sheet-label {
  margin: 1.125rem 0 .625rem;
  font-size: .7812rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.stage-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.stage-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.25rem;
  padding: 0 1rem;
  border-radius: 1rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .9062rem;
  font-weight: 500;
  text-align: left;
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.3s var(--spring);
}
.stage-opt:hover {
  background: var(--soft-2);
}
.stage-opt:active {
  transform: scale(0.98);
}
.stage-opt svg {
  margin-left: auto;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.25s,
    transform 0.35s var(--spring);
}
.stage-opt.on {
  background: var(--solid);
  color: var(--on-solid);
}
.stage-opt.on svg {
  opacity: 1;
  transform: none;
}

/* ============================================================= autosearch */
.as-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.srch-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.srch {
  position: relative;
  padding: 1rem;
  border-radius: 1.375rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: opacity 0.3s;
}
/* a switched-off search keeps readable text: only its icon steps back */
.srch.off .srch-ic {
  opacity: 0.55;
}
.srch-top {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.srch-ic {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  transition: opacity 0.3s;
}
.srch-name {
  flex: 1;
  min-width: 0;
  transition: opacity 0.3s;
}
.srch-name h4 {
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srch-name small {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: .875rem 0;
}
.srch-tags span {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 .625rem;
  border-radius: 62.4375rem;
  background: var(--soft-2);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-2);
}
.srch-foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.srch-foot .btn {
  width: 100%;
  height: 3.125rem;
  padding: 0 .5rem;
  min-width: 0;
}
.srch-stat {
  height: 3.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.srch-stat b {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
}
.srch-stat span {
  font-size: .6875rem;
  color: var(--muted);
}
.srch-stat.fresh {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 .625rem 1.25rem -.875rem var(--accent);
}
.srch-stat.fresh span {
  color: inherit;
}
.srch-stat.fresh.zero {
  background: var(--soft-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.srch-stat.fresh.zero span {
  color: var(--muted);
  opacity: 1;
}

.src-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
}
.src {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1875rem;
  padding: 1rem .5rem .875rem;
  border-radius: 1.25rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.3s var(--spring);
}
.src:hover {
  background: var(--soft-2);
}
.src:active {
  transform: scale(0.96);
}
.src-ic {
  width: 2.625rem;
  height: 2.625rem;
  margin-bottom: .375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  transition: background-color 0.25s;
}
.src b {
  font-size: .875rem;
  font-weight: 600;
}
.src small {
  font-size: .7188rem;
  color: var(--muted);
  transition: color 0.25s;
}
.src-check {
  position: absolute;
  top: .625rem;
  right: .625rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--on-solid);
  color: var(--solid);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s,
    transform 0.4s var(--spring);
}
.src.on {
  background: var(--solid);
  color: var(--on-solid);
}
.src.on .src-ic {
  background: color-mix(in srgb, var(--on-solid) 16%, transparent);
}
.src.on small {
  color: color-mix(in srgb, var(--on-solid) 70%, transparent);
}
.src.on .src-check {
  opacity: 1;
  transform: none;
}
.match-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-radius: 1.125rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.match-now span {
  display: flex;
  align-items: center;
  gap: .5625rem;
  font-size: .8438rem;
  font-weight: 500;
}
.match-now b {
  font-size: 1.5rem;
  font-weight: 700;
}
.as-new.flash {
  animation: flash 1.2s var(--ease) 2;
}

/* =============================================================== settings */
.settings .card {
  margin-bottom: var(--gap);
}
.pickers {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.picker-head {
  margin-bottom: .875rem;
}
.picker-head h4 {
  font-size: 1rem;
  font-weight: 600;
}
.picker-head p {
  margin-top: .1875rem;
  font-size: .8125rem;
  color: var(--muted);
}
.swatches {
  display: grid;
  gap: .875rem;
}
.swatches.s-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.swatches.s-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5625rem;
  min-width: 0;
}
.sw-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.3),
    0 .625rem 1.5rem -1rem rgb(0 0 0 / 0.5);
  outline: .1562rem solid transparent;
  outline-offset: .1875rem;
  transition:
    outline-color 0.3s,
    transform 0.35s var(--spring);
}
.s-7 .sw-face {
  aspect-ratio: 1;
}
.swatch:hover .sw-face {
  transform: translateY(-.125rem);
}
.swatch.on .sw-face {
  outline-color: var(--solid);
}
.sw-pane {
  position: absolute;
  inset: 20%;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: .875rem;
  background: var(--tp);
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.5),
    0 .5rem 1rem -.625rem rgb(0 0 0 / 0.4);
}
.sw-check {
  position: relative;
  z-index: 2;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #121417;
  box-shadow: 0 .375rem .875rem -.375rem rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.25s,
    transform 0.45s var(--spring);
}
.swatch.on .sw-check {
  opacity: 1;
  transform: none;
}
.sw-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.set-list {
  display: flex;
  flex-direction: column;
}
.set-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 0;
}
.set-row + .set-row {
  border-top: 1px solid var(--line);
}
.set-ic {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.set-txt {
  flex: 1;
  min-width: 0;
}
.set-txt b {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
}
.set-txt small {
  display: block;
  font-size: .7812rem;
  color: var(--muted);
}

/* ======================================================= sheets: misc bits */
.confirm-text {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.notes {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.note {
  position: relative;
  display: flex;
  gap: .75rem;
  padding: .8125rem .875rem;
  border-radius: 1.125rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.note-ic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--soft-2);
}
.note b {
  font-size: .9062rem;
  font-weight: 600;
}
.note p {
  margin-top: .125rem;
  font-size: .8125rem;
  color: var(--muted);
}
.note small {
  font-size: .75rem;
  color: var(--faint);
}
.note.unread::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: .5625rem;
  height: .5625rem;
  border-radius: 50%;
  background: var(--accent);
}
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  margin: .25rem 0 1.25rem;
}
.profile-out {
  width: 100%;
  margin-top: .875rem;
}

/* ============================================================== contracts */
.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
/* the rows follow the card's own width — it narrows when the AI panel opens */
.ct-reg {
  container-type: inline-size;
}
.ct-reg .card-head {
  flex-wrap: wrap;
  align-items: center;
}
.ct-reg .card-head > div:first-child {
  flex: 1 1 13.75rem;
}
.ct-reg .search-field {
  flex: 0 1 17.5rem;
  min-width: 12.5rem;
}
.ct-seg {
  margin-bottom: .875rem;
}
.ct-table {
  display: flex;
  flex-direction: column;
}
.ct-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 2.2fr) minmax(0, 1.3fr) 6.25rem 7.75rem;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: .625rem .75rem .625rem .625rem;
  border-radius: 1.125rem;
  text-align: left;
  transition: background-color 0.2s;
}
#ct-rows .ct-row + .ct-row {
  box-shadow: 0 -1px 0 var(--line);
}
#ct-rows .ct-row:hover {
  background: var(--soft);
  box-shadow: none;
}
#ct-rows .ct-row:hover + .ct-row {
  box-shadow: none;
}
.ct-row.head {
  padding-top: 0;
  padding-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}
.ct-row.head span:first-child {
  grid-column: span 2;
}
.ct-row.head span:nth-child(3),
.ct-row.head span:nth-child(4) {
  text-align: right;
}
.ct-row img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .875rem;
  object-fit: cover;
}
.ct-main {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}
.ct-main b,
.ct-main small,
.ct-term small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-main b {
  font-size: .875rem;
  font-weight: 600;
}
.ct-main small,
.ct-term small,
.ct-fee small {
  font-size: .75rem;
  color: var(--muted);
}
.ct-main em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ct-term {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  min-width: 0;
}
.ct-fee {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ct-fee b {
  font-size: .9062rem;
  font-weight: 650;
}
.ct-status {
  justify-self: end;
}

/* contract states — pills, icons and term bars share the colours */
.cs-active {
  color: var(--green);
  background: var(--green-bg);
}
.cs-expiring {
  color: var(--amber);
  background: var(--amber-bg);
}
.cs-sent {
  color: var(--blue);
  background: var(--blue-bg);
}
.cs-expired {
  color: var(--muted);
  background: var(--soft-2);
}
.term {
  display: block;
  height: .375rem;
  border-radius: .25rem;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.term i {
  display: block;
  width: calc(var(--p) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left;
  animation: grow 1.2s var(--ease) 0.35s backwards;
}
.term.t-expiring i {
  background: var(--amber);
}
.term.t-expired i {
  background: var(--faint);
}
/* not signed yet — the term hasn't started */
.term.t-sent {
  background: repeating-linear-gradient(-45deg, var(--soft-2) 0 .3125rem, color-mix(in srgb, var(--blue) 16%, transparent) .3125rem .625rem);
}

/* needs attention · objects without a contract */
.att-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.att-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 8.25rem;
  align-items: center;
  gap: .75rem;
  padding: .5rem;
  border-radius: 1.125rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.att-ic {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.att-row img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  object-fit: cover;
}
.att-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  border-radius: .5rem;
}
.att-main b {
  font-size: .8438rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-main small {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-main:hover b {
  text-decoration: underline;
  text-underline-offset: .1875rem;
}
.att-row .btn {
  width: 100%;
  padding: 0 .625rem;
}

/* contract sheet */
.mini-prop[href] {
  transition: background-color 0.2s;
}
.mini-prop[href]:hover {
  background: var(--soft-2);
}
.ct-hero {
  margin: .75rem 0 .5rem;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 1.25rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ct-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .8438rem;
  font-weight: 600;
  color: var(--ink-2);
}
.ct-hero-date {
  display: block;
  margin: .875rem 0 .75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.ct-hero small {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--muted);
}
.info-row b small {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
}
.steps {
  display: flex;
  flex-direction: column;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .5625rem 0;
  font-size: .875rem;
  color: var(--muted);
}
.step i {
  justify-self: center;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
/* the line from the previous dot to this one */
.step + .step::before {
  content: '';
  position: absolute;
  left: .75rem;
  top: calc(-50% + .5rem);
  height: calc(100% - 1rem);
  width: 1.5px;
  translate: -50% 0;
  background: var(--line-2);
}
.step.done {
  color: var(--ink-2);
}
.step.done i {
  background: var(--accent);
  box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--accent) 22%, transparent);
}
.step.done + .step.done::before {
  background: var(--accent);
}
.step small {
  font-size: .8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* new contract — pick an object */
.pick-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pick {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: .75rem;
  padding: .5rem .875rem .5rem .5rem;
  border-radius: 1.125rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  transition:
    background-color 0.25s,
    box-shadow 0.25s,
    transform 0.3s var(--spring);
}
.pick:hover {
  background: var(--soft-2);
}
.pick:active {
  transform: scale(0.98);
}
.pick img {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  object-fit: cover;
}
.pick span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pick b {
  font-size: .8438rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick small {
  font-size: .75rem;
  color: var(--muted);
}
.pick-check {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.4s var(--spring);
}
.pick.on {
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}
.pick.on .pick-check {
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: none;
  transform: scale(1.1);
}
/* «Комісія за договором» summary row */
.match-now > span > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.match-now .mn-label {
  font-size: .8438rem;
  font-weight: 600;
}
.match-now small {
  font-size: .75rem;
  color: var(--muted);
}

/* property page: owner card opens the contract */
button.owner-contract {
  width: 100%;
  text-align: left;
  transition: background-color 0.2s;
}
button.owner-contract:hover {
  background: var(--soft-2);
}
.owner-contract span {
  flex: 1;
  min-width: 0;
}
.owner-contract .ic:last-child {
  color: var(--faint);
}
/* «AI-опис» on the description card */
.btn.ai-chip .ic {
  color: var(--accent);
}

/* ================================================================== login */
/* Made of the shell's own parts — glass top bar, frosted panel, cards — so
   the sign-in sits on the same wallpaper and glass as the dashboard. */
/* padding, not the shell's margin: a margin would collapse through to <body>
   and leave the page a little taller than the screen */
.login {
  --h-btn: 3.125rem;
  margin-top: 0;
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
}
.login-bar {
  margin-left: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}
.login-bar .brand:hover {
  background: none;
}
/* fills the screen under the top bar: 1.375 + 4.75 + 1.25 + 1.375 rem */
.login-stage {
  margin: 1.25rem 0 0;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4.5vw, 5rem);
  min-height: calc(100vh - 8.75rem);
  min-height: calc(100dvh - 8.75rem);
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(0, 30rem);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  color: var(--ink);
}
.login-intro h2 {
  max-width: 34rem;
  font-size: clamp(2.125rem, 3.3vw, 3rem);
  font-weight: 650;
  letter-spacing: -1.2px;
  line-height: 1.08;
}
.login-intro p {
  max-width: 30rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted);
}
.login-moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 40rem;
  margin-top: 2.5rem;
}
.login-moment {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.login-moment > span:last-child {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  line-height: 1.3;
}
.login-moment b {
  font-size: 1.0625rem;
  font-weight: 650;
}
.login-moment small {
  font-size: .75rem;
  color: var(--muted);
}
.login-card {
  padding: 2.25rem 2.25rem 1.5rem;
}
.login-pane[hidden] {
  display: none;
}
.login-head {
  margin-bottom: .25rem;
  text-align: center;
}
.login-head h1 {
  font-size: 2.125rem;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.1;
}
.login-head p {
  margin-top: .5rem;
  font-size: .9375rem;
  color: var(--muted);
}
.login-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.login-opt > span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.login-opt b {
  font-size: .875rem;
  font-weight: 600;
}
.login-opt small {
  font-size: .75rem;
  color: var(--muted);
}
.login-err {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6875rem .875rem;
  border-radius: .875rem;
  background: var(--red-bg);
  color: var(--red);
  font-size: .8438rem;
  font-weight: 600;
}
.login-err[hidden] {
  display: none;
}
.login-pane > .btn {
  width: 100%;
}
.login-pane .link.back {
  align-self: flex-start;
  margin-bottom: -.25rem;
}
.login-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  font-size: .75rem;
  color: var(--muted);
}
.login-help {
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
}

/* ==================================================================== map */
.map-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.map-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  gap: var(--gap);
}
/* Leaflet rebuilds its panes on load; without this Chrome's scroll anchoring nudges the page down */
body[data-page='map'] {
  overflow-anchor: none;
}
.map-side {
  display: flex;
  flex-direction: column;
  height: 44rem;
  min-height: 0;
}
.map-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0 -.5rem;
  padding: 0 .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.map-card {
  position: relative;
  height: 44rem;
  padding: .5rem;
}
.map-canvas {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--soft);
}
.map-canvas.leaflet-container {
  font-family: var(--font);
  background: var(--soft);
}
/* OpenStreetMap's colours, calmed down to sit under the glass; inverted for dark themes */
.map-canvas .leaflet-tile-pane {
  filter: saturate(0.45) contrast(0.92) brightness(1.04);
}
.map-canvas[data-tiles='dark'] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.88) contrast(0.88);
}
.map-canvas.far .pin {
  padding: .3125rem .5rem;
  font-size: .6875rem;
}
.map-canvas .leaflet-control-attribution {
  margin: .625rem 0 0 .625rem;
  padding: .125rem .5rem;
  border-radius: .5rem;
  background: var(--glass-strong);
  color: var(--muted);
  font-size: .625rem;
}
.map-canvas .leaflet-control-attribution a {
  color: var(--ink-2);
}
.map-ctrl {
  --in: 0.4s;
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .375rem;
  border-radius: 62.4375rem;
}
.map-ctrl .tool {
  width: 2.75rem;
  height: 2.75rem;
}

/* price pins — glass pills with a dot exactly on the address */
.pin-wrap {
  background: none;
  border: 0;
}
.pin {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% calc(-100% - .75rem);
  display: inline-flex;
  align-items: baseline;
  gap: .125rem;
  padding: .4375rem .6875rem;
  border-radius: 62.4375rem;
  background: var(--glass-strong);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--edge);
  box-shadow: 0 .625rem 1.375rem -.625rem rgb(0 0 0 / 0.5);
  color: var(--ink);
  font: 700 .8125rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition:
    transform 0.35s var(--spring),
    background-color 0.25s,
    color 0.25s;
}
.pin small {
  font-size: .625rem;
  font-weight: 600;
  opacity: 0.7;
}
.pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-.75rem - .3125rem);
  width: .625rem;
  height: .625rem;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .1875rem #fff, 0 .25rem .625rem rgb(0 0 0 / 0.35);
}
.pin[data-s='sold'],
.pin[data-s='removed'] {
  opacity: 0.82;
}
.pin[data-s='sold']::after,
.pin[data-s='removed']::after {
  background: #8a8f99;
}
.pin-wrap.hover .pin,
.pin-wrap.on .pin {
  transform: scale(1.14);
}
.pin-wrap.on .pin {
  background: var(--solid);
  color: var(--on-solid);
  border-color: transparent;
  opacity: 1;
}

.map-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .5rem;
  border-radius: 1.125rem;
  text-align: left;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}
.map-item:hover {
  background: var(--soft);
}
.map-item.on {
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}
.map-item img {
  width: 4.5rem;
  height: 3.5rem;
  border-radius: .875rem;
  object-fit: cover;
}
.map-item-main {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  min-width: 0;
}
.map-item-main b {
  font-size: .9688rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.map-item-main > span,
.map-item-main small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-item-main > span {
  font-size: .8125rem;
  font-weight: 500;
}
.map-item-main small {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .7188rem;
  color: var(--muted);
}
.map-item .olx-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.map-strip {
  display: none;
}

/* ============================================================ documents */
.ct-panes {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.doc-maker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.75rem;
  align-items: start;
}
.dm-form .card-head {
  margin-bottom: 1rem;
}
.dm-object {
  margin: 0;
}
.dm-object > span {
  flex: 1;
}
.dm-object b,
.dm-object small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-object .btn {
  flex-shrink: 0;
  margin-right: .25rem;
}
.dm-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
.dm-types .src {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .75rem;
  row-gap: .0625rem;
  align-items: center;
  justify-items: start;
  padding: .75rem 2.25rem .75rem .75rem;
  text-align: left;
}
.dm-types .src-ic {
  grid-row: span 2;
  margin: 0;
}
.dm-types .src b {
  align-self: end;
  line-height: 1.25;
}
.dm-types .src small {
  align-self: start;
}
.dm-preview {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
.dm-preview-head b {
  font-size: .9375rem;
  font-weight: 600;
}
.dm-preview-head small {
  display: block;
  font-size: .75rem;
  color: var(--muted);
}
.doc-ic {
  background: var(--soft-2);
}
.pick small em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

/* the A4 page, scaled to its frame by js (--s) */
.doc-frame {
  position: relative;
  overflow: hidden;
  border-radius: .875rem;
  background: #fff;
  box-shadow:
    0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / 0.45),
    0 0 0 1px var(--line);
}
.doc-frame.in-sheet {
  max-width: 46rem;
  margin: .25rem auto .5rem;
}
.doc-scale {
  width: 794px;
  transform: scale(var(--s, 0.5));
  transform-origin: 0 0;
}
.doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 794px;
  min-height: 1123px;
  padding: 60px 72px 48px;
  background: #fff;
  color: #1b1d21;
  font: 400 13px/1.6 var(--font);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid #1b1d21;
}
.doc-brand,
.doc-no {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.doc-brand {
  flex: 1;
}
.doc-brand b {
  font-size: 15px;
  letter-spacing: 2px;
}
.doc-no {
  text-align: right;
}
.doc-brand small,
.doc-no small {
  font-size: 11px;
  color: #6b6f76;
}
.doc h1 {
  margin: 18px 0 2px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.3;
  text-transform: uppercase;
}
.doc h1 span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #4a4e55;
}
.doc-place {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #4a4e55;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.doc-table th,
.doc-table td {
  padding: 7px 10px;
  border: 1px solid #e3e0da;
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  width: 30%;
  font-weight: 500;
  color: #6b6f76;
  background: #f6f4f0;
}
.doc-table td {
  font-weight: 600;
}
.doc-clauses {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-signs {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 28px;
  margin-top: auto;
  padding-top: 24px;
}
.doc-signs > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.doc-signs small {
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b6f76;
}
.doc-signs i {
  height: 36px;
  border-bottom: 1px solid #1b1d21;
}
.doc-signs b {
  font-size: 12.5px;
}
.doc-signs span {
  font-size: 10px;
  color: #8a8e95;
}
.doc-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #e3e0da;
  font-size: 10.5px;
  color: #8a8e95;
}

/* «Зберегти PDF» prints only the document; the browser saves it as PDF */
#print-root {
  display: none;
}
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  html,
  body {
    background: #fff !important;
  }
  body > *:not(#print-root) {
    display: none !important;
  }
  #print-root {
    display: block;
  }
  #print-root .doc {
    width: 210mm;
    min-height: 297mm;
  }
}

/* ====================================================== «Ще» (phones) */
.more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
.more-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
  padding: 1rem;
  border-radius: 1.25rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  transition:
    background-color 0.25s,
    transform 0.3s var(--spring);
}
.more-tile:hover {
  background: var(--soft-2);
}
.more-tile:active {
  transform: scale(0.97);
}
.more-ic,
.more-tile .avatar {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .625rem;
}
.more-ic {
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.more-tile b {
  font-size: .9375rem;
  font-weight: 600;
}
.more-tile small {
  font-size: .75rem;
  color: var(--muted);
}

/* ======================================================= Telegram login */
.btn.tg-btn {
  background: #2aabee;
  color: #fff;
  box-shadow: 0 .75rem 1.75rem -.875rem rgb(42 171 238 / 0.9);
}
.btn.tg-btn:hover {
  background: #1f9bdc;
}
.login-note {
  margin-top: -.375rem;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}
.login-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: var(--muted);
}
.login-or::before,
.login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.tg-code {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.tg-code span {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 1.25rem;
  background: var(--soft-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 .75rem 1.5rem -1rem rgb(0 0 0 / 0.45);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tg-status {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8438rem;
  font-weight: 500;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.tg-state {
  flex: 1;
  min-width: 0;
}
.tg-left {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}
.tg-spin {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: .125rem solid #2aabee;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
.tg-status.done {
  background: var(--green-bg);
  color: var(--green);
}
.tg-status.expired {
  background: var(--red-bg);
  color: var(--red);
}
.tg-status.done .tg-spin,
.tg-status.expired .tg-spin {
  animation: none;
  border-color: currentColor;
  background: currentColor;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1380px) {
  .g-props {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .prop-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* one column: cards follow a phone-friendly order */
  .prop-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .col-main,
  .col-side {
    display: contents;
  }
  .o-1 { order: 1; }
  .o-2 { order: 2; }
  .o-3 { order: 3; }
  .o-4 { order: 4; }
  .o-5 { order: 5; }
  .o-6 { order: 6; }
  .o-7 { order: 7; }
  .ct-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .doc-maker {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-preview {
    position: static;
  }
  .map-layout {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }
  .board {
    grid-template-columns: repeat(5, 16.25rem);
  }
}

/* contracts registry in a narrow card (tablet, phone, or next to the AI panel) */
@container (max-width: 40rem) {
  .ct-row.head {
    display: none;
  }
  .ct-row {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    grid-template-areas:
      'img main status'
      'term term fee';
    gap: .75rem;
    padding: .75rem .375rem;
  }
  .ct-row img { grid-area: img; }
  .ct-main { grid-area: main; }
  .ct-status { grid-area: status; align-self: start; }
  .ct-term { grid-area: term; }
  .ct-fee { grid-area: fee; align-self: end; }
}

@media (max-width: 1100px) {
  .g-props {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolbar .search-field {
    grid-column: 1 / -1;
  }
  .as-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .g-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .comp-row {
    grid-template-columns: 1fr 1.3fr 0.9fr 1.3fr 0.7fr;
  }
  .login-stage {
    grid-template-columns: minmax(0, 30rem);
  }
  .login-intro {
    display: none;
  }
}

/* ----------------------------------------------------------------- phone -- */
@media (max-width: 760px) {
  .kpi {
    padding: 1rem;
  }
  .kpi-ic {
    width: 2.5rem;
    height: 2.5rem;
  }
  .kpi-val {
    margin-top: .875rem;
    font-size: 1.625rem;
  }
  .kpi-label {
    font-size: .8438rem;
  }
  .kpi-sub {
    font-size: .75rem;
  }
  .kpi .delta {
    height: 1.375rem;
    font-size: .6875rem;
  }

  .fun-row {
    grid-template-columns: .625rem 5.25rem minmax(0, 1fr) 1.25rem 3.5rem;
    gap: .625rem;
    padding: 0 .375rem;
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: .625rem;
  }
  .toolbar .seg button {
    padding: 0 .375rem;
    font-size: .8125rem;
  }
  .g-props,
  .g-sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  /* property: big edge-to-edge gallery, dots instead of thumbnails */
  .prop-top .btn {
    padding: 0 1rem;
  }
  .gallery {
    padding: .375rem;
    margin: 0 -.375rem;
  }
  .gal-view {
    aspect-ratio: 4 / 3.4;
    border-radius: 1.25rem;
  }
  .gal-thumbs,
  .gal-nav {
    display: none;
  }
  .params {
    gap: .5rem;
  }
  .param {
    padding: .75rem .625rem;
  }
  .param b {
    font-size: .8438rem;
  }
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
  .hist-sum {
    align-items: flex-start;
  }
  .card-head:has(.hist-sum) > div:first-child {
    flex-basis: 100%;
  }
  .comp-row.head {
    display: none;
  }
  .comp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'site date'
      'seller price'
      'seller diff';
    gap: .375rem .75rem;
    padding: .875rem .25rem;
  }
  .comp-row:not(.head):hover {
    background: none;
  }
  .comp-site { grid-area: site; }
  .comp-date { grid-area: date; }
  .comp-seller { grid-area: seller; align-self: start; }
  .comp-price { grid-area: price; text-align: right; }
  .comp-diff { grid-area: diff; justify-self: end; }

  /* pipeline: stage tabs + one column per screen, swipe between them */
  .stage-tabs-wrap {
    display: block;
    position: sticky;
    top: calc(var(--safe-t) + 5rem);
    z-index: 20;
    margin-bottom: .875rem;
  }
  .seg.stage-tabs {
    display: flex;
    width: 100%;
    background: var(--glass-strong);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow:
      inset 0 0 0 1px var(--edge),
      0 .875rem 1.875rem -1.25rem rgb(0 0 0 / 0.5);
  }
  .stage-tabs button {
    flex: 1 1 0;
    min-width: 0;
    height: 3.25rem;
    padding: 0 .125rem;
    flex-direction: column;
    gap: 0;
  }
  .stage-tabs button b {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
  }
  .stage-tabs button small {
    max-width: 100%;
    font-size: .6562rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board {
    grid-template-columns: repeat(5, calc(100% - 1.875rem));
    gap: .625rem;
    margin: 0 calc(-.875rem - var(--safe-r)) 0 calc(-.875rem - var(--safe-l));
    padding: 0 .875rem .375rem;
    scroll-padding: 0 .875rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  body.is-dragging .board {
    scroll-snap-type: none;
  }
  .col {
    scroll-snap-align: start;
    min-height: 56vh;
  }
  .deal {
    padding: .875rem;
  }
  .deal-grip {
    opacity: 0.6;
  }

  /* autosearch: list / form become tabs */
  .pane-tabs {
    display: block;
    margin-bottom: .875rem;
  }
  .as-layout[data-pane='list'] .as-new,
  .as-layout[data-pane='new'] .as-list {
    display: none;
  }
  .srch-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chips.c-4 .chip {
    padding: 0 .25rem;
    font-size: .8125rem;
  }
  .src {
    padding: .875rem .25rem .75rem;
  }
  .src small {
    font-size: .6562rem;
  }

  /* settings: 5 backgrounds in one row, 7 glasses as 4 + 3 centred */
  .swatches.s-5 {
    gap: .5rem;
  }
  .swatches.s-5 .sw-face {
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
  }
  .swatches.s-7 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .875rem .625rem;
  }
  .swatches.s-7 .swatch {
    width: calc((100% - 1.875rem) / 4);
  }
  .sw-name {
    font-size: .7188rem;
  }
  .sw-check {
    width: 1.625rem;
    height: 1.625rem;
  }

  /* map: full-width map, cards swipe along its bottom edge */
  .map-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .map-tools .seg[data-seg='type'],
  .map-side {
    display: none;
  }
  .map-layout {
    display: block;
  }
  .map-card {
    height: max(25rem, calc(100dvh - var(--safe-t) - var(--safe-b) - 21.5rem));
    padding: .375rem;
  }
  .map-ctrl {
    top: .875rem;
    right: .875rem;
  }
  .map-strip {
    display: flex;
    position: absolute;
    z-index: 2;
    left: .375rem;
    right: .375rem;
    bottom: .875rem;
    gap: .5rem;
    padding: 0 .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 .75rem;
    scrollbar-width: none;
  }
  .map-strip::-webkit-scrollbar {
    display: none;
  }
  .map-strip .map-item {
    flex: 0 0 86%;
    scroll-snap-align: center;
    background: var(--glass-strong);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--edge);
    box-shadow: 0 .875rem 1.75rem -1rem rgb(0 0 0 / 0.55);
  }
  .map-strip .map-item.on {
    box-shadow:
      inset 0 0 0 1.5px var(--ink-2),
      0 .875rem 1.75rem -1rem rgb(0 0 0 / 0.55);
  }

  /* contracts: maker and register are two tabs */
  .ct-panes[data-pane='new'] .ct-layout,
  .ct-panes[data-pane='list'] .doc-maker {
    display: none;
  }
  .doc-maker {
    gap: 1.25rem;
  }
  .dm-types .src {
    padding: .75rem 1.75rem .75rem .625rem;
    column-gap: .5rem;
    grid-template-columns: 2.375rem minmax(0, 1fr);
  }
  .dm-types .src-ic {
    width: 2.375rem;
    height: 2.375rem;
  }
  .dm-types .src b {
    font-size: .8125rem;
  }
  .tg-code span {
    font-size: 3rem;
    border-radius: 1.125rem;
  }
  .tg-status {
    flex-wrap: wrap;
    row-gap: .125rem;
  }
  .tg-left {
    flex-basis: 100%;
    padding-left: 1.625rem;
  }
  /* code screen: «Відкрити Telegram» first and full width */
  .login-pane .btn-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .login-pane .btn-grid .tg-btn {
    order: -1;
  }
  .dm-types .src small {
    display: none;
  }
  .dm-types .src {
    grid-template-rows: auto;
  }
  .dm-types .src-ic {
    grid-row: auto;
  }
  .dm-types .src b {
    align-self: center;
  }
  .ct-reg .card-head > div:first-child {
    flex-basis: 100%;
  }
  .ct-reg .card-head .search-field {
    flex: 1 1 0;
    min-width: 0;
  }
  /* the solid fill already marks the chosen type */
  .dm-types .src-check {
    display: none;
  }

  /* contracts: filter scrolls sideways */
  .ct-seg button {
    padding: 0 .75rem;
  }
  .att-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  }
  .att-row .btn {
    width: auto;
    padding: 0 .875rem;
  }
  .att-row .btn .ic {
    display: none;
  }
  .ct-hero-date {
    font-size: 1.3125rem;
  }

  /* login: the top bar and the card, centred in what is left of the screen */
  .login {
    padding-top: calc(var(--safe-t) + .625rem);
    padding-bottom: calc(var(--safe-b) + 1.25rem);
  }
  .login-stage {
    margin-top: 0;
    padding: 1.25rem 0 0;
    min-height: calc(100vh - var(--safe-t) - var(--safe-b) - 5.75rem);
    min-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 5.75rem);
  }
  .login-card {
    padding: 1.75rem 1.25rem 1.25rem;
  }
  .login-head h1 {
    font-size: 1.875rem;
  }
}

/* ==========================================================================
   Price per m², floor plan, price gauge, offers, sale stages, documents
   ========================================================================== */
.prop-price .m2 {
  margin-left: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.map-item-main .m2 {
  font-style: normal;
  font-weight: 600;
  font-size: .75rem;
  color: var(--muted);
}
.match-price small,
.comp-price small {
  display: block;
  margin-top: .0625rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.match-price {
  text-align: right;
}
.hist-sum small + b + small {
  display: block;
  margin-top: .0625rem;
  white-space: nowrap;
}
.deal-m2 {
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
}
.sum-m2 {
  font-weight: 600;
  color: var(--ink-2);
}

/* the map pin carries two lines: price and per m² */
.pin {
  flex-direction: column;
  align-items: center;
  gap: .1875rem;
  border-radius: .875rem;
  padding: .375rem .625rem;
}
.pin-top {
  display: inline-flex;
  align-items: baseline;
  gap: .125rem;
}
.pin-m2 {
  font-size: .625rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}
.pin small {
  opacity: 0.85;
}
.pin-wrap.on .pin-m2 {
  color: inherit;
}
.map-canvas.far .pin {
  padding: .25rem .4375rem;
  border-radius: .625rem;
}
.map-canvas.far .pin-m2 {
  font-size: .5625rem;
}

.affix.cur b + .input {
  padding-left: 2.625rem;
}

/* ------------------------------------------------- gallery + floor plan -- */
.property .gal-view {
  aspect-ratio: 3 / 2;
}
.gal-actions {
  position: absolute;
  z-index: 2;
  top: .875rem;
  right: .875rem;
  display: flex;
  gap: .375rem;
}
.gal-actions .pill-glass {
  position: static;
  height: 2.125rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.gal-actions .pill-glass:hover {
  background: rgb(18 18 22 / 0.6);
}
.gal-expand {
  width: 2.125rem;
  justify-content: center;
  padding: 0;
}
.gal-plan {
  display: grid;
  place-items: center;
  padding: 3.25rem 1.25rem 2.75rem;
  background: #fbfaf7;
}
.gal-plan .plan-svg,
.gal-plan img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.gal-view.on-plan .gal-count,
.gal-view.on-plan .gal-actions .pill-glass {
  background: rgb(18 18 22 / 0.72);
}
.gal-view.on-plan .gal-plan-btn {
  display: none;
}
.gal-thumbs .thumb-plan {
  display: grid;
  place-items: center;
  padding: .25rem;
  background: #fbfaf7;
}
.thumb-plan .plan-svg {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------- price gauge -- */
.gauge {
  display: grid;
  justify-items: center;
  gap: .375rem;
  margin-bottom: 1rem;
}
.gauge-svg {
  display: block;
  width: min(100%, 20rem);
  height: auto;
}
.g-track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 14;
  stroke-linecap: round;
}
.g-fill {
  fill: none;
  stroke-width: 14;
}
.g-fill.g-below { stroke: var(--green); }
.g-fill.g-above { stroke: var(--amber); }
.g-fill.g-high { stroke: var(--red); }
.g-market {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.g-needle {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.g-hub {
  fill: var(--ink);
  stroke: var(--on-solid);
  stroke-width: 2;
}
.g-min {
  fill: var(--on-solid);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.g-scale text {
  font-size: 12px;
  font-weight: 500;
  fill: var(--muted);
}
.gauge-verdict {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .875rem;
  border-radius: 62.4375rem;
  font-size: 1rem;
}
.gauge-verdict b {
  font-weight: 700;
}
.gauge-verdict.g-below { background: var(--green-bg); color: var(--green); }
.gauge-verdict.g-at { background: var(--soft-2); color: var(--ink); }
.gauge-verdict.g-above { background: var(--amber-bg); color: var(--amber); }
.gauge-verdict.g-high { background: var(--red-bg); color: var(--red); }
.pg-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.pg-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .625rem .625rem .5625rem;
  border-radius: var(--r-sm);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pg-label {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-2);
}
.pg-mark {
  flex-shrink: 0;
  margin-top: .125rem;
  width: .625rem;
  height: .625rem;
}
.pg-mark.m-ours {
  width: .1875rem;
  margin: .0625rem .1875rem 0;
  height: .75rem;
  border-radius: .125rem;
  background: var(--ink);
}
.pg-mark.m-market {
  width: .75rem;
  height: .125rem;
  margin-top: .3125rem;
  border-radius: .125rem;
  background: var(--ink);
}
.pg-mark.m-min {
  border: .125rem solid var(--ink);
  border-radius: .125rem;
  rotate: 45deg;
  width: .5625rem;
  height: .5625rem;
}
.pg-tile > b {
  margin-top: .375rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
.pg-tile > b small {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.pg-m2 {
  margin-top: .0625rem;
  font-size: .75rem;
  color: var(--muted);
}
.pg-note {
  display: flex;
  align-items: flex-start;
  gap: .4375rem;
  margin-top: .75rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--muted);
}
.pg-note svg {
  margin-top: .0625rem;
}

/* --------------------------------------------------------------- offers -- */
.offers {
  display: grid;
}
.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 8.5rem);
  gap: .75rem;
  align-items: center;
  width: 100%;
  padding: .625rem .5rem;
  border-radius: .875rem;
  text-align: left;
  transition: background-color 0.2s;
}
button.offer-row:hover {
  background: var(--soft);
}
button.offer-row + button.offer-row {
  border-top: 1px solid var(--line);
  border-radius: 0 0 .875rem .875rem;
}
.offer-row.head {
  padding-top: 0;
  padding-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}
.offer-who {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}
.offer-who > span:last-child {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.offer-who b {
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offer-who small,
.offer-sum > small,
.offer-pct > small {
  font-size: .75rem;
  color: var(--muted);
}
.offer-sum,
.offer-pct {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}
.offer-sum b,
.offer-pct b {
  font-size: .875rem;
  font-weight: 700;
}
.offer-sum b small {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--muted);
}
.offer-pct > small.offer-low {
  display: inline-flex;
  align-items: center;
  gap: .1875rem;
  color: var(--red);
  font-weight: 600;
}
.offer-row.offer-declined .offer-who b,
.offer-row.offer-declined .offer-sum b {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.offer-status {
  justify-self: end;
  min-width: 0;
}
.o-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  max-width: 100%;
  padding: .25rem .625rem;
  border-radius: 62.4375rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.o-pill i {
  flex-shrink: 0;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: currentColor;
}
.o-new { background: var(--blue-bg); color: var(--blue); }
.o-review { background: var(--amber-bg); color: var(--amber); }
.o-counter { background: var(--violet-bg); color: var(--violet); }
.o-accepted { background: var(--green-bg); color: var(--green); }
.o-declined { background: var(--soft-2); color: var(--ink-2); }
.offer-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.offer-states .chip:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------- sale stages -- */
.stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stage {
  position: relative;
  min-width: 0;
}
.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.625rem;
  right: -.625rem;
  width: .625rem;
  height: 2px;
  background: var(--line-2);
}
.stage.done:not(:last-child)::after {
  background: var(--green);
}
.stage button {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  width: 100%;
  height: 100%;
  padding: .75rem;
  border-radius: var(--r-md);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: left;
  transition:
    background-color 0.2s,
    transform 0.3s var(--spring);
}
.stage button:hover {
  background: var(--soft-2);
}
.stage button:active {
  transform: scale(0.98);
}
.stage-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .8125rem;
  font-weight: 700;
}
.stage.done .stage-mark {
  background: var(--green);
  color: #fff;
  box-shadow: none;
}
[data-ink='light'] .stage.done .stage-mark {
  color: #052e16;
}
.stage > button > b {
  font-size: .9375rem;
  font-weight: 650;
}
.stage-agent {
  display: flex;
  align-items: center;
  gap: .4375rem;
  min-width: 0;
}
.stage-agent > span:last-child {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.stage-agent em {
  font-style: normal;
  font-size: .8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-agent small {
  font-size: .75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-date {
  font-size: .75rem;
  color: var(--muted);
}
.stage.now button {
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: none;
}
.stage.now .stage-mark {
  background: var(--on-solid);
  color: var(--solid);
  box-shadow: none;
}
.stage.now .stage-agent small,
.stage.now .stage-date {
  color: inherit;
  opacity: 0.85;
}
.stage-people {
  display: grid;
  gap: .5rem;
}
.stage-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem .75rem;
  border-radius: var(--r-md);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}
.stage-person > span:nth-child(2) {
  flex: 1;
  display: grid;
  line-height: 1.25;
}
.stage-person small {
  font-size: .75rem;
  color: var(--muted);
}
.stage-person .src-check {
  opacity: 0;
}
.stage-person.on {
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background: var(--soft-2);
}
.stage-person.on .src-check {
  opacity: 1;
}

/* ------------------------------------------------- documents of a property -- */
.pdocs {
  display: grid;
}
.pdoc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .625rem;
  align-items: center;
  padding: .625rem 0;
}
.pdoc + .pdoc {
  border-top: 1px solid var(--line);
}
.pdoc-ic {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pdoc-main {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.pdoc-main b {
  font-size: .875rem;
  font-weight: 600;
}
.pdoc-main small {
  font-size: .75rem;
  color: var(--muted);
}
.pdoc .btn.busy {
  opacity: 0.6;
  pointer-events: none;
}
.pdoc > .btn:last-child:nth-child(3) {
  grid-column: 3 / span 2;
}

/* samples and plans on the A4 page */
.doc-sample {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1.5px solid #b3261e;
  border-radius: 6px;
  color: #b3261e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.doc-plan {
  height: 440px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid #d8d8d8;
}
.doc-plan .plan-svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) {
  .o-8 { order: 8; }
  .o-9 { order: 9; }
  .o-10 { order: 10; }
  .o-11 { order: 11; }
}
@media (max-width: 760px) {
  .property .gal-view {
    aspect-ratio: 4 / 3;
  }
  .gal-plan {
    padding: 3rem .5rem 2.5rem;
  }
  .stages {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage:not(:last-child)::after {
    top: auto;
    bottom: -.625rem;
    left: 1.625rem;
    right: auto;
    width: 2px;
    height: .625rem;
  }
  .stage button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .625rem;
  }
  .stage-agent {
    grid-column: 2 / -1;
  }
  .stage-date {
    grid-column: 3;
    grid-row: 1;
  }
  .offer-row.head {
    display: none;
  }
  .offer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .75rem;
    padding: .75rem .25rem;
  }
  .offer-pct {
    text-align: right;
  }
  .offer-status {
    grid-column: 2;
    grid-row: 1;
  }
  .offer-who {
    grid-column: 1;
    grid-row: 1;
  }
  .offer-sum {
    grid-column: 1;
    grid-row: 2;
  }
  .offer-pct {
    grid-column: 2;
    grid-row: 2;
  }
  .pdoc {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .pdoc .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .pdoc > .btn:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }
  .pg-tile > b {
    font-size: .875rem;
  }
}

/* 05.11: об'єкт без фото й без планування — спокійна заглушка замість порожньої галереї */
.gal-empty {
  display: grid;
  place-items: center;
  color: var(--text-3, rgba(0, 0, 0, 0.35));
  background: rgba(255, 255, 255, 0.18);
}