From ca043b67a811b1e9bd92df874203787ac2c759ed Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sun, 29 Mar 2026 02:55:28 +0300
Subject: [PATCH] Final Refinement: Native Labels, Interactive Management UI,
 and Visual Polishing

---
 .../src/geocoding/geocoding-init.service.ts   |   31 +-
 .../api/src/geocoding/geocoding.controller.ts |   31 +-
 apps/api/src/geocoding/geocoding.service.ts   |  165 +-
 apps/flutter_map_demo/assets/map-demo.html    |  655 ++++++
 apps/flutter_map_demo/assets/style.json       | 1018 +++++----
 apps/web/public/map-demo.html                 |  733 +++++--
 apps/web/public/style-mobile.json             | 1472 +++++++++++--
 apps/web/public/style.json                    |  557 ++---
 docker-compose.yml                            |    6 +
 infrastructure/docs/style-mobile.json         | 1840 ++++++++++++++---
 10 files changed, 5141 insertions(+), 1367 deletions(-)
 create mode 100644 apps/flutter_map_demo/assets/map-demo.html

diff --git a/apps/api/src/geocoding/geocoding-init.service.ts b/apps/api/src/geocoding/geocoding-init.service.ts
index 127f11b..5aee233 100644
--- a/apps/api/src/geocoding/geocoding-init.service.ts
+++ b/apps/api/src/geocoding/geocoding-init.service.ts
@@ -38,17 +38,30 @@ export class GeocodingInitService implements OnModuleInit {
         FOR EACH ROW EXECUTE FUNCTION sync_place_location();
       `);
 
-      // 1. GIST Geometry Indexes (for fast proximity search)
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_syria_location ON places_syria USING gist (location);');
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_osm_areas_geom ON osm_areas USING gist (geom);');
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_osm_points_geom ON osm_points_with_area USING gist (geom);');
+      // 3. Triggers for Jordan and Egypt
+      await this.repo.query(`
+        DROP TRIGGER IF EXISTS trg_sync_place_location_jordan ON places_jordan;
+        CREATE TRIGGER trg_sync_place_location_jordan
+        BEFORE INSERT OR UPDATE ON places_jordan
+        FOR EACH ROW EXECUTE FUNCTION sync_place_location();
+      `);
 
-      // 2. GIST Trigram Indexes (for fast fuzzy name search and low server load)
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_syria_names_trgm ON places_syria USING gist (name_ar gist_trgm_ops, name_en gist_trgm_ops);');
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_osm_areas_names_trgm ON osm_areas USING gist (name_ar gist_trgm_ops);');
-      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_osm_points_names_trgm ON osm_points_with_area USING gist (name_ar gist_trgm_ops, name_en gist_trgm_ops);');
+      await this.repo.query(`
+        DROP TRIGGER IF EXISTS trg_sync_place_location_egypt ON places_egypt;
+        CREATE TRIGGER trg_sync_place_location_egypt
+        BEFORE INSERT OR UPDATE ON places_egypt
+        FOR EACH ROW EXECUTE FUNCTION sync_place_location();
+      `);
 
-      this.logger.log('Geocoding database triggers and optimized indexes initialized.');
+      // 4. GIST Geometry Indexes for Jordan and Egypt
+      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_jordan_location ON places_jordan USING gist (location);');
+      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_egypt_location ON places_egypt USING gist (location);');
+
+      // 5. GIST Trigram Indexes for Jordan and Egypt
+      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_jordan_names_trgm ON places_jordan USING gist (name_ar gist_trgm_ops, name_en gist_trgm_ops);');
+      await this.repo.query('CREATE INDEX IF NOT EXISTS idx_places_egypt_names_trgm ON places_egypt USING gist (name_ar gist_trgm_ops, name_en gist_trgm_ops);');
+
+      this.logger.log('Geocoding database triggers and optimized indexes initialized for Syria, Jordan, and Egypt.');
     } catch (err) {
       this.logger.error('Failed to initialize database geocoding triggers:', err);
     }
diff --git a/apps/api/src/geocoding/geocoding.controller.ts b/apps/api/src/geocoding/geocoding.controller.ts
index e33dbd1..8113cbd 100644
--- a/apps/api/src/geocoding/geocoding.controller.ts
+++ b/apps/api/src/geocoding/geocoding.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Body, Query, UseGuards } from '@nestjs/common';
+import { Controller, Get, Post, Delete, Body, Query, UseGuards, HttpException, HttpStatus } from '@nestjs/common';
 import { ApiTags, ApiOperation, ApiQuery } from '@nestjs/swagger';
 import { GeocodingService } from './geocoding.service';
 import { ApiKeyGuard } from '../common/guards/api-key.guard';
@@ -15,13 +15,15 @@ export class GeocodingController {
   @ApiQuery({ name: 'lat', required: false, type: Number })
   @ApiQuery({ name: 'lng', required: false, type: Number })
   @ApiQuery({ name: 'radius', required: false, type: Number })
+  @ApiQuery({ name: 'country', required: false, enum: ['jordan', 'syria', 'egypt'] })
   async search(
     @Query('q') query: string,
     @Query('lat') lat?: number,
     @Query('lng') lng?: number,
     @Query('radius') radius?: number,
+    @Query('country') country?: string,
   ) {
-    return this.geocodingService.searchPlaces(query, lat, lng, radius);
+    return this.geocodingService.searchPlaces(query, lat, lng, radius, country);
   }
 
   @Get('reverse')
@@ -38,6 +40,25 @@ export class GeocodingController {
     return this.geocodingService.addPlace(placeData);
   }
 
+  @Delete('places')
+  @ApiOperation({ summary: 'Delete a place by name or ID' })
+  @ApiQuery({ name: 'name', required: false })
+  @ApiQuery({ name: 'id', required: false, type: Number })
+  @ApiQuery({ name: 'country', required: true, enum: ['jordan', 'syria', 'egypt'] })
+  async deletePlace(
+    @Query('country') country: string,
+    @Query('name') name?: string,
+    @Query('id') id?: number,
+  ) {
+    if (id) {
+      return this.geocodingService.deletePlaceById(Number(id), country);
+    }
+    if (name) {
+      return this.geocodingService.deletePlacesByName(name, country);
+    }
+    throw new HttpException('Name or ID required', HttpStatus.BAD_REQUEST);
+  }
+
   @Post('upsert-place')
   @ApiOperation({ summary: 'Add or Update a location (Automated Scraper)' })
   async upsertPlace(@Body() placeData: any) {
@@ -55,4 +76,10 @@ export class GeocodingController {
   async getPlaces(@Query('limit') limit?: number) {
     return this.geocodingService.getRecentPlaces(limit);
   }
+
+  @Get('geojson')
+  @ApiOperation({ summary: 'Get all user submitted places as GeoJSON for Map Style' })
+  async getGeoJSON() {
+    return this.geocodingService.getAllPlacesGeoJSON();
+  }
 }
diff --git a/apps/api/src/geocoding/geocoding.service.ts b/apps/api/src/geocoding/geocoding.service.ts
index 826ed95..f3a479c 100644
--- a/apps/api/src/geocoding/geocoding.service.ts
+++ b/apps/api/src/geocoding/geocoding.service.ts
@@ -45,44 +45,91 @@ export class GeocodingService {
     return 'places_syria';
   }
 
-  async searchPlaces(query: string, lat?: number, lon?: number, radius: number = 20000) {
+  async searchPlaces(
+    query: string,
+    lat?: number,
+    lon?: number,
+    radius: number = 20000,
+    country?: string,
+  ) {
     try {
       const cleanQuery = query.trim();
       const hasLocation = lat !== undefined && lon !== undefined;
-      
-      // If we have no location, we search ALL three tables (Syria, Jordan, Egypt)
-      // وإلا فسنقوم بالبحث في المنطقة المناسبة فقط لزيادة السرعة والدقة
-      const tables = hasLocation ? [this.getTableNameForRepo(this.getRepositoryForCoords(lat, lon))] : ['places_syria', 'places_jordan', 'places_egypt'];
-      
-      const allResults: any[] = [];
       const ILikeQuery = `%${cleanQuery}%`;
+      const allResults: any[] = [];
+      
+      // تحويل المسافة بالامتار الى درجات جغرافية تقريبية للفلترة السريعة
+      const radiusInDegrees = radius / 111000; 
 
-      for (const tableName of tables) {
-        const repo = tableName === 'places_jordan' ? this.placesJordanRepository : 
-                     tableName === 'places_egypt' ? this.placesEgyptRepository : 
-                     this.placesSyriaRepository;
+      // 1. تحديد المنطقة (الأردن، سوريا، مصر)
+      let targetRegion = country?.toLowerCase();
+      
+      if (!targetRegion && hasLocation) {
+        const repo = this.getRepositoryForCoords(lat!, lon!);
+        const tableName = this.getTableNameForRepo(repo);
+        targetRegion = tableName.replace('places_', '');
+      }
 
-        const userPlacesQuery = `
+      const userPointSql = hasLocation ? `ST_SetSRID(ST_MakePoint(${lon}, ${lat}), 4326)` : 'NULL';
+
+      // 2. البحث في جداول المستخدم (Syria, Egypt only)
+      const userTables = targetRegion 
+        ? (['syria', 'egypt'].includes(targetRegion) ? [`places_${targetRegion}`] : [])
+        : ['places_syria', 'places_egypt'];
+
+      for (const tableName of userTables) {
+        const repo = tableName === 'places_egypt' ? this.placesEgyptRepository : this.placesSyriaRepository;
+        const userQuery = `
           SELECT id, name, name_ar, name_en, category, latitude, longitude, address, 'user_submitted' as source,
-          CASE WHEN $2::float IS NOT NULL THEN ST_DistanceSphere(location, ST_SetSRID(ST_MakePoint($3, $2), 4326)) ELSE 0 END as distance,
+          CASE WHEN $2::float IS NOT NULL THEN ST_DistanceSphere(location, ${userPointSql}) ELSE 0 END as distance,
           similarity(COALESCE(name_ar, ''), $1) + similarity(COALESCE(name_en, ''), $1) as relevance
           FROM ${tableName}
           WHERE (name_ar % $1 OR name_en % $1 OR name % $1 OR name_ar ILIKE $4 OR name_en ILIKE $4)
-          ${hasLocation ? `AND ST_DistanceSphere(location, ST_SetSRID(ST_MakePoint($3, $2), 4326)) <= $5` : ''}
-          ORDER BY distance ASC, relevance DESC LIMIT 10
+          ${hasLocation ? `AND location && ST_Expand(${userPointSql}, $5) AND ST_DistanceSphere(location, ${userPointSql}) <= $6` : ''}
+          ORDER BY relevance DESC, distance ASC LIMIT 15
         `;
-
-        const params = [cleanQuery, lat || null, lon || null, ILikeQuery, radius];
-        const results = await repo.query(userPlacesQuery, params);
+        const results = await repo.query(userQuery, [cleanQuery, lat || null, lon || null, ILikeQuery, radiusInDegrees, radius]);
         allResults.push(...results);
       }
 
-      // Sort combined results by relevance and distance
-      const sortedResults = allResults.sort((a, b) => b.relevance - a.relevance || a.distance - b.distance).slice(0, 15);
+      // 3. البحث في قاعدة بيانات OSM (Jordan and Regional)
+      let osmBoundFilter = '';
+      if (targetRegion === 'jordan') {
+        osmBoundFilter = 'AND ST_Contains(ST_MakeEnvelope(34.5, 29.0, 39.5, 33.5, 4326), geom)';
+      } else if (targetRegion === 'syria') {
+        osmBoundFilter = 'AND ST_Contains(ST_MakeEnvelope(35.5, 32.3, 42.4, 37.5, 4326), geom)';
+      } else if (targetRegion === 'egypt') {
+        osmBoundFilter = 'AND ST_Contains(ST_MakeEnvelope(24.5, 22.0, 37.0, 31.8, 4326), geom)';
+      }
 
+      const osmQuery = `
+        SELECT osm_id as id, name, name_ar, name_en, COALESCE(amenity, shop, 'place') as category, 
+        latitude, longitude, addr_street as address, 'osm_global' as source,
+        CASE WHEN $2::float IS NOT NULL THEN ST_DistanceSphere(geom, ${userPointSql}) ELSE 0 END as distance,
+        similarity(COALESCE(name_ar, ''), $1) + similarity(COALESCE(name_en, ''), $1) as relevance
+        FROM osm_points_with_area
+        WHERE (name_ar % $1 OR name_en % $1 OR name % $1 OR name_ar ILIKE $4 OR name_en ILIKE $4)
+        ${osmBoundFilter}
+        ${hasLocation ? `AND geom && ST_Expand(${userPointSql}, $5) AND ST_DistanceSphere(geom, ${userPointSql}) <= $6` : ''}
+        ORDER BY relevance DESC, distance ASC LIMIT 20
+      `;
+      const osmResults = await this.osmPointsRepository.query(osmQuery, [cleanQuery, lat || null, lon || null, ILikeQuery, radiusInDegrees, radius]);
+      allResults.push(...osmResults);
+
+      // 4. التصفية والترتيب النهائي (الأولوية للمسافة إذا كان الموقع معروفاً)
+      const sortedResults = allResults
+        .sort((a, b) => {
+          if (hasLocation) {
+            return (a.distance - b.distance) || (b.relevance - a.relevance);
+          }
+          return (b.relevance - a.relevance) || (a.distance - b.distance);
+        })
+        .slice(0, 20);
+
+      this.logger.debug(`Spatial Search complete (Sorted by ${hasLocation ? 'Distance' : 'Relevance'}). Results: ${sortedResults.length}`);
       return { results: sortedResults };
     } catch (e) {
-      this.logger.error('Search failed:', e);
+      this.logger.error('Optimized Spatial Search failed:', e);
       return { results: [] };
     }
   }
@@ -190,4 +237,80 @@ export class GeocodingService {
       .sort((a, b) => b.created_at.getTime() - a.created_at.getTime())
       .slice(0, limit);
   }
+
+  async getAllPlacesGeoJSON() {
+    try {
+      const query = `
+        SELECT id, name_ar as name, category, latitude, longitude, address, 'syria' as region
+        FROM places_syria WHERE (name_ar IS NOT NULL OR name IS NOT NULL) AND latitude IS NOT NULL
+        UNION ALL
+        SELECT id, name_ar as name, category, latitude, longitude, address, 'jordan' as region
+        FROM places_jordan WHERE (name_ar IS NOT NULL OR name IS NOT NULL) AND latitude IS NOT NULL
+        UNION ALL
+        SELECT id, name_ar as name, category, latitude, longitude, address, 'egypt' as region
+        FROM places_egypt WHERE (name_ar IS NOT NULL OR name IS NOT NULL) AND latitude IS NOT NULL
+      `;
+      const allResults = await this.placesSyriaRepository.query(query);
+
+      const features = allResults.map(p => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [parseFloat(p.longitude), parseFloat(p.latitude)]
+        },
+        properties: {
+          id: p.id,
+          name: p.name,
+          category: p.category,
+          address: p.address,
+          region: p.region,
+          icon: p.category === 'mosque' ? 'mosque' : (p.category === 'hospital' ? 'hospital' : 'marker')
+        }
+      }));
+
+      return {
+        type: 'FeatureCollection',
+        features
+      };
+    } catch (e) {
+      this.logger.error('Failed to generate GeoJSON for all places:', e);
+      return { type: 'FeatureCollection', features: [] };
+    }
+  }
+  async deletePlacesByName(name: string, country: string) {
+    try {
+      const repo = this.getRepoByCountry(country);
+      const result = await repo.delete({ name_ar: name });
+      const resultEn = await repo.delete({ name_en: name });
+      const resultGeneric = await repo.delete({ name: name });
+      
+      const totalAffected = (result.affected || 0) + (resultEn.affected || 0) + (resultGeneric.affected || 0);
+      this.logger.debug(`Deleted ${totalAffected} places named "${name}" in ${country}`);
+      return { success: true, affected: totalAffected };
+    } catch (e) {
+      this.logger.error(`Failed to delete places named "${name}" in ${country}:`, e);
+      throw new HttpException('Deletion failed', HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+
+  async deletePlaceById(id: number, country: string) {
+    try {
+      const repo = this.getRepoByCountry(country);
+      const result = await repo.delete(id);
+      this.logger.debug(`Deleted place ID ${id} in ${country}`);
+      return { success: true, affected: result.affected };
+    } catch (e) {
+      this.logger.error(`Failed to delete place ID ${id} in ${country}:`, e);
+      throw new HttpException('Deletion failed', HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+
+  private getRepoByCountry(country: string) {
+    switch (country?.toLowerCase()) {
+      case 'syria': return this.placesSyriaRepository;
+      case 'jordan': return this.placesJordanRepository;
+      case 'egypt': return this.placesEgyptRepository;
+      default: throw new HttpException('Invalid country: ' + country, HttpStatus.BAD_REQUEST);
+    }
+  }
 }
diff --git a/apps/flutter_map_demo/assets/map-demo.html b/apps/flutter_map_demo/assets/map-demo.html
new file mode 100644
index 0000000..94acb02
--- /dev/null
+++ b/apps/flutter_map_demo/assets/map-demo.html
@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Intaleq Premium Map V3 - خرائط انطلاقة الذكية</title>
+
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Noto+Sans+Arabic:wght@400;700&display=swap');
+
+    :root {
+      --primary:      #c0a048;
+      --primary-dark: #8a6e20;
+      --accent:       #2563eb;
+      --bg-glass:     rgba(255, 255, 255, 0.88);
+      --shadow:       0 12px 40px rgba(0,0,0,0.12);
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Outfit', 'Noto Sans Arabic', sans-serif;
+      background: #F2EDE4;
+      overflow: hidden;
+      color: #342C20;
+    }
+
+    /* ── MAP ── */
+    #map { width: 100vw; height: 100vh; position: absolute; inset: 0; }
+
+    /* ── LOADING OVERLAY ── */
+    #loading {
+      display: none; position: fixed; inset: 0;
+      background: rgba(242,237,228,0.6);
+      z-index: 2000; align-items: center; justify-content: center;
+      backdrop-filter: blur(6px);
+    }
+    .spinner {
+      width: 40px; height: 40px;
+      border: 4px solid rgba(192,160,72,0.15);
+      border-top: 4px solid var(--primary);
+      border-radius: 50%;
+      animation: spin 0.9s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── CONTROLS PANEL ── */
+    .controls {
+      position: absolute; top: 24px; right: 24px; z-index: 100;
+      background: var(--bg-glass);
+      backdrop-filter: blur(14px) saturate(180%);
+      -webkit-backdrop-filter: blur(14px) saturate(180%);
+      border-radius: 24px; padding: 28px; width: 380px;
+      box-shadow: var(--shadow);
+      border: 1px solid rgba(255,255,255,0.35);
+    }
+
+    .badge {
+      display: inline-block; padding: 4px 10px; border-radius: 6px;
+      font-size: 11px; font-weight: 800;
+      background: var(--primary); color: #fff;
+      margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
+    }
+
+    .panel-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: #18100A; }
+    .panel-desc  { font-size: 13px; color: #584840; margin-bottom: 20px; line-height: 1.55; }
+
+    /* ── SEARCH ── */
+    .search-wrap { position: relative; margin-bottom: 20px; }
+    .search-wrap input {
+      width: 100%; padding: 13px 60px 13px 16px;
+      border-radius: 12px; border: 1.5px solid #ddd;
+      font-family: inherit; font-size: 14px;
+      outline: none; transition: border-color 0.25s;
+      background: rgba(255,255,255,0.7);
+    }
+    .search-wrap input:focus { border-color: var(--primary); }
+    .search-wrap .search-btn {
+      position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+      background: var(--primary); color: #fff;
+      border: none; padding: 6px 13px; border-radius: 8px;
+      cursor: pointer; font-size: 12px; font-weight: 700;
+      transition: background 0.2s;
+    }
+    .search-wrap .search-btn:hover { background: var(--primary-dark); }
+
+    #search-results {
+      display: none; max-height: 220px; overflow-y: auto;
+      background: #fff; border-radius: 12px;
+      border: 1px solid #eee;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
+      margin-top: 8px;
+    }
+    .result-item {
+      padding: 11px 16px; border-bottom: 1px solid #f5f5f5;
+      cursor: pointer; transition: background 0.15s;
+    }
+    .result-item:last-child { border-bottom: none; }
+    .result-item:hover { background: #fdfaf5; }
+    .result-item .name  { font-weight: 700; font-size: 13px; }
+    .result-item .meta  { font-size: 11px; color: #999; margin-top: 2px; }
+
+    /* ── ROUTE BUTTONS ── */
+    .btn-group { display: flex; flex-direction: column; gap: 10px; }
+
+    .btn {
+      padding: 15px 18px; border: none; border-radius: 14px;
+      font-size: 14px; font-weight: 700; cursor: pointer;
+      display: flex; align-items: center; justify-content: space-between;
+      transition: transform 0.25s, box-shadow 0.25s;
+      font-family: inherit;
+    }
+    .btn .label-sub { font-size: 11px; font-weight: 400; opacity: 0.75; margin-bottom: 2px; }
+    .btn .icon { font-size: 20px; }
+
+    .btn-gold {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      color: #fff;
+      box-shadow: 0 4px 16px rgba(192,160,72,0.28);
+    }
+    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(192,160,72,0.38); }
+
+    .btn-white {
+      background: #fff; color: #342C20;
+      border: 1px solid rgba(0,0,0,0.06);
+      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
+    }
+    .btn-white:hover { background: #fdfaf5; transform: translateY(-2px); }
+
+    /* ── STATUS BOX ── */
+    #status {
+      display: none; margin-top: 20px;
+      background: rgba(253,250,245,0.7);
+      border: 1.5px dashed var(--primary);
+      border-radius: 14px; padding: 16px; font-size: 13px;
+      line-height: 1.65;
+      animation: fadeUp 0.35s ease-out;
+    }
+    .status-row {
+      display: flex; justify-content: space-between; margin-top: 6px;
+    }
+    .status-row span:last-child { font-weight: 800; }
+
+    /* ── DB NAMES INDICATOR ── */
+    #db-status {
+      margin-top: 14px; padding: 10px 14px;
+      background: rgba(192,160,72,0.08);
+      border-radius: 10px; font-size: 12px; color: #7A5C10;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .dot-gold {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--primary); flex-shrink: 0;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── BRANDING ── */
+    .branding {
+      position: absolute; bottom: 28px; left: 28px; z-index: 100;
+      background: var(--bg-glass); backdrop-filter: blur(8px);
+      padding: 10px 18px; border-radius: 12px;
+      display: flex; align-items: center; gap: 10px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.09);
+      border: 1px solid rgba(255,255,255,0.4);
+    }
+    .branding span { font-size: 12px; font-weight: 800; color: #18100A; letter-spacing: 0.5px; }
+
+    /* ── CONTEXT MENU ── */
+    #context-menu {
+      display: none; position: fixed; z-index: 3000;
+      background: var(--bg-glass); backdrop-filter: blur(12px);
+      border-radius: 12px; min-width: 180px;
+      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+      border: 1px solid rgba(255,255,255,0.4);
+      padding: 6px;
+    }
+    .menu-item {
+      padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 10px;
+      transition: background 0.2s;
+    }
+    .menu-item:hover { background: rgba(192,160,72,0.12); color: var(--primary-dark); }
+    .menu-item .icon { font-size: 16px; }
+
+    /* ── ADMIN PANEL ── */
+    #admin-panel {
+      position: absolute; bottom: 84px; right: 24px; z-index: 100;
+      background: var(--bg-glass); backdrop-filter: blur(14px);
+      border-radius: 20px; padding: 20px; width: 340px;
+      box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.3);
+      display: none; animation: fadeUp 0.3s;
+    }
+    .admin-title { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+    .admin-close { cursor: pointer; opacity: 0.5; margin-right: auto; font-size: 18px; }
+
+    .delete-group { margin-top: 15px; }
+    .delete-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; opacity: 0.7; }
+    .delete-group input, .delete-group select {
+      width: 100%; padding: 10px; border-radius: 8px; border: 1.5px solid #eee;
+      font-size: 13px; margin-bottom: 10px; outline: none;
+    }
+    .delete-group input:focus { border-color: #c0392b; }
+    .btn-delete {
+      width: 100%; padding: 10px; background: #c0392b; color: #fff; border: none;
+      border-radius: 10px; font-weight: 800; cursor: pointer;
+    }
+
+    #toggle-admin {
+      position: absolute; top: 110px; left: 10px; z-index: 100;
+      background: var(--bg-glass); border: none; border-radius: 50%;
+      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
+      box-shadow: var(--shadow); cursor: pointer; font-size: 20px;
+    }
+
+    /* ── SCROLLBAR ── */
+    ::-webkit-scrollbar { width: 5px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
+  </style>
+</head>
+<body>
+
+<!-- MAP -->
+<div id="map"></div>
+
+<!-- LOADING -->
+<div id="loading">
+  <div style="text-align:center">
+    <div class="spinner" style="margin: 0 auto 14px;"></div>
+    <strong style="color:var(--primary-dark)">جاري حساب المسار الذكي...</strong>
+  </div>
+</div>
+
+<!-- BRANDING -->
+<div class="branding">
+  <img src="/intaleq-logo.png" alt="Logo" style="height:22px" onerror="this.style.display='none'">
+  <span>INTALEQ PREMIUM MAPS</span>
+</div>
+
+<!-- CONTROLS -->
+<div class="controls">
+  <div class="badge">v3.1.0</div>
+  <div class="panel-title">🗺️ خرائط انطلاقة الذكية</div>
+  <p class="panel-desc">حلول جغرافية متقدمة لمنطقة الشرق الأوسط وشمال أفريقيا — عرض ثلاثي الأبعاد وأسماء مباشرة من قاعدة البيانات.</p>
+
+  <!-- SEARCH -->
+  <div class="search-wrap">
+    <input id="search-input" type="text" placeholder="ابحث عن مكان... (مسجد، مستشفى، ...)" />
+    <button class="search-btn" onclick="performSearch()">بحث</button>
+    <div id="search-results"></div>
+  </div>
+
+  <!-- ROUTE BUTTONS -->
+  <div class="btn-group">
+    <button class="btn btn-gold" onclick="handleRoute('LEVANT')">
+      <div>
+        <div class="label-sub">مسار مقترح — سوريا</div>
+        <span>عمّان ← دمشق</span>
+      </div>
+      <span class="icon">🚀</span>
+    </button>
+
+    <button class="btn btn-white" onclick="handleRoute('EGYPT')">
+      <div>
+        <div class="label-sub">مسار مقترح — مصر</div>
+        <span>شبرا ← الزمالك</span>
+      </div>
+      <span class="icon">🇪🇬</span>
+    </button>
+  </div>
+
+  <!-- STATUS -->
+  <div id="status"></div>
+
+  <!-- DB NAMES INDICATOR -->
+  <div id="db-status">
+    <div class="dot-gold"></div>
+    <span id="db-status-text">جاري تحميل الأسماء من قاعدة البيانات...</span>
+  </div>
+</div>
+
+<!-- TOGGLE ADMIN -->
+<button id="toggle-admin" onclick="toggleAdminPanel()" title="إدارة البيانات">⚙️</button>
+
+<!-- CONTEXT MENU -->
+<div id="context-menu">
+  <div class="menu-item" onclick="copyCoords()">
+    <span class="icon">📋</span> <span>نسخ الإحداثيات</span>
+  </div>
+  <div class="menu-item" id="menu-delete-btn" style="color:#c0392b" onclick="deleteFromContext()">
+    <span class="icon">🗑️</span> <span>حذف هذا الموقع</span>
+  </div>
+</div>
+
+<!-- ADMIN PANEL -->
+<div id="admin-panel">
+  <div class="admin-title">
+    <span>🛡️ إدارة البيانات</span>
+    <span class="admin-close" onclick="toggleAdminPanel()">×</span>
+  </div>
+  <div class="delete-group">
+    <label>حذف موقع بواسطة الاسم</label>
+    <input type="text" id="admin-delete-name" placeholder="أدخل اسم الموقع..." />
+    <label>الدولة</label>
+    <select id="admin-delete-country">
+      <option value="syria">سوريا</option>
+      <option value="jordan">الأردن</option>
+      <option value="egypt">مصر</option>
+    </select>
+    <button class="btn-delete" onclick="handleAdminDelete()">حذف الموقع نهائياً</button>
+  </div>
+  <div id="admin-info" style="font-size:11px; margin-top:10px; opacity:0.6; text-align:center"></div>
+</div>
+
+<script>
+  /* ───────────────────────────────────────────
+     CONFIG
+  ─────────────────────────────────────────── */
+  const API_BASE = 'https://map-saas.intaleqapp.com';
+  const API_KEY  = 'intaleq_secret_2026';
+  const HEADERS  = { 'x-api-key': API_KEY };
+
+  const ROUTES = {
+    LEVANT: {
+      from:   [35.9106, 31.9539],   // Amman
+      to:     [36.2765, 33.5138],   // Damascus
+      center: [36.09, 32.73],
+      zoom:   8,
+      color:  '#c0a048'
+    },
+    EGYPT: {
+      from:   [31.2427, 30.0931],   // Shoubra
+      to:     [31.2201, 30.0619],   // Zamalek
+      center: [31.23, 30.07],
+      zoom:   13,
+      color:  '#2563eb'
+    }
+  };
+
+  /* ───────────────────────────────────────────
+     MAP INIT
+  ─────────────────────────────────────────── */
+  maplibregl.setRTLTextPlugin(
+    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js',
+    null, true
+  );
+
+  const map = new maplibregl.Map({
+    container: 'map',
+    center:    ROUTES.LEVANT.center,
+    zoom:      ROUTES.LEVANT.zoom,
+    style:     './style.json',          // ← style.json fixed (no duplicate IDs)
+    pitch:     0,
+    bearing:   0,
+    attributionControl: false
+  });
+
+  map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
+
+  /* ───────────────────────────────────────────
+     MAP LOAD — count DB names shown on map
+  ─────────────────────────────────────────── */
+  map.on('load', () => {
+    console.log('[Intaleq] Map loaded — style v3.1.0');
+    loadDBNamesStatus();
+  });
+
+  /*
+   * Fetch the same GeoJSON the style uses for intaleq_dynamic_pois
+   * and report how many names were loaded on the map.
+   */
+  async function loadDBNamesStatus() {
+    const statusEl = document.getElementById('db-status-text');
+    try {
+      const res  = await fetch(`${API_BASE}/api/geocoding/geojson`, { headers: HEADERS });
+      const data = await res.json();
+      const count = data?.features?.length ?? 0;
+
+      statusEl.textContent = count > 0
+        ? `✅ ${count} اسم مُحمَّل من قاعدة البيانات على الخريطة`
+        : '⚠️ لا توجد أسماء في قاعدة البيانات حتى الآن';
+
+      // Refresh the source in case MapLibre cached an empty response
+      if (count > 0 && map.getSource('intaleq_dynamic_pois')) {
+        map.getSource('intaleq_dynamic_pois').setData(data);
+      }
+    } catch (err) {
+      console.warn('[Intaleq] DB names fetch failed:', err);
+      statusEl.textContent = '⚠️ تعذّر الاتصال بقاعدة البيانات';
+    }
+  }
+
+  /* ───────────────────────────────────────────
+     POLYLINE DECODER
+  ─────────────────────────────────────────── */
+  function decodePoly(str) {
+    let i = 0, lat = 0, lng = 0, out = [];
+    while (i < str.length) {
+      let byte, shift = 0, result = 0;
+      do { byte = str.charCodeAt(i++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lat += (result & 1) ? ~(result >> 1) : (result >> 1);
+      shift = 0; result = 0;
+      do { byte = str.charCodeAt(i++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lng += (result & 1) ? ~(result >> 1) : (result >> 1);
+      out.push([lng / 1e5, lat / 1e5]);
+    }
+    return out;
+  }
+
+  /* ───────────────────────────────────────────
+     ROUTING
+  ─────────────────────────────────────────── */
+  async function handleRoute(region) {
+    const cfg = ROUTES[region];
+    const loading = document.getElementById('loading');
+    const status  = document.getElementById('status');
+
+    loading.style.display = 'flex';
+    status.style.display  = 'none';
+
+    try {
+      const url = `${API_BASE}/api/maps/route`
+        + `?fromLat=${cfg.from[1]}&fromLng=${cfg.from[0]}`
+        + `&toLat=${cfg.to[1]}&toLng=${cfg.to[0]}`;
+
+      const res  = await fetch(url, { headers: HEADERS });
+      const data = await res.json();
+
+      if (data.statusCode >= 400) throw new Error(data.message || 'Routing error');
+
+      const coords = typeof data.points === 'string'
+        ? decodePoly(data.points)
+        : data.points;
+
+      if (!coords?.length) throw new Error('No route points returned');
+
+      // Add or update route layer
+      const geojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } };
+
+      if (map.getSource('route')) {
+        map.getSource('route').setData(geojson);
+        map.setPaintProperty('route-line', 'line-color', cfg.color);
+      } else {
+        map.addSource('route', { type: 'geojson', data: geojson });
+        map.addLayer({
+          id: 'route-line', type: 'line', source: 'route',
+          layout: { 'line-join': 'round', 'line-cap': 'round' },
+          paint:  { 'line-color': cfg.color, 'line-width': 7, 'line-opacity': 0.88 }
+        });
+      }
+
+      // Fit map to route
+      const bounds = coords.reduce(
+        (b, c) => b.extend(c),
+        new maplibregl.LngLatBounds(coords[0], coords[0])
+      );
+      map.fitBounds(bounds, { padding: 110, duration: 1800 });
+
+      // Show summary
+      setTimeout(() => {
+        status.style.display = 'block';
+        status.innerHTML = `
+          <div style="font-weight:700;color:var(--primary-dark);margin-bottom:8px">🏁 ملخص الرحلة</div>
+          <div class="status-row"><span>المسافة:</span><span>${(data.distance / 1000).toFixed(1)} كم</span></div>
+          <div class="status-row"><span>الوقت المتوقع:</span><span>${Math.round(data.duration / 60)} دقيقة</span></div>
+        `;
+      }, 600);
+
+    } catch (err) {
+      console.error('[Intaleq] Route error:', err);
+      status.style.display = 'block';
+      status.innerHTML = `<span style="color:#c0392b">⚠️ تعذّر تحميل المسار: ${err.message}</span>`;
+    } finally {
+      loading.style.display = 'none';
+    }
+  }
+
+  /* ───────────────────────────────────────────
+     SEARCH
+  ─────────────────────────────────────────── */
+  let searchMarkers = [];
+
+  async function performSearch() {
+    const q       = document.getElementById('search-input').value.trim();
+    const resultsEl = document.getElementById('search-results');
+    if (!q) return;
+
+    const center = map.getCenter();
+    const url = `${API_BASE}/api/geocoding/search`
+      + `?q=${encodeURIComponent(q)}`
+      + `&lat=${center.lat}&lng=${center.lng}&radius=20000`;
+
+    resultsEl.style.display = 'block';
+    resultsEl.innerHTML = '<div class="result-item"><span class="meta">جاري البحث...</span></div>';
+
+    // Clear old markers
+    searchMarkers.forEach(m => m.remove());
+    searchMarkers = [];
+
+    try {
+      const res  = await fetch(url, { headers: HEADERS });
+      const data = await res.json();
+
+      if (!data.results?.length) {
+        resultsEl.innerHTML = '<div class="result-item"><span class="meta">لا توجد نتائج.</span></div>';
+        return;
+      }
+
+      resultsEl.innerHTML = '';
+      data.results.forEach(place => {
+        const lng = parseFloat(place.longitude);
+        const lat = parseFloat(place.latitude);
+        const name = place.name_ar || place.name;
+        const dist = place.distance ? `${(place.distance / 1000).toFixed(2)} كم` : '';
+
+        // Result row
+        const item = document.createElement('div');
+        item.className = 'result-item';
+        item.innerHTML = `
+          <div class="name">${name}</div>
+          <div class="meta">${place.category || ''} ${dist ? '• ' + dist : ''}</div>
+        `;
+        item.onclick = () => map.flyTo({ center: [lng, lat], zoom: 16 });
+        resultsEl.appendChild(item);
+
+        // Map marker — gold for DB entries, blue for OSM
+        const isDB     = place.source === 'user_submitted' || place.source === 'intaleq_db';
+        const color    = isDB ? '#c0a048' : '#2563eb';
+        
+        let popupHTML = `<strong>${name}</strong><br><span style="font-size:12px;color:#888">${place.category || ''}</span>`;
+        if (isDB) {
+          popupHTML += `<hr style="margin:8px 0; border:0; border-top:1px solid #eee">
+                        <button onclick="directDelete(${place.id})" style="background:#c0392b; color:#fff; border:0; padding:4px 8px; border-radius:4px; font-size:10px; cursor:pointer; width:100%">حذف القيد</button>`;
+        }
+
+        const marker   = new maplibregl.Marker({ color })
+          .setLngLat([lng, lat])
+          .setPopup(new maplibregl.Popup({ offset: 25 })
+            .setHTML(popupHTML))
+          .addTo(map);
+
+        searchMarkers.push(marker);
+      });
+
+    } catch (err) {
+      console.error('[Intaleq] Search error:', err);
+      resultsEl.innerHTML = '<div class="result-item" style="color:#c0392b">⚠️ فشل الاتصال بخدمة البحث.</div>';
+    }
+  }
+
+  // Enter key triggers search
+  document.getElementById('search-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter') performSearch();
+  });
+
+  /* ───────────────────────────────────────────
+     INTERACTIVE MANAGEMENT
+  ─────────────────────────────────────────── */
+  let lastRightClick = null;
+
+  map.on('contextmenu', (e) => {
+    lastRightClick = e.lngLat;
+    const menu = document.getElementById('context-menu');
+    menu.style.display = 'block';
+    menu.style.left = e.point.x + 'px';
+    menu.style.top = e.point.y + 'px';
+  });
+
+  document.addEventListener('click', () => {
+    document.getElementById('context-menu').style.display = 'none';
+  });
+
+  function copyCoords() {
+    if (!lastRightClick) return;
+    const txt = `${lastRightClick.lat.toFixed(7)}, ${lastRightClick.lng.toFixed(7)}`;
+    navigator.clipboard.writeText(txt);
+    alert('تم نسخ الإحداثيات: ' + txt);
+  }
+
+  async function deleteFromContext() {
+    if (!lastRightClick) return;
+    const country = prompt('يرجى كتابة الدولة للتأكيد (syria, jordan, egypt):', 'syria');
+    if (!country) return;
+    
+    const name = prompt('يرجى كتابة اسم الموقع لحذفه نهائياً:');
+    if (!name) return;
+
+    await apiDelete(name, country);
+  }
+
+  function toggleAdminPanel() {
+    const p = document.getElementById('admin-panel');
+    p.style.display = p.style.display === 'block' ? 'none' : 'block';
+  }
+
+  async function handleAdminDelete() {
+    const name = document.getElementById('admin-delete-name').value.trim();
+    const country = document.getElementById('admin-delete-country').value;
+    if (!name) return alert('يرجى إدخال الاسم');
+    if (!confirm(`هل أنت متأكد من حذف 모든 المواقع المسمى "${name}" في ${country}؟`)) return;
+
+    await apiDelete(name, country);
+  }
+
+  async function directDelete(id) {
+    const country = prompt('يرجى تحديد الدولة (syria, jordan, egypt):', 'syria');
+    if (!country) return;
+    if (!confirm('هل أنت متأكد من حذف هذا القيد؟')) return;
+
+    try {
+      const res = await fetch(`${API_BASE}/api/geocoding/places?id=${id}&country=${country}`, { 
+        method: 'DELETE', 
+        headers: HEADERS 
+      });
+      const data = await res.json();
+      if (data.success) {
+        alert('تم الحذف بنجاح');
+        location.reload();
+      }
+    } catch (err) {
+      alert('فشل الحذف');
+    }
+  }
+
+  async function apiDelete(name, country) {
+    const info = document.getElementById('admin-info');
+    info.textContent = 'جاري الحذف...';
+    try {
+      const res = await fetch(`${API_BASE}/api/geocoding/places?name=${encodeURIComponent(name)}&country=${country}`, { 
+        method: 'DELETE', 
+        headers: HEADERS 
+      });
+      const data = await res.json();
+      if (data.success) {
+        info.textContent = `✅ تم حذف ${data.affected} قيد بنجاح.`;
+        setTimeout(() => location.reload(), 2000);
+      } else {
+        info.textContent = '❌ فشل الحذف.';
+      }
+    } catch (err) {
+      info.textContent = '❌ خطأ في الاتصال بالسيرفر.';
+    }
+  }
+</script>
+</body>
+</html>
diff --git a/apps/flutter_map_demo/assets/style.json b/apps/flutter_map_demo/assets/style.json
index c824d82..2b727ae 100644
--- a/apps/flutter_map_demo/assets/style.json
+++ b/apps/flutter_map_demo/assets/style.json
@@ -1,68 +1,88 @@
 {
   "version": 8,
-  "name": "Intaleq Modern Premium",
-  "metadata": {},
-  "center": [
-    36.276008,
-    33.513685
-  ],
+  "name": "Intaleq Premium Map Style",
+  "metadata": {
+    "brand": "Intaleq",
+    "version": "2.1.0",
+    "description": "Google + OSM hybrid style with 3D buildings, railways, subway, waterways, and Intaleq brand palette. DB names integrated as native OSM labels."
+  },
+  "center": [36.276008, 33.513685],
   "zoom": 15,
   "glyphs": "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
   "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
   "sources": {
     "local-osm-polygons": {
       "type": "vector",
-      "tiles": [
-        "https://tiles.intaleqapp.com/planet_osm_polygon/{z}/{x}/{y}"
-      ],
+      "tiles": ["https://tiles.intaleqapp.com/planet_osm_polygon/{z}/{x}/{y}"],
       "maxzoom": 14,
-      "attribution": "© Intaleq Mapping Solutions"
+      "attribution": "© Intaleq | © OpenStreetMap contributors"
     },
     "local-osm-lines": {
       "type": "vector",
-      "tiles": [
-        "https://tiles.intaleqapp.com/planet_osm_line/{z}/{x}/{y}"
-      ],
+      "tiles": ["https://tiles.intaleqapp.com/planet_osm_line/{z}/{x}/{y}"],
       "maxzoom": 14
     },
     "local-osm-points": {
       "type": "vector",
-      "tiles": [
-        "https://tiles.intaleqapp.com/planet_osm_point/{z}/{x}/{y}"
-      ],
+      "tiles": ["https://tiles.intaleqapp.com/planet_osm_point/{z}/{x}/{y}"],
       "maxzoom": 14
     },
-    "user-landmarks": {
+    "places_egypt": {
       "type": "vector",
-      "tiles": [
-        "https://tiles.intaleqapp.com/places_syria/{z}/{x}/{y}"
-      ],
+      "tiles": ["https://tiles.intaleqapp.com/places_egypt/{z}/{x}/{y}"],
       "maxzoom": 14
+    },
+    "intaleq_dynamic_pois": {
+      "type": "geojson",
+      "data": "https://map-saas.intaleqapp.com/api/geocoding/geojson",
+      "cluster": false
     }
   },
   "layers": [
     {
       "id": "background",
       "type": "background",
-      "paint": {
-        "background-color": "#f8f9fa"
-      }
+      "paint": { "background-color": "#EEF2F7" }
     },
     {
-      "id": "water-layer",
+      "id": "landuse-residential",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
-      "filter": [
-        "in",
-        "natural",
-        "water",
-        "lake",
-        "riverbank"
-      ],
-      "paint": {
-        "fill-color": "#a3ccff"
-      }
+      "filter": ["==", "landuse", "residential"],
+      "paint": { "fill-color": "#F0F4F8", "fill-opacity": 1 }
+    },
+    {
+      "id": "landuse-commercial",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["==", "landuse", "commercial"],
+      "paint": { "fill-color": "#FAF5EE", "fill-opacity": 1 }
+    },
+    {
+      "id": "landuse-industrial",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["in", "landuse", "industrial", "railway"],
+      "paint": { "fill-color": "#E4E8EE", "fill-opacity": 1 }
+    },
+    {
+      "id": "landuse-cemetery",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["==", "landuse", "cemetery"],
+      "paint": { "fill-color": "#B8D4BA", "fill-opacity": 0.9 }
+    },
+    {
+      "id": "landuse-military",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["==", "landuse", "military"],
+      "paint": { "fill-color": "#E2D9CC", "fill-opacity": 0.8 }
     },
     {
       "id": "park-layer",
@@ -70,67 +90,166 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": [
-        "in",
-        "leisure",
-        "park",
-        "garden",
-        "nature_reserve",
-        "pitch"
+        "any",
+        ["in", "leisure", "park", "garden", "nature_reserve", "pitch", "playground"],
+        ["in", "landuse", "grass", "meadow", "forest"],
+        ["in", "natural", "wood", "scrub", "heath"]
       ],
       "paint": {
-        "fill-color": "#dcedc8"
+        "fill-color": ["match", ["get", "leisure"], "pitch", "#9ED4A0", "playground", "#B8E6B8", "#C5E8C5"],
+        "fill-opacity": 0.85
       }
     },
     {
-      "id": "landuse-layer",
+      "id": "park-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["in", "leisure", "park", "garden", "nature_reserve"],
+      "paint": { "line-color": "#94D4A0", "line-width": 0.8, "line-opacity": 0.7 }
+    },
+    {
+      "id": "water-polygon",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": [
-        "in",
-        "landuse",
-        "residential",
-        "commercial",
-        "industrial",
-        "cemetery"
+        "any",
+        ["in", "natural", "water", "lake", "bay"],
+        ["==", "waterway", "riverbank"],
+        ["in", "landuse", "basin", "reservoir"],
+        ["==", "amenity", "fountain"]
+      ],
+      "paint": { "fill-color": "#9ECFE8", "fill-opacity": 0.95 }
+    },
+    {
+      "id": "water-polygon-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        ["in", "natural", "water", "lake", "bay"],
+        ["==", "waterway", "riverbank"],
+        ["in", "landuse", "basin", "reservoir"]
+      ],
+      "paint": { "line-color": "#6BB8D8", "line-width": 0.8, "line-opacity": 0.8 }
+    },
+    {
+      "id": "waterway-river",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        ["in", "waterway", "river", "canal"],
+        ["!=", "intermittent", "yes"],
+        ["!=", "seasonal", "yes"],
+        ["!=", "tunnel", "yes"]
       ],
       "paint": {
-        "fill-color": [
-          "match",
-          [
-            "get",
-            "landuse"
-          ],
-          "residential",
-          "#f1f3f4",
-          "commercial",
-          "#f8f9fa",
-          "industrial",
-          "#f1f3f4",
-          "cemetery",
-          "#dcedc8",
-          "#f1f3f4"
-        ]
+        "line-color": "#6BB8D8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 14, 4, 16, 7],
+        "line-opacity": 0.95
       }
     },
     {
-      "id": "building-3d",
-      "type": "fill-extrusion",
+      "id": "waterway-stream-drain",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        ["in", "waterway", "stream", "drain", "ditch"],
+        ["!=", "intermittent", "yes"],
+        ["!=", "seasonal", "yes"],
+        ["!=", "tunnel", "yes"]
+      ],
+      "minzoom": 13,
+      "paint": {
+        "line-color": "#7FBFD8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 13, 0.8, 16, 2.5],
+        "line-opacity": 0.85
+      }
+    },
+    {
+      "id": "railway-area",
+      "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
-      "minzoom": 15,
+      "filter": ["==", "landuse", "railway"],
+      "paint": { "fill-color": "#DDE2EA", "fill-opacity": 0.9 }
+    },
+    {
+      "id": "railway-rail-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
       "filter": [
-        "has",
-        "building"
+        "all",
+        ["in", "railway", "rail", "narrow_gauge", "preserved"],
+        ["!=", "service", "yard"],
+        ["!=", "service", "siding"]
       ],
-      "layout": {
-        "visibility": "visible"
-      },
+      "minzoom": 8,
       "paint": {
-        "fill-extrusion-color": "#e8eaed",
-        "fill-extrusion-height": 20,
-        "fill-extrusion-base": 0,
-        "fill-extrusion-opacity": 0.8
+        "line-color": "#B0B8C5",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 2, 12, 4, 16, 8]
+      }
+    },
+    {
+      "id": "railway-rail-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        ["in", "railway", "rail", "narrow_gauge", "preserved"],
+        ["!=", "service", "yard"],
+        ["!=", "service", "siding"]
+      ],
+      "minzoom": 8,
+      "paint": {
+        "line-color": "#6B7A8E",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 1, 12, 2.5, 16, 5],
+        "line-dasharray": [6, 4]
+      }
+    },
+    {
+      "id": "railway-subway-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": ["in", "railway", "subway", "light_rail", "tram", "monorail"],
+      "minzoom": 10,
+      "paint": {
+        "line-color": ["match", ["get", "railway"], "subway", "#CC2233", "light_rail", "#0066CC", "tram", "#8833BB", "monorail", "#008855", "#BB3344"],
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 3, 14, 6, 16, 10]
+      }
+    },
+    {
+      "id": "railway-subway-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": ["in", "railway", "subway", "light_rail", "tram", "monorail"],
+      "minzoom": 10,
+      "paint": {
+        "line-color": ["match", ["get", "railway"], "subway", "#FF3347", "light_rail", "#2288FF", "tram", "#AA44EE", "monorail", "#00BB66", "#FF4455"],
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 14, 3.5, 16, 6]
+      }
+    },
+    {
+      "id": "road-casing-track-path",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": ["in", "highway", "track", "path", "footway", "cycleway", "steps"],
+      "minzoom": 14,
+      "paint": {
+        "line-color": "#C8CDD6",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 14, 1, 16, 4],
+        "line-dasharray": [4, 3]
       }
     },
     {
@@ -138,32 +257,11 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "residential",
-        "service",
-        "unclassified",
-        "living_street",
-        "pedestrian",
-        "path",
-        "track"
-      ],
+      "filter": ["in", "highway", "residential", "service", "unclassified", "living_street", "pedestrian"],
       "paint": {
-        "line-color": "#d4d4d4",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          13,
-          1,
-          16,
-          8
-        ]
+        "line-color": "#D4D8DF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 12, 1.5, 16, 10],
+        "line-opacity": 0.7
       }
     },
     {
@@ -171,32 +269,10 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "residential",
-        "service",
-        "unclassified",
-        "living_street",
-        "pedestrian",
-        "path",
-        "track"
-      ],
+      "filter": ["in", "highway", "residential", "service", "unclassified", "living_street", "pedestrian"],
       "paint": {
-        "line-color": "#ffffff",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          13,
-          0.5,
-          16,
-          6
-        ]
+        "line-color": "#FFFFFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 12, 0.8, 16, 8]
       }
     },
     {
@@ -204,27 +280,11 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "tertiary",
-        "tertiary_link"
-      ],
+      "filter": ["in", "highway", "tertiary", "tertiary_link"],
       "paint": {
-        "line-color": "#e0e0e0",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          1.5,
-          16,
-          12
-        ]
+        "line-color": "#C9CED8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 2, 16, 14],
+        "line-opacity": 0.75
       }
     },
     {
@@ -232,27 +292,10 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "tertiary",
-        "tertiary_link"
-      ],
+      "filter": ["in", "highway", "tertiary", "tertiary_link"],
       "paint": {
-        "line-color": "#ffffff",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          1,
-          16,
-          9
-        ]
+        "line-color": "#FFFFFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 1.2, 16, 11]
       }
     },
     {
@@ -260,27 +303,11 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "secondary",
-        "secondary_link"
-      ],
+      "filter": ["in", "highway", "secondary", "secondary_link"],
       "paint": {
-        "line-color": "#cfd8dc",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          2,
-          16,
-          14
-        ]
+        "line-color": "#C4CFDE",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 2.5, 16, 16],
+        "line-opacity": 0.8
       }
     },
     {
@@ -288,27 +315,10 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "secondary",
-        "secondary_link"
-      ],
+      "filter": ["in", "highway", "secondary", "secondary_link"],
       "paint": {
-        "line-color": "#f1f5f9",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          1.5,
-          16,
-          11
-        ]
+        "line-color": "#F8FBFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 1.8, 16, 13]
       }
     },
     {
@@ -316,27 +326,11 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "primary",
-        "primary_link"
-      ],
+      "filter": ["in", "highway", "primary", "primary_link"],
       "paint": {
-        "line-color": "#facc15",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          3,
-          16,
-          16
-        ]
+        "line-color": "#C8B868",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 3, 16, 18],
+        "line-opacity": 0.7
       }
     },
     {
@@ -344,27 +338,10 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "primary",
-        "primary_link"
-      ],
+      "filter": ["in", "highway", "primary", "primary_link"],
       "paint": {
-        "line-color": "#fefce8",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          2,
-          16,
-          12
-        ]
+        "line-color": "#EDD870",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 2, 16, 14]
       }
     },
     {
@@ -372,29 +349,11 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "motorway",
-        "motorway_link",
-        "trunk",
-        "trunk_link"
-      ],
+      "filter": ["in", "highway", "motorway", "motorway_link", "trunk", "trunk_link"],
       "paint": {
-        "line-color": "#fb923c",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          4,
-          16,
-          18
-        ]
+        "line-color": "#C8A84B",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 4, 16, 20],
+        "line-opacity": 0.75
       }
     },
     {
@@ -402,188 +361,427 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "motorway",
-        "motorway_link",
-        "trunk",
-        "trunk_link"
-      ],
+      "filter": ["in", "highway", "motorway", "motorway_link", "trunk", "trunk_link"],
       "paint": {
-        "line-color": "#ffedd5",
-        "line-width": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          2.5,
-          16,
-          14
-        ]
+        "line-color": "#F0C040",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 2.5, 16, 16]
       }
     },
     {
-      "id": "road-labels",
+      "id": "building-fill-flat",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": ["has", "building"],
+      "maxzoom": 14,
+      "paint": {
+        "fill-color": "#DDD8D0",
+        "fill-opacity": 0.85,
+        "fill-outline-color": "#C4BEB4"
+      }
+    },
+    {
+      "id": "building-3d",
+      "type": "fill-extrusion",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 14,
+      "filter": ["has", "building"],
+      "paint": {
+        "fill-extrusion-color": [
+          "match", ["get", "building"],
+          "commercial", "#DDD5C5",
+          "retail",     "#E5D8C8",
+          "industrial", "#D2D8E0",
+          "church",     "#DDD4EE",
+          "mosque",     "#CCE4D0",
+          "hospital",   "#EDD8D8",
+          "school",     "#E0E6CC",
+          "university", "#D8E0C8",
+          "hotel",      "#D8DCF0",
+          "apartments", "#E0DCD4",
+                        "#DDD8D2"
+        ],
+        "fill-extrusion-height": [
+          "interpolate", ["linear"], ["zoom"],
+          14, ["*", ["coalesce", ["to-number", ["get", "building:levels"], null], 3], 2.5],
+          17, ["coalesce",
+                ["to-number", ["get", "height"], null],
+                ["*", ["to-number", ["get", "building:levels"], 3], 3.5],
+                12
+              ]
+        ],
+        "fill-extrusion-base": ["coalesce", ["to-number", ["get", "min_height"], null], 0],
+        "fill-extrusion-opacity": ["interpolate", ["linear"], ["zoom"], 14, 0.6, 16, 0.88],
+        "fill-extrusion-vertical-gradient": true
+      }
+    },
+    {
+      "id": "railway-label",
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 15,
+      "filter": ["in", "railway", "rail", "subway", "light_rail", "tram"],
+      "minzoom": 13,
       "layout": {
-        "text-field": "{name}",
-        "text-font": [
-          "Noto Sans Regular"
-        ],
-        "text-size": 13,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 10,
         "symbol-placement": "line",
-        "text-letter-spacing": 0.05,
-        "text-padding": 5,
-        "text-allow-overlap": false,
-        "text-ignore-placement": false
+        "text-padding": 6,
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#3c4043",
-        "text-halo-color": "rgba(255, 255, 255, 0.8)",
+        "text-color": ["match", ["get", "railway"], "subway", "#CC2233", "light_rail", "#0055BB", "tram", "#7722AA", "#4A5568"],
+        "text-halo-color": "rgba(255,255,255,0.9)",
         "text-halo-width": 2
       }
     },
     {
-      "id": "place-labels",
+      "id": "waterway-label",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        ["in", "waterway", "river", "canal"],
+        ["!=", "intermittent", "yes"],
+        ["has", "name"]
+      ],
+      "minzoom": 12,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.1
+      },
+      "paint": {
+        "text-color": "#2E86AB",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "building-number-polygon",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 17,
+      "filter": ["has", "addr:housenumber"],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "building-number-point",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 17,
+      "filter": ["has", "addr:housenumber"],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-minor",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": ["in", "highway", "residential", "service", "unclassified", "living_street"],
+      "minzoom": 16,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.04,
+        "text-padding": 4,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#4A5568",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-major",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": ["in", "highway", "primary", "secondary", "tertiary", "motorway", "trunk"],
+      "minzoom": 13,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 13, 11, 16, 14],
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.05,
+        "text-padding": 5,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-hospital",
       "type": "symbol",
       "source": "local-osm-points",
       "source-layer": "planet_osm_point",
       "minzoom": 13,
+      "filter": ["==", "amenity", "hospital"],
       "layout": {
-        "text-field": "{name}",
-        "text-font": [
-          "Noto Sans Regular"
-        ],
-        "text-size": [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "zoom"
-          ],
-          13,
-          12,
-          16,
-          16
-        ],
-        "text-offset": [
-          0,
-          1.5
-        ],
+        "icon-image": "hospital",
+        "icon-size": 1,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "text-offset": [0, 1.2],
         "text-anchor": "top",
-        "visibility": "visible"
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#3c4043",
-        "text-halo-color": "rgba(255, 255, 255, 0.9)",
+        "text-color": "#C0392B",
+        "text-halo-color": "white",
         "text-halo-width": 2
       }
     },
     {
-      "id": "water-fill",
-      "type": "fill",
-      "source": "local-osm-polygons",
-      "source-layer": "planet_osm_polygon",
-      "filter": ["match", ["get", "natural"], ["water"], true, false],
-      "paint": {
-        "fill-color": "#bae6fd",
-        "fill-opacity": 0.8
-      }
-    },
-    {
-      "id": "waterway-line",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "filter": ["has", "waterway"],
-      "paint": {
-        "line-color": "#7dd3fc",
-        "line-width": ["interpolate", ["linear"], ["zoom"], 12, 1, 16, 4]
-      }
-    },
-    {
-      "id": "park-fill",
-      "type": "fill",
-      "source": "local-osm-polygons",
-      "source-layer": "planet_osm_polygon",
-      "filter": ["any", ["match", ["get", "leisure"], ["park", "garden", "nature_reserve"], true, false], ["match", ["get", "landuse"], ["forest", "grass", "meadow", "orchard"], true, false]],
-      "paint": {
-        "fill-color": "#dcfce7",
-        "fill-opacity": 0.6
-      }
-    },
-    {
-      "id": "railway-line",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "filter": ["has", "railway"],
-      "paint": {
-        "line-color": "#94a3b8",
-        "line-width": 1.5,
-        "line-dasharray": [2, 1]
-      }
-    },
-    {
-      "id": "neighborhood-fill",
-      "type": "fill",
-      "source": "local-osm-polygons",
-      "source-layer": "planet_osm_polygon",
-      "filter": ["match", ["get", "landuse"], ["residential", "commercial"], true, false],
-      "paint": {
-        "fill-color": [
-          "match",
-          ["get", "landuse"],
-          "residential", "#f1f5f9",
-          "commercial", "#f8fafc",
-          "#f1f5f9"
-        ],
-        "fill-opacity": 0.5
-      }
-    },
-    {
-      "id": "road-arrows",
+      "id": "poi-pharmacy",
       "type": "symbol",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "minzoom": 16,
-      "filter": ["==", "oneway", "yes"],
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 15,
+      "filter": ["==", "amenity", "pharmacy"],
       "layout": {
-        "icon-image": "arrow",
-        "icon-size": 0.2,
-        "symbol-placement": "line",
-        "symbol-spacing": 200,
-        "icon-rotate": 90,
-        "icon-rotation-alignment": "map"
+        "icon-image": "pharmacy",
+        "icon-size": 0.8,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 10,
+        "text-offset": [0, 1.2],
+        "text-anchor": "top"
       },
       "paint": {
-        "icon-opacity": 0.8
+        "text-color": "#1A7A3C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
       }
     },
     {
-      "id": "user-landmarks-symbol",
+      "id": "poi-place-of-worship",
       "type": "symbol",
-      "source": "user-landmarks",
-      "source-layer": "places_syria",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 14,
+      "filter": ["==", "amenity", "place_of_worship"],
       "layout": {
-        "text-field": "{name_ar}",
+        "icon-image": "tourist",
+        "icon-size": 0.8,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
         "text-size": 11,
-        "text-offset": [0, 0],
-        "text-anchor": "center"
+        "text-offset": [0, 1.2],
+        "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#e11d48",
-        "text-halo-color": "#ffffff",
+        "text-color": "#1A6B3A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-restaurant-cafe",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 16,
+      "filter": ["in", "amenity", "restaurant", "cafe", "fast_food"],
+      "layout": {
+        "icon-image": ["match", ["get", "amenity"], "cafe", "cafe", "restaurant"],
+        "icon-size": 0.8,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 10,
+        "text-offset": [0, 1.2],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#3D4A5C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "poi-school",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 14,
+      "filter": ["in", "amenity", "school", "university", "college"],
+      "layout": {
+        "icon-image": "college",
+        "icon-size": 0.8,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "text-offset": [0, 1.2],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#5A4A8A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-transit-station",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 12,
+      "filter": [
+        "any",
+        ["==", "railway", "station"],
+        ["==", "railway", "halt"],
+        ["==", "railway", "tram_stop"],
+        ["==", "station", "subway"],
+        ["==", "amenity", "bus_station"]
+      ],
+      "layout": {
+        "icon-image": "rail",
+        "icon-size": 1,
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": 11,
+        "text-offset": [0, 1.4],
+        "text-anchor": "top",
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#CC2233",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-area",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 10,
+      "filter": ["has", "name"],
+      "layout": {
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 10, 10, 14, 13],
+        "text-padding": 8,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#34495E",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-point",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 10,
+      "filter": [
+        "any",
+        ["in", "place", "city", "town", "village", "suburb", "neighbourhood", "hamlet", "locality", "quarter"],
+        ["in", "natural", "peak", "spring"]
+      ],
+      "layout": {
+        "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Regular"],
+        "text-size": [
+          "interpolate", ["linear"], ["zoom"],
+          10, ["match", ["get", "place"], "city", 16, "town", 14, 11],
+          14, ["match", ["get", "place"], "city", 20, "town", 16, 13],
+          17, 14
+        ],
+        "text-letter-spacing": ["match", ["get", "place"], "city", 0.08, "town", 0.05, 0.02],
+        "text-anchor": "center",
+        "text-padding": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": ["match", ["get", "place"],
+          "city",         "#1A2740",
+          "town",         "#2C3E50",
+          "village",      "#3D4F62",
+          "suburb",       "#4A5568",
+          "neighbourhood","#556677",
+                          "#607080"
+        ],
+        "text-halo-color": "rgba(255,255,255,0.92)",
+        "text-halo-width": ["match", ["get", "place"], "city", 3, "town", 2.5, 2]
+      }
+    },
+    {
+      "id": "places-egypt-labels",
+      "type": "symbol",
+      "source": "places_egypt",
+      "source-layer": "places_egypt",
+      "minzoom": 12,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name_ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Bold"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 12, 9, 16, 13],
+        "text-offset": [0, 1.5],
+        "text-anchor": "top",
+        "text-padding": 8,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "intaleq-db-label",
+      "type": "symbol",
+      "source": "intaleq_dynamic_pois",
+      "minzoom": 14,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name_ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Bold"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 14, 11, 17, 14],
+        "text-offset": [0, 1.1],
+        "text-anchor": "top",
+        "text-allow-overlap": false,
+        "text-ignore-placement": false,
+        "text-padding": 4
+      },
+      "paint": {
+        "text-color": "#7A5C10",
+        "text-halo-color": "rgba(255,255,255,0.95)",
         "text-halo-width": 2
       }
     }
diff --git a/apps/web/public/map-demo.html b/apps/web/public/map-demo.html
index 7f9fee6..94acb02 100644
--- a/apps/web/public/map-demo.html
+++ b/apps/web/public/map-demo.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Intaleq Premium Map V3 - خرائط انطلاقة الذكية</title>
-  
+
   <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
   <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
 
@@ -12,275 +12,644 @@
     @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Noto+Sans+Arabic:wght@400;700&display=swap');
 
     :root {
-      --primary: #c0a048; /* Warm primary from style v3 */
-      --primary-dark: #b89038;
-      --accent: #2563eb;
-      --bg-glass: rgba(255, 255, 255, 0.85);
-      --shadow: 0 12px 40px rgba(0,0,0,0.12);
+      --primary:      #c0a048;
+      --primary-dark: #8a6e20;
+      --accent:       #2563eb;
+      --bg-glass:     rgba(255, 255, 255, 0.88);
+      --shadow:       0 12px 40px rgba(0,0,0,0.12);
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { 
-      font-family: 'Outfit', 'Noto Sans Arabic', sans-serif; 
-      background: #F2EDE4; 
-      overflow: hidden; 
+
+    body {
+      font-family: 'Outfit', 'Noto Sans Arabic', sans-serif;
+      background: #F2EDE4;
+      overflow: hidden;
       color: #342C20;
     }
 
-    #map { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; }
+    /* ── MAP ── */
+    #map { width: 100vw; height: 100vh; position: absolute; inset: 0; }
 
+    /* ── LOADING OVERLAY ── */
+    #loading {
+      display: none; position: fixed; inset: 0;
+      background: rgba(242,237,228,0.6);
+      z-index: 2000; align-items: center; justify-content: center;
+      backdrop-filter: blur(6px);
+    }
+    .spinner {
+      width: 40px; height: 40px;
+      border: 4px solid rgba(192,160,72,0.15);
+      border-top: 4px solid var(--primary);
+      border-radius: 50%;
+      animation: spin 0.9s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── CONTROLS PANEL ── */
     .controls {
       position: absolute; top: 24px; right: 24px; z-index: 100;
-      background: var(--bg-glass); 
-      backdrop-filter: blur(12px) saturate(180%);
-      -webkit-backdrop-filter: blur(12px) saturate(180%);
+      background: var(--bg-glass);
+      backdrop-filter: blur(14px) saturate(180%);
+      -webkit-backdrop-filter: blur(14px) saturate(180%);
       border-radius: 24px; padding: 28px; width: 380px;
-      box-shadow: var(--shadow); 
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      transition: all 0.3s ease;
-    }
-
-    .branding {
-      position: absolute; bottom: 32px; left: 32px; z-index: 100;
-      background: var(--bg-glass); 
-      backdrop-filter: blur(8px);
-      padding: 10px 20px; border-radius: 12px;
-      display: flex; align-items: center; gap: 12px; 
-      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
-      border: 1px solid rgba(255, 255, 255, 0.4);
+      box-shadow: var(--shadow);
+      border: 1px solid rgba(255,255,255,0.35);
     }
 
     .badge {
       display: inline-block; padding: 4px 10px; border-radius: 6px;
-      font-size: 11px; font-weight: 800; background: var(--primary); color: white;
+      font-size: 11px; font-weight: 800;
+      background: var(--primary); color: #fff;
       margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
     }
 
-    h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; color: #18100A; }
-    p { font-size: 14px; color: #584840; margin-bottom: 24px; line-height: 1.5; }
+    .panel-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: #18100A; }
+    .panel-desc  { font-size: 13px; color: #584840; margin-bottom: 20px; line-height: 1.55; }
 
-    .btn-group { display: flex; flex-direction: column; gap: 12px; }
+    /* ── SEARCH ── */
+    .search-wrap { position: relative; margin-bottom: 20px; }
+    .search-wrap input {
+      width: 100%; padding: 13px 60px 13px 16px;
+      border-radius: 12px; border: 1.5px solid #ddd;
+      font-family: inherit; font-size: 14px;
+      outline: none; transition: border-color 0.25s;
+      background: rgba(255,255,255,0.7);
+    }
+    .search-wrap input:focus { border-color: var(--primary); }
+    .search-wrap .search-btn {
+      position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+      background: var(--primary); color: #fff;
+      border: none; padding: 6px 13px; border-radius: 8px;
+      cursor: pointer; font-size: 12px; font-weight: 700;
+      transition: background 0.2s;
+    }
+    .search-wrap .search-btn:hover { background: var(--primary-dark); }
+
+    #search-results {
+      display: none; max-height: 220px; overflow-y: auto;
+      background: #fff; border-radius: 12px;
+      border: 1px solid #eee;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
+      margin-top: 8px;
+    }
+    .result-item {
+      padding: 11px 16px; border-bottom: 1px solid #f5f5f5;
+      cursor: pointer; transition: background 0.15s;
+    }
+    .result-item:last-child { border-bottom: none; }
+    .result-item:hover { background: #fdfaf5; }
+    .result-item .name  { font-weight: 700; font-size: 13px; }
+    .result-item .meta  { font-size: 11px; color: #999; margin-top: 2px; }
+
+    /* ── ROUTE BUTTONS ── */
+    .btn-group { display: flex; flex-direction: column; gap: 10px; }
 
     .btn {
-      position: relative; padding: 16px 20px; border: none; border-radius: 16px;
-      font-size: 15px; font-weight: 700; cursor: pointer; 
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      padding: 15px 18px; border: none; border-radius: 14px;
+      font-size: 14px; font-weight: 700; cursor: pointer;
       display: flex; align-items: center; justify-content: space-between;
-      overflow: hidden;
+      transition: transform 0.25s, box-shadow 0.25s;
+      font-family: inherit;
+    }
+    .btn .label-sub { font-size: 11px; font-weight: 400; opacity: 0.75; margin-bottom: 2px; }
+    .btn .icon { font-size: 20px; }
+
+    .btn-gold {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      color: #fff;
+      box-shadow: 0 4px 16px rgba(192,160,72,0.28);
+    }
+    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(192,160,72,0.38); }
+
+    .btn-white {
+      background: #fff; color: #342C20;
+      border: 1px solid rgba(0,0,0,0.06);
+      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
+    }
+    .btn-white:hover { background: #fdfaf5; transform: translateY(-2px); }
+
+    /* ── STATUS BOX ── */
+    #status {
+      display: none; margin-top: 20px;
+      background: rgba(253,250,245,0.7);
+      border: 1.5px dashed var(--primary);
+      border-radius: 14px; padding: 16px; font-size: 13px;
+      line-height: 1.65;
+      animation: fadeUp 0.35s ease-out;
+    }
+    .status-row {
+      display: flex; justify-content: space-between; margin-top: 6px;
+    }
+    .status-row span:last-child { font-weight: 800; }
+
+    /* ── DB NAMES INDICATOR ── */
+    #db-status {
+      margin-top: 14px; padding: 10px 14px;
+      background: rgba(192,160,72,0.08);
+      border-radius: 10px; font-size: 12px; color: #7A5C10;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .dot-gold {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--primary); flex-shrink: 0;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
     }
 
-    .btn-primary { 
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); 
-      color: white; 
-      box-shadow: 0 4px 15px rgba(192, 160, 72, 0.3);
+    /* ── BRANDING ── */
+    .branding {
+      position: absolute; bottom: 28px; left: 28px; z-index: 100;
+      background: var(--bg-glass); backdrop-filter: blur(8px);
+      padding: 10px 18px; border-radius: 12px;
+      display: flex; align-items: center; gap: 10px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.09);
+      border: 1px solid rgba(255,255,255,0.4);
     }
-    .btn-primary:hover { 
-      transform: translateY(-3px); 
-      box-shadow: 0 8px 25px rgba(192, 160, 72, 0.4);
+    .branding span { font-size: 12px; font-weight: 800; color: #18100A; letter-spacing: 0.5px; }
+
+    /* ── CONTEXT MENU ── */
+    #context-menu {
+      display: none; position: fixed; z-index: 3000;
+      background: var(--bg-glass); backdrop-filter: blur(12px);
+      border-radius: 12px; min-width: 180px;
+      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+      border: 1px solid rgba(255,255,255,0.4);
+      padding: 6px;
+    }
+    .menu-item {
+      padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 10px;
+      transition: background 0.2s;
+    }
+    .menu-item:hover { background: rgba(192,160,72,0.12); color: var(--primary-dark); }
+    .menu-item .icon { font-size: 16px; }
+
+    /* ── ADMIN PANEL ── */
+    #admin-panel {
+      position: absolute; bottom: 84px; right: 24px; z-index: 100;
+      background: var(--bg-glass); backdrop-filter: blur(14px);
+      border-radius: 20px; padding: 20px; width: 340px;
+      box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.3);
+      display: none; animation: fadeUp 0.3s;
+    }
+    .admin-title { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+    .admin-close { cursor: pointer; opacity: 0.5; margin-right: auto; font-size: 18px; }
+
+    .delete-group { margin-top: 15px; }
+    .delete-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; opacity: 0.7; }
+    .delete-group input, .delete-group select {
+      width: 100%; padding: 10px; border-radius: 8px; border: 1.5px solid #eee;
+      font-size: 13px; margin-bottom: 10px; outline: none;
+    }
+    .delete-group input:focus { border-color: #c0392b; }
+    .btn-delete {
+      width: 100%; padding: 10px; background: #c0392b; color: #fff; border: none;
+      border-radius: 10px; font-weight: 800; cursor: pointer;
     }
 
-    .btn-secondary { 
-      background: white; 
-      color: #342C20; 
-      border: 1px solid rgba(0,0,0,0.05);
-      box-shadow: 0 4px 10px rgba(0,0,0,0.03);
-    }
-    .btn-secondary:hover { 
-      background: #fdfaf5; 
-      transform: translateY(-2px);
-      box-shadow: 0 6px 15px rgba(0,0,0,0.05);
+    #toggle-admin {
+      position: absolute; top: 110px; left: 10px; z-index: 100;
+      background: var(--bg-glass); border: none; border-radius: 50%;
+      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
+      box-shadow: var(--shadow); cursor: pointer; font-size: 20px;
     }
 
-    .btn span.icon { font-size: 18px; }
-
-    .info-box {
-      background: rgba(253, 250, 245, 0.6); 
-      border-radius: 16px; padding: 18px; font-size: 14px; 
-      color: #342C20; margin-top: 24px;
-      border: 1px dashed var(--primary); 
-      line-height: 1.6; display: none;
-      animation: fadeIn 0.4s ease-out;
-    }
-
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-
-    #loading { 
-      display: none; position: fixed; inset: 0; 
-      background: rgba(242, 237, 228, 0.6); 
-      z-index: 2000; align-items: center; justify-content: center; 
-      backdrop-filter: blur(6px); 
-    }
-    .spinner {
-      width: 40px; height: 40px; border: 4px solid rgba(192, 160, 72, 0.1);
-      border-top: 4px solid var(--primary); border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
-    /* Custom Scrollbar for better look */
-    ::-webkit-scrollbar { width: 6px; }
+    /* ── SCROLLBAR ── */
+    ::-webkit-scrollbar { width: 5px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
   </style>
 </head>
 <body>
 
+<!-- MAP -->
 <div id="map"></div>
 
+<!-- LOADING -->
 <div id="loading">
-  <div style="text-align: center;">
-    <div class="spinner" style="margin: 0 auto 15px;"></div>
-    <strong style="color: var(--primary-dark);">جاري حساب المسار الذكي...</strong>
+  <div style="text-align:center">
+    <div class="spinner" style="margin: 0 auto 14px;"></div>
+    <strong style="color:var(--primary-dark)">جاري حساب المسار الذكي...</strong>
   </div>
 </div>
 
+<!-- BRANDING -->
 <div class="branding">
-  <img src="/intaleq-logo.png" alt="Logo" style="height: 24px;" onerror="this.style.display='none'">
-  <span style="font-size: 13px; font-weight: 800; color: #18100A; letter-spacing: 0.5px;">INTALEQ PREMIUM MAPS</span>
+  <img src="/intaleq-logo.png" alt="Logo" style="height:22px" onerror="this.style.display='none'">
+  <span>INTALEQ PREMIUM MAPS</span>
 </div>
 
+<!-- CONTROLS -->
 <div class="controls">
-  <div class="badge">Version 3.0.0</div>
-  <h2>🗺️ خرائط انطلاقة الذكية</h2>
-  <p>حلول جغرافية متقدمة لمنطقة الشرق الأوسط وشمال أفريقيا بدقة متناهية ونظام عرض ثلاثي الأبعاد.</p>
-  
+  <div class="badge">v3.1.0</div>
+  <div class="panel-title">🗺️ خرائط انطلاقة الذكية</div>
+  <p class="panel-desc">حلول جغرافية متقدمة لمنطقة الشرق الأوسط وشمال أفريقيا — عرض ثلاثي الأبعاد وأسماء مباشرة من قاعدة البيانات.</p>
+
+  <!-- SEARCH -->
+  <div class="search-wrap">
+    <input id="search-input" type="text" placeholder="ابحث عن مكان... (مسجد، مستشفى، ...)" />
+    <button class="search-btn" onclick="performSearch()">بحث</button>
+    <div id="search-results"></div>
+  </div>
+
+  <!-- ROUTE BUTTONS -->
   <div class="btn-group">
-    <button class="btn btn-primary" onclick="handleRoute('LEVANT')">
-      <div style="text-align: right;">
-        <div style="font-size: 12px; opacity: 0.8; margin-bottom: 2px;">المسار المقترح - سوريا</div>
-        <span>عمان ➔ دمشق</span>
+    <button class="btn btn-gold" onclick="handleRoute('LEVANT')">
+      <div>
+        <div class="label-sub">مسار مقترح — سوريا</div>
+        <span>عمّان ← دمشق</span>
       </div>
       <span class="icon">🚀</span>
     </button>
 
-    <button class="btn btn-secondary" onclick="handleRoute('EGYPT')">
-      <div style="text-align: right;">
-        <div style="font-size: 12px; opacity: 0.7; margin-bottom: 2px;">المسار المقترح - مصر</div>
-        <span>شبرا ➔ الزمالك</span>
+    <button class="btn btn-white" onclick="handleRoute('EGYPT')">
+      <div>
+        <div class="label-sub">مسار مقترح — مصر</div>
+        <span>شبرا ← الزمالك</span>
       </div>
       <span class="icon">🇪🇬</span>
     </button>
   </div>
-  
-  <div id="status" class="info-box"></div>
+
+  <!-- STATUS -->
+  <div id="status"></div>
+
+  <!-- DB NAMES INDICATOR -->
+  <div id="db-status">
+    <div class="dot-gold"></div>
+    <span id="db-status-text">جاري تحميل الأسماء من قاعدة البيانات...</span>
+  </div>
+</div>
+
+<!-- TOGGLE ADMIN -->
+<button id="toggle-admin" onclick="toggleAdminPanel()" title="إدارة البيانات">⚙️</button>
+
+<!-- CONTEXT MENU -->
+<div id="context-menu">
+  <div class="menu-item" onclick="copyCoords()">
+    <span class="icon">📋</span> <span>نسخ الإحداثيات</span>
+  </div>
+  <div class="menu-item" id="menu-delete-btn" style="color:#c0392b" onclick="deleteFromContext()">
+    <span class="icon">🗑️</span> <span>حذف هذا الموقع</span>
+  </div>
+</div>
+
+<!-- ADMIN PANEL -->
+<div id="admin-panel">
+  <div class="admin-title">
+    <span>🛡️ إدارة البيانات</span>
+    <span class="admin-close" onclick="toggleAdminPanel()">×</span>
+  </div>
+  <div class="delete-group">
+    <label>حذف موقع بواسطة الاسم</label>
+    <input type="text" id="admin-delete-name" placeholder="أدخل اسم الموقع..." />
+    <label>الدولة</label>
+    <select id="admin-delete-country">
+      <option value="syria">سوريا</option>
+      <option value="jordan">الأردن</option>
+      <option value="egypt">مصر</option>
+    </select>
+    <button class="btn-delete" onclick="handleAdminDelete()">حذف الموقع نهائياً</button>
+  </div>
+  <div id="admin-info" style="font-size:11px; margin-top:10px; opacity:0.6; text-align:center"></div>
 </div>
 
 <script>
-  const TILES_URL = 'https://tiles.intaleqapp.com';
-  const API_KEY   = 'intaleq_secret_2026';
-  
-  const COORDS = {
+  /* ───────────────────────────────────────────
+     CONFIG
+  ─────────────────────────────────────────── */
+  const API_BASE = 'https://map-saas.intaleqapp.com';
+  const API_KEY  = 'intaleq_secret_2026';
+  const HEADERS  = { 'x-api-key': API_KEY };
+
+  const ROUTES = {
     LEVANT: {
-      from: [35.9106, 31.9539], // Amman
-      to: [36.2765, 33.5138],   // Damascus
+      from:   [35.9106, 31.9539],   // Amman
+      to:     [36.2765, 33.5138],   // Damascus
       center: [36.09, 32.73],
-      zoom: 8
+      zoom:   8,
+      color:  '#c0a048'
     },
     EGYPT: {
-      from: [31.2427, 30.0931], // Shoubra
-      to: [31.2201, 30.0619],   // Zamalek
+      from:   [31.2427, 30.0931],   // Shoubra
+      to:     [31.2201, 30.0619],   // Zamalek
       center: [31.23, 30.07],
-      zoom: 13
+      zoom:   13,
+      color:  '#2563eb'
     }
   };
 
-  maplibregl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js', null, true);
+  /* ───────────────────────────────────────────
+     MAP INIT
+  ─────────────────────────────────────────── */
+  maplibregl.setRTLTextPlugin(
+    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js',
+    null, true
+  );
 
   const map = new maplibregl.Map({
     container: 'map',
-    center: COORDS.LEVANT.center,
-    zoom: COORDS.LEVANT.zoom,
-    attributionControl: false,
-    style: './style.json?v=' + Date.now(),
-    pitch: 45,
-    bearing: -10
+    center:    ROUTES.LEVANT.center,
+    zoom:      ROUTES.LEVANT.zoom,
+    style:     './style.json',          // ← style.json fixed (no duplicate IDs)
+    pitch:     0,
+    bearing:   0,
+    attributionControl: false
   });
 
-  let mapLoaded = false;
+  map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
+
+  /* ───────────────────────────────────────────
+     MAP LOAD — count DB names shown on map
+  ─────────────────────────────────────────── */
   map.on('load', () => {
-    mapLoaded = true;
-    console.log('Intaleq Style v3 Loaded');
+    console.log('[Intaleq] Map loaded — style v3.1.0');
+    loadDBNamesStatus();
   });
 
-  function decodePoly(str) {
-    let index = 0, lat = 0, lng = 0, coordinates = [];
-    while (index < str.length) {
-      let byte, shift = 0, result = 0;
-      do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
-      lat += ((result & 1) ? ~(result >> 1) : (result >> 1));
-      shift = 0; result = 0;
-      do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
-      lng += ((result & 1) ? ~(result >> 1) : (result >> 1));
-      coordinates.push([lng / 1e5, lat / 1e5]);
+  /*
+   * Fetch the same GeoJSON the style uses for intaleq_dynamic_pois
+   * and report how many names were loaded on the map.
+   */
+  async function loadDBNamesStatus() {
+    const statusEl = document.getElementById('db-status-text');
+    try {
+      const res  = await fetch(`${API_BASE}/api/geocoding/geojson`, { headers: HEADERS });
+      const data = await res.json();
+      const count = data?.features?.length ?? 0;
+
+      statusEl.textContent = count > 0
+        ? `✅ ${count} اسم مُحمَّل من قاعدة البيانات على الخريطة`
+        : '⚠️ لا توجد أسماء في قاعدة البيانات حتى الآن';
+
+      // Refresh the source in case MapLibre cached an empty response
+      if (count > 0 && map.getSource('intaleq_dynamic_pois')) {
+        map.getSource('intaleq_dynamic_pois').setData(data);
+      }
+    } catch (err) {
+      console.warn('[Intaleq] DB names fetch failed:', err);
+      statusEl.textContent = '⚠️ تعذّر الاتصال بقاعدة البيانات';
     }
-    return coordinates;
   }
 
+  /* ───────────────────────────────────────────
+     POLYLINE DECODER
+  ─────────────────────────────────────────── */
+  function decodePoly(str) {
+    let i = 0, lat = 0, lng = 0, out = [];
+    while (i < str.length) {
+      let byte, shift = 0, result = 0;
+      do { byte = str.charCodeAt(i++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lat += (result & 1) ? ~(result >> 1) : (result >> 1);
+      shift = 0; result = 0;
+      do { byte = str.charCodeAt(i++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lng += (result & 1) ? ~(result >> 1) : (result >> 1);
+      out.push([lng / 1e5, lat / 1e5]);
+    }
+    return out;
+  }
+
+  /* ───────────────────────────────────────────
+     ROUTING
+  ─────────────────────────────────────────── */
   async function handleRoute(region) {
-    if (!mapLoaded) return;
-    
-    const config = COORDS[region];
-    const l = document.getElementById('loading');
-    const s = document.getElementById('status');
-    
-    l.style.display = 'flex';
-    s.style.display = 'none';
+    const cfg = ROUTES[region];
+    const loading = document.getElementById('loading');
+    const status  = document.getElementById('status');
+
+    loading.style.display = 'flex';
+    status.style.display  = 'none';
 
     try {
-      const url = `https://map-saas.intaleqapp.com/api/maps/route?fromLat=${config.from[1]}&fromLng=${config.from[0]}&toLat=${config.to[1]}&toLng=${config.to[0]}`;
-      const res = await fetch(url, { headers: { 'x-api-key': API_KEY } });
+      const url = `${API_BASE}/api/maps/route`
+        + `?fromLat=${cfg.from[1]}&fromLng=${cfg.from[0]}`
+        + `&toLat=${cfg.to[1]}&toLng=${cfg.to[0]}`;
+
+      const res  = await fetch(url, { headers: HEADERS });
       const data = await res.json();
-      
-      if (data.statusCode >= 400) throw new Error(data.message || 'Routing API Error');
-      
-      let coords = typeof data.points === 'string' ? decodePoly(data.points) : data.points;
-      if (!coords || coords.length === 0) throw new Error('No valid route points found');
+
+      if (data.statusCode >= 400) throw new Error(data.message || 'Routing error');
+
+      const coords = typeof data.points === 'string'
+        ? decodePoly(data.points)
+        : data.points;
+
+      if (!coords?.length) throw new Error('No route points returned');
+
+      // Add or update route layer
+      const geojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } };
 
-      // Add/Update Route Source
       if (map.getSource('route')) {
-        map.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: coords } });
+        map.getSource('route').setData(geojson);
+        map.setPaintProperty('route-line', 'line-color', cfg.color);
       } else {
-        map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } } });
-        map.addLayer({ 
-          id: 'route-line', 
-          type: 'line', 
-          source: 'route', 
+        map.addSource('route', { type: 'geojson', data: geojson });
+        map.addLayer({
+          id: 'route-line', type: 'line', source: 'route',
           layout: { 'line-join': 'round', 'line-cap': 'round' },
-          paint: { 
-            'line-color': region === 'EGYPT' ? '#2563eb' : '#c0a048', 
-            'line-width': 8, 
-            'line-opacity': 0.85 
-          } 
+          paint:  { 'line-color': cfg.color, 'line-width': 7, 'line-opacity': 0.88 }
         });
       }
-      
-      // Fit bounds
-      const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
-      map.fitBounds(bounds, { padding: 120, duration: 2000 });
-      
-      setTimeout(() => {
-        s.style.display = 'block';
-        s.innerHTML = `
-          <div style="font-weight: 700; margin-bottom: 8px; color: var(--primary-dark);">🏁 ملخص الرحلة الذكي</div>
-          <div style="display: flex; justify-content: space-between;">
-             <span>المسافة الفاصلة:</span>
-             <span style="font-weight: 800;">${(data.distance/1000).toFixed(1)} كم</span>
-          </div>
-          <div style="display: flex; justify-content: space-between;">
-             <span>الوقت المتوقع:</span>
-             <span style="font-weight: 800;">${(data.duration/60).toFixed(0)} دقيقة</span>
-          </div>
-        `;
-      }, 500);
 
-    } catch (e) {
-      console.error(e);
-      alert('عذراً، فشل في حساب المسار: ' + e.message);
-    } finally { 
-      l.style.display = 'none'; 
+      // Fit map to route
+      const bounds = coords.reduce(
+        (b, c) => b.extend(c),
+        new maplibregl.LngLatBounds(coords[0], coords[0])
+      );
+      map.fitBounds(bounds, { padding: 110, duration: 1800 });
+
+      // Show summary
+      setTimeout(() => {
+        status.style.display = 'block';
+        status.innerHTML = `
+          <div style="font-weight:700;color:var(--primary-dark);margin-bottom:8px">🏁 ملخص الرحلة</div>
+          <div class="status-row"><span>المسافة:</span><span>${(data.distance / 1000).toFixed(1)} كم</span></div>
+          <div class="status-row"><span>الوقت المتوقع:</span><span>${Math.round(data.duration / 60)} دقيقة</span></div>
+        `;
+      }, 600);
+
+    } catch (err) {
+      console.error('[Intaleq] Route error:', err);
+      status.style.display = 'block';
+      status.innerHTML = `<span style="color:#c0392b">⚠️ تعذّر تحميل المسار: ${err.message}</span>`;
+    } finally {
+      loading.style.display = 'none';
+    }
+  }
+
+  /* ───────────────────────────────────────────
+     SEARCH
+  ─────────────────────────────────────────── */
+  let searchMarkers = [];
+
+  async function performSearch() {
+    const q       = document.getElementById('search-input').value.trim();
+    const resultsEl = document.getElementById('search-results');
+    if (!q) return;
+
+    const center = map.getCenter();
+    const url = `${API_BASE}/api/geocoding/search`
+      + `?q=${encodeURIComponent(q)}`
+      + `&lat=${center.lat}&lng=${center.lng}&radius=20000`;
+
+    resultsEl.style.display = 'block';
+    resultsEl.innerHTML = '<div class="result-item"><span class="meta">جاري البحث...</span></div>';
+
+    // Clear old markers
+    searchMarkers.forEach(m => m.remove());
+    searchMarkers = [];
+
+    try {
+      const res  = await fetch(url, { headers: HEADERS });
+      const data = await res.json();
+
+      if (!data.results?.length) {
+        resultsEl.innerHTML = '<div class="result-item"><span class="meta">لا توجد نتائج.</span></div>';
+        return;
+      }
+
+      resultsEl.innerHTML = '';
+      data.results.forEach(place => {
+        const lng = parseFloat(place.longitude);
+        const lat = parseFloat(place.latitude);
+        const name = place.name_ar || place.name;
+        const dist = place.distance ? `${(place.distance / 1000).toFixed(2)} كم` : '';
+
+        // Result row
+        const item = document.createElement('div');
+        item.className = 'result-item';
+        item.innerHTML = `
+          <div class="name">${name}</div>
+          <div class="meta">${place.category || ''} ${dist ? '• ' + dist : ''}</div>
+        `;
+        item.onclick = () => map.flyTo({ center: [lng, lat], zoom: 16 });
+        resultsEl.appendChild(item);
+
+        // Map marker — gold for DB entries, blue for OSM
+        const isDB     = place.source === 'user_submitted' || place.source === 'intaleq_db';
+        const color    = isDB ? '#c0a048' : '#2563eb';
+        
+        let popupHTML = `<strong>${name}</strong><br><span style="font-size:12px;color:#888">${place.category || ''}</span>`;
+        if (isDB) {
+          popupHTML += `<hr style="margin:8px 0; border:0; border-top:1px solid #eee">
+                        <button onclick="directDelete(${place.id})" style="background:#c0392b; color:#fff; border:0; padding:4px 8px; border-radius:4px; font-size:10px; cursor:pointer; width:100%">حذف القيد</button>`;
+        }
+
+        const marker   = new maplibregl.Marker({ color })
+          .setLngLat([lng, lat])
+          .setPopup(new maplibregl.Popup({ offset: 25 })
+            .setHTML(popupHTML))
+          .addTo(map);
+
+        searchMarkers.push(marker);
+      });
+
+    } catch (err) {
+      console.error('[Intaleq] Search error:', err);
+      resultsEl.innerHTML = '<div class="result-item" style="color:#c0392b">⚠️ فشل الاتصال بخدمة البحث.</div>';
+    }
+  }
+
+  // Enter key triggers search
+  document.getElementById('search-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter') performSearch();
+  });
+
+  /* ───────────────────────────────────────────
+     INTERACTIVE MANAGEMENT
+  ─────────────────────────────────────────── */
+  let lastRightClick = null;
+
+  map.on('contextmenu', (e) => {
+    lastRightClick = e.lngLat;
+    const menu = document.getElementById('context-menu');
+    menu.style.display = 'block';
+    menu.style.left = e.point.x + 'px';
+    menu.style.top = e.point.y + 'px';
+  });
+
+  document.addEventListener('click', () => {
+    document.getElementById('context-menu').style.display = 'none';
+  });
+
+  function copyCoords() {
+    if (!lastRightClick) return;
+    const txt = `${lastRightClick.lat.toFixed(7)}, ${lastRightClick.lng.toFixed(7)}`;
+    navigator.clipboard.writeText(txt);
+    alert('تم نسخ الإحداثيات: ' + txt);
+  }
+
+  async function deleteFromContext() {
+    if (!lastRightClick) return;
+    const country = prompt('يرجى كتابة الدولة للتأكيد (syria, jordan, egypt):', 'syria');
+    if (!country) return;
+    
+    const name = prompt('يرجى كتابة اسم الموقع لحذفه نهائياً:');
+    if (!name) return;
+
+    await apiDelete(name, country);
+  }
+
+  function toggleAdminPanel() {
+    const p = document.getElementById('admin-panel');
+    p.style.display = p.style.display === 'block' ? 'none' : 'block';
+  }
+
+  async function handleAdminDelete() {
+    const name = document.getElementById('admin-delete-name').value.trim();
+    const country = document.getElementById('admin-delete-country').value;
+    if (!name) return alert('يرجى إدخال الاسم');
+    if (!confirm(`هل أنت متأكد من حذف 모든 المواقع المسمى "${name}" في ${country}؟`)) return;
+
+    await apiDelete(name, country);
+  }
+
+  async function directDelete(id) {
+    const country = prompt('يرجى تحديد الدولة (syria, jordan, egypt):', 'syria');
+    if (!country) return;
+    if (!confirm('هل أنت متأكد من حذف هذا القيد؟')) return;
+
+    try {
+      const res = await fetch(`${API_BASE}/api/geocoding/places?id=${id}&country=${country}`, { 
+        method: 'DELETE', 
+        headers: HEADERS 
+      });
+      const data = await res.json();
+      if (data.success) {
+        alert('تم الحذف بنجاح');
+        location.reload();
+      }
+    } catch (err) {
+      alert('فشل الحذف');
+    }
+  }
+
+  async function apiDelete(name, country) {
+    const info = document.getElementById('admin-info');
+    info.textContent = 'جاري الحذف...';
+    try {
+      const res = await fetch(`${API_BASE}/api/geocoding/places?name=${encodeURIComponent(name)}&country=${country}`, { 
+        method: 'DELETE', 
+        headers: HEADERS 
+      });
+      const data = await res.json();
+      if (data.success) {
+        info.textContent = `✅ تم حذف ${data.affected} قيد بنجاح.`;
+        setTimeout(() => location.reload(), 2000);
+      } else {
+        info.textContent = '❌ فشل الحذف.';
+      }
+    } catch (err) {
+      info.textContent = '❌ خطأ في الاتصال بالسيرفر.';
     }
   }
 </script>
 </body>
 </html>
-
diff --git a/apps/web/public/style-mobile.json b/apps/web/public/style-mobile.json
index cda1ae6..13c17f3 100644
--- a/apps/web/public/style-mobile.json
+++ b/apps/web/public/style-mobile.json
@@ -1,8 +1,15 @@
 {
   "version": 8,
-  "name": "Intaleq Modern Premium",
-  "metadata": {},
-  "center": [36.276008, 33.513685],
+  "name": "Intaleq Premium Map Style",
+  "metadata": {
+    "brand": "Intaleq",
+    "version": "2.0.0",
+    "description": "Google + OSM hybrid style with 3D buildings, railways, subway, waterways, and Intaleq brand palette"
+  },
+  "center": [
+    36.276008,
+    33.513685
+  ],
   "zoom": 15,
   "glyphs": "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
   "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
@@ -13,7 +20,7 @@
         "https://tiles.intaleqapp.com/planet_osm_polygon/{z}/{x}/{y}"
       ],
       "maxzoom": 14,
-      "attribution": "© Intaleq Mapping Solutions"
+      "attribution": "© Intaleq | © OpenStreetMap contributors"
     },
     "local-osm-lines": {
       "type": "vector",
@@ -28,6 +35,13 @@
         "https://tiles.intaleqapp.com/planet_osm_point/{z}/{x}/{y}"
       ],
       "maxzoom": 14
+    },
+    "imported-pois": {
+      "type": "vector",
+      "tiles": [
+        "https://tiles.intaleqapp.com/places_egypt/{z}/{x}/{y}"
+      ],
+      "maxzoom": 14
     }
   },
   "layers": [
@@ -35,23 +49,83 @@
       "id": "background",
       "type": "background",
       "paint": {
-        "background-color": "#f8f9fa"
+        "background-color": "#EEF2F7"
       }
     },
     {
-      "id": "water-layer",
+      "id": "landuse-residential",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "residential"
+      ],
+      "paint": {
+        "fill-color": "#F0F4F8",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-commercial",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "commercial"
+      ],
+      "paint": {
+        "fill-color": "#FAF5EE",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-industrial",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": [
         "in",
-        "natural",
-        "water",
-        "lake",
-        "riverbank"
+        "landuse",
+        "industrial",
+        "railway"
       ],
       "paint": {
-        "fill-color": "#a3ccff"
+        "fill-color": "#E4E8EE",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-cemetery",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "cemetery"
+      ],
+      "paint": {
+        "fill-color": "#B8D4BA",
+        "fill-opacity": 0.9
+      }
+    },
+    {
+      "id": "landuse-military",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "military"
+      ],
+      "paint": {
+        "fill-color": "#E2D9CC",
+        "fill-opacity": 0.8
       }
     },
     {
@@ -60,67 +134,470 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": [
-        "in",
-        "leisure",
-        "park",
-        "garden",
-        "nature_reserve",
-        "pitch"
-      ],
-      "paint": {
-        "fill-color": "#dcedc8"
-      }
-    },
-    {
-      "id": "landuse-layer",
-      "type": "fill",
-      "source": "local-osm-polygons",
-      "source-layer": "planet_osm_polygon",
-      "filter": [
-        "in",
-        "landuse",
-        "residential",
-        "commercial",
-        "industrial",
-        "cemetery"
+        "any",
+        [
+          "in",
+          "leisure",
+          "park",
+          "garden",
+          "nature_reserve",
+          "pitch",
+          "playground"
+        ],
+        [
+          "in",
+          "landuse",
+          "grass",
+          "meadow",
+          "forest"
+        ],
+        [
+          "in",
+          "natural",
+          "wood",
+          "scrub",
+          "heath"
+        ]
       ],
       "paint": {
         "fill-color": [
           "match",
           [
             "get",
-            "landuse"
+            "leisure"
           ],
-          "residential",
-          "#f1f3f4",
-          "commercial",
-          "#f8f9fa",
-          "industrial",
-          "#f1f3f4",
-          "cemetery",
-          "#dcedc8",
-          "#f1f3f4"
+          "pitch",
+          "#9ED4A0",
+          "playground",
+          "#B8E6B8",
+          "#C5E8C5"
+        ],
+        "fill-opacity": 0.85
+      }
+    },
+    {
+      "id": "park-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "in",
+        "leisure",
+        "park",
+        "garden",
+        "nature_reserve"
+      ],
+      "paint": {
+        "line-color": "#94D4A0",
+        "line-width": 0.8,
+        "line-opacity": 0.7
+      }
+    },
+    {
+      "id": "water-polygon",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        [
+          "in",
+          "natural",
+          "water",
+          "lake",
+          "bay"
+        ],
+        [
+          "==",
+          "waterway",
+          "riverbank"
+        ],
+        [
+          "in",
+          "landuse",
+          "basin",
+          "reservoir"
+        ],
+        [
+          "==",
+          "amenity",
+          "fountain"
+        ]
+      ],
+      "paint": {
+        "fill-color": "#9ECFE8",
+        "fill-opacity": 0.95
+      }
+    },
+    {
+      "id": "water-polygon-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        [
+          "in",
+          "natural",
+          "water",
+          "lake",
+          "bay"
+        ],
+        [
+          "==",
+          "waterway",
+          "riverbank"
+        ],
+        [
+          "in",
+          "landuse",
+          "basin",
+          "reservoir"
+        ]
+      ],
+      "paint": {
+        "line-color": "#6BB8D8",
+        "line-width": 0.8,
+        "line-opacity": 0.8
+      }
+    },
+    {
+      "id": "waterway-river",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "river",
+          "canal"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "!=",
+          "seasonal",
+          "yes"
+        ],
+        [
+          "!=",
+          "tunnel",
+          "yes"
+        ]
+      ],
+      "paint": {
+        "line-color": "#6BB8D8",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          1.5,
+          14,
+          4,
+          16,
+          7
+        ],
+        "line-opacity": 0.95
+      }
+    },
+    {
+      "id": "waterway-stream-drain",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "stream",
+          "drain",
+          "ditch"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "!=",
+          "seasonal",
+          "yes"
+        ],
+        [
+          "!=",
+          "tunnel",
+          "yes"
+        ]
+      ],
+      "minzoom": 13,
+      "paint": {
+        "line-color": "#7FBFD8",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          13,
+          0.8,
+          16,
+          2.5
+        ],
+        "line-opacity": 0.85
+      }
+    },
+    {
+      "id": "railway-area",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "railway"
+      ],
+      "paint": {
+        "fill-color": "#DDE2EA",
+        "fill-opacity": 0.9
+      }
+    },
+    {
+      "id": "railway-rail-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "railway",
+          "rail",
+          "narrow_gauge",
+          "preserved"
+        ],
+        [
+          "!=",
+          "service",
+          "yard"
+        ],
+        [
+          "!=",
+          "service",
+          "siding"
+        ]
+      ],
+      "minzoom": 8,
+      "paint": {
+        "line-color": "#B0B8C5",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          8,
+          2,
+          12,
+          4,
+          16,
+          8
         ]
       }
     },
     {
-      "id": "building-3d",
-      "type": "fill-extrusion",
-      "source": "local-osm-polygons",
-      "source-layer": "planet_osm_polygon",
-      "minzoom": 15,
+      "id": "railway-rail-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
       "filter": [
-        "has",
-        "building"
+        "all",
+        [
+          "in",
+          "railway",
+          "rail",
+          "narrow_gauge",
+          "preserved"
+        ],
+        [
+          "!=",
+          "service",
+          "yard"
+        ],
+        [
+          "!=",
+          "service",
+          "siding"
+        ]
       ],
-      "layout": {
-        "visibility": "visible"
-      },
+      "minzoom": 8,
       "paint": {
-        "fill-extrusion-color": "#e8eaed",
-        "fill-extrusion-height": 20,
-        "fill-extrusion-base": 0,
-        "fill-extrusion-opacity": 0.8
+        "line-color": "#6B7A8E",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          8,
+          1,
+          12,
+          2.5,
+          16,
+          5
+        ],
+        "line-dasharray": [
+          6,
+          4
+        ]
+      }
+    },
+    {
+      "id": "railway-subway-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "railway",
+        "subway",
+        "light_rail",
+        "tram",
+        "monorail"
+      ],
+      "minzoom": 10,
+      "paint": {
+        "line-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#CC2233",
+          "light_rail",
+          "#0066CC",
+          "tram",
+          "#8833BB",
+          "monorail",
+          "#008855",
+          "#BB3344"
+        ],
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          3,
+          14,
+          6,
+          16,
+          10
+        ]
+      }
+    },
+    {
+      "id": "railway-subway-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "railway",
+        "subway",
+        "light_rail",
+        "tram",
+        "monorail"
+      ],
+      "minzoom": 10,
+      "paint": {
+        "line-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#FF3347",
+          "light_rail",
+          "#2288FF",
+          "tram",
+          "#AA44EE",
+          "monorail",
+          "#00BB66",
+          "#FF4455"
+        ],
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          1.5,
+          14,
+          3.5,
+          16,
+          6
+        ]
+      }
+    },
+    {
+      "id": "road-casing-track-path",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "track",
+        "path",
+        "footway",
+        "cycleway",
+        "steps"
+      ],
+      "minzoom": 14,
+      "paint": {
+        "line-color": "#C8CDD6",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          14,
+          1,
+          16,
+          4
+        ],
+        "line-dasharray": [
+          4,
+          3
+        ]
       }
     },
     {
@@ -135,12 +612,10 @@
         "service",
         "unclassified",
         "living_street",
-        "pedestrian",
-        "path",
-        "track"
+        "pedestrian"
       ],
       "paint": {
-        "line-color": "#d4d4d4",
+        "line-color": "#C8D0DA",
         "line-width": [
           "interpolate",
           [
@@ -149,10 +624,10 @@
           [
             "zoom"
           ],
-          13,
-          1,
+          12,
+          1.5,
           16,
-          8
+          10
         ]
       }
     },
@@ -168,12 +643,10 @@
         "service",
         "unclassified",
         "living_street",
-        "pedestrian",
-        "path",
-        "track"
+        "pedestrian"
       ],
       "paint": {
-        "line-color": "#ffffff",
+        "line-color": "#FFFFFF",
         "line-width": [
           "interpolate",
           [
@@ -182,10 +655,10 @@
           [
             "zoom"
           ],
-          13,
-          0.5,
+          12,
+          0.8,
           16,
-          6
+          8
         ]
       }
     },
@@ -201,7 +674,7 @@
         "tertiary_link"
       ],
       "paint": {
-        "line-color": "#e0e0e0",
+        "line-color": "#BCC5D2",
         "line-width": [
           "interpolate",
           [
@@ -210,10 +683,10 @@
           [
             "zoom"
           ],
-          12,
-          1.5,
+          11,
+          2,
           16,
-          12
+          14
         ]
       }
     },
@@ -229,7 +702,7 @@
         "tertiary_link"
       ],
       "paint": {
-        "line-color": "#ffffff",
+        "line-color": "#FFFFFF",
         "line-width": [
           "interpolate",
           [
@@ -238,10 +711,10 @@
           [
             "zoom"
           ],
-          12,
-          1,
+          11,
+          1.2,
           16,
-          9
+          11
         ]
       }
     },
@@ -257,7 +730,7 @@
         "secondary_link"
       ],
       "paint": {
-        "line-color": "#cfd8dc",
+        "line-color": "#B8D4EC",
         "line-width": [
           "interpolate",
           [
@@ -266,10 +739,10 @@
           [
             "zoom"
           ],
-          12,
-          2,
+          11,
+          2.5,
           16,
-          14
+          16
         ]
       }
     },
@@ -285,7 +758,7 @@
         "secondary_link"
       ],
       "paint": {
-        "line-color": "#f1f5f9",
+        "line-color": "#F0F7FF",
         "line-width": [
           "interpolate",
           [
@@ -294,10 +767,10 @@
           [
             "zoom"
           ],
-          12,
-          1.5,
+          11,
+          1.8,
           16,
-          11
+          13
         ]
       }
     },
@@ -313,7 +786,7 @@
         "primary_link"
       ],
       "paint": {
-        "line-color": "#facc15",
+        "line-color": "#E8C96A",
         "line-width": [
           "interpolate",
           [
@@ -322,10 +795,10 @@
           [
             "zoom"
           ],
-          12,
+          10,
           3,
           16,
-          16
+          18
         ]
       }
     },
@@ -341,7 +814,7 @@
         "primary_link"
       ],
       "paint": {
-        "line-color": "#fefce8",
+        "line-color": "#FFC72C",
         "line-width": [
           "interpolate",
           [
@@ -350,10 +823,10 @@
           [
             "zoom"
           ],
-          12,
+          10,
           2,
           16,
-          12
+          14
         ]
       }
     },
@@ -371,7 +844,7 @@
         "trunk_link"
       ],
       "paint": {
-        "line-color": "#fb923c",
+        "line-color": "#F4A261",
         "line-width": [
           "interpolate",
           [
@@ -380,10 +853,10 @@
           [
             "zoom"
           ],
-          12,
+          9,
           4,
           16,
-          18
+          20
         ]
       }
     },
@@ -401,7 +874,7 @@
         "trunk_link"
       ],
       "paint": {
-        "line-color": "#ffedd5",
+        "line-color": "#E76F2A",
         "line-width": [
           "interpolate",
           [
@@ -410,45 +883,331 @@
           [
             "zoom"
           ],
-          12,
+          9,
           2.5,
           16,
-          14
+          16
         ]
       }
     },
     {
-      "id": "road-labels",
+      "id": "building-fill-flat",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "has",
+        "building"
+      ],
+      "maxzoom": 15,
+      "paint": {
+        "fill-color": "#DDD8D0",
+        "fill-opacity": 0.9,
+        "fill-outline-color": "#C8C2B8"
+      }
+    },
+    {
+      "id": "building-3d",
+      "type": "fill-extrusion",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 15,
+      "filter": [
+        "has",
+        "building"
+      ],
+      "paint": {
+        "fill-extrusion-color": [
+          "match",
+          [
+            "get",
+            "building"
+          ],
+          "commercial",
+          "#E0D8CC",
+          "retail",
+          "#E8DDD0",
+          "industrial",
+          "#D8DDE4",
+          "church",
+          "#E4DCF0",
+          "mosque",
+          "#D4EAD8",
+          "hospital",
+          "#F0E0E0",
+          "school",
+          "#E8ECD4",
+          "university",
+          "#E4E8D4",
+          "hotel",
+          "#E0E4EE",
+          "apartments",
+          "#E8E4DC",
+          "#E4DFDA"
+        ],
+        "fill-extrusion-height": [
+          "coalesce",
+          [
+            "to-number",
+            [
+              "get",
+              "height"
+            ],
+            0
+          ],
+          [
+            "*",
+            [
+              "to-number",
+              [
+                "get",
+                "building:levels"
+              ],
+              3
+            ],
+            3.5
+          ],
+          12
+        ],
+        "fill-extrusion-base": [
+          "coalesce",
+          [
+            "to-number",
+            [
+              "get",
+              "min_height"
+            ],
+            0
+          ],
+          0
+        ],
+        "fill-extrusion-opacity": 0.85,
+        "fill-extrusion-vertical-gradient": true
+      }
+    },
+    {
+      "id": "railway-label",
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 15,
+      "filter": [
+        "in",
+        "railway",
+        "rail",
+        "subway",
+        "light_rail",
+        "tram"
+      ],
+      "minzoom": 13,
       "layout": {
-        "text-field": "{name}",
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
         "text-font": [
           "Noto Sans Regular"
         ],
-        "text-size": 13,
+        "text-size": 10,
         "symbol-placement": "line",
-        "text-letter-spacing": 0.05,
-        "text-padding": 5,
-        "text-allow-overlap": false,
-        "text-ignore-placement": false
+        "text-padding": 6,
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#3c4043",
-        "text-halo-color": "rgba(255, 255, 255, 0.8)",
+        "text-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#CC2233",
+          "light_rail",
+          "#0055BB",
+          "tram",
+          "#7722AA",
+          "#4A5568"
+        ],
+        "text-halo-color": "rgba(255,255,255,0.9)",
         "text-halo-width": 2
       }
     },
     {
-      "id": "place-labels",
+      "id": "waterway-label",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "river",
+          "canal"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "has",
+          "name"
+        ]
+      ],
+      "minzoom": 12,
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.1
+      },
+      "paint": {
+        "text-color": "#2E86AB",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "building-number-polygon",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 17,
+      "filter": [
+        "has",
+        "addr:housenumber"
+      ],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-allow-overlap": false,
+        "text-ignore-placement": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "building-number-point",
       "type": "symbol",
       "source": "local-osm-points",
       "source-layer": "planet_osm_point",
+      "minzoom": 17,
+      "filter": [
+        "has",
+        "addr:housenumber"
+      ],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-minor",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "residential",
+        "service",
+        "unclassified",
+        "living_street"
+      ],
+      "minzoom": 16,
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.04,
+        "text-padding": 4,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#4A5568",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-major",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "primary",
+        "secondary",
+        "tertiary",
+        "motorway",
+        "trunk"
+      ],
       "minzoom": 13,
       "layout": {
-        "text-field": "{name}",
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
         "text-font": [
           "Noto Sans Regular"
         ],
@@ -461,22 +1220,489 @@
             "zoom"
           ],
           13,
-          12,
+          11,
           16,
-          16
+          14
         ],
-        "text-offset": [
-          0,
-          1.5
-        ],
-        "text-anchor": "top",
-        "visibility": "visible"
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.05,
+        "text-padding": 5,
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#3c4043",
-        "text-halo-color": "rgba(255, 255, 255, 0.9)",
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
         "text-halo-width": 2
       }
+    },
+    {
+      "id": "poi-hospital",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 13,
+      "filter": [
+        "==",
+        "amenity",
+        "hospital"
+      ],
+      "layout": {
+        "icon-image": "hospital",
+        "icon-size": 1,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top",
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#C0392B",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-pharmacy",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 15,
+      "filter": [
+        "==",
+        "amenity",
+        "pharmacy"
+      ],
+      "layout": {
+        "icon-image": "pharmacy",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#1A7A3C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "poi-place-of-worship",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 14,
+      "filter": [
+        "==",
+        "amenity",
+        "place_of_worship"
+      ],
+      "layout": {
+        "icon-image": "tourist",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#1A6B3A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-restaurant-cafe",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 16,
+      "filter": [
+        "in",
+        "amenity",
+        "restaurant",
+        "cafe",
+        "fast_food"
+      ],
+      "layout": {
+        "icon-image": [
+          "match",
+          [
+            "get",
+            "amenity"
+          ],
+          "cafe",
+          "cafe",
+          "restaurant"
+        ],
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#3D4A5C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "poi-school",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 14,
+      "filter": [
+        "in",
+        "amenity",
+        "school",
+        "university",
+        "college"
+      ],
+      "layout": {
+        "icon-image": "college",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#5A4A8A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-transit-station",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 12,
+      "filter": [
+        "any",
+        [
+          "==",
+          "railway",
+          "station"
+        ],
+        [
+          "==",
+          "railway",
+          "halt"
+        ],
+        [
+          "==",
+          "railway",
+          "tram_stop"
+        ],
+        [
+          "==",
+          "station",
+          "subway"
+        ],
+        [
+          "==",
+          "amenity",
+          "bus_station"
+        ]
+      ],
+      "layout": {
+        "icon-image": "rail",
+        "icon-size": 1,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.4
+        ],
+        "text-anchor": "top",
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#CC2233",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-area",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 10,
+      "filter": [
+        "has",
+        "name"
+      ],
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          10,
+          14,
+          13
+        ],
+        "text-padding": 8,
+        "text-allow-overlap": false,
+        "text-ignore-placement": false
+      },
+      "paint": {
+        "text-color": "#34495E",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-point",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 10,
+      "filter": [
+        "any",
+        [
+          "in",
+          "place",
+          "city",
+          "town",
+          "village",
+          "suburb",
+          "neighbourhood",
+          "hamlet",
+          "locality",
+          "quarter"
+        ],
+        [
+          "in",
+          "natural",
+          "peak",
+          "spring"
+        ]
+      ],
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          [
+            "match",
+            [
+              "get",
+              "place"
+            ],
+            "city",
+            16,
+            "town",
+            14,
+            11
+          ],
+          14,
+          [
+            "match",
+            [
+              "get",
+              "place"
+            ],
+            "city",
+            20,
+            "town",
+            16,
+            13
+          ],
+          17,
+          14
+        ],
+        "text-letter-spacing": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          0.08,
+          "town",
+          0.05,
+          0.02
+        ],
+        "text-anchor": "center",
+        "text-padding": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          "#1A2740",
+          "town",
+          "#2C3E50",
+          "village",
+          "#3D4F62",
+          "suburb",
+          "#4A5568",
+          "neighbourhood",
+          "#556677",
+          "#607080"
+        ],
+        "text-halo-color": "rgba(255,255,255,0.92)",
+        "text-halo-width": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          3,
+          "town",
+          2.5,
+          2
+        ]
+      }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/style.json b/apps/web/public/style.json
index edcd0f0..2b727ae 100644
--- a/apps/web/public/style.json
+++ b/apps/web/public/style.json
@@ -1,24 +1,15 @@
 {
   "version": 8,
-  "name": "Intaleq Premium Map Style v3",
+  "name": "Intaleq Premium Map Style",
   "metadata": {
     "brand": "Intaleq",
-    "version": "3.0.0",
-    "description": "Warm MENA palette · Google+OSM hybrid · 3D buildings with light · LOD zoom system · Full layer set"
+    "version": "2.1.0",
+    "description": "Google + OSM hybrid style with 3D buildings, railways, subway, waterways, and Intaleq brand palette. DB names integrated as native OSM labels."
   },
   "center": [36.276008, 33.513685],
   "zoom": 15,
-
-  "light": {
-    "anchor": "viewport",
-    "color": "#ffffff",
-    "intensity": 0.45,
-    "position": [1.5, 225, 30]
-  },
-
   "glyphs": "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
   "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
-
   "sources": {
     "local-osm-polygons": {
       "type": "vector",
@@ -40,29 +31,26 @@
       "type": "vector",
       "tiles": ["https://tiles.intaleqapp.com/places_egypt/{z}/{x}/{y}"],
       "maxzoom": 14
+    },
+    "intaleq_dynamic_pois": {
+      "type": "geojson",
+      "data": "https://map-saas.intaleqapp.com/api/geocoding/geojson",
+      "cluster": false
     }
   },
-
   "layers": [
-
     {
       "id": "background",
       "type": "background",
-      "paint": {
-        "background-color": "#F2EDE4"
-      }
+      "paint": { "background-color": "#EEF2F7" }
     },
-
     {
       "id": "landuse-residential",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["==", "landuse", "residential"],
-      "paint": {
-        "fill-color": "#EDE7DC",
-        "fill-opacity": 1
-      }
+      "paint": { "fill-color": "#F0F4F8", "fill-opacity": 1 }
     },
     {
       "id": "landuse-commercial",
@@ -70,10 +58,7 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["==", "landuse", "commercial"],
-      "paint": {
-        "fill-color": "#F5EED8",
-        "fill-opacity": 1
-      }
+      "paint": { "fill-color": "#FAF5EE", "fill-opacity": 1 }
     },
     {
       "id": "landuse-industrial",
@@ -81,10 +66,7 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["in", "landuse", "industrial", "railway"],
-      "paint": {
-        "fill-color": "#DDD8CC",
-        "fill-opacity": 1
-      }
+      "paint": { "fill-color": "#E4E8EE", "fill-opacity": 1 }
     },
     {
       "id": "landuse-cemetery",
@@ -92,10 +74,7 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["==", "landuse", "cemetery"],
-      "paint": {
-        "fill-color": "#B0C8A8",
-        "fill-opacity": 0.85
-      }
+      "paint": { "fill-color": "#B8D4BA", "fill-opacity": 0.9 }
     },
     {
       "id": "landuse-military",
@@ -103,12 +82,8 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["==", "landuse", "military"],
-      "paint": {
-        "fill-color": "#D8CEB8",
-        "fill-opacity": 0.75
-      }
+      "paint": { "fill-color": "#E2D9CC", "fill-opacity": 0.8 }
     },
-
     {
       "id": "park-layer",
       "type": "fill",
@@ -117,17 +92,12 @@
       "filter": [
         "any",
         ["in", "leisure", "park", "garden", "nature_reserve", "pitch", "playground"],
-        ["in", "landuse",  "grass", "meadow", "forest"],
-        ["in", "natural",  "wood", "scrub", "heath"]
+        ["in", "landuse", "grass", "meadow", "forest"],
+        ["in", "natural", "wood", "scrub", "heath"]
       ],
       "paint": {
-        "fill-color": [
-          "match", ["get", "leisure"],
-          "pitch",      "#8DC88C",
-          "playground", "#A8D8A0",
-          "#B4D8A4"
-        ],
-        "fill-opacity": 0.8
+        "fill-color": ["match", ["get", "leisure"], "pitch", "#9ED4A0", "playground", "#B8E6B8", "#C5E8C5"],
+        "fill-opacity": 0.85
       }
     },
     {
@@ -136,13 +106,8 @@
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["in", "leisure", "park", "garden", "nature_reserve"],
-      "paint": {
-        "line-color": "#80B880",
-        "line-width": 0.8,
-        "line-opacity": 0.65
-      }
+      "paint": { "line-color": "#94D4A0", "line-width": 0.8, "line-opacity": 0.7 }
     },
-
     {
       "id": "water-polygon",
       "type": "fill",
@@ -155,10 +120,7 @@
         ["in", "landuse", "basin", "reservoir"],
         ["==", "amenity", "fountain"]
       ],
-      "paint": {
-        "fill-color": "#7EC8DF",
-        "fill-opacity": 0.92
-      }
+      "paint": { "fill-color": "#9ECFE8", "fill-opacity": 0.95 }
     },
     {
       "id": "water-polygon-outline",
@@ -171,13 +133,8 @@
         ["==", "waterway", "riverbank"],
         ["in", "landuse", "basin", "reservoir"]
       ],
-      "paint": {
-        "line-color": "#50A8CC",
-        "line-width": 0.8,
-        "line-opacity": 0.75
-      }
+      "paint": { "line-color": "#6BB8D8", "line-width": 0.8, "line-opacity": 0.8 }
     },
-
     {
       "id": "waterway-river",
       "type": "line",
@@ -187,15 +144,13 @@
         "all",
         ["in", "waterway", "river", "canal"],
         ["!=", "intermittent", "yes"],
-        ["!=", "seasonal",    "yes"],
-        ["!=", "tunnel",      "yes"]
+        ["!=", "seasonal", "yes"],
+        ["!=", "tunnel", "yes"]
       ],
       "paint": {
-        "line-color": "#50B8D4",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          8, 0.8,   10, 1.5,   14, 4,   16, 7
-        ],
-        "line-opacity": 0.92
+        "line-color": "#6BB8D8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 14, 4, 16, 7],
+        "line-opacity": 0.95
       }
     },
     {
@@ -203,52 +158,43 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 13,
       "filter": [
         "all",
         ["in", "waterway", "stream", "drain", "ditch"],
         ["!=", "intermittent", "yes"],
-        ["!=", "seasonal",    "yes"],
-        ["!=", "tunnel",      "yes"]
+        ["!=", "seasonal", "yes"],
+        ["!=", "tunnel", "yes"]
       ],
+      "minzoom": 13,
       "paint": {
-        "line-color": "#68C0D8",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          13, 0.7,   16, 2.5
-        ],
-        "line-opacity": 0.8
+        "line-color": "#7FBFD8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 13, 0.8, 16, 2.5],
+        "line-opacity": 0.85
       }
     },
-
     {
       "id": "railway-area",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": ["==", "landuse", "railway"],
-      "paint": {
-        "fill-color": "#D0CBBF",
-        "fill-opacity": 0.85
-      }
+      "paint": { "fill-color": "#DDE2EA", "fill-opacity": 0.9 }
     },
-
     {
       "id": "railway-rail-casing",
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 8,
       "filter": [
         "all",
         ["in", "railway", "rail", "narrow_gauge", "preserved"],
         ["!=", "service", "yard"],
         ["!=", "service", "siding"]
       ],
+      "minzoom": 8,
       "paint": {
-        "line-color": "#A8A090",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          8, 1.5,   12, 3.5,   16, 7
-        ]
+        "line-color": "#B0B8C5",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 2, 12, 4, 16, 8]
       }
     },
     {
@@ -256,41 +202,29 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 8,
       "filter": [
         "all",
         ["in", "railway", "rail", "narrow_gauge", "preserved"],
         ["!=", "service", "yard"],
         ["!=", "service", "siding"]
       ],
+      "minzoom": 8,
       "paint": {
-        "line-color": "#6A6860",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          8, 0.8,   12, 2,   16, 4
-        ],
+        "line-color": "#6B7A8E",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 1, 12, 2.5, 16, 5],
         "line-dasharray": [6, 4]
       }
     },
-
     {
       "id": "railway-subway-casing",
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 10,
       "filter": ["in", "railway", "subway", "light_rail", "tram", "monorail"],
+      "minzoom": 10,
       "paint": {
-        "line-color": [
-          "match", ["get", "railway"],
-          "subway",     "#A01828",
-          "light_rail", "#005099",
-          "tram",       "#660EA0",
-          "monorail",   "#006844",
-          "#883040"
-        ],
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          10, 3,   14, 6,   16, 10
-        ]
+        "line-color": ["match", ["get", "railway"], "subway", "#CC2233", "light_rail", "#0066CC", "tram", "#8833BB", "monorail", "#008855", "#BB3344"],
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 3, 14, 6, 16, 10]
       }
     },
     {
@@ -298,40 +232,26 @@
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 10,
       "filter": ["in", "railway", "subway", "light_rail", "tram", "monorail"],
+      "minzoom": 10,
       "paint": {
-        "line-color": [
-          "match", ["get", "railway"],
-          "subway",     "#E8253A",
-          "light_rail", "#1A80F0",
-          "tram",       "#9932DC",
-          "monorail",   "#00A858",
-          "#E03048"
-        ],
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          10, 1.5,   14, 3.5,   16, 6
-        ]
+        "line-color": ["match", ["get", "railway"], "subway", "#FF3347", "light_rail", "#2288FF", "tram", "#AA44EE", "monorail", "#00BB66", "#FF4455"],
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 14, 3.5, 16, 6]
       }
     },
-
     {
       "id": "road-casing-track-path",
       "type": "line",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 14,
       "filter": ["in", "highway", "track", "path", "footway", "cycleway", "steps"],
+      "minzoom": 14,
       "paint": {
-        "line-color": "#C0B8A8",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          14, 0.8,   16, 3
-        ],
-        "line-dasharray": [4, 3],
-        "line-opacity": 0.7
+        "line-color": "#C8CDD6",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 14, 1, 16, 4],
+        "line-dasharray": [4, 3]
       }
     },
-
     {
       "id": "road-casing-minor",
       "type": "line",
@@ -339,11 +259,9 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "residential", "service", "unclassified", "living_street", "pedestrian"],
       "paint": {
-        "line-color": "#C8C0B0",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          12, 1.5,   16, 10
-        ],
-        "line-opacity": 0.65
+        "line-color": "#D4D8DF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 12, 1.5, 16, 10],
+        "line-opacity": 0.7
       }
     },
     {
@@ -353,13 +271,10 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "residential", "service", "unclassified", "living_street", "pedestrian"],
       "paint": {
-        "line-color": "#FDFAF5",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          12, 0.8,   16, 8
-        ]
+        "line-color": "#FFFFFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 12, 0.8, 16, 8]
       }
     },
-
     {
       "id": "road-casing-tertiary",
       "type": "line",
@@ -367,11 +282,9 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "tertiary", "tertiary_link"],
       "paint": {
-        "line-color": "#BEB5A4",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          11, 2,   16, 14
-        ],
-        "line-opacity": 0.7
+        "line-color": "#C9CED8",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 2, 16, 14],
+        "line-opacity": 0.75
       }
     },
     {
@@ -381,13 +294,10 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "tertiary", "tertiary_link"],
       "paint": {
-        "line-color": "#FDFAF5",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          11, 1.2,   16, 11
-        ]
+        "line-color": "#FFFFFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 1.2, 16, 11]
       }
     },
-
     {
       "id": "road-casing-secondary",
       "type": "line",
@@ -395,11 +305,9 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "secondary", "secondary_link"],
       "paint": {
-        "line-color": "#B8B0A0",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          11, 2.5,   16, 16
-        ],
-        "line-opacity": 0.72
+        "line-color": "#C4CFDE",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 2.5, 16, 16],
+        "line-opacity": 0.8
       }
     },
     {
@@ -409,13 +317,10 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "secondary", "secondary_link"],
       "paint": {
-        "line-color": "#FDF8F0",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          11, 1.8,   16, 13
-        ]
+        "line-color": "#F8FBFF",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 11, 1.8, 16, 13]
       }
     },
-
     {
       "id": "road-casing-primary",
       "type": "line",
@@ -423,11 +328,9 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "primary", "primary_link"],
       "paint": {
-        "line-color": "#C0A048",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          10, 3,   16, 18
-        ],
-        "line-opacity": 0.68
+        "line-color": "#C8B868",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 3, 16, 18],
+        "line-opacity": 0.7
       }
     },
     {
@@ -437,13 +340,10 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "primary", "primary_link"],
       "paint": {
-        "line-color": "#F5D44C",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          10, 2,   16, 14
-        ]
+        "line-color": "#EDD870",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 10, 2, 16, 14]
       }
     },
-
     {
       "id": "road-casing-motorway-trunk",
       "type": "line",
@@ -451,11 +351,9 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "motorway", "motorway_link", "trunk", "trunk_link"],
       "paint": {
-        "line-color": "#B89038",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          9, 4,   16, 20
-        ],
-        "line-opacity": 0.72
+        "line-color": "#C8A84B",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 4, 16, 20],
+        "line-opacity": 0.75
       }
     },
     {
@@ -465,13 +363,10 @@
       "source-layer": "planet_osm_line",
       "filter": ["in", "highway", "motorway", "motorway_link", "trunk", "trunk_link"],
       "paint": {
-        "line-color": "#E8C030",
-        "line-width": ["interpolate", ["linear"], ["zoom"],
-          9, 2.5,   16, 16
-        ]
+        "line-color": "#F0C040",
+        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 2.5, 16, 16]
       }
     },
-
     {
       "id": "building-fill-flat",
       "type": "fill",
@@ -480,14 +375,11 @@
       "filter": ["has", "building"],
       "maxzoom": 14,
       "paint": {
-        "fill-color": "#CEC8BC",
-        "fill-opacity": ["interpolate", ["linear"], ["zoom"],
-          10, 0.4,   13, 0.72
-        ],
-        "fill-outline-color": "#B8B0A4"
+        "fill-color": "#DDD8D0",
+        "fill-opacity": 0.85,
+        "fill-outline-color": "#C4BEB4"
       }
     },
-
     {
       "id": "building-3d",
       "type": "fill-extrusion",
@@ -498,103 +390,78 @@
       "paint": {
         "fill-extrusion-color": [
           "match", ["get", "building"],
-          "commercial",   "#D4C8B0",
-          "retail",       "#DDD0B4",
-          "industrial",   "#C8C4B8",
-          "church",       "#D0C4DC",
-          "mosque",       "#C4D8C0",
-          "hospital",     "#DCC8C8",
-          "school",       "#D0D8BC",
-          "university",   "#C8D0B8",
-          "hotel",        "#C8CCE0",
-          "apartments",   "#D0CCC4",
-          "#CCC8C0"
+          "commercial", "#DDD5C5",
+          "retail",     "#E5D8C8",
+          "industrial", "#D2D8E0",
+          "church",     "#DDD4EE",
+          "mosque",     "#CCE4D0",
+          "hospital",   "#EDD8D8",
+          "school",     "#E0E6CC",
+          "university", "#D8E0C8",
+          "hotel",      "#D8DCF0",
+          "apartments", "#E0DCD4",
+                        "#DDD8D2"
         ],
         "fill-extrusion-height": [
           "interpolate", ["linear"], ["zoom"],
-          14, ["*", ["coalesce", ["to-number", ["get", "building:levels"], null], 3], 2.0],
-          15, ["*", ["coalesce", ["to-number", ["get", "building:levels"], null], 3], 3.0],
+          14, ["*", ["coalesce", ["to-number", ["get", "building:levels"], null], 3], 2.5],
           17, ["coalesce",
                 ["to-number", ["get", "height"], null],
                 ["*", ["to-number", ["get", "building:levels"], 3], 3.5],
                 12
               ]
         ],
-        "fill-extrusion-base": [
-          "coalesce",
-          ["to-number", ["get", "min_height"], null],
-          0
-        ],
-        "fill-extrusion-opacity": [
-          "interpolate", ["linear"], ["zoom"],
-          14, 0.55,
-          15, 0.78,
-          16, 0.92
-        ],
+        "fill-extrusion-base": ["coalesce", ["to-number", ["get", "min_height"], null], 0],
+        "fill-extrusion-opacity": ["interpolate", ["linear"], ["zoom"], 14, 0.6, 16, 0.88],
         "fill-extrusion-vertical-gradient": true
       }
     },
-
     {
       "id": "railway-label",
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 13,
       "filter": ["in", "railway", "rail", "subway", "light_rail", "tram"],
+      "minzoom": 13,
       "layout": {
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          13, 9,   16, 12
-        ],
+        "text-size": 10,
         "symbol-placement": "line",
         "text-padding": 6,
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": [
-          "match", ["get", "railway"],
-          "subway",     "#B01820",
-          "light_rail", "#005099",
-          "tram",       "#660EA0",
-          "#4A4840"
-        ],
-        "text-halo-color": "rgba(242, 237, 228, 0.95)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": ["match", ["get", "railway"], "subway", "#CC2233", "light_rail", "#0055BB", "tram", "#7722AA", "#4A5568"],
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
       }
     },
-
     {
       "id": "waterway-label",
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 12,
       "filter": [
         "all",
         ["in", "waterway", "river", "canal"],
         ["!=", "intermittent", "yes"],
         ["has", "name"]
       ],
+      "minzoom": 12,
       "layout": {
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          12, 10,   16, 13
-        ],
+        "text-size": 11,
         "symbol-placement": "line",
         "text-letter-spacing": 0.1
       },
       "paint": {
-        "text-color": "#2878A0",
-        "text-halo-color": "rgba(255, 255, 255, 0.88)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#2E86AB",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
       }
     },
-
     {
       "id": "building-number-polygon",
       "type": "symbol",
@@ -606,14 +473,12 @@
         "text-field": "{addr:housenumber}",
         "text-font": ["Noto Sans Regular"],
         "text-size": 10,
-        "text-allow-overlap": false,
-        "text-ignore-placement": false
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#585040",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 1.5,
-        "text-halo-blur": 0.3
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
       }
     },
     {
@@ -630,36 +495,31 @@
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#585040",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 1.5,
-        "text-halo-blur": 0.3
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
       }
     },
-
     {
       "id": "road-labels-minor",
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 16,
       "filter": ["in", "highway", "residential", "service", "unclassified", "living_street"],
+      "minzoom": 16,
       "layout": {
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          16, 10,   18, 12
-        ],
+        "text-size": 11,
         "symbol-placement": "line",
         "text-letter-spacing": 0.04,
         "text-padding": 4,
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#4A4438",
-        "text-halo-color": "rgba(253, 250, 245, 0.92)",
-        "text-halo-width": 1.5,
-        "text-halo-blur": 0.5
+        "text-color": "#4A5568",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 1.5
       }
     },
     {
@@ -667,27 +527,23 @@
       "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
-      "minzoom": 13,
       "filter": ["in", "highway", "primary", "secondary", "tertiary", "motorway", "trunk"],
+      "minzoom": 13,
       "layout": {
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          13, 10,   16, 13,   18, 15
-        ],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 13, 11, 16, 14],
         "symbol-placement": "line",
         "text-letter-spacing": 0.05,
         "text-padding": 5,
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#302820",
-        "text-halo-color": "rgba(253, 250, 245, 0.94)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
       }
     },
-
     {
       "id": "poi-hospital",
       "type": "symbol",
@@ -697,23 +553,18 @@
       "filter": ["==", "amenity", "hospital"],
       "layout": {
         "icon-image": "hospital",
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          13, 0.7,   16, 1.0
-        ],
+        "icon-size": 1,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          13, 9,   16, 12
-        ],
+        "text-size": 11,
         "text-offset": [0, 1.2],
         "text-anchor": "top",
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#A82020",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#C0392B",
+        "text-halo-color": "white",
+        "text-halo-width": 2
       }
     },
     {
@@ -725,22 +576,17 @@
       "filter": ["==", "amenity", "pharmacy"],
       "layout": {
         "icon-image": "pharmacy",
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          15, 0.6,   17, 0.9
-        ],
+        "icon-size": 0.8,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          15, 9,   17, 11
-        ],
+        "text-size": 10,
         "text-offset": [0, 1.2],
         "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#187840",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 1.8,
-        "text-halo-blur": 0.5
+        "text-color": "#1A7A3C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
       }
     },
     {
@@ -752,22 +598,17 @@
       "filter": ["==", "amenity", "place_of_worship"],
       "layout": {
         "icon-image": "tourist",
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          14, 0.6,   17, 0.9
-        ],
+        "icon-size": 0.8,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          14, 9,   17, 12
-        ],
+        "text-size": 11,
         "text-offset": [0, 1.2],
         "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#186838",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#1A6B3A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
       }
     },
     {
@@ -779,22 +620,17 @@
       "filter": ["in", "amenity", "restaurant", "cafe", "fast_food"],
       "layout": {
         "icon-image": ["match", ["get", "amenity"], "cafe", "cafe", "restaurant"],
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          16, 0.6,   18, 0.9
-        ],
+        "icon-size": 0.8,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          16, 9,   18, 11
-        ],
+        "text-size": 10,
         "text-offset": [0, 1.2],
         "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#403830",
-        "text-halo-color": "rgba(255, 255, 255, 0.92)",
-        "text-halo-width": 1.8,
-        "text-halo-blur": 0.5
+        "text-color": "#3D4A5C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
       }
     },
     {
@@ -806,22 +642,17 @@
       "filter": ["in", "amenity", "school", "university", "college"],
       "layout": {
         "icon-image": "college",
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          14, 0.6,   17, 0.9
-        ],
+        "icon-size": 0.8,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          14, 9,   17, 12
-        ],
+        "text-size": 11,
         "text-offset": [0, 1.2],
         "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#4A3880",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#5A4A8A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
       }
     },
     {
@@ -840,26 +671,20 @@
       ],
       "layout": {
         "icon-image": "rail",
-        "icon-size": ["interpolate", ["linear"], ["zoom"],
-          12, 0.7,   16, 1.1
-        ],
+        "icon-size": 1,
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          12, 9,   16, 12
-        ],
+        "text-size": 11,
         "text-offset": [0, 1.4],
         "text-anchor": "top",
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#A01828",
-        "text-halo-color": "rgba(255, 255, 255, 0.95)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#CC2233",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 2
       }
     },
-
     {
       "id": "place-labels-area",
       "type": "symbol",
@@ -870,18 +695,14 @@
       "layout": {
         "text-field": ["coalesce", ["get", "name:ar"], ["get", "name"], ""],
         "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          10, 9,   14, 12,   17, 14
-        ],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 10, 10, 14, 13],
         "text-padding": 8,
-        "text-allow-overlap": false,
-        "text-ignore-placement": false
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#342C20",
-        "text-halo-color": "rgba(242, 237, 228, 0.9)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#34495E",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
       }
     },
     {
@@ -900,41 +721,28 @@
         "text-font": ["Noto Sans Regular"],
         "text-size": [
           "interpolate", ["linear"], ["zoom"],
-          10, ["match", ["get", "place"], "city", 15, "town", 13, 10],
-          14, ["match", ["get", "place"], "city", 19, "town", 15, 12],
+          10, ["match", ["get", "place"], "city", 16, "town", 14, 11],
+          14, ["match", ["get", "place"], "city", 20, "town", 16, 13],
           17, 14
         ],
-        "text-letter-spacing": [
-          "match", ["get", "place"],
-          "city", 0.08,
-          "town", 0.05,
-          0.02
-        ],
+        "text-letter-spacing": ["match", ["get", "place"], "city", 0.08, "town", 0.05, 0.02],
         "text-anchor": "center",
         "text-padding": 10,
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": [
-          "match", ["get", "place"],
-          "city",          "#18100A",
-          "town",          "#28201A",
-          "village",       "#38302A",
-          "suburb",        "#483830",
-          "neighbourhood", "#504038",
-          "#584840"
+        "text-color": ["match", ["get", "place"],
+          "city",         "#1A2740",
+          "town",         "#2C3E50",
+          "village",      "#3D4F62",
+          "suburb",       "#4A5568",
+          "neighbourhood","#556677",
+                          "#607080"
         ],
-        "text-halo-color": "rgba(242, 237, 228, 0.94)",
-        "text-halo-width": [
-          "match", ["get", "place"],
-          "city", 3,
-          "town", 2.5,
-          2
-        ],
-        "text-halo-blur": 0.5
+        "text-halo-color": "rgba(255,255,255,0.92)",
+        "text-halo-width": ["match", ["get", "place"], "city", 3, "town", 2.5, 2]
       }
     },
-
     {
       "id": "places-egypt-labels",
       "type": "symbol",
@@ -943,22 +751,39 @@
       "minzoom": 12,
       "layout": {
         "text-field": ["coalesce", ["get", "name_ar"], ["get", "name"], ""],
-        "text-font": ["Noto Sans Regular"],
-        "text-size": ["interpolate", ["linear"], ["zoom"],
-          12, 9,   16, 13,   18, 15
-        ],
+        "text-font": ["Noto Sans Bold"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 12, 9, 16, 13],
         "text-offset": [0, 1.5],
         "text-anchor": "top",
         "text-padding": 8,
         "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#282018",
-        "text-halo-color": "rgba(255, 255, 255, 0.92)",
-        "text-halo-width": 2,
-        "text-halo-blur": 0.5
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "intaleq-db-label",
+      "type": "symbol",
+      "source": "intaleq_dynamic_pois",
+      "minzoom": 14,
+      "layout": {
+        "text-field": ["coalesce", ["get", "name_ar"], ["get", "name"], ""],
+        "text-font": ["Noto Sans Bold"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 14, 11, 17, 14],
+        "text-offset": [0, 1.1],
+        "text-anchor": "top",
+        "text-allow-overlap": false,
+        "text-ignore-placement": false,
+        "text-padding": 4
+      },
+      "paint": {
+        "text-color": "#7A5C10",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 2
       }
     }
-
   ]
 }
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index e47031e..4f9241a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -43,6 +43,12 @@ services:
     platform: linux/amd64
     ports:
       - "8989:8080"
+    environment:
+      - JAVA_OPTS=-Xmx2g -Xms512m
+    deploy:
+      resources:
+        limits:
+          memory: 3g
     volumes:
       - ./infrastructure/osm-data:/data
       - ./infrastructure/docker/graphhopper/config.yml:/graphhopper/config.yml
diff --git a/infrastructure/docs/style-mobile.json b/infrastructure/docs/style-mobile.json
index fc3d25a..13c17f3 100644
--- a/infrastructure/docs/style-mobile.json
+++ b/infrastructure/docs/style-mobile.json
@@ -1,32 +1,45 @@
 {
   "version": 8,
-  "name": "Intaleq Mobile Style",
-  "metadata": {},
-  "center": [36.2765, 33.5138],
-  "zoom": 12,
-  "bearing": 0,
-  "pitch": 0,
+  "name": "Intaleq Premium Map Style",
+  "metadata": {
+    "brand": "Intaleq",
+    "version": "2.0.0",
+    "description": "Google + OSM hybrid style with 3D buildings, railways, subway, waterways, and Intaleq brand palette"
+  },
+  "center": [
+    36.276008,
+    33.513685
+  ],
+  "zoom": 15,
   "glyphs": "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
   "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
   "sources": {
     "local-osm-polygons": {
       "type": "vector",
       "tiles": [
-        "https://app.intaleqapp.com/martin/planet_osm_polygon/{z}/{x}/{y}.pbf"
+        "https://tiles.intaleqapp.com/planet_osm_polygon/{z}/{x}/{y}"
       ],
-      "maxzoom": 14
+      "maxzoom": 14,
+      "attribution": "© Intaleq | © OpenStreetMap contributors"
     },
     "local-osm-lines": {
       "type": "vector",
       "tiles": [
-        "https://app.intaleqapp.com/martin/planet_osm_line/{z}/{x}/{y}.pbf"
+        "https://tiles.intaleqapp.com/planet_osm_line/{z}/{x}/{y}"
       ],
       "maxzoom": 14
     },
     "local-osm-points": {
       "type": "vector",
       "tiles": [
-        "https://app.intaleqapp.com/martin/planet_osm_point/{z}/{x}/{y}.pbf"
+        "https://tiles.intaleqapp.com/planet_osm_point/{z}/{x}/{y}"
+      ],
+      "maxzoom": 14
+    },
+    "imported-pois": {
+      "type": "vector",
+      "tiles": [
+        "https://tiles.intaleqapp.com/places_egypt/{z}/{x}/{y}"
       ],
       "maxzoom": 14
     }
@@ -36,23 +49,83 @@
       "id": "background",
       "type": "background",
       "paint": {
-        "background-color": "#f2efea"
+        "background-color": "#EEF2F7"
       }
     },
     {
-      "id": "water-layer",
+      "id": "landuse-residential",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "residential"
+      ],
+      "paint": {
+        "fill-color": "#F0F4F8",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-commercial",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "commercial"
+      ],
+      "paint": {
+        "fill-color": "#FAF5EE",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-industrial",
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
       "filter": [
         "in",
-        "natural",
-        "water",
-        "lake",
-        "riverbank"
+        "landuse",
+        "industrial",
+        "railway"
       ],
       "paint": {
-        "fill-color": "#aadaff"
+        "fill-color": "#E4E8EE",
+        "fill-opacity": 1
+      }
+    },
+    {
+      "id": "landuse-cemetery",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "cemetery"
+      ],
+      "paint": {
+        "fill-color": "#B8D4BA",
+        "fill-opacity": 0.9
+      }
+    },
+    {
+      "id": "landuse-military",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "military"
+      ],
+      "paint": {
+        "fill-color": "#E2D9CC",
+        "fill-opacity": 0.8
       }
     },
     {
@@ -60,6 +133,53 @@
       "type": "fill",
       "source": "local-osm-polygons",
       "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        [
+          "in",
+          "leisure",
+          "park",
+          "garden",
+          "nature_reserve",
+          "pitch",
+          "playground"
+        ],
+        [
+          "in",
+          "landuse",
+          "grass",
+          "meadow",
+          "forest"
+        ],
+        [
+          "in",
+          "natural",
+          "wood",
+          "scrub",
+          "heath"
+        ]
+      ],
+      "paint": {
+        "fill-color": [
+          "match",
+          [
+            "get",
+            "leisure"
+          ],
+          "pitch",
+          "#9ED4A0",
+          "playground",
+          "#B8E6B8",
+          "#C5E8C5"
+        ],
+        "fill-opacity": 0.85
+      }
+    },
+    {
+      "id": "park-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
       "filter": [
         "in",
         "leisure",
@@ -68,7 +188,722 @@
         "nature_reserve"
       ],
       "paint": {
-        "fill-color": "#c8facc"
+        "line-color": "#94D4A0",
+        "line-width": 0.8,
+        "line-opacity": 0.7
+      }
+    },
+    {
+      "id": "water-polygon",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        [
+          "in",
+          "natural",
+          "water",
+          "lake",
+          "bay"
+        ],
+        [
+          "==",
+          "waterway",
+          "riverbank"
+        ],
+        [
+          "in",
+          "landuse",
+          "basin",
+          "reservoir"
+        ],
+        [
+          "==",
+          "amenity",
+          "fountain"
+        ]
+      ],
+      "paint": {
+        "fill-color": "#9ECFE8",
+        "fill-opacity": 0.95
+      }
+    },
+    {
+      "id": "water-polygon-outline",
+      "type": "line",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "any",
+        [
+          "in",
+          "natural",
+          "water",
+          "lake",
+          "bay"
+        ],
+        [
+          "==",
+          "waterway",
+          "riverbank"
+        ],
+        [
+          "in",
+          "landuse",
+          "basin",
+          "reservoir"
+        ]
+      ],
+      "paint": {
+        "line-color": "#6BB8D8",
+        "line-width": 0.8,
+        "line-opacity": 0.8
+      }
+    },
+    {
+      "id": "waterway-river",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "river",
+          "canal"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "!=",
+          "seasonal",
+          "yes"
+        ],
+        [
+          "!=",
+          "tunnel",
+          "yes"
+        ]
+      ],
+      "paint": {
+        "line-color": "#6BB8D8",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          1.5,
+          14,
+          4,
+          16,
+          7
+        ],
+        "line-opacity": 0.95
+      }
+    },
+    {
+      "id": "waterway-stream-drain",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "stream",
+          "drain",
+          "ditch"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "!=",
+          "seasonal",
+          "yes"
+        ],
+        [
+          "!=",
+          "tunnel",
+          "yes"
+        ]
+      ],
+      "minzoom": 13,
+      "paint": {
+        "line-color": "#7FBFD8",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          13,
+          0.8,
+          16,
+          2.5
+        ],
+        "line-opacity": 0.85
+      }
+    },
+    {
+      "id": "railway-area",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "==",
+        "landuse",
+        "railway"
+      ],
+      "paint": {
+        "fill-color": "#DDE2EA",
+        "fill-opacity": 0.9
+      }
+    },
+    {
+      "id": "railway-rail-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "railway",
+          "rail",
+          "narrow_gauge",
+          "preserved"
+        ],
+        [
+          "!=",
+          "service",
+          "yard"
+        ],
+        [
+          "!=",
+          "service",
+          "siding"
+        ]
+      ],
+      "minzoom": 8,
+      "paint": {
+        "line-color": "#B0B8C5",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          8,
+          2,
+          12,
+          4,
+          16,
+          8
+        ]
+      }
+    },
+    {
+      "id": "railway-rail-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "railway",
+          "rail",
+          "narrow_gauge",
+          "preserved"
+        ],
+        [
+          "!=",
+          "service",
+          "yard"
+        ],
+        [
+          "!=",
+          "service",
+          "siding"
+        ]
+      ],
+      "minzoom": 8,
+      "paint": {
+        "line-color": "#6B7A8E",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          8,
+          1,
+          12,
+          2.5,
+          16,
+          5
+        ],
+        "line-dasharray": [
+          6,
+          4
+        ]
+      }
+    },
+    {
+      "id": "railway-subway-casing",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "railway",
+        "subway",
+        "light_rail",
+        "tram",
+        "monorail"
+      ],
+      "minzoom": 10,
+      "paint": {
+        "line-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#CC2233",
+          "light_rail",
+          "#0066CC",
+          "tram",
+          "#8833BB",
+          "monorail",
+          "#008855",
+          "#BB3344"
+        ],
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          3,
+          14,
+          6,
+          16,
+          10
+        ]
+      }
+    },
+    {
+      "id": "railway-subway-core",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "railway",
+        "subway",
+        "light_rail",
+        "tram",
+        "monorail"
+      ],
+      "minzoom": 10,
+      "paint": {
+        "line-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#FF3347",
+          "light_rail",
+          "#2288FF",
+          "tram",
+          "#AA44EE",
+          "monorail",
+          "#00BB66",
+          "#FF4455"
+        ],
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          1.5,
+          14,
+          3.5,
+          16,
+          6
+        ]
+      }
+    },
+    {
+      "id": "road-casing-track-path",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "track",
+        "path",
+        "footway",
+        "cycleway",
+        "steps"
+      ],
+      "minzoom": 14,
+      "paint": {
+        "line-color": "#C8CDD6",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          14,
+          1,
+          16,
+          4
+        ],
+        "line-dasharray": [
+          4,
+          3
+        ]
+      }
+    },
+    {
+      "id": "road-casing-minor",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "residential",
+        "service",
+        "unclassified",
+        "living_street",
+        "pedestrian"
+      ],
+      "paint": {
+        "line-color": "#C8D0DA",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          12,
+          1.5,
+          16,
+          10
+        ]
+      }
+    },
+    {
+      "id": "road-core-minor",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "residential",
+        "service",
+        "unclassified",
+        "living_street",
+        "pedestrian"
+      ],
+      "paint": {
+        "line-color": "#FFFFFF",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          12,
+          0.8,
+          16,
+          8
+        ]
+      }
+    },
+    {
+      "id": "road-casing-tertiary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "tertiary",
+        "tertiary_link"
+      ],
+      "paint": {
+        "line-color": "#BCC5D2",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          11,
+          2,
+          16,
+          14
+        ]
+      }
+    },
+    {
+      "id": "road-core-tertiary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "tertiary",
+        "tertiary_link"
+      ],
+      "paint": {
+        "line-color": "#FFFFFF",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          11,
+          1.2,
+          16,
+          11
+        ]
+      }
+    },
+    {
+      "id": "road-casing-secondary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "secondary",
+        "secondary_link"
+      ],
+      "paint": {
+        "line-color": "#B8D4EC",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          11,
+          2.5,
+          16,
+          16
+        ]
+      }
+    },
+    {
+      "id": "road-core-secondary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "secondary",
+        "secondary_link"
+      ],
+      "paint": {
+        "line-color": "#F0F7FF",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          11,
+          1.8,
+          16,
+          13
+        ]
+      }
+    },
+    {
+      "id": "road-casing-primary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "primary",
+        "primary_link"
+      ],
+      "paint": {
+        "line-color": "#E8C96A",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          3,
+          16,
+          18
+        ]
+      }
+    },
+    {
+      "id": "road-core-primary",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "primary",
+        "primary_link"
+      ],
+      "paint": {
+        "line-color": "#FFC72C",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          2,
+          16,
+          14
+        ]
+      }
+    },
+    {
+      "id": "road-casing-motorway-trunk",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "motorway",
+        "motorway_link",
+        "trunk",
+        "trunk_link"
+      ],
+      "paint": {
+        "line-color": "#F4A261",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          9,
+          4,
+          16,
+          20
+        ]
+      }
+    },
+    {
+      "id": "road-core-motorway-trunk",
+      "type": "line",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "motorway",
+        "motorway_link",
+        "trunk",
+        "trunk_link"
+      ],
+      "paint": {
+        "line-color": "#E76F2A",
+        "line-width": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          9,
+          2.5,
+          16,
+          16
+        ]
+      }
+    },
+    {
+      "id": "building-fill-flat",
+      "type": "fill",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "filter": [
+        "has",
+        "building"
+      ],
+      "maxzoom": 15,
+      "paint": {
+        "fill-color": "#DDD8D0",
+        "fill-opacity": 0.9,
+        "fill-outline-color": "#C8C2B8"
       }
     },
     {
@@ -81,19 +916,273 @@
         "has",
         "building"
       ],
-      "layout": {
-        "visibility": "visible"
-      },
       "paint": {
-        "fill-extrusion-color": "#d9d0c9",
-        "fill-extrusion-height": 40,
-        "fill-extrusion-base": 0,
-        "fill-extrusion-opacity": 0.8
+        "fill-extrusion-color": [
+          "match",
+          [
+            "get",
+            "building"
+          ],
+          "commercial",
+          "#E0D8CC",
+          "retail",
+          "#E8DDD0",
+          "industrial",
+          "#D8DDE4",
+          "church",
+          "#E4DCF0",
+          "mosque",
+          "#D4EAD8",
+          "hospital",
+          "#F0E0E0",
+          "school",
+          "#E8ECD4",
+          "university",
+          "#E4E8D4",
+          "hotel",
+          "#E0E4EE",
+          "apartments",
+          "#E8E4DC",
+          "#E4DFDA"
+        ],
+        "fill-extrusion-height": [
+          "coalesce",
+          [
+            "to-number",
+            [
+              "get",
+              "height"
+            ],
+            0
+          ],
+          [
+            "*",
+            [
+              "to-number",
+              [
+                "get",
+                "building:levels"
+              ],
+              3
+            ],
+            3.5
+          ],
+          12
+        ],
+        "fill-extrusion-base": [
+          "coalesce",
+          [
+            "to-number",
+            [
+              "get",
+              "min_height"
+            ],
+            0
+          ],
+          0
+        ],
+        "fill-extrusion-opacity": 0.85,
+        "fill-extrusion-vertical-gradient": true
       }
     },
     {
-      "id": "road-border-high",
-      "type": "line",
+      "id": "railway-label",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "railway",
+        "rail",
+        "subway",
+        "light_rail",
+        "tram"
+      ],
+      "minzoom": 13,
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "symbol-placement": "line",
+        "text-padding": 6,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": [
+          "match",
+          [
+            "get",
+            "railway"
+          ],
+          "subway",
+          "#CC2233",
+          "light_rail",
+          "#0055BB",
+          "tram",
+          "#7722AA",
+          "#4A5568"
+        ],
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "waterway-label",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "all",
+        [
+          "in",
+          "waterway",
+          "river",
+          "canal"
+        ],
+        [
+          "!=",
+          "intermittent",
+          "yes"
+        ],
+        [
+          "has",
+          "name"
+        ]
+      ],
+      "minzoom": 12,
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.1
+      },
+      "paint": {
+        "text-color": "#2E86AB",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "building-number-polygon",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 17,
+      "filter": [
+        "has",
+        "addr:housenumber"
+      ],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-allow-overlap": false,
+        "text-ignore-placement": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "building-number-point",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 17,
+      "filter": [
+        "has",
+        "addr:housenumber"
+      ],
+      "layout": {
+        "text-field": "{addr:housenumber}",
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#5A5048",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-minor",
+      "type": "symbol",
+      "source": "local-osm-lines",
+      "source-layer": "planet_osm_line",
+      "filter": [
+        "in",
+        "highway",
+        "residential",
+        "service",
+        "unclassified",
+        "living_street"
+      ],
+      "minzoom": 16,
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "symbol-placement": "line",
+        "text-letter-spacing": 0.04,
+        "text-padding": 4,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#4A5568",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "road-labels-major",
+      "type": "symbol",
       "source": "local-osm-lines",
       "source-layer": "planet_osm_line",
       "filter": [
@@ -102,275 +1191,518 @@
         "primary",
         "secondary",
         "tertiary",
-        "motorway"
+        "motorway",
+        "trunk"
       ],
-      "paint": {
-        "line-color": "#ccc",
-        "line-width": [
-          "interpolate",
-          [
-            "exponential",
-            1.5
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          3,
-          16,
-          12
-        ]
-      }
-    },
-    {
-      "id": "road-layer-low",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "residential",
-        "service",
-        "unclassified"
-      ],
-      "paint": {
-        "line-color": "#ffffff",
-        "line-width": 1.5
-      }
-    },
-    {
-      "id": "road-layer-high",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "filter": [
-        "in",
-        "highway",
-        "primary",
-        "secondary",
-        "tertiary"
-      ],
-      "paint": {
-        "line-color": "#fff",
-        "line-width": [
-          "interpolate",
-          [
-            "exponential",
-            1.5
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          1.5,
-          16,
-          8
-        ]
-      }
-    },
-    {
-      "id": "road-layer-motorway",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "filter": [
-        "==",
-        "highway",
-        "motorway"
-      ],
-      "paint": {
-        "line-color": "#f7d499",
-        "line-width": [
-          "interpolate",
-          [
-            "exponential",
-            1.5
-          ],
-          [
-            "zoom"
-          ],
-          12,
-          2.5,
-          16,
-          10
-        ]
-      }
-    },
-    {
-      "id": "route-line",
-      "type": "line",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
+      "minzoom": 13,
       "layout": {
-        "line-cap": "round",
-        "line-join": "round"
-      },
-      "paint": {
-        "line-color": "#3b82f6",
-        "line-width": 6,
-        "line-opacity": 0.8
-      },
-      "filter": [
-        "==",
-        "id",
-        -1
-      ]
-    },
-    {
-      "id": "road-labels",
-      "type": "symbol",
-      "source": "local-osm-lines",
-      "source-layer": "planet_osm_line",
-      "minzoom": 15,
-      "layout": {
-        "text-field": "{name}",
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
         "text-font": [
           "Noto Sans Regular"
         ],
-        "text-size": 11,
+        "text-size": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          13,
+          11,
+          16,
+          14
+        ],
         "symbol-placement": "line",
         "text-letter-spacing": 0.05,
-        "text-padding": 15,
-        "text-allow-overlap": false,
-        "text-ignore-placement": false
+        "text-padding": 5,
+        "text-allow-overlap": false
       },
       "paint": {
-        "text-color": "#444",
-        "text-halo-color": "#fff",
-        "text-halo-width": 1.5
+        "text-color": "#2D3748",
+        "text-halo-color": "rgba(255,255,255,0.9)",
+        "text-halo-width": 2
       }
     },
     {
-      "id": "poi-icons",
+      "id": "poi-hospital",
       "type": "symbol",
       "source": "local-osm-points",
       "source-layer": "planet_osm_point",
       "minzoom": 13,
+      "filter": [
+        "==",
+        "amenity",
+        "hospital"
+      ],
       "layout": {
-        "visibility": "visible",
-        "icon-image": [
+        "icon-image": "hospital",
+        "icon-size": 1,
+        "text-field": [
           "coalesce",
           [
-            "match",
-            [
-              "get",
-              "shop"
-            ],
-            "supermarket",
-            "grocery-15",
-            "convenience",
-            "grocery-15",
-            "pharmacy",
-            "pharmacy-15",
-            "clothes",
-            "clothing_store-15",
-            ""
+            "get",
+            "name:ar"
           ],
           [
-            "match",
-            [
-              "get",
-              "amenity"
-            ],
-            "restaurant",
-            "restaurant-15",
-            "cafe",
-            "cafe-15",
-            "bank",
-            "bank-15",
-            "pharmacy",
-            "pharmacy-15",
-            "grave_yard",
-            "cemetery-15",
-            "school",
-            "school-15",
-            "university",
-            "college-15",
-            "place_of_worship",
-            "religious-christian-15",
-            "hospital",
-            "hospital-15",
-            "fuel",
-            "fuel-15",
-            ""
+            "get",
+            "name"
           ],
-          [
-            "match",
-            [
-              "get",
-              "historic"
-            ],
-            "monument",
-            "monument-15",
-            "ruins",
-            "attraction-15",
-            "archaeological_site",
-            "attraction-15",
-            ""
-          ],
-          [
-            "match",
-            [
-              "get",
-              "tourism"
-            ],
-            "museum",
-            "museum-15",
-            "hotel",
-            "hotel-15",
-            "attraction",
-            "attraction-15",
-            ""
-          ],
-          [
-            "match",
-            [
-              "get",
-              "landuse"
-            ],
-            "cemetery",
-            "cemetery-15",
-            ""
-          ],
-          "marker-15"
+          ""
         ],
-        "icon-size": 1.1,
-        "icon-padding": 2,
-        "icon-allow-overlap": false
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top",
+        "text-allow-overlap": false
       },
       "paint": {
-        "icon-opacity": 1,
-        "icon-halo-color": "#ffffff",
-        "icon-halo-width": 1
+        "text-color": "#C0392B",
+        "text-halo-color": "white",
+        "text-halo-width": 2
       }
     },
     {
-      "id": "place-labels",
+      "id": "poi-pharmacy",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 15,
+      "filter": [
+        "==",
+        "amenity",
+        "pharmacy"
+      ],
+      "layout": {
+        "icon-image": "pharmacy",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#1A7A3C",
+        "text-halo-color": "white",
+        "text-halo-width": 1.5
+      }
+    },
+    {
+      "id": "poi-place-of-worship",
       "type": "symbol",
       "source": "local-osm-points",
       "source-layer": "planet_osm_point",
       "minzoom": 14,
+      "filter": [
+        "==",
+        "amenity",
+        "place_of_worship"
+      ],
       "layout": {
-        "text-field": "{name}",
+        "icon-image": "tourist",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
         "text-font": [
           "Noto Sans Regular"
         ],
-        "text-size": 12,
+        "text-size": 11,
         "text-offset": [
           0,
-          1.5
+          1.2
         ],
-        "text-anchor": "top",
-        "text-padding": 5,
-        "text-allow-overlap": false,
-        "visibility": "visible"
+        "text-anchor": "top"
       },
       "paint": {
-        "text-color": "#111",
-        "text-halo-color": "#fff",
+        "text-color": "#1A6B3A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-restaurant-cafe",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 16,
+      "filter": [
+        "in",
+        "amenity",
+        "restaurant",
+        "cafe",
+        "fast_food"
+      ],
+      "layout": {
+        "icon-image": [
+          "match",
+          [
+            "get",
+            "amenity"
+          ],
+          "cafe",
+          "cafe",
+          "restaurant"
+        ],
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 10,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#3D4A5C",
+        "text-halo-color": "white",
         "text-halo-width": 1.5
       }
+    },
+    {
+      "id": "poi-school",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 14,
+      "filter": [
+        "in",
+        "amenity",
+        "school",
+        "university",
+        "college"
+      ],
+      "layout": {
+        "icon-image": "college",
+        "icon-size": 0.8,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.2
+        ],
+        "text-anchor": "top"
+      },
+      "paint": {
+        "text-color": "#5A4A8A",
+        "text-halo-color": "white",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "poi-transit-station",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 12,
+      "filter": [
+        "any",
+        [
+          "==",
+          "railway",
+          "station"
+        ],
+        [
+          "==",
+          "railway",
+          "halt"
+        ],
+        [
+          "==",
+          "railway",
+          "tram_stop"
+        ],
+        [
+          "==",
+          "station",
+          "subway"
+        ],
+        [
+          "==",
+          "amenity",
+          "bus_station"
+        ]
+      ],
+      "layout": {
+        "icon-image": "rail",
+        "icon-size": 1,
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": 11,
+        "text-offset": [
+          0,
+          1.4
+        ],
+        "text-anchor": "top",
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": "#CC2233",
+        "text-halo-color": "rgba(255,255,255,0.95)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-area",
+      "type": "symbol",
+      "source": "local-osm-polygons",
+      "source-layer": "planet_osm_polygon",
+      "minzoom": 10,
+      "filter": [
+        "has",
+        "name"
+      ],
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          10,
+          14,
+          13
+        ],
+        "text-padding": 8,
+        "text-allow-overlap": false,
+        "text-ignore-placement": false
+      },
+      "paint": {
+        "text-color": "#34495E",
+        "text-halo-color": "rgba(255,255,255,0.85)",
+        "text-halo-width": 2
+      }
+    },
+    {
+      "id": "place-labels-point",
+      "type": "symbol",
+      "source": "local-osm-points",
+      "source-layer": "planet_osm_point",
+      "minzoom": 10,
+      "filter": [
+        "any",
+        [
+          "in",
+          "place",
+          "city",
+          "town",
+          "village",
+          "suburb",
+          "neighbourhood",
+          "hamlet",
+          "locality",
+          "quarter"
+        ],
+        [
+          "in",
+          "natural",
+          "peak",
+          "spring"
+        ]
+      ],
+      "layout": {
+        "text-field": [
+          "coalesce",
+          [
+            "get",
+            "name:ar"
+          ],
+          [
+            "get",
+            "name"
+          ],
+          ""
+        ],
+        "text-font": [
+          "Noto Sans Regular"
+        ],
+        "text-size": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "zoom"
+          ],
+          10,
+          [
+            "match",
+            [
+              "get",
+              "place"
+            ],
+            "city",
+            16,
+            "town",
+            14,
+            11
+          ],
+          14,
+          [
+            "match",
+            [
+              "get",
+              "place"
+            ],
+            "city",
+            20,
+            "town",
+            16,
+            13
+          ],
+          17,
+          14
+        ],
+        "text-letter-spacing": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          0.08,
+          "town",
+          0.05,
+          0.02
+        ],
+        "text-anchor": "center",
+        "text-padding": 10,
+        "text-allow-overlap": false
+      },
+      "paint": {
+        "text-color": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          "#1A2740",
+          "town",
+          "#2C3E50",
+          "village",
+          "#3D4F62",
+          "suburb",
+          "#4A5568",
+          "neighbourhood",
+          "#556677",
+          "#607080"
+        ],
+        "text-halo-color": "rgba(255,255,255,0.92)",
+        "text-halo-width": [
+          "match",
+          [
+            "get",
+            "place"
+          ],
+          "city",
+          3,
+          "town",
+          2.5,
+          2
+        ]
+      }
     }
   ]
-}
+}
\ No newline at end of file