:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#282626;background:#f5f4f1}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
button,input,select{font:inherit}
button{cursor:pointer}

.app{width:100%;max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:#f5f4f1}
@media(min-width:481px){.app{box-shadow:0 0 28px #00000012}}

.sidebar{background:#fff;display:flex;flex-direction:column;position:relative;z-index:30}
.brand{display:flex;align-items:center;justify-content:center;padding:6px 16px;background:#fff;border-bottom:1px solid #f0eeeb}
.brand-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.brand-logo{display:block;height:36px;width:auto;max-width:100%;object-fit:contain}

.search-wrap{position:relative;padding:0}
.search-field{display:flex;align-items:center;gap:10px;background:#f8f7f5;border:1px solid #e2dfd9;border-radius:11px;padding:0 13px;color:#9b958e;height:50px;transition:border-color .2s,box-shadow .2s}
.search-wrap .search-field{height:52px;padding:0 14px;border-radius:0;border-left:0;border-right:0;border-top:0;border-bottom:1px solid #ece9e4;background:#faf9f7}
.search-field:focus-within{border-color:#f47713;box-shadow:0 0 0 3px #f4771320}
.search-field input{border:0;background:transparent;outline:none;min-width:0;width:100%;font-size:16px;color:#302b28}
.search-field input::placeholder{font-size:16px;color:#bab4ae;opacity:1}
.search-trigger,.search-trigger input{cursor:pointer}
.search-field kbd{background:#ece8e3;color:#555;cursor:pointer;padding:3px 6px;border-radius:6px}

.places{overflow:auto;flex:1;padding:6px 8px 10px;display:block;scrollbar-width:thin;scrollbar-color:#e8e1dc transparent}
.place{border:1px solid transparent;display:flex;align-items:center;gap:12px;width:100%;background:transparent;text-align:left;padding:9px 10px;border-radius:10px;font-size:13px;color:#47413d;transition:background .15s,border-color .15s}
.place:hover{background:#fff5eb}
.place.active{background:#fff1e4;border-color:#f9c89d;color:#c15100;font-weight:750}
.num{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:9px;background:#f5f3f0;color:#776e66;font-size:12px;font-weight:750}
.place.active .num{background:#f47713;color:#fff}
.place-text{flex:1;line-height:1.4}
.place-arrow{color:#cc8d5d;opacity:0}
.place:hover .place-arrow,.place.active .place-arrow{opacity:1}
.empty{padding:20px 14px;text-align:center;color:#999;line-height:1.5;font-size:13px}

.map-section{padding:0;display:flex;flex-direction:column;min-width:0;flex:1}

.map-stage{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.legend-modal{position:fixed;inset:0;z-index:100;background:#1d191680;backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:stretch}
.legend-dialog{width:100%;max-width:480px;height:100dvh;background:#fff;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:481px){
  .legend-modal{padding:16px}
  .legend-dialog{height:calc(100dvh - 32px);border-radius:18px;box-shadow:0 20px 50px #00000038}
}
.legend-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #f0eeeb}
.legend-title-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.legend-head strong{font-size:15px}
.legend-count{font-size:11px;background:#f6f1ec;color:#9a795d;padding:4px 9px;border-radius:99px;font-weight:650;white-space:nowrap}
.legend-search-wrap{padding:12px 16px;border-bottom:1px solid #f0eeeb;background:#fff}
.legend-close{border:0;background:#f5f3f0;color:#555;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.legend-close:hover{background:#ece8e3;color:#282626}

.map-container{position:relative;overflow:hidden;background:#e6e2dc;width:100%;flex:1;min-height:380px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}
.map-container:active{cursor:grabbing}
.map-layer{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;user-select:none;touch-action:none}
.map-layer img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}

.pin{position:absolute;display:flex;align-items:center;justify-content:center;background:#e94c10;color:white;font-weight:900;width:41px;height:41px;border:3px solid white;border-radius:50%;box-shadow:0 3px 18px #0005;transform:translate(-50%,-50%);z-index:1;font-size:14px;pointer-events:none}
.pin:before{content:"";position:absolute;inset:-10px;border-radius:100%;border:3px solid #ed610a80;animation:pulse 1.7s infinite}
.pin-label{position:absolute;bottom:calc(100% + 13px);white-space:nowrap;border-radius:9px;background:#29231f;color:#fff;padding:8px 13px;box-shadow:0 4px 16px #0004;font-size:13px;font-weight:650}
@keyframes pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}

.map-floor{position:absolute;top:10px;right:10px;background:#ffffffeb;box-shadow:0 1px 10px #0001;color:#e47313;padding:7px 11px;border-radius:9px;font-size:10px;font-weight:750;letter-spacing:1.4px;pointer-events:none;z-index:2}
.map-controls{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:5px}
.map-controls button{border:1px solid #e9e4de;background:#fff;border-radius:10px;width:38px;height:38px;color:#2e2a25;box-shadow:0 3px 15px #0002;font-size:24px}
.map-controls button:hover{color:#ee6900}
.map-status{position:absolute;bottom:10px;left:10px;background:#ffffffeb;box-shadow:0 1px 10px #0001;color:#625c56;padding:9px 11px;border-radius:9px;font-size:11px;max-width:calc(100% - 105px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}

.editor{background:#fff;border:1px solid #f6c796;border-radius:14px;margin:14px;padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.editor strong{font-size:14px}
.editor p{margin:6px 0 0;max-width:570px;font-size:12px;color:#716c65;line-height:1.5}
.editor-actions{display:flex;flex-wrap:wrap;gap:8px}
.editor select,.editor button{padding:9px 12px;border:1px solid #e5d5c7;border-radius:8px;background:#fff;font-size:12px}
.editor button{background:#ee760e;color:#fff;border-color:#ee760e;font-weight:650}
.editor button.outline{background:white;color:#ad590d}
.edit-feedback{flex-basis:100%;color:#b05c13;font-size:12px;min-height:15px}

@media(max-width:420px){
  .map-container{min-height:340px}
}
.pin[hidden],kbd[hidden],.legend-modal[hidden],.map-status[hidden]{display:none!important}