* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: #fff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .main-container {
    flex: 1;
    padding: 0 20px;
    margin: 25px 0 200px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
        
        .header-section {
            text-align: center;
            margin-bottom: 24px;
            width: 100%;
        }
        
        .page-title {
            font-size: 30px;
            font-weight: 400;
            color: #202124;
            margin-bottom: 8px;
            letter-spacing: -1px;
        }
        
        .page-subtitle {
            font-size: 16px;
            color: #5f6368;
            font-weight: 400;
            line-height: 1.5;
        }
        
        .search-wrapper {
            width: 100%;
            max-width: 800px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .search-box {
            width: 70%;
            max-width: 560px;
        }
        
        @media (max-width: 768px) {
            .search-box {
                width: 100%;
                max-width: 100%;
            }
        }
        
        .input-wrapper {
            display: flex;
            align-items: center;
            height: 46px;
            background: #fff;
            border: 1px solid #dfe1e5;
            border-radius: 24px;
            padding: 0 8px 0 16px;
            box-shadow: 0 1px 6px rgba(32,33,36,.28);
        }
        
        #coordinates-input {
            flex: 1;
            height: 34px;
            border: none;
            outline: none;
            font-size: 16px;
            background: transparent;
            color: #202124;
        }
        
        #coordinates-input::placeholder {
            color: #9aa0a6;
        }
        
        .clear-input {
            background: none;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
        }
        
        .clear-input::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%2370777a"/></svg>') no-repeat center;
        }
        
        .clear-input:hover::before {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23202124"/></svg>') no-repeat center;
        }
        
        .search-button {
            background: none;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
        }
        
        .search-button:hover {
            background-color: rgba(60,64,67,0.08);
        }
        
        .search-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%234285f4"/></svg>') no-repeat center;
        }
        
        .search-results {
            position: relative;
            background: #fff;
            border: 1px solid #dfe1e5;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(32,33,36,.28);
            margin-top: 8px;
            max-height: 500px;
            overflow-y: auto;
            width: 100%;
            max-width: 800px;
        }
        
        .results-grid {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        
        .group-header {
            padding: 8px 16px;
            background: #f8f9fa;
            color: #5f6368;
            font-size: 13px;
            font-weight: 400;
            border-bottom: 1px solid #ebebeb;
            border-top: 1px solid #ebebeb;
            line-height: 18px;
            pointer-events: none;
        }
        
        .group-header:first-of-type {
            border-top: none;
        }
        
        .search-result-item {
            padding: 8px 16px;
            min-height: 32px;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #f1f3f4;
            line-height: 18px;
            pointer-events: none;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .location-info {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #202124;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            pointer-events: none;
            flex-wrap: wrap;
        }
        
        .flag-icon {
            width: 20px;
            height: 14px;
            object-fit: cover;
            border: 1px solid #dadce0;
            pointer-events: none;
            flex-shrink: 0;
        }
        
        .address-details {
            font-size: 12px;
            color: #5f6368;
            margin-left: 28px;
            line-height: 16px;
            word-break: break-word;
            white-space: normal;
            pointer-events: none;
        }
        
        .no-results {
            padding: 16px;
            text-align: center;
            color: #5f6368;
            font-size: 14px;
            pointer-events: none;
        }
        
        .error-message {
            padding: 12px 16px;
            background: #fce8e8;
            color: #d93025;
            margin: 8px 16px;
            font-size: 14px;
            line-height: 20px;
            border-radius: 4px;
            pointer-events: none;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.6);
            display: none;
            justify-content: center;
            align-items: flex-start;
            padding-top: 30vh;
            z-index: 1000;
        }
        
        .loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid #dadce0;
            border-top: 3px solid #4285f4;
            border-radius: 50%;
        }
        
        .search-results::-webkit-scrollbar {
            width: 8px;
        }
        
        .search-results::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .search-results::-webkit-scrollbar-thumb {
            background: #dadce0;
            border-radius: 4px;
        }