:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #252623;
  background: #dfded8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #252623;
  --muted: #878980;
  --line: #ecece7;
  --paper: #fffefa;
  --accent: #b74c31;
  --accent-soft: #f7e9e3;
  --green: #566a4f;
  --shadow: 0 16px 56px rgb(26 29 27 / 17%), 0 2px 8px rgb(26 29 27 / 7%);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #d6957f;
  outline-offset: 2px;
}

.experience { position: relative; width: 100%; height: 100dvh; min-height: 560px; overflow: hidden; background: #e5e4df; }
.map { position: absolute; inset: 0; z-index: 0; background: #e5e4df; }
.map-place-marker-overlay { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.map-place-marker-overlay[hidden] { display: none; }
.map-place-pin { position: absolute; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; color: #292922; background: transparent; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; transform: translate(-50%, -100%); }
.map-place-pin.is-editable { cursor: grab; }
.map-place-pin:hover { z-index: 3; }
.map-place-pin.is-dragging { z-index: 8; cursor: grabbing; }
.map-place-pin-label { max-width: 95px; margin-bottom: var(--manual-map-pin-label-gap, 3px); overflow: hidden; border: 1px solid rgb(255 255 255 / 70%); border-radius: 3px; color: #263a34; background: rgb(255 254 250 / 62%); box-shadow: 0 1px 4px rgb(38 34 29 / 12%); font-size: 5.5px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; padding: 2px 3.5px; transform: scale(var(--manual-map-pin-label-scale, 1)); transform-origin: 50% 100%; transition: transform 120ms ease-out; }
.map-place-pin.is-selected .map-place-pin-label { border-color: #ad7044; color: #8e452f; }
.map-place-pin-symbol { display: block; width: 16px; height: 20px; filter: drop-shadow(0 2px 3px rgb(48 31 23 / 38%)); overflow: visible; transform: scale(var(--manual-map-pin-scale, 1)); transform-origin: 50% 100%; transition: transform 120ms ease-out; }
.map-place-pin-symbol path { fill: #527a69; }
.map-place-pin-symbol circle { fill: #fff; }
.map-place-pin.is-selected .map-place-pin-symbol path { fill: #b08341; }
.map-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(25 28 27 / 14%) 0, transparent 150px); }
.topbar { position: absolute; z-index: 5; inset: 20px 24px auto; display: flex; align-items: center; gap: 28px; min-height: 64px; padding: 10px 14px 10px 18px; border: 1px solid rgb(255 255 255 / 76%); border-radius: 18px; background: rgb(255 254 250 / 95%); box-shadow: 0 8px 28px rgb(30 34 31 / 14%); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: 0 0 208px; }
.brand-seal { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #fffaf4; background: var(--accent); font-family: "Noto Sans SC", sans-serif; font-size: 19px; font-weight: 700; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 17px; letter-spacing: .05em; }
.brand-copy small { color: #8e8e85; font-size: 10px; letter-spacing: .045em; }
.search-shell { display: flex; align-items: center; gap: 10px; width: min(590px, 48vw); height: 42px; padding: 0 12px; border: 1px solid #e8e8e1; border-radius: 11px; color: #a0a098; background: #f7f7f3; }
.search-icon { display: inline-flex; align-items: center; color: #74766f; font-size: 25px; line-height: 1; transform: rotate(-20deg); }
.search-shell input { width: 100%; min-width: 40px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-shell input::placeholder { color: #9c9c93; }
.search-shell kbd { padding: 3px 5px; border: 1px solid #deded6; border-radius: 5px; color: #8c8d83; background: white; font-size: 9px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.live-indicator { display: inline-flex; align-items: center; gap: 8px; color: #70756d; font-size: 11px; white-space: nowrap; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #b5a77a; box-shadow: 0 0 0 3px rgb(181 167 122 / 16%); }
.live-indicator.is-live i { background: #638f61; box-shadow: 0 0 0 3px rgb(99 143 97 / 16%); }
.live-indicator.is-error i { background: #bd543d; box-shadow: 0 0 0 3px rgb(189 84 61 / 16%); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; color: #5f625a; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; }
.icon-button:hover { color: var(--ink); background: #f0f0ea; }
.fullscreen-button { width: 37px; height: 37px; border: 1px solid #ecece6; color: #555950; background: #fffefa; font-size: 21px; }
.edit-mode-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 70px; height: 37px; padding: 0 10px; border: 1px solid #e8e8e1; border-radius: 10px; color: #555950; background: #fffefa; cursor: pointer; font-size: 11px; transition: background .15s, border-color .15s, color .15s; }
.edit-mode-button:hover { border-color: #d7b4a5; color: var(--accent); background: #fffaf7; }
.edit-mode-button.is-active { border-color: #394238; color: #fffefa; background: #394238; }
.edit-mode-button > span:first-child { font-size: 16px; line-height: 1; }
.add-map-place-button { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; height: 37px; padding: 0 10px; border: 1px solid #dce4e0; border-radius: 10px; color: #426a62; background: #f7faf8; cursor: pointer; font-size: 10px; white-space: nowrap; }
.add-map-place-button:hover { border-color: #96b5ad; background: #edf4f1; }
.add-map-place-button[hidden] { display: none; }
.map-edit-hint { position: absolute; z-index: 3; top: 102px; left: 50%; max-width: calc(100vw - 32px); padding: 10px 15px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 999px; color: #fffefa; background: rgb(49 56 49 / 94%); box-shadow: 0 6px 22px rgb(22 25 22 / 20%); font-size: 11px; text-align: center; transform: translateX(-50%); }
.map-edit-hint[hidden] { display: none; }
.experience.is-location-placing, .experience.is-location-placing .map { cursor: crosshair; }

.panel { border: 1px solid rgb(255 255 255 / 90%); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.directory { position: absolute; z-index: 4; top: 104px; bottom: 24px; left: 24px; display: flex; flex-direction: column; width: 356px; padding: 21px 20px 14px; overflow: hidden; transition: transform .22s ease; }
.experience.directory-collapsed .directory { transform: translateX(calc(-100% - 32px)); }
.directory-toggle { position: absolute; z-index: 6; top: 50%; left: 380px; display: grid; place-items: center; width: 32px; height: 54px; padding: 0; border: 1px solid rgb(255 255 255 / 92%); border-radius: 0 12px 12px 0; color: #5f625a; background: var(--paper); box-shadow: 4px 3px 14px rgb(25 28 27 / 12%); cursor: pointer; font-size: 27px; line-height: 1; transform: translateY(-50%); transition: left .22s ease, color .15s, background .15s; }
.directory-toggle:hover { color: var(--accent); background: #f7f6f1; }
.experience.directory-collapsed .directory-toggle { left: 12px; border-radius: 0 12px 12px 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.eyebrow { margin: 0 0 7px; color: #a2a196; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.panel-heading h1 { margin: 0; font-family: "Noto Sans SC", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.055em; }
.panel-close { display: none; }
.intro { margin: 9px 0 17px; color: #76786f; font-size: 11px; line-height: 1.7; }
.text-button { padding: 3px 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 10px; white-space: nowrap; }
.text-button:hover { color: #893820; text-decoration: underline; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 18px; padding: 0 2px; }
.stats-row div { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 1px solid #eaeae4; }
.stats-row div:first-child { padding-left: 0; border-left: 0; }
.stats-row strong { color: #2d302b; font-size: 18px; font-weight: 600; letter-spacing: -.05em; }
.stats-row span { color: #909188; font-size: 9px; }
.directory-toolbar { display: flex; align-items: center; justify-content: space-between; }
.category-filters { display: flex; gap: 6px; margin: 10px 0 14px; overflow-x: auto; scrollbar-width: none; }
.category-filters::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; padding: 6px 11px; border: 1px solid #e9e9e3; border-radius: 999px; color: #77796f; background: #fff; cursor: pointer; font-size: 10px; transition: background .16s, color .16s, border-color .16s; }
.filter-chip:hover { border-color: #cfb8ad; }
.filter-chip.active { border-color: #333831; color: #fffdf9; background: #333831; }
.directory-toolbar { min-height: 28px; padding-bottom: 8px; color: #898a82; font-size: 10px; }
.sort-button { color: #77786f; }
.sort-button span { color: var(--accent); font-size: 12px; }
.merchant-list { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 60px; overflow: auto; padding-right: 4px; scrollbar-color: #e1e0d8 transparent; scrollbar-width: thin; }
.merchant-row { display: flex; align-items: center; width: 100%; min-height: 57px; padding: 9px 8px; border: 0; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; transition: background .14s, transform .14s; }
.merchant-row:hover { background: #f6f5f0; }
.merchant-row.selected { background: #f7eee9; }
.merchant-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 11px; color: #8e4c37; background: #f5e9e3; font-size: 13px; font-weight: 600; }
.merchant-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.merchant-copy strong { overflow: hidden; color: #393a35; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.merchant-meta { display: flex; align-items: center; gap: 6px; overflow: hidden; color: #96968d; font-size: 9px; }
.merchant-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-meta .meta-floor { color: #aa644b; }
.merchant-arrow { margin-left: 8px; color: #b5b4ac; font-size: 17px; }
.empty-state { display: grid; flex: 1; place-content: center; gap: 8px; min-height: 160px; color: #888980; text-align: center; }
.empty-state strong { color: #54574f; font-size: 12px; }
.empty-state span { font-size: 10px; line-height: 1.7; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; color: #a09f95; font-size: 9px; }
.panel-footer-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.panel-footer-actions button { padding: 5px 0; white-space: nowrap; }
.panel-footer-actions button[hidden] { display: none; }

.detail-panel { position: absolute; z-index: 4; top: 112px; right: 24px; width: 325px; max-height: calc(100% - 136px); padding: 22px 20px 18px; overflow: auto; }
.detail-close { position: absolute; top: 12px; right: 12px; }
.install-help-dialog { width: min(390px, calc(100vw - 32px)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 20px; color: var(--ink); background: transparent; box-shadow: var(--shadow); }
.install-help-dialog::backdrop { background: rgb(20 23 21 / 48%); backdrop-filter: blur(4px); }
.install-help-card { position: relative; padding: 28px 24px 24px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 20px; background: var(--paper); }
.install-help-card h2 { margin: 0 30px 10px 0; font-size: 19px; }
.install-help-card > p:last-child { margin: 0; color: #6c6d66; font-size: 13px; line-height: 1.8; }
.install-help-close { position: absolute; top: 10px; right: 10px; }
.admin-password-dialog { width: min(420px, calc(100vw - 32px)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 20px; color: var(--ink); background: transparent; box-shadow: var(--shadow); }
.admin-password-dialog::backdrop { background: rgb(20 23 21 / 52%); backdrop-filter: blur(4px); }
.admin-password-card { position: relative; display: grid; gap: 12px; margin: 0; padding: 28px 24px 22px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 20px; background: var(--paper); }
.admin-password-card .eyebrow { margin-bottom: -5px; }
.admin-password-card h2 { margin: 0 30px 2px 0; font-size: 19px; }
.admin-password-close { position: absolute; top: 10px; right: 10px; }
.admin-password-field { display: grid; gap: 6px; color: #77796f; font-size: 11px; }
.admin-password-field input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #e6e5de; border-radius: 9px; color: #383a34; background: #fff; font-size: 14px; }
.admin-password-field input:focus { border-color: #bb8b77; outline: 2px solid rgb(183 76 49 / 12%); }
.admin-password-note { margin: 0; color: #81837a; font-size: 10px; line-height: 1.7; }
.admin-password-error { margin: 0; color: #a33d30; font-size: 11px; line-height: 1.5; }
.admin-password-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }
.admin-password-actions button { min-height: 38px; padding: 0 13px; border: 1px solid #e3e2da; border-radius: 9px; background: #fffefa; cursor: pointer; font-size: 11px; }
.admin-password-actions .admin-password-submit { border-color: #394238; color: #fffefa; background: #394238; }
.admin-password-actions button:disabled { opacity: .55; cursor: wait; }
.detail-category { display: inline-block; margin: 0 0 12px; padding: 5px 8px; border-radius: 6px; color: #8e523d; background: #f8ebe5; font-size: 9px; }
.detail-panel h2 { max-width: 250px; margin: 0 0 5px; color: #30322d; font-size: 21px; font-weight: 600; letter-spacing: -.04em; line-height: 1.4; }
.detail-address { margin: 0; color: #81837a; font-size: 10px; line-height: 1.7; }
.detail-divider { height: 1px; margin: 17px 0; background: #eeeee8; }
.detail-section-title { margin: 0 0 10px; color: #686a62; font-size: 10px; font-weight: 600; }
.detail-info { display: flex; flex-direction: column; gap: 10px; }
.merchant-editor { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.editor-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: #77796f; font-size: 9px; }
.editor-field input, .editor-field textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #e6e5de; border-radius: 8px; color: #383a34; background: #fff; font-size: 11px; }
.editor-field input { height: 36px; }
.editor-field textarea { min-height: 68px; resize: vertical; line-height: 1.6; }
.editor-field input:focus, .editor-field textarea:focus { border-color: #bb8b77; outline: 2px solid rgb(183 76 49 / 12%); }
.editor-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.editor-coordinate-row { gap: 6px; }
.editor-actions { display: flex; align-items: center; gap: 12px; }
.editor-clear-location { margin-left: auto; }
.editor-note { margin: -3px 0 0; color: #9a998f; font-size: 9px; line-height: 1.7; }
.editor-save-actions { margin-top: 2px; }
.editor-save-actions > button { flex: 1; padding: 0 9px; }
.editor-title { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.info-row { display: flex; justify-content: space-between; gap: 12px; color: #9a9a90; font-size: 10px; }
.info-row strong { color: #4e504a; font-weight: 500; text-align: right; }
.accuracy-badge { display: inline-flex; align-items: center; gap: 6px; color: #547057 !important; }
.accuracy-badge::before { width: 5px; height: 5px; border-radius: 50%; background: #6c966b; content: ""; }
.accuracy-badge.is-building { color: #977351 !important; }
.accuracy-badge.is-building::before { background: #bd9764; }
.accuracy-badge.is-missing { color: #a16655 !important; }
.accuracy-badge.is-missing::before { background: #b96d54; }
.detail-description { margin: 0; color: #777970; font-size: 11px; line-height: 1.8; }
.detail-actions { display: flex; gap: 8px; margin-top: 18px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer; font-size: 10px; }
.primary-button { border: 1px solid #333831; color: #fffdf9; background: #333831; }
.primary-button:hover { background: #1d211d; }
.secondary-button { border: 1px solid #e9e8e1; color: #64665e; background: #fff; }
.secondary-button:hover { background: #f5f4ee; }

.building-panel { position: absolute; z-index: 4; top: 112px; right: 24px; width: 332px; max-height: calc(100% - 136px); padding: 18px; overflow: auto; }
.building-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.building-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.select-label, .floor-header { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: #88897f; font-size: 9px; }
.building-panel select { width: 100%; height: 37px; margin-top: 7px; padding: 0 10px; border: 1px solid #e9e9e2; border-radius: 9px; color: #4e5049; background: #fff; font-size: 11px; }
.floor-header { margin-top: 15px; }
.floor-header span { color: #5c5e56; font-size: 10px; font-weight: 600; }
.floor-header small { color: #a09f95; font-size: 9px; }
.floor-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.floor-tab { min-width: 45px; padding: 6px 10px; border: 1px solid #e9e9e2; border-radius: 8px; color: #7d7f75; background: #fff; cursor: pointer; font-size: 10px; }
.floor-tab.active { border-color: #a84a31; color: #fffaf6; background: #b74c31; }
.floor-tab span { margin-left: 4px; color: inherit; opacity: .68; font-size: 8px; }
.floor-plan-area { min-height: 190px; margin-top: 13px; padding: 12px; border: 1px dashed #deddd4; border-radius: 11px; background: #faf9f5; }
.floor-plan-caption { display: flex; align-items: center; gap: 6px; color: #7b7d74; font-size: 9px; }
.floor-plan-icon { color: #a75036; font-size: 14px; }
.floor-results { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.floor-map { position: relative; min-height: 190px; overflow: hidden; border: 1px solid #e7e5dc; border-radius: 9px; background-color: #f4f3ed; background-image: linear-gradient(#e4e2d8 1px, transparent 1px), linear-gradient(90deg, #e4e2d8 1px, transparent 1px); background-size: 24px 24px; }
.floor-map::before { position: absolute; inset: 10px; border: 1px solid #d6d3c7; border-radius: 4px; content: ""; pointer-events: none; }
.floor-map-pin { position: absolute; top: var(--y); left: var(--x); max-width: 118px; overflow: hidden; padding: 5px 7px; border: 1px solid #d4a28c; border-radius: 6px; color: #783c2b; background: #fffaf6; box-shadow: 0 2px 6px rgb(50 40 32 / 10%); cursor: pointer; font-size: 8px; text-overflow: ellipsis; transform: translate(-50%, -50%); white-space: nowrap; }
.floor-map-pin:hover { color: #fffaf6; background: #a84a31; }
.floor-position-note { padding-top: 5px; color: #a09f95; text-align: right; font-size: 8px; }
.floor-merchant { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #eeede6; border-radius: 8px; color: #44463f; background: white; text-align: left; cursor: pointer; }
.floor-merchant:hover { border-color: #d5b4a6; }
.floor-merchant strong { flex: 1; overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.floor-merchant small { color: #99998f; font-size: 8px; }
.floor-empty { padding: 20px 8px 15px; color: #8e8f85; text-align: center; font-size: 10px; line-height: 1.7; }
.floor-disclaimer { margin: 12px 0 0; color: #aaa99f; font-size: 8px; line-height: 1.7; }

.map-controls { position: absolute; z-index: 3; right: 24px; bottom: 42px; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.zoom-control { display: flex; flex-direction: column; width: 42px; overflow: hidden; border: 1px solid rgb(255 255 255 / 90%); border-radius: 12px; background: var(--paper); box-shadow: 0 5px 20px rgb(25 28 27 / 15%); }
.zoom-control button, .map-control-button { display: grid; place-items: center; width: 42px; height: 39px; padding: 0; border: 0; color: #51544d; background: var(--paper); cursor: pointer; font-size: 21px; }
.zoom-control button:hover, .map-control-button:hover { color: var(--accent); background: #f4f3ed; }
.zoom-control > span { height: 1px; margin: 0 9px; background: #ecebe5; }
.map-control-button { width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 12px; box-shadow: 0 5px 20px rgb(25 28 27 / 15%); font-size: 22px; }
.map-attribution { position: absolute; z-index: 2; right: 80px; bottom: 8px; color: #65675f; font-size: 8px; text-shadow: 0 1px 2px white, 1px 0 2px white; }
.map-message { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; width: min(360px, calc(100vw - 40px)); padding: 27px 25px 24px; border: 1px solid rgb(255 255 255 / 92%); border-radius: 16px; color: #62645c; background: rgb(255 254 250 / 96%); box-shadow: 0 16px 60px rgb(33 35 30 / 19%); text-align: center; transform: translate(-50%, -35%); transition: opacity .2s, transform .2s; }
.map-message[hidden] { display: none; }
.message-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 14px; color: #9d5038; background: #f6e8e2; font-size: 21px; }
.map-message strong { margin-bottom: 7px; color: #393b35; font-size: 13px; font-weight: 600; }
.map-message > span:last-child { max-width: 270px; color: #898a81; font-size: 10px; line-height: 1.8; }
.mobile-directory-toggle { display: none; }
.toast { position: fixed; z-index: 20; bottom: 25px; left: 50%; padding: 10px 15px; border-radius: 9px; color: #fff; background: rgb(34 38 34 / 92%); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.map-pin { display: flex; align-items: center; gap: 6px; width: max-content; padding: 5px 8px 5px 5px; border: 1px solid rgb(255 255 255 / 94%); border-radius: 999px; color: #fff; background: #3d463b; box-shadow: 0 3px 12px rgb(22 26 21 / 22%); cursor: pointer; font: 500 10px/1 "Noto Sans SC", sans-serif; white-space: nowrap; transition: transform .15s, background .15s; }
.map-pin:hover, .map-pin.is-selected { background: #b74c31; transform: translateY(-2px); }
.map-pin .pin-dot { width: 8px; height: 8px; border-radius: 50%; background: #e6b49c; box-shadow: 0 0 0 2px rgb(255 255 255 / 22%); }
.map-pin.is-address .pin-dot { background: #d4bf8e; }

@media (max-width: 1000px) {
  .topbar { gap: 14px; }
  .brand { flex-basis: 170px; }
  .directory { width: 330px; }
  .directory-toggle { left: 354px; }
  .detail-panel, .building-panel { right: 18px; }
}

@media (max-width: 720px) {
  .experience { min-height: 520px; }
  .topbar { inset: calc(10px + env(safe-area-inset-top)) 10px auto; min-height: 54px; gap: 9px; padding: 7px 8px 7px 11px; border-radius: 14px; }
  .brand { flex: 0 0 41px; gap: 0; }
  .brand-seal { width: 37px; height: 37px; border-radius: 11px; }
  .brand-copy { display: none; }
  .search-shell { flex: 1; width: auto; height: 38px; gap: 6px; padding: 0 8px; }
  .search-shell input { font-size: 11px; }
  .search-shell kbd { display: none; }
  .top-actions { gap: 7px; }
  .live-indicator { gap: 5px; max-width: 84px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .live-indicator > span { display: none; }
  .live-indicator i { flex: 0 0 6px; width: 6px; height: 6px; }
  .add-map-place-button { width: 30px; min-width: 30px; height: 33px; padding: 0; overflow: hidden; font-size: 0; }
  .add-map-place-button::before { content: "＋"; font-size: 17px; }
  .edit-mode-button { min-width: 33px; width: 33px; height: 33px; padding: 0; border-radius: 9px; }
  .edit-mode-button .edit-mode-label { display: none; }
  .fullscreen-button { width: 33px; height: 33px; border-radius: 9px; font-size: 18px; }
  .directory { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(74dvh, 640px); padding: 18px 17px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; transform: translateY(calc(100% - 74px)); transition: transform .24s ease; }
  .directory.mobile-open { transform: translateY(0); }
  .panel-close { display: grid; }
  .directory-toggle { display: none; }
  .panel-heading h1 { font-size: 21px; }
  .intro { margin-top: 6px; margin-bottom: 12px; font-size: 10px; }
  .stats-row { margin: 12px 0; }
  .category-filters { margin: 8px 0 9px; }
  .merchant-list { min-height: 70px; }
  .panel-footer { padding-top: 7px; }
  .detail-panel, .building-panel { top: auto; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); left: 10px; width: auto; max-height: min(58dvh, 460px); border-radius: 16px; }
  .detail-panel { padding: 18px; }
  .building-panel { padding: 15px; }
  .map-controls { right: 12px; bottom: calc(91px + env(safe-area-inset-bottom)); gap: 7px; }
  .zoom-control, .map-control-button { width: 38px; border-radius: 11px; }
  .zoom-control button, .map-control-button { width: 38px; height: 36px; }
  .map-control-button { height: 38px; }
  .map-attribution { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 55%; text-align: right; }
  .mobile-directory-toggle { position: absolute; z-index: 3; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; display: inline-flex; align-items: center; gap: 9px; min-height: 41px; padding: 0 17px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 999px; color: white; background: #303731; box-shadow: 0 5px 20px rgb(22 25 22 / 20%); cursor: pointer; font-size: 11px; transform: translateX(-50%); }
  .mobile-directory-toggle span { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; color: #704331; background: #f1d7ca; font-size: 9px; }
  .map-message { top: 45%; }
  .map-edit-hint { top: calc(72px + env(safe-area-inset-top)); width: max-content; max-width: calc(100vw - 24px); padding: 9px 12px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}