:root{
      --accent: #2563eb;
      --muted: #6b7280;
      --card: rgba(255,255,255,0.95);
    }
    html,body{height:100%;margin:0;font-family:Inter, system-ui, Arial, sans-serif;background:#f3f6fb}
    #map{height:100vh;width:100%}

    #sidebar{
      position:absolute; top:18px; left:18px; z-index:1100;
      width:320px;
      background:var(--card);
      border-radius:12px;
      box-shadow:0 8px 30px rgba(20,20,40,0.12);
      padding:14px;
      overflow:hidden;
    }
    #sidebar h1{font-size:18px;margin:0 0 8px 0;color:#0f172a}
    .controls{display:flex;gap:8px;margin-bottom:10px}
    .search{
      flex:1;
      padding:8px 10px;border-radius:10px;border:1px solid #e6e9ef;font-size:14px;
    }
    .btn{
      background:var(--accent); color:white; border:none; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:14px;
    }
    .small-btn{background:white;color:var(--accent);border:1px solid #e6e9ef;padding:7px 8px;border-radius:8px;cursor:pointer}
    .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
    .chip{padding:6px 8px;border-radius:999px;background:#fff;border:1px solid #eef2ff;color:var(--muted);font-size:13px;cursor:pointer}
    .chip.active{background:linear-gradient(90deg,#eef2ff,#e6f0ff);color:var(--accent);border-color:rgba(37,99,235,0.15)}
    .places-list{max-height:52vh;overflow:auto;padding-right:6px}
    .place-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fbfdff);margin-bottom:8px;border:1px solid #eef2f7}
    .place-meta{font-size:13px;color:var(--muted)}
    .place-title{font-weight:600;color:#0f172a}
    .footer-card{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

    .floating-controls{
      position:absolute;right:18px;top:18px;z-index:1100;display:flex;flex-direction:column;gap:8px
    }
    .float-btn{background:white;border-radius:10px;padding:10px 12px;border:1px solid #eef2f7;cursor:pointer;box-shadow:0 6px 18px rgba(12,15,30,0.06)}

    @media (max-width:880px){
      #sidebar{
        left:10px;right:10px;width:auto;top:14px;padding:12px;
      }
      .places-list{max-height:34vh}
    }

    @media (max-width:600px){
      #sidebar{
        width:100%;
        left:0; right:0;
        border-radius:0 0 12px 12px;
      }
      #sidebar h1{
        font-size:16px;
      }
      .place-item{
        flex-direction:column;
        align-items:flex-start;
      }
      .controls{
        flex-direction:column;
      }
      .filters{
        justify-content:center;
      }
      .floating-controls{
        right:10px; top:auto; bottom:20px;
      }
    }

    @media (max-width:420px){
      #sidebar{
        padding:10px;
      }
      .chip{font-size:12px;padding:5px 6px}
      .place-title{font-size:14px}
    }
    #sidebar {
  transition: 0.3s ease;
}