/* 主布局 */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h); z-index: 1000;
  background: rgba(244, 236, 216, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--border-line);
  display: flex; align-items: center;
  padding: 0 16px; gap: 10px;
}

@media (prefers-color-scheme: dark) {
  .topbar { background: rgba(26, 22, 19, 0.95); }
}

#map-wrapper {
  position: fixed; top: var(--topbar-h);
  left: 0; right: var(--sidebar-w); bottom: var(--sheet-h);
  z-index: 1; transition: bottom 0.35s;
}

#map { width: 100%; height: 100%; }

#map-vignette {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 400;
  box-shadow: inset 0 0 140px 50px rgba(70, 45, 20, 0.45);
}

.sidebar {
  position: fixed; top: var(--topbar-h); right: 0;
  width: var(--sidebar-w); bottom: var(--sheet-h);
  z-index: 2; background: var(--paper-bg);
  border-left: 2px solid var(--border-line);
  overflow-y: auto; padding: 16px;
  transition: bottom 0.35s;
}

.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 70vh; z-index: 998;
  background: var(--paper-bg);
  border-top: 2px solid var(--cinnabar);
  box-shadow: 0 -8px 32px rgba(60, 50, 30, 0.18);
  display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(calc(100% - var(--sheet-h)));
}

.bottom-sheet.expanded { transform: translateY(0); }

@media (max-width: 900px) {
  :root { --sidebar-w: 0%; --sheet-h: 120px; }
  .sidebar { display: none; }
  #map-wrapper { right: 0; }
  .categories { display: none; }
}

@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  .topbar { padding: 0 10px; gap: 6px; }
}