* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
body { background: #e5e3df; overflow: hidden; }
#map { width: 100vw; height: 100vh; z-index: 1; }
.search-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
}
.search-box {
    width: 420px; height: 48px; background: white;
    display: flex; align-items: center; padding: 0 10px;
    border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.search-box input { flex: 1; border: none; outline: none; font-size: 16px; padding: 0 10px; }
.search-box button { background: none; border: none; cursor: pointer; color: #5f6368; }
.category-bar {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; overflow-x: auto; width: 850px;
    padding-bottom: 5px;
}
.category-bar::-webkit-scrollbar { display: none; }
.group { display: flex; gap: 8px; }
.v-separator { width: 1px; height: 20px; background: #dadce0; margin: 0 4px; }
.chip {
    background: white; padding: 6px 14px; border-radius: 16px; font-size: 13px;
    cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    white-space: nowrap; display: flex; align-items: center; 
    transition: background 0.2s; border: 1px solid transparent;
}
.chip:hover { background: #f1f3f4; }
.cont-chip.active { background: #1a73e8; color: white; }
.history-panel {
    background: white; width: 420px; margin-top: 8px;
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px; display: none;
}
.history-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 8px; border-bottom: 1px solid #eee;
}
.history-header h4 { font-size: 11px; color: #70757a; text-transform: uppercase; }
#clear-history {
    background: none; border: none; color: #1a73e8; 
    cursor: pointer; font-size: 12px; font-weight: 500;
    padding: 4px 8px; border-radius: 4px;
}
#clear-history:hover { background: #f1f3f4; }
#history-list { list-style: none; margin-top: 8px; }
#history-list li {
    padding: 10px 8px; cursor: pointer; border-radius: 4px;
    display: flex; align-items: center;
}
#history-list li:hover { background: #f8f9fa; }
#history-list li::before {
    content: 'history'; font-family: 'Material Icons';
    margin-right: 12px; color: #9aa0a6; font-size: 18px;
}

.info-card {
    position: fixed; bottom: -400px; left: 20px;
    width: 340px; background: white; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2000;
}
.info-card.active { bottom: 20px; }
#loc-img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px 12px 0 0; }
.info-content { padding: 16px; }
.close-btn {
    margin-top: 10px; width: 100%; padding: 8px;
    cursor: pointer; border-radius: 4px; border: 1px solid #ddd;
    background: white; transition: 0.2s;
}
.close-btn:hover { background: #f8f9fa; }