:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; height: 100dvh; margin: 0; overflow: hidden; background: #eef3f8; }
#map { width: 100%; height: 100%; height: 100dvh; }
.toolbar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(env(safe-area-inset-left, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); z-index: 1000; display: grid; gap: 7px; pointer-events: none; }
.search, .filter-btn, .retry-btn { pointer-events: auto; touch-action: manipulation; }
.search { width: 100%; min-height: 44px; border: 1px solid rgba(36,129,204,.22); border-radius: 10px; padding: 10px 12px; background: #fff; color: #111827; box-shadow: 0 5px 18px rgba(17,24,39,.14); font-size: 16px; }
.filters { display: flex; gap: 6px; }
.filter-btn { flex: 1; min-height: 40px; border: 1px solid rgba(36,129,204,.22); border-radius: 9px; background: #fff; color: #1f2937; font-size: 14px; font-weight: 700; box-shadow: 0 5px 16px rgba(17,24,39,.11); }
.rental-filters .filter-btn { min-height: 36px; font-size: 13px; }
.filter-btn.active { background: #2481cc; color: #fff; }
.status-pill { justify-self: start; max-width: min(100%,440px); border-radius: 9px; padding: 7px 10px; background: rgba(255,255,255,.96); color: #1f2937; font-size: 13px; font-weight: 700; box-shadow: 0 5px 16px rgba(17,24,39,.1); }
.loading-panel { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px; pointer-events: none; background: rgba(238,243,248,.78); }
.loading-panel[hidden] { display: none; }
.loading-card { width: min(100%,360px); border-radius: 16px; padding: 22px; text-align: center; background: #fff; color: #111827; box-shadow: 0 12px 35px rgba(17,24,39,.18); pointer-events: auto; }
.loading-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.loading-detail { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.45; }
.retry-btn { min-width: 132px; min-height: 44px; margin-top: 16px; border: 0; border-radius: 10px; background: #2481cc; color: #fff; font-size: 15px; font-weight: 800; }
#map .ymaps-2-1-79-balloon, #map .ymaps-2-1-79-balloon__layout, #map .ymaps-2-1-79-balloon__content { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#map .ymaps-2-1-79-balloon__content { margin: 0 !important; padding: 0 !important; }
#map .ymaps-2-1-79-balloon__close-button, #map .ymaps-2-1-79-balloon__tail { display: none !important; }
.popup-content { min-width: 0; padding: 2px; font-size: 14px; line-height: 1.4; }
.popup-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; border: 1px solid rgba(255,255,255,.94); border-radius: 999px; padding: 6px 11px; text-align: center; text-decoration: none; white-space: nowrap; background: linear-gradient(135deg,#168fe0,#087bc8); color: #fff !important; box-shadow: 0 4px 12px rgba(0,96,166,.28); font-size: 13px; font-weight: 800; transform-origin: 50% 100%; animation: max-action-reveal .18s cubic-bezier(.2,.85,.3,1); transition: transform .08s ease; -webkit-tap-highlight-color: transparent; }
.popup-btn:active { transform: scale(.97); }
@keyframes max-action-reveal { 0% { opacity: .55; transform: translateY(4px) scale(.78); } 72% { opacity: 1; transform: translateY(-1px) scale(1.025); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .popup-btn { animation: none; transition: none; } }
.popup-info-status { border-radius: 999px; padding: 7px 11px; background: #fff; color: #6b7280; font-size: 12px; font-weight: 700; }
.price-marker-wrapper { background: none; border: 0; }
.price-marker { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 66px; height: 34px; border: 2px solid #fff; border-radius: 18px; padding: 0 11px; white-space: nowrap; background: #1595e7; color: #fff; box-shadow: 0 3px 10px rgba(17,24,39,.24); font-size: 14px; font-weight: 800; }
.price-marker::after { position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: #1595e7; content: ""; transform: translateX(-50%) rotate(45deg); }
@media (max-width: 430px) { .toolbar { gap: 6px; } .filter-btn { font-size: 13px; } }