.matches-wrap { max-width: 1180px; margin: 0 auto; padding: 2.4rem 1.4rem 5rem; }
.matches-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.9rem;
}
.matches-tools { display: flex; align-items: center; gap: .6rem; }
.sort-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }

.matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 1.3rem; }
.match-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  opacity: 0; animation: cardIn .5s var(--ease) forwards; animation-delay: var(--delay, 0s);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.match-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--primary); }

.match-photo { position: relative; aspect-ratio: 16 / 10; background: var(--surface-3); }
.match-photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 2.6rem var(--font-display); color: var(--primary);
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
}
.score-ring { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.ring-track { fill: rgba(8, 13, 20, .74); stroke: rgba(255, 255, 255, .24); stroke-width: 3; }
.ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dasharray 1s var(--ease);
}
.ring-text { fill: #fff; font: 700 11px var(--font-mono); text-anchor: middle; }

.match-body { display: flex; flex-direction: column; gap: .65rem; flex: 1; padding: 1.05rem 1.15rem 1.2rem; }
.match-name { font: 700 1.18rem var(--font-display); }
.match-name span { color: var(--text-faint); font-weight: 600; }
.match-meta { display: flex; align-items: center; gap: .45rem; font-size: .73rem; color: var(--text-muted); letter-spacing: .03em; }
.match-rent { font: 700 1.02rem var(--font-mono); color: var(--primary); }
.match-rent small { color: var(--text-faint); font-weight: 400; font-size: .66rem; }
.trait-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.trait {
  font-size: .72rem; padding: .28rem .62rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.match-foot { margin-top: auto; }
.match-foot .btn { width: 100%; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 4.5rem 1rem; color: var(--text-muted); }
.empty-state .big { font: 700 1.55rem var(--font-display); color: var(--text); margin-bottom: .55rem; }
.empty-state .btn { margin-top: 1.2rem; }


.modal-head { position: relative; }
.modal-head img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.modal-head .avatar-lg { position: static; aspect-ratio: 16 / 8; }
.modal-body { display: grid; gap: 1.15rem; padding: 1.4rem 1.5rem 1.7rem; }
.modal-title { font: 700 1.5rem var(--font-display); }
.modal-title small { color: var(--text-faint); font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.detail-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; }
.detail-cell .mono {
  display: block; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-faint); margin-bottom: .3rem;
}
.detail-cell b { font-size: .95rem; font-weight: 600; }
.detail-desc { color: var(--text-muted); line-height: 1.65; font-size: .94rem; }
.phone-reveal { width: 100%; }
.phone-number { font: 700 1.15rem var(--font-mono); color: var(--accent); letter-spacing: .05em; }
.phone-note { font-size: .82rem; color: var(--text-faint); text-align: center; padding: .6rem; border: 1px dashed var(--border-strong); border-radius: 10px; }


.match-photo { overflow: hidden; }
.photo-track { display: flex; width: 100%; height: 100%; transition: transform .55s var(--ease); will-change: transform; }
.photo-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.photo-dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 5px; justify-content: center;
  padding: 16px 0 9px; background: linear-gradient(transparent, rgba(0,0,0,.5)); opacity: 0; transition: opacity .25s var(--ease); }
.match-photo:hover .photo-dots { opacity: 1; }
.photo-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 99px; background: rgba(255,255,255,.5);
  cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease); }
.photo-dot.on { width: 18px; background: #fff; }
@media (hover: none) { .photo-dots { opacity: 1; } }   


.modal-head .modal-close { z-index: 5; }
.modal-gallery { position: relative; }
.modal-head .mg-main { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; display: block; }
.mg-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 1.3rem; z-index: 3;
  backdrop-filter: blur(4px); transition: background .15s var(--ease); }
.mg-arrow.prev { left: 12px; } .mg-arrow.next { right: 12px; }
.mg-arrow:hover { background: rgba(0,0,0,.8); }
.mg-count { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.55); color: #fff;
  font: 600 .72rem var(--font-mono); padding: .25rem .6rem; border-radius: 99px; z-index: 3; }
.mg-zoom-hint { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff;
  font-size: .7rem; padding: .2rem .55rem; border-radius: 99px; z-index: 3; }
.mg-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; background: var(--surface); }
.modal-head .mg-thumb { width: 56px; height: 42px; aspect-ratio: auto; object-fit: cover; flex: none; cursor: pointer;
  opacity: .5; border: 2px solid transparent; border-radius: 8px; transition: .15s var(--ease); }
.modal-head .mg-thumb.on { opacity: 1; border-color: var(--primary); }
.modal-head .mg-thumb:hover { opacity: .9; }


.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.93); display: grid;
  place-items: center; animation: fadeIn .2s; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-size: 1.7rem; transition: background .15s; }
.lb-arrow:hover { background: rgba(255,255,255,.24); }
.lb-arrow.prev { left: 24px; } .lb-arrow.next { right: 24px; }
.lb-close { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; font-size: 1.2rem; transition: background .15s; }
.lb-close:hover { background: var(--danger); }
.lb-count { position: fixed; top: 28px; left: 24px; color: #fff; font: 600 .85rem var(--font-mono); }
.lb-dots { position: fixed; bottom: 26px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; }
.lb-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); cursor: pointer; transition: .2s var(--ease); }
.lb-dot.on { background: #fff; width: 22px; }


.modal.match-modal { width: min(1180px, 96vw); max-width: 1180px; }
.mm-hero {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 140px minmax(160px, 230px);
  gap: 1.1rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem; margin-bottom: .9rem;
}
.mm-avatar {
  border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 700; color: #fff; letter-spacing: .5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); user-select: none;
}
.mm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mm-ident { min-width: 0; }
.mm-strip { display: flex; gap: .4rem; margin-top: .6rem; overflow-x: auto; padding-bottom: .2rem; }
.mm-strip img {
  width: 54px; height: 42px; object-fit: cover; border-radius: 8px; cursor: zoom-in;
  border: 1px solid var(--border); flex: none; opacity: .88; transition: .15s var(--ease);
}
.mm-strip img:hover { opacity: 1; border-color: var(--border-strong); transform: translateY(-1px); }
.mm-ring { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.mm-hl { display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 860px) {
  .mm-hero { grid-template-columns: 72px minmax(0,1fr); }
  .mm-ring { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 1rem; }
  .mm-hl { grid-column: 1 / -1; }
}


.score-ring{ width:58px; height:58px; transform-origin:center; animation:rm-ring-pop .55s var(--ease, cubic-bezier(.22,1,.36,1)) both; }
.score-ring .ring-track{ stroke-width:3.6; opacity:.5; }
.score-ring .ring-fill{ stroke-width:3.6; transition:stroke-dasharray 1.05s cubic-bezier(.22,1,.36,1); }
.score-ring .ring-text{ font-size:15px; font-weight:800; }
@keyframes rm-ring-pop{ 0%{ transform:scale(.55); opacity:0; } 65%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }
.mm-hero{ grid-template-columns:108px minmax(0,1fr) 150px minmax(185px,250px); gap:1.25rem; }
.mm-strip img{ width:66px; height:52px; }
@media (max-width:860px){ .mm-hero{ grid-template-columns:84px minmax(0,1fr); } }